Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.0
 - @navikt/ds-icons@0.7.0
 - @navikt/ds-react@0.14.0
 - @navikt/ds-tokens@0.7.0
 - @navikt/ds-css-internal@0.7.0
 - @navikt/ds-react-internal@0.9.0

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["es2015", "react", "stage-2"]
-}

.eslintignore

@@ -1,4 +0,0 @@
-_templates/
-dist
-packages/node_modules/*/lib
-examples/

.eslintrc

@@ -1,18 +0,0 @@
-{
-  "env": {
-    "browser": true
-  },
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "rules": {
-    "no-unused-vars": [2, { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-    "indent": [2, 4, { "SwitchCase": 1 }],
-    "max-len": [2, 120, 4],
-    "comma-dangle": [2, "never"],
-    "arrow-parens": [2, "always"],
-    "import/no-extraneous-dependencies": ["error", { "peerDependencies": true }],
-    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }],
-    "react/jsx-indent-props": [2, 4],
-    "react/jsx-indent": [2, 4]
-  }
-}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,53 @@
+---
+name: Bug Report
+about: Meld inn bugs eller feil
+title: "[BUG]"
+labels: "bug \U0001F41B"
+assignees: ''
+
+---
+
+## Hvilken av tjenestene våre gjelder det?
+
+<!--
+  Sett en x i type pakke det gjelder:
+- [x] type
+-->
+
+- [ ] `Komponenter`
+- [ ] `Stiler`
+- [ ] `Ikoner`
+- [ ] `Annet`
+
+## Beskriv feilen/problemet
+
+<!-- 
+> Beskriv hva slags problem(er) som oppstår
+
+> Hva forventet du skulle oppstå?
+
+> Hva skjedde istedenfor?
+-->
+
+(skriv her.)
+
+## Steg for å reprodusere problemet
+
+<!--
+1. Steg en
+2. Steg to
+3. ....
+-->
+
+(skriv her.)
+
+## Eksempel/Tilleggsinformasjon
+
+<!--
+Screenshots eller kodesnippets
+Legg gjerne ved ekstrainfo som nettleser, desktop/mobil etc
+-->
+
+```
+ Hvis mulig, legg gjerne til kode her, evt lenke til kode i repo
+```

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,25 @@
+---
+name: Feature Request
+about: Foreslå noe nytt for designsystemet
+title: "[NEW]"
+labels: new ✨
+assignees: ''
+
+---
+
+## Beskriv forespørselen
+
+(skriv her.)
+
+## Hvilken funksjon vil dette har for bruker?
+
+(skriv her.)
+
+## Eksempler/Tilleggsinformasjon 
+
+<!--
+Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc. 
+Link gjerne til relaterte issues her også.
+-->
+
+(skriv her.)

.github/workflows/build-publish.yml

@@ -0,0 +1,161 @@
+# 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
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  test-build:
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: 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: Eslint and Stylelint
+        run: yarn lint
+      - name: Test
+        run: yarn test
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
+      - name: Test gatsby-build (design.nav.no)
+        run: yarn build:gatsby
+      - name: Test chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GIT_REPO }}
+          projectToken: ${{ secrets.CHROMATIC }}
+          exitZeroOnChanges: true
+
+  publish-npm:
+    needs: test-build
+    runs-on: ubuntu-latest
+    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@v2
+        with:
+          registry-url: https://registry.npmjs.org
+          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 --frozen-lockfile
+      - name: Boot
+        run: yarn boot
+      - 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: 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:
+          org_name: navikt
+        env:
+          AUTH_TOKEN: ${{secrets.GIT_REPO}}
+      - name: Publish to Github registry
+        run: |
+          rm lerna.json && cp utilities/lerna.json lerna.json
+          git add . && git commit -m "tmp"
+          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
+
+  publish-pages:
+    needs: test-build
+    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
+      - name: Gulp-build
+        run: yarn boot
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
+      - 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
+        env:
+          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
+
+      - name: Deploy storybook to designsystem-repo
+        uses: peaceiris/actions-gh-pages@v3
+        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"

.github/workflows/publish_storybook.yml

@@ -0,0 +1,39 @@
+# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
+
+name: Publish Storybook
+
+on:
+ workflow_dispatch
+
+jobs:
+  publish-storybook:
+    runs-on: ubuntu-latest
+    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 Storybook
+        run: yarn build-storybook
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        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"

.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,41 @@
+name: Update tokens
+
+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 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

.github/workflows/vk-innhold-dev.yml

@@ -0,0 +1,47 @@
+name: Publish verktøykasse-innhold to dev
+
+on:
+  push:
+    branches: verktoykasse-prototype
+  repository_dispatch:
+    types: [new-content]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: verktoykasse-prototype
+          fetch-depth: 0 # Required to retrieve git history
+      - 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
+      - name: Gulp-build
+        run: yarn boot
+      - name: Eslint and Stylelint
+        run: yarn lint
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=dev" >> website/.env
+      - name: Gatsby-build
+        run: yarn build:gatsby
+      - name: Deploy to dev gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/verktoykasse-innhold
+          publish_dir: website/public
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

.gitignore

@@ -1,13 +1,118 @@
-/node_modules
-.idea/
-npm-debug.log
-dist/
-assets.json
-lib/
-lerna-debug.log
-examples/legacy/node_modules
-examples/legacy/out
-examples/webpack/node_modules
-examples/webpack/out
-.gitattributes
-.iml
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+.npmrc
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+website/**/public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
+
+
+# Gatsby build/development autogenerated dirs
+**/.cache/
+**/website/public
+
+# Transpiled package files
+packages/**/lib
+*.d.ts
+
+.vscode
+# File created on build in nav-frontend-core
+*-exports.less
+
+# Copy/paste from old repo
+/node_modules
+.idea/
+npm-debug.log
+dist/
+assets.json
+lib/
+lerna-debug.log
+examples/legacy/node_modules
+examples/legacy/out
+examples/webpack/node_modules
+examples/webpack/out
+.gitattributes
+.iml
+.DS_Store
+
+*.d.ts
+*-exports.less
+*/figma-api/icons
+*/ds-icons/png
+packages/**/css
+utilities/**/css
+
+*/static/*.zip
+*/static/png
+@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

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+yarn pretty-quick --staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+yarn lint

