Lerna versionbump [ci skip]

- @navikt/ds-icons@0.8.14
 - @navikt/ds-react@0.19.2
 - @navikt/ds-react-internal@0.14.2

.git-blame-ignore-revs

@@ -0,0 +1 @@
+509e1f2ded31a7d804422d05025454fac5a4c988

.gitignore

@@ -117,3 +117,4 @@ react-docgen-docs.json
 cjs
 esm
 .vercel
+_docs.json

.storybook/deprecated.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react(deprecated)/intro" />
+
+# Utdaterte pakker
+
+På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
+
+- PageHeader -> @navikt/ds-react-navno
+- MicroCard -> @navikt/ds-react-navno
+
+- StepIndicator -> Horisontal `<Stepper />`

.storybook/layout.css

@@ -0,0 +1,17 @@
+.rowgap {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.colgap {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.colgap[data-theme="dark"],
+.rowgap[data-theme="dark"] {
+  background-color: #262626;
+}

.storybook/main.js

@@ -6,11 +6,15 @@ const getStories = () => {
 
 module.exports = {
   webpackFinal: async (config, { configType }) => {
-    config.devServer = { stats: "errors-only" };
+    config.devServer = {
+      stats: "errors-only",
+    };
     return config;
   },
-  devServer: { stats: "errors-only" },
-  stories: () => getStories(),
+  devServer: {
+    stats: "errors-only",
+  },
+  stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
@@ -26,12 +30,28 @@ module.exports = {
       name: "@storybook/addon-essentials",
       options: {
         actions: false,
-        controls: { hideNoControlsWarning: true },
+        controls: {
+          hideNoControlsWarning: true,
+        },
       },
     },
   ],
+  features: {
+    storyStoreV7: true,
+  },
   core: {
-    builder: "webpack5",
+    builder: {
+      name: "webpack5",
+      options: {
+        lazyCompilation: false,
+        fsCache: true,
+      },
+    },
+  },
+  framework: "@storybook/react",
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
   },
-  staticDirs: ["./public"],
 };

.storybook/preview.js

@@ -1,18 +1,16 @@
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
-import { initialize, mswDecorator } from "msw-storybook-addon";
-
-initialize();
-
-export const decorators = [mswDecorator];
+import "./layout.css";
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
   options: {
     storySort: {
       method: "",
-      order: [],
+      order: ["ds-icons", "ds-react", ["Default"]],
       locales: "",
     },
   },
+  viewMode: "docs",
+  layout: "centered",
 };

.storybook/public/mockServiceWorker.js

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

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

@@ -20,10 +20,22 @@ html {
   box-sizing: inherit;
 }
 
+:root,
+[data-theme="light"] {
+  --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
+
+  color: var(--navds-semantic-color-text);
+}
+
+[data-theme="dark"] {
+  --navds-shadow-focus: var(--navds-shadow-focus-inverted);
+
+  color: var(--navds-semantic-color-text-inverted);
+}
+
 body {
   font-family: var(--navds-font-family);
   line-height: 1.333;
-  color: var(--navds-semantic-color-text);
   font-size: 1.125rem;
 }
 

