Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.19 - @navikt/ds-icons@0.5.2 - @navikt/ds-react@0.7.2
Forsøk på margin-top fix for form-elements (#1176 )
2026-10-13 09:12:03 +00:00 · 2021-08-17 08:02:27 +00:00 · 2021-08-17 09:42:58 +02:00 · 2021-08-17 09:42:51 +02:00 · 2021-08-13 14:21:59 +00:00 · 2021-08-13 16:01:11 +02:00
320 changed files with 13471 additions and 4398 deletions
@@ -8,6 +8,7 @@ on:
    branches: [master]
  pull_request:
    branches: [master]
+  workflow_dispatch:

 jobs:
  build:
@@ -28,11 +29,15 @@ jobs:
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install deps
        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        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=HEAD" >> website/.env
      - name: Test gatsby-build
        run: yarn build:gatsby
      - name: Test chromatic
@@ -96,9 +101,13 @@ jobs:
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install deps
        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        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
@@ -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"
@@ -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"
@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}
@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>
@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-react/Kom i gang" />

@@ -0,0 +1,57 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Roadmap" />
+
+# Plan videre
+
+Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
+lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
+å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
+bygge mer robuste og fleksible løsninger for fremtiden.
+
+(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+
+## 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.
+Løsning er ikke fast bestemt, men eksempel på dette er `size="s" -> 32px, size="m"-> 48px`.
+Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+
+## 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.
+
+## Feature-flagging
+
+Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
+større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
+gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
+
+## Versjonering
+
+To av 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.
@@ -1,8 +1,8 @@
 .navds-accordion-anchor-menu {
-  padding: 1rem 0;
+  padding: var(--navds-spacing-4) 0;
 }

 .navds-accordion-anchor-menu__title {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: var(--navds-spacing-4);
+  margin-right: var(--navds-spacing-4);
 }
@@ -22,25 +22,18 @@
  text-decoration: underline;
 }

-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
  display: flex;
-  padding: 0.75rem 1rem;
-  line-height: 1.5rem; /* TODO: fix typography. */
+  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-color-text-link);
  flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }

 .navds-accordion-menu-collapsable--open
@@ -53,7 +46,7 @@
 .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }

 .navds-accordion-menu-collapsable
@@ -63,7 +56,7 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
 }

 .navds-accordion-menu-collapsable
@@ -75,23 +68,23 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 4rem;
+  padding-left: var(--navds-spacing-16);
 }

 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
  outline: 3px solid var(--navds-text-focus);
  outline-offset: -3px;
+  color: var(--navds-color-darkgray);
 }

 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-color-blue-10);
 }

 .navds-accordion-menu-item--active {
  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
  color: var(--navds-color-text);
  text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }
@@ -5,14 +5,12 @@
 .navds-accordion {
  position: relative;
  background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }

 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }

 .navds-accordion:focus,
@@ -26,7 +24,7 @@
  height: 1.25em;
  transform: rotateZ(0deg);
  flex-shrink: 0;
-  margin-left: 1rem;
+  margin-left: var(--navds-spacing-4);
 }

 .navds-accordion__chevron--up {
@@ -38,23 +36,17 @@
 }

 .navds-accordion__button {
-  padding: 1rem;
-  border-radius: 4px;
+  padding: var(--navds-spacing-4);
  background: transparent;
-  border: 0;
  text-align: left;
+  border: none;
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
-}
-
-.navds-accordion__button .navds-accordion__heading {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
+  color: var(--navds-color-text-link);
 }

 .navds-accordion__button:hover .navds-accordion__heading {
@@ -63,7 +55,7 @@
 }

 .navds-accordion__content {
-  padding: 0.5rem 1rem 1rem;
+  padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
 }

 .navds-accordion--open .navds-accordion__content {
@@ -75,3 +67,16 @@
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}
@@ -2,23 +2,24 @@
  border-radius: 4px;
  border: var(--navds-border-default);

-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875em 1em;
+  /* Padding calculated based on 18px font for 64px tall alert */
+  padding: var(--navds-spacing-4) var(--navds-spacing-4);
  display: grid;
  grid-auto-flow: column;
-  column-gap: 0.75rem;
  justify-content: start;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+  min-height: 64px;
+  box-sizing: border-box;
 }