.lesshintrc

@@ -1,9 +0,0 @@
-{
-  "fileExtensions": [".less", ".css"],
-  "zeroUnit": false,
-  "propertyOrdering": false,
-  "maxCharPerLine": { "limit": 120 },
-  "qualifyingElement": {
-    "allowWithClass": true
-  }
-}

.storybook/config.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { configure, setAddon, addDecorator } from '@storybook/react';
-import sectionsAddon from 'react-storybook-addon-sections';
-
-const showcaseRequire = require.context('./../packages/showcase', true, /stories\.js$/);
-const moduleRequire = require.context('./../packages/node_modules', true, /stories\.js$/);
-
-setAddon(sectionsAddon);
-addDecorator((story) => (
-    <div style={{padding: '1rem 1.5rem'}}>{story()}</div>
-));
-
-function loadStories() {
-    showcaseRequire.keys().forEach((filename) => showcaseRequire(filename));
-    moduleRequire.keys().forEach((filename) => moduleRequire(filename));
-}
-
-configure(loadStories, module);

.storybook/main.js

@@ -0,0 +1,31 @@
+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)",
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: { hideNoControlsWarning: true },
+      },
+    },
+  ],
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import NavTheme from "./theme.js";
+
+addons.setConfig({
+  theme: NavTheme,
+});

.storybook/preview.js

@@ -0,0 +1,14 @@
+import "nav-frontend-core";
+import "@navikt/ds-css/index.css";
+import "@navikt/ds-css-internal/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  options: {
+    storySort: {
+      method: "",
+      order: [],
+      locales: "",
+    },
+  },
+};