@navikt/core/css/button.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   /* Primary */
   --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
   --navds-button-color-primary-border-focus: var(
@@ -19,7 +20,7 @@
     --navds-semantic-color-interaction-primary
   );
   --navds-button-color-secondary-text-hover: var(
-    --navds-semantic-color-text-inverted
+    --navds-semantic-color-interaction-primary
   );
   --navds-button-color-secondary-text-active: var(
     --navds-semantic-color-text-inverted
@@ -34,7 +35,7 @@
     --navds-semantic-color-component-background-light
   );
   --navds-button-color-secondary-background-hover: var(
-    --navds-semantic-color-interaction-primary-hover
+    --navds-semantic-color-interaction-primary-hover-subtle
   );
   --navds-button-color-secondary-background-active: var(
     --navds-semantic-color-interaction-primary-selected
@@ -47,8 +48,8 @@
   --navds-button-color-tertiary-text-active: var(
     --navds-semantic-color-text-inverted
   );
-  --navds-button-color-tertiary-border-hover: var(
-    --navds-semantic-color-interaction-primary
+  --navds-button-color-tertiary-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
   );
   --navds-button-color-tertiary-border-focus: var(
     --navds-semantic-color-interaction-primary
@@ -80,6 +81,39 @@
   --navds-loader-color-on-button-foreground: currentColor;
 }
 
+[data-theme="dark"] {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-semantic-color-text);
+  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
+  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
+  --navds-button-color-primary-background-hover: var(
+    --navds-global-color-blue-300
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-global-color-blue-400
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-active: var(
+    --navds-global-color-blue-200
+  );
+  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-semantic-color-text
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-button-color-secondary-background-hover: var(
+    --navds-global-color-blue-900
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-global-color-blue-800
+  );
+}
+
 .navds-button {
   display: inline-flex;
   cursor: pointer;
@@ -165,7 +199,6 @@
 .navds-button--secondary:hover {
   color: var(--navds-button-color-secondary-text-hover);
   background-color: var(--navds-button-color-secondary-background-hover);
-  box-shadow: none;
 }
 
 .navds-button--secondary:focus {
@@ -179,7 +212,6 @@
   box-shadow: none;
 }
 
-.navds-button--secondary:focus:hover,
 .navds-button--secondary:focus:active {
   box-shadow: inset 0 0 0 1px
       var(--navds-button-color-secondary-border-focus-active-hover),
@@ -202,7 +234,7 @@
 }
 
 .navds-button--tertiary:hover {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
+  background-color: var(--navds-button-color-tertiary-background-hover);
 }
 
 .navds-button--tertiary:focus {

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

@@ -1,7 +1,11 @@
+:root {
+  --navds-content-container-max-width: 79.5rem;
+}
+
 .navds-content-container {
   margin-left: auto;
   margin-right: auto;
-  max-width: 79.5rem;
+  max-width: var(--navds-content-container-max-width);
   padding: var(--navds-spacing-4);
 }
 

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

@@ -34,7 +34,7 @@
   );
 }
 
-.navds-confirmation-panel {
+.navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
   gap: var(--navds-spacing-4);
@@ -49,17 +49,17 @@
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--small {
+.navds-confirmation-panel--small .navds-confirmation-panel__inner {
   padding: var(--navds-spacing-3);
   gap: var(--navds-spacing-2);
 }
 
-.navds-confirmation-panel--checked {
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-checked);
   border-color: var(--navds-confirmation-panel-color-border-checked);
 }
 
-.navds-confirmation-panel--error {
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-error);
   border: 1px solid transparent;
 }

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

@@ -3,6 +3,9 @@
     --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-description: var(
+    --navds-semantic-color-text-muted
+  );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
@@ -74,7 +77,7 @@
 
 .navds-checkbox__description,
 .navds-radio__description {
-  color: var(--navds-radio-checkbox-color-text);
+  color: var(--navds-radio-checkbox-color-description);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,

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

@@ -1,8 +1,18 @@
-:root {
+:root,
+[data-theme="light"] {
+  --navds-search-color-text: var(--navds-semantic-color-text);
   --navds-search-color-border: var(--navds-semantic-color-border);
   --navds-search-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
+}
+
+[data-theme="dark"] {
+  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
 }
 
 .navds-search {
@@ -22,22 +32,45 @@
 }
 
 .navds-search__input {
-  padding-right: var(--navds-spacing-12);
+  padding-right: var(--navds-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--navds-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--navds-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--navds-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.navds-form-field--small .navds-search__input {
-  min-height: 32px;
-  padding: 0.15rem;
-  padding-right: var(--navds-spacing-8);
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--navds-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--navds-spacing-2);
+  font-size: 1rem;
 }
 
 .navds-search__button-clear {
   position: absolute;
   right: 0.75rem;
   border-radius: var(--navds-border-radius-medium);
-  color: var(--navds-semantic-color-text);
+  color: var(--navds-search-color-text);
   height: 32px;
   width: 32px;
   top: 50%;
@@ -59,7 +92,7 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--navds-global-color-blue-500);
+  color: var(--navds-search-color-clear-hover);
 }
 
 .navds-search__button-clear:focus {
@@ -84,13 +117,13 @@
   min-width: 40px;
 }
 
-.navds-search__button-search.navds-button--tertiary {
+.navds-search__button-search.navds-button--secondary {
   box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
     0 1px 0 0 var(--navds-search-color-border) inset,
     0 -1px 0 0 var(--navds-search-color-border) inset;
 }
 
-.navds-search__button-search.navds-button--tertiary:hover {
+.navds-search__button-search.navds-button--secondary:hover {
   box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
     0 1px 0 0 var(--navds-search-color-border-hover) inset,
     0 -1px 0 0 var(--navds-search-color-border-hover) inset,
@@ -99,21 +132,21 @@
 }
 
 .navds-search__wrapper-inner:focus-within
-  + .navds-search__button-search.navds-button--tertiary:hover {
+  + .navds-search__button-search.navds-button--secondary:hover {
   z-index: auto;
 }
 
-.navds-search__button-search.navds-button--tertiary:focus {
+.navds-search__button-search.navds-button--secondary:focus {
   box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
     var(--navds-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--tertiary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus:hover {
   box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
     var(--navds-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--tertiary:focus:active {
+.navds-search__button-search.navds-button--secondary:focus:active {
   box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
 }
 

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

@@ -72,6 +72,10 @@
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
+.navds-switch__description {
+  color: var(--navds-semantic-color-text-muted);
+}
+
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text);
   --navds-text-field-color-background: var(
     --navds-semantic-color-component-background-light
@@ -18,11 +19,24 @@
     --navds-semantic-color-component-background-alternate
   );
   --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-text-field-color-placeholder-text: var(
+    --navds-semantic-color-text-muted
+  );
+}
+
+[data-theme="dark"] {
+  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-dark
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
 }
 
 .navds-text-field__input {
   appearance: none;
-  padding: 0.5rem;
+  padding: var(--navds-spacing-2);
   background-color: var(--navds-text-field-color-background);
   border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-text-field-color-border);
@@ -31,7 +45,11 @@
   color: var(--navds-text-field-color-text);
 }
 
-.navds-form-field--small > .navds-text-field__input {
+.navds-text-field__input::placeholder {
+  color: var(--navds-text-field-color-placeholder-text);
+}
+
+.navds-form-field--small .navds-text-field__input {
   padding: 0 0.25rem;
   min-height: 32px;
 }

@navikt/core/css/index.css

@@ -17,13 +17,16 @@
 @import "pagination.css";
 @import "popover.css";
 @import "tag.css";
+@import "tooltip.css";
 @import "toggle-group.css";
 @import "panel.css";
 @import "link-panel.css";
 @import "read-more.css";
 @import "speech-bubble.css";
 @import "step-indicator.css";
+@import "stepper.css";
 @import "table.css";
+@import "tabs.css";
 
 /* Navno spesific packages */
 @import "page-header.css";

@navikt/core/css/link.css

@@ -49,6 +49,7 @@
 
 .navds-link svg {
   color: var(--navds-link-color-icon);
+  flex-shrink: 0;
 }
 
 .navds-link:focus svg {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.16.8",
+  "version": "0.18.1",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -17,14 +17,15 @@
   },
   "main": "./dist/index.css",
   "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.4",
+    "@navikt/ds-tokens": "^0.9.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   }
 }

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

@@ -26,7 +26,7 @@
 .navds-page-header__wrapper {
   width: 100%;
   max-width: 56.5rem;
-  text-align: start;
+  text-align: left;
 }
 
 .navds-page-header__title {
@@ -38,7 +38,7 @@
 }
 
 .navds-page-header--left > .navds-page-header__wrapper {
-  text-align: start;
+  text-align: left;
 }
 
 .navds-page-header--center > .navds-page-header__wrapper {

@navikt/core/css/read-more.css

@@ -1,52 +1,78 @@
 .navds-read-more {
   cursor: pointer;
   margin: 0;
-  padding: 0;
-  text-decoration: underline;
   border: none;
   background: none;
   display: flex;
   align-items: center;
   gap: var(--navds-spacing-2);
   color: var(--navds-semantic-color-link);
+  border-radius: var(--navds-border-radius-small);
+  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
+    2px;
+  text-align: start;
+}
+
+.navds-read-more--small {
+  padding: 2px var(--navds-spacing-1) 2px 2px;
 }
 
 .navds-read-more:hover {
-  text-decoration: none;
+  background-color: rgba(38, 38, 38, 0.06);
+}
+
+.navds-read-more:active {
+  background-color: rgba(38, 38, 38, 0.1);
 }
 
 .navds-read-more:focus {
   outline: none;
-  color: var(--navds-link-color-text-focus);
-  text-decoration: none;
-  background-color: var(--navds-link-color-background-focus);
-  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
-}
-
-.navds-read-more__expand-icon {
-  font-size: 1.25rem;
-}
-
-.navds-read-more--open > .navds-read-more__expand-icon {
-  transform: rotate(180deg);
+  box-shadow: var(--navds-shadow-focus);
 }
 
 .navds-read-more + .ReactCollapse--collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   padding-top: var(--navds-spacing-2);
 }
 
+.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
+  padding: 0;
+}
+
 .navds-read-more__content {
   display: flex;
   align-items: stretch;
-  gap: var(--navds-spacing-2);
+  gap: 10px;
+  padding: 0 var(--navds-spacing-1);
 }
 
 .navds-read-more__content::before {
   content: "";
   display: block;
   width: 2px;
-  background-color: var(--navds-semantic-color-border-muted);
-  margin: 0 9px;
+  background-color: rgba(38, 38, 38, 0.36);
+  margin: 0 7px;
   flex-shrink: 0;
 }
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more__expand-icon--filled {
+  display: none;
+}
+
+.navds-read-more:hover
+  > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-read-more:hover > .navds-read-more__expand-icon {
+  display: none;
+}

@navikt/core/css/stepper.css

@@ -0,0 +1,99 @@
+.navds-stepper {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Step */
+.navds-stepper__step {
+  position: relative;
+  cursor: pointer;
+  padding: calc(2.25rem / 2) 0;
+  display: flex;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  color: var(--navds-semantic-color-text);
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.navds-stepper__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  margin-right: var(--navds-spacing-3);
+  border-radius: var(--navds-border-radius-full);
+  align-items: center;
+  justify-content: center;
+  color: var(--navds-semantic-color-interaction-primary);
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
+  background-color: var(--navds-semantic-color-component-background-light);
+}
+
+/* Step-states: focus, active, hover */
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step
+  > .navds-stepper__step-number {
+  background-color: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+}
+
+.navds-stepper__step--active > .navds-stepper__step-number,
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step--active
+  > .navds-stepper__step-number {
+  color: var(--navds-semantic-color-text-inverted);
+  background-color: var(--navds-semantic-color-interaction-primary-selected);
+  box-shadow: inset 0 0 0 2px
+    var(--navds-semantic-color-interaction-primary-selected);
+}
+
+.navds-stepper__step:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-stepper__step--active {
+  cursor: default;
+}
+
+/* Step label */
+.navds-stepper__step-label {
+  margin-top: 2px;
+  color: var(--navds-semantic-color-interaction-primary);
+  text-align: left;
+}
+
+.navds-stepper__step:hover > .navds-stepper__step-label {
+  text-decoration: underline;
+}
+
+.navds-stepper__step--active > .navds-stepper__step-label {
+  color: black;
+}
+
+.navds-stepper__step--active:hover > .navds-stepper__step-label {
+  text-decoration: none;
+}
+
+/* Step Horizontal Lines */
+
+.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: calc(28px + 8px + (2.25rem / 2));
+  left: 13px;
+  height: calc(100% - 2.75rem);
+  display: block;
+  border-left: 2px solid var(--navds-semantic-color-border-muted);
+  border-radius: var(--navds-border-radius-medium);
+  pointer-events: none;
+  z-index: 1;
+}

@navikt/core/css/table.css

@@ -47,7 +47,20 @@
 
 .navds-table--zebra-stripes
   .navds-table__body
-  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  .navds-table__row:nth-child(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expandable-row:nth-child(4n
+    + 1):not(:hover):not(.navds-table__row--selected) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expanded-row:nth-child(4n) {
   background-color: var(--navds-table-row-color-background-zebra);
 }
 
@@ -59,6 +72,11 @@
   text-align: left;
 }
 
+.navds-table__header .navds-table__header-cell,
+.navds-table__header .navds-table__data-cell {
+  border-bottom-width: 2px;
+}
+
 .navds-table__header-cell--align-right,
 .navds-table__data-cell--align-right {
   text-align: right;
@@ -141,3 +159,80 @@
   font-size: 1rem;
   flex-shrink: 0;
 }
+
+.navds-table__expandable-row--open .navds-table__header-cell,
+.navds-table__expandable-row--open .navds-table__data-cell {
+  border-color: var(--navds-semantic-color-border-muted);
+}
+
+.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+  border-color: transparent;
+}
+
+.navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 56px;
+}
+
+.navds-table--small .navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 36px;
+}
+
+.navds-table__toggle-expand-button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--navds-spacing-4);
+}
+
+.navds-table--small .navds-table__toggle-expand-button {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-table__toggle-expand-button:focus {
+  box-shadow: inset var(--navds-shadow-focus);
+}
+
+.navds-table__expandable-icon {
+  font-size: 1.5rem;
+}
+
+.navds-table--small .navds-table__expandable-icon {
+  font-size: 1.25rem;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
+.navds-table__expandable-icon--filled {
+  display: none;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
+  display: block;
+}
+
+.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
+  transform: rotate(180deg);
+}
+
+.navds-table__expanded-row-cell {
+  padding: 0;
+}
+
+.navds-table__expanded-row-cell:empty {
+  display: none;
+}
+
+.navds-table__expanded-row-collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+}
+
+.navds-table__expanded-row-content {
+  padding: var(--navds-spacing-4) 4.25rem;
+}
+
+.navds-table--small .navds-table__expanded-row-content {
+  padding: var(--navds-spacing-2) var(--navds-spacing-12);
+}

@navikt/core/css/tabs.css

@@ -0,0 +1,109 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: auto;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: 0.375rem var(--navds-spacing-4);
+  width: 32px;
+}
+
+.navds-tabs__tab {
+  min-height: 48px;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--navds-semantic-color-text-muted);
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab:focus {
+  outline: none;
+  box-shadow: inset var(--navds-shadow-focus);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 32px;
+  padding: 0.375rem var(--navds-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
+  font-size: 1.25rem;
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab-icon--top svg {
+  font-size: 1.5rem;
+}
+
+.navds-tabs__tabpanel:focus {
+  outline: none;
+}

@navikt/core/css/tooltip.css

@@ -0,0 +1,56 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip {
+  z-index: var(--navds-z-index-tooltip);
+}
+
+.navds-tooltip__inner {
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-2);
+  align-items: center;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
+    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 0.2s;
+  animation-name: tooltipFadeIn;
+  text-align: center;
+}
+
+.navds-tooltip__arrow {
+  height: 7px;
+  width: 7px;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--navds-spacing-1);
+  display: flex;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--navds-font-family);
+  background-color: var(--navds-global-color-gray-700);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-1);
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -1,6 +1,4 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import isChromatic from "chromatic/isChromatic";
 
 import * as Icons from "./src";
 export default {
@@ -17,50 +15,11 @@ export default {
   },
 };
 
-if (isChromatic()) {
-  const iconsStories = storiesOf("ds-icons/Ikoner", module);
-
-  Object.entries(Icons).forEach(([name, Icon]) => {
-    iconsStories.add(name, () => (
-      <div>
-        <Icon title="hello, world" />
-        <Icon style={{ height: "2em", width: "2em" }} />
-        <Icon style={{ height: "4em", width: "4em" }} />
-        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
-        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
-        <br />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
-        />
-        <br />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
-        />
-      </div>
-    ));
-  });
-}
-
 const Template = ({ Icon, color, size, ...args }) => {
   const Iconname = Icons[Icon];
   return <Iconname style={{ fontSize: size, color }} {...args} />;
 };
-export const Ikon = Template.bind({});
-Ikon.args = {
+export const Default = Template.bind({});
+Default.args = {
   size: "24px",
 };

@navikt/core/icons/meta.json

@@ -737,6 +737,12 @@
     "created_at": "2020-07-01T10:37:43.021Z",
     "pageName": "Status"
   },
+  {
+    "name": "ErrorColored",
+    "description": "",
+    "created_at": "2022-05-25T11:08:13.316Z",
+    "pageName": "Status"
+  },
   {
     "name": "ErrorFilled",
     "description": "",
@@ -1007,6 +1013,18 @@
     "created_at": "2021-01-28T14:00:38.562Z",
     "pageName": "Fyrstikkalleen"
   },
+  {
+    "name": "Forward",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T10:42:53.765Z",
+    "pageName": "Communication"
+  },
+  {
+    "name": "ForwardFilled",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T12:21:53.189Z",
+    "pageName": "Communication"
+  },
   {
     "name": "Freezer",
     "description": "",
@@ -1313,6 +1331,12 @@
     "created_at": "2020-07-01T10:37:43.005Z",
     "pageName": "Status"
   },
+  {
+    "name": "InformationColored",
+    "description": "",
+    "created_at": "2022-05-25T11:08:13.292Z",
+    "pageName": "Status"
+  },
   {
     "name": "InformationFilled",
     "description": "",
@@ -1709,6 +1733,18 @@
     "created_at": "2020-07-01T10:37:42.850Z",
     "pageName": "People"
   },
+  {
+    "name": "PeopleDialogFilled",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.398Z",
+    "pageName": "People"
+  },
+  {
+    "name": "PeopleDialogOutline",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.392Z",
+    "pageName": "People"
+  },
   {
     "name": "PeopleFilled",
     "description": "",
@@ -2207,6 +2243,18 @@
     "created_at": "2021-01-11T13:37:55.271Z",
     "pageName": "Social media"
   },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.695Z",
+    "pageName": "Health"
+  },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.700Z",
+    "pageName": "Health"
+  },
   {
     "name": "StopWatch",
     "description": "",
@@ -2237,6 +2285,12 @@
     "created_at": "2020-07-01T10:37:42.940Z",
     "pageName": "Status"
   },