-.navds-alert--small {
-  border-radius: 0;
-  padding: 0.5em 1em;
+.navds-alert--s {
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }

-.navds-alert > svg {
+.navds-alert > span > svg {
+  margin-right: var(--navds-spacing-3);
  font-size: 1.5rem;
+  flex-shrink: 0;
  background: radial-gradient(
    circle,
    var(--navds-color-background) 50%,
@@ -27,8 +28,17 @@
  );
 }

+.navds-alert > div {
+  display: block;
+  margin: auto 0;
+  max-width: 43.5rem;
+  flex: 1;
+}
+
 .navds-alert > span {
-  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  max-height: calc(var(--navds-spacing-8) - 2px);
 }

 .navds-alert--error {
@@ -36,7 +46,7 @@
  background-color: var(--navds-color-error-background);
 }

-.navds-alert--error > svg {
+.navds-alert--error > span > svg {
  color: var(--navds-color-red-60);
 }

@@ -45,7 +55,7 @@
  background-color: var(--navds-color-warning-background);
 }

-.navds-alert--warning > svg {
+.navds-alert--warning > span > svg {
  color: var(--navds-color-orange-40);
  background: radial-gradient(
    circle,
@@ -60,7 +70,7 @@
  background-color: var(--navds-color-info-background);
 }

-.navds-alert--info > svg {
+.navds-alert--info > span > svg {
  color: var(--navds-color-lightblue-70);
 }

@@ -69,6 +79,6 @@
  background-color: var(--navds-color-success-background);
 }

-.navds-alert--success > svg {
+.navds-alert--success > span > svg {
  color: var(--navds-color-green-70);
 }
@@ -5,7 +5,19 @@
@import "Source-Sans-Pro-600.css";
@import "print.css";
@import "utility.css";
-@import "smooth-scroll.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);
@@ -1,6 +1,7 @@
 /**
 * Solution copied from blogpost
 * https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
 */

@keyframes smoothscroll1 {
@@ -1,26 +1,47 @@
 .navds-button {
-  display: inline-block;
+  display: inline-flex;
  cursor: pointer;
  background-color: var(--navds-color-background);
  color: var(--navds-color-action-default);
-  font: inherit;
  margin: 0;
  text-align: center;
  text-decoration: none;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
  border-color: var(--navds-color-action-default);
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
+  min-height: 48px;
+  align-items: center;

-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
 }

-.navds-button.navds-button--small {
+.navds-button > svg {
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.navds-button--s > svg {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-button > svg + *:not(.sr-only),
+.navds-button > *:not(.sr-only) + svg {
+  margin-left: 0.5rem;
+}
+
+/* .navds-button:last-child {
+  margin-left: 0.5rem;
+} */
+
+.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
+  min-height: 32px;
 }

 .navds-button:focus {
@@ -36,16 +57,7 @@
 .navds-button--primary:active {
  color: var(--navds-color-text-inverse);
  background-color: var(--navds-color-action-hover);
-  border-width: 0;
-
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-}
-
-.navds-button--primary:hover.navds-button--small,
-.navds-button--primary:active.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  border-color: transparent;
 }

 .navds-button--primary:active {
@@ -89,42 +101,18 @@

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--small,
-.navds-button--danger.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }

 .navds-button--action:hover {
  background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }

 .navds-button--danger:hover {
  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }

 .navds-button--action:active {
@@ -135,131 +123,9 @@
  background-color: var(--navds-color-danger-active);
 }

-.navds-button--action:active,
-.navds-button--danger:active {
-  transform: translateY(0);
-  position: relative;
-}
-
-.navds-button--action:active:not(:focus),
-.navds-button--danger:active:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:focus {
-  color: var(--navds-color-action-default);
-  background-color: var(--navds-color-background);
-}
-
+.navds-button--action:focus,
 .navds-button--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--small,
-.navds-button--danger:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--small,
-.navds-button--danger:hover:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--small,
-.navds-button--danger:active:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }

 /**************************
@@ -267,8 +133,6 @@
 **************************/

 .navds-button:disabled:disabled {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
  background-color: var(--navds-color-disabled);
  color: var(--navds-color-text-inverse);
  cursor: not-allowed;
@@ -276,8 +140,3 @@
  box-shadow: none;
  transform: none;
 }
-
-.navds-button:disabled:disabled.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
-}
@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}
@@ -2,9 +2,10 @@
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
-  padding: 0.25em;
+  padding: var(--navds-spacing-1);
+  min-height: 32px;
 }

 .navds-copy-to-clipboard__popover {
-  padding: 0.25rem;
+  padding: var(--navds-spacing-1);
 }
@@ -0,0 +1,13 @@
+.navds-checkbox-group--s > .navds-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-checkbox-group--m > .navds-checkboxes {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-checkbox-group--m > .navds-fieldset__error {
+  margin-top: 0;
+}
@@ -0,0 +1,124 @@
+.navds-checkbox {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-checkbox__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-checkbox__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.navds-checkbox__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-color-gray-80);
+}
+
+.navds-checkbox--with-description {
+  padding-bottom: 0;
+}
+
+.navds-checkbox .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-checkbox--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-checkbox--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before {
+  content: "";
+  background-color: white;
+  border: 1px solid var(--navds-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--s {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-checkbox--s > .navds-checkbox__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-checkbox--s > .navds-checkbox__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label {
+  color: var(--navds-color-blue-50);
+}
+
+.navds-checkbox__input:hover + .navds-checkbox__label::before {
+  border-color: var(--navds-color-blue-50);
+  background-color: var(--navds-color-blue-10);
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 75%;
+  border: 2px solid var(--navds-color-blue-50);
+  background-color: var(--navds-color-blue-50);
+}
+
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  background-color: white;
+  background-image: var(--navds-checkmark-image-blue);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 1px var(--navds-color-red-50);
+  border-color: var(--navds-color-red-50);
+}
+
+.navds-checkbox--s .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-checkbox__input:disabled,
+.navds-checkbox__input:disabled + .navds-checkbox__label {
+  color: var(--navds-color-gray-40);
+  cursor: not-allowed;
+}
+
+.navds-checkbox__input:disabled + .navds-checkbox__label::before {
+  background-color: var(--navds-color-gray-10);
+  border-color: var(--navds-color-gray-60);
+}
+
+.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
+  background-color: var(--navds-color-gray-40);
+  border-color: var(--navds-color-gray-40);
+}
@@ -0,0 +1,68 @@
+.navds-confirmation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  background-color: #ffeccc;
+  transition: background-color linear 100ms;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--s {
+  padding: var(--navds-spacing-3);
+  gap: var(--navds-spacing-2);
+}
+
+.navds-confirmation-panel--checked {
+  background-color: #ccf1d6;
+  border-color: #ccf1d6;
+}
+
+.navds-confirmation-panel--error {
+  background-color: #f3e3e3;
+  border: 1px solid transparent;
+}
+
+.navds-confirmation-panel--checked
+  > .navds-confirmation-panel__content
+  .navds-link:not(:focus) {
+  color: var(--navds-color-darkgray);
+}
+
+.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-color-darkgray);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input
+  + .navds-checkbox__label::before {
+  transition: none;
+  background-color: var(--navds-color-green-50);
+  border-color: var(--navds-color-green-50);
+  background-image: var(--navds-checkmark-image-white);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label::before {
+  background-color: var(--navds-color-green-70);
+  border-color: var(--navds-color-green-70);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:focus:hover
+  + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+}
@@ -0,0 +1,4 @@
+.navds-error-message {
+  display: block;
+  color: var(--navds-color-red-50);
+}
@@ -0,0 +1,25 @@
+.navds-error-summary {
+  background-color: #fff;
+  padding: var(--navds-spacing-4);
+  border: 4px solid #ba3a26;
+}
+
+.navds-error-summary--s {
+  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--s > .navds-error-summary__list {
+  margin: 0.5rem 0;
+}
@@ -0,0 +1,19 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: 8px;
+}
+
+.navds-fieldset--s > :not(:first-child):not(:empty) {
+  margin-top: 4px;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}
@@ -0,0 +1,15 @@
+.navds-form-field > :not(:first-child):not(:empty),
+.navds-form-field > input:not(:first-child) {
+  margin-top: 8px;
+}
+
+.navds-form-field--s > :not(:first-child):not(:empty),
+.navds-form-field--s > input:not(:first-child) {
+  margin-top: 4px;
+}
+
+/* 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;
+}
@@ -0,0 +1,15 @@
+/*
+  Order matters; rearrange with care
+*/
+@import "fieldset.css";
+@import "form.css";
+@import "error-summary.css";
+@import "checkbox.css";
+@import "checkbox-group.css";
+@import "confirmation-panel.css";
+@import "error-message.css";
+@import "radio.css";
+@import "radio-group.css";
+@import "select.css";
+@import "text-field.css";
+@import "textarea.css";
@@ -0,0 +1,13 @@
+.navds-radio-group--s > .navds-radio-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navds-fieldset.navds-radio-group--m > .navds-radio-buttons {
+  margin-top: 0;
+}
+
+.navds-fieldset.navds-radio-group--m > .navds-fieldset__error {
+  margin-top: 0;
+}
@@ -0,0 +1,124 @@
+.navds-radio {
+  position: relative;
+  padding: var(--navds-spacing-3) 0;
+}
+
+.navds-radio--with-description .navds-error-message {
+  margin-top: 0;
+}
+
+.navds-radio .navds-error-message {
+  margin-top: var(--navds-spacing-3);
+}
+
+.navds-radio__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  left: -12px;
+  margin: 0;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-radio__label {
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+  min-width: 48px;
+  cursor: pointer;
+}
+
+.navds-radio__description {
+  padding-left: calc(48px - 12px);
+  color: var(--navds-color-gray-80);
+}
+
+.navds-radio--with-description {
+  padding-bottom: 0;
+}
+
+.navds-radio--with-error-message {
+  padding-bottom: var(--navds-spacing-2);
+}
+
+.navds-radio__label::before {
+  content: "";
+  background-color: white;
+  border: 1px solid var(--navds-color-border);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.navds-radio--s {
+  padding: var(--navds-spacing-1) 0;
+}
+
+.navds-radio--s > .navds-radio__input {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 0;
+}
+
+.navds-radio--s > .navds-radio__label::before {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.navds-radio__input:hover + .navds-radio__label {
+  color: var(--navds-color-blue-50);
+}
+
+.navds-radio__input:hover + .navds-radio__label::before {
+  border-color: var(--navds-color-blue-50);
+  background-color: var(--navds-color-blue-10);
+}
+
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  border: 2px solid var(--navds-color-blue-50);
+  box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-blue-50) inset;
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  box-shadow: 0 0 0 3px var(--navds-color-blue-80), 0 0 0 3px #fff inset,
+    0 0 0 2rem var(--navds-color-blue-50) inset;
+}
+
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: 0 0 0 1px var(--navds-color-red-50);
+  border-color: var(--navds-color-red-50);
+}
+
+.navds-radio--s .navds-error-message {
+  margin-top: 4px;
+}
+
+.navds-radio__input:disabled,
+.navds-radio__input:disabled + .navds-radio__label {
+  color: var(--navds-color-gray-40);
+  cursor: not-allowed;
+}
+
+.navds-radio__input:disabled + .navds-radio__label::before {
+  background-color: var(--navds-color-gray-10);
+  border-color: var(--navds-color-gray-60);
+}
+
+.navds-radio__input:disabled:checked + .navds-radio__label::before {
+  background-color: var(--navds-color-gray-40);
+  border-color: var(--navds-color-gray-40);
+  box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-gray-40) inset;
+}
@@ -0,0 +1,62 @@
+.navds-select__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid var(--navds-color-gray-40);
+  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-color-blue-50);
+}
+
+.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--s .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-color-red-50);
+  border-color: var(--navds-color-red-50);
+}
+
+/*
+  Disabled handling
+  TODO: Oppdatere farger her
+ */
+.navds-select__input:disabled,
+.navds-select__input[read-only] {
+  background-color: var(--navds-color-gray-10);
+  border-color: var(--navds-color-gray-40);
+  box-shadow: none;
+  color: var(--navds-color-darkgray);
+  cursor: not-allowed;
+}
@@ -0,0 +1,45 @@
+.navds-text-field__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid var(--navds-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--s > .navds-text-field__input {
+  padding: 0.25rem;
+  min-height: 32px;
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--navds-color-blue-50);
+}
+
+.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(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-color-red-50);
+  border-color: var(--navds-color-red-50);
+}
+
+/*
+  TODO: Oppdater denne til riktige farger
+  Disabled handling
+ */
+.navds-text-field__input:disabled,
+.navds-text-field__input[readonly] {
+  background-color: #f1f1f1;
+  border-color: #6a6a6a;
+  box-shadow: none;
+  color: #262626;
+  cursor: not-allowed;
+}
@@ -0,0 +1,76 @@
+.navds-textarea__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.navds-textarea__input {
+  appearance: none;
+  padding: var(--navds-spacing-2);
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid var(--navds-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-color-blue-50);
+}
+
+.navds-textarea__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-form-field--s .navds-textarea__input {
+  padding: var(--navds-spacing-1);
+  min-height: 32px;
+}
+
+.navds-form-field--s .navds-textarea--counter.navds-textarea__input {
+  padding-bottom: var(--navds-spacing-7);
+}
+
+.navds-textarea__counter {
+  pointer-events: none;
+  color: var(--navds-color-gray-40);
+  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-color-red-50);
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error
+  .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-color-red-50);
+  border-color: var(--navds-color-red-50);
+}
+
+/*
+  TODO: Oppdater denne til riktige farger
+  Disabled handling
+ */
+.navds-textarea__input:disabled,
+.navds-textarea__input[readonly] {
+  background-color: #f1f1f1;
+  border-color: #6a6a6a;
+  box-shadow: none;
+  color: #262626;
+  cursor: not-allowed;
+}
@@ -0,0 +1,63 @@
+.navds-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-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-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-header--left > .navds-header__wrapper {
+  text-align: start;
+}
+
+.navds-header--center > .navds-header__wrapper {
+  text-align: center;
+}
+
+.navds-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
+}
+.navds-header--product {
+  box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
+}
+.navds-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}
@@ -1,17 +1,24 @@
@import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+@import "layouts.css";
+
@import "accordion.css";
@import "accordion-anchor-menu.css";
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
+@import "card.css";
@import "content-container.css";
@import "copy-to-clipboard.css";
-@import "grid.css";
+@import "header.css";
@import "internal-header.css";
-@import "layouts.css";
+@import "form/index.css";
@import "link.css";
+@import "loader.css";
@import "modal.css";
@import "popover.css";
@import "tag.css";
@import "panel.css";
-@import "typography.css";
+@import "link-panel.css";
+@import "speech-bubble.css";
@@ -2,7 +2,7 @@
 * .navds-header *
 **************************/

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,17 +11,17 @@
  min-height: 50px;
 }

