Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.0
 - @navikt/ds-react@0.19.0
 - @navikt/ds-react-internal@0.14.0

.git-blame-ignore-revs

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

.gitignore

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

.storybook/deprecated.stories.mdx

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

.storybook/layout.css

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

.storybook/main.js

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

.storybook/preview.js

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

.storybook/public/mockServiceWorker.js

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

@navikt/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);
 }
@@ -165,7 +199,6 @@
 .navds-button--secondary:hover {
   color: var(--navds-button-color-secondary-text-hover);
   background-color: var(--navds-button-color-secondary-background-hover);
-  box-shadow: none;
 }
 
 .navds-button--secondary:focus {
@@ -179,7 +212,6 @@
   box-shadow: none;
 }
 
-.navds-button--secondary:focus:hover,
 .navds-button--secondary:focus:active {
   box-shadow: inset 0 0 0 1px
       var(--navds-button-color-secondary-border-focus-active-hover),
@@ -202,7 +234,7 @@
 }
 
 .navds-button--tertiary:hover {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
+  background-color: var(--navds-button-color-tertiary-background-hover);
 }
 
 .navds-button--tertiary:focus {

@navikt/core/css/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
@@ -28,12 +34,13 @@
   );
 }
 
-.navds-confirmation-panel {
+.navds-confirmation-panel__inner {
   display: flex;
   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;
 }
@@ -42,17 +49,17 @@
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--small {
+.navds-confirmation-panel--small .navds-confirmation-panel__inner {
   padding: var(--navds-spacing-3);
   gap: var(--navds-spacing-2);
 }
 
-.navds-confirmation-panel--checked {
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-checked);
   border-color: var(--navds-confirmation-panel-color-border-checked);
 }
 
-.navds-confirmation-panel--error {
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-error);
   border: 1px solid transparent;
 }

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

@@ -3,6 +3,9 @@
     --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-description: var(
+    --navds-semantic-color-text-muted
+  );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
@@ -57,12 +60,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,
@@ -74,7 +77,7 @@
 
 .navds-checkbox__description,
 .navds-radio__description {
-  color: var(--navds-radio-checkbox-color-text);
+  color: var(--navds-radio-checkbox-color-description);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
@@ -121,7 +124,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;
 }
 

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

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

@navikt/core/css/form/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

@@ -72,6 +72,10 @@
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
+.navds-switch__description {
+  color: var(--navds-semantic-color-text-muted);
+}
+
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }
@@ -112,7 +116,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 +159,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,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text);
   --navds-text-field-color-background: var(
     --navds-semantic-color-component-background-light
@@ -18,20 +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

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

@navikt/core/css/link.css

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

@navikt/core/css/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.16.1",
+  "version": "0.18.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.4",
+    "@navikt/ds-tokens": "^0.9.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   }
 }

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

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

@navikt/core/css/pagination.css

@@ -47,7 +47,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
   padding: var(--navds-spacing-1) var(--navds-spacing-3);
 }
 
@@ -87,7 +87,7 @@
   color: var(--navds-semantic-color-link);
   align-items: center;
   gap: var(--navds-spacing-1);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
 }
 
 .navds-pagination__prev-next:focus {
@@ -116,3 +116,7 @@
 .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,78 @@
+.navds-read-more {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+  color: var(--navds-semantic-color-link);
+  border-radius: var(--navds-border-radius-small);
+  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
+    2px;
+  text-align: start;
+}
+
+.navds-read-more--small {
+  padding: 2px var(--navds-spacing-1) 2px 2px;
+}
+
+.navds-read-more:hover {
+  background-color: rgba(38, 38, 38, 0.06);
+}
+
+.navds-read-more:active {
+  background-color: rgba(38, 38, 38, 0.1);
+}
+
+.navds-read-more:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.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:not(.navds-read-more--open) + .ReactCollapse--collapse {
+  padding: 0;
+}
+
+.navds-read-more__content {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  padding: 0 var(--navds-spacing-1);
+}
+
+.navds-read-more__content::before {
+  content: "";
+  display: block;
+  width: 2px;
+  background-color: rgba(38, 38, 38, 0.36);
+  margin: 0 7px;
+  flex-shrink: 0;
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more__expand-icon--filled {
+  display: none;
+}
+
+.navds-read-more:hover
+  > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-read-more:hover > .navds-read-more__expand-icon {
+  display: none;
+}

@navikt/core/css/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: left;
+}
+
+.navds-stepper__step:hover > .navds-stepper__step-label {
+  text-decoration: underline;
+}
+
+.navds-stepper__step--active > .navds-stepper__step-label {
+  color: black;
+}
+
+.navds-stepper__step--active:hover > .navds-stepper__step-label {
+  text-decoration: none;
+}
+
+/* Step Horizontal Lines */
+
+.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: calc(28px + 8px + (2.25rem / 2));
+  left: 13px;
+  height: calc(100% - 2.75rem);
+  display: block;
+  border-left: 2px solid var(--navds-semantic-color-border-muted);
+  border-radius: var(--navds-border-radius-medium);
+  pointer-events: none;
+  z-index: 1;
+}