+  {
+    "name": "SuccessColored",
+    "description": "",
+    "created_at": "2022-05-25T11:08:13.285Z",
+    "pageName": "Status"
+  },
   {
     "name": "SuccessFilled",
     "description": "",
@@ -2507,6 +2561,12 @@
     "created_at": "2020-07-01T10:37:42.737Z",
     "pageName": "Status"
   },
+  {
+    "name": "WarningColored",
+    "description": "",
+    "created_at": "2022-05-25T11:08:13.299Z",
+    "pageName": "Status"
+  },
   {
     "name": "WarningFilled",
     "description": "",

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.6",
+  "version": "0.8.14",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -26,7 +26,7 @@
     "/meta.json"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "create-icons": "svgr --out-dir src svg",
     "clean": "rimraf src cjs esm",
     "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
@@ -36,11 +36,11 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.5.0",
+    "@svgr/cli": "6.2.1",
     "@types/lodash.startcase": "^4.4.6",
     "@types/rimraf": "3.0.2",
     "@types/uuid": "^8.3.1",
@@ -49,7 +49,7 @@
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
-    "react": "^16.8.0 || ^17.0.0",
+    "react": "^18.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
     "ts-node": "^10.4.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="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.1845 18.91L11.1845 18.91L13.2429 16.8466C13.2588 16.8283 13.2754 16.8103 13.2929 16.7929L14.792 15.2937L20.2929 9.79289C20.6834 9.40237 21.3166 9.40237 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7063L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5603 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM13.377 3.30693C15.0823 1.56435 17.8563 1.56435 19.5616 3.30693C21.2551 5.03744 21.2551 7.83437 19.5616 9.56488L12.6369 16.641C11.424 17.8804 9.4484 17.8804 8.23551 16.641C7.03444 15.4136 7.03444 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.4494 13.5227 7.44256 13.9174 7.82884C14.3121 8.21511 14.319 8.84824 13.9327 9.24297L9.66493 13.604C9.22463 14.0539 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16604C19.0649 7.21294 19.0649 5.65887 18.1322 4.70577C17.2113 3.76473 15.7273 3.76473 14.8064 4.70577L6.06885 13.6344C4.64372 15.0907 4.64372 17.4606 6.06885 18.9168C7.48216 20.361 9.76445 20.361 11.1778 18.9168L11.1845 18.91L11.1845 18.91L13.2429 16.8466C13.2588 16.8283 13.2754 16.8103 13.2929 16.7929L14.792 15.2937L20.2929 9.79289C20.6834 9.40236 21.3166 9.40236 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7062L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5602 4.63943 20.3157C2.45353 18.082 2.45353 14.4692 4.63943 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L15.5714 3L17 4.5L9.85714 12L17 19.5L15.5714 21L7 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.58578 12L14.2929 4.29289L15.7071 5.70711L9.41421 12L15.7071 18.2929L14.2929 19.7071L6.58578 12Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 11.5L15.0714 2.5L17.5 5L11 11.5L17.5 18L15.0714 20.5L6.5 11.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87868 12L13.9393 3.93934L16.0607 6.06066L10.1213 12L16.0607 17.9393L13.9393 20.0607L5.87868 12Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H15.874C15.9562 19.3196 16 19.6547 16 20C16 22.2091 14.2091 24 12 24C9.79086 24 8 22.2091 8 20C8 19.6547 8.04375 19.3196 8.12602 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM10.2676 19C10.0974 19.2942 10 19.6357 10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20C14 19.6357 13.9026 19.2942 13.7324 19H10.2676ZM11.9171 4.77778C9.55416 4.77778 7.57822 6.40998 7.35299 8.54785L7.24974 9.56957C7.14584 10.6481 7.078 11.5374 7.04602 12.2332L7.02693 12.807C7.00383 14.0852 6.60221 15.4394 5.8426 16.8798L5.65607 17.2222H18.4049L18.3026 17.0342C17.3858 15.3383 16.888 14.0211 16.8156 12.988L16.7864 12.3678C16.7398 11.6039 16.6215 10.3086 16.4326 8.50896C16.2105 6.3933 14.2553 4.77778 11.9171 4.77778Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM12 6C9.23858 6 7 8.23858 7 11V12.3767C7 14.0885 6.47556 15.7593 5.49727 17.164L4.91504 18H19.085L18.5027 17.164C17.5244 15.7593 17 14.0885 17 12.3767V11C17 8.23857 14.7614 6 12 6Z" fill="#262626"/>
 </svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM12 24C10.1362 24 8.57006 22.7252 8.12602 21H15.874C15.4299 22.7252 13.8638 24 12 24Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Cancel.svg

@@ -1,3 +1,3 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.83233 6L7.4182 2.41414L6.00398 0.999924L0 7.00391L6.00008 13.004L7.41429 11.5898L3.82452 8H15.004C18.87 8 22.004 11.134 22.004 15C22.004 18.866 18.87 22 15.004 22V24C19.9746 24 24.004 19.9706 24.004 15C24.004 10.0294 19.9746 6 15.004 6H3.83233Z" fill="#262626"/>
+<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.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289C7.31659 2.90237 6.68342 2.90237 6.2929 3.29289L2.29289 7.2929C2.10536 7.48043 2 7.73479 2 8C2 8.26522 2.10536 8.51957 2.29289 8.70711L6.2929 12.7071C6.68342 13.0976 7.31659 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 9H15C17.7614 9 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 7 15 7H5.41422L7.70711 4.70711Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/CancelFilled.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 14L0 7.00391L8 0V5H14.5C19.7467 5 24 9.25329 24 14.5C24 19.7467 19.7467 24 14.5 24H14.25V20H14.5C17.5376 20 20 17.5376 20 14.5C20 11.4624 17.5376 9 14.5 9H8V14Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711L5.41422 7H15C18.866 7 22 10.134 22 14C22 17.866 18.866 21 15 21H13.7879C13.2356 21 12.7879 20.5523 12.7879 20C12.7879 19.4477 13.2356 19 13.7879 19H15C17.7614 19 20 16.7614 20 14C20 11.2386 17.7614 9 15 9H5.41421L7.70711 11.2929C8.09763 11.6834 8.09763 12.3166 7.70711 12.7071C7.31659 13.0976 6.68342 13.0976 6.2929 12.7071L2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8C2 7.73479 2.10536 7.48043 2.29289 7.2929L6.2929 3.29289C6.68342 2.90237 7.31659 2.90237 7.70711 3.29289Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Collapse.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 7L3 15.5714L4.5 17L12 9.85714L19.5 17L21 15.5714L12 7Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.58579L19.7071 14.2929L18.2929 15.7071L12 9.41421L5.70712 15.7071L4.29291 14.2929L12 6.58579Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/CollapseFilled.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 6L21 14.5714L18.5 17L12 10.5L5.5 17L3 14.5714L12 6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.87868L20.0607 13.9393L17.9393 16.0607L12 10.1213L6.06065 16.0607L3.93933 13.9393L12 5.87868Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Delete.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 0C14.4189 0 16.4366 1.71767 16.8999 3.99981L23 4V6H21V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V6H1V4L7.10006 3.99981C7.5634 1.71767 9.58111 0 12 0ZM9.17004 4H9.66856H9.70601H10.2674H13.7327H14.2598H14.3079H14.829L14.7533 3.80669C14.6245 3.50979 14.449 3.23782 14.2362 3C13.7661 2.47481 13.1137 2.11621 12.3786 2.02365L12.1763 2.00509L12 2C11.1115 2 10.3133 2.38625 9.76394 3C9.54865 3.24054 9.3716 3.51603 9.24235 3.8169L9.17004 4ZM5 6H19V20L18.9945 20.1493C18.9182 21.1841 18.0544 22 17 22H7L6.85074 21.9945C5.81588 21.9182 5 21.0544 5 20V6ZM10 9V19H8V9H10ZM16 9V19H14V9H16Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 3C9.44769 3 8.99998 3.44772 8.99998 4V5H15V4C15 3.44772 14.5523 3 14 3H9.99998ZM17 5V4C17 2.34315 15.6568 1 14 1H9.99998C8.34312 1 6.99998 2.34315 6.99998 4V5H3.93109H2V7H4.06442L4.87773 19.1996C4.98279 20.7754 6.29169 22 7.87108 22H16.1289C17.7083 22 19.0172 20.7754 19.1222 19.1996L19.9355 7H22V5H20.0689H17ZM17.9311 7H6.06886L6.8733 19.0665C6.90832 19.5918 7.34462 20 7.87108 20H16.1289C16.6553 20 17.0916 19.5918 17.1267 19.0665L17.9311 7ZM9 18V9H11V18H9ZM13 18V9H15V18H13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DeleteFilled.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 0C14.4189 0 16.4366 1.71767 16.8999 3.99981L23 4V6H21V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V6H1V4L7.10006 3.99981C7.5634 1.71767 9.58111 0 12 0ZM9.66856 4H9.17004L9.24235 3.8169C9.3716 3.51603 9.54865 3.24054 9.76394 3C10.3133 2.38625 11.1115 2 12 2L12.1763 2.00509L12.3786 2.02365C13.1137 2.11621 13.7661 2.47481 14.2362 3C14.449 3.23782 14.6245 3.50979 14.7533 3.80669L14.829 4H14.3079H14.2598H13.7327H10.2674H9.70601H9.66856ZM10 9V19H8V9H10ZM16 9V19H14V9H16Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.34315 8.34315 1 10 1H14C15.6569 1 17 2.34315 17 4V5H22V7H19.9355L19.1222 19.1996C19.0172 20.7755 17.7083 22 16.1289 22H7.87108C6.29169 22 4.98279 20.7755 4.87773 19.1996L4.06442 7H2V5H7ZM9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V5H9V4ZM9 9V18H11V9H9ZM13 9V18H15V9H13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ErrorColored.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.999 0C5.3948 0 0.0125453 5.37182 2.35603e-05 11.976C-0.0062373 15.1815 1.2355 18.1972 3.49776 20.4688C5.76001 22.7394 8.77148 23.9937 11.977 24H12C18.6031 24 23.9864 18.6271 24 12.0219C24.0125 5.40625 18.6396 0.0125217 11.999 0Z" fill="#A32A17"/>
+<path d="M12 10.6512L15.3719 7.27932C15.7443 6.90687 16.3482 6.90687 16.7206 7.27932C17.0931 7.65177 17.0931 8.25563 16.7206 8.62808L13.3487 12L16.7206 15.3719C17.0931 15.7443 17.0931 16.3482 16.7206 16.7206C16.3482 17.0931 15.7443 17.0931 15.3719 16.7206L12 13.3487L8.62808 16.7206C8.25563 17.0931 7.65177 17.0931 7.27932 16.7206C6.90687 16.3482 6.90687 15.7443 7.27932 15.3719L10.6512 12L7.27932 8.62808C6.90687 8.25563 6.90687 7.65177 7.27932 7.27932C7.65177 6.90687 8.25563 6.90687 8.62808 7.27932L12 10.6512Z" fill="white"/>
+</svg>

@navikt/core/icons/svg/Expand.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 17L3 8.42857L4.5 7L12 14.1429L19.5 7L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.4142L4.2929 9.7071L5.70711 8.29289L12 14.5858L18.2929 8.29289L19.7071 9.70711L12 17.4142Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ExpandFilled.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 17L3 8.42857L5.5 6L12 12.5L18.5 6L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.1213L3.93934 10.0607L6.06066 7.93934L12 13.8787L17.9393 7.93934L20.0607 10.0607L12 18.1213Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/File.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="M21 24H3V0H14L21 7V24ZM12 2H5V22H19V8H12V2ZM14 2.83V6L17.17 5.999L14 2.83Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM6 20V4H14V6C14 7.10457 14.8954 8 16 8H18V20H6ZM17.5858 6L16 4.41421V6H17.5858Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileError.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H12V20H4V2H12V7H17V14H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858Z" fill="#262626"/>
+<path d="M15.7071 16.7071C15.3166 17.0976 14.6834 17.0976 14.2929 16.7071L12 14.4142L9.70711 16.7071C9.31658 17.0976 8.68342 17.0976 8.29289 16.7071C7.90237 16.3166 7.90237 15.6834 8.29289 15.2929L10.5858 13L8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289C8.68342 8.90237 9.31658 8.90237 9.7071 9.29289L12 11.5858L14.2929 9.29289C14.6834 8.90237 15.3166 8.90237 15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L13.4142 13L15.7071 15.2929C16.0976 15.6834 16.0976 16.3166 15.7071 16.7071Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM6 20V4H14V6C14 7.10457 14.8954 8 16 8H18V20H6ZM17.5858 6L16 4.41421V6H17.5858Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileErrorFilled.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H11.5L14.5 19L11 15.5L14.5 12L18 15.5L19 14.5V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM14.2929 16.7071C14.6834 17.0976 15.3166 17.0976 15.7071 16.7071C16.0976 16.3166 16.0976 15.6834 15.7071 15.2929L13.4142 13L15.7071 10.7071C16.0976 10.3166 16.0976 9.68342 15.7071 9.29289C15.3166 8.90237 14.6834 8.90237 14.2929 9.29289L12 11.5858L9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289C7.90237 9.68342 7.90237 10.3166 8.29289 10.7071L10.5858 13L8.29289 15.2929C7.90237 15.6834 7.90237 16.3166 8.29289 16.7071C8.68342 17.0976 9.31658 17.0976 9.70711 16.7071L12 14.4142L14.2929 16.7071Z" fill="#262626"/>
+<path d="M16 2V6H20C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileFilled.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 24H3V0H14L21 7V24ZM14 2.83V6L17.17 5.999L14 2.83Z" fill="#262626"/>
+<path d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3Z" fill="#262626"/>
+<path d="M16 2V6H20C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileProgressFilled.svg

@@ -1,3 +1,4 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V0H14.5L19 4.5V11H17.3135C11.6605 11 8.31543 17.3293 11.5 22H2ZM13.5 2V5H16.5L13.5 2ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13C16 13.5523 15.5523 14 15 14C14.4477 14 14 13.5523 14 13C14 11.8954 13.1046 11 12 11Z" fill="#262626"/>
+<path d="M20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2V6H20Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileSuccess.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H14.4142L19 4.58579V16H17V7H12V2H4V20H11V22H2V0ZM14 2.41421L16.5858 5H14V2.41421ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
+<path d="M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L11 13.5858L9.70711 12.2929C9.31658 11.9024 8.68342 11.9024 8.29289 12.2929C7.90237 12.6834 7.90237 13.3166 8.29289 13.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L15.7071 11.7071Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H16C16.2652 2 16.5196 2.10536 16.7071 2.29289L19.7071 5.29289C19.8946 5.48043 20 5.73478 20 6V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM6 4V20H18V8H16C14.8954 8 14 7.10457 14 6V4H6ZM16 4.41421L17.5858 6H16V4.41421Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/FileSuccessFilled.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H12L10 19.5L14 16L16 18L19 15V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L11.7071 15.7071C11.3166 16.0976 10.6834 16.0976 10.2929 15.7071L8.29289 13.7071C7.90237 13.3166 7.90237 12.6834 8.29289 12.2929C8.68342 11.9024 9.31658 11.9024 9.70711 12.2929L11 13.5858L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z" fill="#262626"/>
+<path d="M20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2V6H20Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Files.svg

@@ -1,3 +1,4 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H12V7H17V11H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13C10 11.8954 10.8954 11 12 11C13.1046 11 14 11.8954 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 10.7909 14.2091 9 12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C10.8954 15 10 14.1046 10 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H16C16.2652 2 16.5196 2.10536 16.7071 2.29289L19.7071 5.29289C19.8946 5.48043 20 5.73478 20 6V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM6 4V20H18V8H16C14.8954 8 14 7.10457 14 6V4H6ZM16 4.41421L17.5858 6H16V4.41421Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Forward.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/ForwardFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Hamburger.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1H24V3H0V1ZM0 11H24V13H0V11ZM24 21H0V23H24V21Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 21L2 21L2 19L22 19V21ZM22 13L2 13L2 11L22 11V13ZM22 5L2 5L2 3L22 3L22 5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/HamburgerFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1H24V5H0V1ZM0 10H24V14H0V10ZM24 19H0V23H24V19Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM2 21L22 21V19L2 19V21ZM2 13L22 13V11L2 11V13ZM2 5L22 5V3L2 3V5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/InformationColored.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.38226 0 0 5.38226 0 12C0 18.6177 5.38226 24 12 24C18.6167 24 24 18.6177 24 12C24 5.38226 18.6167 0 12 0Z" fill="#368DA8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 6.5C13.5 5.67157 12.8284 5 12 5C11.1716 5 10.5 5.67157 10.5 6.5C10.5 7.32843 11.1716 8 12 8C12.8284 8 13.5 7.32843 13.5 6.5ZM9 17V19H15V17H13V10H9V12H11V17H9Z" fill="white"/>
+</svg>

@navikt/core/icons/svg/Login.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="M21 22L21 2L11 2L11 8L9 8L9 2C9 0.895428 9.89543 0 11 0H21C22.1046 0 23 0.89543 23 2L23 22C23 23.1046 22.1046 24 21 24L11 24C9.89543 24 9 23.1046 9 22L9 17H11L11 22L21 22ZM15.5859 11L12.293 7.70711L13.7072 6.29289L19.4143 12L13.7072 17.7071L12.293 16.2929L15.5859 13L1 13V11L15.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4L14 4V2L19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H14V20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4ZM10.7071 6.29289L16.4142 12L10.7071 17.7071L9.29289 16.2929L12.5858 13L2 13V11L12.5858 11L9.29289 7.70711L10.7071 6.29289Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/LoginFilled.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="M22 0H10C9.44772 0 9 0.447716 9 1V7.63636V11H1V13H9V17.4545V23C9 23.5523 9.44771 24 10 24L22 24C22.5523 24 23 23.5523 23 23L23 1C23 0.447718 22.5523 0 22 0ZM9 13V11H15.5859L12.293 7.70711L13.7072 6.29289L19.4143 12L13.7072 17.7071L12.293 16.2929L15.5859 13H9Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM14 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H14V22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2L14 2V4ZM16.4142 12L10.7071 6.29289L9.29289 7.70711L12.5858 11L2 11V13L12.5858 13L9.29289 16.2929L10.7071 17.7071L16.4142 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Logout.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 2L2 2V22H12V17H14V22C14 23.1046 13.1046 24 12 24H2C0.89543 24 0 23.1046 0 22V2C0 0.895435 0.895428 0 2 0H12C13.1046 0 14 0.895432 14 2V7H12L12 2H2ZM19.5859 11L16.293 7.70711L17.7072 6.29289L23.4143 12L17.7072 17.7071L16.293 16.2929L19.5859 13L6 13V11L19.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4143 12L16.7072 17.7071L15.293 16.2929L18.5859 13L8.00009 13L8.00009 11L18.5859 11L15.293 7.70711L16.7072 6.29289L22.4143 12ZM10.0001 22L5.00009 22C3.34324 22 2.00009 20.6569 2.00009 19L2.00009 5C2.00009 3.34314 3.34324 2 5.00009 2L10.0001 2L10.0001 4L5.00009 4C4.44781 4 4.00009 4.44771 4.00009 5L4.00009 19C4.00009 19.5523 4.44781 20 5.00009 20L10.0001 20L10.0001 22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/LogoutFilled.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 24H1C0.447716 24 0 23.5523 0 23V1C0 0.447717 0.447715 0 1 0H13C13.5523 0 14 0.447715 14 1V6.54545L14 11H6V13L14 13V17.4545V23C14 23.5523 13.5523 24 13 24ZM19.5859 13H14V11H19.5859L16.293 7.70711L17.7072 6.29289L23.4143 12L17.7072 17.7071L16.293 16.2929L19.5859 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM16.7072 17.7071L22.4143 12L16.7072 6.29289L15.293 7.70711L18.5859 11L8.00009 11L8.00009 13L18.5859 13L15.293 16.2929L16.7072 17.7071ZM5.00009 22H10.0001V20H5.00009C4.44781 20 4.00009 19.5523 4.00009 19L4.00009 5C4.00009 4.44771 4.44781 4 5.00009 4L10.0001 4V2H5.00009C3.34324 2 2.00009 3.34314 2.00009 5L2.00009 19C2.00009 20.6569 3.34324 22 5.00009 22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Next.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 12L8.42857 3L7 4.5L14.1429 12L7 19.5L8.42857 21L17 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4142 12L9.70711 19.7071L8.29289 18.2929L14.5858 12L8.2929 5.70711L9.70711 4.29289L17.4142 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/NextFilled.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 11.5L8.92857 20.5L6.5 18L13 11.5L6.5 5L8.92857 2.5L17.5 11.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1213 12L10.0606 20.0607L7.93933 17.9393L13.8787 12L7.93933 6.06066L10.0606 3.93934L18.1213 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/People.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 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7ZM19 7C19 10.866 15.866 14 12 14C8.13401 14 5 10.866 5 7C5 3.13401 8.13401 0 12 0C15.866 0 19 3.13401 19 7ZM12 17C16.355 17 19.9994 19.992 20.9241 24H23C22.0437 18.8798 17.4825 15 12 15C6.51746 15 1.95628 18.8798 1 24H3.07587C4.00057 19.992 7.64502 17 12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7ZM12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2ZM6 21C6 17.6863 8.68629 15 12 15C15.3137 15 18 17.6863 18 21V22H20V21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21V22H6V21Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/PeopleDialogFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 3C23 1.89543 22.1046 1 21 1H16C14.8954 1 14 1.89543 14 3V7L14 7.0082V10.618L17.2361 9H21C22.1046 9 23 8.10457 23 7V3ZM7.5 5C5.01472 5 3 7.01472 3 9.5C3 11.9853 5.01472 14 7.5 14C9.98528 14 12 11.9853 12 9.5C12 7.01472 9.98528 5 7.5 5ZM1 22V21.5C1 17.9101 3.91015 15 7.5 15C11.0899 15 14 17.9101 14 21.5V22H1Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/PeopleDialogOutline.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3C14 1.89543 14.8954 1 16 1H21C22.1046 1 23 1.89543 23 3V7C23 8.10457 22.1046 9 21 9H17.2361L14 10.618V7.0082L14 7V3ZM21 3H16V7L16.0001 7.0082L16 7.38196L16.7639 7H21V3ZM7.5 7C6.11929 7 5 8.11929 5 9.5C5 10.8807 6.11929 12 7.5 12C8.88071 12 10 10.8807 10 9.5C10 8.11929 8.88071 7 7.5 7ZM3 9.5C3 7.01472 5.01472 5 7.5 5C9.98528 5 12 7.01472 12 9.5C12 11.9853 9.98528 14 7.5 14C5.01472 14 3 11.9853 3 9.5ZM3 21.5C3 19.0147 5.01472 17 7.5 17C9.98528 17 12 19.0147 12 21.5V22H14V21.5C14 17.9101 11.0899 15 7.5 15C3.91015 15 1 17.9101 1 21.5V22H3V21.5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/PeopleFilled.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 14C15.866 14 19 10.866 19 7C19 3.13401 15.866 0 12 0C8.13401 0 5 3.13401 5 7C5 10.866 8.13401 14 12 14ZM12 15C17.2923 15 21.7392 18.8243 23 24H1C2.26084 18.8243 6.70771 15 12 15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2ZM4 21V22H20V21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Refresh.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.00484H4.99914C2.57187 5.83288 1 8.74382 1 12.0241C1 15.9568 3.25942 19.3587 6.54346 21L7.43584 19.2058C4.80423 17.8906 3 15.1676 3 12.0241C3 9.05724 4.60709 6.46503 7 5.07735V11.0218H9V2H0V4.00484ZM23 11.9759C23 15.2562 21.4281 18.1671 19.0009 19.9952H24V22H15V12.9782L17 12.9782V18.9227C19.3929 17.535 21 14.9428 21 11.9759C21 8.83238 19.1958 6.10942 16.5642 4.79421L17.4565 3C20.7406 4.64128 23 8.04319 23 11.9759Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L5.29289 5.2929C5.10535 5.48043 5 5.73479 5 6C5 6.26522 5.10535 6.51957 5.29289 6.70711L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L8.41421 7H17C18.6569 7 20 8.34315 20 10V12C20 12.5523 20.4477 13 21 13C21.5523 13 22 12.5523 22 12V10C22 7.23858 19.7614 5 17 5H8.41421L9.70711 3.70711ZM14.2929 20.2929C13.9024 20.6834 13.9024 21.3166 14.2929 21.7071C14.6834 22.0976 15.3166 22.0976 15.7071 21.7071L18.7071 18.7071C18.8946 18.5196 19 18.2652 19 18C19 17.7348 18.8946 17.4804 18.7071 17.2929L15.7071 14.2929C15.3166 13.9024 14.6834 13.9024 14.2929 14.2929C13.9024 14.6834 13.9024 15.3166 14.2929 15.7071L15.5858 17L7 17C5.34314 17 4 15.6569 4 14L4 12C4 11.4477 3.55228 11 3 11C2.44771 11 2 11.4477 2 12V14C2 16.7614 4.23858 19 7 19H15.5858L14.2929 20.2929Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/RefreshFilled.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="M15 22H24L21.262 19.3018C22.9653 17.3937 24 14.8895 24 12.1456C24 7.89133 21.5128 4.21336 17.9027 2.43968L17.0078 1.99999L15.223 5.52766L16.118 5.96736C18.4232 7.09992 20 9.44293 20 12.1456C20 13.7984 19.4102 15.3167 18.4248 16.5059L15 13.1309L15 22ZM9 1.99999L0 1.99999L2.73799 4.69814C1.03467 6.60628 0 9.11046 0 11.8544C0 16.1087 2.48719 19.7866 6.09728 21.5603L6.99222 22L8.77696 18.4723L7.88202 18.0326C5.57684 16.9001 4 14.557 4 11.8544C4 10.2016 4.58976 8.68324 5.57516 7.49403L9 10.869L9 1.99999Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM9.70711 2.29289C10.0976 2.68342 10.0976 3.31658 9.70711 3.70711L8.41421 5H17C19.7614 5 22 7.23858 22 10V12C22 12.5523 21.5523 13 21 13C20.4477 13 20 12.5523 20 12V10C20 8.34315 18.6569 7 17 7H8.41421L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L5.29289 6.70711C5.10535 6.51957 5 6.26522 5 6C5 5.73479 5.10535 5.48043 5.29289 5.2929L8.29289 2.29289C8.68342 1.90237 9.31658 1.90237 9.70711 2.29289ZM14.2929 21.7071C13.9024 21.3166 13.9024 20.6834 14.2929 20.2929L15.5858 19H7C4.23858 19 2 16.7614 2 14V12C2 11.4477 2.44771 11 3 11C3.55228 11 4 11.4477 4 12V14C4 15.6569 5.34314 17 7 17L15.5858 17L14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929C14.6834 13.9024 15.3166 13.9024 15.7071 14.2929L18.7071 17.2929C18.8946 17.4804 19 17.7348 19 18C19 18.2652 18.8946 18.5196 18.7071 18.7071L15.7071 21.7071C15.3166 22.0976 14.6834 22.0976 14.2929 21.7071Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Search.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C13.9706 0 18 4.02944 18 9C18 11.1211 17.2662 13.0709 16.0386 14.6093L24 22.5714L22.5714 24L14.6093 16.0386C13.0709 17.2662 11.1211 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C11.6791 16 13.1956 15.3116 14.2858 14.1991C15.3472 13.1159 16 11.6352 16 10C16 6.68629 13.3137 4 10 4ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 11.8248 17.3881 13.508 16.3597 14.8538L22.7122 21.298L21.2878 22.702L14.9568 16.2796C13.5944 17.3563 11.8717 18 10 18C5.58172 18 2 14.4183 2 10Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SearchFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C13.9706 0 18 4.02944 18 9C18 11.1211 17.2662 13.0709 16.0386 14.6093L24 22.5714L22.5714 24L14.6093 16.0386C13.0709 17.2662 11.1211 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 2C7.40872 2 5.94146 2.53097 4.76572 3.4254L6.75554 4.53085C7.43047 4.19123 8.1929 4 9 4C11.6078 4 13.7492 5.99637 13.9795 8.54417L15.9702 9.65012C15.9899 9.43606 16 9.2192 16 9C16 5.13401 12.866 2 9 2Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C11.8717 18 13.5944 17.3563 14.9568 16.2796L21.2878 22.702L22.7122 21.298L16.3597 14.8538C17.3881 13.508 18 11.8248 18 10C18 5.58172 14.4183 2 10 2ZM13 10C13 8.34315 11.6569 7 10 7V5C12.7614 5 15 7.23858 15 10H13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Stethoscope.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V9C2 11.2091 3.79086 13 6 13C8.20914 13 10 11.2091 10 9V3C10 2.44772 9.55228 2 9 2H7V0H9C10.6569 0 12 1.34315 12 3V9C12 11.973 9.83771 14.441 7 14.917V21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21V19.5C9 17.0147 11.0147 15 13.5 15H16.126C16.5701 13.2748 18.1362 12 20 12C22.2091 12 24 13.7909 24 16C24 18.2091 22.2091 20 20 20C18.1362 20 16.5701 18.7252 16.126 17H13.5C12.1193 17 11 18.1193 11 19.5V21C11 22.6569 9.65685 24 8 24C6.34315 24 5 22.6569 5 21V14.917C2.16229 14.441 0 11.973 0 9V3C0 1.34315 1.34315 0 3 0H5V2H3Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/SuccessColored.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0Z" fill="#007C2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0465 7.67114L18.4456 9.10034L9.71768 17.4992L6 14.0182L7.39516 12.5852L9.71359 14.7034L17.0465 7.67114Z" fill="white"/>
+</svg>

@navikt/core/icons/svg/WarningColored.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.126 0.563656C11.4886 -0.178299 12.4887 -0.190286 12.8672 0.542786L23.8782 22.4554C24.2365 23.1495 23.7611 23.9957 23.0129 23.9957H0.987017C0.248642 23.9957 -0.227591 23.1695 0.1112 22.4763L11.126 0.563656Z" fill="#D47B00"/>
+<path d="M11 7.99585H13V14.9958H11V7.99585Z" fill="white"/>
+<circle cx="12" cy="18.4958" r="1.5" fill="white"/>
+</svg>

@navikt/core/icons/template.js

@@ -1,13 +1,5 @@
-function defaultTemplate(
-  { template },
-  opts,
-  { imports, interfaces, componentName, props, jsx, exports }
-) {
-  const plugins = ["jsx"];
-  if (opts.typescript) {
-    plugins.push("typescript");
-  }
-
+const template = (variables, { tpl }) => {
+  const imports = variables.imports;
   imports.push({
     type: "ImportDeclaration",
     specifiers: [
@@ -25,21 +17,25 @@ function defaultTemplate(
     },
   });
 
-  props[0].properties.find((prop) => prop.key.name === "titleId").value = {
+  variables.props[0].properties.find(
+    (prop) => prop.key.name === "titleId"
+  ).value = {
     type: "Identifier",
     name: "_titleId",
   };
 
-  const typeScriptTpl = template.smart({ plugins });
-  return typeScriptTpl.ast`
-  ${imports}
-  ${interfaces}
-  const ${componentName} = React.forwardRef((${props}) => {
-    let titleId: string | undefined = useId(_titleId);
-    titleId = title ? titleId : undefined;
-    return ${jsx};
-  });
-  export default ${componentName}`;
-}
+  return tpl`
+${imports};
 
-module.exports = defaultTemplate;
+${variables.interfaces};
+
+const ${variables.componentName} = forwardRef((${variables.props}) => {
+  let titleId: string | undefined = useId();
+  titleId = title ? _titleId ? _titleId : "title-" + titleId : undefined;
+  return ${variables.jsx};
+});
+export default ${variables.componentName}
+`;
+};
+
+module.exports = template;

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.12",
+  "version": "0.19.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,19 +24,23 @@
   "files": [
     "/cjs",
     "/esm",
-    "/src"
+    "/src",
+    "_docs.json"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn docgen",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-icons": "^0.8.14",
     "@popperjs/core": "^2.10.1",
+    "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -46,25 +50,28 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/faker": "^5.5.8",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
     "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "faker": "^5.5.3",
-    "jest": "^27.2.0",
-    "react-router-dom": "^6.1.0",
+    "faker": "5.5.3",
+    "fast-glob": "3.2.11",
+    "jest": "^27.5.0",
+    "react-docgen-typescript": "2.2.2",
+    "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "swr": "^1.1.2",
-    "ts-jest": "^27.0.5"
+    "ts-jest": "^27.1.0",
+    "ts-node": "10.7.0"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
   }
 }

@navikt/core/react/src/accordion/Accordion.tsx

@@ -15,12 +15,12 @@ interface AccordionComponent
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Content inside accordion
+   * Instances of Accordion.Item
    */
   children: React.ReactNode;
 }
 
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, ...rest }, ref) => (
     <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
   )

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -6,7 +6,9 @@ import { AccordionItemContext } from "./AccordionItem";
 export interface AccordionContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Accordion panel content