-.navds-header__column {
+.navds-interal-header__column {
  display: flex;
  align-items: center;
 }

 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
  **************************/

-.navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
+.navds-interal-header__title {
+  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
  align-self: stretch;
@@ -29,28 +29,25 @@
  text-decoration: none;
  margin: 0;
  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
 }

-.navds-header__title > span > a {
+.navds-interal-header__title > span > a {
  text-decoration: none;
  color: inherit;
 }

-.navds-header__title > span > a:focus {
+.navds-interal-header__title > span > a:focus {
  box-shadow: var(--navds-shadow-focus-on-dark);
  outline: none;
 }

 /**************************
-  * .navds-header__user *
+  * .navds-interal-header__user *
  **************************/

-.navds-header__user {
+.navds-interal-header__user {
  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
+  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
  border-left: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -58,15 +55,6 @@
  align-items: center;
 }

-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
+.navds-interal-header__name.navds-body-short {
+  margin-right: var(--navds-spacing-4);
 }
@@ -168,12 +168,12 @@
 }

 .navds-layout__header-title {
-  margin: 0.25rem 0.85rem;
+  margin: var(--navds-spacing-1) var(--navds-spacing-3);
 }

@media (min-width: 448px) {
  .navds-layout__header-title {
-    margin: 0.25rem 0;
+    margin: var(--navds-spacing-1) 0;
  }
 }

@@ -0,0 +1,32 @@
+.navds-link-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  color: var(--navds-color-gray-90);
+}
+
+.navds-link-panel:hover .navds-link-panel-title {
+  text-decoration: underline;
+  color: var(--navds-color-text-link);
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--navds-shadow-hover);
+  border-color: var(--navds-color-blue-50);
+}
+
+.navds-link-panel:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-link-panel__chevron {
+  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);
+}
@@ -0,0 +1,105 @@
+.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-color-gray-40);
+}
+
+.navds-loader__background {
+  stroke: var(--navds-color-gray-10);
+}
+
+.navds-loader--neutral .navds-loader__foreground {
+  stroke: var(--navds-color-gray-40);
+}
+
+.navds-loader--interaction .navds-loader__foreground {
+  stroke: var(--navds-color-blue-50);
+}
+
+.navds-loader--inverted .navds-loader__foreground {
+  stroke: white;
+}
+
+.navds-loader--inverted .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-loader--transparent .navds-loader__background {
+  stroke: transparent;
+}
+
+.navds-loader--2xl {
+  width: 4rem;
+}
+
+.navds-loader--xl {
+  width: 2.5rem;
+}
+
+.navds-loader--l {
+  width: 2rem;
+}
+
+.navds-loader--m {
+  width: 1.5rem;
+}
+
+.navds-loader--s {
+  width: 1.25rem;
+}
+
+.navds-loader--xs {
+  width: 1rem;
+}
+
+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+.navds-button--action .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+@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;
+  }
+}
@@ -6,7 +6,7 @@
  background-color: var(--navds-color-background);
  display: block;
  position: relative;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: 4px;
  overflow: auto;
  max-height: 100%;
@@ -29,7 +29,7 @@
  left: 0;
  right: 0;
  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
 }

 .navds-modal__button--shake {
@@ -45,9 +45,10 @@

 .navds-modal__button {
  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
  display: flex;
+  padding: var(--navds-spacing-2);
 }

 .navds-modal__button svg {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.4.2",
+  "version": "0.6.19",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.2.1",
+    "@navikt/ds-tokens": "^0.4.4",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -1,10 +1,11 @@
 .navds-panel {
  background-color: var(--navds-color-white);
  display: block;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: var(--navds-border-radius);
+  border: 1px solid transparent;
 }

 .navds-panel--border {
-  border: var(--navds-border-default);
+  border-color: var(--navds-color-border);
 }
@@ -0,0 +1,69 @@
+.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-color-gray-20);
+  color: var(--navds-color-darkgray);
+  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: 0 2px 4px 0 var(--navds-color-gray-20);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--navds-color-gray-10);
+  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;
+  align-items: flex-end;
+}
+
+.navds-speechbubble__top-text {
+  color: var(--navds-color-gray-60);
+}
@@ -3,12 +3,10 @@
  border: var(--navds-border-default);
  background-color: var(--navds-color-tag-info-background);
  border-color: var(--navds-color-tag-info-border);
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
  display: inline-block;

  /* Padding calculated based on 16px font for 24px tall tag */
-  padding: 0.0625rem 0.5rem;
+  padding: 0.0625rem var(--navds-spacing-2);
 }

 .navds-tag--error {
@@ -1,63 +1,148 @@
-/*
- * Heading
- */
-.navds-heading {
+/* Title */
+.navds-title {
  font-weight: var(--navds-font-weight-bold);
-  line-height: calc(1em + 0.25rem);
+  margin: 0;
 }

-.navds-heading--xxl {
-  font-size: var(--navds-font-size-heading-xxl);
+.navds-title--2xl {
+  font-size: var(--navds-font-size-title-2xl);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-heading--xl {
-  font-size: var(--navds-font-size-heading-xl);
+.navds-title--2xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
 }

-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
+.navds-title--xl {
+  font-size: var(--navds-font-size-title-xl);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-heading--medium {
-  font-size: var(--navds-font-size-heading-medium);
+.navds-title--xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-4);
 }

-.navds-heading--small {
-  font-size: var(--navds-font-size-heading-small);
+.navds-title--l {
+  font-size: var(--navds-font-size-title-l);
+  letter-spacing: -0.004em;
+  line-height: var(--navds-font-line-height-s);
 }

-/*
- * Text
- */
-.navds-text--large {
-  font-size: var(--navds-font-size-large);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--l.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-text--medium {
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
+.navds-title--m {
+  font-size: var(--navds-font-size-title-m);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-text--small {
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+.navds-title--m.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-text--xs {
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
+.navds-title--s {
+  font-size: var(--navds-font-size-title-s);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-s);
 }

-/*
- * Article typography
- */
-.navds-article__lead {
-  font-size: var(--navds-font-size-article-lead);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-article__paragraph {
-  font-size: var(--navds-font-size-article-paragraph);
-  line-height: var(--navds-font-line-height-medium);
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xl);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-m);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-m);
+  margin: 0;
+}
+
+.navds-body-short {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-s);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-7);
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-body--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-s);
+}
+
+.navds-body-long.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-6);
+}
+
+.navds-body-short.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-label--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-s);
+}
+
+.navds-label--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--navds-font-size-s);
+  letter-spacing: 0.004em;
+  line-height: var(--navds-font-line-height-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+.navds-detail--s {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
 }
@@ -1,6 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js",
-  "typings": "../esm/index.d.ts",
-  "sideEffects": false
-}
@@ -11,7 +11,7 @@
    "name": "AddCircle",
    "description": "",
    "created_at": "2020-07-01T10:37:42.784Z",
-    "updated_at": "2021-04-09T13:32:16.308Z",
+    "updated_at": "2021-08-12T11:15:52.168Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -31,6 +31,22 @@
    "pageName": "Interface",
    "visible": true
  },
+  {
+    "name": "AddPerson",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.651Z",
+    "updated_at": "2021-08-13T06:33:04.695Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "AddPersonFilled",
+    "description": "",
+    "created_at": "2021-06-15T15:06:55.654Z",
+    "updated_at": "2021-08-13T06:33:04.683Z",
+    "pageName": "People",
+    "visible": true
+  },
  {
    "name": "Applicant",
    "description": "",
@@ -91,7 +107,7 @@
    "name": "Back",
    "description": "",
    "created_at": "2020-07-01T10:37:42.840Z",
-    "updated_at": "2021-04-09T13:32:23.607Z",
+    "updated_at": "2021-08-12T14:51:21.441Z",
    "pageName": "Chevron",
    "visible": true
  },
@@ -107,7 +123,7 @@
    "name": "Bag",
    "description": "",
    "created_at": "2020-07-01T10:37:42.673Z",
-    "updated_at": "2021-04-09T13:32:23.625Z",
+    "updated_at": "2021-08-13T09:47:23.613Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -115,7 +131,7 @@
    "name": "BagFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.239Z",
-    "updated_at": "2021-04-09T13:32:16.648Z",
+    "updated_at": "2021-06-14T07:21:59.051Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -187,7 +203,7 @@
    "name": "Bookmark",
    "description": "",
    "created_at": "2020-07-01T10:37:42.877Z",
-    "updated_at": "2021-04-09T13:32:23.611Z",
+    "updated_at": "2021-08-12T12:32:34.047Z",
    "pageName": "File",
    "visible": true
  },
@@ -235,7 +251,7 @@
    "name": "Calculator",
    "description": "",
    "created_at": "2020-07-01T10:37:42.917Z",
-    "updated_at": "2021-04-09T13:32:16.330Z",
+    "updated_at": "2021-08-12T12:31:15.652Z",
    "pageName": "Money",
    "visible": true
  },
@@ -347,7 +363,7 @@
    "name": "Caseworker",
    "description": "",
    "created_at": "2021-04-28T14:10:50.983Z",
-    "updated_at": "2021-04-30T07:23:11.918Z",
+    "updated_at": "2021-06-14T07:21:59.040Z",
    "pageName": "People",
    "visible": true
  },
@@ -355,7 +371,7 @@
    "name": "CaseworkerFilled",
    "description": "",
    "created_at": "2021-04-28T14:11:08.212Z",
-    "updated_at": "2021-04-29T18:47:14.999Z",
+    "updated_at": "2021-06-14T07:21:59.036Z",
    "pageName": "People",
    "visible": true
  },
@@ -379,7 +395,7 @@
    "name": "Clock",
    "description": "",
    "created_at": "2020-07-01T10:37:42.647Z",
-    "updated_at": "2021-04-09T13:32:23.334Z",
+    "updated_at": "2021-08-13T07:30:12.128Z",
    "pageName": "Time",
    "visible": true
  },
@@ -395,7 +411,7 @@
    "name": "Close",
    "description": "",
    "created_at": "2020-07-01T10:37:42.827Z",
-    "updated_at": "2021-04-09T13:32:16.911Z",
+    "updated_at": "2021-08-12T13:19:34.922Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -403,7 +419,7 @@
    "name": "CloseFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.364Z",
-    "updated_at": "2021-04-09T13:32:16.624Z",
+    "updated_at": "2021-08-12T10:54:40.891Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -411,7 +427,7 @@
    "name": "CoApplicant",
    "description": "",
    "created_at": "2021-04-30T10:55:32.823Z",
-    "updated_at": "2021-04-30T10:55:32.823Z",
+    "updated_at": "2021-08-13T09:47:48.809Z",
    "pageName": "People",
    "visible": true
  },
@@ -491,7 +507,7 @@
    "name": "Copy",
    "description": "",
    "created_at": "2020-07-01T10:37:42.619Z",
-    "updated_at": "2021-05-05T12:44:31.388Z",
+    "updated_at": "2021-08-12T12:36:11.164Z",
    "pageName": "File",
    "visible": true
  },
@@ -551,6 +567,14 @@
    "pageName": "File",
    "visible": true
  },
+  {
+    "name": "Decision",
+    "description": "",
+    "created_at": "2021-08-13T06:33:04.661Z",
+    "updated_at": "2021-08-13T06:33:04.661Z",
+    "pageName": "People",
+    "visible": true
+  },
  {
    "name": "DecisionCheck",
    "description": "",
@@ -575,6 +599,14 @@
    "pageName": "People",
    "visible": true
  },