@navikt/core/css/table.css

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

@navikt/core/css/tabs.css

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

@navikt/core/css/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

@@ -19,7 +19,7 @@
 }
 
 .navds-toggle-group {
-  border-radius: 7px;
+  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);
@@ -39,7 +39,7 @@
   cursor: pointer;
   background-color: var(--navds-toggle-group-color-background);
   color: var(--navds-toggle-group-color-text);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
   min-width: fit-content;
 }
 

@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/icons.stories.tsx

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

@navikt/core/icons/meta.json

@@ -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"
   },
   {
@@ -1007,6 +1007,18 @@
     "created_at": "2021-01-28T14:00:38.562Z",
     "pageName": "Fyrstikkalleen"
   },
+  {
+    "name": "Forward",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T10:42:53.765Z",
+    "pageName": "Communication"
+  },
+  {
+    "name": "ForwardFilled",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T12:21:53.189Z",
+    "pageName": "Communication"
+  },
   {
     "name": "Freezer",
     "description": "",
@@ -1709,6 +1721,18 @@
     "created_at": "2020-07-01T10:37:42.850Z",
     "pageName": "People"
   },
+  {
+    "name": "PeopleDialogFilled",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.398Z",
+    "pageName": "People"
+  },
+  {
+    "name": "PeopleDialogOutline",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.392Z",
+    "pageName": "People"
+  },
   {
     "name": "PeopleFilled",
     "description": "",
@@ -2207,6 +2231,18 @@
     "created_at": "2021-01-11T13:37:55.271Z",
     "pageName": "Social media"
   },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.695Z",
