Lerna versionbump [ci skip]

- @navikt/ds-react@0.18.4
 - @navikt/ds-react-internal@0.13.4

.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

@@ -10,7 +10,7 @@ module.exports = {
     return config;
   },
   devServer: { stats: "errors-only" },
-  stories: () => getStories(),
+  stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
@@ -33,4 +33,5 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
+  staticDirs: ["./public"],
 };

.storybook/preview.js

@@ -1,13 +1,21 @@
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
+import "./layout.css";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+
+initialize();
+
+export const decorators = [mswDecorator];
 
 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

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

@navikt/README.md

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

@navikt/core/css/alert.css

@@ -3,53 +3,32 @@
   --navds-alert-color-error-border: var(
     --navds-semantic-color-feedback-danger-border
   );
-  --navds-alert-color-error-background: var(
-    --navds-semantic-color-feedback-danger-background
-  );
+  --navds-alert-color-error-background: var(--navds-global-color-red-50);
   --navds-alert-color-warning-border: var(
     --navds-semantic-color-feedback-warning-border
   );
-  --navds-alert-color-warning-background: var(
-    --navds-semantic-color-feedback-warning-background
-  );
+  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
   --navds-alert-color-info-border: var(
     --navds-semantic-color-feedback-info-border
   );
-  --navds-alert-color-info-background: var(
-    --navds-semantic-color-feedback-info-background
-  );
+  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
   --navds-alert-color-success-border: var(
     --navds-semantic-color-feedback-success-border
   );
-  --navds-alert-color-success-background: var(
-    --navds-semantic-color-feedback-success-background
-  );
+  --navds-alert-color-success-background: var(--navds-global-color-green-50);
   --navds-alert-color-error-icon: var(
     --navds-semantic-color-feedback-danger-icon
   );
-  --navds-alert-color-error-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-alert-color-warning-icon: var(
-    --navds-semantic-color-feedback-warning-icon
-  );
-  --navds-alert-color-warning-icon-background: var(
-    --navds-semantic-color-component-background-inverted
-  );
+  --navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
   --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
-  --navds-alert-color-info-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
   --navds-alert-color-success-icon: var(
     --navds-semantic-color-feedback-success-icon
   );
-  --navds-alert-color-success-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
+  --navds-alert-color-icon-background: var(--navds-global-color-white);
 }
 
 .navds-alert {
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid;
   border-color: var(--navds-alert-color-border);
   padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
@@ -91,7 +70,7 @@
   color: var(--navds-alert-color-error-icon);
   background: radial-gradient(
     circle,
-    var(--navds-alert-color-error-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
     0,
     transparent
   );
@@ -104,12 +83,11 @@
 
 .navds-alert--warning > .navds-alert__icon {
   color: var(--navds-alert-color-warning-icon);
-  background: radial-gradient(
-    circle,
-    var(--navds-alert-color-warning-icon-background) 50%,
-    0,
-    transparent
-  );
+  background: linear-gradient(
+      var(--navds-alert-color-icon-background),
+      var(--navds-alert-color-icon-background)
+    )
+    center / 16% 60% no-repeat;
 }
 
 .navds-alert--info {
@@ -121,7 +99,7 @@
   color: var(--navds-alert-color-info-icon);
   background: radial-gradient(
     circle,
-    var(--navds-alert-color-info-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
     0,
     transparent
   );
@@ -136,7 +114,7 @@
   color: var(--navds-alert-color-success-icon);
   background: radial-gradient(
     circle,
-    var(--navds-alert-color-success-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
     0,
     transparent
   );

@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;
@@ -88,7 +122,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
   min-width: 48px;
   padding: var(--navds-spacing-3);
 }
@@ -99,6 +133,11 @@
   min-width: 32px;
 }
 
+.navds-button--xsmall {
+  padding: 0.125rem 0.375rem;
+  min-width: 24px;
+}
+
 .navds-button:focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
@@ -115,7 +154,8 @@
   font-size: 1.5rem;
 }
 
-.navds-button--small svg {
+.navds-button--small svg,
+.navds-button--xsmall svg {
   font-size: 1.25rem;
 }
 
@@ -159,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 {
@@ -173,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),
@@ -196,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/card.css

@@ -27,7 +27,7 @@
 */
 
 .navds-card__micro {
-  border-radius: 1rem;
+  border-radius: var(--navds-border-radius-full);
   color: var(--navds-card-micro-color-text);
   display: inline-flex;
   padding: var(--navds-spacing-1) var(--navds-spacing-2);

@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

@@ -1,15 +1,21 @@
 :root {
   --navds-confirmation-panel-color-background: var(
-    --navds-semantic-color-feedback-warning-background
+    --navds-global-color-orange-50
   );
   --navds-confirmation-panel-color-background-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-global-color-green-50
+  );
+  --navds-confirmation-panel-color-border: var(
+    --navds-semantic-color-feedback-warning-border
   );
   --navds-confirmation-panel-color-border-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-confirmation-panel-color-border-error: var(
+    --navds-semantic-color-feedback-danger-background
   );
   --navds-confirmation-panel-color-background-error: var(
-    --navds-semantic-color-feedback-danger-background
+    --navds-global-color-red-50
   );
   --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
     --navds-global-color-green-700
@@ -33,7 +39,8 @@
   flex-direction: column;
   gap: var(--navds-spacing-4);
   padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
+  border: 1px solid var(--navds-confirmation-panel-color-border);
   background-color: var(--navds-confirmation-panel-color-background);
   transition: background-color linear 100ms;
 }

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

@@ -11,4 +11,4 @@
 @import "switch.css";
 @import "text-field.css";
 @import "textarea.css";
-@import "search-field.css";
+@import "search.css";

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

@@ -57,12 +57,12 @@
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   flex-shrink: 0;
 }
 
 .navds-radio__label::before {
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
 }
 
 .navds-checkbox__content,
@@ -121,7 +121,7 @@
   background-color: var(--navds-radio-checkbox-color-background);
   width: 0.75rem;
   height: 0.25rem;
-  border-radius: 1px;
+  border-radius: 1px; /* Custom value OK */
   flex-shrink: 0;
 }
 
@@ -168,9 +168,15 @@
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked)
+  + .navds-radio__label::before {
   background-color: var(--navds-radio-checkbox-color-background-hover);
 }
 

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

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

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

@@ -0,0 +1,158 @@
+: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 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  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-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-search-color-text);
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--navds-search-color-clear-hover);
+}
+
+.navds-search__button-clear:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 64px;
+  min-height: 32px;
+  border-radius: 0;
+  border-top-right-radius: var(--navds-border-radius-medium);
+  border-bottom-right-radius: var(--navds-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 40px;
+}
+
+.navds-search__button-search.navds-button--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--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,
+    -1px 0 0 0 var(--navds-search-color-border-hover);
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within
+  + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+
+.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--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--secondary:focus:active {
+  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus,
+.navds-search__button-clear,
+.navds-search__button-search:focus {
+  z-index: 1;
+}

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

@@ -22,7 +22,7 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--navds-select-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-select-color-border);
   width: 100%;
   box-sizing: border-box;

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