+  {
+    "name": "DecisionFilled",
+    "description": "",
+    "created_at": "2021-08-13T06:33:04.665Z",
+    "updated_at": "2021-08-13T06:33:04.665Z",
+    "pageName": "People",
+    "visible": true
+  },
  {
    "name": "Delete",
    "description": "",
@@ -603,7 +635,7 @@
    "name": "DialogDots",
    "description": "",
    "created_at": "2020-07-01T10:37:43.133Z",
-    "updated_at": "2021-04-09T13:32:23.486Z",
+    "updated_at": "2021-08-12T11:19:13.127Z",
    "pageName": "Communication",
    "visible": true
  },
@@ -655,6 +687,22 @@
    "pageName": "Communication",
    "visible": true
  },
+  {
+    "name": "DirectionSign",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.013Z",
+    "updated_at": "2021-06-14T07:21:59.013Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "DirectionSignFilled",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.009Z",
+    "updated_at": "2021-06-14T07:21:59.009Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Disability",
    "description": "",
@@ -843,7 +891,7 @@
    "name": "EmployerFilled",
    "description": "",
    "created_at": "2021-01-22T13:40:32.293Z",
-    "updated_at": "2021-04-22T08:46:31.424Z",
+    "updated_at": "2021-08-13T06:33:04.692Z",
    "pageName": "People",
    "visible": true
  },
@@ -899,7 +947,7 @@
    "name": "Eye",
    "description": "",
    "created_at": "2020-07-01T10:37:42.895Z",
-    "updated_at": "2021-04-09T13:32:23.514Z",
+    "updated_at": "2021-08-12T09:55:24.102Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -907,7 +955,7 @@
    "name": "EyeFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.321Z",
-    "updated_at": "2021-04-09T13:32:16.996Z",
+    "updated_at": "2021-08-12T09:55:25.386Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -915,7 +963,7 @@
    "name": "EyeScreened",
    "description": "",
    "created_at": "2020-07-01T10:37:42.956Z",
-    "updated_at": "2021-04-09T13:32:23.351Z",
+    "updated_at": "2021-08-12T09:56:29.536Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -923,7 +971,7 @@
    "name": "EyeScreenedFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.578Z",
-    "updated_at": "2021-04-09T13:32:23.419Z",
+    "updated_at": "2021-08-12T09:55:47.137Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -1075,7 +1123,7 @@
    "name": "Findout",
    "description": "",
    "created_at": "2021-05-05T13:04:25.502Z",
-    "updated_at": "2021-05-05T13:04:25.502Z",
+    "updated_at": "2021-08-12T12:32:46.082Z",
    "pageName": "File",
    "visible": true
  },
@@ -1107,7 +1155,7 @@
    "name": "Folder",
    "description": "",
    "created_at": "2020-07-01T10:37:42.682Z",
-    "updated_at": "2021-04-09T13:32:23.439Z",
+    "updated_at": "2021-08-13T07:30:12.108Z",
    "pageName": "File",
    "visible": true
  },
@@ -1235,7 +1283,7 @@
    "name": "HandBandage",
    "description": "",
    "created_at": "2020-07-01T10:37:42.711Z",
-    "updated_at": "2021-04-09T13:32:16.442Z",
+    "updated_at": "2021-08-13T09:48:45.392Z",
    "pageName": "Health",
    "visible": true
  },
@@ -1347,7 +1395,7 @@
    "name": "Helmet",
    "description": "",
    "created_at": "2020-07-01T10:37:42.793Z",
-    "updated_at": "2021-04-09T13:32:23.412Z",
+    "updated_at": "2021-08-13T09:49:01.868Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -1459,7 +1507,7 @@
    "name": "Information",
    "description": "",
    "created_at": "2020-07-01T10:37:43.005Z",
-    "updated_at": "2021-04-09T13:32:16.578Z",
+    "updated_at": "2021-08-12T12:35:33.631Z",
    "pageName": "Status",
    "visible": true
  },
@@ -1467,7 +1515,7 @@
    "name": "InformationFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.736Z",
-    "updated_at": "2021-04-09T13:32:16.132Z",
+    "updated_at": "2021-08-12T11:36:44.756Z",
    "pageName": "Status",
    "visible": true
  },
@@ -1499,7 +1547,7 @@
    "name": "LawFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.330Z",
-    "updated_at": "2021-04-09T13:32:16.725Z",
+    "updated_at": "2021-08-13T09:50:59.913Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -1507,7 +1555,7 @@
    "name": "Left",
    "description": "",
    "created_at": "2020-07-01T10:37:42.797Z",
-    "updated_at": "2021-04-09T13:32:23.354Z",
+    "updated_at": "2021-08-13T06:33:04.688Z",
    "pageName": "Arrow",
    "visible": true
  },
@@ -1587,7 +1635,7 @@
    "name": "Locked",
    "description": "",
    "created_at": "2020-07-01T10:37:43.027Z",
-    "updated_at": "2021-04-09T13:32:23.385Z",
+    "updated_at": "2021-08-12T09:56:54.295Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -1683,7 +1731,7 @@
    "name": "MinusCircleFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.721Z",
-    "updated_at": "2021-04-09T13:32:16.246Z",
+    "updated_at": "2021-08-12T10:26:25.789Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -1699,7 +1747,7 @@
    "name": "Mobile",
    "description": "",
    "created_at": "2020-07-01T10:37:43.010Z",
-    "updated_at": "2021-04-09T13:32:16.508Z",
+    "updated_at": "2021-08-12T11:19:05.339Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1715,7 +1763,7 @@
    "name": "Money",
    "description": "",
    "created_at": "2020-07-01T10:37:42.741Z",
-    "updated_at": "2021-04-09T13:32:23.388Z",
+    "updated_at": "2021-08-12T12:31:01.092Z",
    "pageName": "Money",
    "visible": true
  },
@@ -1859,7 +1907,7 @@
    "name": "Office1",
    "description": "",
    "created_at": "2020-07-01T10:37:42.720Z",
-    "updated_at": "2021-04-09T13:32:23.456Z",
+    "updated_at": "2021-08-12T12:56:17.625Z",
    "pageName": "Building",
    "visible": true
  },
@@ -1955,7 +2003,7 @@
    "name": "People",
    "description": "",
    "created_at": "2020-07-01T10:37:42.850Z",
-    "updated_at": "2021-04-09T13:32:23.661Z",
+    "updated_at": "2021-08-12T11:17:04.979Z",
    "pageName": "People",
    "visible": true
  },
@@ -2083,7 +2131,7 @@
    "name": "Profile",
    "description": "",
    "created_at": "2021-04-26T09:24:38.029Z",
-    "updated_at": "2021-04-30T10:55:32.846Z",
+    "updated_at": "2021-08-12T12:32:56.285Z",
    "pageName": "File",
    "visible": true
  },
@@ -2115,7 +2163,7 @@
    "name": "Receipt",
    "description": "",
    "created_at": "2020-07-01T10:37:42.904Z",
-    "updated_at": "2021-04-09T13:32:23.649Z",
+    "updated_at": "2021-08-12T12:29:47.091Z",
    "pageName": "Money",
    "visible": true
  },
@@ -2195,7 +2243,7 @@
    "name": "Right",
    "description": "",
    "created_at": "2020-07-01T10:37:42.642Z",
-    "updated_at": "2021-04-09T13:32:23.409Z",
+    "updated_at": "2021-08-12T07:14:26.093Z",
    "pageName": "Arrow",
    "visible": true
  },
@@ -2227,7 +2275,7 @@
    "name": "Sandglass",
    "description": "",
    "created_at": "2020-07-01T10:37:43.117Z",
-    "updated_at": "2021-04-09T13:32:23.313Z",
+    "updated_at": "2021-08-12T08:18:12.598Z",
    "pageName": "Time",
    "visible": true
  },
@@ -2291,7 +2339,7 @@
    "name": "Search",
    "description": "",
    "created_at": "2020-07-01T10:37:42.983Z",
-    "updated_at": "2021-04-09T13:32:16.382Z",
+    "updated_at": "2021-08-12T12:37:22.919Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -2355,7 +2403,7 @@
    "name": "Send",
    "description": "",
    "created_at": "2020-07-01T10:37:43.101Z",
-    "updated_at": "2021-04-09T13:32:23.596Z",
+    "updated_at": "2021-08-13T07:30:12.151Z",
    "pageName": "Communication",
    "visible": true
  },
@@ -2371,7 +2419,7 @@
    "name": "Service",
    "description": "",
    "created_at": "2020-07-01T10:37:42.707Z",
-    "updated_at": "2021-04-09T13:32:23.429Z",
+    "updated_at": "2021-08-12T11:15:52.145Z",
    "pageName": "People",
    "visible": true
  },
@@ -2643,7 +2691,7 @@
    "name": "SuccessStroke",
    "description": "",
    "created_at": "2021-04-15T07:12:49.753Z",
-    "updated_at": "2021-04-15T07:12:49.753Z",
+    "updated_at": "2021-08-12T11:30:36.177Z",
    "pageName": "Status",
    "visible": true
  },
@@ -2723,7 +2771,7 @@
    "name": "ThermometerStroke",
    "description": "",
    "created_at": "2021-04-07T12:13:28.179Z",
-    "updated_at": "2021-04-09T13:32:16.814Z",
+    "updated_at": "2021-08-12T12:34:12.825Z",
    "pageName": "Health",
    "visible": true
  },
@@ -2779,7 +2827,7 @@
    "name": "Unlocked",
    "description": "",
    "created_at": "2020-07-01T10:37:42.823Z",
-    "updated_at": "2021-04-09T13:32:16.901Z",
+    "updated_at": "2021-08-12T09:56:56.564Z",
    "pageName": "Privacy",
    "visible": true
  },
@@ -2811,7 +2859,7 @@
    "name": "Upload",
    "description": "",
    "created_at": "2020-07-01T10:37:43.046Z",
-    "updated_at": "2021-04-09T13:32:23.685Z",
+    "updated_at": "2021-08-13T07:41:40.719Z",
    "pageName": "Attachment",
    "visible": true
  },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.3.2",
