Lerna versionbump [ci skip]

- @navikt/ds-react@0.17.2
 - @navikt/ds-react-internal@0.12.2

.github/workflows/build-publish.yml

@@ -1,16 +1,17 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 
-name: Build, test and maybe publish
+name: Build -> Test -> Publish
 
 on:
   push:
     branches: [master]
   pull_request:
     branches: [master]
+  workflow_dispatch:
 
 jobs:
-  build:
+  test-build:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     runs-on: ubuntu-latest
     steps:
@@ -26,34 +27,33 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
         run: yarn boot
       - name: Eslint and Stylelint
         run: yarn lint
-      - name: Test gatsby-build
-        run: yarn build:gatsby
-      - name: Test chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          projectToken: ${{ secrets.CHROMATIC }}
-          exitZeroOnChanges: true
+      - name: Test
+        run: yarn test
 
   publish-npm:
-    needs: build
+    needs: test-build
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+    if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: "0"
           token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          registry-url: http://registry.npmjs.org
+          registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
         uses: actions/cache@v2
@@ -61,63 +61,37 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
+      - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
-      - name: Gulp-build
+      - name: Boot
         run: yarn boot
-      - run: git config --global user.email "github-actions[bot]@users.noreply.github.com"
-      - run: git config --global user.name "github-actions[bot]"
-      - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
-        env:
-          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --yes
-      - run: yarn lerna publish from-package --yes
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}
-
-  publish-pages:
-    needs: publish-npm
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push'
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: "0"
-          token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
-        run: yarn boot
-      - name: Building Gatsby
-        run: yarn build:gatsby
-      - name: Building Storybook
-        run: yarn build-storybook
-
-      - name: Deploy to Design.nav.no 🚀
-        uses: JamesIves/github-pages-deploy-action@3.6.2
-        with:
-          GITHUB_TOKEN: $NAV_DS_TOKEN
-          BRANCH: gh-pages
-          FOLDER: website/public
+      - name: Setup github connection for auth
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
 
-      - name: Deploy storybook
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Update changed packages with PATCH
+        if: "contains(github.event.head_commit.message, '[fix]')"
+        run: yarn lerna version patch --include-merged-tags --yes
+      - name: Update changed packages with MINOR
+        if: "contains(github.event.head_commit.message, '[feature]')"
+        run: yarn lerna version minor --include-merged-tags --yes
+      - name: Update changed packages with MAJOR
+        if: "contains(github.event.head_commit.message, '[breaking]')"
+        run: yarn lerna version major --include-merged-tags --yes
+      - name: Publish to NPM registry
+        run: yarn lerna publish --no-verify-access from-package --yes
+
+      - name: Create a .npmrc file for the github package repository
+        uses: FerLuisxd/create-npmrc@3
         with:
-          personal_token: ${{secrets.GIT_REPO}}
-          external_repository: navikt/designsystemet
-          publish_dir: ./storybook-static
-          user_name: "github-actions[bot]"
-          user_email: "github-actions[bot]@users.noreply.github.com"
+          org_name: navikt
+        env:
+          AUTH_TOKEN: ${{secrets.GIT_REPO}}
+      - name: Publish to Github registry
+        run: |
+          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes

.github/workflows/chromatic.yml

@@ -0,0 +1,126 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  chromatic-pr:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        id: chromatic_tests
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          exitZeroOnChanges: false
+
+      - name: replace storybook url
+        uses: frabert/replace-string-action@v2.0
+        id: storybook_url
+        with:
+          pattern: "(iframe.html)"
+          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
+          replace-with: ""
+
+      - name: Get commit sha
+        id: vars
+        shell: bash
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Chromatic build-output
+
+      - name: Create or update comment
+        if: steps.chromatic_tests.outcome == 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Chromatic build-output:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :white_check_mark: SUCCESS :white_check_mark:
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+      - name: Create or update failed comment
+        if: steps.chromatic_tests.outcome != 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            **Chromatic build-output**:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+  chromatic-push:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          autoAcceptChanges: true

.github/workflows/update-icons.yml

@@ -0,0 +1,42 @@
+name: Update Icons
+
+on:
+#  schedule:
+ #   - cron: 0 0 * * *
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update Icons
+        run: yarn update:icons
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GIT_REPO }}
+          commit-message: "Ikoner synket fra figma"
+          branch: figma-icons-sync
+          committer: GitHub <noreply@github.com>
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
+          signoff: false
+          delete-branch: true
+          title: "[FIX] Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -0,0 +1,39 @@
+name: Update tokens
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false

.gitignore

@@ -41,6 +41,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.npmrc
 
 # Optional eslint cache
 .eslintcache
@@ -99,7 +100,6 @@ examples/webpack/out
 
 *.d.ts
 *-exports.less
-**/css/
 */figma-api/icons
 */ds-icons/png
 packages/**/css
@@ -107,11 +107,13 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/ds-icons/NAV-ikonpakke-png.zip
-@navikt/ds-icons/NAV-ikonpakke-svg.zip
+@navikt/core/icons/NAV-ikonpakke-png.zip
+@navikt/core/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 
 react-docgen.json
+react-docgen-docs.json
 cjs
-esm
+esm
+.vercel

.storybook/main.js

@@ -1,17 +1,19 @@
+const getStories = () => {
+  return process.env.stories
+    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
+    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
+};
+
 module.exports = {
   webpackFinal: async (config, { configType }) => {
     config.devServer = { stats: "errors-only" };
     return config;
   },
   devServer: { stats: "errors-only" },
-  stories: [
-    "../.storybook/**/*.stories.@(mdx)",
-    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-  ],
+  stories: () => getStories(),
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-docs",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",
       options: {
@@ -27,6 +29,9 @@ module.exports = {
         controls: { hideNoControlsWarning: true },
       },
     },
-    "@whitespace/storybook-addon-html",
   ],
+  core: {
+    builder: "webpack5",
+  },
+  staticDirs: ["./public"],
 };

.storybook/preview-body.html

@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>

.storybook/preview-head.html

@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>

.storybook/preview.js

@@ -1,5 +1,10 @@
-import "nav-frontend-core";
 import "@navikt/ds-css/index.css";
+import "@navikt/ds-css-internal/index.css";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+
+initialize();
+
+export const decorators = [mswDecorator];
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/public/mockServiceWorker.js