+    "pageName": "Health"
+  },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.700Z",
+    "pageName": "Health"
+  },
   {
     "name": "StopWatch",
     "description": "",
@@ -2399,6 +2435,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.4",
+  "version": "0.8.13",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -26,21 +26,21 @@
     "/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",
+    "@svgr/cli": "6.2.1",
     "@types/lodash.startcase": "^4.4.6",
     "@types/rimraf": "3.0.2",
     "@types/uuid": "^8.3.1",
@@ -49,7 +49,7 @@
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
-    "react": "^16.8.0 || ^17.0.0",
+    "react": "^18.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
     "ts-node": "^10.4.0"

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

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

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

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

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

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

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

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

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

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

@navikt/core/icons/svg/CancelFilled.svg

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

@navikt/core/icons/svg/Collapse.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7L3 15.5714L4.5 17L12 9.85714L19.5 17L21 15.5714L12 7Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.58579L19.7071 14.2929L18.2929 15.7071L12 9.41421L5.70712 15.7071L4.29291 14.2929L12 6.58579Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/CollapseFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6L21 14.5714L18.5 17L12 10.5L5.5 17L3 14.5714L12 6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.87868L20.0607 13.9393L17.9393 16.0607L12 10.1213L6.06065 16.0607L3.93933 13.9393L12 5.87868Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Delete.svg

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

@navikt/core/icons/svg/DeleteFilled.svg

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

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17L3 8.42857L4.5 7L12 14.1429L19.5 7L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.4142L4.2929 9.7071L5.70711 8.29289L12 14.5858L18.2929 8.29289L19.7071 9.70711L12 17.4142Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ExpandFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17L3 8.42857L5.5 6L12 12.5L18.5 6L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.1213L3.93934 10.0607L6.06066 7.93934L12 13.8787L17.9393 7.93934L20.0607 10.0607L12 18.1213Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/File.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 24H3V0H14L21 7V24ZM12 2H5V22H19V8H12V2ZM14 2.83V6L17.17 5.999L14 2.83Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM6 20V4H14V6C14 7.10457 14.8954 8 16 8H18V20H6ZM17.5858 6L16 4.41421V6H17.5858Z" fill="#262626"/>
 </svg>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/core/icons/svg/Login.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 22L21 2L11 2L11 8L9 8L9 2C9 0.895428 9.89543 0 11 0H21C22.1046 0 23 0.89543 23 2L23 22C23 23.1046 22.1046 24 21 24L11 24C9.89543 24 9 23.1046 9 22L9 17H11L11 22L21 22ZM15.5859 11L12.293 7.70711L13.7072 6.29289L19.4143 12L13.7072 17.7071L12.293 16.2929L15.5859 13L1 13V11L15.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4L14 4V2L19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H14V20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4ZM10.7071 6.29289L16.4142 12L10.7071 17.7071L9.29289 16.2929L12.5858 13L2 13V11L12.5858 11L9.29289 7.70711L10.7071 6.29289Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/LoginFilled.svg

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

@navikt/core/icons/svg/Logout.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2L2 2V22H12V17H14V22C14 23.1046 13.1046 24 12 24H2C0.89543 24 0 23.1046 0 22V2C0 0.895435 0.895428 0 2 0H12C13.1046 0 14 0.895432 14 2V7H12L12 2H2ZM19.5859 11L16.293 7.70711L17.7072 6.29289L23.4143 12L17.7072 17.7071L16.293 16.2929L19.5859 13L6 13V11L19.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4143 12L16.7072 17.7071L15.293 16.2929L18.5859 13L8.00009 13L8.00009 11L18.5859 11L15.293 7.70711L16.7072 6.29289L22.4143 12ZM10.0001 22L5.00009 22C3.34324 22 2.00009 20.6569 2.00009 19L2.00009 5C2.00009 3.34314 3.34324 2 5.00009 2L10.0001 2L10.0001 4L5.00009 4C4.44781 4 4.00009 4.44771 4.00009 5L4.00009 19C4.00009 19.5523 4.44781 20 5.00009 20L10.0001 20L10.0001 22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/LogoutFilled.svg

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

@navikt/core/icons/svg/Next.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L8.42857 3L7 4.5L14.1429 12L7 19.5L8.42857 21L17 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4142 12L9.70711 19.7071L8.29289 18.2929L14.5858 12L8.2929 5.70711L9.70711 4.29289L17.4142 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/NextFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 11.5L8.92857 20.5L6.5 18L13 11.5L6.5 5L8.92857 2.5L17.5 11.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1213 12L10.0606 20.0607L7.93933 17.9393L13.8787 12L7.93933 6.06066L10.0606 3.93934L18.1213 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/People.svg

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

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

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

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

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

@navikt/core/icons/svg/PeopleFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 14C15.866 14 19 10.866 19 7C19 3.13401 15.866 0 12 0C8.13401 0 5 3.13401 5 7C5 10.866 8.13401 14 12 14ZM12 15C17.2923 15 21.7392 18.8243 23 24H1C2.26084 18.8243 6.70771 15 12 15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2ZM4 21V22H20V21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21Z" fill="#262626"/>
 </svg>

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

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

@navikt/core/icons/svg/RefreshFilled.svg

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

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

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

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

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

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

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

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

@@ -1,13 +1,5 @@
-function defaultTemplate(
-  { template },
-  opts,
-  { imports, interfaces, componentName, props, jsx, exports }
-) {
-  const plugins = ["jsx"];
-  if (opts.typescript) {
-    plugins.push("typescript");
-  }
-
+const template = (variables, { tpl }) => {
+  const imports = variables.imports;
   imports.push({
     type: "ImportDeclaration",
     specifiers: [
@@ -15,31 +7,35 @@ function defaultTemplate(
         type: "ImportSpecifier",
         imported: {
           type: "Identifier",
-          name: "v4",
+          name: "useId",
         },
       },
     ],
     source: {
       type: "StringLiteral",
-      value: "uuid",
+      value: "./util/useId",
     },
   });
 
-  props[0].properties.find((prop) => prop.key.name === "titleId").value = {
+  variables.props[0].properties.find(
+    (prop) => prop.key.name === "titleId"
+  ).value = {
     type: "Identifier",
     name: "_titleId",
   };
 
-  const typeScriptTpl = template.smart({ plugins });
-  return typeScriptTpl.ast`
-  ${imports}
-  ${interfaces}
-  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ?
-      "icon-title-" + v4() : undefined);
-    return ${jsx};
-  }
-  ${exports}`;
-}
+  return tpl`
+${imports};
 
-module.exports = defaultTemplate;
+${variables.interfaces};
+
+const ${variables.componentName} = forwardRef((${variables.props}) => {
+  let titleId: string | undefined = useId();
+  titleId = title ? _titleId ? _titleId : "title-" + titleId : undefined;
+  return ${variables.jsx};
+});
+export default ${variables.componentName}
+`;
+};
+
+module.exports = template;

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

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

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

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

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

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

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