+   * Content inside Accordion.Content
+   * If renderContentWhenClosed is false in Accordion.Item,
+   * this will be removed from dom when Accordion is closed
    */
   children: React.ReactNode;
 }

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -7,7 +7,7 @@ import { useClientLayoutEffect, useId } from "..";
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Button content
+   * Text inside Accordion.Header
    */
   children: React.ReactNode;
 }

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -4,21 +4,22 @@ import React, { createContext, forwardRef, useState } from "react";
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Content inside accordion item
+   * Content in Accordion.Item
+   * Should include one Accordion.Header and one Accordion.Content
    */
   children: React.ReactNode;
   /**
-   * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
+   * Controlled open-state
+   * Using this removes automatic control of open-state
    */
   open?: boolean;
   /**
-   * Defaults the accordion to opened state
+   * Defaults the accordion to open if not controlled
    * @default false
    */
   defaultOpen?: boolean;
   /**
-   * Removes content-element from dom when closed
+   * Removes content inside Accordion.Content if false from dom when closed
    * @default false
    */
   renderContentWhenClosed?: boolean;

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

@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
 import { Accordion } from ".";
 
 export default {
-  title: "ds-react/accordion",
+  title: "ds-react/Accordion",
   component: Accordion,
   subcomponents: {
     AccordionItem,
@@ -14,77 +14,89 @@ export default {
   },
 };
 
-export const All = () => {
+const Content = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+    laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
+    nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
+    proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
+    sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
+    sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
+    commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
+    ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
+    velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+    laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+    reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
+    eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+  </Accordion.Content>
+);
+
+export const Default = (props) => {
   const [open, setOpen] = useState(false);
 
+  const Item = () =>
+    props.controlled ? (
+      <Accordion.Item
+        open={open}
+        renderContentWhenClosed={props.renderContentWhenClosed}
+      >
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    ) : (
+      <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    );
   return (
-    <>
-      <h1>Accordion</h1>
-      <h2>Controlled</h2>
-      <Accordion>
-        <Accordion.Item open={open}>
-          <Accordion.Header onClick={() => setOpen(!open)}>
-            Accordion header text
-          </Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <h2>Un-controlled</h2>
-      <Accordion>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    </>
+    <Accordion>
+      {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Item key={y} />
+      ))}
+    </Accordion>
   );
 };
