Lerna versionbump [ci skip]

- @navikt/ds-css@0.10.0
 - @navikt/ds-react@0.11.0
 - @navikt/ds-css-internal@0.6.0
 - @navikt/ds-react-internal@0.6.0

.github/workflows/build-publish.yml

@@ -55,15 +55,17 @@ jobs:
   publish-npm:
     needs: test-build
     runs-on: ubuntu-latest
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
     if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: "0"
           token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          registry-url: http://registry.npmjs.org
+          registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
         uses: actions/cache@v2
@@ -93,17 +95,9 @@ jobs:
       - name: Update changed packages with MAJOR
         if: "contains(github.event.head_commit.message, '[breaking]')"
         run: yarn lerna version major --include-merged-tags --yes
-
-      - name: Create a .npmrc file for NPM
-        run: |
-          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
-          npm whoami
-        env:
-          NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
       - name: Publish to NPM registry
-        run: |
-          yarn lerna publish from-package --yes
-          rm .npmrc
+        run: yarn lerna publish --no-verify-access from-package --yes
+
       - name: Create a .npmrc file for the github package repository
         uses: FerLuisxd/create-npmrc@3
         with:

.storybook/stories/migration.stories.mdx

@@ -2,7 +2,33 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Migration" />
 
-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
 
 Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
 For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.

.storybook/stories/roadmap-table.tsx

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

.storybook/stories/roadmap.stories.mdx

@@ -1,16 +1,30 @@
 import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
 
 <Meta title="ds-react/Roadmap" />
 
-# Plan videre
+# Roadmap
 
-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.
+## Komponenter
 
-(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)
 
 ## Tokens
 
@@ -20,12 +34,11 @@ Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke c
 ## 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="small" -> 32px, size="medium"-> 48px`.
-Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
 
 ## Ny dokumentasjon-side
 
-Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+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`
 
@@ -46,6 +59,6 @@ noe vi kunne ta en titt på hvis vi ser at det trengs.
 
 ## 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å å
+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.

@navikt/core/css/alert.css

@@ -44,12 +44,12 @@
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xl);
+  height: var(--navds-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-l);
+  height: var(--navds-font-line-height-large);
 }
 
 .navds-alert--error {

@navikt/core/css/index.css

@@ -7,7 +7,6 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
@@ -19,6 +18,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.css";
+@import "table.css";
 
 /* Navno spesific packages */
 @import "page-header.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.2",
+    "@navikt/ds-tokens": "^0.5.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

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

@@ -65,6 +65,6 @@
     height: 3rem;
   }
   .navds-page-header__title {
-    font-size: var(--navds-font-size-title-xl);
+    font-size: var(--navds-font-size-heading-xlarge);
   }
 }

@navikt/core/css/table.css

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

@navikt/core/css/typography.css

@@ -5,9 +5,9 @@
 }
 
 .navds-heading--2xlarge {
-  font-size: var(--navds-font-size-heading-2xl);
+  font-size: var(--navds-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xl);
+  line-height: var(--navds-font-line-height-heading-2xlarge);
 }
 
 .navds-heading--2xlarge.navds-typo--spacing {
@@ -15,9 +15,9 @@
 }
 
 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-xl);
+  font-size: var(--navds-font-size-heading-xlarge);
   letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xl);
+  line-height: var(--navds-font-line-height-heading-xlarge);
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
@@ -25,9 +25,9 @@
 }
 
 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-l);
+  font-size: var(--navds-font-size-heading-large);
   letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-l);
+  line-height: var(--navds-font-line-height-heading-large);
 }
 
 .navds-heading--large.navds-typo--spacing {
@@ -35,9 +35,9 @@
 }
 
 .navds-heading--medium {
-  font-size: var(--navds-font-size-heading-m);
+  font-size: var(--navds-font-size-heading-medium);
   letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-heading-m);
+  line-height: var(--navds-font-line-height-heading-medium);
 }
 
 .navds-heading--medium.navds-typo--spacing {
@@ -45,9 +45,9 @@
 }
 
 .navds-heading--small {
-  font-size: var(--navds-font-size-heading-s);
+  font-size: var(--navds-font-size-heading-small);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-s);
+  line-height: var(--navds-font-line-height-heading-small);
 }
 
 .navds-heading--small.navds-typo--spacing {
@@ -55,9 +55,9 @@
 }
 
 .navds-heading--xsmall {
-  font-size: var(--navds-font-size-heading-xs);
+  font-size: var(--navds-font-size-heading-xsmall);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-xs);
+  line-height: var(--navds-font-line-height-heading-xsmall);
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
@@ -66,10 +66,10 @@
 
 /* Ingress */
 .navds-ingress {
-  font-size: var(--navds-font-size-xl);
+  font-size: var(--navds-font-size-xlarge);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -79,10 +79,10 @@
 
 /* Body */
 .navds-body-long {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -91,9 +91,9 @@
 }
 
 .navds-body-long--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
 }
 
 .navds-body-long--small.navds-typo--spacing {
@@ -101,10 +101,10 @@
 }
 
 .navds-body-short {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -113,9 +113,9 @@
 }
 
 .navds-body-short--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-body-short--small.navds-typo--spacing {
@@ -124,10 +124,10 @@
 
 /* Label */
 .navds-label {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -136,9 +136,9 @@
 }
 
 .navds-label--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-label--small.navds-typo--spacing {
@@ -147,10 +147,10 @@
 
 /* Small text */
 .navds-detail {
-  font-size: var(--navds-font-size-s);
+  font-size: var(--navds-font-size-small);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
   margin: 0;
 }
 

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -31,7 +31,7 @@
     "convert-icons": "node figma-api/pngConverter.mjs",
     "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
     "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

@navikt/core/icons/svg/AttachmentFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1502 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06213 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DataFilled.svg

@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
+<mask id="path-1-inside-1_1873:555" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z" fill="#262626"/>
-<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1)"/>
+<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1_1873:555)"/>
 </svg>

@navikt/core/icons/svg/FillForms.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.013 1.10889L18.0433 1.07797C19.2857 -0.193723 21.3537 -0.408751 22.7918 0.823966L22.8275 0.854537L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656L21.6845 7.59584L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53888L15.1817 4.53857L16.3832 3.07665L16.4505 2.99468L17.8601 1.27963L18.013 1.10889ZM17.9807 4.28L19.375 2.58351L19.4707 2.47669C20.0324 1.90179 20.9117 1.84497 21.4932 2.3434L21.5908 2.43534C22.1151 2.9782 22.1517 3.88027 21.6295 4.51599L20.2534 6.19L17.9807 4.28ZM10.6593 13.1929L16.7116 5.82501L18.9843 7.73501L12.9138 15.1254L9.85574 16.5098L10.6593 13.1929ZM0 24H23.965V22H0V24Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0131 1.10889L18.0433 1.07797C19.2857 -0.193723 21.3537 -0.408751 22.7918 0.823966L22.8275 0.854537L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656L21.6845 7.59584L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53889L15.1817 4.53857L16.3832 3.07665L16.4505 2.99468L17.8601 1.27963L18.0131 1.10889ZM17.9807 4.28L19.375 2.58351L19.4707 2.47669C20.0324 1.90179 20.9117 1.84497 21.4932 2.3434L21.5908 2.43534C22.1151 2.9782 22.1517 3.88027 21.6295 4.51599L20.2534 6.19L17.9807 4.28ZM10.6593 13.1929L16.7116 5.82501L18.9843 7.73501L12.9138 15.1254L9.85575 16.5098L10.6593 13.1929ZM0 24H23.965V22H0V24Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/HandBandageFilled.svg

@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
+<mask id="path-1-inside-1_1873:540" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z" fill="#262626"/>
-<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1)"/>
+<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1_1873:540)"/>
 </svg>

@navikt/core/icons/svg/Historic.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="M3 4.06273V0H0.999999V7.99999H8.99999V5.99999H3.99914C5.82465 3.56964 8.72948 2 12 2C17.5229 2 22 6.47715 22 12C22 14.411 21.148 16.6204 19.7276 18.3474L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.41498 0 5.19798 1.57244 3 4.06273ZM16.3753 16.7809L11 12.4806L11 5.99999L13 5.99999L13 11.5194L17.6247 15.2191L16.3753 16.7809ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM5 22H6.99999V20H5V22ZM13 24H11V22H13V24ZM17 22H19V20H17V22Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.06273V0H0.999999V7.99999H8.99999V5.99999H3.99914C5.82464 3.56964 8.72948 2 12 2C17.5228 2 22 6.47714 22 12C22 14.411 21.148 16.6204 19.7276 18.3474L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.41497 0 5.19798 1.57244 3 4.06273ZM16.3753 16.7808L11 12.4806L11 5.99999L13 5.99999L13 11.5194L17.6247 15.2191L16.3753 16.7808ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 22H6.99999V20H4.99999V22ZM13 24H11V22H13V24ZM17 22H19V20H17V22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/HistoricFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 6.99999L5.99999 5L5.44642 4.44642C7.20206 2.92183 9.49364 2 12 2V12L20.5 19L20.5054 18.987L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.94014 0 6.14838 1.14549 4.02948 3.02948L3 2L0.999999 0V2.82842V5V6.99999H3H3.33597L3.33723 7.00072L3.33765 6.99999H5.17157H7.99999ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM5 20V22H6.99999V20H5ZM11 24V22H13V24H11ZM17 22H19V20H17V22Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 6.99999L5.99999 4.99999L5.44642 4.44642C7.20205 2.92183 9.49364 2 12 2V12L20.5 19L20.5054 18.987L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.94014 0 6.14837 1.14549 4.02948 3.02948L3 2L0.999999 0V2.82842V4.99999V6.99999H3H3.33597L3.33723 7.00072L3.33765 6.99999H5.17157H7.99999ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 20V22H6.99999V20H4.99999ZM11 24V22H13V24H11ZM17 22H19V20H17V22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/LinkFilled.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.51472 15.906C11.8579 18.2501 15.6569 18.2501 18 15.906L22.2426 11.6616C24.5858 9.31754 24.5858 5.51699 22.2426 3.17288L20.8284 1.75808C18.4853 -0.586027 14.6863 -0.586027 12.3431 1.75808L11.2825 2.81918C10.5014 3.60055 10.5014 4.8674 11.2825 5.64877C12.0635 6.43014 13.3299 6.43014 14.1109 5.64877L15.1716 4.58767C15.9526 3.8063 17.219 3.8063 18 4.58767L19.4142 6.00247C20.1953 6.78384 20.1953 8.05069 19.4142 8.83206L15.1716 13.0764C14.3905 13.8578 13.1242 13.8578 12.3431 13.0764L11.636 12.369C10.855 11.5877 9.58866 11.5877 8.80761 12.369C8.02656 13.1504 8.02656 14.4173 8.80761 15.1986L9.51472 15.906Z" fill="#262626"/>
-<path d="M14.4853 8.09396C12.1421 5.74986 8.34314 5.74985 6 8.09396L1.75736 12.3384C-0.585786 14.6825 -0.585787 18.483 1.75736 20.8271L3.17157 22.2419C5.51472 24.586 9.31371 24.586 11.6569 22.2419L12.7175 21.1808C13.4986 20.3995 13.4986 19.1326 12.7175 18.3512C11.9365 17.5699 10.6701 17.5699 9.88909 18.3512L8.82843 19.4123C8.04738 20.1937 6.78105 20.1937 6 19.4123L4.58579 17.9975C3.80474 17.2162 3.80474 15.9493 4.58579 15.1679L8.82843 10.9236C9.60948 10.1422 10.8758 10.1422 11.6569 10.9236L12.364 11.631C13.145 12.4123 14.4113 12.4123 15.1924 11.631C15.9734 10.8496 15.9734 9.58273 15.1924 8.80136L14.4853 8.09396Z" fill="#262626"/>
+<path d="M9.51472 15.906C11.8579 18.2501 15.6569 18.2501 18 15.906L22.2426 11.6617C24.5858 9.31754 24.5858 5.51699 22.2426 3.17288L20.8284 1.75808C18.4853 -0.586027 14.6863 -0.586027 12.3431 1.75808L11.2825 2.81918C10.5014 3.60055 10.5014 4.8674 11.2825 5.64877C12.0635 6.43014 13.3299 6.43014 14.1109 5.64877L15.1716 4.58767C15.9526 3.8063 17.219 3.8063 18 4.58767L19.4142 6.00247C20.1953 6.78384 20.1953 8.05069 19.4142 8.83206L15.1716 13.0764C14.3905 13.8578 13.1242 13.8578 12.3431 13.0764L11.636 12.369C10.855 11.5877 9.58866 11.5877 8.80761 12.369C8.02656 13.1504 8.02656 14.4173 8.80761 15.1986L9.51472 15.906Z" fill="#262626"/>
+<path d="M14.4853 8.09397C12.1421 5.74986 8.34315 5.74986 6 8.09396L1.75736 12.3384C-0.585786 14.6825 -0.585787 18.483 1.75736 20.8271L3.17157 22.2419C5.51472 24.586 9.31371 24.586 11.6569 22.2419L12.7175 21.1808C13.4986 20.3995 13.4986 19.1326 12.7175 18.3512C11.9365 17.5699 10.6701 17.5699 9.88909 18.3512L8.82843 19.4123C8.04738 20.1937 6.78105 20.1937 6 19.4123L4.58579 17.9975C3.80474 17.2162 3.80474 15.9493 4.58579 15.1679L8.82843 10.9236C9.60948 10.1422 10.8758 10.1422 11.6569 10.9236L12.364 11.631C13.145 12.4123 14.4113 12.4123 15.1924 11.631C15.9734 10.8496 15.9734 9.58273 15.1924 8.80136L14.4853 8.09397Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/PensionFlowerFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15.9381C16.9463 15.446 20 12.0796 20 8C20 3.58172 16.4183 0 12 0C7.58172 0 4 3.58172 4 8C4 12.0796 7.05369 15.446 11 15.9381V23.9871C10.9997 23.8766 10.9913 23.0662 10.8182 21.9959C10.5766 20.5022 10.014 18.5023 8.70434 17.1927C7.40565 15.894 5.46084 15.3626 4.00003 15.1464C3.5797 15.0842 3.19945 15.048 2.88619 15.0273C2.34303 14.9912 2.00129 15.0013 2.00129 15.0013C2.00129 15.0013 1.99124 15.343 2.02727 15.8862C2.04805 16.1994 2.08416 16.5797 2.14637 17C2.36257 18.4608 2.89398 20.4056 4.19267 21.7043C5.5023 23.014 7.5022 23.5766 8.99595 23.8182C10.1487 24.0047 11 24 11 24H13C13 24 13.8513 24.0047 15.004 23.8182C16.4978 23.5766 18.4977 23.014 19.8073 21.7043C21.106 20.4056 21.6374 18.4608 21.8536 17C21.9158 16.5797 21.9519 16.1994 21.9727 15.8862C22.0088 15.343 21.9987 15.0013 21.9987 15.0013C21.9987 15.0013 21.657 14.9912 21.1138 15.0273C20.8005 15.048 20.4203 15.0842 20 15.1464C18.5392 15.3626 16.5943 15.894 15.2956 17.1927C13.986 18.5023 13.4234 20.5022 13.1818 21.9959C13.0087 23.0662 13.0003 23.8766 13 23.9871V15.9381ZM9.375 12.5V4H12.511C13.015 4 13.3337 4.05133 13.7724 4.154C14.211 4.24733 14.5937 4.41066 14.9204 4.644C15.247 4.868 15.5037 5.17133 15.6904 5.554C15.8864 5.92733 15.9844 6.38933 15.9844 6.94C15.9844 7.472 15.8864 7.934 15.6904 8.326C15.5037 8.718 15.247 9.04 14.9204 9.292C14.5937 9.544 14.2157 9.73066 13.7864 9.852C13.357 9.97333 13.0523 10.034 12.567 10.034H11.375V12.5H9.375ZM11.375 8.396H12.441C13.561 8.396 14.121 7.91066 14.121 6.94C14.121 6.464 13.9717 6.128 13.673 5.932C13.3743 5.736 12.945 5.638 12.385 5.638H11.375V8.396Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15.9381C16.9463 15.446 20 12.0796 20 8C20 3.58172 16.4183 0 12 0C7.58172 0 4 3.58172 4 8C4 12.0796 7.05369 15.446 11 15.9381V23.9871C10.9997 23.8766 10.9913 23.0662 10.8182 21.9959C10.5766 20.5022 10.014 18.5023 8.70434 17.1927C7.40565 15.894 5.46084 15.3626 4.00003 15.1464C3.57971 15.0842 3.19945 15.048 2.88619 15.0273C2.34303 14.9912 2.00129 15.0013 2.00129 15.0013C2.00129 15.0013 1.99124 15.343 2.02727 15.8862C2.04805 16.1994 2.08416 16.5797 2.14637 17C2.36257 18.4608 2.89398 20.4056 4.19267 21.7043C5.5023 23.014 7.5022 23.5766 8.99595 23.8182C10.1487 24.0047 11 24 11 24H13C13 24 13.8513 24.0047 15.004 23.8182C16.4978 23.5766 18.4977 23.014 19.8073 21.7043C21.106 20.4056 21.6374 18.4608 21.8536 17C21.9158 16.5797 21.9519 16.1994 21.9727 15.8862C22.0088 15.343 21.9987 15.0013 21.9987 15.0013C21.9987 15.0013 21.657 14.9912 21.1138 15.0273C20.8005 15.048 20.4203 15.0842 20 15.1464C18.5392 15.3626 16.5943 15.894 15.2957 17.1927C13.986 18.5023 13.4234 20.5022 13.1818 21.9959C13.0087 23.0662 13.0003 23.8766 13 23.9871V15.9381ZM9.375 12.5V4H12.511C13.015 4 13.3337 4.05133 13.7724 4.154C14.211 4.24733 14.5937 4.41067 14.9204 4.644C15.247 4.868 15.5037 5.17133 15.6904 5.554C15.8864 5.92733 15.9844 6.38933 15.9844 6.94C15.9844 7.472 15.8864 7.934 15.6904 8.326C15.5037 8.718 15.247 9.04 14.9204 9.292C14.5937 9.544 14.2157 9.73066 13.7864 9.852C13.357 9.97333 13.0523 10.034 12.567 10.034H11.375V12.5H9.375ZM11.375 8.396H12.441C13.561 8.396 14.121 7.91066 14.121 6.94C14.121 6.464 13.9717 6.128 13.673 5.932C13.3743 5.736 12.945 5.638 12.385 5.638H11.375V8.396Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/RecycleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.67081 3.47762L7.90972 4.60803L5.03125 5.62929L6.98986 2.39391C7.52515 1.56362 8.4349 1.05008 9.42235 1.02079L10.1996 0.998291L16.1003 1.02099C16.497 1.02251 16.8553 1.25842 17.0135 1.62223L18.6926 5.48375L20.7066 4.60803L18.932 13.5579L11.1762 8.75195L13.1902 7.87624L11.0583 2.97316L9.48164 3.01992C9.15249 3.02968 8.84924 3.20086 8.67081 3.47762ZM7.49981 19.9983L6.21832 19.9895C5.88903 19.9877 5.58172 19.8239 5.39663 19.5515L4.51008 18.2469L7.49981 13.8145L9.3205 15.0425L9.20665 5.9191L0.704894 9.23123L2.52559 10.4593L0.170963 13.9502C-0.0508809 14.2791 -0.0573217 14.708 0.154548 15.0434L3.30587 20.0322L3.74244 20.6757C4.2977 21.4927 5.21962 21.9841 6.2075 21.9894H10.0625L7.49981 19.9983ZM20.9249 12.0526L21.832 13.4132C22.0147 13.6872 22.0507 14.0336 21.9284 14.3393L21.3426 15.8038H15.9961V13.6077L8.49609 18.8038L15.9961 24V21.8038H20.2068C20.6036 21.8038 20.9628 21.5693 21.1224 21.2061L23.4961 15.8038L23.7854 15.0821C24.1523 14.1649 24.0441 13.1258 23.4961 12.3038L21.4591 9.24829L20.9249 12.0526Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.67081 3.47762L7.90972 4.60803L5.03125 5.62929L6.98986 2.39391C7.52515 1.56362 8.4349 1.05008 9.42235 1.02079L10.1996 0.998291L16.1003 1.02099C16.497 1.02251 16.8553 1.25842 17.0135 1.62223L18.6926 5.48375L20.7066 4.60803L18.932 13.5579L11.1762 8.75195L13.1902 7.87624L11.0583 2.97316L9.48164 3.01992C9.15249 3.02968 8.84924 3.20086 8.67081 3.47762ZM7.49981 19.9983L6.21832 19.9895C5.88903 19.9877 5.58172 19.8239 5.39663 19.5515L4.51008 18.2469L7.49981 13.8145L9.3205 15.0425L9.20665 5.9191L0.704894 9.23123L2.52559 10.4593L0.170963 13.9502C-0.0508809 14.2791 -0.0573217 14.708 0.154548 15.0434L3.30587 20.0322L3.74244 20.6757C4.2977 21.4927 5.21962 21.9841 6.2075 21.9894H10.0625L7.49981 19.9983ZM20.9249 12.0526L21.832 13.4132C22.0147 13.6872 22.0507 14.0336 21.9284 14.3393L21.3426 15.8039H15.9961V13.6077L8.49609 18.8039L15.9961 24V21.8039H20.2068C20.6036 21.8039 20.9628 21.5693 21.1224 21.2061L23.4961 15.8039L23.7854 15.0821C24.1523 14.1649 24.0441 13.1258 23.4961 12.3038L21.4591 9.24829L20.9249 12.0526Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/RulerFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H6L24 18V0ZM18.8284 4H18H16L18 6L20 8V6V5.17157V4H18.8284ZM4.94975 3.4939C5.34027 3.10338 5.97344 3.10338 6.36396 3.4939L8.4853 5.61525L5.65685 8.44364L7.07105 9.85787L9.89952 7.02946L11.3137 8.44362L8.48525 11.2721L9.89947 12.6863L12.7279 9.85783L14.1422 11.2721L11.3137 14.1005L12.728 15.5147L15.5564 12.6863L16.9705 14.1005L14.1421 16.9289L15.5563 18.3431L18.3847 15.5147L20.5061 17.636C20.8966 18.0266 20.8966 18.6597 20.5061 19.0503L15.5563 24L0 8.44365L4.94975 3.4939Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H6L24 18V0ZM18.8284 4H18H16L18 6L20 8V6V5.17157V4H18.8284ZM4.94975 3.4939C5.34027 3.10338 5.97344 3.10338 6.36396 3.4939L8.4853 5.61525L5.65685 8.44365L7.07106 9.85787L9.89952 7.02946L11.3137 8.44362L8.48525 11.2721L9.89947 12.6863L12.7279 9.85784L14.1422 11.2721L11.3137 14.1005L12.728 15.5147L15.5564 12.6863L16.9705 14.1005L14.1421 16.9289L15.5563 18.3431L18.3847 15.5147L20.5061 17.636C20.8966 18.0266 20.8966 18.6597 20.5061 19.0503L15.5563 24L0 8.44365L4.94975 3.4939Z" fill="#262626"/>
 </svg>

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

@navikt/core/icons/svg/SelectionFilled.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 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.46509C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9512 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86476 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.4651C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9513 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86477 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ShakeHands.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1794 2.30095C11.5578 1.91392 12.1754 1.89816 12.573 2.26539L16.6089 5.99299L22 5.99299L22 12.1017L18.6014 12.1017L12.8839 6.38426L12.884 6.38423L11.4698 4.97002L8.28779 8.15199C7.89726 8.54251 7.2641 8.54251 6.87358 8.15199L6.15851 7.43692L11.1794 2.30095ZM11.4697 7.79847L9.702 9.5662C8.53043 10.7378 6.63094 10.7378 5.45937 9.5662L4.7443 8.85113C3.96951 8.07633 3.96241 6.82235 4.72837 6.03882L4.77319 5.99298L2 5.99298L2.00002 12.5748L10.3952 20.8588C10.587 21.0481 10.8947 21.0502 11.0891 20.8635C11.2901 20.6705 11.2933 20.35 11.0963 20.153L10.0554 19.1121L11.4696 17.6979L11.4696 17.6979L11.4696 17.6979L13.2374 19.4656C13.4327 19.6609 13.7493 19.6609 13.9445 19.4656C14.1398 19.2704 14.1398 18.9538 13.9445 18.7585L12.1768 16.9908L12.1768 16.9908L13.591 15.5766L13.591 15.5766L15.3587 17.3443L16.0658 18.0514C16.2611 18.2467 16.5777 18.2467 16.7729 18.0514C16.9682 17.8562 16.9682 17.5396 16.7729 17.3443L14.2981 14.8695L14.2981 14.8695L15.7123 13.4553L15.7123 13.4553L18.1872 15.9301L18.8943 16.6372C19.0895 16.8325 19.4061 16.8325 19.6014 16.6372C19.7966 16.442 19.7966 16.1254 19.6014 15.9301L11.4697 7.79847ZM6.72837 3.99298L9.74927 0.902851C10.8843 -0.258224 12.7371 -0.3055 13.9299 0.796175L17.3912 3.99299L24 3.993L24 14.1017L20.6014 14.1017L21.0156 14.5159C21.9919 15.4922 21.9919 17.0751 21.0156 18.0514C20.3872 18.6798 19.5076 18.9037 18.7002 18.7233C18.5792 18.9924 18.4082 19.2446 18.1872 19.4656C17.5588 20.094 16.6792 20.3179 15.8717 20.1375C15.7508 20.4066 15.5798 20.6588 15.3587 20.8798C14.7232 21.5154 13.8306 21.7372 13.0156 21.5453C12.8886 21.8227 12.7082 22.0815 12.4745 22.3059C11.4985 23.2433 9.95362 23.2328 8.99042 22.2824L3.12523e-05 13.4111L0 3.99299L6.72837 3.99298Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1794 2.30094C11.5577 1.91392 12.1754 1.89816 12.5729 2.26539L16.6089 5.99298L22 5.99298L22 12.1017L18.6014 12.1017L12.8839 6.38425L12.8839 6.38422L11.4697 4.97001L8.28778 8.15198C7.89726 8.5425 7.26409 8.5425 6.87357 8.15198L6.15851 7.43691L11.1794 2.30094ZM11.4697 7.79846L9.70198 9.56619C8.53042 10.7378 6.63093 10.7378 5.45937 9.56619L4.7443 8.85112C3.9695 8.07632 3.9624 6.82234 4.72837 6.03882L4.77319 5.99297L2 5.99297L2.00002 12.5748L10.3952 20.8588C10.587 21.0481 10.8947 21.0501 11.0891 20.8634C11.2901 20.6704 11.2933 20.35 11.0963 20.153L10.0554 19.1121L11.4696 17.6979L11.4696 17.6979L11.4696 17.6979L13.2374 19.4656C13.4327 19.6609 13.7492 19.6609 13.9445 19.4656C14.1398 19.2703 14.1398 18.9538 13.9445 18.7585L12.1768 16.9908L12.1767 16.9907L13.5909 15.5765L13.591 15.5766L15.3587 17.3443L16.0658 18.0514C16.2611 18.2467 16.5777 18.2467 16.7729 18.0514C16.9682 17.8562 16.9682 17.5396 16.7729 17.3443L14.2981 14.8695L14.2981 14.8694L15.7123 13.4552L15.7123 13.4552L18.1871 15.9301L18.8942 16.6372C19.0895 16.8325 19.4061 16.8325 19.6014 16.6372C19.7966 16.4419 19.7966 16.1254 19.6014 15.9301L11.4697 7.79846ZM6.72837 3.99298L9.74926 0.90285C10.8843 -0.258223 12.7371 -0.3055 13.9299 0.796174L17.3911 3.99299L24 3.99299L24 14.1017L20.6014 14.1017L21.0156 14.5159C21.9919 15.4922 21.9919 17.0751 21.0156 18.0514C20.3872 18.6798 19.5076 18.9037 18.7001 18.7232C18.5792 18.9924 18.4082 19.2446 18.1871 19.4656C17.5588 20.094 16.6792 20.3179 15.8717 20.1375C15.7508 20.4066 15.5798 20.6588 15.3587 20.8798C14.7232 21.5154 13.8306 21.7372 13.0156 21.5453C12.8886 21.8227 12.7082 22.0815 12.4745 22.3059C11.4985 23.2432 9.95361 23.2328 8.99041 22.2824L3.12523e-05 13.4111L0 3.99298L6.72837 3.99298Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SignLanguageFilled.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.5086 4.44167L9.85051 7.56059L17.4967 2.25331C18.1841 1.79227 19.1135 1.97808 19.5727 2.66834C20.0262 3.35018 19.8518 4.2712 19.1808 4.73835L14.6922 7.71684L22.0973 5.19703C22.8899 4.93952 23.7344 5.40175 23.95 6.20983C24.1581 6.98958 23.6973 7.79107 22.9208 8L16.1367 10.1543L20.2828 10.8737C20.6177 10.9502 20.883 11.2066 20.9719 11.5398L22.5038 17.2809C22.7167 18.0787 22.2452 18.8988 21.4507 19.1126C20.6529 19.3272 19.8335 18.8489 19.6244 18.0465L18.5765 14.0237C18.4958 13.714 18.2173 13.4981 17.8986 13.4981L14.6922 13.4981C14.5411 13.4981 14.3962 13.5584 14.2894 13.6656L12.8143 15.1469C12.3081 15.6552 12.1826 16.4318 12.5028 17.0748C12.7845 17.6407 13.3604 17.9981 13.9904 17.9981H17.4437C18.2687 17.9981 18.9375 18.6697 18.9375 19.4981C18.9375 20.3265 18.2687 20.9981 17.4437 20.9981H11.0873C10.3506 20.9981 9.61867 20.8788 8.91976 20.6449L4 18.9981V9.99809L10.2532 2.54219C10.7813 1.9216 11.7103 1.84838 12.3283 2.37865C12.9383 2.90205 13.0185 3.81961 12.5086 4.44167ZM3 9H0V20H3V9Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5086 4.44167L9.85051 7.56059L17.4967 2.25331C18.1841 1.79227 19.1135 1.97808 19.5727 2.66834C20.0262 3.35018 19.8518 4.2712 19.1808 4.73835L14.6922 7.71684L22.0973 5.19704C22.8899 4.93952 23.7344 5.40175 23.95 6.20983C24.1581 6.98958 23.6973 7.79107 22.9208 8L16.1367 10.1543L20.2828 10.8737C20.6177 10.9502 20.883 11.2066 20.9719 11.5398L22.5038 17.2809C22.7167 18.0787 22.2452 18.8988 21.4507 19.1126C20.6529 19.3272 19.8335 18.8489 19.6244 18.0465L18.5765 14.0237C18.4958 13.714 18.2173 13.4981 17.8986 13.4981L14.6922 13.4981C14.5411 13.4981 14.3962 13.5584 14.2894 13.6656L12.8143 15.1469C12.3081 15.6552 12.1826 16.4318 12.5028 17.0748C12.7845 17.6407 13.3604 17.9981 13.9904 17.9981H17.4437C18.2687 17.9981 18.9375 18.6697 18.9375 19.4981C18.9375 20.3265 18.2687 20.9981 17.4437 20.9981H11.0873C10.3506 20.9981 9.61868 20.8788 8.91976 20.6449L4 18.9981V9.99809L10.2532 2.54219C10.7813 1.9216 11.7103 1.84838 12.3283 2.37865C12.9383 2.90205 13.0185 3.81961 12.5086 4.44167ZM3 9H0V20H3V9Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ToothFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.10499 5.11444C1.56281 2.47361 3.58017 0 6.27608 0H7.28952C9.05257 0 10.6824 0.570312 12.0046 1.53652C13.3268 0.570312 14.9567 0 16.7197 0H17.7332C20.4291 0 22.4464 2.47361 21.9043 5.11443L21.1779 8.65251C20.733 10.8194 19.5473 12.6765 17.9178 13.9816L17.3452 18.5455L16.4616 22.9475C16.3387 23.5596 15.801 24 15.1767 24C14.5334 24 13.9852 23.533 13.8829 22.8978L12.9398 17.0385C12.8318 15.8175 12.394 14.1818 11.8704 14.1818C11.323 14.1818 10.8694 15.9696 10.7883 17.1177L9.85795 22.8978C9.75571 23.533 9.2075 24 8.56414 24C7.93982 24 7.40219 23.5596 7.27931 22.9475L6.39564 18.5455L5.79157 13.7308C4.31683 12.4435 3.24849 10.6842 2.83138 8.65252L2.10499 5.11444Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.10499 5.11444C1.56281 2.47361 3.58017 0 6.27608 0H7.28953C9.05257 0 10.6824 0.570312 12.0046 1.53652C13.3268 0.570312 14.9567 0 16.7197 0H17.7332C20.4291 0 22.4464 2.47361 21.9043 5.11444L21.1779 8.65251C20.733 10.8194 19.5473 12.6765 17.9178 13.9816L17.3452 18.5455L16.4616 22.9475C16.3387 23.5596 15.801 24 15.1767 24C14.5334 24 13.9852 23.533 13.8829 22.8978L12.9398 17.0385C12.8318 15.8175 12.394 14.1818 11.8704 14.1818C11.323 14.1818 10.8694 15.9696 10.7883 17.1177L9.85795 22.8978C9.75571 23.533 9.2075 24 8.56414 24C7.93982 24 7.40219 23.5596 7.27931 22.9475L6.39564 18.5455L5.79157 13.7308C4.31683 12.4435 3.24849 10.6842 2.83138 8.65252L2.10499 5.11444Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/WateringCan.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.5 3C15.4049 3 13.7127 4.29773 13.1773 5.99999H18C19.5286 5.99999 20.9237 6.57163 21.9832 7.5128C21.9943 7.39367 22 7.27314 22 7.15143C22 4.91932 20.0479 3 17.5 3ZM17.5 0.999999C14.0464 0.999999 11.1242 3.58224 11.0038 6.93606C10.8099 7.24421 10.6977 7.60899 10.6977 7.99999V11.0465L7.81572 9.79099L4.80976 6.38164C4.37227 5.82567 3.51159 5.88735 3.15786 6.50003L0.134896 11.736C-0.218836 12.3486 0.158084 13.1249 0.858317 13.2257L4.72773 13.8712L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.4829 9.55966C23.815 8.82126 24 8.00711 24 7.15143C24 3.69342 21.0271 0.999999 17.5 0.999999ZM5.35788 10.0275L4.27047 11.7673L2.58823 11.4867L4.19329 8.70662L5.35788 10.0275ZM6.38032 12.5915L12.6977 17.0742V21H22V12C22 9.79085 20.2091 7.99999 18 7.99999H12.6977V14.0994L6.99156 11.6135L6.38032 12.5915Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 3C15.4049 3 13.7127 4.29773 13.1774 6H18C19.5286 6 20.9237 6.57164 21.9832 7.5128C21.9943 7.39367 22 7.27315 22 7.15143C22 4.91932 20.048 3 17.5 3ZM17.5 1C14.0464 1 11.1243 3.58224 11.0039 6.93607C10.8099 7.24421 10.6977 7.609 10.6977 8V11.0465L7.81573 9.791L4.80976 6.38165C4.37227 5.82567 3.5116 5.88736 3.15786 6.50004L0.134897 11.736C-0.218836 12.3487 0.158084 13.1249 0.858318 13.2258L4.72774 13.8712L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.483 9.55967C23.815 8.82127 24 8.00712 24 7.15143C24 3.69343 21.0272 1 17.5 1ZM5.35788 10.0275L4.27048 11.7673L2.58823 11.4867L4.19329 8.70662L5.35788 10.0275ZM6.38032 12.5915L12.6977 17.0742V21H22V12C22 9.79086 20.2092 8 18 8H12.6977V14.0994L6.99156 11.6135L6.38032 12.5915Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/WateringCanFilled.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.5 3C15.4049 3 13.7127 4.29773 13.1773 5.99999H18C19.5286 5.99999 20.9237 6.57163 21.9832 7.5128C21.9943 7.39367 22 7.27314 22 7.15143C22 4.91932 20.0479 3 17.5 3ZM17.5 0.999999C14.0464 0.999999 11.1242 3.58224 11.0038 6.93606C10.8099 7.24421 10.6977 7.60899 10.6977 7.99999V11.0465L7.99999 9.99999L5.99999 14L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.4829 9.55966C23.815 8.82126 24 8.00711 24 7.15143C24 3.69342 21.0271 0.999999 17.5 0.999999ZM5 13.5L0.858317 13.2257C0.158084 13.1249 -0.218836 12.3486 0.134896 11.736L3.15786 6.50003C3.51159 5.88735 4.37227 5.82567 4.80976 6.38164L6.99999 9.49999L5 13.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 3C15.4049 3 13.7127 4.29773 13.1774 6H18C19.5286 6 20.9237 6.57164 21.9832 7.5128C21.9943 7.39367 22 7.27315 22 7.15143C22 4.91932 20.048 3 17.5 3ZM17.5 1C14.0464 1 11.1243 3.58224 11.0039 6.93607C10.8099 7.24421 10.6977 7.609 10.6977 8V11.0465L8 10L6 14L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.483 9.55967C23.815 8.82127 24 8.00712 24 7.15143C24 3.69343 21.0272 1 17.5 1ZM5 13.5L0.858318 13.2258C0.158084 13.1249 -0.218836 12.3487 0.134897 11.736L3.15786 6.50004C3.5116 5.88736 4.37227 5.82567 4.80976 6.38165L7 9.5L5 13.5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/selection.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 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.46509C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9512 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86476 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0ZM12 2C11.4872 2 11.0645 2.38604 11.0067 2.88338L11 3V16.5806L5.94903 13.4698L5.86435 13.4147C5.35635 13.0652 4.66307 13.0656 4.31671 13.4127C3.90496 13.8253 3.8554 14.3776 4.17241 14.8678L4.25207 14.9798L9.71801 21.999H20.689L21.995 14.561L21.9997 14.4586C22.0175 12.9968 21.0244 11.7439 19.7267 11.483L19.563 11.4556L13 10.814V3C13 2.48716 12.614 2.06449 12.1166 2.00673L12 2Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.4651C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9513 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86477 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0ZM12 2C11.4872 2 11.0645 2.38604 11.0067 2.88338L11 3V16.5806L5.94903 13.4698L5.86435 13.4147C5.35635 13.0653 4.66307 13.0656 4.31672 13.4127C3.90496 13.8253 3.8554 14.3776 4.17241 14.8679L4.25207 14.9798L9.71801 21.999H20.689L21.995 14.561L21.9997 14.4586C22.0175 12.9968 21.0244 11.744 19.7267 11.483L19.563 11.4556L13 10.814V3C13 2.48716 12.614 2.06449 12.1166 2.00673L12 2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/tsconfig-esm.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "outDir": "./esm",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"]
-}

@navikt/core/icons/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/core/icons/tsconfig.json

@@ -1,13 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
     "outDir": "./cjs",
-    "target": "es2015",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"]
+    "module": "commonjs"
+  }
 }

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -29,16 +29,15 @@
   "scripts": {
     "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",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.5.4",
+    "@navikt/ds-icons": "^0.5.6",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.14.3",

@navikt/core/react/src/alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import {
   ErrorFilled,
@@ -6,8 +6,6 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
-import AlertContent, { AlertContentType } from "./AlertContent";
-import AlertTitle, { AlertTitleType } from "./AlertTitle";
 import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -54,15 +52,6 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
-export const AlertContext = createContext<AlertContextProps | null>(null);
-interface AlertComponent
-  extends React.ForwardRefExoticComponent<
-    AlertProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Title: AlertTitleType;
-  Content: AlertContentType;
-}
-
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {
@@ -100,9 +89,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
       </BodyLong>
     </div>
   )
-) as AlertComponent;
-
-Alert.Title = AlertTitle;
-Alert.Content = AlertContent;
+);
 
 export default Alert;

@navikt/core/react/src/alert/AlertContent.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { BodyLong } from "..";
-import { AlertContext } from ".";
-
-export interface AlertContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertContentType = React.ForwardRefExoticComponent<
-  AlertContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertContent: AlertContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertContent has to be wrapped in <Alert />");
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="div"
-        className={cl(className, "navds-alert__content")}
-        ref={ref}
-        size={context.size ?? "medium"}
-      >
-        {children}
-      </BodyLong>
-    );
-  }
-);
-
-export default AlertContent;

@navikt/core/react/src/alert/AlertTitle.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { AlertContext, Heading } from "..";
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertTitleType = React.ForwardRefExoticComponent<
-  AlertTitleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertTitle: AlertTitleType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertTitle has to be wrapped in <Alert />");
-      return null;
-    }
-
-    const size = context.size === "medium" ? "small" : "xsmall";
-
-    return (
-      <Heading
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-alert__title")}
-        as="div"
-        size={size}
-      >
-        {children}
-      </Heading>
-    );
-  }
-);
-
-export default AlertTitle;

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -23,7 +23,7 @@ const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
       <div
         ref={ref}
         className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--s": props.size === "small",
+          "navds-confirmation-panel--small": props.size === "small",
           "navds-confirmation-panel--error": !!props.error,
           "navds-confirmation-panel--checked": !!props.checked,
         })}

@navikt/core/react/src/form/TextField.tsx

@@ -84,7 +84,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
           className,
           "navds-text-field__input",
           "navds-body-short",
-          `navds-body-${size ?? "m"}`
+          `navds-body-${size ?? "medium"}`
         )}
         size={htmlSize}
       />

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 import { Heading, BodyShort } from "../..";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -23,6 +24,13 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
 }
 
+interface ErrorSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: ErrorSummaryItemType;
+}
+
 const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
@@ -62,6 +70,8 @@ const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       </div>
     );
   }
-);
+) as ErrorSummaryComponent;
+
+ErrorSummary.Item = ErrorSummaryItem;
 
 export default ErrorSummary;

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -10,11 +10,12 @@ export interface ErrorSummaryItemProps
   children: React.ReactNode;
 }
 
-export type ErrorType = OverridableComponent<
+export type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
-const ErrorSummaryItem: ErrorType = forwardRef(
+
+const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

@navikt/core/react/src/form/error-summary/index.ts

@@ -1,5 +1,2 @@
-export { default as ErrorSummary, ErrorSummaryProps } from "./ErrorSummary";
-export {
-  default as ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./ErrorSummaryItem";
+export { default as ErrorSummary } from "./ErrorSummary";
+export * from "./ErrorSummary";

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.mdx

@@ -1,27 +1,27 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { ErrorSummary, ErrorSummaryItem } from "../index";
+import { ErrorSummary } from "../index";
 
 <Meta title="ds-react/form/errorsummary/intro" />
 
 # Hvordan ta i bruk ErrorSummary
 
-`href` på `ErrorSummaryItem` linker til id som er satt på skjema-elementer.
+`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.
 
 ```jsx
 <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
   <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>
 
@@ -34,11 +34,11 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
   heading="Eiusmod est cillum mollit pariatur deserunt"
   headingTag="h3"
 >
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
@@ -46,9 +46,9 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
     heading="Eiusmod est cillum mollit pariatur deserunt"
     headingTag="h3"
   >
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react/types-6-0";
-import { ErrorSummary, ErrorSummaryItem } from "..";
+import { ErrorSummary } from "..";
 export default {
   title: "ds-react/form/errorsummary",
   component: ErrorSummary,
@@ -11,17 +11,17 @@ export const All = () => {
     <>
       <h1>Error summary</h1>
       <ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
       <h2>size small</h2>
       <ErrorSummary size="small" heading="Feiloppsummering komponent">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
     </>
   );

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

@@ -10,21 +10,9 @@ export {
   FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export {
-  SearchField,
-  SearchFieldProps,
-  SearchFieldInput,
-  SearchFieldInputProps,
-  SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./search-field";
+export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
-export {
-  ErrorSummary,
-  ErrorSummaryProps,
-  ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./error-summary";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
 export {

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -3,6 +3,11 @@ import React, { forwardRef } from "react";
 import { BodyShort, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps, useFormField } from "../useFormField";
+import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
+import SearchFieldClearButton, {
+  SearchFieldClearButtonType,
+} from "./SearchFieldClearButton";
+import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
 
 export interface SearchFieldContextProps {
   inputProps: {
@@ -35,6 +40,15 @@ export interface SearchFieldProps
   label: React.ReactNode;
 }
 
+interface SearchFieldComponent
+  extends React.ForwardRefExoticComponent<
+    SearchFieldProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchFieldButtonType;
+  Clear: SearchFieldClearButtonType;
+  Input: SearchFieldInputType;
+}
+
 const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
   (props, ref) => {
     const {
@@ -105,6 +119,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
       </div>
     );
   }
-);
+) as SearchFieldComponent;
+
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;
 
 export default SearchField;

@navikt/core/react/src/form/search-field/SearchFieldButton.tsx

@@ -16,7 +16,11 @@ export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
+export type SearchFieldButtonType = React.ForwardRefExoticComponent<
+  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldButton: SearchFieldButtonType = forwardRef(
   ({ className, variant = "primary", disabled, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/SearchFieldClearButton.tsx

@@ -16,29 +16,34 @@ export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldClearButton = forwardRef<
-  HTMLButtonElement,
-  SearchFieldClearButtonProps
->(({ className, variant = "secondary", disabled, ...rest }, ref) => {
-  const searchField = useContext(SearchFieldContext);
+export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
+  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
 
-  if (searchField === null) {
-    console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
-    return null;
+const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
+  ({ className, variant = "secondary", disabled, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn(
+        "SearchFieldClearButton has to be wrapped in <SearchField />"
+      );
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-search-field__clear-button")}
+        size={size}
+        variant={variant}
+        disabled={disabled ?? inputProps?.disabled}
+      />
+    );
   }
-
-  const { size, inputProps } = searchField;
-
-  return (
-    <Button
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-search-field__clear-button")}
-      size={size}
-      variant={variant}
-      disabled={disabled ?? inputProps?.disabled}
-    />
-  );
-});
+);
 
 export default SearchFieldClearButton;

@navikt/core/react/src/form/search-field/SearchFieldInput.tsx

@@ -5,7 +5,11 @@ import { SearchFieldContext } from "./SearchField";
 export interface SearchFieldInputProps
   extends InputHTMLAttributes<HTMLInputElement> {}
 
-const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
+export type SearchFieldInputType = React.ForwardRefExoticComponent<
+  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const SearchFieldInput: SearchFieldInputType = forwardRef(
   ({ className, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/index.ts

@@ -1,13 +1,2 @@
 export { default as SearchField, SearchFieldProps } from "./SearchField";
-export {
-  default as SearchFieldInput,
-  SearchFieldInputProps,
-} from "./SearchFieldInput";
-export {
-  default as SearchFieldButton,
-  SearchFieldButtonProps,
-} from "./SearchFieldButton";
-export {
-  default as SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./SearchFieldClearButton";
+export * from "./SearchField";

@navikt/core/react/src/form/search-field/stories/search-field-example.tsx

@@ -1,30 +1,25 @@
 import React, { useState } from "react";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
   const [value, setValue] = useState("");
 
   return (
     <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
-      <SearchFieldInput
+      <SearchField.Input
         value={value}
         onChange={(e) => setValue(e.target.value)}
       />
       {!!value && (
-        <SearchFieldClearButton onClick={() => setValue("")}>
+        <SearchField.Clear onClick={() => setValue("")}>
           <Close />
           Tøm
-        </SearchFieldClearButton>
+        </SearchField.Clear>
       )}
-      <SearchFieldButton>
+      <SearchField.Button>
         <Search /> Søk
-      </SearchFieldButton>
+      </SearchField.Button>
     </SearchField>
   );
 };

@navikt/core/react/src/form/search-field/stories/search-field.stories.mdx

@@ -1,10 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 import { Example } from "./search-field-example.tsx";
 
@@ -22,10 +17,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -34,10 +29,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -52,10 +47,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   description="Ea cupidatat eu sunt commodo"
   hideLabel
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -65,10 +60,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     description="Ea cupidatat eu sunt commodo"
     hideLabel
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -81,10 +76,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   size="small"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -95,10 +90,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     size="small"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -111,10 +106,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   error="Error message"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -125,31 +120,31 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     error="Error message"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
 ## ClearButton
 
-Man kan bruke `SearchFieldClearButton` for å håndtere clearing av value i `<input />`. For å bruke denne
-kreves det da at `SearchFieldInput` er controlled slik at man styrer state selv slik som eksemplet under.
+Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
+kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
 Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
 den når inputvalue ikke er empty.
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
+  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
   {!!value && (
-    <SearchFieldClearButton onClick={() => setValue("")}>
+    <SearchField.Clear onClick={() => setValue("")}>
       <Close /> Tøm
-    </SearchFieldClearButton>
+    </SearchField.Clear>
   )}
-  <SearchFieldButton>
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from "react";
 import { Meta } from "@storybook/react/types-6-0";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 import { Fieldset } from "../..";
 export default {
   title: "ds-react/form/search-field",
@@ -22,19 +17,19 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h1>SearchField w clearsearch</h1>
@@ -42,25 +37,25 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close />
-        </SearchFieldClearButton>
-        <SearchFieldButton onClick={() => setShow(!show)}>
+        </SearchField.Clear>
+        <SearchField.Button onClick={() => setShow(!show)}>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <h2>Hidelabel</h2>
@@ -69,10 +64,10 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         hideLabel
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField small</h2>
@@ -81,11 +76,11 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -93,25 +88,25 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -119,14 +114,14 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldButton>
+        </SearchField.Clear>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
 
       <h2>SearchField w error</h2>
@@ -135,20 +130,20 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField in Fieldset</h2>
@@ -159,20 +154,20 @@ export const All = () => {
           error="Errormsg"
           hideLabel
         >
-          <SearchFieldInput />
-          <SearchFieldButton>
+          <SearchField.Input />
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
+          </SearchField.Button>
         </SearchField>
         <SearchField
           label="Mollit eiusmod"
           description="Ea cupidatat eu sunt commodo"
           hideLabel
         >
-          <SearchFieldButton>
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
-          <SearchFieldInput />
+          </SearchField.Button>
+          <SearchField.Input />
         </SearchField>
       </Fieldset>
     </>

@navikt/core/react/src/form/stories/confirmation-panel.stories.mdx

@@ -22,7 +22,7 @@ import { ConfirmationPanelExample } from "./live-examples";
 
 ## Størrelser
 
-Kommer i størrelsene "m" og "s".
+Kommer i størrelsene "medium" og "small".
 
 ```jsx
 <ConfirmationPanel

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