.storybook/stories/introduction.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta } from "@storybook/addon-docs";
+
+<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.
+For å legge til all stylingen som trengs må man da bare importere `ds-css`.
+
+```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/#/
+
+Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.

.storybook/stories/migration.stories.mdx

@@ -0,0 +1,263 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Migration" />
+
+# Migreringsguider
+
+## Migrering til ds-css v0.12, ds-tokens v0.7
+
+### Tokens er refaktort og oppdatert
+
+- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
+- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
+- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
+
+Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
+For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
+
+Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
+oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
+
+## Styling
+
+De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
+etter oppdateringen.
+
+## Sizing
+
+Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
+props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
+
+Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
+
+## Overridable component
+
+Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
+Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
+slik at vi får sett på det tilfellet!
+
+```jsx
+/* Før */
+<BodyShort component="span" />
+
+/* Etter */
+<BodyShort as="span" />
+```
+
+## Navneendringer
+
+### Buttons
+
+- `Primary` -> `Secondary` (Normal)
+- `Action` -> `Primary` (Hoved)
+- `Secondary` -> `Tertiary` (Flat)
+
+For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
+
+## Nytt
+
+- GuidePanel (veilederpanel)
+- HelpText (Hjeleptext)
+
+### Typography
+
+Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
+APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
+
+For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
+
+Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
+
+## Fjernet komponenter
+
+Fjernet da den var utdaterte/må ses mer på
+
+- ProductPageLayout
+
+## Typography
+
+Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
+
+Lagt til en Heading lvl 6 og size="xsmall"
+
+## AccordionMenu
+
+Implementert med dot-notation
+
+- Trenger bare importere AccordionMenu
+- AccordionMenuCollapsable -> AccordionMenu.Collapsable
+- AccordionMenuItem -> AccordionMenu.Item
+
+## Accordion
+
+Implementert med dot-notation
+
+- Trenger bare importere Accordion nå
+
+Fragmenterte komponenten:
+
+- Accordion -> Accordion.Item
+- Header -> Accordion.Header
+- children -> Accordion.Content
+
+La til prop: `defaultOpen` på `Accordion.Item`
+
+```jsx
+/* Før */
+<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
+  Eu magna fugiat officia
+</Accordion>
+<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
+  Eu magna fugiat officia
+</Accordion>
+
+/* Etter */
+<Accordion>
+  <Accordion.Item open={open}>
+    <Accordion.Header onClick={(open) => setOpen(!open)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item open={open2}>
+    <Accordion.Header onClick={(open2) => setOpen(!open2)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Alert
+
+- La til `fullWidth`-prop for alert uten border-radius og width 100%
+- La til `inline`-prop for alert med transparent border/background og 0 padding.
+
+## Button
+
+Oppdatert med Overridablecomponent.
+
+Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
+
+Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
+det på css-klassen `.navds-button__inner` da children er wrappet i den.
+
+## CopyToClipboard
+
+Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
+
+`text`-prop -> `copyText`
+`label`-prop -> `popoverText`
+
+Fjernet `icon`-prop, la til `popoverPlacement`
+
+## Modal
+
+Implementert med dot-notasjon
+
+Innholds-padding er flyttet fra Modal -> Modal.Content
+
+```
+/* Før */
+<Modal>Modal innhold</Modal>
+
+/* Etter */
+<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
+```
+
+## LinkPanel
+
+Implementert med dot-notasjon
+
+```jsx
+/* Før */
+<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
+
+/* Etter */
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+</LinkPanel>
+```
+
+Kan nå legge til en beskrivelse med `Linkpanel.Description`
+
+```jsx
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+  <LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
+</LinkPanel>
+```
+
+## Popover
+
+Implementert med dot-notasjon
+
+Får nå padding rundt innhold med Popover.Content
+
+```jsx
+
+/* Før */
+
+<Popover>Popover innhold</Popover>
+
+/* Etter */
+
+<Popover>
+  <Popover.Content>Modal innhold</Popover.Content>
+</Popover>
+```
+
+## Header -> PageHeader
+
+Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
+
+- `variant`-prop -> `align`
+- `theme`-prop -> `variant`
+
+## MicroCard
+
+- Oppdatert med OverridableComponent
+
+## SpeechBubble
+
+Implementert med Dot-notasjon
+
+- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
+
+Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.

.storybook/stories/roadmap-table.tsx

@@ -0,0 +1,269 @@
+import { Table as DsTable } from "@navikt/ds-react";
+import {
+  SuccessFilled as SuccessIcon,
+  ErrorFilled as ErrorIcon,
+} from "@navikt/ds-icons";
+import styled from "styled-components";
+
+const Success = styled(SuccessIcon)`
+  color: var(--navds-semantic-color-feedback-success-icon);
+`;
+
+const Error = styled(ErrorIcon)`
+  color: var(--navds-semantic-color-feedback-danger-icon);
+`;
+
+const Table = styled(DsTable)`
+  .navds-table__cell > svg,
+  .navds-table__cell > span {
+    vertical-align: middle;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+type CompT = {
+  name: string;
+  status: Partial<[boolean, boolean, boolean]>;
+  desc?: React.ReactNode;
+};
+
+const Components: CompT[] = [
+  {
+    name: "Alertstriper",
+    status: [true, true, true],
+    desc: "Navn: Alert",
+  },
+  { name: "Chevron", status: [false], desc: "" },
+  {
+    name: "Core",
+    status: [true, true, false],
+    desc: <code>@navikt/ds-css</code>,
+  },
+  {
+    name: "Ekspanderbartpanel",
+    status: [true, true, true],
+    desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
+  },
+  { name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
+  {
+    name: "Fullbreddeknapp-style",
+    status: [false],
+    desc: "",
+  },
+  { name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
+  { name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
+  {
+    name: "Ikoner-assets",
+    status: [true, true, true],
+    desc: <code>@navikt/ds-icons</code>,
+  },
+  {
+    name: "js-utils",
+    status: [true, true, false],
+    desc:
+      "Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
+  },
+  { name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
+  { name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
+  { name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
+  { name: "Lesmerpanel", status: [false], desc: "" },
+  { name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
+  { name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
+  { name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
+  {
+    name: "Bekrefcheckbokspanel",
+    status: [true, true, true],
+    desc: "Navn: ConfirmationPanel",
+  },
+  {
+    name: "Checkbokspanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbokspanel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbox-gruppe",
+    status: [true, true, true],
+    desc: "Navn: CheckboxGroup",
+  },
+  { name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
+  {
+    name: "Feiloppsummering",
+    status: [true, true, false],
+    desc: "Navn: ErrorSummary, API vil bli endret for denne",
+  },
+  {
+    name: "Fnr-input",
+    status: [false],
+    desc:
+      "Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
+  },
+  { name: "Input", status: [true, true, true], desc: "Navn: TextField" },
+  {
+    name: "Label",
+    status: [false],
+    desc: "Skjema-elementer fikser dette selv",
+  },
+  { name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
+  { name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
+  {
+    name: "Radiopanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Radio-panel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  { name: "Select", status: [true, true, true], desc: "Navn: Select" },
+  { name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
+  {
+    name: "Skjemaelement-feilemelding",
+    status: [false],
+    desc: "",
+  },
+  { name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
+  { name: "Togglegruppe", status: [true, false, false], desc: "" },
+  { name: "ToggleKnapp", status: [true, false, false], desc: "" },
+  {
+    name: "Toggle",
+    status: [true, false, false],
+    desc: "Vil bli samme komponent som ToggleKnapp",
+  },
+  { name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
+  { name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
+  { name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
+  { name: "Stegindikator", status: [true, false, false], desc: "" },
+  {
+    name: "Tabell-style",
+    status: [true, true, false],
+    desc: "Navn: Table, Er nå publisert som React-component",
+  },
+  { name: "Tabs", status: [true, false, false], desc: "" },
+  { name: "Tekstomrade", status: [false], desc: "" },
+  {
+    name: "Typografi",
+    status: [true, true, true],
+    desc: "Navn: se typography-mappen i storybook",
+  },
+  { name: "veileder", status: [false], desc: "" },
+  {
+    name: "Veilederpanel",
+    status: [true, true, true],
+    desc: "Navn: GuidePanel",
+  },
+];
+
+const NewComps: CompT[] = [
+  {
+    name: "AccordionMenu",
+    status: [true, true, true],
+    desc: "",
+  },
+  {
+    name: "SearcField",
+    status: [true, true, false],
+    desc: "Denne vil undergå større endringer",
+  },
+  {
+    name: "MicroCard",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "PageHeader",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "CopyToClipboard",
+    status: [true, true, false],
+    desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
+  },
+  {
+    name: "Table",
+    status: [true, true, false],
+    desc:
+      "Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
+  },
+  {
+    name: "Switch",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Tooltip",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Timeline",
+    status: [true, false, false],
+    desc: "",
+  },
+];
+
+const CompTable = ({ list }) => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Komponent</Table.HeaderCell>
+        <Table.HeaderCell>Med i nytt system</Table.HeaderCell>
+        <Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
+        <Table.HeaderCell>Fullført**</Table.HeaderCell>
+        <Table.HeaderCell>Info</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {list.map((comp) => {
+        return (
+          <Table.Row>
+            <Table.HeaderCell>{comp.name}</Table.HeaderCell>
+            <Table.DataCell>
+              {comp.status?.[0] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[0] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[1] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[2] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
+          </Table.Row>
+        );
+      })}
+    </Table.Body>
+  </Table>
+);
+
+export const NewCompTable = () => {
+  return <CompTable list={NewComps} />;
+};
+
+export const OldCompTable = () => {
+  return <CompTable list={Components} />;
+};

.storybook/stories/roadmap.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
+
+<Meta title="ds-react/Roadmap" />
+
+# Roadmap
+
+## Komponenter
+
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)
+
+## Tokens
+
+Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
+Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
+
+## Intern / Ekstern sizing
+
+Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
+
+## Ny dokumentasjon-side
+
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"
+
+## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
+
+Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
+Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
+
+Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
+
+## Theming
+
+Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
+eks darkmode.
+
+## Vue, svelte, web-components etc...
+
+Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
+noe vi kunne ta en titt på hvis vi ser at det trengs.
+
+## Versjonering
+
+De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
+slik at man kan ha mer finkontroll over komponentbruk på siden sin.

.storybook/theme.js

@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "NAV Designsystem",
+});

.storybook/webpack.config.js

@@ -1,33 +1,31 @@
-const path = require('path');
+const path = require("path");
 
-module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.less$/,
-                use: [
-                    { loader: 'style-loader' },
-                    { loader: 'css-loader' },
-                    {
-                        loader: 'less-loader',
-                        options: {
-                            globalVars: {
-                                nodeModulesPath: '\'~\'',
-                                coreModulePath: '\'~\''
-                            },
-                            include: path.resolve(__dirname, '../')
-                        }
-                    }
-                ]
-            },
-            {
-                test: /\.md$/,
-                use: [{ loader: 'raw-loader' }]
-            },
-            {
-                test: /\.css$/,
-                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
-            }
-        ]
+module.exports = (baseConfig) => {
+  baseConfig.config.module.rules.push(
+    {
+      test: /\.css$/,
+      use: ["style-loader", "css-loader"],
+      include: [
+        path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
+      ],
+    },
+    {
+      test: /\.less$/,
+      loaders: ["style-loader", "css-loader", "less-loader"],
+      include: path.resolve(__dirname, "../packages/"),
     }
-};
+  );
+  baseConfig.config.resolve.alias = {
+    ...baseConfig.config.resolve.alias,
+    "./normalize.css": path.resolve(
+      __dirname,
+      "../node_modules/normalize.css/normalize.css"
+    ),
+    "./@navikt/ds-tokens": path.resolve(
+      __dirname,
+      "../node_modules/@navikt/ds-tokens/dist/tokens.css"
+    ),
+  };
+
+  return baseConfig.config;
+};

@navikt/README.md

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

@navikt/core/css/accordion-menu.css

@@ -0,0 +1,105 @@
+:root {
+  --navds-accordion-menu-color-text: var(--navds-semantic-color-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-accordion-menu-color-background-hover: var(
+    --navds-global-color-blue-50
+  );
+  --navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
+}
+
+.navds-accordion-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-accordion-menu-collapsable__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-accordion-menu-color-text);
+  text-decoration: underline;
+}
+
+.navds-accordion-menu-item,
+.navds-accordion-menu-collapsable__button {
+  display: flex;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  text-decoration: none;
+}
+
+.navds-accordion-menu-collapsable__expand-icon {
+  font-size: 1.5rem;
+  color: var(--navds-accordion-menu-color);
+  flex-shrink: 0;
+  margin-left: var(--navds-spacing-2);
+}
+
+.navds-accordion-menu-collapsable--open
+  > .navds-accordion-menu-collapsable__button
+  > .navds-accordion-menu-collapsable__expand-icon {
+  transform: rotate(180deg);
+}
+
+.navds-accordion-menu-collapsable .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: var(--navds-spacing-8);
+}
+
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: var(--navds-spacing-12);
+}
+
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: var(--navds-spacing-16);
+}
+
+.navds-accordion-menu-item:focus,
+.navds-accordion-menu-collapsable__button:focus {
+  outline: 3px solid var(--navds-accordion-menu-outline-focus);
+  outline-offset: -3px;
+  color: var(--navds-accordion-menu-color-text-focus);
+}
+
+.navds-accordion-menu-collapsable__button:focus
+  > .navds-accordion-menu-collapsable__expand-icon {
+  color: var(--navds-accordion-menu-color-focus);
+}
+
+.navds-accordion-menu-item:hover,
+.navds-accordion-menu-collapsable__button:hover {
+  background-color: var(--navds-accordion-menu-color-background-hover);
+}
+
+.navds-accordion-menu-item--active {
+  box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
+  color: var(--navds-accordion-menu-color-text-active);
+  text-decoration: none;
+}

@navikt/core/css/accordion.css

@@ -0,0 +1,76 @@
+: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-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-border-focus: var(
+    ---navds-semantic-color-component-background-light
+  );
+}
+
+.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:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-accordion-color-border-focus);
+}
+
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+  text-decoration: underline;
+}
+
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
+}
+
+.navds-accordion__header {
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  background: transparent;
+  text-align: left;
+  border: none;
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #a0a0a0;
+  gap: var(--navds-spacing-4);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+}
+
+.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/Source-Sans-Pro-600.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  font-weight: 600;
+  font-style: normal;
+  src: url(data:application/font-woff;base64,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 truncated
+    format("woff");
+}

@navikt/core/css/baseline/Source-Sans-Pro-italic.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-style: italic;
+  src: url(data:application/font-woff;base64,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 truncated
+    format("woff");
+}

@navikt/core/css/baseline/Source-Sans-Pro-regular.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-style: normal;
+  src: url(data:application/font-woff;base64,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 truncated
+    format("woff");
+}

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

@@ -0,0 +1,47 @@
+@import "@navikt/ds-tokens";
+@import "normalize.css";
+@import "Source-Sans-Pro-regular.css";
+@import "Source-Sans-Pro-italic.css";
+@import "Source-Sans-Pro-600.css";
+@import "print.css";
+@import "utility.css";
+
+/* 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.333;
+  color: var(--navds-semantic-color-text);
+  font-size: 1.125rem;
+}
+
+a {
+  color: var(--navds-semantic-color-link);
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}

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

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+     * Printing Tables:
+     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

@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

@@ -0,0 +1,46 @@
+/*
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+ *
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.sr-only,
+.navds-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+
+  /* 1 */
+}
+
+/*
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+ *
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.sr-only.focusable:active,
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}

@navikt/core/css/button.css

@@ -0,0 +1,259 @@
+: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
+  );
+}
+
+.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: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 {
+  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 {
+  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 {
+  background-color: var(--navds-button-color-danger-background);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:disabled {
+  opacity: 30%;
+  cursor: not-allowed;
+  transform: none;
+}

@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 > .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 > .sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .sr-only + input:not(:first-child) {
+  margin-top: 0;
+}

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

@@ -0,0 +1,13 @@
+/*
+  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 "text-field.css";
+@import "textarea.css";
+@import "search-field.css";

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

@@ -0,0 +1,182 @@
+:root {
+  --navds-radio-checkbox-color-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --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-color-text-primary);
+}
+
+.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: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: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(: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);
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--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-field.css

@@ -0,0 +1,59 @@
+:root {
+  --navds-search-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-clearbutton-border: var(
+    --navds-semantic-color-border
+  );
+}
+
+.navds-search-field__input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-form-field--small .navds-search-field__input {
+  padding: 0.15rem;
+  min-height: 32px;
+}
+
+.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child:first-child {
+  border-radius: 4px;
+}
+
+.navds-search-field__input-wrapper :focus {
+  z-index: var(--navds-z-index-focus);
+}
+
+.navds-search-field__button,
+.navds-search-field__clear-button {
+  flex-shrink: 0;
+}
+
+.navds-search-field--error
+  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
+  border-color: var(--navds-search-field-color-border-error);
+}
+
+.navds-search-field--disabled {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,84 @@
+: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;
+  padding: 0.5rem;
+  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-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;
+}
+
+/**
+  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/text-field.css

@@ -0,0 +1,86 @@
+:root {
+  --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: 2px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0 0.15rem;
+  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);
+}
+
+/* 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: 48px;
+}
+
+.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: 32px;
+}
+
+.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

@@ -0,0 +1,217 @@
+/**************************
+ * .navds-grid *
+ **************************/
+
+.navds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-gap: var(--navds-spacing-4);
+}
+
+@media (min-width: 448px) {
+  .navds-grid {
+    grid-gap: var(--navds-spacing-6);
+  }
+}
+
+/**************************
+ * .navds-grid__cell *
+ **************************/
+
+.navds-grid__cell--xs-1 {
+  grid-column: span 1;
+}
+
+.navds-grid__cell--xs-2 {
+  grid-column: span 2;
+}
+
+.navds-grid__cell--xs-3 {
+  grid-column: span 3;
+}
+
+.navds-grid__cell--xs-4 {
+  grid-column: span 4;
+}
+
+.navds-grid__cell--xs-5 {
+  grid-column: span 5;
+}
+
+.navds-grid__cell--xs-6 {
+  grid-column: span 6;
+}
+
+.navds-grid__cell--xs-7 {
+  grid-column: span 7;
+}
+
+.navds-grid__cell--xs-8 {
+  grid-column: span 8;
+}
+
+.navds-grid__cell--xs-9 {
+  grid-column: span 9;
+}
+
+.navds-grid__cell--xs-10 {
+  grid-column: span 10;
+}
+
+.navds-grid__cell--xs-11 {
+  grid-column: span 11;
+}
+
+.navds-grid__cell--xs-12 {
+  grid-column: span 12;
+}
+
+@media (min-width: 448px) {
+  .navds-grid__cell--sm-1 {
+    grid-column: span 1;
+  }
+
+  .navds-grid__cell--sm-2 {
+    grid-column: span 2;
+  }
+
+  .navds-grid__cell--sm-3 {
+    grid-column: span 3;
+  }
+
+  .navds-grid__cell--sm-4 {
+    grid-column: span 4;
+  }
+
+  .navds-grid__cell--sm-5 {
+    grid-column: span 5;
+  }
+
+  .navds-grid__cell--sm-6 {
+    grid-column: span 6;
+  }
+
+  .navds-grid__cell--sm-7 {
+    grid-column: span 7;
+  }
+
+  .navds-grid__cell--sm-8 {
+    grid-column: span 8;
+  }
+
+  .navds-grid__cell--sm-9 {
+    grid-column: span 9;
+  }
+
+  .navds-grid__cell--sm-10 {
+    grid-column: span 10;
+  }
+
+  .navds-grid__cell--sm-11 {
+    grid-column: span 11;
+  }
+
+  .navds-grid__cell--sm-12 {
+    grid-column: span 12;
+  }
+}
+
+@media (min-width: 648px) {
+  .navds-grid__cell--md-1 {
+    grid-column: span 1;
+  }
+
+  .navds-grid__cell--md-2 {
+    grid-column: span 2;
+  }
+
+  .navds-grid__cell--md-3 {
+    grid-column: span 3;
+  }
+
+  .navds-grid__cell--md-4 {
+    grid-column: span 4;
+  }
+
+  .navds-grid__cell--md-5 {
+    grid-column: span 5;
+  }
+
+  .navds-grid__cell--md-6 {
+    grid-column: span 6;
+  }
+
+  .navds-grid__cell--md-7 {
+    grid-column: span 7;
+  }
+
+  .navds-grid__cell--md-8 {
+    grid-column: span 8;
+  }
+
+  .navds-grid__cell--md-9 {
+    grid-column: span 9;
+  }
+
+  .navds-grid__cell--md-10 {
+    grid-column: span 10;
+  }
+
+  .navds-grid__cell--md-11 {
+    grid-column: span 11;
+  }
+
+  .navds-grid__cell--md-12 {
+    grid-column: span 12;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-grid__cell--lg-1 {
+    grid-column: span 1;
+  }
+
+  .navds-grid__cell--lg-2 {
+    grid-column: span 2;
+  }
+
+  .navds-grid__cell--lg-3 {
+    grid-column: span 3;
+  }
+
+  .navds-grid__cell--lg-4 {
+    grid-column: span 4;
+  }
+
+  .navds-grid__cell--lg-5 {
+    grid-column: span 5;
+  }
+
+  .navds-grid__cell--lg-6 {
+    grid-column: span 6;
+  }
+
+  .navds-grid__cell--lg-7 {
+    grid-column: span 7;
+  }
+
+  .navds-grid__cell--lg-8 {
+    grid-column: span 8;
+  }
+
+  .navds-grid__cell--lg-9 {
+    grid-column: span 9;
+  }
+
+  .navds-grid__cell--lg-10 {
+    grid-column: span 10;
+  }
+
+  .navds-grid__cell--lg-11 {
+    grid-column: span 11;
+  }
+
+  .navds-grid__cell--lg-12 {
+    grid-column: span 12;
+  }
+}

@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,25 @@
+@import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+
+@import "accordion.css";
+@import "accordion-menu.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 "modal.css";
+@import "popover.css";
+@import "tag.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "speech-bubble.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,123 @@
+: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-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
+.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;
+}
+
+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+@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/modal.css

@@ -0,0 +1,68 @@
+: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-modal-color-background);
+  border-radius: 4px;
+  display: block;
+  position: relative;
+  overflow: auto;
+  max-height: 100%;
+}
+
+.navds-modal__content {
+  padding: var(--navds-spacing-4);
+}
+
+.navds-modal:focus,
+.navds-modal--focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-modal__overlay {
+  position: fixed;
+  z-index: var(--navds-z-index-modal);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--navds-modal-color-overlay);
+  padding: var(--navds-spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-modal__button--shake {
+  transform: rotate(0deg);
+  transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
+}
+
+/* prettier-ignore */
+.navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
+  transform: rotate(10deg);
+  transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
+}
+
+.navds-modal__button {
+  position: absolute;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
+  display: flex;
+  padding: var(--navds-spacing-2);
+}
+
+.navds-modal__button svg {
+  /* 24x24px */
+  height: 1.5rem;
+  width: 1.5rem;
+}

@navikt/core/css/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@navikt/ds-css",
+  "version": "0.12.0",
+  "private": false,
+  "description": "Css for NAV Designsystem components",
+  "author": "NAV Designsystem team",
+  "keywords": [
+    "css"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
+  },
+  "main": "./dist/index.css",
+  "scripts": {
+    "build": "postcss --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.7.0",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.3.6",
+    "postcss-cli": "^8.3.1",
+    "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/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

@@ -0,0 +1,82 @@
+: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);
+  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 {
+  display: none;
+}
+
+.navds-popover:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-popover__arrow {
+  z-index: -1;
+}
+
+.navds-popover__arrow::before {
+  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;
+  top: 0;
+  left: 0;
+}
+
+.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {
+  bottom: calc(1rem / -2);
+}
+
+.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow::before {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow {
+  top: calc(1rem / -2);
+}
+
+/* prettier-ignore */
+.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow::before {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow {
+  right: calc(1rem / -2);
+}
+
+.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow::before {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow {
+  left: calc(1rem / -2);
+}
+
+.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow::before {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}

@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/table.css

@@ -0,0 +1,32 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+}
+
+.navds-table {
+  border-collapse: collapse;
+  width: 100%;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  text-align: left;
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+}
+
+.navds-table--small .navds-table__cell {
+  padding: var(--navds-spacing-2);
+}

@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/typography.css

@@ -0,0 +1,167 @@
+/* Heading */
+.navds-heading {
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-heading--2xlarge {
+  font-size: var(--navds-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-heading-2xlarge);
+}
+
+.navds-heading--2xlarge.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
+}
+
+.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,48 @@
+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;
+};
+
+/**
+ * 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/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@navikt/ds-icons",
+  "version": "0.7.0",
+  "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",
+    "convert-icons": "node scripts/pngConverter.mjs",
+    "clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node scripts/zipIcons.mjs",
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons",
+    "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/uuid": "^8.3.1",
+    "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",
+    "zip-dir": "^2.0.0"
+  }
+}

@navikt/core/icons/scripts/pngConverter.mjs

@@ -0,0 +1,41 @@
+import { existsSync, mkdirSync, readdirSync } from "fs";
+import sharp from "sharp";
+import rimraf from "rimraf";
+import pLimit from "p-limit";
+
+const convertToPng = async () => {
+  const inputDir = "./svg/";
+  const outDir = "./png/";
+  const sizes = [16, 24, 128, 256];
+  console.log("Converting icons to .png format");
+
+  const limit = pLimit(20);
+
+  if (existsSync(outDir)) {
+    rimraf.sync(outDir);
+  }
+  mkdirSync(outDir);
+  sizes.forEach((size) => mkdirSync(outDir + size.toString()));
+
+  await Promise.all(
+    readdirSync(inputDir).map((file) => {
+      return limit(() =>
+        sizes.forEach((size) => {
+          const density = (100 * size) / 16;
+          sharp(inputDir + file, { density })
+            .resize(size)
+            .png()
+            .toFile(outDir + size.toString() + "/" + file.replace("svg", "png"))
+            .catch((e) => console.error(e));
+        })
+      );
+    })
+  );
+  console.log("Finished converting icons to .png format");
+};
+
+try {
+  convertToPng();
+} catch (e) {
+  console.error(e);
+}

@navikt/core/icons/scripts/zipIcons.mjs

@@ -0,0 +1,16 @@
+import zipdir from "zip-dir";
+
+const zipDir = async (dir, name) => {
+  await zipdir(dir, { saveTo: name }, function (err, buffer) {
+    if (err) {
+      console.error(err);
+    }
+  });
+};
+
+try {
+  zipDir("./png/", "NAV-ikonpakke-png.zip");
+  zipDir("./svg/", "NAV-ikonpakke-svg.zip");
+} catch (e) {
+  console.error(e);
+}

@navikt/core/icons/stories/icons.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-icons/Kom i gang" />
+
+# Ta i bruk ikonpakken `@navikt/ds-icons`
+
+Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-icons
+```
+
+```jsx
+Import { Expand } from `@navikt/ds-icons`;
+
+<Expand
+	title="Åpne meny"
+/>
+```
+
+Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+
+import * as Icons from "../src";
+export default {
+  title: "ds-icons/Ikoner",
+  argTypes: {
+    Icon: {
+      defaultValue: "System",
+      control: {
+        type: "select",
+        options: Object.entries(Icons).map(([Name, _]) => Name),
+      },
+    },
+    color: { control: "color" },
+  },
+};
+
+if (process.env.STORYBOOK_CHROMATIC === "true") {
+  const iconsStories = storiesOf("ds-icons/Ikoner", module);
+
+  Object.entries(Icons).forEach(([name, Icon]) => {
+    iconsStories.add(name, () => (
+      <div>
+        <Icon title="hello, world" />
+        <Icon style={{ height: "2em", width: "2em" }} />
+        <Icon style={{ height: "4em", width: "4em" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
+        />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
+        />
+      </div>
+    ));
+  });
+}
+
+const Template = ({ Icon, color, size, ...args }) => {
+  const Iconname = Icons[Icon];
+  return <Iconname style={{ fontSize: size, color }} {...args} />;
+};
+export const Ikon = Template.bind({});
+Ikon.args = {
+  size: "24px",
+};

@navikt/core/icons/svg/Add.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="M11 13L11 21H13V13H21V11H13V3H11L11 11H3V13H11Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AddCircle.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 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

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

@@ -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="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="M19.4858 7.11515C20.7324 5.94459 20.7324 4.04674 19.4858 2.87619C18.2838 1.74743 16.3616 1.70712 15.1081 2.75525L14.9716 2.87619L3.6862 13.4736L3.52649 13.6301C1.61004 15.5902 1.66328 18.6389 3.6862 20.5385C5.70912 22.4381 8.95584 22.4881 11.0432 20.6885L11.2098 20.5385L22.4953 9.94113L24 11.3541L12.7146 21.9515L12.5304 22.1187C9.61022 24.6816 5.02951 24.6259 2.18147 21.9515C-0.666561 19.2771 -0.725895 14.9757 2.00347 12.2335L2.18147 12.0606L13.4669 1.4632C15.5445 -0.487732 18.913 -0.487732 20.9905 1.4632C23.0135 3.36279 23.0667 6.41157 21.1503 8.37164L20.9905 8.52814L9.7051 19.1255L9.56865 19.2465C8.31517 20.2946 6.39296 20.2543 5.19092 19.1255C3.98889 17.9968 3.94596 16.1918 5.06214 15.0147L5.19092 14.8866L16.4764 4.28917L17.9811 5.70216L6.69565 16.2996L6.61297 16.3867C6.28225 16.7789 6.30981 17.3502 6.69565 17.7126C7.08149 18.0749 7.68993 18.1008 8.10757 17.7902L8.20038 17.7126L19.4858 7.11515Z" 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="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" 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

@@ -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="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

@@ -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="M7 12L15.5714 3L17 4.5L9.85714 12L17 19.5L15.5714 21L7 12Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BackFilled.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="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

@@ -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="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

@@ -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="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

@@ -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.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

@@ -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="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>