+
+Default.args = {
+  controlled: false,
+  renderContentWhenClosed: false,
+  nItems: 2,
+};
+
+export const Controlled = () => {
+  const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  return (
+    <Accordion>
+      <Accordion.Item open={open}>
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+      <Accordion.Item open={open2}>
+        <Accordion.Header onClick={() => setOpen2(!open2)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export const Uncontrolled = () => (
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  </Accordion>
+);

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

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

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

@@ -14,21 +14,22 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * Decides what design the alert will have
+   * Changes colors and icon usage when changed
    */
   variant: "error" | "warning" | "info" | "success";
   /**
    * Changes padding and font-sizes
-   * @default "medium"
+   * @default medium
    */
   size?: "medium" | "small";
   /**
-   * Toggles full-width Alert
+   * Toggles full-width Alert (removes border-radius)
    * @default false
    */
   fullWidth?: boolean;
   /**
    * Removes background from Alert
+   * @default false
    */
   inline?: boolean;
 }
@@ -52,7 +53,7 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       children,

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading } from "..";
+import { BodyLong, Heading as DsHeading } from "..";
 
 export default {
-  title: "ds-react/alert",
+  title: "ds-react/Alert",
   component: Alert,
 };
 
@@ -14,111 +14,101 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
   "success",
 ];
 