+  "version": "0.5.2",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -14,11 +14,10 @@
  ],
  "license": "MIT",
  "author": "NAV",
-  "main": "esm/index.js",
-  "module": "esm/index.js",
-  "typings": "esm/index.d.ts",
  "sideEffects": false,
-  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
  "files": [
    "/cjs",
    "/esm",
@@ -26,12 +25,13 @@
    "/svg"
  ],
  "scripts": {
-    "cjs-package": "copyfiles -f config/package.json cjs",
-    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
+    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
-    "convert-icons": "node figma-api/pngConverter.js",
-    "clean": "rm -rf src && rm -rf esm && rm -rf cjs && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
-    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn cjs-package && npm run convert-icons && node figma-api/zipIcons.js"
+    "convert-icons": "node figma-api/pngConverter.mjs",
+    "clean": "rimraf src esm cjs png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node figma-api/zipIcons.mjs",
+    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && npm run convert-icons && yarn zip-icons"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-icons/Kom i gang" />

@@ -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>
@@ -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>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V12C0 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 12V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V20C23 21.1046 22.1046 22 21 22H3C1.89543 22 1 21.1046 1 20V15H11Z" fill="#262626"/>
+<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>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 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 10ZM17.0997 13.2048C15.823 11.8476 14.0105 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.4582 13 14.7706 13.6242 15.6845 14.62L17.0997 13.2048ZM21.689 16.8125L17.2773 21.2243L15.4587 21.5413L15.7757 19.7227L20.1875 15.311C20.6021 14.8963 21.2744 14.8963 21.689 15.311C22.1037 15.7256 22.1037 16.3979 21.689 16.8125ZM23.1032 18.2267L18.2441 23.0859L13 24L13.9141 18.7559L18.7733 13.8968C19.969 12.7011 21.9076 12.7011 23.1032 13.8968C24.2989 15.0924 24.2989 17.031 23.1032 18.2267Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 4.99999C17 7.7614 14.7614 9.99998 12 9.99998C9.23855 9.99998 6.99998 7.7614 6.99998 4.99999C6.99998 2.23857 9.23855 0 12 0C14.7614 0 17 2.23857 17 4.99999ZM12 11C8.13399 11 4.99999 14.134 4.99999 18H14.6289L18.0873 14.5415C16.883 12.4263 14.6081 11 12 11ZM23.2663 15.7337C22.288 14.7554 20.7019 14.7554 19.7236 15.7337L15.4573 20L15 23.9999L19 23.5426L23.2663 19.2764C24.2446 18.2981 24.2446 16.712 23.2663 15.7337Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.25C17 8.1495 14.6495 10.5 11.75 10.5C8.85047 10.5 6.49996 8.1495 6.49996 5.25C6.49996 2.35051 8.85047 0 11.75 0C14.6495 0 17 2.35051 17 5.25ZM11.6618 11.6111C7.58101 11.6111 4.27289 14.9192 4.27289 19H14.4367L18.0873 15.3494C16.8161 13.1167 14.4148 11.6111 11.6618 11.6111ZM22.3478 16.6522C21.4782 15.7826 20.0683 15.7826 19.1987 16.6522L15.4065 20.4444L15 24L18.5555 23.5935L22.3478 19.8013C23.2174 18.9317 23.2174 17.5218 22.3478 16.6522Z" fill="#262626"/>
 </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="M10.9565 8C12.6134 8 13.9565 6.65685 13.9565 5C13.9565 3.34315 12.6134 2 10.9565 2C9.29969 2 7.95654 3.34315 7.95654 5C7.95654 6.65685 9.29969 8 10.9565 8ZM10.9565 10C13.718 10 15.9565 7.76142 15.9565 5C15.9565 2.23858 13.718 0 10.9565 0C8.19512 0 5.95654 2.23858 5.95654 5C5.95654 7.76142 8.19512 10 10.9565 10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0569 11.5858C19.2758 10.8047 18.0095 10.8047 17.2285 11.5858L15.8143 13C15.0332 13.781 15.0332 15.0474 15.8143 15.8284L16.6856 16.6997L12.1071 21.2782L11.4 21.9853L12.8142 23.3995L13.5213 22.6924L18.0998 18.114L19.0496 19.0637C19.8306 19.8448 21.0969 19.8448 21.878 19.0637L23.2922 17.6495C24.0733 16.8685 24.0733 15.6021 23.2922 14.8211L20.0569 11.5858ZM18.6427 13L21.878 16.2353L20.4638 17.6495L17.2285 14.4142L18.6427 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1594 11.7521C13.2095 11.2709 12.1352 11 11 11C7.13401 11 4 14.134 4 18H6C6 15.2386 8.23858 13 11 13C11.5609 13 12.0993 13.092 12.6014 13.2617L14.1594 11.7521Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C16 7.76142 13.7614 10 11 10C8.23858 10 6 7.76142 6 5C6 2.23858 8.23858 0 11 0C13.7614 0 16 2.23858 16 5ZM4 18C4 14.134 7.13401 11 11 11C12.3956 11 13.6959 11.4084 14.7877 12.1123L8.7108 18H4Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2782 12.2854C18.8876 11.9049 18.2545 11.9049 17.8639 12.2854L15.3891 14.6973C14.9985 15.0778 14.9985 15.6949 15.3891 16.0754L16.8033 17.4536L11.5 22.6218L12.9142 24L18.2175 18.8318L19.8085 20.3823C20.199 20.7628 20.8322 20.7628 21.2227 20.3823L23.6976 17.9704C24.0881 17.5899 24.0881 16.9728 23.6976 16.5923L19.2782 12.2854Z" fill="#262626"/>
+</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 1V4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H13V24H11V16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM3.73703 6L6.40369 10L3.73703 14H18.9296L21.5963 10L18.9296 6H3.73703Z" fill="#262626"/>
+</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 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17V24H13V17H11Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V13C0 13.7403 0.402199 14.3866 1 14.7324V20C1 21.1046 1.89543 22 3 22H21C22.1046 22 23 21.1046 23 20V14.7324C23.5978 14.3866 24 13.7403 24 13V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM7 8H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 8H7ZM11 15H3L3 20H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
+<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>
@@ -1,6 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js",
-  "typings": "../esm/index.d.ts",
-  "sideEffects": false
-}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.4.3",
+  "version": "0.7.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -14,11 +14,10 @@
    "type": "git",
    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-react"
  },
-  "main": "esm/index.js",
-  "module": "esm/index.js",
-  "typings": "esm/index.d.ts",
  "sideEffects": false,
-  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
  "publishConfig": {
    "access": "public"
  },
@@ -28,13 +27,14 @@
    "/src"
  ],
  "scripts": {
-    "cjs-package": "copyfiles -f config/package.json cjs",
-    "clean": "rm -rf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
+    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "clean": "rimraf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
    "watch": "tsc --watch -p tsconfig-esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.3.2",
+    "@material-ui/core": "^4.12.2",
+    "@navikt/ds-icons": "^0.5.2",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
@@ -42,11 +42,12 @@
    "react-merge-refs": "^1.1.0",
    "react-modal": "3.12.1",
    "react-popper": "^2.2.4",
-    "uuid": "^8.3.2"
+    "short-uuid": "^4.2.0"
  },
  "devDependencies": {
    "copyfiles": "^2.4.1",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "rimraf": "3.0.2"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Heading } from "../index";
+import { Title } from "..";
 import { ActiveAnchorProvider } from "./ActiveAnchorStore";
 import cl from "classnames";

@@ -8,7 +8,6 @@ export interface AccordionAnchorMenuProps
  extends HTMLAttributes<HTMLDivElement> {
  title?: string;
  children: React.ReactNode;
-  className?: string;
 }

 const AccordionAnchorMenu = forwardRef<
@@ -21,13 +20,9 @@ const AccordionAnchorMenu = forwardRef<
    {...rest}
  >
    {title && (
-      <Heading
-        level={2}
-        size="medium"
-        className="navds-accordion-anchor-menu__title"
-      >
+      <Title level={2} size="m" className="navds-accordion-anchor-menu__title">
        {title}
-      </Heading>
+      </Title>
    )}
    <ActiveAnchorProvider>
      <BaseAccordionMenu aria-label={title || "Meny"}>
@@ -0,0 +1,14 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { AccordionAnchorMenu } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/accordion-anchor-menu/intro" />
+
+# AccordionAnchorMenu
+
+NOTE: Komponenten er ikke oppdatert og er veldig buggy. Ville ungått bruk av denne om mulig og bare brukt
+vanlig `AccordionMenu`. Hvorvidt vi kommer til å oppdatere denne og ta den med i 1.0 er usikkert.
+
+`AccordionAnchorMenu` er en meny-komponent som implementerer `AccordionMenu` med context
+for lytting på aktiv anchor/heading. Dette vil si at active-state settes automatisk.
+når man scroller forbi den relevante linken på siden.
@@ -4,7 +4,6 @@ import {
  AccordionAnchorMenuCollapsable as Collapsable,
  AccordionAnchorMenuItem as Item,
 } from "../index";
-import { useEffect } from "react";
 import {
  ProductPageLayout as Layout,
  ProductPageSection as Section,
@@ -20,19 +19,6 @@ import { Link, HashRouter as Router } from "react-router-dom";
 export default {
  title: "ds-react/accordion-anchor-menu",
  component: { Menu },
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
  },
@@ -4,7 +4,6 @@ import MenuItems from "./MenuItems";

 export interface AccordionMenuProps extends HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
-  className?: string;
 }

 const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
@@ -8,7 +8,6 @@ export interface AccordionMenuCollapsableProps
  title: string;
  defaultOpen?: boolean;
  children: React.ReactNode;
-  className?: string;
 }

 const AccordionMenuCollapsable = forwardRef<
@@ -32,6 +31,7 @@ const AccordionMenuCollapsable = forwardRef<
        {title}
        <Expand
          role="img"
+          focusable="false"
          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
          className="navds-accordion-menu-collapsable__expand-icon"
        />
@@ -1,8 +1,5 @@
 import React from "react";