@@ -0,0 +1,338 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (0.36.5).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = "02f4ad4a2797f85668baf196e553d929";
+const bypassHeaderName = "x-msw-bypass";
+const activeClientIds = new Set();
+
+self.addEventListener("install", function () {
+  return self.skipWaiting();
+});
+
+self.addEventListener("activate", async function (event) {
+  return self.clients.claim();
+});
+
+self.addEventListener("message", async function (event) {
+  const clientId = event.source.id;
+
+  if (!clientId || !self.clients) {
+    return;
+  }
+
+  const client = await self.clients.get(clientId);
+
+  if (!client) {
+    return;
+  }
+
+  const allClients = await self.clients.matchAll();
+
+  switch (event.data) {
+    case "KEEPALIVE_REQUEST": {
+      sendToClient(client, {
+        type: "KEEPALIVE_RESPONSE",
+      });
+      break;
+    }
+
+    case "INTEGRITY_CHECK_REQUEST": {
+      sendToClient(client, {
+        type: "INTEGRITY_CHECK_RESPONSE",
+        payload: INTEGRITY_CHECKSUM,
+      });
+      break;
+    }
+
+    case "MOCK_ACTIVATE": {
+      activeClientIds.add(clientId);
+
+      sendToClient(client, {
+        type: "MOCKING_ENABLED",
+        payload: true,
+      });
+      break;
+    }
+
+    case "MOCK_DEACTIVATE": {
+      activeClientIds.delete(clientId);
+      break;
+    }
+
+    case "CLIENT_CLOSED": {
+      activeClientIds.delete(clientId);
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId;
+      });
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister();
+      }
+
+      break;
+    }
+  }
+});
+
+// Resolve the "main" client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId);
+
+  if (client.frameType === "top-level") {
+    return client;
+  }
+
+  const allClients = await self.clients.matchAll();
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === "visible";
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id);
+    });
+}
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event);
+  const response = await getResponse(event, client, requestId);
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    (async function () {
+      const clonedResponse = response.clone();
+      sendToClient(client, {
+        type: "RESPONSE",
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: serializeHeaders(clonedResponse.headers),
+          redirected: clonedResponse.redirected,
+        },
+      });
+    })();
+  }
+
+  return response;
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event;
+  const requestClone = request.clone();
+  const getOriginalResponse = () => fetch(requestClone);
+
+  // Bypass mocking when the request client is not active.
+  if (!client) {
+    return getOriginalResponse();
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return await getOriginalResponse();
+  }
+
+  // Bypass requests with the explicit bypass header
+  if (requestClone.headers.get(bypassHeaderName) === "true") {
+    const cleanRequestHeaders = serializeHeaders(requestClone.headers);
+
+    // Remove the bypass header to comply with the CORS preflight check.
+    delete cleanRequestHeaders[bypassHeaderName];
+
+    const originalRequest = new Request(requestClone, {
+      headers: new Headers(cleanRequestHeaders),
+    });
+
+    return fetch(originalRequest);
+  }
+
+  // Send the request to the client-side MSW.
+  const reqHeaders = serializeHeaders(request.headers);
+  const body = await request.text();
+
+  const clientMessage = await sendToClient(client, {
+    type: "REQUEST",
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: reqHeaders,
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body,
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  });
+
+  switch (clientMessage.type) {
+    case "MOCK_SUCCESS": {
+      return delayPromise(
+        () => respondWithMock(clientMessage),
+        clientMessage.payload.delay
+      );
+    }
+
+    case "MOCK_NOT_FOUND": {
+      return getOriginalResponse();
+    }
+
+    case "NETWORK_ERROR": {
+      const { name, message } = clientMessage.payload;
+      const networkError = new Error(message);
+      networkError.name = name;
+
+      // Rejecting a request Promise emulates a network error.
+      throw networkError;
+    }
+
+    case "INTERNAL_ERROR": {
+      const parsedBody = JSON.parse(clientMessage.payload.body);
+
+      console.error(
+        `\
+[MSW] Uncaught exception in the request handler for "%s %s":
+
+${parsedBody.location}
+
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
+`,
+        request.method,
+        request.url
+      );
+
+      return respondWithMock(clientMessage);
+    }
+  }
+
+  return getOriginalResponse();
+}
+
+self.addEventListener("fetch", function (event) {
+  const { request } = event;
+  const accept = request.headers.get("accept") || "";
+
+  // Bypass server-sent events.
+  if (accept.includes("text/event-stream")) {
+    return;
+  }
+
+  // Bypass navigation requests.
+  if (request.mode === "navigate") {
+    return;
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+    return;
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return;
+  }
+
+  const requestId = uuidv4();
+
+  return event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === "NetworkError") {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url
+        );
+        return;
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`
+      );
+    })
+  );
+});
+
+function serializeHeaders(headers) {
+  const reqHeaders = {};
+  headers.forEach((value, name) => {
+    reqHeaders[name] = reqHeaders[name]
+      ? [].concat(reqHeaders[name]).concat(value)
+      : value;
+  });
+  return reqHeaders;
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel();
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error);
+      }
+
+      resolve(event.data);
+    };
+
+    client.postMessage(JSON.stringify(message), [channel.port2]);
+  });
+}
+
+function delayPromise(cb, duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(cb()), duration);
+  });
+}
+
+function respondWithMock(clientMessage) {
+  return new Response(clientMessage.payload.body, {
+    ...clientMessage.payload,
+    headers: clientMessage.payload.headers,
+  });
+}
+
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}

.storybook/stories/introduction.stories.mdx

@@ -1,33 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="ds-react/Kom i gang" />
-
-# Ta i bruk `@navikt/ds-react` pakken
-
-## Oppsett
-
-```bash
-yarn add @navikt/ds-react @navikt/ds-css
-```
-
-Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
-Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
-
-```bash
-import "@navikt/ds-css"
-```
-
-Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
-
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing

.storybook/webpack.config.js

@@ -1,22 +1,15 @@
 const path = require("path");
 
 module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push(
-    {
-      test: /\.css$/,
-      use: ["style-loader", "css-loader"],
-      include: [
-        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
-      ],
-    },
-    {
-      test: /\.less$/,
-      loaders: ["style-loader", "css-loader", "less-loader"],
-      include: path.resolve(__dirname, "../packages/"),
-    }
-  );
+  baseConfig.config.module.rules.push({
+    test: /\.css$/,
+    use: ["style-loader", "css-loader"],
+    include: [
+      path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
+    ],
+  });
   baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve?.alias,
+    ...baseConfig.config.resolve.alias,
     "./normalize.css": path.resolve(
       __dirname,
       "../node_modules/normalize.css/normalize.css"

@navikt/README.md

@@ -0,0 +1,3 @@
+# Designsystem v2
+
+Storybook: https://navikt.github.io/Designsystemet/

@navikt/core/css/accordion.css

@@ -0,0 +1,98 @@
+:root {
+  --navds-accordion-color-text: var(--navds-semantic-color-text);
+  --navds-accordion-color-background: var(
+    ---navds-semantic-color-component-background-light
+  );
+  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
+  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
+  --navds-accordion-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
+  --navds-accordion-color-text-open-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-background-open: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+}
+
+.navds-accordion .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-accordion {
+  background: var(--navds-accordion-color-background);
+}
+
+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__header:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+}
+
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  color: var(--navds-accordion-color-text-open);
+  border-color: transparent;
+}
+
+.navds-accordion__item--open > .navds-accordion__header:hover {
+  border-color: transparent;
+  color: var(--navds-accordion-color-text-open-hover);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__item--open
+  > .navds-accordion__header:hover
+  + *
+  .navds-accordion__content {
+  border-color: var(--navds-accordion-color-border-hover);
+}
+
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
+}
+
+.navds-accordion__expand-icon--filled {
+  display: none;
+}
+
+.navds-accordion__header:hover
+  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-accordion__header:hover > .navds-accordion__expand-icon {
+  display: none;
+}

@navikt/core/css/alert.css

@@ -0,0 +1,149 @@
+:root {
+  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
+  --navds-alert-color-error-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
+  --navds-alert-color-error-background: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-alert-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
+  );
+  --navds-alert-color-warning-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-alert-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
+  --navds-alert-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-alert-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-alert-color-success-background: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-alert-color-error-icon: var(
+    --navds-semantic-color-feedback-danger-icon
+  );
+  --navds-alert-color-error-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-warning-icon: var(
+    --navds-semantic-color-feedback-warning-icon
+  );
+  --navds-alert-color-warning-icon-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
+  --navds-alert-color-info-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-success-icon: var(
+    --navds-semantic-color-feedback-success-icon
+  );
+  --navds-alert-color-success-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+}
+
+.navds-alert {
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: var(--navds-alert-color-border);
+  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
+  display: flex;
+  gap: var(--navds-spacing-3);
+  align-items: center;
+}
+
+.navds-alert__wrapper {
+  max-width: 43.5rem;
+}
+
+.navds-alert--small {
+  padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
+}
+
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--navds-font-line-height-xlarge);
+}
+
+.navds-alert--small > .navds-alert__icon {
+  font-size: 1.25rem;
+  height: var(--navds-font-line-height-large);
+}
+
+.navds-alert--error {
+  border-color: var(--navds-alert-color-error-border);
+  background-color: var(--navds-alert-color-error-background);
+}
+
+.navds-alert--error > .navds-alert__icon {
+  color: var(--navds-alert-color-error-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-error-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--warning {
+  border-color: var(--navds-alert-color-warning-border);
+  background-color: var(--navds-alert-color-warning-background);
+}
+
+.navds-alert--warning > .navds-alert__icon {
+  color: var(--navds-alert-color-warning-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-warning-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--info {
+  border-color: var(--navds-alert-color-info-border);
+  background-color: var(--navds-alert-color-info-background);
+}
+
+.navds-alert--info > .navds-alert__icon {
+  color: var(--navds-alert-color-info-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-info-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--success {
+  border-color: var(--navds-alert-color-success-border);
+  background-color: var(--navds-alert-color-success-background);
+}
+
+.navds-alert--success > .navds-alert__icon {
+  color: var(--navds-alert-color-success-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-success-icon-background) 50%,
+    0,
+    transparent
+  );
+}
+
+.navds-alert--inline {
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0;
+}

@navikt/core/css/baseline/baseline.css

@@ -6,19 +6,29 @@
 @import "print.css";
 @import "utility.css";
 
-html:focus-within {
-  scroll-behavior: smooth;
+/* Disabled because of UU concerns */
+
+/* @import "smooth-scroll.css"; */
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
 body {
   font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
+  line-height: 1.333;
+  color: var(--navds-semantic-color-text);
   font-size: 1.125rem;
 }
 
 a {
-  color: var(--navds-color-text-link);
+  color: var(--navds-semantic-color-link);
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

@navikt/core/css/baseline/smooth-scroll.css

@@ -0,0 +1,28 @@
+/**
+* Solution copied from blogpost
+* https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
+*/
+
+@keyframes smoothscroll1 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+@keyframes smoothscroll2 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+html {
+  animation: smoothscroll1 1s;
+}
+
+html:focus-within {
+  animation-name: smoothscroll2;
+  scroll-behavior: smooth;
+}

@navikt/core/css/baseline/utility.css

@@ -9,7 +9,8 @@
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
-.sr-only {
+.sr-only,
+.navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -32,7 +33,9 @@
  */
 
 .sr-only.focusable:active,
-.sr-only.focusable:focus {
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;

@navikt/core/css/button.css

@@ -0,0 +1,282 @@
+:root {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-primary-border-focus: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-primary-background: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-primary-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-border: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+
+  /* Tertiary */
+  --navds-button-color-tertiary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-tertiary-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-active: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-tertiary-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+
+  /* Danger */
+  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-danger-background: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-button-color-danger-background-hover: var(
+    --navds-semantic-color-interaction-danger-hover
+  );
+  --navds-button-color-danger-background-active: var(
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+
+  /* Loader */
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
+.navds-button {
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  min-width: 48px;
+  padding: var(--navds-spacing-3);
+}
+
+.navds-button--small {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  min-width: 32px;
+}
+
+.navds-button--xsmall {
+  padding: 0.125rem 0.375rem;
+  min-width: 24px;
+}
+
+.navds-button:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-button__inner {
+  margin: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-button svg {
+  font-size: 1.5rem;
+}
+
+.navds-button--small svg,
+.navds-button--xsmall svg {
+  font-size: 1.25rem;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  color: var(--navds-button-color-primary-text);
+}
+
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
+}
+
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
+.navds-button--secondary:hover {
+  color: var(--navds-button-color-secondary-text-hover);
+  background-color: var(--navds-button-color-secondary-background-hover);
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--secondary:active {
+  color: var(--navds-button-color-secondary-text-active);
+  background-color: var(--navds-button-color-secondary-background-active);
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus:hover,
+.navds-button--secondary:focus:active {
+  box-shadow: inset 0 0 0 1px
+      var(--navds-button-color-secondary-border-focus-active-hover),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--secondary:disabled,
+.navds-button--secondary:hover:disabled {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  color: var(--navds-button-color-tertiary-text);
+}
+
+.navds-button--tertiary:hover {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
+}
+
+.navds-button--tertiary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--tertiary:active {
+  color: var(--navds-button-color-tertiary-text-active);
+  background-color: var(--navds-button-color-tertiary-background-active);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--navds-button-color-danger-background);
+  color: var(--navds-button-color-danger-text);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--navds-button-color-danger-background-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--navds-button-color-danger-background-active);
+}
+
+.navds-button--danger:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
+    var(--navds-shadow-focus);
+}
+
+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:disabled {
+  cursor: not-allowed;
+}
+
+.navds-button:disabled:not(.navds-button--loading) {
+  opacity: 0.3;
+}
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}

@navikt/core/css/card.css

@@ -0,0 +1,55 @@
+:root {
+  --navds-card-micro-color-text: var(--navds-semantic-color-text);
+  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
+  --navds-card-micro-color-border: transparent;
+  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-card-micro-color-background-active: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+}
+
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-card-micro-color-text);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-card-micro-color-background);
+  border: 1px solid var(--navds-card-micro-color-border);
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-card-micro-color-background-hover);
+  border-color: var(--navds-card-micro-color-border-hover);
+  color: var(--navds-card-micro-color-text-hover);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-card-micro-color-background-focus);
+  color: var(--navds-card-micro-color-text-focus);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-card-micro-color-background-active);
+  color: var(--navds-card-micro-color-text-active);
+}

@navikt/core/css/content-container.css

@@ -0,0 +1,12 @@
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 79.5rem;
+  padding: var(--navds-spacing-4);
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--navds-spacing-6);
+  }
+}

@navikt/core/css/form/confirmation-panel.css

@@ -0,0 +1,98 @@
+:root {
+  --navds-confirmation-panel-color-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-confirmation-panel-color-background-checked: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-confirmation-panel-color-border-checked: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
+    --navds-global-color-green-700
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
+    --navds-global-color-green-700
+  );
+  --navds-confirmation-panel-color-checkbox-background-checked: var(
+    --navds-global-color-green-500
+  );
+  --navds-confirmation-panel-color-checkbox-border-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-confirmation-panel-color-checkbox-label-checked: var(
+    --navds-semantic-color-text
+  );
+}
+
+.navds-confirmation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  background-color: var(--navds-confirmation-panel-color-background);
+  transition: background-color linear 100ms;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--small {
+  padding: var(--navds-spacing-3);
+  gap: var(--navds-spacing-2);
+}
+
+.navds-confirmation-panel--checked {
+  background-color: var(--navds-confirmation-panel-color-background-checked);
+  border-color: var(--navds-confirmation-panel-color-border-checked);
+}
+
+.navds-confirmation-panel--error {
+  background-color: var(--navds-confirmation-panel-color-background-error);
+  border: 1px solid transparent;
+}
+
+.navds-confirmation-panel
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  text-decoration: underline;
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input
+  + .navds-checkbox__label::before {
+  transition: none;
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked
+  );
+  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label::before {
+  background-color: var(
+    --navds-confirmation-panel-color-checkbox-background-checked-hover
+  );
+  border-color: var(
+    --navds-confirmation-panel-color-checkbox-border-checked-hover
+  );
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:focus:hover
+  + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+}

@navikt/core/css/form/error-message.css

@@ -0,0 +1,15 @@
+:root {
+  --navds-error-message-color-text: var(
+    --navds-semantic-color-feedback-danger-text
+  );
+}
+
+.navds-error-message {
+  color: var(--navds-error-message-color-text);
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-error-message::before {
+  content: "•";
+}

@navikt/core/css/form/error-summary.css

@@ -0,0 +1,34 @@
+:root {
+  --navds-error-summary-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-error-summary-color-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
+}
+
+.navds-error-summary {
+  background-color: var(--navds-error-summary-color-background);
+  padding: var(--navds-spacing-4);
+  border: 4px solid var(--navds-error-summary-color-border);
+}
+
+.navds-error-summary--small {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-error-summary:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-error-summary__list {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: 0.5rem 0;
+}

@navikt/core/css/form/fieldset.css

@@ -0,0 +1,24 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: var(--navds-spacing-2);
+}
+
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,10 @@
+.navds-form-field > :not(:first-child):not(:empty),
+.navds-form-field > input:not(:first-child) {
+  margin-top: var(--navds-spacing-2);
+}
+
+/* Applied when hideLabel is applied to form-element */
+.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .navds-sr-only + input:not(:first-child) {
+  margin-top: 0;
+}

@navikt/core/css/form/index.css

@@ -0,0 +1,14 @@
+/*
+  Order matters; rearrange with care
+*/
+@import "fieldset.css";
+@import "form.css";
+@import "error-summary.css";
+@import "confirmation-panel.css";
+@import "error-message.css";
+@import "radio-checkbox.css";
+@import "select.css";
+@import "switch.css";
+@import "text-field.css";
+@import "textarea.css";
+@import "search.css";

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

@@ -0,0 +1,212 @@
+:root {
+  --navds-radio-checkbox-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-radio-checkbox-color-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
+  --navds-radio-checkbox-color-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-radio-checkbox-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  left: -12px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--navds-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-checkbox-color-background);
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-radio__label::before {
+  border-radius: 50%;
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-checkbox__description,
+.navds-radio__description {
+  color: var(--navds-radio-checkbox-color-text);
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 32px;
+  height: 32px;
+  top: 0;
+  left: -6px;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: 6px 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--navds-radio-checkbox-color-background);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small
+  .navds-checkbox__input:indeterminate
+  + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-position: 6px center;
+  background-repeat: no-repeat;
+  background-size: 13px;
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox--small
+  > .navds-checkbox__input:checked
+  + .navds-checkbox__label::before {
+  background-position: 4px center;
+}
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--navds-radio-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}

@navikt/core/css/form/search.css

@@ -0,0 +1,123 @@
+:root {
+  --navds-search-color-border: var(--navds-semantic-color-border);
+  --navds-search-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-search {
+  display: flex;
+  flex-direction: column;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  padding-right: var(--navds-spacing-12);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-form-field--small .navds-search__input {
+  min-height: 32px;
+  padding: 0.15rem;
+  padding-right: var(--navds-spacing-8);
+}
+
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--navds-border-radius-medium);
+  color: var(--navds-semantic-color-text);
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--navds-global-color-blue-500);
+}
+
+.navds-search__button-clear:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 64px;
+  min-height: 32px;
+  border-radius: 0;
+  border-top-right-radius: var(--navds-border-radius-medium);
+  border-bottom-right-radius: var(--navds-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 40px;
+}
+
+.navds-search__button-search.navds-button--tertiary {
+  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
+    0 1px 0 0 var(--navds-search-color-border) inset,
+    0 -1px 0 0 var(--navds-search-color-border) inset;
+}
+
+.navds-search__button-search.navds-button--tertiary:hover {
+  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
+    0 1px 0 0 var(--navds-search-color-border-hover) inset,
+    0 -1px 0 0 var(--navds-search-color-border-hover) inset,
+    -1px 0 0 0 var(--navds-search-color-border-hover);
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within
+  + .navds-search__button-search.navds-button--tertiary:hover {
+  z-index: auto;
+}
+
+.navds-search__button-search.navds-button--tertiary:focus {
+  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
+    var(--navds-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--tertiary:focus:hover {
+  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
+    var(--navds-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--tertiary:focus:active {
+  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus,
+.navds-search__button-clear,
+.navds-search__button-search:focus {
+  z-index: 1;
+}

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

@@ -0,0 +1,85 @@
+:root {
+  --navds-select-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-select-color-border: var(--navds-semantic-color-border);
+  --navds-select-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-select-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-select-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-select-color-text-disabled: var(--navds-semantic-color-text);
+}
+
+.navds-select__input {
+  appearance: none;
+  background-color: var(--navds-select-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-select-color-border);
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 48px;
+  display: inline-block;
+  position: relative;
+  padding: 0.5rem;
+  padding-right: 2.5rem;
+}
+
+.navds-select__input:hover {
+  border-color: var(--navds-select-color-border-hover);
+}
+
+.navds-select__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1rem;
+  right: 0.5rem;
+  pointer-events: none;
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 32px;
+  padding: 0.25rem;
+  padding-right: 2rem;
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
+  border-color: var(--navds-select-color-border-error);
+}
+
+/*
+  Disabled handling
+ */
+.navds-select--disabled {
+  opacity: 0.3;
+}
+
+.navds-select__input:disabled {
+  background-color: var(--navds-select-color-background);
+  border-color: var(--navds-select-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}

@navikt/core/css/form/switch.css

@@ -0,0 +1,220 @@
+:root {
+  --navds-switch-color-label: var(--navds-semantic-color-text);
+  --navds-switch-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-track-background-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-switch-color-track-background-hover: var(
+    --navds-global-color-gray-800
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-feedback-success-icon
+  );
+  --navds-switch-color-track-shadow-inner-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-thumb-icon-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-switch-color-thumb-loader-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--navds-switch-color-label);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 0
+    calc(var(--navds-spacing-2) - 2px) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
+    calc(var(--navds-spacing-2) - 2px) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--navds-switch-color-label-hover);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--navds-switch-color-track-background);
+  position: absolute;
+  top: var(--navds-spacing-3);
+  left: 0;
+  border-radius: 4px;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--navds-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover);
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover-checked);
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background);
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
+    var(--navds-shadow-focus);
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--navds-switch-color-thumb);
+  color: var(--navds-switch-color-thumb-icon);
+  border-radius: 2.5px;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+  color: var(--navds-switch-color-thumb-icon-checked);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(2px);
+  }
+
+  .navds-switch__input:checked:hover
+    ~ .navds-switch__track
+    > .navds-switch__thumb {
+    transform: translateX(18px);
+  }
+}
+
+.navds-switch__input:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+/* Loader */
+.navds-switch__input:checked
+  ~ .navds-switch__track
+  > .navds-switch__thumb
+  .navds-loader__foreground {
+  stroke: var(--navds-switch-color-thumb-loader-checked);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,95 @@
+:root {
+  --navds-text-field-color-text: var(--navds-semantic-color-text);
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border);
+  --navds-text-field-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-text-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-text-field-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-text-field-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+  color: var(--navds-text-field-color-text);
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0 0.25rem;
+  min-height: 32px;
+}
+
+.navds-form-field--small > .navds-text-field__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--navds-text-field-color-border-hover);
+}
+
+.navds-text-field__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--navds-text-field-color-border-error);
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
+}
+
+.navds-text-field--error
+  > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
+    var(--navds-shadow-focus);
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--disabled > .navds-text-field__label,
+.navds-text-field--disabled > .navds-text-field__description {
+  opacity: 0.3;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

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

@@ -0,0 +1,109 @@
+:root {
+  --navds-textarea-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-textarea-color-border: var(--navds-semantic-color-border);
+  --navds-textarea-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-textarea-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
+  --navds-textarea-color-counter-text-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-textarea-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+}
+
+.navds-textarea__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.navds-textarea__input {
+  appearance: none;
+  padding: var(--navds-spacing-2);
+  background-color: var(--navds-textarea-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-textarea-color-border);
+  resize: none;
+  width: 100%;
+  transition: height 0.1s ease-out;
+  display: block;
+  min-height: 3rem;
+}
+
+.navds-textarea--counter {
+  padding-bottom: var(--navds-spacing-8);
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--navds-textarea-color-border-hover);
+}
+
+.navds-textarea__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--navds-spacing-1);
+  min-height: 2rem;
+}
+
+.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
+  padding-bottom: var(--navds-spacing-7);
+}
+
+.navds-textarea__counter {
+  pointer-events: none;
+  color: var(--navds-textarea-color-counter-text);
+  font-style: italic;
+  position: absolute;
+  text-align: right;
+  left: var(--navds-spacing-3);
+  right: var(--navds-spacing-3);
+  bottom: var(--navds-spacing-2);
+}
+
+.navds-textarea__counter--error {
+  color: var(--navds-textarea-color-counter-text-error);
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error
+  .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
+  border-color: var(--navds-textarea-color-border-error);
+}
+
+/*
+  Disabled handling
+ */
+.navds-textarea--disabled {
+  opacity: 0.3;
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-textarea__input[readonly] {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}

@navikt/core/css/grid.css

@@ -5,12 +5,12 @@
 .navds-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-grid-gutter-small);
+  grid-gap: var(--navds-spacing-4);
 }
 
 @media (min-width: 448px) {
   .navds-grid {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+    grid-gap: var(--navds-spacing-6);
   }
 }
 

@navikt/core/css/guide-panel.css

@@ -0,0 +1,80 @@
+:root {
+  --navds-guide-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
+  --navds-guide-panel-color-illustration-background: var(
+    --navds-global-color-blue-200
+  );
+}
+
+/**
+ * GuidePanel component
+ */
+.navds-guide-panel {
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--navds-guide-panel-color-background);
+  border-radius: 4px;
+  border: 2px solid var(--navds-guide-panel-color-border);
+  min-height: 7.25rem;
+  padding: 1.5rem;
+  padding-left: 3.5rem;
+}
+
+.navds-guide-panel--poster {
+  padding-left: 0;
+  padding-top: 3.125rem;
+}
+
+.navds-guide-panel--poster .navds-guide-panel__content {
+  padding: 2rem;
+  padding-top: 4.25rem;
+}
+
+.navds-guide-panel .navds-guide {
+  position: absolute;
+  top: 1rem;
+  transform: translateX(-50%);
+}
+
+.navds-guide-panel--poster .navds-guide {
+  left: 50%;
+  top: 0;
+}
+
+/**
+ * Guide component
+ */
+.navds-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Guide illustration frame */
+.navds-guide__illustration {
+  background: var(--navds-guide-panel-color-illustration-background);
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.navds-guide__illustration svg,
+.navds-guide__illustration img {
+  height: 100%;
+  width: 100%;
+}
+
+/* Illustration sizes */
+.navds-guide__illustration--small {
+  height: 5rem;
+  width: 5rem;
+}
+
+.navds-guide__illustration--medium {
+  height: 6.25rem;
+  width: 6.25rem;
+}

@navikt/core/css/help-text.css

@@ -0,0 +1,66 @@
+:root {
+  --navds-help-text-color-button-background: transparent;
+  --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
+  --navds-help-text-color-icon-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-help-text-color-icon-background-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-help-text-color-icon-background-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-help-text-color-popover-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+}
+
+.navds-help-text__button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: var(--navds-help-text-color-button-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-help-text__button:focus {
+  outline: none;
+}
+
+.navds-help-text__icon {
+  border-radius: 50%;
+  font-size: 1.5rem;
+  color: var(--navds-help-text-color-icon);
+}
+
+.navds-help-text__button:hover > .navds-help-text__icon {
+  color: var(--navds-help-text-color-icon-hover);
+  background: var(--navds-help-text-color-icon-background-hover);
+  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
+}
+
+.navds-help-text__button:focus > .navds-help-text__icon {
+  outline: none;
+  color: var(--navds-help-text-color-icon-focus);
+  background: var(--navds-help-text-color-icon-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+}
+
+.navds-help-text__popover > .navds-popover__arrow::before {
+  background-color: var(--navds-help-text-color-popover-background);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--navds-help-text-color-popover-background);
+}

@navikt/core/css/index.css

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "content-container.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
+@import "link.css";
+@import "loader.css";
+@import "menu.css";
+@import "modal.css";
+@import "pagination.css";
+@import "popover.css";
+@import "tag.css";
+@import "toggle-group.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "speech-bubble.css";
+@import "step-indicator.css";
+@import "table.css";
+
+/* Navno spesific packages */
+@import "page-header.css";
+@import "card.css";

@navikt/core/css/link-panel.css

@@ -0,0 +1,46 @@
+:root {
+  --navds-link-panel-color-text: var(--navds-semantic-color-text);
+  --navds-link-panel-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
+}
+
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--navds-link-panel-color-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
+  text-decoration: underline;
+  color: var(--navds-link-panel-color-title-hover);
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--navds-shadow-card);
+  border-color: var(--navds-link-panel-color-border-hover);
+}
+
+.navds-link-panel:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--navds-spacing-2);
+}

@navikt/core/css/link.css

@@ -0,0 +1,56 @@
+:root {
+  --navds-link-color-text: var(--navds-semantic-color-link);
+  --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-background-focus: var(--navds-semantic-color-focus);
+  --navds-link-color-background-active: var(--navds-semantic-color-focus);
+  --navds-link-color-icon: var(--navds-semantic-color-link);
+  --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-on-info-background: var(--navds-semantic-color-text);
+  --navds-link-color-on-error-background: var(--navds-semantic-color-text);
+}
+
+.navds-link {
+  color: var(--navds-link-color-text);
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-alert--info .navds-link {
+  color: var(--navds-link-color-on-info-background);
+}
+
+.navds-alert--error .navds-link,
+.navds-confirmation-panel--error .navds-link {
+  color: var(--navds-link-color-on-error-background);
+}
+
+.navds-link:hover {
+  text-decoration: none;
+}
+
+.navds-link:focus {
+  outline: none;
+  color: var(--navds-link-color-text-focus);
+  text-decoration: none;
+  background-color: var(--navds-link-color-background-focus);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-link:active {
+  outline: none;
+  color: var(--navds-link-color-text-active);
+  text-decoration: none;
+  background-color: var(--navds-link-color-background-active);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-link svg {
+  color: var(--navds-link-color-icon);
+}
+
+.navds-link:focus svg {
+  color: var(--navds-link-color-icon-focus);
+}

@navikt/core/css/loader.css

@@ -0,0 +1,100 @@
+:root {
+  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-interaction-foreground: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-loader-color-inverted-foreground: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-transparent-background: transparent;
+}
+
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.4s linear infinite;
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--navds-loader-color-foreground);
+}
+
+.navds-loader__background {
+  stroke: var(--navds-loader-color-background);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--navds-loader-color-neutral-foreground);
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--navds-loader-color-interaction-foreground);
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: var(--navds-loader-color-inverted-foreground);
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: var(--navds-loader-color-inverted-background);
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: var(--navds-loader-color-transparent-background);
+}
+
+.navds-loader--2xlarge {
+  width: 4rem;
+}
+
+.navds-loader--xlarge {
+  width: 2.5rem;
+}
+
+.navds-loader--large {
+  width: 2rem;
+}
+
+.navds-loader--medium {
+  width: 1.5rem;
+}
+
+.navds-loader--small {
+  width: 1.25rem;
+}
+
+.navds-loader--xsmall {
+  width: 1rem;
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}

@navikt/core/css/menu.css

@@ -0,0 +1,102 @@
+:root {
+  --navds-menu-color-text: var(--navds-semantic-color-link);
+  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
+  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
+  --navds-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
+}
+
+.navds-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding: 0 0.5rem;
+}
+
+.navds-menu__list--inner {
+  padding: 0;
+}
+
+.navds-menu-collapse__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-menu-color-text);
+}
+
+.navds-menu-item,
+.navds-menu-collapse__button {
+  font-weight: var(--navds-font-weight-bold);
+  display: flex;
+  padding: var(--navds-spacing-3) var(--navds-spacing-2);
+  text-decoration: none;
+}
+
+.navds-menu-item:focus,
+.navds-menu-collapse__button:focus {
+  outline: 3px solid var(--navds-menu-outline-focus);
+  outline-offset: -3px;
+  color: var(--navds-menu-color-text-focus);
+}
+
+.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
+  color: var(--navds-menu-color-focus);
+}
+
+.navds-menu-item:hover,
+.navds-menu-collapse__button:hover {
+  background-color: var(--navds-menu-color-background-hover);
+  color: var(--navds-menu-color-text-hover);
+}
+
+.navds-menu-item--active {
+  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
+  color: var(--navds-menu-color-text-active);
+  text-decoration: none;
+}
+
+/* Collapse icon */
+.navds-menu-collapse__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-left: var(--navds-spacing-2);
+}
+
+.navds-menu-collapse__expand-icon--filled,
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
+  display: none;
+}
+
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
+  display: block;
+}
+
+.navds-menu-collapse--open
+  > .navds-menu-collapse__button
+  > .navds-menu-collapse__expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Nesting levels */
+.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="1"] .navds-menu-item {
+  padding-left: var(--navds-spacing-6);
+}
+
+.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="2"] .navds-menu-item {
+  padding-left: var(--navds-spacing-10);
+}
+
+.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="3"] .navds-menu-item {
+  padding-left: var(--navds-spacing-14);
+}

@navikt/core/css/modal.css

@@ -1,18 +1,25 @@
+:root {
+  --navds-modal-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
+}
+
 .ReactModal__Body--open {
   overflow: hidden;
 }
 
 .navds-modal {
-  background-color: var(--navds-color-background);
+  background-color: var(--navds-modal-color-background);
+  border-radius: 4px;
   display: block;
   position: relative;
-  padding: 1rem;
-  border-radius: 4px;
   overflow: auto;
   max-height: 100%;
-  z-index: var(--navds-z-index-modal-content);
-  top: 50%;
-  transform: translateY(-50%);
+}
+
+.navds-modal__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-modal:focus,
@@ -22,14 +29,17 @@
 }
 
 .navds-modal__overlay {
-  position: absolute;
-  z-index: var(--navds-z-index-modal-overlay);
+  position: fixed;
+  z-index: var(--navds-z-index-modal);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  background-color: var(--navds-modal-color-overlay);
+  padding: var(--navds-spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .navds-modal__button--shake {
@@ -44,10 +54,11 @@
 }
 
 .navds-modal__button {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  position: absolute;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
   display: flex;
+  padding: var(--navds-spacing-2);
 }
 
 .navds-modal__button svg {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.2.8",
+  "version": "0.16.1",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -18,13 +18,13 @@
   "main": "./dist/index.css",
   "scripts": {
     "build": "postcss --use postcss-import -o dist/index.css index.css",
-    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.1.2",
+    "@navikt/ds-tokens": "^0.8.4",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.2.7",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0"
+    "postcss-import": "^14.0.2"
   }
 }

@navikt/core/css/page-header.css

@@ -0,0 +1,76 @@
+:root {
+  --navds-page-header-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-page-header-color-shadow-situation: var(
+    --navds-global-color-orange-400
+  );
+  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
+  --navds-page-header-color-shadow-guide: var(
+    --navds-global-color-deepblue-400
+  );
+}
+
+.navds-page-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-page-header-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-page-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-page-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-page-header--left > .navds-page-header__wrapper {
+  text-align: start;
+}
+
+.navds-page-header--center > .navds-page-header__wrapper {
+  text-align: center;
+}
+
+.navds-page-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-page-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-page-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
+}
+.navds-page-header--product {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
+}
+.navds-page-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-page-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-page-header__title {
+    font-size: var(--navds-font-size-heading-xlarge);
+  }
+}

@navikt/core/css/pagination.css

@@ -0,0 +1,118 @@
+:root {
+  --navds-pagination-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-pagination-color-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-pagination-color-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-pagination-color-background-selected: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-pagination-color-text-selected: var(
+    --navds-semantic-color-text-inverted
+  );
+}
+
+.navds-pagination {
+  display: flex;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--navds-spacing-8);
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--navds-spacing-6);
+}
+
+.navds-pagination__item {
+  display: flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  padding: var(--navds-spacing-1) var(--navds-spacing-3);
+}
+
+.navds-pagination--small .navds-pagination__item {
+  padding: 2px var(--navds-spacing-2);
+}
+
+.navds-pagination__item:hover {
+  background-color: var(--navds-pagination-color-background-hover);
+}
+
+.navds-pagination__item:active {
+  background-color: var(--navds-pagination-color-background-active);
+  color: var(--navds-pagination-color-text-active);
+}
+
+.navds-pagination__item:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
+    inset 0 0 0 3px white;
+  outline: none;
+}
+
+.navds-pagination__item[aria-current="true"] {
+  background-color: var(--navds-pagination-color-background-selected);
+  color: var(--navds-pagination-color-text-selected);
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-pagination__prev-next {
+  display: flex;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-decoration: underline;
+  color: var(--navds-semantic-color-link);
+  align-items: center;
+  gap: var(--navds-spacing-1);
+  border-radius: 2px;
+}
+
+.navds-pagination__prev-next:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-pagination__prev-next:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-pagination__prev-next-icon {
+  margin: 7px;
+}
+
+.navds-pagination--small .navds-pagination__prev-next-icon {
+  margin: var(--navds-spacing-1);
+  font-size: 1rem;
+}
+
+.navds-pagination__next-text {
+  padding-left: 0.75rem;
+}
+
+.navds-pagination__prev-text {
+  padding-right: 0.75rem;
+}

@navikt/core/css/panel.css

@@ -0,0 +1,17 @@
+:root {
+  --navds-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-panel-color-border: var(--navds-semantic-color-border-muted);
+}
+
+.navds-panel {
+  background-color: var(--navds-panel-color-background);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--navds-panel-color-border);
+}

@navikt/core/css/popover.css

@@ -1,9 +1,21 @@
+:root {
+  --navds-popover-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-popover-color-border: var(--navds-semantic-color-border-muted);
+}
+
 .navds-popover {
-  z-index: var(--navds-z-index-popover-default);
-  background-color: var(--navds-color-background);
-  box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
-  border: var(--navds-border-default);
-  border-radius: 2px;
+  z-index: var(--navds-z-index-popover);
+  background-color: var(--navds-popover-color-background);
+  box-shadow: var(--navds-shadow-popover);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
+  border-radius: 4px;
+}
+
+.navds-popover__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-popover--hidden {
@@ -16,22 +28,20 @@
 }
 
 .navds-popover__arrow {
-  z-index: var(--navds-z-index-popover-arrow);
+  z-index: -1;
 }
 
 .navds-popover__arrow::before {
-  content: "";
   display: block;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--navds-popover-color-background);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
   width: 1rem;
   height: 1rem;
-  transform: rotate(45deg);
-  background-color: var(--navds-color-background);
-  border: var(--navds-border-default);
-}
-
-.navds-popover__arrow::before .navds-popover--small {
-  width: 0.67rem;
-  height: 0.67rem;
+  top: 0;
+  left: 0;
 }
 
 .navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {

@navikt/core/css/speech-bubble.css

@@ -0,0 +1,85 @@
+:root {
+  --navds-speechbubble-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
+  --navds-speechbubble-color-illustration-background: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-speechbubble-color-detail-text: var(
+    --navds-semantic-color-text-muted
+  );
+}
+
+.navds-speechbubble {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--navds-spacing-4);
+}
+
+.navds-speechbubble--right {
+  flex-direction: row-reverse;
+}
+
+.navds-speechbubble__bubble-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble-list {
+  align-items: flex-end;
+}
+
+.navds-speechbubble__illustration {
+  align-items: center;
+  background: var(--navds-speechbubble-color-illustration-background);
+  color: var(--navds-speechbubble-color-illustration);
+  border-radius: 50%;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-speechbubble__illustration svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-speechbubble__bubble {
+  padding: 1rem;
+  box-shadow: var(--navds-shadow-popover);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--navds-speechbubble-color-background);
+  border-radius: 12px;
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-speechbubble__bubble:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-speechbubble--right .navds-speechbubble__bubble {
+  border-radius: 12px;
+  border-bottom-right-radius: 2px;
+}
+
+.navds-speechbubble__top-text {
+  color: var(--navds-speechbubble-color-detail-text);
+}
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  align-self: flex-end;
+}

@navikt/core/css/step-indicator.css

@@ -0,0 +1,202 @@
+:root {
+  --navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
+  --navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
+  --navds-step-indicator-color-step-label: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --navds-step-indicator-color-step-number-background-finished: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-step-indicator-color-step-number-shadow: var(
+    --navds-semantic-color-border
+  );
+  --navds-step-indicator-color-step-number-shadow-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-step-indicator-color-step-number-shadow-inset: var(
+    --navds-semantic-color-component-background-light
+  );
+}
+
+/* StepIndicator */
+.navds-step-indicator {
+  display: flex;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+}
+
+/* Step */
+.navds-step-indicator__step-wrapper {
+  padding: 0 var(--navds-spacing-2);
+  flex: 1;
+  position: relative;
+  list-style: none;
+  min-width: 10rem;
+}
+
+.navds-step-indicator__step-wrapper--hidelabel {
+  min-width: 5rem;
+}
+
+.navds-step-indicator__step {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 0;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  flex-shrink: 1;
+  color: var(--navds-step-indicator-color-step-text);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.navds-step-indicator__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  margin: 0.5rem;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+  background-color: var(--navds-step-indicator-color-step-number-background);
+}
+
+.navds-step-indicator__step-wrapper:first-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-right: 0;
+}
+
+.navds-step-indicator__step-wrapper:last-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-left: 0;
+}
+
+.navds-step-indicator__step-label {
+  width: 100%;
+  margin-top: var(--navds-spacing-4);
+  text-align: center;
+  color: var(--navds-step-indicator-color-step-label);
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step-line {
+  flex: 1 1 100%;
+  position: absolute;
+  top: 1.5rem;
+  right: calc(50% + 2rem);
+  left: calc(-50% + 2rem);
+  display: block;
+  border-top: 2px solid var(--navds-step-indicator-color-step-line);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label {
+  color: var(--navds-step-indicator-color-step-text);
+  font-weight: bold;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0.25rem;
+}
+
+.navds-step-indicator__step:focus {
+  outline: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label,
+.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background);
+  box-shadow: 0 0 0 2px
+    var(--navds-step-indicator-color-step-number-shadow-hover);
+}
+
+.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px inset
+      var(--navds-step-indicator-color-step-number-shadow-inset),
+    var(--navds-shadow-focus);
+}
+
+.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+}
+
+.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+/* Finished state */
+.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
+.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
+  > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background-finished);
+}
+
+/* Disabled */
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
+  opacity: 0.3;
+}
+
+.navds-step-indicator__step--disabled {
+  cursor: not-allowed;
+}

@navikt/core/css/table.css

@@ -0,0 +1,143 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+  --navds-table-row-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-table-row-color-background-selected: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-table-row-color-background-selected-hover: var(
+    --navds-global-color-blue-100
+  );
+  --navds-table-row-color-background-zebra: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
+}
+
+.navds-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__body .navds-table__row:hover {
+  background-color: var(--navds-table-row-color-background-hover);
+}
+
+.navds-table__row--selected {
+  background-color: var(--navds-table-row-color-background-selected);
+}
+
+.navds-table__body .navds-table__row--selected:hover {
+  background-color: var(--navds-table-row-color-background-selected-hover);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  text-align: left;
+}
+
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
+.navds-table__body .navds-table__row:hover .navds-table__header-cell,
+.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+  border-color: var(--navds-table-cell-color-border-hover);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+}
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--navds-semantic-color-link);
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--navds-semantic-color-canvas-background);
+}
+
+.navds-table__sort-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--navds-global-color-blue-50);
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}

@navikt/core/css/tag.css

@@ -0,0 +1,68 @@
+:root {
+  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
+  --navds-tag-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-tag-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-tag-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
+  --navds-tag-color-warning-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-tag-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
+  );
+  --navds-tag-color-success-background: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-tag-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-tag-color-error-background: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-tag-color-error-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
+}
+
+.navds-tag {
+  border: 1px solid;
+  border-color: var(--navds-tag-color-border);
+  border-radius: 4px;
+  background-color: var(--navds-tag-color-background);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem var(--navds-spacing-3);
+  min-height: 32px;
+}
+
+.navds-tag--small {
+  min-height: 24px;
+  padding-right: var(--navds-spacing-1);
+  padding-left: var(--navds-spacing-1);
+}
+
+.navds-tag--error {
+  background-color: var(--navds-tag-color-error-background);
+  border-color: var(--navds-tag-color-error-border);
+}
+
+.navds-tag--success {
+  background-color: var(--navds-tag-color-success-background);
+  border-color: var(--navds-tag-color-success-border);
+}
+
+.navds-tag--warning {
+  background-color: var(--navds-tag-color-warning-background);
+  border-color: var(--navds-tag-color-warning-border);
+}
+
+.navds-tag--info {
+  background-color: var(--navds-tag-color-info-background);
+  border-color: var(--navds-tag-color-info-border);
+}

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

@@ -0,0 +1,97 @@
+:root {
+  --navds-toggle-group-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
+  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
+  --navds-toggle-group-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-toggle-group-color-text-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-toggle-group-color-background-pressed: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-toggle-group-color-text-pressed: var(
+    --navds-semantic-color-text-inverted
+  );
+}
+
+.navds-toggle-group {
+  border-radius: 7px;
+  background-color: var(--navds-toggle-group-color-background);
+  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
+  padding: calc(var(--navds-spacing-1) + 1px);
+  gap: var(--navds-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.navds-toggle-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--navds-spacing-3);
+  min-height: 48px;
+  border: none;
+  cursor: pointer;
+  background-color: var(--navds-toggle-group-color-background);
+  color: var(--navds-toggle-group-color-text);
+  border-radius: 2px;
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button:hover {
+  background-color: var(--navds-toggle-group-color-background-hover);
+  color: var(--navds-toggle-group-color-text-hover);
+}
+
+.navds-toggle-group__button:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background),
+    0 0 0 4px var(--navds-semantic-color-focus);
+}
+
+.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover),
+    0 0 0 4px var(--navds-semantic-color-focus);
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-toggle-group__button-inner > * {
+  flex-shrink: 0;
+}
+
+.navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--navds-toggle-group-color-background-pressed);
+  color: var(--navds-toggle-group-color-text-pressed);
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button {
+  padding: 0.375rem;
+  min-height: 32px;
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.5rem;
+}
+
+.navds-toggle-group--small
+  > .navds-toggle-group__button
+  > .navds-toggle-group__button-inner
+  > svg {
+  font-size: 1.125rem;
+}
+
+.navds-toggle-group__label {
+  margin-bottom: 0.5rem;
+}

@navikt/core/css/typography.css

@@ -0,0 +1,180 @@
+/* Heading */
+.navds-heading {
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-heading--xlarge {
+  font-size: var(--navds-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-heading-2xlarge);
+}
+
+.navds-heading--xlarge.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
+}
+
+.navds-heading--large {
+  font-size: var(--navds-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-heading-xlarge);
+}
+
+.navds-heading--large.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-4);
+}
+
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--navds-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--navds-font-line-height-heading-xlarge);
+  }
+
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--navds-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--navds-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-3);
+  }
+}
+
+.navds-heading--medium {
+  font-size: var(--navds-font-size-heading-medium);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-heading-medium);
+}
+
+.navds-heading--medium.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-heading--small {
+  font-size: var(--navds-font-size-heading-small);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-heading-small);
+}
+
+.navds-heading--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-heading--xsmall {
+  font-size: var(--navds-font-size-heading-xsmall);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-heading-xsmall);
+}
+
+.navds-heading--xsmall.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xlarge);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-xlarge);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-7);
+}
+
+.navds-body-long--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-large);
+}
+
+.navds-body-long--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-6);
+}
+
+.navds-body-short {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-large);
+  margin: 0;
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-body-short--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-body-short--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--navds-font-size-large);
+  font-weight: var(--navds-font-weight-bold);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-large);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-label--small {
+  font-size: var(--navds-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-label--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--navds-font-size-small);
+  font-weight: var(--navds-font-weight-bold);
+  letter-spacing: 0.004em;
+  line-height: var(--navds-font-line-height-medium);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+.navds-detail--small {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--small.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}

@navikt/core/icons/.gitignore

@@ -0,0 +1,2 @@
+/src
+/png

@navikt/core/icons/.svgrrc.js

@@ -0,0 +1,16 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: true,
+  titleProp: true,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  replaceAttrValues: {
+    "#262626": "currentColor",
+  },
+  template,
+};

@navikt/core/icons/README.md

@@ -0,0 +1,28 @@
+# @navikt/ds-icons
+
+Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
+
+## Installering
+
+```sh
+// yarn
+yarn add @navikt/ds-icons
+
+// npm
+npm install @navikt/ds-icons
+```
+
+## Bruk
+
+```jsx
+/* ESM (anbefalt for tree-shaking)*/
+import { Down } from "@navikt/ds-icons";
+/* CJS */
+import { Down } from "@navikt/cjs/ds-icons";
+
+<Down aria-label="Åpne meny" />;
+```
+
+## Dokumentasjon
+
+- [Ikonsøk](https://design.nav.no/resources/icons)

@navikt/core/icons/figma/api.ts

@@ -0,0 +1,52 @@
+import Axios from "axios";
+const { create, get } = Axios;
+
+const FILE_KEY = "UmEVH3pZ71uJPsSz9ilP3Y";
+
+const FigmaAxion = (token?: string) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+/**
+ * Published Figma-components
+ * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/%F0%9F%92%A0NAV-ikoner-2.5-Figma
+ */
+export const getPublishedIcons = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
+    .catch((e) => {
+      console.log("Failed getPublishedIcons ");
+      throw e;
+    });
+
+  return data?.meta?.components?.filter((component: any) => {
+    const page = component?.containing_frame?.pageName;
+    return page !== "🔆Pictogram" && page !== "🧩Placeholder";
+  });
+};
+
+/**
+ * Downloadable link to each icon in SVG-format
+ */
+export const getIconsDownloadableUrl = async (nodeIds: string) => {
+  const {
+    data: { images },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(
+      `https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
+    )
+    .catch((e) => {
+      console.log("Failed getIconsDownloadableUrl ");
+      throw e;
+    });
+
+  return Object.values(images) as string[];
+};
+
+/**
+ * Download icon @url
+ */
+export const getIconContent = async (url: string) => get(url);