-export const All = () => {
+export const Default = (props) => (
+  <Alert
+    variant={props.variant}
+    size={props.size}
+    fullWidth={props.fullWidth}
+    inline={props.inline}
+  >
+    {props.children}
+  </Alert>
+);
+
+Default.args = {
+  variant: "info",
+  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+};
+
+export const Small = () => {
   return (
-    <>
-      <h1>Alert</h1>
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Alert fullWidth</h2>
+    </div>
+  );
+};
+
+export const FullWidth = () => {
+  return (
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert fullWidth key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} fullWidth>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert fullWidth key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant}>
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant}>
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-    </>
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} fullWidth size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Inline = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline>
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Heading = () => {
+  return (
+    <div className="colgap">
+      <Alert variant="info">
+        <DsHeading spacing size="small" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+      <Alert variant="info" size="small">
+        <DsHeading spacing size="xsmall" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+    </div>
   );
 };

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

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

@navikt/core/react/src/button/Button.tsx

@@ -7,23 +7,22 @@ import { useClientLayoutEffect } from "../util";
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Component content
+   * Button content
    */
   children: React.ReactNode;
   /**
-   * Changes design and interactions
+   * Changes design and interaction-visuals
    * @default "primary"
    */
   variant?: "primary" | "secondary" | "tertiary" | "danger";
   /**
    * Changes padding, height and font-size
-   * @default "medium"
+   * @default medium
    */
   size?: "medium" | "small" | "xsmall";
   /**
    * Prevent the user from interacting with the button: it cannot be pressed or focused.
    * @note Avoid using if possible for accessibility purposes
-   * @default false
    */
   disabled?: boolean;
   /**
@@ -33,7 +32,10 @@ export interface ButtonProps
   loading?: boolean;
 }
 
-const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
+export const Button: OverridableComponent<
+  ButtonProps,
+  HTMLButtonElement
+> = forwardRef(
   (
     {
       as: Component = "button",

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

@@ -1,30 +1,29 @@
-import React, { useState } from "react";
+import { Star } from "@navikt/ds-icons";
+import React from "react";
 import { Button } from "./index";
-import { Success } from "@navikt/ds-icons";
 
 export default {
-  title: "ds-react/button",
+  title: "ds-react/Button",
   component: Button,
   parameters: {
     chromatic: { delay: 300 },
   },
+  argTypes: {
+    variant: {
+      control: {
+        type: "radio",
+        options: ["primary", "secondary", "tertiary", "danger"],
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
 };
 
-const Section = ({ children }) => (
-  <div
-    style={{
-      display: "flex",
-      gap: 16,
-      gridAutoFlow: "column",
-      justifyContent: "start",
-      padding: 24,
-      paddingLeft: 0,
-    }}
-  >
-    {children}
-  </div>
-);
-
 const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
   "primary",
   "secondary",
@@ -39,119 +38,132 @@ const varSwitch = {
   danger: "Danger",
 };
 
-export const All = () => {
-  const [loadingState, setLoadingState] = useState(true);
-  const [content, setContent] = useState<string>("");
-
-  const toggleLoading = () => {
-    setLoadingState(!loadingState);
-  };
-
+export const Default = (props) => {
   return (
-    <div style={{ paddingLeft: "1rem" }}>
-      <h1>Button</h1>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>disabled</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} disabled>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>As link</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button as="a" key={variant} variant={variant} href="the-link">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Xsmall</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {variant} <Success />
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <Success /> {variant}
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/loader</h2>
-      <Button onClick={toggleLoading}>Toggle loaders</Button>
-      <Button onClick={() => setContent((content) => `${content} wat`)}>
-        Change content
-      </Button>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {content || varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/loader</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            size="small"
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-    </div>
+    <Button variant={props.variant} size={props.size} loading={props.loading}>
+      {props.icon ? <Star /> : null}
+      {props.children}
+      {props.icon ? <Star /> : null}
+    </Button>
   );
 };
+
+Default.args = {
+  icon: false,
+  loading: false,
+  children: "Knapp",
+};
+
+export const Small = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="small">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const XSmall = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="xsmall">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const Loading = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading>
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="small">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="xsmall">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Icon = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const IconWText = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Link = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { MicroCard } from "../index.ts";
 
-<Meta title="ds-react/card/intro" />
+<Meta title="ds-react(deprecated)/card/intro" />
 
 # Hvordan ta i bruk card
 

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

@@ -2,7 +2,7 @@ import React from "react";
 import { MicroCard } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/card",
+  title: "ds-react(deprecated)/card",
   component: MicroCard,
 } as Meta;
 

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

@@ -1,8 +1,14 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox, CheckboxProps } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { useFormField } from "./useFormField";
 
-export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
+export interface ConfirmationPanelProps
+  extends Omit<
+    CheckboxProps,
+    "children" | "indeterminate" | "hideLabel" | "error"
+  > {
   /**
    * Additional information on panel
    */
@@ -12,22 +18,34 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
    */
   label: React.ReactNode;
   /**
-   * Checked state for checkbox
+   * Error message for element
    */
-  checked: boolean;
+  error?: React.ReactNode;
+  /**
+   * Override internal errorId
+   */
+  errorId?: string;
 }
 
-const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
-  ({ className, children, label, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--small": props.size === "small",
-          "navds-confirmation-panel--error": !!props.error,
-          "navds-confirmation-panel--checked": !!props.checked,
-        })}
-      >
+export const ConfirmationPanel = forwardRef<
+  HTMLDivElement,
+  ConfirmationPanelProps
+>(({ className, children, label, ...props }, ref) => {
+  const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
+    props,
+    "confirmationPanel"
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={cl("navds-confirmation-panel", "navds-form-field", className, {
+        "navds-confirmation-panel--small": size === "small",
+        "navds-confirmation-panel--error": hasError,
+        "navds-confirmation-panel--checked": !!props.checked,
+      })}
+    >
+      <div className="navds-confirmation-panel__inner">
         {children && (
           <BodyLong
             size={props.size}
@@ -36,10 +54,15 @@ const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
             {children}
           </BodyLong>
         )}
-        <Checkbox {...props}>{label}</Checkbox>
+        <Checkbox {...props} {...inputProps} error={hasError} size={size}>
+          {label}
+        </Checkbox>
       </div>
-    );
-  }
-);
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
 
 export default ConfirmationPanel;

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