@@ -112,7 +112,7 @@
   position: absolute;
   top: var(--navds-spacing-3);
   left: 0;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -155,7 +155,7 @@
 .navds-switch__thumb {
   background-color: var(--navds-switch-color-thumb);
   color: var(--navds-switch-color-thumb-icon);
-  border-radius: 2.5px;
+  border-radius: var(--navds-border-radius-small);
   width: 20px;
   height: 20px;
   position: absolute;

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

@@ -1,4 +1,6 @@
-: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
   );
@@ -17,19 +19,37 @@
     --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: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;
+  color: var(--navds-text-field-color-text);
 }
 
-.navds-form-field--small > .navds-text-field__input {
+.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/form/textarea.css

@@ -32,7 +32,7 @@
   appearance: none;
   padding: var(--navds-spacing-2);
   background-color: var(--navds-textarea-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-textarea-color-border);
   resize: none;
   width: 100%;

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

@@ -18,7 +18,7 @@
 
 .navds-guide-panel__content {
   background-color: var(--navds-guide-panel-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 2px solid var(--navds-guide-panel-color-border);
   min-height: 7.25rem;
   padding: 1.5rem;
@@ -58,7 +58,7 @@
 /* Guide illustration frame */
 .navds-guide__illustration {
   background: var(--navds-guide-panel-color-illustration-background);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   overflow: hidden;
 }
 

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

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

@navikt/core/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import "baseline/baseline.css";
 @import "typography.css";
 @import "grid.css";
@@ -13,13 +14,19 @@
 @import "loader.css";
 @import "menu.css";
 @import "modal.css";
+@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/modal.css

@@ -11,7 +11,7 @@
 
 .navds-modal {
   background-color: var(--navds-modal-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   display: block;
   position: relative;
   overflow: auto;

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.15.2",
+  "version": "0.17.0",
   "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.1",
+    "@navikt/ds-tokens": "^0.9.0",
     "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/pagination.css

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

@navikt/core/css/panel.css

@@ -8,7 +8,7 @@
 .navds-panel {
   background-color: var(--navds-panel-color-background);
   padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-small);
   border: 1px solid transparent;
 }
 

@navikt/core/css/popover.css

@@ -11,7 +11,7 @@
   box-shadow: var(--navds-shadow-popover);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
 }
 
 .navds-popover__content {

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

@@ -0,0 +1,54 @@
+.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);
+  text-align: left;
+}
+
+.navds-read-more:hover {
+  text-decoration: none;
+}
+
+.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 {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(180deg);
+}
+
+.navds-read-more + .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  padding-top: var(--navds-spacing-2);
+}
+
+.navds-read-more__content {
+  display: flex;
+  align-items: stretch;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-read-more__content::before {
+  content: "";
+  display: block;
+  width: 2px;
+  background-color: var(--navds-semantic-color-border-muted);
+  margin: 0 9px;
+  flex-shrink: 0;
+}

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

@@ -38,7 +38,7 @@
   align-items: center;
   background: var(--navds-speechbubble-color-illustration-background);
   color: var(--navds-speechbubble-color-illustration);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -59,7 +59,7 @@
   width: fit-content;
   max-width: 37.5rem;
   background-color: var(--navds-speechbubble-color-background);
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -72,7 +72,7 @@
 }
 
 .navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
   border-bottom-right-radius: 2px;
 }
 

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

@@ -72,7 +72,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.5rem;
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
@@ -107,7 +107,7 @@
   left: calc(-50% + 2rem);
   display: block;
   border-top: 2px solid var(--navds-step-indicator-color-step-line);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   pointer-events: 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: start;
+}
+
+.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

@@ -16,8 +16,8 @@
 }
 
 .navds-table {
-  border-collapse: collapse;
   width: 100%;
+  border-collapse: collapse;
   display: table;
 }
 
@@ -47,18 +47,41 @@
 
 .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);
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
   border-bottom: 1px solid var(--navds-table-cell-color-border);
   text-align: left;
 }
 
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
 .navds-table__body .navds-table__row:hover .navds-table__header-cell,
 .navds-table__body .navds-table__row:hover .navds-table__data-cell {
   border-color: var(--navds-table-cell-color-border-hover);
@@ -66,7 +89,7 @@
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--navds-spacing-2);
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
 }
 
 .navds-table .navds-checkbox .navds-checkbox__input {
@@ -80,3 +103,131 @@
 .navds-table .navds-checkbox .navds-checkbox__label {
   padding: 0;
 }
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--navds-semantic-color-link);
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--navds-semantic-color-canvas-background);
+}
+
+.navds-table__sort-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--navds-global-color-blue-50);
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.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/tag.css