-/**
- * @ignore
- */
 const MenuItems = ({ children }: { children: React.ReactNode }) => (
  <ul className="navds-accordion-menu__list">
    {React.Children.toArray(children).map((child, i) => (
@@ -0,0 +1,70 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import {
+  AccordionMenu,
+  AccordionMenuItem,
+  AccordionMenuCollapsable,
+} from "../../index";
+
+<Meta title="ds-react/accordion-menu/intro" />
+
+# Hvordan ta i bruk Accordion-menu
+
+```jsx
+<AccordionMenu>
+  <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
+  <AccordionMenuCollapsable title="Proin">
+    <AccordionMenuItem href="#nulla" active>
+      Nulla
+    </AccordionMenuItem>
+    <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+  </AccordionMenuCollapsable>
+  <AccordionMenuCollapsable title="Accumsan">
+    <AccordionMenuItem href="#justo" aria-current="page">
+      Justo
+    </AccordionMenuItem>
+    <AccordionMenuCollapsable title="Proin">
+      <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
+      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+    </AccordionMenuCollapsable>
+  </AccordionMenuCollapsable>
+</AccordionMenu>
+```
+
+<Canvas>
+  <AccordionMenu>
+    <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
+    <AccordionMenuCollapsable title="Proin">
+      <AccordionMenuItem href="#nulla" active>
+        Nulla
+      </AccordionMenuItem>
+      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+    </AccordionMenuCollapsable>
+    <AccordionMenuCollapsable title="Accumsan">
+      <AccordionMenuItem href="#justo" aria-current="page">
+        Justo
+      </AccordionMenuItem>
+      <AccordionMenuCollapsable title="Proin">
+        <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
+        <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
+      </AccordionMenuCollapsable>
+    </AccordionMenuCollapsable>
+  </AccordionMenu>
+</Canvas>
+
+Accordion-menu støtter opp til maks to-nivårer av `AccordionMenuCollapsable` akkurat nå.
+
+`AccordionMenuItem` er implementert med `OverridableComponent`, noe som
+gjør at man kan ta i bruk eks react-router slik:
+
+```jsx
+<Item
+  component={NavLink}
+  activeClassName="navds-accordion-menu-item--active"
+  to="/1"
+>
+  Lenketekst
+</Item>
+```
+
+Her er `NavLink` fra `react-router-dom` brukt, og man får da
+samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
@@ -42,10 +42,10 @@ export const All = () => (
        <Item href="#luctus">Luctus</Item>
      </Collapsable>
      <Collapsable title="Accumsan">
-        <Item href="#justo" ariaCurrent="page">
+        <Item href="#justo" aria-current="page">
          Justo
        </Item>
-        <Item href="#pariatur" active ariaCurrent="page">
+        <Item href="#pariatur" active aria-current="page">
          Pariatur
        </Item>
        <Collapsable title="Proin">
@@ -1,8 +1,8 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
-import { v4 as uuidv4 } from "uuid";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import { useId } from "..";

 export interface AccordionProps
  extends React.HTMLAttributes<HTMLButtonElement> {
@@ -10,10 +10,6 @@ export interface AccordionProps
   * Component content
   */
  children: React.ReactNode;
-  /**
-   * @ignore
-   */
-  className?: string;
  /**
   * Content on interactive surface of component
   */
@@ -26,8 +22,6 @@ export interface AccordionProps
  open?: boolean;
  /**
   * Callback for when user interacts with component
-   *
-   * @param {object} event
   */
  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  /**
@@ -37,7 +31,7 @@ export interface AccordionProps
  renderContentWhenClosed?: boolean;
 }

-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
  (
    {
      children,
@@ -46,14 +40,16 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
      className,
      renderContentWhenClosed = false,
      onClick,
+      id,
      ...rest
    },
    ref
  ) => {
-    const contentId = useRef(uuidv4());
-    const buttonId = useRef(uuidv4());
    const [internalOpen, setInternalOpen] = useState<boolean>(open);

+    const buttonId = useId(id);
+    const contentId = useId();
+
    useEffect(() => {
      setInternalOpen(open);
    }, [open]);
@@ -64,33 +60,42 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(

    return (
      <div
-        ref={ref}
        className={cl("navds-accordion", className, {
          "navds-accordion--open": internalOpen,
          "navds-accordion--closed": !internalOpen,
        })}
      >
        <button
-          id={buttonId.current}
+          ref={ref}
+          id={buttonId}
          className="navds-accordion__button"
          aria-expanded={open}
-          aria-controls={contentId.current}
+          aria-controls={contentId}
          onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
          {...rest}
        >
-          <span className="navds-accordion__heading">{heading}</span>
+          <span className="navds-accordion__heading navds-title navds-title--s">
+            {heading}
+          </span>
          <Expand
+            focusable="false"
+            role="img"
            className={cl(
              "navds-accordion__chevron",
              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
            )}
          />
+          <ExpandFilled
+            focusable="false"
+            role="img"
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
        </button>
-        <div
-          id={contentId.current}
-          role="region"
-          aria-labelledby={buttonId.current}
-        >
+        <div id={contentId} role="region" aria-labelledby={buttonId}>
          <CollapseComponent isOpened={internalOpen}>
            <div className="navds-accordion__content">{children}</div>
          </CollapseComponent>
@@ -0,0 +1,33 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Accordion } from "../../index";
+
+<Meta title="ds-react/accordion/intro" />
+
+# Hvordan ta i bruk Accordion
+
+```jsx
+<Accordion heading="Qui id id ad cupidatat ullamco.">
+  Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea occaecat
+  aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation ipsum laboris
+  duis velit consequat adipisicing do amet aute. Aliquip culpa minim commodo
+  laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+</Accordion>
+```
+
+<Canvas>
+  <Accordion heading="Qui id id ad cupidatat ullamco.">
+    Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea
+    occaecat aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation
+    ipsum laboris duis velit consequat adipisicing do amet aute. Aliquip culpa
+    minim commodo laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+  </Accordion>
+</Canvas>
+
+Accordion-komponeten styrer selv open/closed state, men om man ønsker kan man selv overskrive denne med
+`open`-prop + `onClick`-prop.
+
+Note: Hvis man tar i bruk `onClick`, så tolker komponeten det slik at du ønsker å styre state selv, så
+man må da også bruke `open`-prop
+
+`renderContentWhenClosed`-prop bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
+Accordion er lukket. Defaulter til `false`.
@@ -12,50 +12,72 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   * Decides what design the alert will have
   */
  variant: "error" | "warning" | "info" | "success";
-  /**
-   * Component content
-   */
  children: React.ReactNode;
  /**
-   * @ignore
+   * Changes padding and font-sizes
+   * @default "m"
   */
-  className?: string;
-  /**
-   * Reduces padding on component
-   * @default "medium"
-   */
-  size?: "medium" | "small";
+  size?: "m" | "s";
 }

 const Icon = ({ variant }) => {
  switch (variant) {
    case "error":
-      return <ErrorFilled />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "warning":
-      return <WarningFilled />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "info":
-      return <InformationFilled />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    case "success":
-      return <SuccessFilled />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
    default:
      return null;
  }
 };

 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, children, className, size = "medium", ...rest }, ref) => (
+  ({ variant, children, className, size = "m", ...rest }, ref) => (
    <div
      ref={ref}
      className={cl(
        className,
        "navds-alert",
        `navds-alert--${variant}`,
-        `navds-alert--${size}`
+        `navds-alert--${size}`,
+        "navds-body-long",
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <span>
+        <span className="sr-only">{`${variant}-ikon`}</span>
+        <Icon variant={variant} />
+      </span>
+      <div>{children}</div>
    </div>
  )
 );
@@ -0,0 +1,55 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Alert } from "../../index";
+
+<Meta title="ds-react/alert/intro" />
+
+# Hvordan ta i bruk Alert
+
+```jsx
+<Alert variant="info">
+  Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
+  eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
+  reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
+  esse.
+</Alert>
+```
+
+<Canvas>
+  <Alert variant="info">
+    Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
+    eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
+    et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
+    ad esse.
+  </Alert>
+</Canvas>
+
+## Varianter
+
+`variants`-prop kan brukes for å endre utseende mellom
+`info`, `success`, `warning` og `error`
+
+<Canvas>
+  <Alert variant="info">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="success">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
+  <Alert variant="error">Id elit esse enim reprehenderit.</Alert>
+</Canvas>
+
+## Sizing
+
+Alert har to størrelser: Default 64px min-height og small 32px min-height
+
+<Canvas>
+  <Alert size="s" variant="info">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="success">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="warning">
+    Id elit esse enim reprehenderit.
+  </Alert>
+  <Alert size="s" variant="error">
+    Id elit esse enim reprehenderit.
+  </Alert>
+</Canvas>
@@ -19,14 +19,19 @@ export const All = () => {
      <h1>Alert</h1>
      {variants.map((variant) => (
        <Alert key={variant} variant={variant}>
-          {Array(8).fill(`${variant} content`).join(" ")}
+          Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
+          eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa
+          nostrud et reprehenderit ea sint.Eu veniam labore enim labore qui
+          eiusmod Lorem amet ad esse.
        </Alert>
      ))}
      <h2>Small</h2>
      <div>
        {variants.map((variant) => (
-          <Alert key={variant} variant={variant} size="small">
-            {Array(8).fill(`${variant} content`).join(" ")}
+          <Alert key={variant} variant={variant} size="s">
+            Exercitation enim nisi veniam nostrud Lorem ipsum ea fugiat. Aute
+            exercitation voluptate proident sit ex reprehenderit quis ex ut
+            mollit.
          </Alert>
        ))}
      </div>
@@ -7,35 +7,34 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   */
  children: React.ReactNode;
  /**
-   * @ignore
-   */
-  className?: string;
-  /**
-   * Decides component design and interactions
+   * Changes design and interactions
   * @default "primary"
   */
  variant?: "primary" | "secondary" | "action" | "danger";
  /**
-   * Reduces internal padding for component
-   * @default "medium"
+   * Changes padding, height and font-size
+   * @default "m"
   */
-  size?: "medium" | "small";
+  size?: "m" | "s";
  /**
   * Prevent the user from interacting with the button: it cannot be pressed or focused.
+   * @note Avoid using if possible for accessibility purposes
   * @default false
   */
  disabled?: boolean;
 }

 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "medium", ...rest }, ref) => (
+  ({ variant = "primary", className, size = "m", ...rest }, ref) => (
    <button
      ref={ref}
      className={cl(
        className,
        "navds-button",
        `navds-button--${variant}`,
-        `navds-button--${size}`
+        `navds-button--${size}`,
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    />
@@ -0,0 +1,65 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Button, Loader } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/button/intro" />
+
+# Hvordan ta i bruk Button
+
+```jsx
+<Button>Buttontekst</Button>
+```
+
+<Canvas>
+  <Button>Buttontekst</Button>
+</Canvas>
+
+## Varianter
+
+`variants`-prop kan brukes for å endre utseende mellom
+`primary`, `secondary`, `action` og `danger`
+
+<Canvas>
+  <Button variant="primary">Buttontekst</Button>
+  <Button variant="secondary">Buttontekst</Button>
+  <Button variant="action">Buttontekst</Button>
+  <Button variant="danger">Buttontekst</Button>
+</Canvas>
+
+## Sizing
+
+Button har to størrelser: Default 48px min-height og small 32px min-height
+
+<Canvas>
+  <Button size="s" variant="primary">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="secondary">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="action">
+    Buttontekst
+  </Button>
+  <Button size="s" variant="danger">
+    Buttontekst
+  </Button>
+</Canvas>
+
+## Med ikon eller `<Loader />`
+
+Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
+bli justert automatisk. For å få riktige marginer rundt ikonet må man da wrappe innholdet
+i et element
+
+<Canvas>
+  <Button>
+    <span>Buttontekst</span> <Loader />
+  </Button>
+  <Button size="s">
+    <span>Buttontekst</span>
+    <Loader />
+  </Button>
+  <Button>
+    <Loader /> <span>Buttontekst</span>
+  </Button>
+</Canvas>
@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "../index";
+import { Success } from "@navikt/ds-icons";

 export default {
  title: "ds-react/button",
@@ -52,7 +53,7 @@ export const All = () => {
        {variants.map((variant) => (
          <a
            key={variant}
-            className={`navds-button navds-button--${variant}`}
+            className={`navds-button navds-button--${variant} navds-body-short`}
            href="the-link"
          >
            {variant}
@@ -62,11 +63,35 @@ export const All = () => {
      <h2>Small</h2>
      <Section>
        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
+          <Button key={variant} variant={variant} size="s">
            {variant}
          </Button>
        ))}
      </Section>
+      <h2>Button w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            <span>{variant}</span> <Success />
+          </Button>
+        ))}
+      </Section>
+      <h2>Small w/icon</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="s">
+            <Success /> <span>{variant}</span>
+          </Button>
+        ))}
+      </Section>
+      <Section>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} size="s">
+            <span className="sr-only">Success ikon</span>
+            <Success />
+          </Button>
+        ))}
+      </Section>
    </>
  );
 };