@@ -7,7 +7,7 @@ import { useFieldset } from "./useFieldset";
 
 export type FieldsetContextProps = {
   /**
-   * Error message applied to element
+   * Error message applied to element,
    */
   error?: React.ReactNode;
   /**
@@ -18,12 +18,16 @@ export type FieldsetContextProps = {
    * Changes paddings, margins and font-sizes
    */
   size: "medium" | "small";
+  /**
+   * Sets fieldset and all form-children to disabled
+   */
   disabled: boolean;
 };
 
 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
   null
 );
+
 export interface FieldsetProps
   extends FormFieldProps,
     FieldsetHTMLAttributes<HTMLFieldSetElement> {
@@ -46,7 +50,7 @@ export interface FieldsetProps
   errorPropagation?: boolean;
 }
 
-const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
     const {
       inputProps,

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

@@ -1 +1,5 @@
-export { default, FieldsetProps, FieldsetContext } from "./Fieldset";
+export {
+  default as Fieldset,
+  FieldsetProps,
+  FieldsetContext,
+} from "./Fieldset";

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

@@ -9,11 +9,11 @@ export interface SelectProps
   extends FormFieldProps,
     Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
   /**
-   * Collection of <option>-elements
+   * Collection of <option />-elements
    */
   children: React.ReactNode;
   /**
-   * Expose the HTML size attribute
+   * Exposes the HTML size attribute
    */
   htmlSize?: number;
   /**
@@ -26,81 +26,85 @@ export interface SelectProps
   hideLabel?: boolean;
 }
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    children,
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    ...rest
-  } = props;
+    const {
+      children,
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-select--error": hasError,
-          "navds-select--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-select__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-select--error": hasError,
+            "navds-select--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-select__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-select__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-select__container">
-        <select
-          {...omit(rest, ["error", "errorId", "size"])}
-          {...inputProps}
-          ref={ref}
-          className={cl(
-            "navds-select__input",
-            "navds-body-short",
-            `navds-body--${size ?? "medium"}`
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-select__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-select__container">
+          <select
+            {...omit(rest, ["error", "errorId", "size"])}
+            {...inputProps}
+            ref={ref}
+            className={cl(
+              "navds-select__input",
+              "navds-body-short",
+              `navds-body--${size ?? "medium"}`
+            )}
+            size={props.htmlSize}
+          >
+            {children}
+          </select>
+          <Expand className="navds-select__chevron" aria-hidden />
+        </div>
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}
-          size={props.htmlSize}
-        >
-          {children}
-        </select>
-        <Expand className="navds-select__chevron" aria-hidden />
+        </div>
       </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default Select;

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

@@ -47,96 +47,103 @@ export interface SwitchProps
   loading?: boolean;
   /**
    * Positions switch on left/right side of label
+   * @default "left"
    */
   position?: "left" | "right";
+  /**
+   * Adds a description to extend labling of Switch
+   */
+  description?: string;
 }
 
-const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
-  const { inputProps, size } = useFormField(props, "switch");
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (props, ref) => {
+    const { inputProps, size } = useFormField(props, "switch");
 
-  const {
-    children,
-    className,
-    description,
-    hideLabel = false,
-    loading,
-    checked: checkedProp,
-    defaultChecked,
-    position = "left",
-    ...rest
-  } = props;
+    const {
+      children,
+      className,
+      description,
+      hideLabel = false,
+      loading,
+      checked: checkedProp,
+      defaultChecked,
+      position = "left",
+      ...rest
+    } = props;
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  const [checked, setChecked] = useState(
-    defaultChecked ?? checkedProp ?? false
-  );
+    const [checked, setChecked] = useState(
+      defaultChecked ?? checkedProp ?? false
+    );
 
-  useEffect(() => {
-    checkedProp !== undefined && setChecked(checkedProp);
-  }, [checkedProp]);
+    useEffect(() => {
+      checkedProp !== undefined && setChecked(checkedProp);
+    }, [checkedProp]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
-    props.onChange && props.onChange(e);
-  };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.checked);
+      props.onChange && props.onChange(e);
+    };
 