@@ -32,7 +32,7 @@
 .navds-tag {
   border: 1px solid;
   border-color: var(--navds-tag-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   background-color: var(--navds-tag-color-background);
   display: inline-flex;
   align-items: center;

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

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

@navikt/core/css/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 1px 2px rgba(0, 0, 0, 0.05))
+    drop-shadow(0 1px 3px 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/meta.json

@@ -43,14 +43,14 @@
   },
   {
     "name": "Attachment",
-    "description": "",
-    "created_at": "2020-07-01T10:37:43.111Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.129Z",
     "pageName": "Attachment"
   },
   {
     "name": "AttachmentFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:48:27.872Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.124Z",
     "pageName": "Attachment"
   },
   {
@@ -708,15 +708,15 @@
     "pageName": "Communication"
   },
   {
-    "name": "EmailOpen",
-    "description": "",
-    "created_at": "2020-07-01T10:37:42.632Z",
+    "name": "EmailOpened",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.018Z",
     "pageName": "Communication"
   },
   {
-    "name": "EmailOpenFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:37:55.419Z",
+    "name": "EmailOpenedFilled",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.024Z",
     "pageName": "Communication"
   },
   {
@@ -744,13 +744,13 @@
     "pageName": "Status"
   },
   {
-    "name": "EU",
+    "name": "Eu",
     "description": "",
     "created_at": "2022-02-08T11:45:47.104Z",
     "pageName": "International"
   },
   {
-    "name": "EUFilled",
+    "name": "EuFilled",
     "description": "",
     "created_at": "2022-02-08T11:45:47.109Z",
     "pageName": "International"
@@ -1019,6 +1019,30 @@
     "created_at": "2021-01-28T14:00:38.520Z",
     "pageName": "Fyrstikkalleen"
   },
+  {
+    "name": "FullscreenEnter",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.614Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenEnterFilled",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.604Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenExit",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.597Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenExitFilled",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.608Z",
+    "pageName": "Interface"
+  },
   {
     "name": "Glass",
     "description": "",
@@ -2375,6 +2399,18 @@
     "created_at": "2020-07-01T10:37:42.692Z",
     "pageName": "Arrow"
   },
+  {
+    "name": "UpDown",
+    "description": "",
+    "created_at": "2022-03-16T13:47:53.004Z",
+    "pageName": "Arrow"
+  },
+  {
+    "name": "UpDownFilled",
+    "description": "",
+    "created_at": "2022-03-16T13:47:52.999Z",
+    "pageName": "Arrow"
+  },
   {
     "name": "UpFilled",
     "description": "",

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.2",
+  "version": "0.8.11",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -26,18 +26,18 @@
     "/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 && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
     "update": "ts-node figma/index.ts dotenv/config"
   },
   "dependencies": {
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",
@@ -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/Attachment.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="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.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.185 18.9095L11.185 18.9095L20.2926 9.79323C20.6829 9.40252 21.3161 9.40222 21.7068 9.79255C22.0975 10.1829 22.0978 10.8161 21.7074 11.2068L12.6034 20.3196C10.4053 22.5614 6.83586 22.5601 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>

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

@navikt/core/icons/svg/EUFilled.svg

@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2Z" fill="#262626"/>
-<path d="M11.6942 1.58536C11.7541 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.002 5.08798C11.9319 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5232 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.62781 3.36313C9.47107 3.24925 9.55162 3.00132 9.74537 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536Z" fill="white"/>
-<path d="M4.43501 4.70412C4.34705 4.5315 4.53137 4.34717 4.704 4.43512L5.92459 5.05696C6.00178 5.09628 6.09553 5.08144 6.15679 5.02017L7.12523 4.05178C7.26224 3.91479 7.49451 4.03314 7.46419 4.2245L7.24987 5.57721C7.23631 5.66279 7.2794 5.74737 7.35661 5.7867L8.57708 6.40856C8.74971 6.49651 8.70893 6.75399 8.51757 6.7843L7.16475 6.99857C7.07918 7.01213 7.01206 7.07925 6.99851 7.16482L6.78423 8.51771C6.75392 8.70907 6.49644 8.74985 6.40849 8.57722L5.78664 7.35676C5.7473 7.27955 5.66272 7.23646 5.57714 7.25002L4.22446 7.46433C4.0331 7.49465 3.91474 7.26238 4.05174 7.12537L5.02017 6.15695C5.08144 6.09568 5.09629 6.00193 5.05695 5.92472L4.43501 4.70412Z" fill="white"/>
-<path d="M1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163Z" fill="white"/>
-<path d="M4.70399 19.3918C4.53137 19.4798 4.34704 19.2954 4.435 19.1228L5.0569 17.9022C5.09623 17.825 5.08139 17.7312 5.02012 17.67L4.05174 16.7015C3.91474 16.5645 4.0331 16.3323 4.22446 16.3626L5.57723 16.577C5.66282 16.5905 5.74741 16.5474 5.78674 16.4702L6.40847 15.2498C6.49642 15.0771 6.7539 15.1179 6.78422 15.3093L6.99855 16.6621C7.01211 16.7477 7.07922 16.8148 7.1648 16.8283L8.51763 17.0426C8.70898 17.0729 8.74976 17.3304 8.57715 17.4184L7.3568 18.0402C7.2796 18.0796 7.23652 18.1641 7.25007 18.2497L7.4643 19.6025C7.4946 19.7939 7.26233 19.9122 7.12534 19.7752L6.15683 18.8067C6.09556 18.7454 6.00182 18.7306 5.92461 18.7699L4.70399 19.3918Z" fill="white"/>
-<path d="M12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74539C9.55164 20.7291 9.47109 20.4812 9.62784 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9319 18.6934 12.0019 18.6425L13.0888 17.8529C13.2456 17.739 13.4564 17.8923 13.3966 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451Z" fill="white"/>
-<path d="M19.3918 19.1229C19.4798 19.2955 19.2955 19.4798 19.1228 19.3919L17.9023 18.77C17.8251 18.7307 17.7314 18.7456 17.6701 18.8068L16.7015 19.7753C16.5645 19.9123 16.3323 19.794 16.3626 19.6026L16.5769 18.2497C16.5905 18.1641 16.5474 18.0795 16.4702 18.0402L15.2498 17.4184C15.0772 17.3304 15.1179 17.073 15.3093 17.0427L16.6621 16.8284C16.7477 16.8148 16.8148 16.7477 16.8284 16.6621L17.0426 15.3093C17.0729 15.1179 17.3304 15.0771 17.4184 15.2498L18.0402 16.4702C18.0795 16.5475 18.1641 16.5906 18.2497 16.577L19.6024 16.3626C19.7938 16.3323 19.9122 16.5646 19.7752 16.7016L18.8067 17.6702C18.7454 17.7314 18.7305 17.8252 18.7699 17.9024L19.3918 19.1229Z" fill="white"/>
-<path d="M22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7388 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74535V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359Z" fill="white"/>
-<path d="M19.1228 4.43517C19.2954 4.34721 19.4797 4.53153 19.3918 4.70416L18.7699 5.92475C18.7306 6.00195 18.7454 6.0957 18.8067 6.15697L19.7751 7.1254C19.9121 7.26241 19.7938 7.49468 19.6024 7.46436L18.2496 7.24999C18.164 7.23642 18.0794 7.27952 18.0401 7.35674L17.4183 8.57714C17.3304 8.74978 17.0729 8.70901 17.0426 8.51764L16.8283 7.16486C16.8148 7.07928 16.7477 7.01217 16.6621 6.99861L15.3093 6.78427C15.1179 6.75395 15.0771 6.49649 15.2498 6.40853L16.4701 5.78673C16.5473 5.74739 16.5904 5.66281 16.5769 5.57722L16.3626 4.22452C16.3322 4.03317 16.5645 3.91481 16.7015 4.05179L17.6701 5.02027C17.7314 5.08153 17.8251 5.09637 17.9023 5.05704L19.1228 4.43517Z" fill="white"/>
-</svg>

@navikt/core/icons/svg/EmailOpen.svg

@@ -1,3 +0,0 @@
-<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 4.23607L2.4102 8.03097L12 13.2254L21.5898 8.03097L12 4.23607ZM0 7.80877V7L12 2L24 7V7.80878C24 7.87303 23.9969 7.93683 23.9909 8H24V19C24 20.6569 22.6569 22 21 22H3C1.34314 22 0 20.6569 0 19V8H0.00913671C0.00308106 7.93683 0 7.87303 0 7.80877ZM2 17.1315L7.83295 13.2428L2 10.0833V17.1315ZM9.82222 14.3204L2.11208 19.4605C2.27866 19.781 2.61376 20 3 20H21C21.3862 20 21.7213 19.781 21.8879 19.4605L14.1778 14.3204L12 15.5L9.82222 14.3204ZM22 10.0833V17.1315L16.1671 13.2428L22 10.0833Z" fill="#262626"/>
-</svg>

@navikt/core/icons/svg/EmailOpenFilled.svg

@@ -1,3 +0,0 @@
-<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 15.5L24 9V7L12 2L0 7V9L12 15.5ZM15.833 15.4238L23.8477 20.7669C23.5468 21.4909 22.8329 22 22 22H2C1.16715 22 0.453196 21.4909 0.15234 20.767L8.16706 15.4238L12 17.5L15.833 15.4238ZM24 11V18.4648L17.8222 14.3463L24 11ZM0 11L6.17779 14.3463L0 18.4648V11Z" fill="#262626"/>
-</svg>

@navikt/core/icons/svg/EmailOpened.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="M1 8.2L0.518081 7.32378L0 7.60873V8.2H1ZM23 8.2H24V7.60873L23.4819 7.32378L23 8.2ZM12 2.15L12.4819 1.27378L12 1.00873L11.5181 1.27378L12 2.15ZM12 15L11.5211 15.8779L12 16.1391L12.4789 15.8779L12 15ZM22 20H2V22H22V20ZM1.48192 9.07622L12.4819 3.02622L11.5181 1.27378L0.518081 7.32378L1.48192 9.07622ZM11.5181 3.02622L22.5181 9.07622L23.4819 7.32378L12.4819 1.27378L11.5181 3.02622ZM22 8.2V9H24V8.2H22ZM2 9V8.2H0V9H2ZM22 9V20H24V9H22ZM22.5211 8.1221L13.5211 13.0312L14.4789 14.787L23.4789 9.8779L22.5211 8.1221ZM13.5211 13.0312L11.5211 14.1221L12.4789 15.8779L14.4789 14.787L13.5211 13.0312ZM23.5605 19.1718L14.5605 13.0809L13.4395 14.7373L22.4395 20.8282L23.5605 19.1718ZM2 20V9H0V20H2ZM12.4789 14.1221L10.4789 13.0312L9.52115 14.787L11.5211 15.8779L12.4789 14.1221ZM10.4789 13.0312L1.47885 8.1221L0.521148 9.8779L9.52115 14.787L10.4789 13.0312ZM1.56048 20.8282L10.5605 14.7373L9.43952 13.0809L0.439522 19.1718L1.56048 20.8282ZM2 20H2H0C0 21.1046 0.895431 22 2 22V20ZM22 22C23.1046 22 24 21.1046 24 20H22V22Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/EmailOpenedFilled.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="M0.210623 7.51518L10.4732 13.0282L10.4789 13.0312L10.4789 13.0312L12 13.8609L13.5211 13.0312L13.5268 13.0281L13.5268 13.0282L23.7894 7.51518L12 1L0.210623 7.51518ZM24 9.67234L15.9314 14.0067L24 19.4557V9.67234ZM23.3783 21.4492L13.9446 15.0784L12.4789 15.8779L12 16.1391L11.5211 15.8779L10.0554 15.0784L0.621651 21.4492C0.980399 21.7905 1.46574 22 2 22H22C22.5343 22 23.0196 21.7905 23.3783 21.4492ZM0 19.4557L8.06862 14.0067L0 9.67234V19.4557Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/EuFilled.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="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM11.6942 1.58536C11.754 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.0019 5.08798C11.9318 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5231 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.6278 3.36313C9.47105 3.24925 9.55161 3.00132 9.74535 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536ZM4.704 4.43512C4.53138 4.34717 4.34706 4.5315 4.43502 4.70413L5.05696 5.92473C5.0963 6.00193 5.08145 6.09568 5.02018 6.15695L4.05175 7.12538C3.91475 7.26238 4.03311 7.49465 4.22447 7.46433L5.57715 7.25002C5.66273 7.23646 5.74731 7.27955 5.78664 7.35676L6.40849 8.57722C6.49645 8.74985 6.75392 8.70907 6.78423 8.51772L6.99851 7.16483C7.01207 7.07925 7.07919 7.01213 7.16476 6.99858L8.51758 6.7843C8.70894 6.75399 8.74972 6.49652 8.57709 6.40856L7.35662 5.78671C7.27941 5.74737 7.23632 5.66279 7.24988 5.57721L7.4642 4.22451C7.49452 4.03315 7.26225 3.91479 7.12524 4.05178L6.1568 5.02018C6.09553 5.08144 6.00179 5.09629 5.92459 5.05696L4.704 4.43512ZM1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163ZM4.43501 19.1228C4.34705 19.2954 4.53138 19.4798 4.704 19.3918L5.92462 18.7699C6.00182 18.7306 6.09557 18.7454 6.15684 18.8067L7.12535 19.7752C7.26234 19.9122 7.49461 19.7938 7.46431 19.6025L7.25008 18.2497C7.23652 18.1641 7.27961 18.0796 7.35681 18.0402L8.57716 17.4184C8.74977 17.3304 8.70899 17.0729 8.51764 17.0426L7.1648 16.8283C7.07923 16.8148 7.01212 16.7477 6.99856 16.6621L6.78423 15.3093C6.75391 15.1179 6.49643 15.0771 6.40848 15.2498L5.78675 16.4702C5.74742 16.5474 5.66283 16.5905 5.57724 16.577L4.22447 16.3626C4.03311 16.3323 3.91475 16.5645 4.05174 16.7015L5.02013 17.67C5.0814 17.7312 5.09624 17.825 5.05691 17.9022L4.43501 19.1228ZM12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74537C9.55163 20.7291 9.47107 20.4812 9.62782 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9318 18.6934 12.0019 18.6425L13.0888 17.8529C13.2455 17.739 13.4564 17.8923 13.3965 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451ZM19.1228 19.3919C19.2954 19.4798 19.4798 19.2955 19.3918 19.1229L18.7699 17.9024C18.7305 17.8252 18.7454 17.7314 18.8066 17.6702L19.7752 16.7016C19.9121 16.5646 19.7938 16.3323 19.6024 16.3626L18.2497 16.577C18.1641 16.5905 18.0795 16.5475 18.0402 16.4702L17.4184 15.2498C17.3304 15.0771 17.0729 15.1179 17.0426 15.3093L16.8283 16.6621C16.8148 16.7477 16.7477 16.8148 16.6621 16.8284L15.3093 17.0426C15.1179 17.073 15.0772 17.3304 15.2498 17.4184L16.4702 18.0402C16.5474 18.0795 16.5905 18.1641 16.5769 18.2497L16.3626 19.6026C16.3322 19.794 16.5645 19.9123 16.7015 19.7753L17.6701 18.8068C17.7313 18.7456 17.8251 18.7307 17.9023 18.77L19.1228 19.3919ZM22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7389 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74534V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359ZM19.3918 4.70416C19.4797 4.53153 19.2954 4.34721 19.1228 4.43517L17.9023 5.05703C17.8251 5.09637 17.7314 5.08152 17.6701 5.02027L16.7015 4.05179C16.5645 3.9148 16.3322 4.03316 16.3625 4.22452L16.5769 5.57722C16.5904 5.6628 16.5473 5.74738 16.4701 5.78672L15.2497 6.40853C15.0771 6.49648 15.1179 6.75395 15.3092 6.78427L16.6621 6.9986C16.7476 7.01216Line truncated
+</svg>

@navikt/core/icons/svg/FileFolderFilled.svg

@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 23V10C2 9.44772 2.44772 9 3 9H11.5556C12.1078 9 12.5556 9.44772 12.5556 10V12H21C21.5523 12 22 12.4477 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H14V9C14 7.89543 13.1046 7 12 7H4V0ZM8 5H16V3H8V5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H4V7H12C13.1046 7 14 7.89543 14 9V10H20V0ZM16 5H8V3H16V5ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10Z" fill="#262626"/>
 </svg>

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

@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 1V6H18" stroke="#262626" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H13.5858L17 5.41421V16H19V4.58579L14.4142 0ZM22.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="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"/>
 </svg>

@navikt/core/icons/svg/FullscreenEnter.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="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FullscreenEnterFilled.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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FullscreenExit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.414 8.99999L21.7068 3.7071L20.2926 2.29288L14.9999 7.58561V2.99999H12.9999V11H20.9999V8.99999H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/FullscreenExitFilled.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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Teddy.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.50256 5.46703L7.17181 6.69387C7.06015 7.10802 7 7.54543 7 8C7 10.7614 9.23858 13 12 13C14.7614 13 17 10.7614 17 8C17 7.54543 16.9398 7.10801 16.8282 6.69387L16.4974 5.46702L17.4675 4.64636C17.7964 4.3681 18 3.95882 18 3.5C18 2.67157 17.3284 2 16.5 2C16.0412 2 15.6319 2.20357 15.3536 2.53248L14.533 3.50256L13.3061 3.1718C12.892 3.06015 12.4546 3 12 3C11.5454 3 11.108 3.06015 10.6939 3.17181L9.46703 3.50256L8.64636 2.53248C8.3681 2.20357 7.95882 2 7.5 2C6.67157 2 6 2.67157 6 3.5C6 3.95882 6.20357 4.3681 6.53248 4.64636L7.50256 5.46703ZM19 8C19 9.09191 18.75 10.1254 18.3041 11.0464L19.3117 10.7765C20.9121 10.3476 22.5571 11.2974 22.9859 12.8978C23.4148 14.4982 22.465 16.1432 20.8646 16.572L19.2673 17H19.5C21.433 17 23 18.567 23 20.5C23 22.433 21.433 24 19.5 24H4.5C2.567 24 1 22.433 1 20.5C1 18.567 2.567 17 4.5 17H4.89138L3.29411 16.572C1.69371 16.1432 0.743963 14.4982 1.17279 12.8978C1.60161 11.2974 3.24662 10.3476 4.84702 10.7765L5.67251 10.9976C5.24127 10.089 5 9.07267 5 8C5 7.36803 5.08375 6.75562 5.24075 6.17326C4.48185 5.53124 4 4.57189 4 3.5C4 1.567 5.567 0 7.5 0C8.57189 0 9.53124 0.481847 10.1733 1.24075C10.7556 1.08375 11.368 1 12 1C12.632 1 13.2444 1.08375 13.8267 1.24075C14.4688 0.481845 15.4281 0 16.5 0C18.433 0 20 1.567 20 3.5C20 4.57189 19.5182 5.53124 18.7593 6.17326C18.9163 6.75562 19 7.36803 19 8ZM12 15C10.5061 15 9.26396 16.0939 9.03723 17.5241L8.96058 18.0077C9.51318 18.5435 9.99991 19.3532 9.99991 20.5C9.99991 21.065 9.89085 21.5702 9.73917 22H14.2608C14.1092 21.5702 14.0001 21.065 14.0001 20.5C14.0001 19.3532 14.4868 18.5435 15.0394 18.0077L14.9628 17.5241C14.736 16.0939 13.4939 15 12 15ZM19.5 22H16.4819C16.4454 21.9453 16.4069 21.8839 16.3683 21.8164C16.1761 21.4799 16.0001 21.0262 16.0001 20.5C16.0001 19.9689 16.2159 19.6312 16.4829 19.3953L17.4403 19.1469C17.8086 19.0514 18.1968 19 18.6 19H19.5C20.3284 19 21 19.6716 21 20.5C21 21.3284 20.3284 22 19.5 22ZM7.51806 22C7.55463 21.9453 7.59309 21.8839 7.63167 21.8164C7.82391 21.4799 7.99991 21.0262 7.99991 20.5C7.99991 19.9689 7.7841 19.6312 7.51715 19.3953L6.55975 19.1469C6.19139 19.0514 5.80317 19 5.4 19H4.5C3.67157 19 3 19.6716 3 20.5C3 21.3284 3.67157 22 4.5 22H7.51806ZM3.81175 14.6402L6.70952 15.4166C7.24299 15.5596 7.79133 15.243 7.93427 14.7095C8.07721 14.176 7.76063 13.6277 7.22716 13.4848L4.32939 12.7083C3.79592 12.5654 3.24758 12.8819 3.10464 13.4154C2.9617 13.9489 3.27828 14.4972 3.81175 14.6402ZM17.4492 15.4166L20.347 14.6402C20.8804 14.4972 21.197 13.9489 21.0541 13.4154C20.9111 12.8819 20.3628 12.5654 19.8293 12.7083L16.9316 13.4848C16.3981 13.6277 16.0815 14.176 16.2244 14.7095C16.3674 15.243 16.9157 15.5596 17.4492 15.4166ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50256 5.46703L7.17181 6.69387C7.06015 7.10802 7 7.54543 7 8C7 10.7614 9.23858 13 12 13C14.7614 13 17 10.7614 17 8C17 7.54543 16.9398 7.10801 16.8282 6.69387L16.4974 5.46702L17.4675 4.64636C17.7964 4.3681 18 3.95882 18 3.5C18 2.67157 17.3284 2 16.5 2C16.0412 2 15.6319 2.20357 15.3536 2.53248L14.533 3.50256L13.3061 3.1718C12.892 3.06015 12.4546 3 12 3C11.5454 3 11.108 3.06015 10.6939 3.17181L9.46703 3.50256L8.64636 2.53248C8.3681 2.20357 7.95882 2 7.5 2C6.67157 2 6 2.67157 6 3.5C6 3.95882 6.20357 4.3681 6.53248 4.64636L7.50256 5.46703ZM19 8C19 9.09191 18.75 10.1254 18.3041 11.0464L19.3117 10.7765C20.9121 10.3476 22.5571 11.2974 22.9859 12.8978C23.4148 14.4982 22.465 16.1432 20.8646 16.572L19.2673 17H19.5C21.433 17 23 18.567 23 20.5C23 22.433 21.433 24 19.5 24H4.5C2.567 24 1 22.433 1 20.5C1 18.567 2.567 17 4.5 17H4.89138L3.29411 16.572C1.69371 16.1432 0.743963 14.4982 1.17279 12.8978C1.60161 11.2974 3.24662 10.3476 4.84702 10.7765L5.67251 10.9976C5.24127 10.089 5 9.07267 5 8C5 7.36803 5.08375 6.75562 5.24075 6.17326C4.48185 5.53124 4 4.57189 4 3.5C4 1.567 5.567 0 7.5 0C8.57189 0 9.53124 0.481847 10.1733 1.24075C10.7556 1.08375 11.368 1 12 1C12.632 1 13.2444 1.08375 13.8267 1.24075C14.4688 0.481845 15.4281 0 16.5 0C18.433 0 20 1.567 20 3.5C20 4.57189 19.5182 5.53124 18.7593 6.17326C18.9163 6.75562 19 7.36803 19 8ZM12 15C10.5061 15 9.26396 16.0939 9.03723 17.5241L8.96058 18.0077C9.51318 18.5435 9.99991 19.3532 9.99991 20.5C9.99991 21.065 9.89085 21.5702 9.73917 22H14.2608C14.1092 21.5702 14.0001 21.065 14.0001 20.5C14.0001 19.3532 14.4868 18.5435 15.0394 18.0077L14.9628 17.5241C14.736 16.0939 13.4939 15 12 15ZM19.5 22H16.4819C16.4454 21.9453 16.4069 21.8839 16.3683 21.8164C16.1761 21.4799 16.0001 21.0262 16.0001 20.5C16.0001 19.9689 16.2159 19.6312 16.4829 19.3953L17.4403 19.1469C17.8086 19.0514 18.1968 19 18.6 19H19.5C20.3284 19 21 19.6716 21 20.5C21 21.3284 20.3284 22 19.5 22ZM7.51806 22C7.55463 21.9453 7.59309 21.8839 7.63167 21.8164C7.82391 21.4799 7.99991 21.0262 7.99991 20.5C7.99991 19.9689 7.7841 19.6312 7.51715 19.3953L6.55975 19.1469C6.19139 19.0514 5.80317 19 5.4 19H4.5C3.67157 19 3 19.6716 3 20.5C3 21.3284 3.67157 22 4.5 22H7.51806ZM3.81175 14.6402L6.70952 15.4166C7.24299 15.5596 7.79133 15.243 7.93427 14.7095C8.07721 14.176 7.76063 13.6277 7.22716 13.4848L4.32939 12.7083C3.79592 12.5654 3.24758 12.8819 3.10464 13.4154C2.9617 13.9489 3.27828 14.4972 3.81175 14.6402ZM17.4492 15.4166L20.347 14.6402C20.8804 14.4972 21.197 13.9489 21.0541 13.4154C20.9111 12.8819 20.3628 12.5654 19.8293 12.7083L16.9316 13.4848C16.3981 13.6277 16.0815 14.176 16.2244 14.7095C16.3674 15.243 16.9157 15.5596 17.4492 15.4166ZM12 10C12.5523 10 13 9.55228 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55228 11.4477 10 12 10Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/TeddyFilled.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.36562 5.9328C5.01344 5.6417 4 4.4392 4 3C4 1.34315 5.34315 0 7 0C8.4392 0 9.6417 1.01344 9.9328 2.36562C10.5773 2.1291 11.2735 2 12 2C12.7265 2 13.4228 2.1291 14.0672 2.36562C14.3583 1.01344 15.5608 0 17 0C18.6569 0 20 1.34315 20 3C20 4.4392 18.9866 5.6417 17.6344 5.9328C17.8709 6.57725 18 7.27355 18 8C18 9.55877 17.4056 10.9787 16.4311 12.0455L18.7614 11.4211C19.8283 11.1352 20.925 11.7684 21.2109 12.8353C21.4967 13.9022 20.8636 14.9989 19.7966 15.2848L16.6389 16.1309C16.8718 16.7083 17 17.3392 17 18V19.2774C17.4083 19.099 17.8593 19 18.3333 19H20.5C21.8807 19 23 20.1193 23 21.5C23 22.8807 21.8807 24 20.5 24H16.6667C16.0642 24 15.5364 23.6803 15.2436 23.2014C14.5478 23.7039 13.6931 24 12.7692 24H11.2308C10.3069 24 9.4522 23.7039 8.7564 23.2014C8.46361 23.6803 7.9358 24 7.33333 24H3.5C2.11929 24 1 22.8807 1 21.5C1 20.1193 2.11929 19 3.5 19H5.66667C6.14074 19 6.59169 19.099 7 19.2774V18C7 17.3976 7.10651 16.8202 7.30173 16.2854L3.5675 15.2848C2.50057 14.9989 1.8674 13.9022 2.15329 12.8353C2.43917 11.7684 3.53585 11.1352 4.60278 11.4211L7.79011 12.2751C6.68509 11.1869 6 9.67345 6 8C6 7.27355 6.1291 6.57725 6.36562 5.9328ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10ZM14 18C14 19.6569 13.1046 21 12 21C10.8954 21 10 19.6569 10 18C10 16.3431 10.8954 15 12 15C13.1046 15 14 16.3431 14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.36562 5.9328C5.01344 5.6417 4 4.4392 4 3C4 1.34315 5.34315 0 7 0C8.4392 0 9.6417 1.01344 9.9328 2.36562C10.5773 2.1291 11.2735 2 12 2C12.7265 2 13.4228 2.1291 14.0672 2.36562C14.3583 1.01344 15.5608 0 17 0C18.6569 0 20 1.34315 20 3C20 4.4392 18.9866 5.6417 17.6344 5.9328C17.8709 6.57725 18 7.27355 18 8C18 9.55877 17.4056 10.9787 16.4311 12.0455L18.7614 11.4211C19.8283 11.1352 20.925 11.7684 21.2109 12.8353C21.4967 13.9022 20.8636 14.9989 19.7966 15.2848L16.6389 16.1309C16.8718 16.7083 17 17.3392 17 18V19.2774C17.4083 19.099 17.8593 19 18.3333 19H20.5C21.8807 19 23 20.1193 23 21.5C23 22.8807 21.8807 24 20.5 24H16.6667C16.0642 24 15.5364 23.6803 15.2436 23.2014C14.5478 23.7039 13.6931 24 12.7692 24H11.2308C10.3069 24 9.4522 23.7039 8.7564 23.2014C8.46361 23.6803 7.9358 24 7.33333 24H3.5C2.11929 24 1 22.8807 1 21.5C1 20.1193 2.11929 19 3.5 19H5.66667C6.14074 19 6.59169 19.099 7 19.2774V18C7 17.3976 7.10651 16.8202 7.30173 16.2854L3.5675 15.2848C2.50057 14.9989 1.8674 13.9022 2.15329 12.8353C2.43917 11.7684 3.53585 11.1352 4.60278 11.4211L7.79011 12.2751C6.68509 11.1869 6 9.67345 6 8C6 7.27355 6.1291 6.57725 6.36562 5.9328ZM12 10C12.5523 10 13 9.55228 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55228 11.4477 10 12 10ZM14 18C14 19.6569 13.1046 21 12 21C10.8954 21 10 19.6569 10 18C10 16.3431 10.8954 15 12 15C13.1046 15 14 16.3431 14 18Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/UpDown.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9988 5.9571L5.99745 1.57383e-06L5.20444e-07 5.95319L1.40897 7.37263L4.99745 3.81063L4.99745 15.0028L6.99745 15.0028L6.99745 3.81064L10.5898 7.37654L11.9988 5.9571ZM12.0012 18.0429L18.0025 24L24 18.0468L22.591 16.6274L19.0025 20.1894L19.0025 8.99724L17.0025 8.99724L17.0025 20.1894L13.4102 16.6235L12.0012 18.0429Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/UpDownFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9988 5.9571L5.99746 1.57373e-06L2.42779e-06 5.95319L3.99745 5.9571L3.99745 15.0028L7.99745 15.0028L7.99745 5.9571L11.9988 5.9571ZM12 18.0457L18.0014 24.0028L23.9988 18.0496L20.0014 18.0457L20.0014 9.00001L16.0014 9.00001L16.0014 18.0457L12 18.0457Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Warning.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16ZM13 5V14H11V5H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.3788 0 12.725 0.214002 12.8944 0.552786L23.8944 22.5528C24.0494 22.8628 24.0329 23.2309 23.8507 23.5257C23.6684 23.8205 23.3466 24 23 24H1C0.653423 24 0.331557 23.8205 0.14935 23.5257C-0.0328564 23.2309 -0.0494204 22.8628 0.105574 22.5528L11.1056 0.552786C11.275 0.214002 11.6212 0 12 0ZM21.382 22L12 3.23607L2.61804 22H21.382ZM11 15V8H13V15H11ZM12 20C12.8284 20 13.5 19.3284 13.5 18.5C13.5 17.6716 12.8284 17 12 17C11.1716 17 10.5 17.6716 10.5 18.5C10.5 19.3284 11.1716 20 12 20Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/WarningFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16ZM13 5V14H11V5H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.3788 0 12.725 0.214002 12.8944 0.552786L23.8944 22.5528C24.0494 22.8628 24.0329 23.2309 23.8507 23.5257C23.6684 23.8205 23.3466 24 23 24H1C0.653423 24 0.331557 23.8205 0.14935 23.5257C-0.0328564 23.2309 -0.0494204 22.8628 0.105574 22.5528L11.1056 0.552786C11.275 0.214002 11.6212 0 12 0ZM11 15V8H13V15H11ZM13.5 18.5C13.5 19.3284 12.8284 20 12 20C11.1716 20 10.5 19.3284 10.5 18.5C10.5 17.6716 11.1716 17 12 17C12.8284 17 13.5 17.6716 13.5 18.5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/template.js

@@ -15,13 +15,13 @@ function defaultTemplate(
         type: "ImportSpecifier",
         imported: {
           type: "Identifier",
-          name: "v4",
+          name: "useId",
         },
       },
     ],
     source: {
       type: "StringLiteral",
-      value: "uuid",
+      value: "./util/useId",
     },
   });
 