@navikt/core/icons/figma/index.ts

@@ -0,0 +1,85 @@
+import {
+  getPublishedIcons,
+  getIconsDownloadableUrl,
+  getIconContent,
+} from "./api";
+import { existsSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";
+import { writeMeta } from "./write-meta";
+import dotenv from "dotenv";
+dotenv.config();
+
+export type ComponentT = {
+  key: string;
+  file_key: string;
+  node_id: string;
+  thumbnail_url: string;
+  name: string;
+  description: string;
+  updated_at: string;
+  created_at: string;
+  user: any;
+  containing_frame: any;
+};
+
+const main = async () => {
+  if (!process.env.FIGMA_TOKEN) {
+    throw new Error("FIGMA_TOKEN not set in .env");
+  }
+  const iconFolder = "./svg";
+
+  // Limiting to ~20 concurrent downloads seems to lead to less errors
+  const limit = pLimit(20);
+
+  const publishedIconNodes: ComponentT[] = await getPublishedIcons();
+
+  writeMeta(publishedIconNodes);
+  /* Get all urls in one fetch rather than 300+ */
+  const iconUrls: string[] = await getIconsDownloadableUrl(
+    publishedIconNodes.map((node) => node.node_id).join(",")
+  );
+
+  if (existsSync(iconFolder)) {
+    rimraf.sync(iconFolder);
+  }
+  mkdirSync(iconFolder);
+
+  console.log("Total icons: " + publishedIconNodes.length);
+
+  await Promise.all(
+    iconUrls.map((url, x) =>
+      limit(() =>
+        getIconContent(url)
+          .then(({ data }) => {
+            writeFileSync(
+              resolve(
+                iconFolder,
+                `${startCase(publishedIconNodes[x].name).replace(
+                  /\s/g,
+                  ""
+                )}.svg`
+              ),
+              data,
+              {
+                encoding: "utf8",
+              }
+            );
+          })
+          .catch((e) => {
+            throw e;
+          })
+      )
+    )
+  );
+
+  console.log("\nDownloaded all icons from Figma!\n");
+};
+
+try {
+  main();
+} catch (e) {
+  throw e;
+}

@navikt/core/icons/figma/write-meta.ts

@@ -0,0 +1,35 @@
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import startCase from "lodash.startcase";
+import { ComponentT } from ".";
+
+const generateMetadata = (publishedIconNodes: ComponentT[]) => {
+  return publishedIconNodes
+    .map(({ name, description, created_at, containing_frame }) => {
+      return {
+        name: startCase(name).replace(/\s/g, ""),
+        description,
+        created_at,
+        // strip emojis
+        pageName: containing_frame.pageName.replace(
+          /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+          ""
+        ),
+      };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+export const writeMeta = (publishedIconNodes: ComponentT[]) => {
+  const metadataFileName = "./meta.json";
+
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
+  }
+  writeFileSync(
+    metadataFileName,
+    JSON.stringify(generateMetadata(publishedIconNodes)),
+    {
+      encoding: "utf8",
+    }
+  );
+};

@navikt/core/icons/icons.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import isChromatic from "chromatic/isChromatic";
 
-import * as Icons from "../src";
+import * as Icons from "./src";
 export default {
   title: "ds-icons/Ikoner",
   argTypes: {
@@ -16,7 +17,7 @@ export default {
   },
 };
 
-if (process.env.STORYBOOK_CHROMATIC === "true") {
+if (isChromatic()) {
   const iconsStories = storiesOf("ds-icons/Ikoner", module);
 
   Object.entries(Icons).forEach(([name, Icon]) => {

@navikt/core/icons/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@navikt/ds-icons",
+  "version": "0.8.4",
+  "private": false,
+  "description": "NAVs egne ikoner i SVG og React format",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
+  },
+  "keywords": [
+    "NAV",
+    "designsystem",
+    "react"
+  ],
+  "license": "MIT",
+  "author": "NAV",
+  "sideEffects": false,
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "files": [
+    "/cjs",
+    "/esm",
+    "/src",
+    "/svg",
+    "/meta.json"
+  ],
+  "scripts": {
+    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-icons": "svgr --out-dir src svg",
+    "clean": "rimraf src cjs esm",
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "update": "ts-node figma/index.ts dotenv/config"
+  },
+  "dependencies": {
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^5.5.0",
+    "@types/lodash.startcase": "^4.4.6",
+    "@types/rimraf": "3.0.2",
+    "@types/uuid": "^8.3.1",
+    "axios": "^0.21.3",
+    "copyfiles": "^2.4.1",
+    "dotenv": "^10.0.0",
+    "lodash.kebabcase": "^4.1.1",
+    "lodash.startcase": "4.4.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "rimraf": "3.0.2",
+    "sharp": "0.29.1",
+    "ts-node": "^10.4.0"
+  }
+}

@navikt/core/icons/svg/Add.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13L11 21H13V13H21V11H13V3H11L11 11H3V13H11Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13L11 21H13V13H21V11H13V3H11L11 11H3V13H11Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/AddCircle.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/AddCircleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/AddFilled.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="M24 0H0V24H24V0ZM11 21L11 13H3V11H11V3H13V11H21V13H13V21H11Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM11 21L11 13H3V11H11V3H13V11H21V13H13V21H11Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/AddPerson.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="M18 24V14H20V24H18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AddPersonFilled.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 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Applicant.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 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM18 15.6034L20.517 17.7009L18 18.456L15.483 17.7009L18 15.6034ZM18 20.544L22 19.344V22H14V19.344L18 20.544ZM12 18.4684C12 18.1716 12.1318 17.8901 12.3598 17.7002L17.3598 13.5335C17.7307 13.2244 18.2693 13.2244 18.6402 13.5335L23.6402 17.7002C23.8682 17.8901 24 18.1716 24 18.4684V23C24 23.5523 23.5523 24 23 24H13C12.4477 24 12 23.5523 12 23V18.4684ZM12 13C9.23858 13 7 15.2386 7 18H5C5 14.134 8.13401 11 12 11C13.4274 11 14.7549 11.4272 15.8619 12.1608L14.2297 13.5235C13.5584 13.1885 12.8012 13 12 13Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Attachment.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="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AttachmentFilled.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="M16.3472 0.00138792C17.7614 -0.0288776 19.2813 0.434034 20.4223 1.56794L19.3387 2.6448L20.4223 1.56794C21.5633 2.70184 22.0291 4.21243 21.9986 5.61786C21.9684 7.01063 21.4486 8.445 20.4223 9.46495L11.0314 18.7978C10.358 19.467 9.43759 19.7854 8.57056 19.8039C7.69079 19.8227 6.71672 19.5352 5.97471 18.7978C5.23271 18.0604 4.94338 17.0923 4.96233 16.218C4.981 15.3563 5.30134 14.4416 5.97472 13.7724L12.4761 7.31122C13.0746 6.71649 14.0448 6.71649 14.6433 7.31122C15.2417 7.90596 15.2417 8.87022 14.6433 9.46495L8.14185 15.9261C8.10938 15.9584 8.03076 16.083 8.02641 16.2836C8.02234 16.4715 8.08594 16.5885 8.14185 16.6441C8.19777 16.6996 8.31553 16.7628 8.50458 16.7588C8.70636 16.7545 8.83176 16.6763 8.86423 16.6441L18.2552 7.31122C18.6406 6.92821 18.9187 6.28392 18.9345 5.55228C18.9501 4.8333 18.71 4.17373 18.2552 3.72167C17.8003 3.26961 17.1366 3.03104 16.4132 3.04652C15.677 3.06227 15.0287 3.33865 14.6433 3.72167L5.25234 13.0545C4.67063 13.6326 4.14756 14.7746 4.07345 16.1004C4.00113 17.3941 4.36759 18.6364 5.25234 19.5157C7.18223 21.4337 9.82386 21.4337 11.7538 19.5157L18.2829 13.0269C18.8814 12.4322 19.8516 12.4322 20.4501 13.0269C21.0485 13.6216 21.0485 14.5859 20.4501 15.1806L13.9209 21.6694C10.7941 24.7769 6.21196 24.7769 3.0852 21.6694C1.44161 20.036 0.9051 17.8683 1.01337 15.9314C1.11986 14.0266 1.86096 12.1174 3.0852 10.9008L12.4761 1.56794C13.5024 0.547983 14.9457 0.0313808 16.3472 0.00138792Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AutomaticSystem.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="M2.90861 7.82867C4.49075 4.38664 7.96771 2 12 2C17.5228 2 22 6.47715 22 12H24C24 5.37258 18.6274 0 12 0C8.41494 0 5.19821 1.57211 3 4.06279V2H1V7.41103L2.90861 7.82867ZM13.8873 4H10.1125L9.47678 5.90777L7.67765 5.00864L5.00864 7.67765L5.90777 9.47678L4 10.1125V13.8873L5.90764 14.5235L5.00864 16.3223L7.67765 18.9914L9.47653 18.0924L10.1127 20H13.8872L14.5238 18.0922L16.3222 18.9915L18.9915 16.3222L18.0922 14.5238L20 13.8872V10.1127L18.0924 9.47653L18.9914 7.67765L16.3223 5.00864L14.5235 5.90764L13.8873 4ZM10.9355 7.85663L11.5542 6H12.446L13.0652 7.85683L13.5087 8.02528C13.5879 8.05535 13.6659 8.08773 13.7428 8.12234L14.1757 8.31729L15.9272 7.44195L16.558 8.07277L15.6827 9.82429L15.8777 10.2572C15.9123 10.3341 15.9446 10.4121 15.9747 10.4913L16.1432 10.9348L18 11.554V12.4462L16.143 13.0659L15.9745 13.5092C15.9445 13.5883 15.9121 13.6664 15.8774 13.7433L15.6824 14.1764L16.5579 15.9274L15.9274 16.5579L14.1764 15.6824L13.7433 15.8774C13.6664 15.9121 13.5883 15.9445 13.5092 15.9745L13.0659 16.143L12.4462 18H11.554L10.9348 16.1432L10.4913 15.9747C10.4121 15.9446 10.3341 15.9123 10.2572 15.8777L9.82429 15.6827L8.07277 16.558L7.44195 15.9272L8.31729 14.1757L8.12234 13.7428C8.08773 13.6659 8.05535 13.5879 8.02528 13.5087L7.85683 13.0652L6 12.446V11.5542L7.85663 10.9355L8.0251 10.4918C8.05522 10.4124 8.08766 10.3342 8.12234 10.2572L8.31729 9.82429L7.44195 8.07277L8.07277 7.44195L9.82429 8.31729L10.2572 8.12234C10.3342 8.08766 10.4124 8.05522 10.4918 8.0251L10.9355 7.85663ZM12 22C16.0323 22 19.5093 19.6134 21.0914 16.1713L23 16.589V22H21V19.9372C18.8018 22.4279 15.5851 24 12 24C5.37258 24 0 18.6274 0 12H2C2 17.5228 6.47715 22 12 22ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AutomaticSystemFilled.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 2C7.96771 2 4.49075 4.38664 2.90861 7.82867L1 7.41103V2H3V4.06279C5.19821 1.57211 8.41494 0 12 0C18.6274 0 24 5.37258 24 12H22C22 6.47715 17.5228 2 12 2ZM12 22C16.0323 22 19.5093 19.6134 21.0914 16.1713L23 16.589V22H21V19.9372C18.8018 22.4279 15.5851 24 12 24C5.37258 24 0 18.6274 0 12H2C2 17.5228 6.47715 22 12 22ZM13.8873 4H10.1125L9.47678 5.90777L7.67765 5.00864L5.00864 7.67765L5.90777 9.47678L4 10.1125V13.8873L5.90764 14.5235L5.00864 16.3223L7.67765 18.9914L9.47653 18.0924L10.1127 20H13.8872L14.5238 18.0922L16.3222 18.9915L18.9915 16.3222L18.0922 14.5238L20 13.8872V10.1127L18.0924 9.47653L18.9914 7.67765L16.3223 5.00864L14.5235 5.90764L13.8873 4ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BabyChangingRoom.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="M10 3C10 3.55228 9.55228 4 9 4C8.44772 4 8 3.55228 8 3C8 2.44772 8.44772 2 9 2C9.55228 2 10 2.44772 10 3ZM12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM21.5 16C22.3284 16 23 15.3284 23 14.5C23 13.6716 22.3284 13 21.5 13C20.6716 13 20 13.6716 20 14.5C20 15.3284 20.6716 16 21.5 16ZM3.18079 7.15469C3.36366 6.47353 3.98108 6 4.68636 6C6.78502 6 8.65406 7.19312 9.5682 9H13C13.5523 9 14 9.44771 14 10C14 10.5523 13.5523 11 13 11H10.1893L12.0018 19H9.25773V24H7.25773V17H9.49801L8.07159 10.7041C7.73815 9.23234 6.49779 8.15795 5.02038 8.01598L2.60848 17H5.25773V24H3.25773V19H0.000732422L3.18079 7.15469ZM19 11C19.5523 11 20 11.4477 20 12V14C20 15.1046 19.1046 16 18 16H16.618C15.8605 16 15.168 15.572 14.8292 14.8944L14.382 14H14C13.4477 14 13 13.5523 13 13C13 12.4477 13.4477 12 14 12H14.382C15.1395 12 15.832 12.428 16.1708 13.1056L16.618 14H18V12C18 11.4477 18.4477 11 19 11ZM14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H22C22.5523 19 23 18.5523 23 18C23 17.4477 22.5523 17 22 17H14Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C10 3.55228 9.55228 4 9 4C8.44772 4 8 3.55228 8 3C8 2.44772 8.44772 2 9 2C9.55228 2 10 2.44772 10 3ZM12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM21.5 16C22.3284 16 23 15.3284 23 14.5C23 13.6716 22.3284 13 21.5 13C20.6716 13 20 13.6716 20 14.5C20 15.3284 20.6716 16 21.5 16ZM3.18079 7.15469C3.36366 6.47353 3.98108 6 4.68636 6C6.78502 6 8.65406 7.19312 9.5682 9H13C13.5523 9 14 9.44771 14 10C14 10.5523 13.5523 11 13 11H10.1893L12.0018 19H9.25773V24H7.25773V17H9.49801L8.07159 10.7041C7.73815 9.23234 6.49779 8.15795 5.02038 8.01598L2.60848 17H5.25773V24H3.25773V19H0.000732422L3.18079 7.15469ZM19 11C19.5523 11 20 11.4477 20 12V14C20 15.1046 19.1046 16 18 16H16.618C15.8605 16 15.168 15.572 14.8292 14.8944L14.382 14H14C13.4477 14 13 13.5523 13 13C13 12.4477 13.4477 12 14 12H14.382C15.1395 12 15.832 12.428 16.1708 13.1056L16.618 14H18V12C18 11.4477 18.4477 11 19 11ZM14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H22C22.5523 19 23 18.5523 23 18C23 17.4477 22.5523 17 22 17H14Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BabyChangingRoomFilled.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="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Back.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L15.5714 3L17 4.5L9.85714 12L17 19.5L15.5714 21L7 12Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L15.5714 3L17 4.5L9.85714 12L17 19.5L15.5714 21L7 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BackFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 11.5L15.0714 2.5L17.5 5L11 11.5L17.5 18L15.0714 20.5L6.5 11.5Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 11.5L15.0714 2.5L17.5 5L11 11.5L17.5 18L15.0714 20.5L6.5 11.5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bag.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="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V13C0 13.7403 0.402199 14.3866 1 14.7324V21C1 22.1046 1.89543 23 3 23H21C22.1046 23 23 22.1046 23 21V14.7324C23.5978 14.3866 24 13.7403 24 13V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM7 7H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 7H7ZM11 15H3L3 21H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BagFilled.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="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Baggage.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="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM15 7H9H6L6 20H18V7H15ZM8 10H16V12H8V10Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM15 7H9H6L6 20H18V7H15ZM8 10H16V12H8V10Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BaggageFilled.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="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM16 10H8V12H16V10Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM16 10H8V12H16V10Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bandage.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="M2.62119 2.62119C5.15085 0.0915334 8.44529 -0.737681 10.0823 0.710268L10.1964 0.817573L23.1824 13.8036C24.7762 15.3974 23.9687 18.7889 21.3788 21.3788C18.8492 23.9085 15.5547 24.7377 13.9177 23.2897L13.8036 23.1824L0.817573 10.1964L0.710268 10.0823C-0.737681 8.44529 0.0915334 5.15085 2.62119 2.62119ZM20.039 13.3398L13.3392 20.0396L15.1018 21.8023L15.1731 21.8705C15.8979 22.5116 18.1367 21.9413 20.039 20.039C21.9229 18.1551 22.4889 15.9664 21.9029 15.2119L21.8426 15.1434L20.039 13.3398ZM12 5.30085L5.30085 12L11.9993 18.6998L18.6992 12L12 5.30085ZM11.3301 14.0097C11.7001 13.6398 12.2999 13.6398 12.6699 14.0097C13.0399 14.3797 13.0399 14.9796 12.6699 15.3496C12.2999 15.7196 11.7001 15.7196 11.3301 15.3496C10.9601 14.9796 10.9601 14.3797 11.3301 14.0097ZM14.0097 11.3301C14.3797 10.9601 14.9796 10.9601 15.3496 11.3301C15.7196 11.7001 15.7196 12.2999 15.3496 12.6699C14.9796 13.0399 14.3797 13.0399 14.0097 12.6699C13.6398 12.2999 13.6398 11.7001 14.0097 11.3301ZM8.65042 11.3301C9.02041 10.9601 9.62027 10.9601 9.99026 11.3301C10.3602 11.7001 10.3602 12.2999 9.99026 12.6699C9.62027 13.0399 9.02041 13.0399 8.65042 12.6699C8.28044 12.2999 8.28044 11.7001 8.65042 11.3301ZM11.3301 8.65042C11.7001 8.28044 12.2999 8.28044 12.6699 8.65042C13.0399 9.02041 13.0399 9.62027 12.6699 9.99026C12.2999 10.3602 11.7001 10.3602 11.3301 9.99026C10.9601 9.62027 10.9601 9.02041 11.3301 8.65042ZM3.96102 3.96102C2.12011 5.80193 1.52657 7.95798 2.03584 8.71327L2.09044 8.78407L2.1574 8.85655L3.96102 10.6602L10.6602 3.96102L8.89815 2.19774L8.82694 2.12955C8.10206 1.48838 5.8633 2.05874 3.96102 3.96102Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.62119 2.62119C5.15085 0.0915334 8.44529 -0.737681 10.0823 0.710268L10.1964 0.817573L23.1824 13.8036C24.7762 15.3974 23.9687 18.7889 21.3788 21.3788C18.8492 23.9085 15.5547 24.7377 13.9177 23.2897L13.8036 23.1824L0.817573 10.1964L0.710268 10.0823C-0.737681 8.44529 0.0915334 5.15085 2.62119 2.62119ZM20.039 13.3398L13.3392 20.0396L15.1018 21.8023L15.1731 21.8705C15.8979 22.5116 18.1367 21.9413 20.039 20.039C21.9229 18.1551 22.4889 15.9664 21.9029 15.2119L21.8426 15.1434L20.039 13.3398ZM12 5.30085L5.30085 12L11.9993 18.6998L18.6992 12L12 5.30085ZM11.3301 14.0097C11.7001 13.6398 12.2999 13.6398 12.6699 14.0097C13.0399 14.3797 13.0399 14.9796 12.6699 15.3496C12.2999 15.7196 11.7001 15.7196 11.3301 15.3496C10.9601 14.9796 10.9601 14.3797 11.3301 14.0097ZM14.0097 11.3301C14.3797 10.9601 14.9796 10.9601 15.3496 11.3301C15.7196 11.7001 15.7196 12.2999 15.3496 12.6699C14.9796 13.0399 14.3797 13.0399 14.0097 12.6699C13.6398 12.2999 13.6398 11.7001 14.0097 11.3301ZM8.65042 11.3301C9.02041 10.9601 9.62027 10.9601 9.99026 11.3301C10.3602 11.7001 10.3602 12.2999 9.99026 12.6699C9.62027 13.0399 9.02041 13.0399 8.65042 12.6699C8.28044 12.2999 8.28044 11.7001 8.65042 11.3301ZM11.3301 8.65042C11.7001 8.28044 12.2999 8.28044 12.6699 8.65042C13.0399 9.02041 13.0399 9.62027 12.6699 9.99026C12.2999 10.3602 11.7001 10.3602 11.3301 9.99026C10.9601 9.62027 10.9601 9.02041 11.3301 8.65042ZM3.96102 3.96102C2.12011 5.80193 1.52657 7.95798 2.03584 8.71327L2.09044 8.78407L2.1574 8.85655L3.96102 10.6602L10.6602 3.96102L8.89815 2.19774L8.82694 2.12955C8.10206 1.48838 5.8633 2.05874 3.96102 3.96102Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BandageFilled.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="M10.0823 0.710268C8.44529 -0.737681 5.15085 0.0915335 2.62119 2.62119C0.0915335 5.15085 -0.737681 8.44529 0.710268 10.0823L0.817573 10.1964L1.6139 10.9927L10.9927 1.6139L10.1964 0.817573L10.0823 0.710268ZM12.4069 3.02811L3.02811 12.4069L11.6139 20.9927L20.9927 11.6139L12.4069 3.02811ZM22.4069 13.0281L13.0281 22.4069L13.8036 23.1824L13.9177 23.2897C15.5547 24.7377 18.8492 23.9085 21.3788 21.3788C23.9687 18.7889 24.7762 15.3974 23.1824 13.8036L22.4069 13.0281ZM12.6699 14.0097C12.2999 13.6398 11.7001 13.6398 11.3301 14.0097C10.9601 14.3797 10.9601 14.9796 11.3301 15.3496C11.7001 15.7196 12.2999 15.7196 12.6699 15.3496C13.0399 14.9796 13.0399 14.3797 12.6699 14.0097ZM15.3496 11.3301C14.9796 10.9601 14.3797 10.9601 14.0097 11.3301C13.6398 11.7001 13.6398 12.2999 14.0097 12.6699C14.3797 13.0399 14.9796 13.0399 15.3496 12.6699C15.7196 12.2999 15.7196 11.7001 15.3496 11.3301ZM9.99026 11.3301C9.62027 10.9601 9.02041 10.9601 8.65042 11.3301C8.28044 11.7001 8.28044 12.2999 8.65042 12.6699C9.02041 13.0399 9.62027 13.0399 9.99026 12.6699C10.3602 12.2999 10.3602 11.7001 9.99026 11.3301ZM12.6699 8.65042C12.2999 8.28044 11.7001 8.28044 11.3301 8.65042C10.9601 9.02041 10.9601 9.62027 11.3301 9.99026C11.7001 10.3602 12.2999 10.3602 12.6699 9.99026C13.0399 9.62027 13.0399 9.02041 12.6699 8.65042Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0823 0.710268C8.44529 -0.737681 5.15085 0.0915334 2.62119 2.62119C0.0915334 5.15085 -0.737681 8.44529 0.710268 10.0823L0.817573 10.1964L1.6139 10.9927L10.9927 1.6139L10.1964 0.817573L10.0823 0.710268ZM12.4069 3.02811L3.02811 12.4069L11.6139 20.9927L20.9927 11.6139L12.4069 3.02811ZM22.4069 13.0281L13.0281 22.4069L13.8036 23.1824L13.9177 23.2897C15.5547 24.7377 18.8492 23.9085 21.3788 21.3788C23.9687 18.7889 24.7762 15.3974 23.1824 13.8036L22.4069 13.0281ZM12.6699 14.0097C12.2999 13.6398 11.7001 13.6398 11.3301 14.0097C10.9601 14.3797 10.9601 14.9796 11.3301 15.3496C11.7001 15.7196 12.2999 15.7196 12.6699 15.3496C13.0399 14.9796 13.0399 14.3797 12.6699 14.0097ZM15.3496 11.3301C14.9796 10.9601 14.3797 10.9601 14.0097 11.3301C13.6398 11.7001 13.6398 12.2999 14.0097 12.6699C14.3797 13.0399 14.9796 13.0399 15.3496 12.6699C15.7196 12.2999 15.7196 11.7001 15.3496 11.3301ZM9.99026 11.3301C9.62027 10.9601 9.02041 10.9601 8.65042 11.3301C8.28044 11.7001 8.28044 12.2999 8.65042 12.6699C9.02041 13.0399 9.62027 13.0399 9.99026 12.6699C10.3602 12.2999 10.3602 11.7001 9.99026 11.3301ZM12.6699 8.65042C12.2999 8.28044 11.7001 8.28044 11.3301 8.65042C10.9601 9.02041 10.9601 9.62027 11.3301 9.99026C11.7001 10.3602 12.2999 10.3602 12.6699 9.99026C13.0399 9.62027 13.0399 9.02041 12.6699 8.65042Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bed.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="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM2 16H22V12H2V16ZM20 4V10C20 7.79086 18.2091 6 16 6H15C13.8053 6 12.7329 6.52376 12 7.35418C11.2671 6.52376 10.1947 6 9 6H8C5.79086 6 4 7.79086 4 10V4H20ZM16 8C17.1046 8 18 8.89543 18 10H13C13 8.89543 13.8954 8 15 8H16ZM9 8C10.1046 8 11 8.89543 11 10H6C6 8.89543 6.89543 8 8 8H9Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BedFilled.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="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM17 7C19 7 20 8.89543 20 10H13C13 8.89543 14 7 16 7H17ZM8 7C10 7 11 8.89543 11 10H4C4 8.89543 5 7 7 7H8Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Bell.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H15.874C15.9562 19.3196 16 19.6547 16 20C16 22.2091 14.2091 24 12 24C9.79086 24 8 22.2091 8 20C8 19.6547 8.04375 19.3196 8.12602 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM10.2676 19C10.0974 19.2942 10 19.6357 10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20C14 19.6357 13.9026 19.2942 13.7324 19H10.2676ZM11.9171 4.77778C9.55416 4.77778 7.57822 6.40998 7.35299 8.54785L7.24974 9.56957C7.14584 10.6481 7.078 11.5374 7.04602 12.2332L7.02693 12.807C7.00383 14.0852 6.60221 15.4394 5.8426 16.8798L5.65607 17.2222H18.4049L18.3026 17.0342C17.3858 15.3383 16.888 14.0211 16.8156 12.988L16.7864 12.3678C16.7398 11.6039 16.6215 10.3086 16.4326 8.50896C16.2105 6.39331 14.2553 4.77778 11.9171 4.77778Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H15.874C15.9562 19.3196 16 19.6547 16 20C16 22.2091 14.2091 24 12 24C9.79086 24 8 22.2091 8 20C8 19.6547 8.04375 19.3196 8.12602 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM10.2676 19C10.0974 19.2942 10 19.6357 10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20C14 19.6357 13.9026 19.2942 13.7324 19H10.2676ZM11.9171 4.77778C9.55416 4.77778 7.57822 6.40998 7.35299 8.54785L7.24974 9.56957C7.14584 10.6481 7.078 11.5374 7.04602 12.2332L7.02693 12.807C7.00383 14.0852 6.60221 15.4394 5.8426 16.8798L5.65607 17.2222H18.4049L18.3026 17.0342C17.3858 15.3383 16.888 14.0211 16.8156 12.988L16.7864 12.3678C16.7398 11.6039 16.6215 10.3086 16.4326 8.50896C16.2105 6.3933 14.2553 4.77778 11.9171 4.77778Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BellFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM12 24C10.1362 24 8.57006 22.7252 8.12602 21H15.874C15.4299 22.7252 13.8638 24 12 24Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM12 24C10.1362 24 8.57006 22.7252 8.12602 21H15.874C15.4299 22.7252 13.8638 24 12 24Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bike.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="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM4.83437 13.2522L5.5198 11.0001L5.5 11C3.567 11 2 12.567 2 14.5C2 16.433 3.567 18 5.5 18C7.433 18 9 16.433 9 14.5C9 13.2817 8.37753 12.2088 7.43328 11.5819L6.74772 13.8345C6.58692 14.3628 6.02824 14.6608 5.49989 14.5C4.97153 14.3392 4.67357 13.7805 4.83437 13.2522ZM22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.6261 14.2665C17.8066 14.7884 18.3761 15.0653 18.898 14.8848C19.42 14.7043 19.6968 14.1348 19.5163 13.6128L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5ZM17.9312 9.02906C18.1182 9.00985 18.3079 9 18.5 9C21.5376 9 24 11.4624 24 14.5C24 17.5376 21.5376 20 18.5 20C15.4624 20 13 17.5376 13 14.5C13 12.3585 14.2239 10.5028 16.0104 9.59439L15.4591 8H11C10.4477 8 10 7.55228 10 7C10 6.44772 10.4477 6 11 6H16C16.3601 6 16.6757 6.19034 16.8518 6.47589C17.0158 6.59237 17.1462 6.75926 17.217 6.96382L17.9312 9.02906Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM4.83437 13.2522L5.5198 11.0001L5.5 11C3.567 11 2 12.567 2 14.5C2 16.433 3.567 18 5.5 18C7.433 18 9 16.433 9 14.5C9 13.2817 8.37753 12.2088 7.43328 11.5819L6.74772 13.8345C6.58692 14.3628 6.02824 14.6608 5.49989 14.5C4.97153 14.3392 4.67357 13.7805 4.83437 13.2522ZM22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.6261 14.2665C17.8066 14.7884 18.3761 15.0653 18.898 14.8848C19.42 14.7043 19.6968 14.1348 19.5163 13.6128L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5ZM17.9312 9.02906C18.1182 9.00985 18.3079 9 18.5 9C21.5376 9 24 11.4624 24 14.5C24 17.5376 21.5376 20 18.5 20C15.4624 20 13 17.5376 13 14.5C13 12.3585 14.2239 10.5028 16.0104 9.59439L15.4591 8H11C10.4477 8 10 7.55228 10 7C10 6.44772 10.4477 6 11 6H16C16.3601 6 16.6757 6.19034 16.8518 6.47589C17.0158 6.59237 17.1462 6.75926 17.217 6.96382L17.9312 9.02906Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BikeFilled.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="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM5.5 11L5.5198 11.0001L5.21042 12.0166C3.96612 12.1601 3 13.2172 3 14.5C3 15.8807 4.11929 17 5.5 17C6.88071 17 8 15.8807 8 14.5C8 13.7391 7.66005 13.0576 7.12373 12.599L7.43328 11.5819C8.37753 12.2088 9 13.2817 9 14.5C9 16.433 7.433 18 5.5 18C3.567 18 2 16.433 2 14.5C2 12.567 3.567 11 5.5 11ZM18.5 17C19.8807 17 21 15.8807 21 14.5C21 13.2814 20.1281 12.2664 18.9741 12.0449L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.0121 12.4908C16.398 12.9463 16 13.6767 16 14.5C16 15.8807 17.1193 17 18.5 17ZM16.0104 9.59439C14.2239 10.5028 13 12.3585 13 14.5C13 17.5376 15.4624 20 18.5 20C21.5376 20 24 17.5376 24 14.5C24 11.4624 21.5376 9 18.5 9C18.3079 9 18.1182 9.00985 17.9312 9.02906L17.217 6.96382C17.1462 6.75926 17.0158 6.59237 16.8518 6.47589C16.6757 6.19034 16.3601 6 16 6H11C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8H15.4591L16.0104 9.59439Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM5.5 11L5.5198 11.0001L5.21042 12.0166C3.96612 12.1601 3 13.2172 3 14.5C3 15.8807 4.11929 17 5.5 17C6.88071 17 8 15.8807 8 14.5C8 13.7391 7.66005 13.0576 7.12373 12.599L7.43328 11.5819C8.37753 12.2088 9 13.2817 9 14.5C9 16.433 7.433 18 5.5 18C3.567 18 2 16.433 2 14.5C2 12.567 3.567 11 5.5 11ZM18.5 17C19.8807 17 21 15.8807 21 14.5C21 13.2814 20.1281 12.2664 18.9741 12.0449L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.0121 12.4908C16.398 12.9463 16 13.6767 16 14.5C16 15.8807 17.1193 17 18.5 17ZM16.0104 9.59439C14.2239 10.5028 13 12.3585 13 14.5C13 17.5376 15.4624 20 18.5 20C21.5376 20 24 17.5376 24 14.5C24 11.4624 21.5376 9 18.5 9C18.3079 9 18.1182 9.00985 17.9312 9.02906L17.217 6.96382C17.1462 6.75926 17.0158 6.59237 16.8518 6.47589C16.6757 6.19034 16.3601 6 16 6H11C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8H15.4591L16.0104 9.59439Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bookmark.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18L19 24V2C19 0.895431 18.1046 0 17 0H7C5.89543 0 5 0.89543 5 2V24L12 18ZM7 19.6516L12 15.3658L17 19.6516V2H7V19.6516Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18L19 24V2C19 0.895431 18.1046 0 17 0H7C5.89543 0 5 0.89543 5 2V24L12 18ZM7 19.6516L12 15.3658L17 19.6516V2H7V19.6516Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BookmarkFilled.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 d="M19 2C19 0.895431 18.1046 0 17 0H7C5.89543 0 5 0.89543 5 2V24L12 18L19 24V2Z" fill="#3E3832"/>
+<path d="M19 2C19 0.895431 18.1046 0 17 0H7C5.89543 0 5 0.89543 5 2V24L12 18L19 24V2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Bowl.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="M2 8V7H22V8C22 12.4183 18.4183 16 14 16H10C5.58172 16 2 12.4183 2 8ZM6 17.1679C2.46819 15.6248 0 12.1006 0 8V6C0 5.44772 0.447715 5 1 5H23C23.5523 5 24 5.44772 24 6V8C24 12.1006 21.5318 15.6248 18 17.1679V18C18 18.5523 17.5523 19 17 19H7C6.44771 19 6 18.5523 6 18V17.1679Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8V7H22V8C22 12.4183 18.4183 16 14 16H10C5.58172 16 2 12.4183 2 8ZM6 17.1679C2.46819 15.6248 0 12.1006 0 8V6C0 5.44772 0.447715 5 1 5H23C23.5523 5 24 5.44772 24 6V8C24 12.1006 21.5318 15.6248 18 17.1679V18C18 18.5523 17.5523 19 17 19H7C6.44771 19 6 18.5523 6 18V17.1679Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BowlFilled.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="M0 6C0 5.44772 0.447715 5 1 5H23C23.5523 5 24 5.44772 24 6V8C24 12.1006 21.5318 15.6248 18 17.1679V18C18 18.5523 17.5523 19 17 19H7C6.44771 19 6 18.5523 6 18V17.1679C2.46819 15.6248 0 12.1006 0 8V6Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6C0 5.44772 0.447715 5 1 5H23C23.5523 5 24 5.44772 24 6V8C24 12.1006 21.5318 15.6248 18 17.1679V18C18 18.5523 17.5523 19 17 19H7C6.44771 19 6 18.5523 6 18V17.1679C2.46819 15.6248 0 12.1006 0 8V6Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Braille.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C6 7.10457 5.10457 8 4 8C2.89543 8 2 7.10457 2 6C2 4.89543 2.89543 4 4 4C5.10457 4 6 4.89543 6 6ZM21 6C21 6.55228 20.5523 7 20 7C19.4477 7 19 6.55228 19 6C19 5.44772 19.4477 5 20 5C20.5523 5 21 5.44772 21 6ZM10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12ZM20 13C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13ZM12 12C12 13.1046 11.1046 14 10 14C8.89543 14 8 13.1046 8 12C8 10.8954 8.89543 10 10 10C11.1046 10 12 10.8954 12 12ZM15 13C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13ZM5 18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17C4.55228 17 5 17.4477 5 18ZM20 20C21.1046 20 22 19.1046 22 18C22 16.8954 21.1046 16 20 16C18.8954 16 18 16.8954 18 18C18 19.1046 18.8954 20 20 20Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C6 7.10457 5.10457 8 4 8C2.89543 8 2 7.10457 2 6C2 4.89543 2.89543 4 4 4C5.10457 4 6 4.89543 6 6ZM21 6C21 6.55228 20.5523 7 20 7C19.4477 7 19 6.55228 19 6C19 5.44772 19.4477 5 20 5C20.5523 5 21 5.44772 21 6ZM10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12ZM20 13C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13ZM12 12C12 13.1046 11.1046 14 10 14C8.89543 14 8 13.1046 8 12C8 10.8954 8.89543 10 10 10C11.1046 10 12 10.8954 12 12ZM15 13C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13ZM5 18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17C4.55228 17 5 17.4477 5 18ZM20 20C21.1046 20 22 19.1046 22 18C22 16.8954 21.1046 16 20 16C18.8954 16 18 16.8954 18 18C18 19.1046 18.8954 20 20 20Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/BrailleFilled.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="M2 2C0.895431 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V4C24 2.89543 23.1046 2 22 2H2ZM4 8C5.10457 8 6 7.10457 6 6C6 4.89543 5.10457 4 4 4C2.89543 4 2 4.89543 2 6C2 7.10457 2.89543 8 4 8ZM20 7C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5C19.4477 5 19 5.44772 19 6C19 6.55228 19.4477 7 20 7ZM11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6ZM4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14ZM21 12C21 12.5523 20.5523 13 20 13C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12ZM10 14C11.1046 14 12 13.1046 12 12C12 10.8954 11.1046 10 10 10C8.89543 10 8 10.8954 8 12C8 13.1046 8.89543 14 10 14ZM16 12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11C15.5523 11 16 11.4477 16 12ZM4 19C4.55228 19 5 18.5523 5 18C5 17.4477 4.55228 17 4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19ZM22 18C22 19.1046 21.1046 20 20 20C18.8954 20 18 19.1046 18 18C18 16.8954 18.8954 16 20 16C21.1046 16 22 16.8954 22 18Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C0.895431 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V4C24 2.89543 23.1046 2 22 2H2ZM4 8C5.10457 8 6 7.10457 6 6C6 4.89543 5.10457 4 4 4C2.89543 4 2 4.89543 2 6C2 7.10457 2.89543 8 4 8ZM20 7C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5C19.4477 5 19 5.44772 19 6C19 6.55228 19.4477 7 20 7ZM11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6ZM4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14ZM21 12C21 12.5523 20.5523 13 20 13C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12ZM10 14C11.1046 14 12 13.1046 12 12C12 10.8954 11.1046 10 10 10C8.89543 10 8 10.8954 8 12C8 13.1046 8.89543 14 10 14ZM16 12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11C15.5523 11 16 11.4477 16 12ZM4 19C4.55228 19 5 18.5523 5 18C5 17.4477 4.55228 17 4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19ZM22 18C22 19.1046 21.1046 20 20 20C18.8954 20 18 19.1046 18 18C18 16.8954 18.8954 16 20 16C21.1046 16 22 16.8954 22 18Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Calculator.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="M19 0C20.1046 0 21 0.89543 21 2V22C21 23.1046 20.1046 24 19 24H5C3.89543 24 3 23.1046 3 22V2C3 0.89543 3.89543 0 5 0H19ZM19 2H5V22H19V2ZM8 17C8.55228 17 9 17.4477 9 18C9 18.5523 8.55228 19 8 19C7.44772 19 7 18.5523 7 18C7 17.4477 7.44772 17 8 17ZM12 17C12.5523 17 13 17.4477 13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17ZM16 17C16.5523 17 17 17.4477 17 18C17 18.5523 16.5523 19 16 19C15.4477 19 15 18.5523 15 18C15 17.4477 15.4477 17 16 17ZM8 13C8.55228 13 9 13.4477 9 14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14C7 13.4477 7.44772 13 8 13ZM12 13C12.5523 13 13 13.4477 13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.4477 11.4477 13 12 13ZM16 13C16.5523 13 17 13.4477 17 14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14C15 13.4477 15.4477 13 16 13ZM8 9C8.55228 9 9 9.44771 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44771 7.44772 9 8 9ZM12 9C12.5523 9 13 9.44771 13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.44771 11.4477 9 12 9ZM16 9C16.5523 9 17 9.44771 17 10C17 10.5523 16.5523 11 16 11C15.4477 11 15 10.5523 15 10C15 9.44771 15.4477 9 16 9ZM17 5V7H7V5H17Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 0C20.1046 0 21 0.89543 21 2V22C21 23.1046 20.1046 24 19 24H5C3.89543 24 3 23.1046 3 22V2C3 0.89543 3.89543 0 5 0H19ZM19 2H5V22H19V2ZM8 17C8.55228 17 9 17.4477 9 18C9 18.5523 8.55228 19 8 19C7.44772 19 7 18.5523 7 18C7 17.4477 7.44772 17 8 17ZM12 17C12.5523 17 13 17.4477 13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17ZM16 17C16.5523 17 17 17.4477 17 18C17 18.5523 16.5523 19 16 19C15.4477 19 15 18.5523 15 18C15 17.4477 15.4477 17 16 17ZM8 13C8.55228 13 9 13.4477 9 14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14C7 13.4477 7.44772 13 8 13ZM12 13C12.5523 13 13 13.4477 13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.4477 11.4477 13 12 13ZM16 13C16.5523 13 17 13.4477 17 14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14C15 13.4477 15.4477 13 16 13ZM8 9C8.55228 9 9 9.44771 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44771 7.44772 9 8 9ZM12 9C12.5523 9 13 9.44771 13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.44771 11.4477 9 12 9ZM16 9C16.5523 9 17 9.44771 17 10C17 10.5523 16.5523 11 16 11C15.4477 11 15 10.5523 15 10C15 9.44771 15.4477 9 16 9ZM17 5V7H7V5H17Z" fill="#262626"/>
 </svg>