-  return (
-    <div
-      className={cl(
-        "navds-switch",
-        props.className,
-        `navds-switch--${size}`,
-        `navds-switch--${position}`,
-        {
-          "navds-switch--loading": loading,
-          "navds-switch--disabled": inputProps.disabled ?? loading,
-        }
-      )}
-    >
-      <input
-        {...omit(rest, ["size"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        disabled={inputProps.disabled ?? loading}
-        checked={checkedProp}
-        defaultChecked={defaultChecked}
-        ref={ref}
-        type="checkbox"
-        onChange={(e) => handleChange(e)}
-        className={cl(className, "navds-switch__input")}
-      />
-      <span className="navds-switch__track">
-        <span className="navds-switch__thumb">
-          {loading ? (
-            <Loader size="xsmall" aria-live="polite" />
-          ) : checked ? (
-            <SelectedIcon />
-          ) : null}
+    return (
+      <div
+        className={cl(
+          "navds-switch",
+          props.className,
+          `navds-switch--${size}`,
+          `navds-switch--${position}`,
+          {
+            "navds-switch--loading": loading,
+            "navds-switch--disabled": inputProps.disabled ?? loading,
+          }
+        )}
+      >
+        <input
+          {...omit(rest, ["size"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          disabled={inputProps.disabled ?? loading}
+          checked={checkedProp}
+          defaultChecked={defaultChecked}
+          ref={ref}
+          type="checkbox"
+          onChange={(e) => handleChange(e)}
+          className={cl(className, "navds-switch__input")}
+        />
+        <span className="navds-switch__track">
+          <span className="navds-switch__thumb">
+            {loading ? (
+              <Loader size="xsmall" aria-live="polite" />
+            ) : checked ? (
+              <SelectedIcon />
+            ) : null}
+          </span>
         </span>
-      </span>
-      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
-        <div
-          className={cl("navds-switch__content", {
-            "navds-sr-only": hideLabel,
-            "navds-switch--with-description": !!description && !hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size} className="navds-switch__label">
-            {children}
-          </BodyShort>
-          {description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-switch__description"
-            >
-              {description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+          <div
+            className={cl("navds-switch__content", {
+              "navds-sr-only": hideLabel,
+              "navds-switch--with-description": !!description && !hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size} className="navds-switch__label">
+              {children}
+            </BodyShort>
+            {description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-switch__description"
+              >
+                {description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Switch;

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

@@ -8,7 +8,15 @@ export interface TextFieldProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
-   * Expose the HTML size attribute
+   * Controlled value
+   */
+  value?: string;
+  /**
+   * Defaults input-value without needing controlled-state
+   */
+  defaultValue?: string;
+  /**
+   * Exposes the HTML size attribute
    */
   htmlSize?: number;
   /**
@@ -20,99 +28,103 @@ export interface TextFieldProps
    */
   label: React.ReactNode;
   /**
-   * Type of form control
+   * Type of form control. Picking the correct type helps user fill inn their required information
    * @default "text"
    */
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    type = "text",
-    ...rest
-  } = props;
+    const {
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      type = "text",
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-text-field--error": hasError,
-          "navds-text-field--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
-      >
-        {label}
-      </Label>
-
-      {!!description && (
-        <>
-          {size === "medium" ? (
-            <BodyShort
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </BodyShort>
-          ) : (
-            <Detail
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </Detail>
-          )}
-        </>
-      )}
-      <input
-        {...omit(rest, ["error", "errorId", "size"])}
-        {...inputProps}
-        ref={ref}
-        type={type}
+    return (
+      <div
         className={cl(
-          "navds-text-field__input",
-          "navds-body-short",
-          `navds-body-${size ?? "medium"}`
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-text-field--error": hasError,
+            "navds-text-field--disabled": !!inputProps.disabled,
+          }
         )}
-        size={htmlSize}
-      />
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      >
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-text-field__label", {
+            "navds-sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
+
+        {!!description && (
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
+        )}
+        <input
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          ref={ref}
+          type={type}
+          className={cl(
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size ?? "medium"}`
+          )}
+          size={htmlSize}
+        />
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default TextField;

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import { BodyShort, Label, omit } from "..";
@@ -13,18 +13,25 @@ export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
-   * Visually allowed length of content
+   * Allowed character-count for content
+   * @note This is just a visual validator, you need to set actual character-limits if needed
    */
   maxLength?: number;
-  value: string;
-  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
   /**
-   * Maximum number of rows to display.
+   * Controlled value
+   */
+  value?: string;
+  /**
+   * Defaults input-value without needing controlled-state
+   */
+  defaultValue?: string;
+  /**
+   * Maximum number of character rows to display.
    * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
    */
   maxRows?: number;
   /**
-   * Minimum number of rows to display.
+   * Minimum number of character-rows to display when empty.
    */
   minRows?: number;
   /**
@@ -37,7 +44,7 @@ export interface TextareaProps
   hideLabel?: boolean;
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {
       inputProps,
@@ -60,6 +67,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const maxLengthId = `TextareaMaxLength-${useId()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
+    const [controlledValue, setControlledValue] = useState<string>(
+      props?.defaultValue ?? ""
+    );
+
     return (
       <div
         className={cl(
@@ -98,6 +109,11 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <TextareaAutosize
             {...omit(rest, ["error", "errorId", "size"])}
             {...inputProps}
+            onChange={(e) =>
+              props.onChange
+                ? props.onChange(e)
+                : setControlledValue(e.target.value)
+            }
             ref={ref}
             className={cl(
               "navds-textarea__input",
@@ -119,7 +135,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               </span>
               <Counter
                 maxLength={maxLength}
-                currentLength={props.value.length}
+                currentLength={props.value?.length ?? controlledValue?.length}
                 size={size}
               />
             </>

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -6,11 +6,12 @@ import { Checkbox, CheckboxGroup } from ".";
 
 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
 
-test("checkbox group chains onChange calls", () => {
+test("checkbox group chains onChange calls", async () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();
   const value = faker.datatype.string();
   const label = faker.datatype.string();
+  const user = userEvent.setup();
 
   render(
     <CheckboxGroup legend="legend" onChange={onGroupChange}>
@@ -20,7 +21,7 @@ test("checkbox group chains onChange calls", () => {
     </CheckboxGroup>
   );
 
-  userEvent.click(screen.getByLabelText(label));
+  await user.click(screen.getByLabelText(label));
 
   expect(onGroupChange).toBeCalledTimes(1);
   expect(onGroupChange).toBeCalledWith([value]);
@@ -36,21 +37,24 @@ describe("Checkbox handles controlled-state correctly", () => {
     </CheckboxGroup>
   );
 
-  test("Checkbox is still checked after click when controlled", () => {
+  test("Checkbox is still checked after click when controlled", async () => {
+    const user = userEvent.setup();
     render(<CheckboxComponent value={["value1", "value2"]} />);
-    userEvent.click(screen.getByLabelText("label1"));
-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label1"));
+    await user.click(screen.getByLabelText("label2"));
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
       true
     );
+
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
       true
     );
   });
 
-  test("onChange called with expected values", () => {
+  test("onChange called with expected values", async () => {
     const onGroupChange = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <CheckboxComponent
@@ -59,11 +63,11 @@ describe("Checkbox handles controlled-state correctly", () => {
       />
     );
 
-    userEvent.click(screen.getByLabelText("label1"));
+    await user.click(screen.getByLabelText("label1"));
 
     expect(onGroupChange).lastCalledWith(["value2"]);
 
-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label2"));
 
     expect(onGroupChange).lastCalledWith(["value1"]);
   });

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -8,12 +8,12 @@ export interface CheckboxProps
   extends Omit<FormFieldProps, "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Checkbox has error
+   * Adds error indication on checkbox
    * @default false
    */
   error?: boolean;
   /**
-   * Label for checkbox
+   * Checkbox label
    */
   children: React.ReactNode;
   /**
@@ -29,72 +29,78 @@ export interface CheckboxProps
    * @default false
    */
   indeterminate?: boolean;
+  /**
+   * Adds a description to extend labling of Checkbox
+   */
+  description?: string;
 }
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { inputProps, hasError, size } = useCheckbox(props);
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const { inputProps, hasError, size } = useCheckbox(props);
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  return (
-    <div
-      className={cl(
-        props.className,
-        "navds-checkbox",
-        `navds-checkbox--${size}`,
-        {
-          "navds-checkbox--error": hasError,
-          "navds-checkbox--disabled": inputProps.disabled,
-        }
-      )}
-    >
-      <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "description",
-          "hideLabel",
-          "indeterminate",
-        ])}
-        {...inputProps}
-        type="checkbox"
-        className="navds-checkbox__input"
-        aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
-        ref={(el) => {
-          if (el) {
-            el.indeterminate = props.indeterminate ?? false;
+    return (
+      <div
+        className={cl(
+          props.className,
+          "navds-checkbox",
+          `navds-checkbox--${size}`,
+          {
+            "navds-checkbox--error": hasError,
+            "navds-checkbox--disabled": inputProps.disabled,
           }
+        )}
+      >
+        <input
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+          ])}
+          {...inputProps}
+          type="checkbox"
+          className="navds-checkbox__input"
+          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
+          ref={(el) => {
+            if (el) {
+              el.indeterminate = props.indeterminate ?? false;
+            }
 
-          if (typeof ref === "function") {
-            ref(el);
-          } else if (ref != null) {
-            ref.current = el;
-          }
-        }}
-      />
-      <label htmlFor={inputProps.id} className="navds-checkbox__label">
-        <div
-          className={cl("navds-checkbox__content", {
-            "navds-sr-only": props.hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size}>
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-checkbox__description"
-            >
-              {props.description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref != null) {
+              ref.current = el;
+            }
+          }}
+        />
+        <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <div
+            className={cl("navds-checkbox__content", {
+              "navds-sr-only": props.hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size}>
+              {props.children}
+            </BodyShort>
+            {props.description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-checkbox__description"
+              >
+                {props.description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Checkbox;

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -18,11 +18,11 @@ export interface CheckboxGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Checkboxes
+   * Collection of <Checkbox/>
    */
   children: React.ReactNode;
   /**
-   * Controlled state for group
+   * Controlled state for checkboxes.
    */
   value?: any[];
   /**
@@ -35,7 +35,10 @@ export interface CheckboxGroupProps
   onChange?: (value: any[]) => void;
 }
 
-const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
+export const CheckboxGroup = forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref

@navikt/core/react/src/form/checkbox/checkbox.stories.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import { Checkbox, CheckboxGroup } from "../../index";
+import { Meta } from "@storybook/react/types-6-0";
+
+export default {
+  title: "ds-react/Form/Checkbox",
+  component: Checkbox,
+  subcomponents: {
+    CheckboxGroup,
+  },
+} as Meta;
+
+export const Default = (props) => {
+  const [state, setState] = useState(["checkbox1"]);
+
+  return (
+    <div>
+      <CheckboxGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.errorGroup ? "Errormelding" : undefined}
+        {...props}
+      >
+        <Checkbox
+          value="checkbox1"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Apple"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox2"
+          error={props.errorSingle}
+          description={
+            props.checkboxDescription
+              ? "Quis laborum culpa enim amet cillum veniam."
+              : undefined
+          }
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Orange"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox3"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Banana"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox4"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Melon"}
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  );
+};
+
+Default.args = {
+  controlled: false,
+  legend: "Legend-tekst",
+  checkboxDescription: false,
+  hideLabel: false,
+  hideLegend: false,
+  errorSingle: false,
+  children: "",
+  description: "",
+};
+
+export const Group = () => (
+  <CheckboxGroup legend="Group legend" defaultValue={["tekst2"]}>
+    <Checkbox value="tekst">Checkboxtekst</Checkbox>
+    <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+  </CheckboxGroup>
+);
+
+export const GroupError = () => (
+  <CheckboxGroup
+    legend="Group legend"
+    defaultValue={["tekst2"]}
+    error="Group errormelding"
+  >
+    <Checkbox value="tekst">Checkboxtekst</Checkbox>
+    <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+  </CheckboxGroup>
+);
+
+export const GroupSmall = () => (
+  <CheckboxGroup legend="Group legend" defaultValue={["tekst2"]} size="small">
+    <Checkbox value="tekst">Checkboxtekst</Checkbox>
+    <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+  </CheckboxGroup>
+);
+
+export const GroupDescription = () => (
+  <CheckboxGroup
+    legend="Group legend"
+    defaultValue={["tekst2"]}
+    description="Group description"
+  >
+    <Checkbox value="tekst">Checkboxtekst</Checkbox>
+    <Checkbox value="tekst2">Checkboxtekst</Checkbox>
+  </CheckboxGroup>
+);
+
+export const Single = () => (
+  <div className="colspan">
+    <Checkbox value="tekst">Checkboxtekst</Checkbox>
+    <Checkbox value="tekst" defaultChecked>
+      Checkboxtekst
+    </Checkbox>
+  </div>
+);
+
+export const SingleSmall = () => (
+  <div className="colspan">
+    <Checkbox value="tekst" size="small">
+      Checkboxtekst
+    </Checkbox>
+    <Checkbox value="tekst" defaultChecked size="small">
+      Checkboxtekst
+    </Checkbox>
+  </div>
+);
+
+export const SingleDescription = () => (
+  <div className="colspan">
+    <Checkbox value="tekst" description="checkboxdescription">
+      Checkboxtekst
+    </Checkbox>
+    <Checkbox value="tekst" defaultChecked description="checkboxdescription">
+      Checkboxtekst
+    </Checkbox>
+  </div>
+);
+
+export const SingleError = () => (
+  <div className="colspan">
+    <Checkbox value="tekst" error>
+      Checkboxtekst
+    </Checkbox>
+    <Checkbox value="tekst" defaultChecked error>
+      Checkboxtekst
+    </Checkbox>
+  </div>
+);
+
+export const Indeterminate = () => {
+  const [checked, setChecked] = useState([true, false]);
+
+  return (
+    <>
+      <Checkbox
+        checked={checked[0] && checked[1]}
+        indeterminate={checked[0] !== checked[1]}
+        onChange={(e) => setChecked([e.target.checked, e.target.checked])}
+      >
+        Parent
+      </Checkbox>
+      <div style={{ paddingLeft: "2rem" }}>
+        <Checkbox
+          checked={checked[0]}
+          onChange={(e) => setChecked([e.target.checked, checked[1]])}
+        >
+          Child 1
+        </Checkbox>
+        <Checkbox
+          checked={checked[1]}
+          onChange={(e) => setChecked([checked[0], e.target.checked])}
+        >
+          Child 2
+        </Checkbox>
+      </div>
+    </>
+  );
+};

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.mdx

@@ -1,203 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Checkbox, CheckboxGroup } from "../index";
-
-<Meta title="ds-react/form/checkbox/intro" />
-
-# Hvordan ta i bruk Checkbox
-
-```jsx
-<CheckboxGroup legend="Mollit eiusmod">
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup legend="Mollit eiusmod">
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange">Orange</Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-Label å checkbox settes her da med children
-
-## Description
-
-Man kan både sette en description på CheckboxGroup og selve checkbox
-
-```jsx
-<CheckboxGroup legend="Culpa cupidatat" description="Exercitation do labore">
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange" description="Laborum ad">
-    Orange
-  </Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" description="Exercitation do labore">
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange" description="Laborum ad">
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-## Errors
-
-Feilmeldinger kan bare settes på gruppa
-
-```jsx
-<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange">Orange</Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-Enkelt-checkboxer tar en `boolean` error prop
-
-```jsx
-<Checkbox value="Apple" error>
-  Apple
-</Checkbox>
-```
-
-<Canvas>
-  <Checkbox value="Apple" error>
-    Apple
-  </Checkbox>
-</Canvas>
-
-## Sizing
-
-Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
-
-```jsx
-<CheckboxGroup
-  legend="Mollit eiusmod"
-  error="Boks nr 2 må være valgt"
-  size="small"
->
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup
-    legend="Mollit eiusmod"
-    error="Boks nr 2 må være valgt"
-    size="small"
-  >
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange" error="Boksen må være valgt">
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-## defaultValues
-
-```jsx
-<CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange">Orange</Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-## hideLegend
-
-Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/description bare vises for skjermlesere
-
-```jsx
-<CheckboxGroup legend="Mollit eiusmod" hideLegend>
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange">Orange</Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
-</Canvas>
-
-## hideLabel
-
-Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
-
-```jsx
-<Checkbox value="Orange" hideLabel>
-  Orange
-</Checkbox>
-```
-
-<Canvas>
-  <Checkbox value="Orange" hideLabel>
-    Orange
-  </Checkbox>
-</Canvas>
-
-## Disabled
-
-Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
-
-NOTE: Husk at disabled bør unngås!
-
-```jsx
-<CheckboxGroup legend="Mollit eiusmod" disabled>
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-
-<CheckboxGroup legend="Mollit eiusmod">
-  <Checkbox value="Apple" disabled>Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
-```
-
-<Canvas>
-  <div>
-    <CheckboxGroup legend="Mollit eiusmod" disabled>
-      <Checkbox value="Apple">Apple</Checkbox>
-      <Checkbox value="Orange">Orange</Checkbox>
-      <Checkbox value="Melon">Melon</Checkbox>
-    </CheckboxGroup>
-    <CheckboxGroup legend="Mollit eiusmod">
-      <Checkbox value="Apple" disabled>
-        Apple
-      </Checkbox>
-      <Checkbox value="Orange">Orange</Checkbox>
-      <Checkbox value="Melon">Melon</Checkbox>
-    </CheckboxGroup>
-  </div>
-</Canvas>