@@ -34,12 +34,12 @@ function defaultTemplate(
   return typeScriptTpl.ast`
   ${imports}
   ${interfaces}
-  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ?
-      "icon-title-" + v4() : undefined);
+  const ${componentName} = React.forwardRef((${props}) => {
+    let titleId: string | undefined = useId();
+    titleId = title ? _titleId ? _titleId : "title-" + titleId : undefined;
     return ${jsx};
-  }
-  ${exports}`;
+  });
+  export default ${componentName}`;
 }
 
 module.exports = defaultTemplate;

@navikt/core/icons/tsconfig.json

@@ -4,5 +4,5 @@
     "outDir": "./cjs",
     "module": "commonjs"
   },
-  "exclude": ["./figma", "./scripts", "**/*.stories.*"]
+  "exclude": ["./figma", "./util", "./scripts", "**/*.stories.*"]
 }

@navikt/core/icons/util/useId.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState } from "react";
+import { v4 } from "uuid";
+
+const canUseDOM = (): boolean => {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.document !== "undefined" &&
+    typeof window.document.createElement !== "undefined"
+  );
+};
+
+export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
+
+export const useId: (id?: string) => string = (id) => {
+  const [newId, setNewId] = useState<string | undefined>(undefined);
+
+  useClientLayoutEffect(() => {
+    setNewId(v4());
+  }, []);
+
+  return id ?? newId ?? "";
+};

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.16.2",
+  "version": "0.18.4",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,19 +24,24 @@
   "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.2",
+    "@navikt/ds-icons": "^0.8.11",
     "@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",
     "react-merge-refs": "^1.1.0",
@@ -45,23 +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",
-    "ts-jest": "^27.0.5"
+    "swr": "^1.1.2",
+    "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

@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
 import {
   ErrorFilled,
-  WarningFilled,
   InformationFilled,
   SuccessFilled,
+  WarningFilled,
 } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef } from "react";
 import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -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;
 }
@@ -36,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled {...props} />;
+      return <ErrorFilled title="Feil" {...props} />;
     case "warning":
-      return <WarningFilled {...props} />;
+      return <WarningFilled title="Advarsel" {...props} />;
     case "info":
-      return <InformationFilled {...props} />;
+      return <InformationFilled title="Informasjon" {...props} />;
     case "success":
-      return <SuccessFilled {...props} />;
+      return <SuccessFilled title="Suksess" {...props} />;
     default:
       return null;
   }
@@ -52,7 +53,7 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       children,
@@ -76,11 +77,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
       )}
     >
-      <Icon
-        title={`${variant}-ikon`}
-        variant={variant}
-        className="navds-alert__icon"
-      />
+      <Icon variant={variant} className="navds-alert__icon" />
       <BodyLong as="div" size={size} className="navds-alert__wrapper">
         {children}
       </BodyLong>

@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";
+  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",
@@ -43,6 +45,7 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
       size = "medium",
       loading = false,
       disabled,
+      style,
       ...rest
     },
     ref
@@ -76,13 +79,16 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
             "navds-button--loading": widthOverride,
           }
         )}
-        style={{ width: widthOverride }}
+        style={{
+          ...style,
+          width: widthOverride,
+        }}
         disabled={disabled ?? widthOverride ? true : undefined}
       >
         <BodyShort
           as="span"
           className="navds-button__inner"
-          size={size}
+          size={size === "medium" ? "medium" : "small"}
           aria-live="polite"
         >
           {widthOverride ? <Loader size={size} /> : children}

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

@@ -1,27 +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",
@@ -36,111 +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>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

@@ -2,7 +2,8 @@ import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox, CheckboxProps } from "..";
 
-export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
+export interface ConfirmationPanelProps
+  extends Omit<CheckboxProps, "children" | "indeterminate" | "hideLabel"> {
   /**
    * Additional information on panel
    */
@@ -10,36 +11,33 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
   /**
    * Checkbox label
    */
-  label: string;
-  /**
-   * Checked state for checkbox
-   */
-  checked: boolean;
+  label: React.ReactNode;
 }
 
-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,
-        })}
-      >
-        {children && (
-          <BodyLong
-            size={props.size}
-            className="navds-confirmation-panel__content"
-          >
-            {children}
-          </BodyLong>
-        )}
-        <Checkbox {...props}>{label}</Checkbox>
-      </div>
-    );
-  }
-);
+export 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,
+      })}
+    >
+      {children && (
+        <BodyLong
+          size={props.size}
+          className="navds-confirmation-panel__content"
+        >
+          {children}
+        </BodyLong>
+      )}
+      <Checkbox {...props}>{label}</Checkbox>
+    </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,98 +9,102 @@ 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;
   /**
    * Label for select
    */
-  label: string;
+  label: React.ReactNode;
   /**
    * If enabled shows the label and description for screenreaders only
    */
   hideLabel?: boolean;
 }
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+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,99 @@ export interface SwitchProps
   loading?: boolean;
   /**
    * Positions switch on left/right side of label
+   * @default "left"
    */
   position?: "left" | "right";
 }
 
-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

@@ -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,
@@ -119,7 +126,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               </span>
               <Counter
                 maxLength={maxLength}
-                currentLength={props.value.length}
+                currentLength={props.value?.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

@@ -6,14 +6,14 @@ import { BodyShort, Detail, omit } from "../..";
 
 export interface CheckboxProps
   extends Omit<FormFieldProps, "errorId">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    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;
   /**
@@ -23,7 +23,7 @@ export interface CheckboxProps
   /**
    * The value of the HTML element.
    */
-  value?: string;
+  value?: any;
   /**
    * Specify whether the Checkbox is in an indeterminate state
    * @default false
@@ -31,69 +31,72 @@ export interface CheckboxProps
   indeterminate?: boolean;
 }
 
-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",
-        ])}
-        {...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

@@ -3,9 +3,9 @@ import cl from "classnames";
 import { Fieldset, FieldsetProps, FieldsetContext } from "..";
 
 export interface CheckboxGroupState {
-  readonly defaultValue?: readonly string[];
-  readonly value?: readonly string[];
-  toggleValue(value: string): void;
+  readonly defaultValue?: readonly any[];
+  readonly value?: readonly any[];
+  toggleValue(value: any): void;
 }
 
 export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
@@ -13,36 +13,42 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
 );
 
 export interface CheckboxGroupProps
-  extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
+  extends Omit<
+    FieldsetProps,
+    "onChange" | "errorPropagation" | "defaultValue"
+  > {
   /**
-   * Checkboxes
+   * Collection of <Checkbox/>
    */
   children: React.ReactNode;
   /**
-   * Controlled state for group
+   * Controlled state for checkboxes.
    */
-  value?: string[];
+  value?: any[];
   /**
    * Default checked checkboxes on render
    */
-  defaultValue?: string[];
+  defaultValue?: any[];
   /**
    * Returns current checked checkboxes in group
    */
-  onChange?: (value: string[]) => void;
+  onChange?: (value: any[]) => void;
 }
 
-const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
+export const CheckboxGroup = forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref
   ) => {
     const fieldset = useContext(FieldsetContext);
 
-    const [state, setState] = useState<string[]>([]);
+    const [state, setState] = useState<any[]>(defaultValue ?? []);
 
-    const handleChange = (v: string) => {
-      const newValue = value ? value : state;
+    const toggleValue = (v: any) => {
+      const newValue = value ?? state;
       const newState = newValue.includes(v)
         ? newValue.filter((x) => x !== v)
         : [...newValue, v];
@@ -65,7 +71,7 @@ const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
           value={{
             value,
             defaultValue,
-            toggleValue: (value: string) => handleChange(value),
+            toggleValue,
           }}
         >
           <div className="navds-checkboxes">{children}</div>

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

@@ -0,0 +1,178 @@
+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 (
+    <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 ? "Orange description" : 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>
+  );
+};
+
+Default.args = {
+  controlled: false,
+  legend: "Legend-tekst",
+  checkboxDescription: 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>

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

@@ -1,106 +0,0 @@
-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,
-} as Meta;
-
-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>
-    </>
-  );
-};
-
-export const All = () => {
-  const Checkboxes = (props) => (
-    <CheckboxGroup
-      legend="Mollit eiusmod"
-      description="Exercitation do labore"
-      {...props}
-    >
-      <Checkbox value="Apple">Apple</Checkbox>
-      <Checkbox value="Orange" description="Laborum ad">
-        Orange
-      </Checkbox>
-      <Checkbox value="Banana" description={<div>Laborum ad</div>}>
-        Banana
-      </Checkbox>
-      <Checkbox value="Melon">Melon</Checkbox>
-    </CheckboxGroup>
-  );
-
-  return (
-    <>
-      <h1>Checkbox</h1>
-      <h2>Single checkbox</h2>
-      <Checkbox value="Apple">Apple</Checkbox>
-      <h3>Desription</h3>
-      <Checkbox value="Apple" description="Laborum ad" defaultChecked>
-        Apple
-      </Checkbox>
-      <h3>Error</h3>
-      <Checkbox value="Apple" error>
-        Apple
-      </Checkbox>
-      <Checkbox value="Apple" error defaultChecked>
-        Orange
-      </Checkbox>
-      <h3>Hide label</h3>
-      <Checkbox value="Apple" hideLabel description="Laborum ad">
-        Apple
-      </Checkbox>
-      <h3>Disabled</h3>
-      <Checkbox value="Apple" disabled>
-        Apple
-      </Checkbox>
-      <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
-        Orange
-      </Checkbox>
-      <h3>Indeterminate</h3>
-      <Checkbox value="Apple" indeterminate>
-        Apple
-      </Checkbox>
-      <Checkbox value="Orange" indeterminate size="small">
-        Orange
-      </Checkbox>
-
-      <h2>Checkbox group</h2>
-      <Checkboxes />
-      <h3>Error</h3>
-      <Checkboxes error="Dette er en feilmelding" />
-      <h3>Small</h3>
-      <Checkboxes size="small" />
-      <h3>Small + error</h3>
-      <Checkboxes size="small" error="Dette er en feilmelding" />
-      <h3>Default value</h3>
-      <Checkboxes defaultValue={["Orange", "Melon"]} />
-      <h3>Disabled</h3>
-      <Checkboxes disabled />
-    </>
-  );
-};

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -33,14 +33,14 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
     inputProps: {
       ...inputProps,
       checked: checkboxGroup?.value
-        ? checkboxGroup.value.includes(props.value as string)
+        ? checkboxGroup.value.includes(props.value)
         : props.checked,
       defaultChecked: checkboxGroup?.defaultValue
-        ? checkboxGroup.defaultValue.includes(props.value as string)
+        ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
       onChange: (e) => {
         props.onChange && props.onChange(e);
-        checkboxGroup && checkboxGroup.toggleValue(props.value as string);
+        checkboxGroup && checkboxGroup.toggleValue(props.value);
       },
     },
   };

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

@@ -5,7 +5,7 @@ import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * ErrorSummaryItems
+   * Collectipn of ErrorSummary.Item
    */
   children: React.ReactNode;
   /**
@@ -18,7 +18,7 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
    */
   heading?: React.ReactNode;
   /**
-   * Allows setting a different HTML <tag>
+   * Allows setting a different HTML h-tag
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;
@@ -31,7 +31,7 @@ interface ErrorSummaryComponent
   Item: ErrorSummaryItemType;
 }
 
-const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
       children,

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

@@ -15,7 +15,7 @@ export type ErrorSummaryItemType = OverridableComponent<
   HTMLAnchorElement
 >;
 
-const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
+export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import { ErrorSummary } from "..";
+export default {
+  title: "ds-react/Form/Errorsummary",
+  component: ErrorSummary,
+  argTypes: {
+    headingTag: {
+      control: {
+        type: "text",
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => (
+  <ErrorSummary
+    heading="Feiloppsummering komponent"
+    headingTag={props.headingTag || "h2"}
+    size={props.size ?? undefined}
+  >
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
+      Tekstfeltet må ha en godkjent e-mail
+    </ErrorSummary.Item>
+  </ErrorSummary>
+);
+
+export const Small = () => (
+  <ErrorSummary heading="Feiloppsummering komponent" size="small">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
+      Tekstfeltet må ha en godkjent e-mail
+    </ErrorSummary.Item>
+  </ErrorSummary>
+);

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

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