@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;
@@ -0,0 +1,2 @@
+export { default as MicroCard } from "./MicroCard";
+export * from "./MicroCard";
@@ -0,0 +1,26 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { MicroCard } from "../index.ts";
+
+<Meta title="ds-react/card/intro" />
+
+# Hvordan ta i bruk card
+
+## MicroCard
+
+Kan brukes som en vanlig lenke direkte:
+
+```
+<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+```
+
+<Canvas>
+  <MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+</Canvas>
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```jsx
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```
@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};
@@ -2,10 +2,6 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

 export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * @ignore
-   */
-  classNames?: string;
  /**
   * Component content
   */
@@ -0,0 +1,31 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/content-container/intro" />
+
+# Hvordan ta i bruk ContentContainer
+
+```jsx
+<ContentContainer>
+  <div>innhold...</div>
+</ContentContainer>
+```
+
+## Bruk
+
+Komponenten fungerer som en wrapper rundt innholdet ditt på siden for å
+justere padding og max-width. Dette er all stylingen som blir applied
+
+```css
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--navds-content-container-max-width);
+  padding: var(--navds-content-container-padding-small);
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--navds-content-container-padding-medium-and-larger);
+  }
+}
+```
@@ -1,25 +1,11 @@
 import * as React from "react";
 import { ContentContainer } from "../index";
-import { Text } from "../../index";
+import { BodyLong } from "../../index";
 import "./style.css";