@@ -2,7 +2,6 @@ export * from "./accordion";
 export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
-export * from "./copy-to-clipboard";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";
@@ -15,6 +14,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
 export * from "./tag";
+export * from "./table";
 export * from "./typography";
 export * from "./util";
 

@navikt/core/react/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { SpeechBubble, Bubble } from "../index";
+import { SpeechBubble } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { Illustration } from "./illustration";
 
 export default {
   title: "ds-react/speechbubble",
   component: SpeechBubble,
-  subcomponents: { Bubble },
 } as Meta;
 
 export const All = () => {

@navikt/core/react/src/table/Body.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface BodyType
+  extends React.ForwardRefExoticComponent<
+    BodyProps & React.RefAttributes<HTMLTableSectionElement>
+  > {}
+
+const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
+  <tbody {...rest} ref={ref} className={cl("navds-table__body", className)} />
+));
+
+export default Body;

@navikt/core/react/src/table/DataCell.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+
+export interface DataCellType
+  extends React.ForwardRefExoticComponent<
+    DataCellProps & React.RefAttributes<HTMLTableCellElement>
+  > {}
+
+const DataCell: DataCellType = forwardRef(({ className, ...rest }, ref) => (
+  <td {...rest} ref={ref} className={cl("navds-table__cell", className)} />
+));
+
+export default DataCell;