-import { useEffect } from "react";

 export default {
  title: "ds-react/content-container",
  component: ContentContainer,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
    backgrounds: {
@@ -41,7 +27,7 @@ export default {
 export const All = () => {
  return (
    <ContentContainer className={"navds-story-content-container"}>
-      <Text size="medium">-- Innhold --</Text>
+      <BodyLong size="m">-- Innhold --</BodyLong>
    </ContentContainer>
  );
 };
@@ -9,10 +9,14 @@ import React, {
  useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover, Button } from "../index";
+import { Popover, Button } from "..";

 export interface CopyToClipboardProps
  extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button text
+   */
+  children?: React.ReactNode;
  /**
   * Text to be copied to clipboard
   */
@@ -61,7 +65,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
          onClick={handleClick}
          {...rest}
        >
-          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
+          {icon ? (
+            <>{icon}</>
+          ) : (
+            <Copy
+              focusable="false"
+              role="img"
+              aria-label="Fil ikon for kopiering"
+            />
+          )}
          {children ? children : <span className="sr-only">{title}</span>}
        </Button>
        <Popover
@@ -9,7 +9,7 @@ export default {
 };

 export const All = () => {
-  const label = "pi";
+  const label = "Kopierte PI til clipboard";

  const text = "3.14159265359";
  return (
@@ -0,0 +1,35 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { CopyToClipboard } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/copy-to-clipboard/intro" />
+
+# Hvordan ta i bruk CopyToClipboard
+
+Innholdet i `text` vil da bli kopiert til clipboard, mens innholdet i `label`
+brukes i popovertekst og `sr-only` span som rendres hvis knappen ikke har noe tekstinnhold
+`sr-only` tekst blir da `Kopier ${label} (${text})`
+
+```jsx
+<CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
+  Kopier Pi{" "}
+</CopyToClipboard>
+```
+
+<Canvas>
+  <CopyToClipboard label={"Kopierte PI til clipboard"} text={"3.14"}>
+    Kopier Pi{" "}
+  </CopyToClipboard>
+</Canvas>
+
+## Custom ikon
+
+Man kan sette andre ikoner en `Copy` ved `icon`-proppen
+
+```jsx
+<CopyToClipboard
+  icon={<Link />}
+  label={"Kopierte PI til clipboard"}
+  text={"3.14"}
+/>
+```
@@ -0,0 +1,45 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { BodyLong, Checkbox, CheckboxProps } from "..";
+
+export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
+  /**
+   * Additional information on panel
+   */
+  children?: React.ReactNode;
+  /**
+   * Checkbox label
+   */
+  label: string;
+  /**
+   * Checked state for checkbox
+   */
+  checked: boolean;
+}
+
+const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
+  ({ className, children, label, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-confirmation-panel", className, {
+          "navds-confirmation-panel--s": props.size === "s",
+          "navds-confirmation-panel--error": !!props.error,
+          "navds-confirmation-panel--checked": !!props.checked,
+        })}
+      >
+        {children && (
+          <BodyLong
+            size={props.size}
+            className="navds-confirmation-panel__content"
+          >
+            {children}
+          </BodyLong>
+        )}
+        <Checkbox {...props}>{label}</Checkbox>
+      </div>
+    );
+  }
+);
+
+export default ConfirmationPanel;
@@ -0,0 +1,17 @@
+import React from "react";
+import cl from "classnames";
+import { Label } from "..";
+
+const ErrorMessage = (props) => (
+  <Label
+    {...props}
+    component="div"
+    className={cl(
+      "navds-error-message",
+      props.className,
+      `navds-error-message--${props.size ?? "m"}`
+    )}
+  />
+);
+
+export default ErrorMessage;
@@ -0,0 +1,132 @@
+import cl from "classnames";
+import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
+import { BodyShort, Label, omit } from "../..";
+import ErrorMessage from "../ErrorMessage";
+import { FormFieldProps } from "../useFormField";
+import { useFieldset } from "./useFieldset";
+
+export type FieldsetContextProps = {
+  /**
+   * Error message applied to element
+   */
+  error?: React.ReactNode;
+  /**
+   * Overrides internal errorId
+   */
+  errorId: string;
+  /**
+   * Changes paddings, margins and font-sizes
+   */
+  size: "m" | "s";
+  disabled: boolean;
+};
+
+export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
+  null
+);
+export interface FieldsetProps
+  extends FormFieldProps,
+    FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /**
+   * FormFields in Fieldset
+   */
+  children: React.ReactNode;
+  /**
+   * Fieldset legend
+   */
+  legend: React.ReactNode;
+  /**
+   * If enabled shows the legend and description for screenreaders only
+   */
+  hideLegend?: boolean;
+  /**
+   * Toggles error propagation to child-elements
+   * @default true
+   */
+  errorPropagation?: boolean;
+}
+
+const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFieldset(props);
+
+    const fieldset = useContext(FieldsetContext);
+
+    const {
+      children,
+      className,
+      errorPropagation = true,
+      legend,
+      description,
+      hideLegend,
+      ...rest
+    } = props;
+
+    return (
+      <FieldsetContext.Provider
+        value={{
+          error: errorPropagation ? props.error ?? fieldset?.error : undefined,
+          errorId: cl({
+            [errorId]: showErrorMsg,
+            [fieldset?.errorId ?? ""]: !!fieldset?.error,
+          }),
+          size,
+          disabled: props.disabled ?? false,
+        }}
+      >
+        <fieldset
+          {...omit(rest, ["errorId"])}
+          {...inputProps}
+          ref={ref}
+          className={cl(
+            className,
+            "navds-fieldset",
+            `navds-fieldset--${size}`,
+            { "navds-fieldset--error": hasError }
+          )}
+        >
+          <Label
+            size={size}
+            component="legend"
+            className={cl("navds-fieldset__legend", {
+              "sr-only": !!hideLegend,
+            })}
+          >
+            {legend}
+          </Label>
+          {!!description && (
+            <BodyShort
+              className={cl("navds-fieldset__description", {
+                "sr-only": !!hideLegend,
+              })}
+              id={inputDescriptionId}
+              size={size}
+            >
+              {description}
+            </BodyShort>
+          )}
+          {children}
+          <div
+            id={errorId}
+            aria-relevant="additions removals"
+            aria-live="polite"
+            className="navds-fieldset__error"
+          >
+            {showErrorMsg && (
+              <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            )}
+          </div>
+        </fieldset>
+      </FieldsetContext.Provider>
+    );
+  }
+);
+
+export default Fieldset;
@@ -0,0 +1 @@
+export { default, FieldsetProps, FieldsetContext } from "./Fieldset";
@@ -0,0 +1,17 @@
+import { useFormField } from "../useFormField";
+
+/**
+ * Handles props for Fieldset in context with parent Fieldset.
+ */
+export const useFieldset = (props) => {
+  const formField = useFormField(props, "fieldset");
+  const { inputProps } = formField;
+
+  return {
+    ...formField,
+    inputProps: {
+      "aria-invalid": inputProps["aria-invalid"],
+      "aria-describedby": inputProps["aria-describedby"],
+    },
+  };
+};
@@ -0,0 +1,103 @@
+import React, { forwardRef, SelectHTMLAttributes } from "react";
+import cl from "classnames";
+import { Expand } from "@navikt/ds-icons";
+import { BodyShort, Label } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface SelectProps
+  extends FormFieldProps,
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /**
+   * Collection of <option>-elements
+   */
+  children: React.ReactNode;
+  /**
+   * Expose the HTML size attribute
+   */
+  htmlSize?: number;
+  /**
+   * Label for select
+   */
+  label: string;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
+  const {
+    inputProps,
+    errorId,
+    showErrorMsg,
+    hasError,
+    size,
+    inputDescriptionId,
+  } = useFormField(props, "textField");
+
+  const {
+    children,
+    label,
+    className,
+    description,
+    htmlSize,
+    hideLabel = false,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      className={cl(
+        props.className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        { "navds-select--error": hasError }
+      )}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        component="label"
+        className={cl("navds-select__label", {
+          "sr-only": hideLabel,
+        })}
+      >
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          className={cl("navds-select__description", {
+            "sr-only": hideLabel,
+          })}
+          id={inputDescriptionId}
+          size={size}
+        >
+          {description}
+        </BodyShort>
+      )}
+      <div className="navds-select__container">
+        <select
+          {...rest}
+          {...inputProps}
+          ref={ref}
+          className={cl(
+            className,
+            "navds-select__input",
+            "navds-body-short",
+            `navds-body--${size ?? "m"}`
+          )}
+          size={props.htmlSize}
+        >
+          {children}
+        </select>
+        <Expand className="navds-select__chevron" />
+      </div>
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export default Select;
@@ -0,0 +1,92 @@
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import cl from "classnames";
+import { BodyShort, Label } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface TextFieldProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Expose the HTML size attribute
+   */
+  htmlSize?: number;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * TextField label
+   */
+  label: React.ReactNode;
+}
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
+  const {
+    inputProps,
+    errorId,
+    showErrorMsg,
+    hasError,
+    size,
+    inputDescriptionId,
+  } = useFormField(props, "textField");
+
+  const {
+    label,
+    className,
+    description,
+    htmlSize,
+    hideLabel = false,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      className={cl(
+        props.className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        { "navds-text-field--error": hasError }
+      )}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        component="label"
+        className={cl("navds-text-field__label", { "sr-only": hideLabel })}
+      >
+        {label}
+      </Label>
+
+      {!!description && (
+        <BodyShort
+          className={cl("navds-text-field__description", {
+            "sr-only": hideLabel,
+          })}
+          id={inputDescriptionId}
+          size={size}
+        >
+          {description}
+        </BodyShort>
+      )}
+      <input
+        {...rest}
+        {...inputProps}
+        ref={ref}
+        type="text"
+        className={cl(
+          className,
+          "navds-text-field__input",
+          "navds-body-short",
+          `navds-body-${size ?? "m"}`
+        )}
+        size={htmlSize}
+      />
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export default TextField;
@@ -0,0 +1,153 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import { BodyShort, Label } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { FormFieldProps, useFormField } from "./useFormField";
+import { useId } from "..";
+
+/**
+ * TODO: Mulighet for lokalisering av sr-only/counter text
+ */
+export interface TextareaProps
+  extends FormFieldProps,
+    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Visually allowed length of content
+   */
+  maxLength?: number;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  /**
+   * Maximum number of rows to display.
+   * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
+   */
+  maxRows?: number;
+  /**
+   * Minimum number of rows to display.
+   */
+  minRows?: number;
+  /**
+   * Textarea label
+   */
+  label: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textarea");
+
+    const {
+      label,
+      className,
+      description,
+      maxLength,
+      hideLabel = false,
+      ...rest
+    } = props;
+
+    const maxLengthId = `TextareaMaxLength-${useId()}`;
+    const hasMaxLength = maxLength !== undefined && maxLength > 0;
+
+    return (
+      <div
+        className={cl(
+          props.className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          { "navds-textarea--error": hasError }
+        )}
+      >
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          component="label"
+          className={cl("navds-textarea__label", {
+            "sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            className={cl("navds-textarea__description", {
+              "sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-textarea__wrapper">
+          <TextareaAutosize
+            {...rest}
+            {...inputProps}
+            ref={ref}
+            className={cl(
+              className,
+              "navds-textarea__input",
+              "navds-body-short",
+              `navds-body-${size ?? "m"}`,
+              {
+                "navds-textarea--counter": hasMaxLength,
+              }
+            )}
+            aria-describedby={cl(inputProps["aria-describedby"], {
+              [maxLengthId]: hasMaxLength,
+            })}
+          />
+          {hasMaxLength && (
+            <>
+              <span id={maxLengthId} className="sr-only">
+                Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
+                {maxLength} signs.
+              </span>
+              <Counter
+                maxLength={maxLength}
+                currentLength={props.value.length}
+                size={size}
+              />
+            </>
+          )}
+        </div>
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export const Counter = ({ maxLength, currentLength, size }) => {
+  const difference = maxLength - currentLength;
+
+  return (
+    <BodyShort
+      className={cl("navds-textarea__counter", {
+        "navds-textarea__counter--error": difference < 0,
+      })}
+      aria-live="polite"
+      size={size}
+    >
+      {difference < 0
+        ? `Du har ${Math.abs(difference)} tegn for mye`
+        : `Du har ${difference} tegn igjen`}
+    </BodyShort>
+  );
+};
+
+export default Textarea;
@@ -0,0 +1,85 @@
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import cl from "classnames";
+import useCheckbox from "./useCheckbox";
+import ErrorMessage from "../ErrorMessage";
+import { FormFieldProps } from "../useFormField";
+import { BodyShort, omit } from "../..";
+
+export interface CheckboxProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Label for checkbox
+   */
+  children: React.ReactNode;
+  /**
+   * Hides label and makes it viewable for screen-readers only.
+   */
+  hideLabel?: boolean;
+}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+  const {
+    inputProps,
+    errorId,
+    showErrorMsg,
+    hasError,
+    size,
+    inputDescriptionId,
+  } = useCheckbox(props);
+
+  return (
+    <div
+      className={cl(
+        props.className,
+        "navds-checkbox",
+        `navds-checkbox--${size}`,
+        {
+          "navds-checkbox--error": hasError,
+          "navds-checkbox--with-error-message": showErrorMsg,
+          "navds-checkbox--with-description": !!props.description,
+        }
+      )}
+    >
+      <input
+        {...omit(props, [
+          "children",
+          "size",
+          "error",
+          "errorId",
+          "description",
+          "hideLabel",
+        ])}
+        {...inputProps}
+        className="navds-checkbox__input"
+        ref={ref}
+      />
+      <BodyShort
+        component="label"
+        htmlFor={inputProps.id}
+        size={size}
+        className="navds-checkbox__label"
+      >
+        {props.hideLabel ? (
+          <span className="sr-only">{props.children}</span>
+        ) : (
+          props.children
+        )}
+      </BodyShort>
+      {props.description && (
+        <BodyShort
+          size={size}
+          id={inputDescriptionId}
+          className="navds-checkbox__description"
+        >
+          {props.description}
+        </BodyShort>
+      )}
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export default Checkbox;
@@ -0,0 +1,79 @@
+import React, { createContext, forwardRef, useContext } from "react";
+import cl from "classnames";
+import { Fieldset, FieldsetProps, FieldsetContext } from "..";
+
+export interface CheckboxGroupState {
+  readonly defaultValue: readonly string[];
+  readonly value?: readonly string[];
+  toggleValue(value: string): void;
+}
+
+export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
+  null
+);
+
+export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
+  /**
+   * Checkboxes
+   */
+  children: React.ReactNode;
+  /**
+   * Controlled state for group
+   */
+  value?: string[];
+  /**
+   * Default checked checkboxes on render
+   */
+  defaultValue?: string[];
+  /**
+   * Returns current checked checkboxes in group
+   */
+  onChange?: (value: string[]) => void;
+}
+
+const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
+  (
+    {
+      value,
+      defaultValue = [],
+      onChange = () => {},
+      children,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const state = value ?? [];
+
+    const fieldset = useContext(FieldsetContext);
+
+    return (
+      <Fieldset
+        {...rest}
+        ref={ref}
+        className={cl(
+          className,
+          "navds-checkbox-group",
+          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "m"}`
+        )}
+      >
+        <CheckboxGroupContext.Provider
+          value={{
+            value,
+            defaultValue,
+            toggleValue: (value: string) =>
+              onChange(
+                state.includes(value)
+                  ? state.filter((v) => v !== value)
+                  : [...state, value]
+              ),
+          }}
+        >
+          <div className="navds-checkboxes">{children}</div>
+        </CheckboxGroupContext.Provider>
+      </Fieldset>
+    );
+  }
+);
+
+export default CheckboxGroup;
@@ -0,0 +1,2 @@
+export { default as Checkbox, CheckboxProps } from "./Checkbox";
+export { default as CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
				`@@ -0,0 +1 @@`
				`export { default, FieldsetProps, FieldsetContext } from "./Fieldset";`