@navikt/core/react/src/table/Header.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface HeaderType
+  extends React.ForwardRefExoticComponent<
+    HeaderProps & React.RefAttributes<HTMLTableSectionElement>
+  > {}
+
+const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
+  <thead {...rest} ref={ref} className={cl("navds-table__header", className)} />
+));
+
+export default Header;

@navikt/core/react/src/table/HeaderCell.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+
+export interface HeaderCellType
+  extends React.ForwardRefExoticComponent<
+    HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
+  > {}
+
+const HeaderCell: HeaderCellType = forwardRef(({ className, ...rest }, ref) => (
+  <th {...rest} ref={ref} className={cl("navds-table__cell", className)} />
+));
+
+export default HeaderCell;

@navikt/core/react/src/table/Row.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+
+export interface RowType
+  extends React.ForwardRefExoticComponent<
+    RowProps & React.RefAttributes<HTMLTableRowElement>
+  > {}
+
+const Row: RowType = forwardRef(({ className, ...rest }, ref) => (
+  <tr {...rest} ref={ref} className={cl("navds-table__row", className)} />
+));
+
+export default Row;

@navikt/core/react/src/table/Table.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import Header, { HeaderType } from "./Header";
+import Body, { BodyType } from "./Body";
+import Row, { RowType } from "./Row";
+import HeaderCell, { HeaderCellType } from "./HeaderCell";
+import DataCell, { DataCellType } from "./DataCell";
+
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  /**
+   * Changes padding
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+}
+
+export interface TableType
+  extends React.ForwardRefExoticComponent<
+    TableProps & React.RefAttributes<HTMLTableElement>
+  > {
+  Header: HeaderType;
+  Body: BodyType;
+  Row: RowType;
+  DataCell: DataCellType;
+  HeaderCell: HeaderCellType;
+}
+
+const Table = forwardRef(({ className, size = "medium", ...rest }, ref) => (
+  <table
+    {...rest}
+    ref={ref}
+    className={cl("navds-table", `navds-table--${size}`, className)}
+  />
+)) as TableType;
+
+Table.Header = Header;
+Table.Body = Body;
+Table.Row = Row;
+Table.HeaderCell = HeaderCell;
+Table.DataCell = DataCell;
+
+export default Table;

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

@@ -0,0 +1,2 @@
+export { default as Table } from "./Table";
+export * from "./Table";

@navikt/core/react/src/table/stories/table.stories.mdx

@@ -0,0 +1,112 @@
+import { Table } from "../index";
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/table/intro" />
+
+# Hvordan ta i bruk Table
+
+Komponenten er fortsatt WIP. Dette vil si at komponenten ikke er tilpasset for eks ikoner, inputelementer og lignende.
+Dette er noe vi har planer om å få på plass etterhvert.
+
+```jsx
+<Table>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>ID</Table.HeaderCell>
+      <Table.HeaderCell>Fornavn</Table.HeaderCell>
+      <Table.HeaderCell>Etternavn</Table.HeaderCell>
+      <Table.HeaderCell>Rolle</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.HeaderCell>1</Table.HeaderCell>
+      <Table.DataCell>Jean-Luc</Table.DataCell>
+      <Table.DataCell>Picard</Table.DataCell>
+      <Table.DataCell>Kaptein</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>2</Table.HeaderCell>
+      <Table.DataCell>William</Table.DataCell>
+      <Table.DataCell>Riker</Table.DataCell>
+      <Table.DataCell>Kommandør</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>3</Table.HeaderCell>
+      <Table.DataCell>Geordi</Table.DataCell>
+      <Table.DataCell>La Forge</Table.DataCell>
+      <Table.DataCell>Sjefsingeniør</Table.DataCell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
+
+<Canvas>
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>
+
+## Sizing
+
+Størrelse kan justeres med `size`-proppen. Valg: `medium | small`
+
+<Canvas>
+  <Table size="small">
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>

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

@@ -0,0 +1,139 @@
+import React from "react";
+import { Table } from "../index";
+import { Alert, Link } from "@navikt/ds-react";
+
+export default {
+  title: "ds-react/table",
+  component: Table,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>Table</h1>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Fornavn</Table.HeaderCell>
+            <Table.HeaderCell>Etternavn</Table.HeaderCell>
+            <Table.HeaderCell>Rolle</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.HeaderCell>1</Table.HeaderCell>
+            <Table.DataCell>Jean-Luc</Table.DataCell>
+            <Table.DataCell>Picard</Table.DataCell>
+            <Table.DataCell>Kaptein</Table.DataCell>
+          </Table.Row>
+          <Table.Row>
+            <Table.HeaderCell>2</Table.HeaderCell>
+            <Table.DataCell>William</Table.DataCell>
+            <Table.DataCell>Riker</Table.DataCell>
+            <Table.DataCell>Kommandør</Table.DataCell>
+          </Table.Row>
+          <Table.Row>
+            <Table.HeaderCell>3</Table.HeaderCell>
+            <Table.DataCell>Geordi</Table.DataCell>
+            <Table.DataCell>La Forge</Table.DataCell>
+            <Table.DataCell>Sjefsingeniør</Table.DataCell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <h2>Small Table</h2>
+      <Table size="small">
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Fornavn</Table.HeaderCell>
+            <Table.HeaderCell>Etternavn</Table.HeaderCell>
+            <Table.HeaderCell>Rolle</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.HeaderCell>1</Table.HeaderCell>
+            <Table.DataCell>Jean-Luc</Table.DataCell>
+            <Table.DataCell>Picard</Table.DataCell>
+            <Table.DataCell>Kaptein</Table.DataCell>
+          </Table.Row>
+          <Table.Row>
+            <Table.HeaderCell>2</Table.HeaderCell>
+            <Table.DataCell>William</Table.DataCell>
+            <Table.DataCell>Riker</Table.DataCell>
+            <Table.DataCell>Kommandør</Table.DataCell>
+          </Table.Row>
+          <Table.Row>
+            <Table.HeaderCell>3</Table.HeaderCell>
+            <Table.DataCell>Geordi</Table.DataCell>
+            <Table.DataCell>La Forge</Table.DataCell>
+            <Table.DataCell>Sjefsingeniør</Table.DataCell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <h2>Table with divs</h2>
+      <Alert variant="warning">
+        Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
+        -markup er det svært viktig at man supplerer elementene med{" "}
+        <Link href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html">
+          riktige
+        </Link>{" "}
+        role-attributter og display-stiler for å bevare den semantiske verdien i
+        tabellene. Vi anbefaler fortsatt å ikke ta i bruk denne metoden hvis
+        mulig, da nettleseren ikke kan tolke tabellen like bra uten riktig
+        markup.
+      </Alert>
+      <div className="navds-table" role="table">
+        <div className="navds-table__header" role="rowgroup">
+          <div className="navds-table__row" role="row">
+            <div className="navds-table__cell" role="columnheader">
+              Fornavn
+            </div>
+            <div className="navds-table__cell" role="columnheader">
+              Etternavn
+            </div>
+            <div className="navds-table__cell" role="columnheader">
+              Rolle
+            </div>
+          </div>
+        </div>
+        <div className="navds-table__body" role="rowgroup">
+          <div className="navds-table__row" role="row">
+            <div className="navds-table__cell" role="cell">
+              Jean-Luc
+            </div>
+            <div className="navds-table__cell" role="cell">
+              Picard
+            </div>
+            <div className="navds-table__cell" role="cell">
+              Kaptein
+            </div>
+          </div>
+          <div className="navds-table__row" role="row">
+            <div className="navds-table__cell" role="cell">
+              William
+            </div>
+            <div className="navds-table__cell" role="cell">
+              Riker
+            </div>
+            <div className="navds-table__cell" role="cell">
+              Kommandør
+            </div>
+          </div>
+          <div className="navds-table__row" role="row">
+            <div className="navds-table__cell" role="cell">
+              Geordi
+            </div>
+            <div className="navds-table__cell" role="cell">
+              La Forge
+            </div>
+            <div className="navds-table__cell" role="cell">
+              Sjefsingeniør
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

@navikt/core/react/src/typography/stories/typography.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
+import { Alert, Heading, BodyLong } from "@navikt/ds-react";
 
 <Meta title="ds-react/Typography/intro" />
 
@@ -21,15 +22,15 @@ Denne stylingen vil overskrive default variablene og tilpasse font-size.
 ```css
 /* autogenerated fix for 18px root-font-size*/
 :root {
-  --navds-font-size-title-2xl: 2.2222222222222223rem;
-  --navds-font-size-title-xl: 1.7777777777777777rem;
-  --navds-font-size-title-l: 1.5555555555555556rem;
-  --navds-font-size-title-m: 1.3333333333333333rem;
-  --navds-font-size-title-s: 1.1111111111111112rem;
-  --navds-font-size-xl: 1.1111111111111112rem;
-  --navds-font-size-l: 1rem;
-  --navds-font-size-m: 0.8888888888888888rem;
-  --navds-font-size-s: 0.7777777777777778rem;
+  --navds-font-size-heading-2xlarge: 2.2222222222222223rem;
+  --navds-font-size-heading-xlarge: 1.7777777777777777rem;
+  --navds-font-size-heading-large: 1.5555555555555556rem;
+  --navds-font-size-heading-medium: 1.3333333333333333rem;
+  --navds-font-size-heading-small: 1.1111111111111112rem;
+  --navds-font-size-xlarge: 1.1111111111111112rem;
+  --navds-font-size-large: 1rem;
+  --navds-font-size-medium: 0.8888888888888888rem;
+  --navds-font-size-small: 0.7777777777777778rem;
 }
 ```
 
@@ -37,3 +38,46 @@ Vi anbefaler å før eller siden endre tilbake til default root font size da des
 komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
 forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
 for å tilpasse systemet for alle de forskjellige variantene av font size på root.
+
+## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
+
+De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
+
+### Overskrifter
+
+Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
+
+En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
+
+`<Sidetittel> -> <Heading size="2xlarge">`
+
+`<Innholdstittel> -> <Heading size="xlarge">`
+
+`<Systemtittel> -> <Heading size="medium">`
+
+`<Undertittel> -> <Heading size="small">`
+
+<Alert variant="warning">
+  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
+  hierarkiet (h1-h6).
+</Alert>
+
+### Brødtekst
+
+De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
+
+Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
+
+`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
+
+### Andre komponenter
+
+`<Ingress> -> <Ingress>`
+
+`<Element> -> <Label>`
+
+`<UndertekstBold> -> <Detail>`
+
+`<Undertekst> -> <Detail size="small">`
+
+`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.

@navikt/core/react/tsconfig-esm.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}

@navikt/core/react/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/core/react/tsconfig.json

@@ -1,14 +1,9 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
     "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
+    "noImplicitAny": false
   },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+  "include": ["./src"]
 }

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",

@navikt/core/tokens/src/index.js

@@ -140,31 +140,31 @@ module.exports = {
       line: {
         height: {
           heading: {
-            "2xl": { value: getFontSize(52) },
-            xl: { value: getFontSize(40) },
-            l: { value: getFontSize(36) },
-            m: { value: getFontSize(32) },
-            s: { value: getFontSize(28) },
-            xs: { value: getFontSize(24) },
+            "2xlarge": { value: getFontSize(52) },
+            xlarge: { value: getFontSize(40) },
+            large: { value: getFontSize(36) },
+            medium: { value: getFontSize(32) },
+            small: { value: getFontSize(28) },
+            xsmall: { value: getFontSize(24) },
           },
-          xl: { value: getFontSize(28) },
-          l: { value: getFontSize(24) },
-          m: { value: getFontSize(20) },
+          xlarge: { value: getFontSize(28) },
+          large: { value: getFontSize(24) },
+          medium: { value: getFontSize(20) },
         },
       },
       size: {
         heading: {
-          "2xl": { value: getFontSize(40) },
-          xl: { value: getFontSize(32) },
-          l: { value: getFontSize(28) },
-          m: { value: getFontSize(24) },
-          s: { value: getFontSize(20) },
-          xs: { value: getFontSize(18) },
+          "2xlarge": { value: getFontSize(40) },
+          xlarge: { value: getFontSize(32) },
+          large: { value: getFontSize(28) },
+          medium: { value: getFontSize(24) },
+          small: { value: getFontSize(20) },
+          xsmall: { value: getFontSize(18) },
         },
-        xl: { value: getFontSize(20) },
-        l: { value: getFontSize(18) },
-        m: { value: getFontSize(16) },
-        s: { value: getFontSize(14) },
+        xlarge: { value: getFontSize(20) },
+        large: { value: getFontSize(18) },
+        medium: { value: getFontSize(16) },
+        small: { value: getFontSize(14) },
       },
       weight: {
         bold: { value: "600" },

@navikt/internal/css/copy-to-clipboard.css

@@ -1,3 +1,3 @@
-.navds-copy-to-clipboard__popover {
+.navdsi-copy-to-clipboard__popover {
   padding: var(--navds-spacing-1);
 }

@navikt/internal/css/divider.css

@@ -0,0 +1,5 @@
+.navdsi-divider {
+  margin: var(--navds-spacing-3) 0;
+  border: none;
+  border-bottom: 1px solid var(--navds-color-gray-40);
+}

@navikt/internal/css/dropdown.css

@@ -0,0 +1,56 @@
+.navdsi-dropdown__menu {
+  overflow: hidden;
+  padding: var(--navds-spacing-4) 0;
+  color: var(--navds-color-darkgray);
+  width: 27ch;
+  max-height: 616px;
+  overflow-y: auto;
+}
+
+.navdsi-dropdown__menu > :not(.navdsi-divider):not(.navdsi-dropdown__list) {
+  margin: 0 var(--navds-spacing-4) var(--navds-spacing-3);
+}
+
+.navdsi-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navdsi-dropdown__list-item {
+  margin: 0;
+}
+
+.navdsi-dropdown__list-heading {
+  margin: 0 var(--navds-spacing-4) var(--navds-spacing-4);
+}
+
+.navdsi-dropdown__item {
+  border: none;
+  margin: 0;
+  overflow: visible;
+  background: transparent;
+  color: var(--navds-color-text-link);
+  font: inherit;
+  text-decoration: none;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+}
+
+.navdsi-dropdown__item:hover {
+  background-color: var(--navds-color-blue-10);
+}
+
+.navdsi-dropdown__item:active {
+  background-color: var(--navds-color-blue-20);
+}
+
+.navdsi-dropdown__item:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-color-blue-80);
+}

@navikt/internal/css/header.css

@@ -2,63 +2,81 @@
   --navdsi-header-color-background: var(--navds-color-darkgray);
   --navdsi-header-color-border: var(--navds-color-gray-40);
   --navdsi-header-color-text: var(--navds-color-text-inverse);
+  --navdsi-header-focus: inset 0 0 0 2px var(--navds-color-blue-10);
 }
 
-/**************************
- * .navdsi-header *
- **************************/
-
 .navdsi-header {
   display: flex;
-  align-items: center;
+  align-self: stretch;
   background: var(--navdsi-header-color-background);
-  color: var(--navdsi-header-color-text);
-  max-width: 100vw;
-  min-height: 50px;
+  min-height: var(--navds-spacing-12);
 }
 
-.navdsi-header__column {
-  display: flex;
-  align-items: center;
-}
-
-/**************************
-  * .navdsi-header__title *
-  **************************/
-
 .navdsi-header__title {
-  padding: 0 var(--navds-spacing-6);
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--navds-spacing-5) 0 var(--navds-spacing-6);
   border-right: 1px solid var(--navdsi-header-color-border);
   display: flex;
-  align-self: stretch;
   align-items: center;
   text-decoration: none;
   margin: 0;
   color: var(--navdsi-header-color-text);
-  font-size: var(--navds-font-size-l);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-l);
 }
 
-.navdsi-header__title:focus {
-  box-shadow: inset var(--navds-shadow-focus-on-dark);
-  outline: none;
+button.navdsi-header__title {
+  cursor: pointer;
 }
 
-/**************************
-  * .navdsi-header__user *
-  **************************/
-
 .navdsi-header__user {
   color: var(--navdsi-header-color-text);
-  padding: 0 var(--navds-spacing-6);
-  margin-left: auto;
+  padding: 0 var(--navds-spacing-5);
   border-left: 1px solid var(--navdsi-header-color-border);
   display: flex;
-  align-self: stretch;
   align-items: center;
 }
 
-.navdsi-header__name.navds-body-short {
-  margin-right: var(--navds-spacing-4);
+.navdsi-header__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--navds-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--navds-spacing-2);
+  border-left: 1px solid var(--navdsi-header-color-border);
+  color: var(--navdsi-header-color-text);
+}
+
+a.navdsi-header__title:hover,
+button.navdsi-header__title:hover,
+.navdsi-header__button:hover {
+  background-color: var(--navds-color-gray-80);
+}
+
+.navdsi-header__title:focus,
+.navdsi-header__button:focus {
+  box-shadow: var(--navdsi-header-focus);
+  outline: none;
+}
+
+a.navdsi-header__title:active,
+button.navdsi-header__title:active,
+.navdsi-header__button:active {
+  background-color: var(--navds-color-gray-60);
+}
+
+.navdsi-header__user-button {
+  padding-left: var(--navds-spacing-5);
+  gap: var(--navds-spacing-4);
 }

@navikt/internal/css/index.css

@@ -1 +1,4 @@
+@import "copy-to-clipboard.css";
+@import "divider.css";
+@import "dropdown.css";
 @import "header.css";

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.2.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.2.1",
+  "version": "0.6.0",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -29,12 +29,16 @@
   "scripts": {
     "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"
+    "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-react": "^0.10.2",
-    "classnames": "^2.3.1"
+    "@navikt/ds-icons": "^0.5.6",
+    "@navikt/ds-react": "^0.11.0",
+    "@popperjs/core": "^2.10.1",
+    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
+    "react-merge-refs": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "^3.0.2"

@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -1,10 +1,10 @@
 import { Copy } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import copy from "copy-to-clipboard";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Button, ButtonProps, Popover } from "..";
+import { BodyShort, Button, ButtonProps, Popover } from "@navikt/ds-react";
+import { Placement } from "@popperjs/core";
 
 export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   /**
@@ -66,7 +66,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           ref={mergedRef}
           variant="secondary"
           title={title}
-          className={cl("navds-copy-to-clipboard", className)}
+          className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
           {...rest}
@@ -76,7 +76,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
             role="img"
             aria-label="Fil ikon for kopiering"
           />
-          {children ? children : <span className="sr-only">{title}</span>}
+          {children ? children : <span className="navds-sr-only">{title}</span>}
         </Button>
         <Popover
           role="alert"
@@ -85,7 +85,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClose={() => setOpenPopover(false)}
           placement={popoverPlacement}
           arrow={false}
-          className="navds-copy-to-clipboard__popover"
+          className="navdsi-copy-to-clipboard__popover"
         >
           <BodyShort size={size} as="span">
             {popoverText}

@navikt/internal/react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { CopyToClipboard } from "../index";
 
 export default {
-  title: "@ds-react/copy-to-clipboard",
+  title: "ds-react-internal/copy-to-clipboard",
   component: CopyToClipboard,
 };
 

@navikt/internal/react/src/copy-to-clipboard/stories/copy.stories.mdx

@@ -2,7 +2,7 @@ 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" />
+<Meta title="ds-react-internal/copy-to-clipboard/intro" />
 
 # Hvordan ta i bruk CopyToClipboard
 

@navikt/internal/react/src/divider/Divider.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {}
+
+const Divider = forwardRef<HTMLHRElement, DividerProps>(
+  ({ className, ...rest }, ref) => (
+    <hr {...rest} ref={ref} className={cl("navdsi-divider", className)} />
+  )
+);
+
+export default Divider;

@navikt/internal/react/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from "./Divider";
+export * from "./Divider";

@navikt/internal/react/src/dropdown/Dropdown.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useState } from "react";
+import Toggle, { ToggleType } from "./Toggle";
+import Menu, { MenuType } from "./Menu";
+
+export interface DropdownType extends React.FC {
+  Toggle: ToggleType;
+  Menu: MenuType;
+}
+
+export interface DropdownContextType {
+  readonly isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  readonly anchorEl: Element | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
+}
+
+export const DropdownContext = createContext<DropdownContextType | null>(null);
+
+const Dropdown = (({ children }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+
+  return (
+    <DropdownContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        anchorEl,
+        setAnchorEl,
+      }}
+    >
+      {children}
+    </DropdownContext.Provider>
+  );
+}) as DropdownType;
+
+Dropdown.Toggle = Toggle;
+Dropdown.Menu = Menu;
+
+export default Dropdown;

@navikt/internal/react/src/dropdown/Menu/GroupedList/Heading.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLDetailsElement> {
+  /**
+   * Heading
+   */
+  children: React.ReactNode;
+}
+
+export type HeadingType = React.ForwardRefExoticComponent<
+  HeadingProps & React.RefAttributes<HTMLElement>
+>;
+
+const Heading: HeadingType = forwardRef(({ className, ...rest }, ref) => (
+  <dt
+    {...rest}
+    ref={ref}
+    className={cl(
+      "navdsi-dropdown__list-heading",
+      "navds-heading",
+      "navds-heading--xsmall",
+      className
+    )}
+  />
+));
+
+export default Heading;

@navikt/internal/react/src/dropdown/Menu/GroupedList/Item.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "@navikt/ds-react";
+
+export interface ItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export type ItemType = OverridableComponent<ItemProps, HTMLButtonElement>;
+
+const Item: ItemType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => (
+    <dd className="navdsi-dropdown__list-item">
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navdsi-dropdown__item",
+          "navds-body-short",
+          "navds-body-short--small",
+          className
+        )}
+      />
+    </dd>
+  )
+);
+
+export default Item;

@navikt/internal/react/src/dropdown/Menu/GroupedList/index.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import Heading, { HeadingType } from "./Heading";
+import Item, { ItemType } from "./Item";
+
+export interface GroupedListProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface GroupedListType
+  extends React.ForwardRefExoticComponent<
+    GroupedListProps & React.RefAttributes<HTMLDListElement>
+  > {
+  Heading: HeadingType;
+  Item: ItemType;
+}
+
+const DescriptionList = forwardRef(({ className, children, ...rest }, ref) => (
+  <dl {...rest} ref={ref} className={cl("navdsi-dropdown__list", className)}>
+    {children}
+  </dl>
+)) as GroupedListType;
+
+DescriptionList.Heading = Heading;
+DescriptionList.Item = Item;
+
+export default DescriptionList;

@navikt/internal/react/src/dropdown/Menu/List/Item.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "@navikt/ds-react";
+
+export interface ItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export type ItemType = OverridableComponent<ItemProps, HTMLButtonElement>;
+
+const Item: ItemType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => (
+    <li className="navdsi-dropdown__list-item">
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navdsi-dropdown__item",
+          "navds-body-short",
+          "navds-body-short--small",
+          className
+        )}
+      />
+    </li>
+  )
+);
+
+export default Item;

@navikt/internal/react/src/dropdown/Menu/List/index.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import Item, { ItemType } from "./Item";
+
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface ListType
+  extends React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLUListElement>
+  > {
+  Item: ItemType;
+}
+
+const List = forwardRef(({ className, children, ...rest }, ref) => (
+  <ul {...rest} ref={ref} className={cl("navdsi-dropdown__list", className)}>
+    {children}
+  </ul>
+)) as ListType;
+
+List.Item = Item;
+
+export default List;

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { Popover } from "@navikt/ds-react";
+import List, { ListType } from "./List";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import { DropdownContext } from "../Dropdown";
+
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Dropdown content
+   */
+  children: React.ReactNode;
+}
+
+export interface MenuType<Props = MenuProps>
+  extends React.ForwardRefExoticComponent<
+    Props & React.RefAttributes<HTMLDivElement>
+  > {
+  List: ListType;
+  GroupedList: GroupedListType;
+}
+
+const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  ({ className, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    if (!context) {
+      console.warn("Dropdown.Menu has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { isOpen, anchorEl, setIsOpen } = context;
+
+    return (
+      <Popover
+        {...rest}
+        ref={ref}
+        placement="bottom-end"
+        arrow={false}
+        className={cl("navdsi-dropdown__menu", className)}
+        offset={-4}
+        anchorEl={anchorEl}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+      />
+    );
+  }
+) as MenuType;
+
+Menu.List = List;
+Menu.GroupedList = GroupedList;
+
+export default Menu;

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { DropdownContext } from ".";
+
+export interface ToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+}
+
+export type ToggleType = React.ForwardRefExoticComponent<
+  ToggleProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const Toggle: ToggleType = forwardRef(({ className, ...rest }, ref) => {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
+    return null;
+  }
+
+  const { setAnchorEl, setIsOpen, isOpen } = context;
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      onClick={(e) => {
+        setAnchorEl(e.currentTarget);
+        setIsOpen((isOpen) => !isOpen);
+      }}
+      aria-expanded={isOpen}
+      aria-haspopup="menu"
+      className={cl("navdsi-dropdown__toggle", className)}
+    />
+  );
+});
+
+export default Toggle;

@navikt/internal/react/src/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./Dropdown";
+export * from "./Dropdown";

@navikt/internal/react/src/dropdown/stories/dropdown.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Heading } from "@navikt/ds-react";
+import { Dropdown } from "..";
+import { Divider } from "../..";
+
+export default {
+  title: "ds-react-internal/dropdown",
+  component: Dropdown,
+};
+
+export const All = () => (
+  <>
+    <Heading level="1" size="xlarge">
+      Dropdown menu
+    </Heading>
+    <Dropdown>
+      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item>Gosys</Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+        <Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+  </>
+);

@navikt/internal/react/src/header/Header.tsx

@@ -1,32 +1,34 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import HeaderTitle, { HeaderTitleType } from "./HeaderTitle";
 import HeaderUser, { HeaderUserType } from "./HeaderUser";
+import HeaderButton, { HeaderButtonType } from "./HeaderButton";
+import HeaderUserButton, { HeaderUserButtonType } from "./HeaderUserButton";
 import cl from "classnames";
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   /**
-   * Component content
+   * Header content
    */
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 interface HeaderComponent
   extends React.ForwardRefExoticComponent<
-    HeaderProps & React.RefAttributes<HTMLDivElement>
+    HeaderProps & React.RefAttributes<HTMLElement>
   > {
   Title: HeaderTitleType;
   User: HeaderUserType;
+  Button: HeaderButtonType;
+  UserButton: HeaderUserButtonType;
 }
 
-const Header = forwardRef<HTMLElement, HeaderProps>(
-  ({ children, className, ...rest }, ref) => (
-    <header ref={ref} className={cl("navdsi-header", className)} {...rest}>
-      {children}
-    </header>
-  )
-) as HeaderComponent;
+const Header = forwardRef(({ className, ...rest }, ref) => (
+  <header {...rest} ref={ref} className={cl("navdsi-header", className)} />
+)) as HeaderComponent;
 
 Header.Title = HeaderTitle;
 Header.User = HeaderUser;
+Header.Button = HeaderButton;
+Header.UserButton = HeaderUserButton;
 
 export default Header;

@navikt/internal/react/src/header/HeaderButton.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "@navikt/ds-react";
+
+export interface HeaderButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Application Button
+   */
+  children: React.ReactNode;
+}
+
+export type HeaderButtonType = OverridableComponent<
+  HeaderButtonProps,
+  HTMLButtonElement
+>;
+
+const HeaderButton: HeaderButtonType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl("navdsi-header__button", className)}
+    />
+  )
+);
+
+export default HeaderButton;

@navikt/internal/react/src/header/HeaderTitle.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { Heading, OverridableComponent } from "@navikt/ds-react";
+import { OverridableComponent } from "@navikt/ds-react";
 
 export interface HeaderTitleProps
-  extends React.HTMLAttributes<HTMLHeadingElement> {
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Application title
    */
@@ -16,16 +16,20 @@ export type HeaderTitleType = OverridableComponent<
 >;
 
 const HeaderTitle: HeaderTitleType = forwardRef(
-  ({ as = "h1", children, className, ...rest }, ref) => (
-    <Heading
+  ({ as: Component = "a", children, className, ...rest }, ref) => (
+    <Component
       {...rest}
       ref={ref}
       size="xsmall"
-      as={as}
-      className={cl("navdsi-header__title", className)}
+      className={cl(
+        "navdsi-header__title",
+        "navds-heading",
+        `navds-heading--xsmall`,
+        className
+      )}
     >
       <span>{children}</span>
-    </Heading>
+    </Component>
   )
 );
 

@navikt/internal/react/src/header/HeaderUser.tsx

@@ -4,13 +4,13 @@ import { BodyShort, Detail } from "@navikt/ds-react";
 
 export interface HeaderUserProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * user name
+   * User name
    */
   name: string;
   /**
-   * user ident
+   * User description
    */
-  ident: string;
+  description?: string;
 }
 
 export type HeaderUserType = React.ForwardRefExoticComponent<
@@ -18,12 +18,18 @@ export type HeaderUserType = React.ForwardRefExoticComponent<
 >;
 
 const HeaderUser = forwardRef<HTMLDivElement, HeaderUserProps>(
-  ({ className, name, ident, ...rest }, ref) => (
+  ({ className, name, description, ...rest }, ref) => (
     <div {...rest} ref={ref} className={cl("navdsi-header__user", className)}>
-      <BodyShort size="small" className="navdsi-header__name">
-        {name}
-      </BodyShort>
-      <Detail size="small">{ident}</Detail>
+      <span>
+        <BodyShort size="small" as="div">
+          {name}
+        </BodyShort>
+        {description && (
+          <Detail size="small" as="div">
+            {description}
+          </Detail>
+        )}
+      </span>
     </div>
   )
 );

@navikt/internal/react/src/header/HeaderUserButton.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "@navikt/ds-react";
+import { BodyShort, Detail } from "@navikt/ds-react";
+import { Expand } from "@navikt/ds-icons";
+import HeaderButton from "./HeaderButton";
+
+export interface HeaderUserButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * User name
+   */
+  name: string;
+  /**
+   * User description
+   */
+  description?: string;
+}
+
+export type HeaderUserButtonType = OverridableComponent<
+  HeaderUserButtonProps,
+  HTMLButtonElement
+>;
+
+const HeaderUserButton: HeaderUserButtonType = forwardRef(
+  ({ as, name, description, className, ...rest }, ref) => (
+    <HeaderButton
+      {...rest}
+      as={as}
+      ref={ref}
+      className={cl("navdsi-header__user-button", className)}
+    >
+      <div>
+        <BodyShort size="small" as="div">
+          {name}
+        </BodyShort>
+        {description && (
+          <Detail size="small" as="div">
+            {description}
+          </Detail>
+        )}
+      </div>
+      <Expand />
+    </HeaderButton>
+  )
+);
+
+export default HeaderUserButton;

@navikt/internal/react/src/header/index.ts

@@ -1,6 +1,2 @@
 export { default as Header } from "./Header";
 export * from "./Header";
-export { default as HeaderTitle } from "./HeaderTitle";
-export * from "./HeaderTitle";
-export { default as HeaderUser } from "./HeaderUser";
-export * from "./HeaderUser";