Lerna versionbump [ci skip]

- @navikt/ds-icons@0.7.1 - @navikt/ds-react@0.14.3 - @navikt/ds-react-internal@0.9.3
[fix] update icons (#1373 )
2026-10-13 09:12:03 +00:00 · 2021-12-22 10:31:55 +00:00 · 2021-12-22 11:18:54 +01:00 · 2021-12-21 14:02:07 +00:00 · 2021-12-21 14:47:59 +01:00 · 2021-12-17 12:27:25 +00:00
212 changed files with 6548 additions and 4375 deletions
@@ -45,12 +45,6 @@ jobs:
        run: echo "BRANCH=HEAD" >> website/.env
      - name: Test gatsby-build (design.nav.no)
        run: yarn build:gatsby
-      - name: Test chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          projectToken: ${{ secrets.CHROMATIC }}
-          exitZeroOnChanges: true

  publish-npm:
    needs: test-build
@@ -0,0 +1,126 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  chromatic-pr:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        id: chromatic_tests
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          exitZeroOnChanges: false
+
+      - name: replace storybook url
+        uses: frabert/replace-string-action@v2.0
+        id: storybook_url
+        with:
+          pattern: "(iframe.html)"
+          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
+          replace-with: ""
+
+      - name: Get commit sha
+        id: vars
+        shell: bash
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Chromatic build-output
+
+      - name: Create or update comment
+        if: steps.chromatic_tests.outcome == 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Chromatic build-output:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :white_check_mark: SUCCESS :white_check_mark:
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+      - name: Create or update failed comment
+        if: steps.chromatic_tests.outcome != 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            **Chromatic build-output**:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+  chromatic-push:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          autoAcceptChanges: true
@@ -1,8 +1,8 @@
 name: Update Icons

 on:
-  schedule:
-    - cron: 0 0 * * *
+#  schedule:
+ #   - cron: 0 0 * * *
  workflow_dispatch:

 jobs:
@@ -0,0 +1,39 @@
+name: Update tokens
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false
@@ -115,4 +115,5 @@ utilities/**/css
 react-docgen.json
 react-docgen-docs.json
 cjs
-esm
+esm
+.vercel
@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs";

 # Migreringsguider

+## Migrering til ds-css v0.12, ds-tokens v0.7
+
+### Tokens er refaktort og oppdatert
+
+- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
+- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
+- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
+
 ## Migrering til ds-react v0.11, ds-css v0.10

 ### ErrorSummary
@@ -6,11 +6,11 @@ import {
 import styled from "styled-components";

 const Success = styled(SuccessIcon)`
-  color: var(--navds-color-green-50);
+  color: var(--navds-semantic-color-feedback-success-icon);
 `;

 const Error = styled(ErrorIcon)`
-  color: var(--navds-color-red-50);
+  color: var(--navds-semantic-color-feedback-danger-icon);
 `;

 const Table = styled(DsTable)`
@@ -1,9 +1,11 @@
 :root {
-  --navds-accordion-menu-color-text: var(--navds-color-text-link);
-  --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
-  --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
-  --navds-accordion-menu-color-text-active: var(--navds-color-text);
-  --navds-accordion-menu-outline-focus: var(--navds-text-focus);
+  --navds-accordion-menu-color-text: var(--navds-semantic-color-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-accordion-menu-color-background-hover: var(
+    --navds-global-color-blue-50
+  );
+  --navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
 }

 .navds-accordion-menu__list {
@@ -97,7 +99,7 @@
 }

 .navds-accordion-menu-item--active {
-  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
+  box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
  color: var(--navds-accordion-menu-color-text-active);
  text-decoration: none;
 }
@@ -1,9 +1,15 @@
 :root {
-  --navds-accordion-color-text: var(--navds-color-darkgray);
-  --navds-accordion-color-background: var(--navds-color-background);
-  --navds-accordion-color-text-hover: var(--navds-color-blue-50);
-  --navds-accordion-color-border-hover: var(--navds-color-blue-50);
-  --navds-accordion-color-border-focus: var(--navds-color-background);
+  --navds-accordion-color-text: var(--navds-semantic-color-text);
+  --navds-accordion-color-background: var(
+    ---navds-semantic-color-component-background-light
+  );
+  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
+  --navds-accordion-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-border-focus: var(
+    ---navds-semantic-color-component-background-light
+  );
 }

 .navds-accordion .ReactCollapse--collapse {
@@ -1,21 +1,51 @@
 :root {
-  --navds-alert-color-border: var(--navds-color-gray-40);
-  --navds-alert-color-error-border: var(--navds-color-error-border);
-  --navds-alert-color-error-background: var(--navds-color-error-background);
-  --navds-alert-color-warning-border: var(--navds-color-warning-border);
-  --navds-alert-color-warning-background: var(--navds-color-warning-background);
-  --navds-alert-color-info-border: var(--navds-color-info-border);
-  --navds-alert-color-info-background: var(--navds-color-info-background);
-  --navds-alert-color-success-border: var(--navds-color-success-border);
-  --navds-alert-color-success-background: var(--navds-color-success-background);
-  --navds-alert-color-error-icon: var(--navds-color-red-60);
-  --navds-alert-color-error-icon-background: var(--navds-color-white);
-  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
-  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
-  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
-  --navds-alert-color-info-icon-background: var(--navds-color-white);
-  --navds-alert-color-success-icon: var(--navds-color-green-70);
-  --navds-alert-color-success-icon-background: var(--navds-color-white);
+  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
+  --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-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
+  );
+  --navds-alert-color-warning-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --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-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-alert-color-success-background: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --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-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 {
@@ -22,13 +22,13 @@ html {

 body {
  font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
+  line-height: 1.333;
+  color: var(--navds-semantic-color-text);
  font-size: 1.125rem;
 }

 a {
-  color: var(--navds-color-text-link);
+  color: var(--navds-semantic-color-link);
 }

 /* https://web.dev/prefers-reduced-motion/ */
@@ -1,53 +1,79 @@
 :root {
  /* Primary */
-  --navds-button-color-primary-text: var(--navds-color-white);
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
-  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-primary-border-focus: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-primary-background: var(
+    --navds-semantic-color-interaction-primary
+  );
  --navds-button-color-primary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
  );
  --navds-button-color-primary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-color-action-default);
-  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-border: var(
+    --navds-semantic-color-interaction-primary
+  );
  --navds-button-color-secondary-border-focus-active-hover: var(
-    --navds-color-white
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
  );
-  --navds-button-color-secondary-background: var(--navds-color-background);
  --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
  );
  --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-color-action-default);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --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-border-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-active: var(
+    --navds-semantic-color-component-background-light
+  );
  --navds-button-color-tertiary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Danger */
-  --navds-button-color-danger-text: var(--navds-color-white);
-  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-danger-background: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-button-color-danger-background-hover: var(
+    --navds-semantic-color-interaction-danger-hover
+  );
  --navds-button-color-danger-background-active: var(
-    --navds-color-danger-active
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
  );
-  --navds-button-color-danger-border-focus: var(--navds-color-white);
-
-  /* Disabled */
-  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
-  --navds-button-color-background-disabled: var(--navds-color-disabled);
 }

 .navds-button {
@@ -111,8 +137,13 @@
    var(--navds-shadow-focus);
 }

+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
 **************************/

 .navds-button--secondary {
@@ -145,6 +176,13 @@
    var(--navds-shadow-focus);
 }

+.navds-button--secondary:disabled,
+.navds-button--secondary:hover:disabled {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 /****************************
 * .navds-button--tertiary *
 ****************************/
@@ -168,11 +206,23 @@
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }

+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
 .navds-button--tertiary:active:focus {
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
    var(--navds-shadow-focus);
 }

+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
 * .navds-button--danger *
 *************************/
@@ -195,14 +245,17 @@
    var(--navds-shadow-focus);
 }

+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
 /**************************
 * .navds-button:disabled *
 **************************/

 .navds-button:disabled {
-  color: var(--navds-button-color-text-disabled);
-  background-color: var(--navds-button-color-background-disabled);
+  opacity: 0.3;
  cursor: not-allowed;
-  box-shadow: none;
  transform: none;
 }
@@ -1,15 +1,25 @@
 :root {
-  --navds-card-micro-color-text: var(--navds-color-text-primary);
-  --navds-card-micro-color-background: var(--navds-color-orange-20);
+  --navds-card-micro-color-text: var(--navds-semantic-color-text);
+  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
  --navds-card-micro-color-border: transparent;
-  --navds-card-micro-color-text-hover: var(--navds-color-blue-50);
-  --navds-card-micro-color-background-hover: var(--navds-color-white);
-  --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
-  --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
-  --navds-card-micro-color-background-focus: var(--navds-color-white);
-  --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
-  --navds-card-micro-color-background-active: var(--navds-color-blue-70);
-  --navds-card-micro-color-text-active: var(--navds-color-white);
+  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-card-micro-color-background-active: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
 }

 /*
@@ -1,12 +1,12 @@
 .navds-content-container {
  margin-left: auto;
  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--navds-content-container-padding-small);
+  max-width: 79.5rem;
+  padding: var(--navds-spacing-4);
 }

@media (min-width: 448px) {
  .navds-content-container {
-    padding: var(--navds-content-container-padding-medium-and-larger);
+    padding: var(--navds-spacing-6);
  }
 }
@@ -1,13 +0,0 @@
-.navds-checkbox-group--small > .navds-checkboxes {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
-  margin-top: 0;
-}
-
-.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
-  margin-top: 0;
-}
@@ -1,146 +0,0 @@
-:root {
-  --navds-checkbox-color-background: var(--navds-color-white);
-  --navds-checkbox-color-border: var(--navds-color-gray-60);
-  --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
-  --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
-  --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
-  --navds-checkbox-color-description: var(--navds-color-gray-80);
-  --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
-  --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
-  --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
-  --navds-checkbox-color-border-error: var(--navds-color-red-50);
-
-  /* Disabled */
-  --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
-  --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
-  --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
-  --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
-  --navds-checkbox-color-background-checked-disabled: var(
-    --navds-color-gray-40
-  );
-}
-
-.navds-checkbox {
-  position: relative;
-  padding: var(--navds-spacing-3) 0;
-}
-
-.navds-checkbox__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  left: -12px;
-  margin: 0;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-checkbox__label {
-  display: flex;
-  width: fit-content;
-  gap: 12px;
-  cursor: pointer;
-}
-
-.navds-checkbox__description {
-  padding-left: calc(48px - 12px);
-  color: var(--navds-checkbox-color-description);
-}
-
-.navds-checkbox--with-description {
-  padding-bottom: 0;
-}
-
-.navds-checkbox .navds-error-message {
-  margin-top: var(--navds-spacing-3);
-}
-
-.navds-checkbox--with-description .navds-error-message {
-  margin-top: 0;
-}
-
-.navds-checkbox--with-error-message {
-  padding-bottom: var(--navds-spacing-2);
-}
-
-.navds-checkbox__label::before {
-  content: "";
-  background-color: var(--navds-checkbox-color-background);
-  border: 1px solid var(--navds-checkbox-color-border);
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.navds-checkbox--small {
-  padding: var(--navds-spacing-1) 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__input {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__label::before {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.navds-checkbox__input:hover + .navds-checkbox__label {
-  color: var(--navds-checkbox-color-label-hover);
-}
-
-.navds-checkbox__input:hover + .navds-checkbox__label::before {
-  border-color: var(--navds-checkbox-color-border-hover);
-  background-color: var(--navds-checkbox-color-background-hover);
-}
-
-.navds-checkbox__input:focus + .navds-checkbox__label::before {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: var(--navds-checkmark-image-white);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 75%;
-  border: 2px solid var(--navds-checkbox-color-border-checked);
-  background-color: var(--navds-checkbox-color-background-checked);
-}
-
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  background-color: white;
-  background-image: var(--navds-checkmark-image-blue);
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
-  + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
-  border-color: var(--navds-checkbox-color-border-error);
-}
-
-.navds-checkbox--small .navds-error-message {
-  margin-top: 4px;
-}
-
-.navds-checkbox__input:disabled,
-.navds-checkbox__input:disabled + .navds-checkbox__label {
-  color: var(--navds-checkbox-color-label-disabled);
-  cursor: not-allowed;
-}
-
-.navds-checkbox__input:disabled + .navds-checkbox__label::before {
-  background-color: var(--navds-checkbox-color-background-disabled);
-  border-color: var(--navds-checkbox-color-border-disabled);
-}
-
-.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
-  background-color: var(--navds-checkbox-color-background-checked-disabled);
-  border-color: var(--navds-checkbox-color-border-checked-disabled);
-}
@@ -1,30 +1,30 @@
 :root {
  --navds-confirmation-panel-color-background: var(
-    --navds-color-warning-background
+    --navds-semantic-color-feedback-warning-background
  );
  --navds-confirmation-panel-color-background-checked: var(
-    --navds-color-success-background
+    --navds-semantic-color-feedback-success-background
  );
  --navds-confirmation-panel-color-border-checked: var(
-    --navds-color-success-background
+    --navds-semantic-color-feedback-success-background
  );
  --navds-confirmation-panel-color-background-error: var(
-    --navds-color-error-background
+    --navds-semantic-color-feedback-danger-background
  );
  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
-    --navds-color-green-70
+    --navds-global-color-green-700
  );
  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
-    --navds-color-green-70
+    --navds-global-color-green-700
  );
  --navds-confirmation-panel-color-checkbox-background-checked: var(
-    --navds-color-green-50
+    --navds-global-color-green-500
  );
  --navds-confirmation-panel-color-checkbox-border-checked: var(
-    --navds-color-green-50
+    --navds-semantic-color-feedback-success-border
  );
  --navds-confirmation-panel-color-checkbox-label-checked: var(
-    --navds-color-darkgray
+    --navds-semantic-color-text
  );
 }

@@ -77,7 +77,7 @@
    --navds-confirmation-panel-color-checkbox-background-checked
  );
  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
-  background-image: var(--navds-checkmark-image-white);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
 }

 .navds-confirmation-panel--checked
@@ -94,5 +94,5 @@
 .navds-confirmation-panel--checked
  .navds-checkbox__input:focus:hover
  + .navds-checkbox__label::before {
-  background-image: var(--navds-checkmark-image-white);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
 }
@@ -1,8 +1,15 @@
 :root {
-  --navds-error-message-color-text: var(--navds-color-text-error);
+  --navds-error-message-color-text: var(
+    --navds-semantic-color-feedback-danger-text
+  );
 }

 .navds-error-message {
-  display: block;
  color: var(--navds-error-message-color-text);
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-error-message::before {
+  content: "•";
 }
@@ -1,6 +1,10 @@
 :root {
-  --navds-error-summary-color-background: var(--navds-color-white);
-  --navds-error-summary-color-border: var(--navds-color-error-border);
+  --navds-error-summary-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-error-summary-color-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
 }

 .navds-error-summary {
@@ -6,14 +6,19 @@
 }

 .navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: 8px;
+  margin-top: var(--navds-spacing-2);
 }

-.navds-fieldset--small > :not(:first-child):not(:empty) {
-  margin-top: 4px;
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
 }

 /* Applied when hideLegend is applied to fieldset */
 .navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
  margin-top: 0;
 }
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
@@ -1,11 +1,6 @@
 .navds-form-field > :not(:first-child):not(:empty),
 .navds-form-field > input:not(:first-child) {
-  margin-top: 8px;
-}
-
-.navds-form-field--small > :not(:first-child):not(:empty),
-.navds-form-field--small > input:not(:first-child) {
-  margin-top: 4px;
+  margin-top: var(--navds-spacing-2);
 }

 /* Applied when hideLabel is applied to form-element */
@@ -4,13 +4,11 @@
@import "fieldset.css";
@import "form.css";
@import "error-summary.css";
-@import "checkbox.css";
-@import "checkbox-group.css";
@import "confirmation-panel.css";
@import "error-message.css";
-@import "radio.css";
-@import "radio-group.css";
+@import "radio-checkbox.css";
@import "select.css";
+@import "switch.css";
@import "text-field.css";
@import "textarea.css";
@import "search-field.css";
@@ -0,0 +1,182 @@
+:root {
+  --navds-radio-checkbox-color-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --navds-radio-checkbox-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-radio-checkbox-color-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
+  --navds-radio-checkbox-color-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-radio-checkbox-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  left: -12px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--navds-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-checkbox-color-background);
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-radio__label::before {
+  border-radius: 50%;
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-checkbox__description,
+.navds-radio__description {
+  color: var(--navds-color-text-primary);
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 32px;
+  height: 32px;
+  top: 0;
+  left: -6px;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: 6px 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-position: 6px center;
+  background-repeat: no-repeat;
+  background-size: 13px;
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox--small
+  > .navds-checkbox__input:checked
+  + .navds-checkbox__label::before {
+  background-position: 4px center;
+}
+
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--navds-radio-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}
@@ -1,13 +0,0 @@
-.navds-radio-group--small > .navds-radio-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
-  margin-top: 0;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
-  margin-top: 0;
-}
@@ -1,150 +0,0 @@
-:root {
-  --navds-radio-color-description: var(--navds-color-gray-80);
-  --navds-radio-color-background: var(--navds-color-white);
-  --navds-radio-color-border: var(--navds-color-gray-60);
-  --navds-radio-color-label-hover: var(--navds-color-blue-50);
-  --navds-radio-color-border-hover: var(--navds-color-blue-50);
-  --navds-radio-color-background-hover: var(--navds-color-blue-10);
-  --navds-radio-color-border-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
-  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
-  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-error: var(--navds-color-red-50);
-  --navds-radio-color-border-error: var(--navds-color-red-50);
-
-  /* Disabled */
-  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
-  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
-  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
-  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
-}
-
-.navds-radio {
-  position: relative;
-  padding: var(--navds-spacing-3) 0;
-}
-
-.navds-radio--with-description .navds-error-message {
-  margin-top: 0;
-}
-
-.navds-radio .navds-error-message {
-  margin-top: var(--navds-spacing-3);
-}
-
-.navds-radio__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  left: -12px;
-  margin: 0;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-radio__label {
-  display: flex;
-  width: fit-content;
-  gap: 12px;
-  min-width: 48px;
-  cursor: pointer;
-}
-
-.navds-radio__description {
-  padding-left: calc(48px - 12px);
-  color: var(--navds-radio-color-description);
-}
-
-.navds-radio--with-description {
-  padding-bottom: 0;
-}
-
-.navds-radio--with-error-message {
-  padding-bottom: var(--navds-spacing-2);
-}
-
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--navds-radio-color-background);
-  border: 1px solid var(--navds-radio-color-border);
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: 50%;
-}
-
-.navds-radio--small {
-  padding: var(--navds-spacing-1) 0;
-}
-
-.navds-radio--small > .navds-radio__input {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 0;
-}
-
-.navds-radio--small > .navds-radio__label::before {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.navds-radio__input:hover + .navds-radio__label {
-  color: var(--navds-radio-color-label-hover);
-}
-
-.navds-radio__input:hover + .navds-radio__label::before {
-  border-color: var(--navds-radio-color-border-hover);
-  background-color: var(--navds-radio-color-background-hover);
-}
-
-.navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-radio__input:checked + .navds-radio__label::before {
-  border: 2px solid var(--navds-radio-color-border-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
-}
-
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
-    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
-}
-
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
-  + .navds-radio__label::before {
-  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
-  border-color: var(--navds-radio-color-border-error);
-}
-
-.navds-radio--small .navds-error-message {
-  margin-top: 4px;
-}
-
-.navds-radio__input:disabled,
-.navds-radio__input:disabled + .navds-radio__label {
-  color: var(--navds-radio-color-label-disabled);
-  cursor: not-allowed;
-}
-
-.navds-radio__input:disabled + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled);
-  border-color: var(--navds-radio-color-border-disabled);
-}
-
-.navds-radio__input:disabled:checked + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled-checked);
-  border-color: var(--navds-radio-color-border-disabled-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
-}
@@ -1,7 +1,13 @@
 :root {
-  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-search-field-color-border-error: var(--navds-color-red-50);
-  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+  --navds-search-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-clearbutton-border: var(
+    --navds-semantic-color-border
+  );
 }

 .navds-search-field__input-wrapper {
@@ -47,3 +53,7 @@
  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
  border-color: var(--navds-search-field-color-border-error);
 }
+
+.navds-search-field--disabled {
+  opacity: 0.3;
+}
@@ -1,12 +1,22 @@
 :root {
-  --navds-select-color-background: var(--navds-color-white);
-  --navds-select-color-border: var(--navds-color-gray-60);
-  --navds-select-color-border-hover: var(--navds-color-blue-50);
-  --navds-select-color-border-error: var(--navds-color-red-50);
-  --navds-select-color-shadow-error: var(--navds-color-red-50);
-  --navds-select-color-border-disabled: var(--navds-color-gray-40);
-  --navds-select-color-background-disabled: var(--navds-color-gray-10);
-  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+  --navds-select-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-select-color-border: var(--navds-semantic-color-border);
+  --navds-select-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-select-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-select-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-select-color-text-disabled: var(--navds-semantic-color-text);
 }

 .navds-select__input {
@@ -59,12 +69,16 @@
  border-color: var(--navds-select-color-border-error);
 }

-/* Disabled handling */
-.navds-select__input:disabled,
-.navds-select__input[read-only] {
-  background-color: var(--navds-select-color-background-disabled);
-  border-color: var(--navds-select-color-border-disabled);
+/*
+  Disabled handling
+ */
+.navds-select--disabled {
+  opacity: 0.3;
+}
+
+.navds-select__input:disabled {
+  background-color: var(--navds-select-color-background);
+  border-color: var(--navds-select-color-border);
  box-shadow: none;
-  color: var(--navds-select-color-text-disabled);
  cursor: not-allowed;
 }
@@ -0,0 +1,183 @@
+:root {
+  --navds-switch-color-label: var(--navds-color-text-primary);
+  --navds-switch-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-track-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --navds-switch-color-track-shadow-inner-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb-loader-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--navds-switch-color-label);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 0
+    calc(var(--navds-spacing-2) - 2px) 3.25rem;
+}
+
+.navds-switch--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper {
+  color: var(--navds-switch-color-label-hover);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--navds-switch-color-track-background);
+  position: absolute;
+  top: var(--navds-spacing-3);
+  left: 0;
+  border-radius: var(--navds-spacing-4);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--navds-spacing-1);
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover-checked);
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background);
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
+    var(--navds-shadow-focus);
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--navds-switch-color-thumb);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(2px);
+}
+
+.navds-switch__input:checked:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(18px);
+}
+
+.navds-switch__input:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+/* Loader */
+.navds-switch__input:checked
+  ~ .navds-switch__track
+  > .navds-switch__thumb
+  .navds-loader__foreground {
+  stroke: var(--navds-switch-color-thumb-loader-checked);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
@@ -1,12 +1,22 @@
 :root {
-  --navds-text-field-color-background: var(--navds-color-white);
-  --navds-text-field-color-border: var(--navds-color-gray-60);
-  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
-  --navds-text-field-color-border-error: var(--navds-color-red-50);
-  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
-  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
-  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border);
+  --navds-text-field-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-text-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-text-field-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
 }

 .navds-text-field__input {
@@ -14,16 +24,20 @@
  padding: 0.5rem;
  background-color: var(--navds-text-field-color-background);
  border-radius: 4px;
-  border: 1px solid var(--navds-text-field-color-border);
+  border: 2px solid var(--navds-text-field-color-border);
  min-height: 48px;
  width: 100%;
 }

 .navds-form-field--small > .navds-text-field__input {
-  padding: 0.15rem;
+  padding: 0 0.15rem;
  min-height: 32px;
 }

+.navds-form-field--small > .navds-text-field__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
 .navds-text-field__input:hover {
  border-color: var(--navds-text-field-color-border-hover);
 }
@@ -36,20 +50,29 @@
 /**
  Error handling
 */
-.navds-text-field--error
-  > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
  border-color: var(--navds-text-field-color-border-error);
 }

 /* Disabled handling */
-.navds-text-field__input:disabled,
-.navds-text-field__input[readonly] {
-  background-color: var(--navds-text-field-color-background-disabled);
-  border-color: var(--navds-text-field-color-border-disabled);
+.navds-text-field__input:disabled {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
  box-shadow: none;
-  color: var(--navds-text-field-color-text-disabled);
  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--disabled > .navds-text-field__label,
+.navds-text-field--disabled > .navds-text-field__description {
+  opacity: 0.3;
 }

 /**
@@ -1,14 +1,26 @@
 :root {
-  --navds-textarea-color-background: var(--navds-color-white);
-  --navds-textarea-color-border: var(--navds-color-gray-60);
-  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
-  --navds-textarea-color-border-error: var(--navds-color-red-50);
-  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
-  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
-  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
-  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
-  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
-  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+  --navds-textarea-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-textarea-color-border: var(--navds-semantic-color-border);
+  --navds-textarea-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-textarea-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
+  --navds-textarea-color-counter-text-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-textarea-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
 }

 .navds-textarea__wrapper {
@@ -26,7 +38,7 @@
  width: 100%;
  transition: height 0.1s ease-out;
  display: block;
-  min-height: 48px;
+  min-height: 3rem;
 }

 .navds-textarea--counter {
@@ -44,7 +56,7 @@

 .navds-form-field--small .navds-textarea__input {
  padding: var(--navds-spacing-1);
-  min-height: 32px;
+  min-height: 2rem;
 }

 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -78,11 +90,20 @@
 /*
  Disabled handling
 */
-.navds-textarea__input:disabled,
+.navds-textarea--disabled {
+  opacity: 0.3;
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 .navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background-disabled);
-  border-color: var(--navds-textarea-color-border-disabled);
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
  box-shadow: none;
-  color: var(--navds-textarea-color-text-disabled);
  cursor: not-allowed;
 }
@@ -5,12 +5,12 @@
 .navds-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-grid-gutter-small);
+  grid-gap: var(--navds-spacing-4);
 }

@media (min-width: 448px) {
  .navds-grid {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+    grid-gap: var(--navds-spacing-6);
  }
 }

@@ -1,7 +1,11 @@
 :root {
-  --navds-guide-panel-color-background: var(--navds-color-background);
-  --navds-guide-panel-color-border: var(--navds-color-blue-40);
-  --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+  --navds-guide-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
+  --navds-guide-panel-color-illustration-background: var(
+    --navds-global-color-blue-200
+  );
 }

 /**
@@ -1,13 +1,25 @@
 :root {
  --navds-help-text-color-button-background: transparent;
-  --navds-help-text-color-icon: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-hover: var(--navds-color-white);
-  --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-focus: var(--navds-color-white);
-  --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
-  --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
+  --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
+  --navds-help-text-color-icon-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-semantic-color-component-background-light
+  );
+  --navds-help-text-color-icon-background-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-help-text-color-popover-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
 }

 .navds-help-text__button {
@@ -1,7 +1,9 @@
 :root {
-  --navds-link-panel-color-text: var(--navds-color-gray-90);
-  --navds-link-panel-color-border-hover: var(--navds-color-blue-50);
-  --navds-link-panel-color-title-hover: var(--navds-color-text-link);
+  --navds-link-panel-color-text: var(--navds-semantic-color-text);
+  --navds-link-panel-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
 }

 .navds-link-panel {
@@ -19,7 +21,7 @@
 }

 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-hover);
+  box-shadow: var(--navds-shadow-card);
  border-color: var(--navds-link-panel-color-border-hover);
 }

@@ -1,13 +1,13 @@
 :root {
-  --navds-link-color-text: var(--navds-color-text-link);
-  --navds-link-color-text-focus: var(--navds-color-text-inverse);
-  --navds-link-color-text-active: var(--navds-color-text-inverse);
-  --navds-link-color-background-focus: var(--navds-text-focus);
-  --navds-link-color-background-active: var(--navds-text-focus);
-  --navds-link-color-icon: var(--navds-color-text-link);
-  --navds-link-color-icon-focus: var(--navds-color-text-inverse);
-  --navds-link-color-on-info-background: var(--navds-color-text-primary);
-  --navds-link-color-on-error-background: var(--navds-color-text-primary);
+  --navds-link-color-text: var(--navds-semantic-color-link);
+  --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-background-focus: var(--navds-semantic-color-focus);
+  --navds-link-color-background-active: var(--navds-semantic-color-focus);
+  --navds-link-color-icon: var(--navds-semantic-color-link);
+  --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-on-info-background: var(--navds-semantic-color-text);
+  --navds-link-color-on-error-background: var(--navds-semantic-color-text);
 }

 .navds-link {
@@ -36,7 +36,7 @@
  color: var(--navds-link-color-text-focus);
  text-decoration: none;
  background-color: var(--navds-link-color-background-focus);
-  box-shadow: var(--navds-text-shadow);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
 }

 .navds-link:active {
@@ -44,7 +44,7 @@
  color: var(--navds-link-color-text-active);
  text-decoration: none;
  background-color: var(--navds-link-color-background-active);
-  box-shadow: var(--navds-text-shadow);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
 }

 .navds-link svg {
@@ -1,9 +1,15 @@
 :root {
-  --navds-loader-color-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-background: var(--navds-color-gray-10);
-  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
-  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-interaction-foreground: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-loader-color-inverted-foreground: var(
+    --navds-semantic-color-component-background-light
+  );
  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
  --navds-loader-color-transparent-background: transparent;
  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
@@ -1,6 +1,8 @@
 :root {
-  --navds-modal-color-background: var(--navds-color-background);
-  --navds-modal-color-overlay: var(--navds-color-modal-overlay);
+  --navds-modal-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
 }

 .ReactModal__Body--open {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.10.0",
+  "version": "0.12.6",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.3",
+    "@navikt/ds-tokens": "^0.7.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
@@ -1,8 +1,14 @@
 :root {
-  --navds-page-header-color-background: var(--navds-color-background);
-  --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
-  --navds-page-header-color-shadow-product: var(--navds-color-green-40);
-  --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
+  --navds-page-header-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-page-header-color-shadow-situation: var(
+    --navds-global-color-orange-400
+  );
+  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
+  --navds-page-header-color-shadow-guide: var(
+    --navds-global-color-deepblue-400
+  );
 }

 .navds-page-header {
@@ -1,12 +1,14 @@
 :root {
-  --navds-panel-color-background: var(--navds-color-white);
-  --navds-panel-color-border: var(--navds-color-border);
+  --navds-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-panel-color-border: var(--navds-semantic-color-border-muted);
 }

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

@@ -1,13 +1,14 @@
 :root {
-  --navds-popover-color-background: var(--navds-color-background);
-  --navds-popover-color-border: var(--navds-color-gray-40);
-  --navds-popover-color-shadow: var(--navds-color-gray-20);
+  --navds-popover-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-popover-color-border: var(--navds-semantic-color-border-muted);
 }

 .navds-popover {
  z-index: var(--navds-z-index-popover);
  background-color: var(--navds-popover-color-background);
-  box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
+  box-shadow: var(--navds-shadow-popover);
  border: 1px solid;
  border-color: var(--navds-popover-color-border);
  border-radius: 4px;
@@ -1,11 +1,14 @@
 :root {
-  --navds-speechbubble-color-background: var(--navds-color-gray-10);
-  --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
-  --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
+  --navds-speechbubble-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
  --navds-speechbubble-color-illustration-background: var(
-    --navds-color-gray-20
+    --navds-semantic-color-canvas-background
+  );
+  --navds-speechbubble-color-detail-text: var(
+    --navds-semantic-color-text-muted
  );
-  --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
 }

 .navds-speechbubble {
@@ -52,7 +55,7 @@

 .navds-speechbubble__bubble {
  padding: 1rem;
-  box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
+  box-shadow: var(--navds-shadow-popover);
  width: fit-content;
  max-width: 37.5rem;
  background-color: var(--navds-speechbubble-color-background);
@@ -1,3 +1,20 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+  --navds-table-row-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-table-row-color-background-selected: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-table-row-color-background-selected-hover: var(
+    --navds-global-color-blue-100
+  );
+  --navds-table-row-color-background-zebra: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
+}
+
 .navds-table {
  border-collapse: collapse;
  width: 100%;
@@ -16,13 +33,50 @@
  display: table-row;
 }

-.navds-table__cell {
-  display: table-cell;
-  padding: var(--navds-spacing-4);
-  text-align: left;
-  border-bottom: var(--navds-border-default);
+.navds-table__body .navds-table__row:hover {
+  background-color: var(--navds-table-row-color-background-hover);
 }

-.navds-table--small .navds-table__cell {
+.navds-table__row--selected {
+  background-color: var(--navds-table-row-color-background-selected);
+}
+
+.navds-table__body .navds-table__row--selected:hover {
+  background-color: var(--navds-table-row-color-background-selected-hover);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  text-align: left;
+}
+
+.navds-table__body .navds-table__row:hover .navds-table__header-cell,
+.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+  border-color: var(--navds-table-cell-color-border-hover);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
  padding: var(--navds-spacing-2);
 }
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
@@ -1,18 +1,32 @@
 :root {
-  --navds-tag-color-border: var(--navds-color-gray-40);
-  --navds-tag-color-background: var(--navds-color-gray-10);
-  --navds-tag-color-info-background: var(--navds-color-tag-info-background);
-  --navds-tag-color-info-border: var(--navds-color-tag-info-border);
+  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
+  --navds-tag-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-tag-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-tag-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
  --navds-tag-color-warning-background: var(
-    --navds-color-tag-warning-background
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-tag-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
  );
-  --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
  --navds-tag-color-success-background: var(
-    --navds-color-tag-success-background
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-tag-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-tag-color-error-background: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-tag-color-error-border: var(
+    --navds-semantic-color-feedback-danger-border
  );
-  --navds-tag-color-success-border: var(--navds-color-tag-success-border);
-  --navds-tag-color-error-background: var(--navds-color-tag-error-background);
-  --navds-tag-color-error-border: var(--navds-color-tag-error-border);
 }

 .navds-tag {
@@ -21,7 +21,10 @@ export const getPublishedIcons = async () => {
      console.log("Failed getPublishedIcons ");
      throw e;
    });
-  return data?.meta?.components;
+
+  return data?.meta?.components?.filter(
+    (component: any) => component?.containing_frame?.pageName !== "🔆Pictogram"
+  );
 };

 /**
@@ -125,6 +125,18 @@
    "created_at": "2021-01-11T13:37:55.665Z",
    "pageName": "Health"
  },
+  {
+    "name": "Bed",
+    "description": "",
+    "created_at": "2021-12-21T08:49:12.806Z",
+    "pageName": "Family"
+  },
+  {
+    "name": "BedFilled",
+    "description": "",
+    "created_at": "2021-12-21T08:49:12.811Z",
+    "pageName": "Family"
+  },
  {
    "name": "Bell",
    "description": "",
@@ -233,6 +245,18 @@
    "created_at": "2021-01-11T13:37:55.351Z",
    "pageName": "Interface"
  },
+  {
+    "name": "Candle",
+    "description": "",
+    "created_at": "2021-12-14T15:33:41.777Z",
+    "pageName": "Pension"
+  },
+  {
+    "name": "CandleFilled",
+    "description": "",
+    "created_at": "2021-12-14T15:33:41.768Z",
+    "pageName": "Pension"
+  },
  {
    "name": "Cantine1",
    "description": "",
@@ -635,6 +659,42 @@
    "created_at": "2021-01-28T14:00:38.652Z",
    "pageName": "Fyrstikkalleen"
  },
+  {
+    "name": "EllipsisCircleH",
+    "description": "",
+    "created_at": "2021-12-07T14:39:02.017Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "EllipsisCircleHFilled",
+    "description": "",
+    "created_at": "2021-12-07T14:39:02.022Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "EllipsisH",
+    "description": "",
+    "created_at": "2021-12-07T14:24:59.749Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "EllipsisHFilled",
+    "description": "",
+    "created_at": "2021-12-07T14:24:59.743Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "EllipsisV",
+    "description": "",
+    "created_at": "2021-12-07T14:39:02.012Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "EllipsisVFilled",
+    "description": "",
+    "created_at": "2021-12-07T14:39:02.005Z",
+    "pageName": "Settings"
+  },
  {
    "name": "Email",
    "description": "",
@@ -1019,6 +1079,42 @@
    "created_at": "2021-01-28T14:00:38.669Z",
    "pageName": "Fyrstikkalleen"
  },
+  {
+    "name": "HearingImpaired",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.143Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "HearingImpairedFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.110Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "HearingImpairedTeleslynge",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.154Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "HearingImpairedTeleslyngeFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.147Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "HearingImpairedWireless",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.150Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "HearingImpairedWirelessFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.124Z",
+    "pageName": "Fyrstikkalleen"
+  },
  {
    "name": "Heart",
    "description": "",
@@ -1403,6 +1499,18 @@
    "created_at": "2021-01-11T13:37:55.543Z",
    "pageName": "Chevron"
  },
+  {
+    "name": "NorwegianFlag",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.135Z",
+    "pageName": "International"
+  },
+  {
+    "name": "NorwegianFlagFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.128Z",
+    "pageName": "International"
+  },
  {
    "name": "NoSmoking",
    "description": "",
@@ -1451,6 +1559,18 @@
    "created_at": "2021-01-11T13:37:55.393Z",
    "pageName": "Building"
  },
+  {
+    "name": "Over18",
+    "description": "",
+    "created_at": "2021-12-15T15:16:55.874Z",
+    "pageName": "Family"
+  },
+  {
+    "name": "Over18Filled",
+    "description": "",
+    "created_at": "2021-12-15T15:16:55.869Z",
+    "pageName": "Family"
+  },
  {
    "name": "Parking",
    "description": "",
@@ -1739,6 +1859,18 @@
    "created_at": "2021-01-11T13:37:55.726Z",
    "pageName": "Money"
  },
+  {
+    "name": "Scale",
+    "description": "",
+    "created_at": "2021-12-09T09:07:43.104Z",
+    "pageName": "Building"
+  },
+  {
+    "name": "ScaleFilled",
+    "description": "",
+    "created_at": "2021-12-09T09:07:43.111Z",
+    "pageName": "Building"
+  },
  {
    "name": "SchoolBag",
    "description": "",
@@ -1895,6 +2027,18 @@
    "created_at": "2021-01-28T14:00:38.604Z",
    "pageName": "Fyrstikkalleen"
  },
+  {
+    "name": "Sightless",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.157Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "SightlessFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.106Z",
+    "pageName": "Fyrstikkalleen"
+  },
  {
    "name": "SignLanguage",
    "description": "",
@@ -2027,6 +2171,18 @@
    "created_at": "2020-07-01T10:37:42.766Z",
    "pageName": "Settings"
  },
+  {
+    "name": "SystemError",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.113Z",
+    "pageName": "Device"
+  },
+  {
+    "name": "SystemErrorFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.161Z",
+    "pageName": "Device"
+  },
  {
    "name": "SystemFilled",
    "description": "",
@@ -2057,6 +2213,18 @@
    "created_at": "2021-01-21T12:56:37.968Z",
    "pageName": "File"
  },
+  {
+    "name": "Teddy",
+    "description": "",
+    "created_at": "2021-12-15T15:16:55.856Z",
+    "pageName": "Family"
+  },
+  {
+    "name": "TeddyFilled",
+    "description": "",
+    "created_at": "2021-12-15T15:16:55.863Z",
+    "pageName": "Family"
+  },
  {
    "name": "Telephone",
    "description": "",
@@ -2117,6 +2285,18 @@
    "created_at": "2021-03-29T09:45:27.057Z",
    "pageName": "Traffic"
  },
+  {
+    "name": "Umbrella",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.117Z",
+    "pageName": "Pension"
+  },
+  {
+    "name": "UmbrellaFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.121Z",
+    "pageName": "Pension"
+  },
  {
    "name": "Unlocked",
    "description": "",
@@ -2261,6 +2441,30 @@
    "created_at": "2021-04-02T07:31:49.699Z",
    "pageName": "Family"
  },
+  {
+    "name": "Wireless",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.139Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "WirelessFilled",
+    "description": "",
+    "created_at": "2021-11-16T15:09:19.131Z",
+    "pageName": "Fyrstikkalleen"
+  },
+  {
+    "name": "Wrench",
+    "description": "",
+    "created_at": "2021-12-21T08:49:12.800Z",
+    "pageName": "Settings"
+  },
+  {
+    "name": "WrenchFilled",
+    "description": "",
+    "created_at": "2021-12-21T08:49:12.817Z",
+    "pageName": "Settings"
+  },
  {
    "name": "ZoomIn",
    "description": "",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.6.2",
+  "version": "0.7.1",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -38,7 +38,8 @@
    "uuid": "^8.3.2"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
  },
  "devDependencies": {
    "@svgr/cli": "^5.5.0",
@@ -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="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM2 16H22V12H2V16ZM20 4V10C20 7.79086 18.2091 6 16 6H15C13.8053 6 12.7329 6.52376 12 7.35418C11.2671 6.52376 10.1947 6 9 6H8C5.79086 6 4 7.79086 4 10V4H20ZM16 8C17.1046 8 18 8.89543 18 10H13C13 8.89543 13.8954 8 15 8H16ZM9 8C10.1046 8 11 8.89543 11 10H6C6 8.89543 6.89543 8 8 8H9Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM17 7C19 7 20 8.89543 20 10H13C13 8.89543 14 7 16 7H17ZM8 7C10 7 11 8.89543 11 10H4C4 8.89543 5 7 7 7H8Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16115 3.8317L12 0L14.8388 3.8317C16.1005 5.53465 15.5894 7.95753 13.7473 9.00572C12.664 9.62217 11.336 9.62217 10.2527 9.00572C8.41059 7.95753 7.89946 5.53465 9.16115 3.8317ZM10.7682 5.0223L12 3.35964L13.2318 5.0223C13.7793 5.76126 13.5575 6.8126 12.7582 7.26743C12.2881 7.53493 11.7119 7.53493 11.2418 7.26743C10.4425 6.8126 10.2207 5.76126 10.7682 5.0223ZM3.14286 12C3.06396 12 3 12.064 3 12.1429V16.5C3 17.3284 3.67157 18 4.5 18C5.32843 18 6 17.3284 6 16.5V15C6 14.4477 6.44772 14 7 14C7.55228 14 8 14.4477 8 15V16.5C8 18.2632 6.69615 19.7219 5 19.9646V22H11.1707C11.0602 21.6872 11 21.3506 11 21V17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17V21C13 21.5523 13.4477 22 14 22C14.5523 22 15 21.5523 15 21V16V15C15 14.4477 15.4477 14 16 14C16.5523 14 17 14.4477 17 15V16C17 17.1046 17.8954 18 19 18C20.1046 18 21 17.1046 21 16V12.1429C21 12.064 20.936 12 20.8571 12H13H11H3.14286ZM17 21V19.4649C17.5883 19.8052 18.2714 20 19 20V22H16.8293C16.9398 21.6872 17 21.3506 17 21ZM21 22V19.4649C22.1956 18.7733 23 17.4806 23 16V12.1429C23 10.9594 22.0406 10 20.8571 10H13H11H3.14286C1.95939 10 1 10.9594 1 12.1429V16.5C1 17.8962 1.81753 19.1015 3 19.6632V22C3 23.1046 3.89543 24 5 24H14H19C20.1046 24 21 23.1046 21 22Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0L9.16115 3.8317C7.89946 5.53465 8.41059 7.95753 10.2527 9.00572C10.4916 9.14169 10.7425 9.24767 11 9.32366V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V9.32366C13.2575 9.24767 13.5084 9.14169 13.7473 9.00572C15.5894 7.95753 16.1005 5.53465 14.8388 3.8317L12 0ZM1 11.1429C1 11.064 1.06396 11 1.14286 11H22.8571C22.936 11 23 11.064 23 11.1429V16C23 17.1046 22 18 20 18C18 18 17 17.1046 17 16V15C17 14.4477 16.5523 14 16 14C15.4477 14 15 14.4477 15 15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V21C11 23 11.5 23.5 12 24H4C3.44772 24 3 23.5523 3 23V19.9646C7 19.9646 8 18.2632 8 16.5V15C8 14.4477 7.55228 14 7 14C6.44772 14 6 14.4477 6 15V16.5C6 17.3284 5 18 3.5 18C2 18 1 17.3284 1 16.5V11.1429ZM17 21V19.4649C17.9112 19.9525 18.8223 19.9664 20.4899 19.9918C20.6525 19.9943 20.8223 19.9969 21 20V23C21 23.5523 20.5523 24 20 24H16C16.5 23.5 17 23 17 21Z" fill="#262626"/>
+</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="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7167 11.6111C13.8389 11.6111 15.752 12.5057 17.0997 13.9384L15.6059 15.4322C14.6412 14.3811 13.2559 13.7222 11.7167 13.7222C8.80187 13.7222 6.43893 16.0852 6.43893 19H4.32782C4.32782 14.9192 7.63594 11.6111 11.7167 11.6111ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.5341 16.1009C19.911 15.7239 20.5222 15.7239 20.8991 16.1009C21.2761 16.4778 21.2761 17.089 20.8991 17.4659ZM22.1848 18.7516L17.7674 23.169L13 24L13.831 19.2327L18.2485 14.8152C19.3354 13.7283 21.0978 13.7283 22.1848 14.8152C23.2718 15.9022 23.2718 17.6646 22.1848 18.7516Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10Z" fill="#262626"/>
 </svg>
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_1873:555" fill="white">
+<mask id="path-1-inside-1_1873_555" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 9.44772 0 10 0H14C14.5523 0 15 0.447715 15 1V20H9V1ZM2 12C1.44772 12 1 12.4477 1 13V20H7V13C7 12.4477 6.55228 12 6 12H2ZM24 22H0V24H24V22ZM18 6C17.4477 6 17 6.44772 17 7V20H23V7C23 6.44772 22.5523 6 22 6H18Z" fill="#262626"/>
-<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1_1873:555)"/>
+<path d="M15 20V22H17V20H15ZM9 20H7V22H9V20ZM1 20H-1V22H1V20ZM7 20V22H9V20H7ZM0 22V20H-2V22H0ZM24 22H26V20H24V22ZM0 24H-2V26H0V24ZM24 24V26H26V24H24ZM17 20H15V22H17V20ZM23 20V22H25V20H23ZM10 -2C8.34315 -2 7 -0.656854 7 1H11C11 1.55229 10.5523 2 10 2V-2ZM14 -2H10V2H14V-2ZM17 1C17 -0.656855 15.6569 -2 14 -2V2C13.4477 2 13 1.55229 13 1H17ZM17 20V1H13V20H17ZM9 22H15V18H9V22ZM7 1V20H11V1H7ZM3 13C3 13.5523 2.55229 14 2 14V10C0.343145 10 -1 11.3431 -1 13H3ZM3 20V13H-1V20H3ZM7 18H1V22H7V18ZM5 13V20H9V13H5ZM6 14C5.44771 14 5 13.5523 5 13H9C9 11.3431 7.65685 10 6 10V14ZM2 14H6V10H2V14ZM0 24H24V20H0V24ZM2 24V22H-2V24H2ZM24 22H0V26H24V22ZM22 22V24H26V22H22ZM19 7C19 7.55228 18.5523 8 18 8V4C16.3431 4 15 5.34315 15 7H19ZM19 20V7H15V20H19ZM23 18H17V22H23V18ZM21 7V20H25V7H21ZM22 8C21.4477 8 21 7.55229 21 7H25C25 5.34315 23.6569 4 22 4V8ZM18 8H22V4H18V8Z" fill="#262626" mask="url(#path-1-inside-1_1873_555)"/>
 </svg>
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.5" cy="12" r="1.5" fill="#262626"/>
+<circle cx="12" cy="12" r="1.5" fill="#262626"/>
+<circle cx="17.5" cy="12" r="1.5" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 12.8284 7.32843 13.5 6.5 13.5C5.67157 13.5 5 12.8284 5 12C5 11.1716 5.67157 10.5 6.5 10.5C7.32843 10.5 8 11.1716 8 12ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM19 12C19 12.8284 18.3284 13.5 17.5 13.5C16.6716 13.5 16 12.8284 16 12C16 11.1716 16.6716 10.5 17.5 10.5C18.3284 10.5 19 11.1716 19 12Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C11.1716 8 10.5 7.32843 10.5 6.5C10.5 5.67157 11.1716 5 12 5C12.8284 5 13.5 5.67157 13.5 6.5C13.5 7.32843 12.8284 8 12 8ZM12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5ZM10.5 17.5C10.5 18.3284 11.1716 19 12 19C12.8284 19 13.5 18.3284 13.5 17.5C13.5 16.6716 12.8284 16 12 16C11.1716 16 10.5 16.6716 10.5 17.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 1C24 0.447715 23.5523 -1.95703e-08 23 -4.37114e-08L1 -1.00536e-06C0.447716 -1.0295e-06 -1.95703e-08 0.447715 -4.37114e-08 0.999999L-1.00536e-06 23C-1.0295e-06 23.5523 0.447715 24 0.999999 24L23 24C23.5523 24 24 23.5523 24 23L24 1ZM10.5 6.5C10.5 7.32843 11.1716 8 12 8C12.8284 8 13.5 7.32843 13.5 6.5C13.5 5.67157 12.8284 5 12 5C11.1716 5 10.5 5.67157 10.5 6.5ZM10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12ZM12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19Z" fill="#262626"/>
+</svg>
@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_1873:540" fill="white">
+<mask id="path-1-inside-1_1873_540" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z"/>
 </mask>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4941 0C12.6652 0 11.9931 0.672023 11.9931 1.501V9H14.9951V1.501C14.9951 0.672023 14.3231 0 13.4941 0ZM9.49146 1C8.66248 1 7.99045 1.67202 7.99045 2.501V9H10.9925V2.501C10.9925 1.67202 10.3204 1 9.49146 1ZM21.9998 13V10H7.99045V11L21.9998 13ZM2.3963 12.0974C1.8679 11.569 1.8679 10.7123 2.3963 10.1839C3.45309 9.12709 5.16648 9.12709 6.22327 10.1839L7.98865 11.9493L5.11842 14.8195L2.3963 12.0974ZM15.9958 2.501C15.9958 1.67202 16.6678 1 17.4968 1C18.3258 1 18.9978 1.67202 18.9978 2.501V9H15.9958V2.501ZM20.9992 3C20.4465 3 19.9985 3.44801 19.9985 4.00067V9H21.9998V4.00067C21.9998 3.44801 21.5518 3 20.9992 3ZM5.83276 15.8438L8.99112 20L18.3064 19.2839C20.3905 19.1237 21.9998 17.3859 21.9998 15.2957V14L8.99112 12.2344L5.83276 15.8438ZM19.9985 20L8.99112 21V24H19.9985V20Z" fill="#262626"/>
-<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1_1873:540)"/>
+<path d="M11.9931 9H9.99313V11H11.9931V9ZM14.9951 9V11H16.9951V9H14.9951ZM7.99045 9H5.99045V11H7.99045V9ZM10.9925 9V11H12.9925V9H10.9925ZM21.9998 10H23.9998V8H21.9998V10ZM21.9998 13L21.7172 14.9799L23.9998 15.3058V13H21.9998ZM7.99045 10V8H5.99045V10H7.99045ZM7.99045 11H5.99045V12.7348L7.7078 12.9799L7.99045 11ZM2.3963 10.1839L0.982083 8.76966L0.982082 8.76967L2.3963 10.1839ZM2.3963 12.0974L3.81051 10.6832L3.81051 10.6832L2.3963 12.0974ZM6.22327 10.1839L7.63749 8.76967L6.22327 10.1839ZM7.98865 11.9493L9.40287 13.3635L10.8171 11.9493L9.40287 10.535L7.98865 11.9493ZM5.11842 14.8195L3.70421 16.2337L5.11842 17.6479L6.53264 16.2337L5.11842 14.8195ZM18.9978 9V11H20.9978V9H18.9978ZM15.9958 9H13.9958V11H15.9958V9ZM19.9985 9H17.9985V11H19.9985V9ZM21.9998 9V11H23.9998V9H21.9998ZM8.99112 20L7.39873 21.2101L8.05799 22.0776L9.14441 21.9941L8.99112 20ZM5.83276 15.8438L4.32764 14.5267L3.25312 15.7547L4.24036 17.0538L5.83276 15.8438ZM18.3064 19.2839L18.1531 17.2898H18.1531L18.3064 19.2839ZM21.9998 14H23.9998V12.2531L22.2688 12.0182L21.9998 14ZM8.99112 12.2344L9.26011 10.2525L8.1943 10.1079L7.486 10.9173L8.99112 12.2344ZM8.99112 21L8.81017 19.0082L6.99112 19.1735V21H8.99112ZM19.9985 20H21.9985V17.8101L19.8175 18.0082L19.9985 20ZM8.99112 24H6.99112V26H8.99112V24ZM19.9985 24V26H21.9985V24H19.9985ZM13.9931 1.501C13.9931 1.77659 13.7697 2 13.4941 2V-2C11.5606 -2 9.99313 -0.432547 9.99313 1.501H13.9931ZM13.9931 9V1.501H9.99313V9H13.9931ZM14.9951 7H11.9931V11H14.9951V7ZM12.9951 1.501V9H16.9951V1.501H12.9951ZM13.4941 2C13.2185 2 12.9951 1.77659 12.9951 1.501H16.9951C16.9951 -0.432546 15.4277 -2 13.4941 -2V2ZM9.99045 2.501C9.99045 2.77659 9.76705 3 9.49146 3V-1C7.55791 -1 5.99045 0.567453 5.99045 2.501H9.99045ZM9.99045 9V2.501H5.99045V9H9.99045ZM10.9925 7H7.99045V11H10.9925V7ZM8.99246 2.501V9H12.9925V2.501H8.99246ZM9.49146 3C9.21587 3 8.99246 2.77659 8.99246 2.501H12.9925C12.9925 0.567452 11.425 -1 9.49146 -1V3ZM19.9998 10V13H23.9998V10H19.9998ZM7.99045 12H21.9998V8H7.99045V12ZM9.99045 11V10H5.99045V11H9.99045ZM22.2825 11.0201L8.27311 9.02007L7.7078 12.9799L21.7172 14.9799L22.2825 11.0201ZM0.982082 8.76967C-0.327358 10.0791 -0.327363 12.2021 0.982083 13.5116L3.81051 10.6832C4.06317 10.9358 4.06316 11.3454 3.81051 11.5981L0.982082 8.76967ZM7.63749 8.76967C5.79965 6.93183 2.81992 6.93183 0.982083 8.76966L3.81051 11.5981C4.08625 11.3224 4.53332 11.3224 4.80906 11.5981L7.63749 8.76967ZM9.40287 10.535L7.63749 8.76967L4.80906 11.5981L6.57444 13.3635L9.40287 10.535ZM6.53264 16.2337L9.40287 13.3635L6.57444 10.535L3.70421 13.4053L6.53264 16.2337ZM0.982082 13.5116L3.70421 16.2337L6.53264 13.4053L3.81051 10.6832L0.982082 13.5116ZM17.4968 -1C15.5633 -1 13.9958 0.567453 13.9958 2.501H17.9958C17.9958 2.77659 17.7724 3 17.4968 3V-1ZM20.9978 2.501C20.9978 0.567454 19.4304 -1 17.4968 -1V3C17.2212 3 16.9978 2.77659 16.9978 2.501H20.9978ZM20.9978 9V2.501H16.9978V9H20.9978ZM15.9958 11H18.9978V7H15.9958V11ZM13.9958 2.501V9H17.9958V2.501H13.9958ZM21.9985 4.00067C21.9985 4.55258 21.5511 5 20.9992 5V1C19.3419 1 17.9985 2.34345 17.9985 4.00067H21.9985ZM21.9985 9V4.00067H17.9985V9H21.9985ZM21.9998 7H19.9985V11H21.9998V7ZM19.9998 4.00067V9H23.9998V4.00067H19.9998ZM20.9992 5C20.4472 5 19.9998 4.55258 19.9998 4.00067H23.9998C23.9998 2.34345 22.6564 1 20.9992 1V5ZM10.5835 18.7899L7.42516 14.6337L4.24036 17.0538L7.39873 21.2101L10.5835 18.7899ZM18.1531 17.2898L8.83783 18.0059L9.14441 21.9941L18.4597 21.278L18.1531 17.2898ZM19.9998 15.2957C19.9998 16.3408 19.1952 17.2097 18.1531 17.2898L18.4597 21.278C21.5858 21.0377 23.9998 18.431 23.9998 15.2957H19.9998ZM19.9998 14V15.2957H23.9998V14H19.9998ZM8.72214 14.2162L21.7308 15.9818L22.2688 12.0182L9.26011 10.2525L8.72214 14.2162ZM7.33788 17.1608L10.4962 13.5514L7.486 10.9173L4.32764 14.5267L7.33788 17.1608ZM9.17208 22.9918L20.1794 21.9918L19.8175 18.0082L8.81017 19.0082L9.17208 22.9918ZM10.9911 24V21H6.99112V24H10.9911ZM19.9985 22H8.99112V26H19.9985V22ZM17.9985 20V24H21.9985V20H17.9985Z" fill="#262626" mask="url(#path-1-inside-1_1873_540)"/>
 </svg>
@@ -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="M4 8.00069C4.0331 3.26794 8.15389 -0.475065 12.8802 0.0490726C14.1026 0.184637 15.1755 0.450403 16.1634 0.994663C17.1539 1.54041 17.9904 2.32824 18.8 3.40769C19.1313 3.84951 19.0418 4.47632 18.6 4.80769C18.1581 5.13906 17.5313 5.04951 17.2 4.60769C16.5096 3.68713 15.8755 3.11953 15.1982 2.74638C14.5183 2.37175 13.7262 2.15516 12.6597 2.03689C9.13467 1.64596 6.02491 4.44572 5.99995 8.01467L4 8.00069ZM18.3147 11.0585C18.8389 11.2323 19.123 11.7981 18.9492 12.3224L16.5204 19.6485L16.5191 19.6525C16.0817 20.9535 15.3501 22.0728 14.3046 22.8588C13.2528 23.6495 11.9457 24.0554 10.4489 24.0256C9.3869 24.0044 8.32234 23.6332 7.49354 22.9011C7.43449 22.8489 7.38734 22.8054 7.35353 22.7734C7.33661 22.7574 7.32298 22.7443 7.31282 22.7344L7.30019 22.7221L7.29586 22.7178L7.29419 22.7161L7.29316 22.7151C6.90264 22.3246 6.90235 21.6911 7.29287 21.3006C7.68272 20.9107 8.31436 20.9101 8.70505 21.2985L8.70608 21.2996L8.70681 21.3003L8.70763 21.3011L8.72702 21.3196C8.74601 21.3376 8.77665 21.366 8.81757 21.4021C9.25916 21.7922 9.8561 22.0134 10.4887 22.026C11.5863 22.0478 12.4448 21.7548 13.1028 21.2601C13.7667 20.761 14.2888 20.0091 14.6227 19.0172L14.6233 19.0152L17.0508 11.693C17.2246 11.1688 17.7904 10.8847 18.3147 11.0585ZM8.00002 8.00085C8.01822 5.33935 10.5876 3.43182 13.1415 4.19811C14.4429 4.58863 15.3943 5.58269 15.7875 6.77482C15.9605 7.29931 15.6755 7.86474 15.1511 8.03774C14.6266 8.21074 14.0611 7.9258 13.8881 7.40131C13.6903 6.80166 13.2152 6.30833 12.5667 6.11374C11.2962 5.73251 10.0111 6.68083 10 8.01144V8.91779C10.1443 9.01829 10.3009 9.14433 10.4571 9.30058C11.007 9.85049 11.5 10.7251 11.5 12.0077C11.5 12.56 11.0523 13.0077 10.5 13.0077C9.94772 13.0077 9.5 12.56 9.5 12.0077C9.5 11.2902 9.24298 10.9149 9.04289 10.7148C8.93333 10.6052 8.82479 10.5335 8.74873 10.4912C8.71123 10.4704 8.68357 10.4578 8.67053 10.4522L8.66761 10.451L8 10.2284L8.00002 8.00085ZM3.70718 23.7148L22.7072 4.71479L21.293 3.30057L2.29297 22.3006L3.70718 23.7148Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8802 0.0490061C8.83055 -0.399484 5.22544 2.28056 4.25537 6.03027C7.40915 9.49288 8.20399 15.9871 4.4137 20.1558C4.41524 20.1597 4.41679 20.1636 4.41834 20.1675L2.29297 22.2929L3.70718 23.7071L22.7072 4.70711L21.293 3.29289L19.4654 5.12045C18.4352 2.45838 16.0017 0.394705 12.8802 0.0490061ZM8.00002 7.99316C8.01821 5.33167 10.5876 3.42413 13.1415 4.19043C14.4429 4.58094 15.3943 5.57501 15.7875 6.76713C15.9605 7.29162 15.6755 7.85705 15.151 8.03005C14.6266 8.20305 14.0611 7.91811 13.8881 7.39362C13.6903 6.79398 13.2152 6.30064 12.5667 6.10605C11.2962 5.72482 10.0111 6.67315 10 8.00375V8.9101C10.1442 9.01061 10.3009 9.13664 10.4571 9.29289C11.007 9.8428 11.5 10.7174 11.5 12C11.5 12.5523 11.0523 13 10.5 13C9.94771 13 9.5 12.5523 9.5 12C9.5 11.2826 9.24298 10.9072 9.04289 10.7071C8.93332 10.5975 8.82478 10.5258 8.74873 10.4835C8.71122 10.4627 8.68357 10.4501 8.67053 10.4445L8.66761 10.4433L8 10.2208V9.5V8V7.99316L8.00002 7.99316ZM10.1974 22.8827C13.5 23.5 15.6802 21.9767 16.5712 19.3261L19 11L8 22C8 22 9 22.5 10.1974 22.8827Z" fill="#262626"/>
+</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="M0 7.46165C0.0308633 3.0482 3.87356 -0.443161 8.28247 0.0457814C9.41685 0.171583 10.4181 0.418797 11.3418 0.927715C12.2682 1.43812 13.0481 2.17382 13.8 3.17634C14.1313 3.61817 14.0418 4.24497 13.6 4.57634C13.1581 4.90771 12.5313 4.81817 12.2 4.37634C11.5673 3.53271 10.9897 3.01724 10.3766 2.67943C9.76081 2.34014 9.04049 2.14211 8.06202 2.0336C4.85434 1.67787 2.02268 4.22598 1.99995 7.47563L0 7.46165ZM21 16.0077H24V14.0077H16V16.0077H19V24.0077H21V16.0077ZM8.53738 3.87844C6.13068 3.15629 3.70955 4.95392 3.69241 7.46181L3.69238 9.57402L4.35833 9.796C4.36841 9.80034 4.39138 9.81077 4.42309 9.82838C4.48832 9.86462 4.58244 9.92677 4.67758 10.0219C4.84883 10.1932 5.077 10.5204 5.077 11.161C5.077 11.7132 5.52471 12.161 6.077 12.161C6.62928 12.161 7.077 11.7132 7.077 11.161C7.077 9.95533 6.61286 9.12876 6.0918 8.60769C5.95585 8.47175 5.81961 8.35997 5.69238 8.2689V7.47244C5.70238 6.29542 6.83919 5.45698 7.96259 5.79406C8.53611 5.96615 8.9564 6.40228 9.13146 6.93301C9.30446 7.4575 9.86988 7.74244 10.3944 7.56944C10.9189 7.39644 11.2038 6.83101 11.0308 6.30652C10.6603 5.18331 9.76385 4.24645 8.53738 3.87844ZM17.7072 4.71479L1.70718 20.7148L0.292969 19.3006L16.293 3.30058L17.7072 4.71479ZM13.949 11.4756C14.1228 10.9514 13.8387 10.3856 13.3144 10.2118C12.7902 10.038 12.2244 10.322 12.0506 10.8463L9.80994 17.6049L9.80931 17.6068C9.50931 18.4982 9.04413 19.1718 8.45793 19.6213C7.87764 20.0663 7.12101 20.3366 6.15043 20.3327C5.52635 20.3301 4.93827 20.1115 4.51726 19.7234C4.49989 19.7074 4.48748 19.6955 4.48045 19.6888L4.47565 19.6842L4.47477 19.6833L4.47402 19.6825C4.08333 19.2941 3.45171 19.2948 3.06188 19.6846C2.67136 20.0751 2.67146 20.7084 3.06199 21.0989L3.06379 21.1007L3.0663 21.1032L3.07309 21.1099L3.09364 21.1299C3.11039 21.146 3.13322 21.1676 3.1617 21.1939C3.98695 21.9546 5.07137 22.3283 6.14227 22.3327C7.51204 22.3383 8.71011 21.9483 9.67495 21.2084C10.6335 20.4734 11.3036 19.4383 11.7057 18.2422L13.949 11.4756Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM19 16H16V14H24V16H21V24H19V16Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.64058C0.0316034 3.12129 3.96644 -0.453788 8.48108 0.0468793C9.64266 0.175697 10.6679 0.428839 11.6137 0.949961C12.5623 1.47261 13.361 2.22595 14.1309 3.25251C14.4702 3.70493 14.3785 4.34676 13.9261 4.68608C13.4737 5.0254 12.8318 4.93371 12.4925 4.48128C11.8446 3.61742 11.2533 3.08959 10.6255 2.74368C9.99487 2.39626 9.25727 2.19347 8.25535 2.08236C4.97074 1.7181 2.07118 4.32732 2.04791 7.6549L0 7.64058ZM3.78095 7.64074C3.7985 5.07271 6.27769 3.23198 8.74211 3.97145C9.99798 4.34828 10.9159 5.3076 11.2953 6.45775C11.4725 6.99482 11.1807 7.5738 10.6436 7.75095C10.1066 7.9281 9.52757 7.63633 9.35042 7.09926C9.17117 6.5558 8.7408 6.10922 8.15353 5.933C7.00319 5.58784 5.83912 6.44638 5.82888 7.65162V8.46718C5.95916 8.56044 6.09867 8.6749 6.23788 8.8141C6.77144 9.34766 7.2467 10.1941 7.2467 11.4286C7.2467 11.9941 6.78825 12.4526 6.22272 12.4526C5.65719 12.4526 5.19874 11.9941 5.19874 11.4286C5.19874 10.7727 4.9651 10.4376 4.78975 10.2622C4.69233 10.1648 4.59595 10.1012 4.52915 10.0641C4.49668 10.046 4.47316 10.0353 4.46284 10.0309L3.78092 9.8036L3.78095 7.64074ZM1.74812 21.2115L18.1318 4.82785L16.6837 3.37973L0.299994 19.7634L1.74812 21.2115ZM13.9117 17.4155L14.6358 16.6915C17.2978 14.0295 21.6137 14.0295 24.2757 16.6915L24.9998 17.4155L23.5517 18.8636L22.8276 18.1396C20.9654 16.2774 17.9461 16.2774 16.0839 18.1396L15.3598 18.8636L13.9117 17.4155ZM16.6837 19.7634L15.9597 20.4875L17.4078 21.9356L18.1319 21.2115C18.863 20.4804 20.0485 20.4804 20.7797 21.2115L21.5037 21.9356L22.9518 20.4875L22.2278 19.7634C20.6968 18.2325 18.2147 18.2325 16.6837 19.7634ZM20.4796 23.5594C20.4796 24.1249 20.0211 24.5834 19.4556 24.5834C18.8901 24.5834 18.4316 24.1249 18.4316 23.5594C18.4316 22.9939 18.8901 22.5354 19.4556 22.5354C20.0211 22.5354 20.4796 22.9939 20.4796 23.5594ZM14.2834 11.7508C14.4614 11.214 14.1705 10.6346 13.6337 10.4566C13.0969 10.2787 12.5175 10.5696 12.3395 11.1064L10.0452 18.0271L10.0445 18.029C9.73734 18.9418 9.261 19.6315 8.66074 20.0918C8.06654 20.5475 7.29177 20.8243 6.29791 20.8203C5.65887 20.8177 5.05669 20.5937 4.62558 20.1963C4.6078 20.1799 4.59509 20.1678 4.58789 20.1609L4.58298 20.1562L4.58207 20.1553L4.5813 20.1545C4.18124 19.7568 3.53449 19.7575 3.13531 20.1566C2.73542 20.5565 2.73552 21.205 3.13541 21.6049L3.13726 21.6067L3.13983 21.6093L3.14678 21.6161L3.16782 21.6366C3.18497 21.6531 3.20835 21.6752 3.23751 21.7021C4.08255 22.4811 5.19298 22.8637 6.28956 22.8682C7.69218 22.8739 8.91897 22.4746 9.90695 21.717C10.8885 20.9643 11.5747 19.9044 11.9864 18.6796L14.2834 11.7508Z" fill="#262626"/>
+</svg>
@@ -0,0 +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="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM20 23C20 23.5523 19.5523 24 19 24C18.4477 24 18 23.5523 18 23C18 22.4477 18.4477 22 19 22C19.5523 22 20 22.4477 20 23ZM13.5859 17L14.293 16.2929C16.8927 13.6932 21.1076 13.6932 23.7073 16.2929L24.4144 17L23.0002 18.4142L22.293 17.7071C20.4744 15.8885 17.5259 15.8885 15.7073 17.7071L15.0002 18.4142L13.5859 17ZM15.5859 20L16.293 19.2929C17.7881 17.7978 20.2122 17.7978 21.7073 19.2929L22.4144 20L21.0002 21.4142L20.293 20.7071C19.579 19.9931 18.4213 19.9931 17.7073 20.7071L17.0002 21.4142L15.5859 20Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,7 @@
+<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 5H2L2 19H22V5ZM2 3C0.895431 3 0 3.89543 0 5V19C0 20.1046 0.89543 21 2 21H22C23.1046 21 24 20.1046 24 19V5C24 3.89543 23.1046 3 22 3H2Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.5V11H1.5V9H6V4.5H8Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.5V11H23V9H12V4.5H10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 19.5V13H1.5V15H6V19.5H8Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.5V13H22.5V15H12V19.5H10Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5C0 3.89543 0.895431 3 2 3H22C23.1046 3 24 3.89543 24 5V19C24 20.1046 23.1046 21 22 21H2C0.89543 21 0 20.1046 0 19V5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3V10.5H0V8.5H6V3H8Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3V10.5H24V8.5H12V3H10Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 21V12.5H0V14.5H6V21H8Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 21V12.5H24V14.5H12V21H10Z" fill="white"/>
+</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="M2 12C2 6.47715 6.47715 2 12 2C12.9471 2 13.8619 2.13139 14.7278 2.37632L15.2722 0.451813C14.2308 0.157283 13.1329 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 10.9656 23.8689 9.96044 23.6219 9.00074L21.685 9.49926C21.8905 10.2975 22 11.1352 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM9 7.5C9 7.1312 8.79702 6.79234 8.47186 6.61833C8.1467 6.44431 7.75216 6.46338 7.4453 6.66795L5.9453 7.66795C5.48577 7.9743 5.3616 8.59517 5.66795 9.0547C5.96231 9.49623 6.54703 9.62816 7 9.36607V17C7 17.5523 7.44772 18 8 18C8.55229 18 9 17.5523 9 17V7.5ZM14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8ZM16.9495 12C17.5978 11.3647 18 10.4793 18 9.5C18 7.567 16.433 6 14.5 6C12.567 6 11 7.567 11 9.5C11 10.4793 11.4022 11.3647 12.0505 12C11.4022 12.6353 11 13.5207 11 14.5C11 16.433 12.567 18 14.5 18C16.433 18 18 16.433 18 14.5C18 13.5207 17.5978 12.6353 16.9495 12ZM14.5 13C13.6716 13 13 13.6716 13 14.5C13 15.3284 13.6716 16 14.5 16C15.3284 16 16 15.3284 16 14.5C16 13.6716 15.3284 13 14.5 13ZM19 5H17V3H19V1L21 1V3H23V5H21V7H19V5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C14.1857 0 16.235 0.584366 18 1.60539V2H16V6H18V8H22V6H22.3946C23.4156 7.76504 24 9.81428 24 12ZM14.5001 8C13.6717 8 13.0001 8.67157 13.0001 9.5C13.0001 10.3284 13.6717 11 14.5001 11C15.3285 11 16.0001 10.3284 16.0001 9.5C16.0001 8.67157 15.3285 8 14.5001 8ZM16.9496 12C17.5979 11.3647 18.0001 10.4793 18.0001 9.5C18.0001 7.567 16.4331 6 14.5001 6C12.5671 6 11.0001 7.567 11.0001 9.5C11.0001 10.4793 11.4023 11.3647 12.0506 12C11.4023 12.6353 11.0001 13.5207 11.0001 14.5C11.0001 16.433 12.5671 18 14.5001 18C16.4331 18 18.0001 16.433 18.0001 14.5C18.0001 13.5207 17.5979 12.6353 16.9496 12ZM14.5001 13C13.6717 13 13.0001 13.6716 13.0001 14.5C13.0001 15.3284 13.6717 16 14.5001 16C15.3285 16 16.0001 15.3284 16.0001 14.5C16.0001 13.6716 15.3285 13 14.5001 13ZM8.47196 6.61833C8.79712 6.79235 9.00011 7.13121 9.00011 7.5V17C9.00011 17.5523 8.55239 18 8.00011 18C7.44782 18 7.00011 17.5523 7.00011 17V9.36607C6.54713 9.62816 5.96241 9.49623 5.66806 9.0547C5.3617 8.59517 5.48588 7.9743 5.94541 7.66795L7.44541 6.66795C7.75226 6.46338 8.14681 6.44431 8.47196 6.61833ZM19 5V7H21V5H23V3H21V1L19 1V3H17V5H19Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 4H18C14.6863 4 12 6.68629 12 10V14H22V4ZM18 2C13.5817 2 10 5.58172 10 10V15C10 15.5523 10.4477 16 11 16H23C23.5523 16 24 15.5523 24 15V4C24 2.89543 23.1046 2 22 2H18ZM2 15C0.895431 15 0 14.1046 0 13V10H2L2 13H9V15H2ZM1 22H5V20H1V22ZM7 22V20H11V22H7ZM13 22H17V20H13V22ZM23 20V22H19V20H23ZM19 9.5C19 10.3284 18.3284 11 17.5 11C16.6716 11 16 10.3284 16 9.5C16 8.67157 16.6716 8 17.5 8C18.3284 8 19 8.67157 19 9.5ZM21 9.5C21 11.433 19.433 13 17.5 13C15.567 13 14 11.433 14 9.5C14 7.567 15.567 6 17.5 6C19.433 6 21 7.567 21 9.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10C10 5.58172 13.5817 2 18 2H23C23.5523 2 24 2.44772 24 3V15C24 15.5523 23.5523 16 23 16H11C10.4477 16 10 15.5523 10 15V10ZM21 9.5C21 11.433 19.433 13 17.5 13C15.567 13 14 11.433 14 9.5C14 7.567 15.567 6 17.5 6C19.433 6 21 7.567 21 9.5ZM0 13C0 14.1046 0.895431 15 2 15H9V13H2L2 10H0V13ZM1 22H5V20H1V22ZM7 22V20H11V22H7ZM13 22H17V20H13V22ZM23 20V22H19V20H23Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.70718 23L22.7072 3.45479L21.293 2L17.3221 6.08485C15.6134 5.22128 13.8161 4.78479 11.9402 4.78479C7.61617 4.78479 3.79733 7.09346 0.487718 11.4194L0.000976562 12.0556L0.487718 12.6918C2.18803 14.9142 4.02322 16.6078 6.00293 17.7288L2.29297 21.5452L3.70718 23ZM7.4863 16.2028C5.79092 15.3559 4.1466 13.9879 2.5629 12.0555C5.47787 8.49788 8.6025 6.84218 11.9402 6.84218C12.0058 6.84218 12.0713 6.84281 12.1367 6.84409C10.9031 6.87858 9.67945 7.38011 8.7379 8.34867C6.90127 10.238 6.79217 13.2315 8.41062 15.252L7.4863 16.2028ZM9.83605 13.7857C8.99224 12.5797 9.0976 10.8882 10.1521 9.80346C11.2066 8.71868 12.8509 8.6103 14.0233 9.47832L9.83605 13.7857ZM15.4487 8.01199L15.8117 7.63856C14.9126 7.25466 13.9925 7.01057 13.0492 6.90409C13.9089 7.04224 14.7403 7.41153 15.4487 8.01199ZM21.7071 9.62696L13.7071 17.8565C13.3166 18.2583 12.6834 18.2583 12.2929 17.8565C11.9024 17.4548 11.9024 16.8035 12.2929 16.4017L20.2929 8.17217C20.6834 7.77044 21.3166 7.77044 21.7071 8.17217C22.0976 8.5739 22.0976 9.22523 21.7071 9.62696ZM23.7071 12.713C24.0976 12.3113 24.0976 11.66 23.7071 11.2583C23.3166 10.8565 22.6834 10.8565 22.2929 11.2583L18.2929 15.373C17.9024 15.7748 17.9024 16.4261 18.2929 16.8278C18.6834 17.2296 19.3166 17.2296 19.7071 16.8278L23.7071 12.713Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7072 3.45479L3.70718 23L2.29297 21.5452L6.12816 17.6C3.9683 16.3964 1.92575 14.5364 0.000488281 12.0199C3.69075 7.1965 7.81196 4.78479 12.3641 4.78479C14.1451 4.78479 15.8602 5.15395 17.5093 5.89229L21.293 2L22.7072 3.45479ZM9.47208 8.56642C7.85224 10.2327 7.68157 12.8253 8.96007 14.6868L10.3616 13.245C10.0795 12.7792 9.94076 12.2476 9.94543 11.7172C9.95176 10.9981 10.2216 10.281 10.7549 9.73241C11.2883 9.18377 11.9853 8.9062 12.6843 8.89968C13.2 8.89488 13.7167 9.0376 14.1695 9.32785L15.4217 8.03971C13.6122 6.72453 11.0919 6.90009 9.47208 8.56642ZM21.7071 9.62696C22.0976 9.22523 22.0976 8.5739 21.7071 8.17217C21.3166 7.77044 20.6834 7.77044 20.2929 8.17217L12.2929 16.4017C11.9024 16.8035 11.9024 17.4548 12.2929 17.8565C12.6834 18.2583 13.3166 18.2583 13.7071 17.8565L21.7071 9.62696ZM23.7071 11.2583C24.0976 11.66 24.0976 12.3113 23.7071 12.713L19.7071 16.8278C19.3166 17.2296 18.6834 17.2296 18.2929 16.8278C17.9024 16.4261 17.9024 15.7748 18.2929 15.373L22.2929 11.2583C22.6834 10.8565 23.3166 10.8565 23.7071 11.2583Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8081 0.399328L5.08803 15.9236C4.81982 16.4147 5.19684 17 5.78139 17H23.2186C23.8109 17 24.1873 16.4005 23.9036 15.9088L15.1865 0.384542C14.8869 -0.13481 14.0952 -0.126317 13.8081 0.399328ZM14.5013 3.24911L7.90072 15H21.0996L14.5013 3.24911ZM13.5 6H15.5V10H13.5V6ZM14.5 14C15.3284 14 16 13.3284 16 12.5C16 11.6716 15.3284 11 14.5 11C13.6716 11 13 11.6716 13 12.5C13 13.3284 13.6716 14 14.5 14ZM23 22C23 23.1046 22.1419 24 21.0833 24H1.91667C0.858121 24 0 23.1046 0 22H23ZM3 6H8.97997L7.87908 8H3V17.0879V19H20V18H22V19C22 20.1046 21.1046 21 20 21H3C1.89543 21 1 20.1046 1 19V8C1 6.89543 1.89543 6 3 6Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8081 0.399327L5.08803 15.9236C4.81982 16.4147 5.19684 17 5.78139 17H23.2186C23.8109 17 24.1873 16.4005 23.9036 15.9088L15.1865 0.384541C14.8869 -0.134811 14.0952 -0.126318 13.8081 0.399327ZM13.5 6H15.5V10H13.5V6ZM14.5 15C15.3284 15 16 14.3284 16 13.5C16 12.6716 15.3284 12 14.5 12C13.6716 12 13 12.6716 13 13.5C13 14.3284 13.6716 15 14.5 15ZM23 22C23 23.1046 22.1419 24 21.0833 24H1.91667C0.858121 24 0 23.1046 0 22H23ZM3 6H8.97997L3.10657 16.6703C2.78189 17.277 3.23828 18 3.94589 18H20H22V19C22 20.1046 21.1046 21 20 21H3C1.89543 21 1 20.1046 1 19V8C1 6.89543 1.89543 6 3 6Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="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"/>
+</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="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"/>
+</svg>
@@ -0,0 +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="M1.66722 11.0565C1.79313 10.9685 1.92241 10.8852 2.05482 10.8071C2.92586 10.2933 3.93208 10 5.00389 10C6.23862 10 7.3863 10.3892 8.34055 11.0565H8.66722C9.62147 10.3892 10.7691 10 12.0039 10C13.2386 10 14.3863 10.3892 15.3406 11.0565H15.6672C16.6215 10.3892 17.7691 10 19.0039 10C20.0792 10 21.0885 10.2952 21.9616 10.8122C22.091 10.8889 22.2174 10.9704 22.3406 11.0565H24.0155C23.9337 10.3713 23.7993 9.70311 23.6168 9.05651C22.1385 3.82114 17.5005 0 12.0078 0C6.51503 0 1.87701 3.82114 0.398775 9.05651C0.216203 9.70311 0.0818302 10.3713 0 11.0565H1.66722ZM5.00389 8C6.25994 8 7.44834 8.29999 8.50389 8.83072C9.55943 8.29999 10.7478 8 12.0039 8C13.2599 8 14.4483 8.29999 15.5039 8.83072C16.5594 8.29999 17.7478 8 19.0039 8C19.7835 8 20.5371 8.11558 21.2491 8.33019C19.6677 4.56965 16.0861 2 12.0078 2C7.93036 2 4.34951 4.56843 2.76761 8.32751C3.47692 8.11462 4.22748 8 5.00389 8ZM11 12V21C11 22.6569 12.3431 24 14 24C15.6569 24 17 22.6569 17 21V20.5556H15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V12H11Z" fill="#262626"/>
+</svg>
@@ -0,0 +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="M0 11.0565H1.66722C2.62147 10.3892 3.76915 10 5.00389 10C6.23862 10 7.3863 10.3892 8.34055 11.0565H8.66722C9.62147 10.3892 10.7691 10 12.0039 10C13.2386 10 14.3863 10.3892 15.3406 11.0565H15.6672C16.6215 10.3892 17.7691 10 19.0039 10C20.2386 10 21.3863 10.3892 22.3406 11.0565H24.0155C23.2712 4.8233 18.1789 0 12.0078 0C5.83664 0 0.744384 4.8233 0 11.0565ZM11 12V21C11 22.6569 12.3431 24 14 24C15.6569 24 17 22.6569 17 21V20.5556H15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V12H11Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.456868 7.82899C-0.00681407 7.52876 -0.139481 6.90925 0.160549 6.44526C5.71753 -2.14842 18.2827 -2.14842 23.8397 6.44526C24.1397 6.90925 24.0071 7.52876 23.5434 7.82899C23.0797 8.12921 22.4606 7.99646 22.1605 7.53248C17.3917 0.157588 6.60855 0.157588 1.83969 7.53248C1.53966 7.99646 0.92055 8.12922 0.456868 7.82899ZM5.44541 10.8234C4.98588 10.5169 4.8617 9.8956 5.16806 9.43577C8.41819 4.55738 15.582 4.55738 18.8322 9.43577C19.1385 9.8956 19.0143 10.5169 18.5548 10.8234C18.0953 11.13 17.4744 11.0057 17.1681 10.5459C14.7096 6.85575 9.29065 6.85575 6.83216 10.5459C6.5258 11.0057 5.90493 11.13 5.44541 10.8234ZM13 13.9935C13 14.5456 12.553 14.9934 12.0014 14.9941L12 14.9941L11.9986 14.9941C11.447 14.9934 11 14.5456 11 13.9935C11 13.4408 11.4477 12.9928 12 12.9928C12.5523 12.9928 13 13.4408 13 13.9935ZM15 13.9935C15 15.3005 14.1652 16.4125 13 16.8246V21.9987H16C16.5523 21.9987 17 22.4467 17 22.9993C17 23.552 16.5523 24 16 24H13H11H8C7.44772 24 7 23.552 7 22.9993C7 22.4467 7.44771 21.9987 8 21.9987H11V16.8246C9.83481 16.4125 9 15.3005 9 13.9935C9 12.3355 10.3431 10.9915 12 10.9915C13.6569 10.9915 15 12.3355 15 13.9935Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.04931 9.73645C0.0776508 9.21039 -0.284258 7.99501 0.240962 7.02182C5.29372 -2.3406 18.7061 -2.34061 23.7588 7.02181C24.2841 7.99501 23.9221 9.21039 22.9505 9.73645C21.9788 10.2625 20.7654 9.90002 20.2401 8.92682C16.6994 2.36596 7.30044 2.36596 3.75965 8.92682C3.23442 9.90002 2.02097 10.2625 1.04931 9.73645ZM6.02883 12.73C5.0633 12.1927 4.71543 10.9732 5.25184 10.0062C8.193 4.70368 15.8068 4.70368 18.7479 10.0062C19.2843 10.9732 18.9364 12.1927 17.9709 12.73C17.0054 13.2672 15.7878 12.9188 15.2514 11.9517C13.8342 9.39672 10.1655 9.39672 8.74832 11.9517C8.21192 12.9188 6.99436 13.2672 6.02883 12.73ZM13.9999 13.9836C13.9999 14.725 13.5977 15.3723 13 15.7187V21.9959H15.9998C16.5521 21.9959 16.9998 22.4443 16.9998 22.9975C16.9998 23.5506 16.5521 23.999 15.9998 23.999H13H11H8.00016C7.4479 23.999 7.0002 23.5506 7.0002 22.9975C7.0002 22.4443 7.4479 21.9959 8.00016 21.9959H11V15.7187C10.4023 15.3723 10.0001 14.725 10.0001 13.9836C10.0001 12.8773 10.8955 11.9805 12 11.9805C13.1045 11.9805 13.9999 12.8773 13.9999 13.9836Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3845 2.12476C10.5802 0.320465 8.06198 -0.333646 5.74305 0.158373C4.9647 0.32352 4.46033 0.909159 4.31832 1.57519C4.18154 2.21664 4.37806 2.91238 4.87694 3.41126L7.25462 5.78894L5.78894 7.25462L3.41126 4.87694C2.91238 4.37806 2.21664 4.18154 1.57519 4.31832C0.909158 4.46033 0.323519 4.9647 0.158373 5.74305C-0.333646 8.06198 0.320466 10.5802 2.12476 12.3845C4.07904 14.3388 6.86933 14.9438 9.34082 14.2042L18.03 23.6971C19.5727 25.3825 22.2096 25.4408 23.8252 23.8251C25.4408 22.2095 25.3825 19.5727 23.6972 18.03L14.2042 9.34074C14.9438 6.86927 14.3388 4.07902 12.3845 2.12476ZM8.7203 4.32326L6.52147 2.12442C8.0822 1.90267 9.72084 2.39243 10.9189 3.59045C12.4461 5.11772 12.8223 7.36304 12.0411 9.24451L11.7624 9.9157L22.2976 19.559C23.1121 20.3045 23.1402 21.5787 22.3595 22.3595C21.5787 23.1402 20.3045 23.1121 19.559 22.2976L9.91577 11.7624L9.24456 12.0411C7.36308 12.8223 5.11774 12.4462 3.59045 10.9189C2.39243 9.72084 1.90267 8.0822 2.12442 6.52147L4.32326 8.72031C5.13273 9.52978 6.44515 9.52978 7.25462 8.72031L8.7203 7.25462C9.52978 6.44515 9.52978 5.13273 8.7203 4.32326ZM20.8354 21.8718C21.4078 21.8718 21.8718 21.4078 21.8718 20.8354C21.8718 20.263 21.4078 19.799 20.8354 19.799C20.263 19.799 19.799 20.263 19.799 20.8354C19.799 21.4078 20.263 21.8718 20.8354 21.8718Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.349 2.11868C10.5612 0.330844 8.07028 -0.324465 5.77014 0.148821C4.7521 0.358295 4.49161 1.57662 5.15008 2.23509L8.56638 5.6514L5.65141 8.56638L2.23509 5.15006C1.57662 4.49159 0.358302 4.75209 0.148826 5.77012C-0.324469 8.07027 0.330836 10.5612 2.11867 12.349C4.21588 14.4462 7.27848 14.9856 9.87276 13.9709L18.0253 23.5239C19.5023 25.2546 22.1411 25.3588 23.7499 23.7499C25.3587 22.1411 25.2545 19.5023 23.5239 18.0254L13.9709 9.87274C14.9855 7.27846 14.4462 4.21588 12.349 2.11868ZM20.8513 21.8884C21.4241 21.8884 21.8885 21.4241 21.8885 20.8512C21.8885 20.2784 21.4241 19.8141 20.8513 19.8141C20.2785 19.8141 19.8141 20.2784 19.8141 20.8512C19.8141 21.4241 20.2785 21.8884 20.8513 21.8884Z" fill="#262626"/>
+</svg>
@@ -35,7 +35,8 @@ function defaultTemplate(
  ${imports}
  ${interfaces}
  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ? v4() : undefined);
+    const titleId = _titleId ?? (title ?
+      "icon-title-" + v4() : undefined);
    return ${jsx};
  }
  ${exports}`;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.12.2",
+  "version": "0.14.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.2",
+    "@navikt/ds-icons": "^0.7.1",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -61,6 +61,7 @@
    "ts-jest": "^27.0.5"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, Label, omit } from "../..";
+import { BodyShort, Detail, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
@@ -101,17 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
          >
            {legend}
          </Label>
-          {!!description && (
-            <BodyShort
-              className={cl("navds-fieldset__description", {
-                "sr-only": !!hideLegend,
-              })}
-              id={inputDescriptionId}
-              size={size}
-            >
-              {description}
-            </BodyShort>
-          )}
+          {!!description &&
+            (size === "medium" ? (
+              <BodyShort
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </Detail>
+            ))}
          {children}
          <div
            id={errorId}
@@ -52,7 +52,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
        className,
        "navds-form-field",
        `navds-form-field--${size}`,
-        { "navds-select--error": hasError }
+        {
+          "navds-select--error": hasError,
+          "navds-select--disabled": !!inputProps.disabled,
+        }
      )}
    >
      <Label
@@ -67,6 +70,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
      </Label>
      {!!description && (
        <BodyShort
+          as="div"
          className={cl("navds-select__description", {
            "sr-only": hideLabel,
          })}
@@ -0,0 +1,81 @@
+import cl from "classnames";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Detail, Loader, omit } from "..";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface SwitchProps
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Switch-label
+   */
+  children: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * Toggles loading state with loader-component on switch
+   */
+  loading?: boolean;
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const { inputProps, size } = useFormField(props, "switch");
+
+  const {
+    children,
+    className,
+    description,
+    hideLabel = false,
+    loading,
+    ...rest
+  } = props;
+
+  const Description = size === "medium" ? BodyShort : Detail;
+
+  return (
+    <div
+      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
+        "navds-switch--disabled": inputProps.disabled,
+      })}
+    >
+      <input
+        {...omit(rest, ["size"])}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        ref={ref}
+        type="checkbox"
+        className={cl(className, "navds-switch__input")}
+      />
+      <span className="navds-switch__track">
+        <span className="navds-switch__thumb">
+          {loading && <Loader size="xsmall" />}
+        </span>
+      </span>
+
+      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <div
+          className={cl("navds-switch__content", {
+            "sr-only": hideLabel,
+            "navds-switch--with-description": !!description && !hideLabel,
+          })}
+        >
+          <BodyShort as="div" size={size} className="navds-switch__label">
+            {children}
+          </BodyShort>
+          {description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-switch__description"
+            >
+              {description}
+            </Description>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+});
+
+export default Switch;
@@ -1,6 +1,6 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, Label, omit } from "..";
+import { BodyShort, Detail, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";

@@ -52,7 +52,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
        className,
        "navds-form-field",
        `navds-form-field--${size}`,
-        { "navds-text-field--error": hasError }
+        {
+          "navds-text-field--error": hasError,
+          "navds-text-field--disabled": !!inputProps.disabled,
+        }
      )}
    >
      <Label
@@ -65,15 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
      </Label>

      {!!description && (
-        <BodyShort
-          className={cl("navds-text-field__description", {
-            "sr-only": hideLabel,
-          })}
-          id={inputDescriptionId}
-          size={size}
-        >
-          {description}
-        </BodyShort>
+        <>
+          {size === "medium" ? (
+            <BodyShort
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </BodyShort>
+          ) : (
+            <Detail
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </Detail>
+          )}
+        </>
      )}
      <input
        {...omit(rest, ["error", "errorId", "size"])}
@@ -66,7 +66,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          className,
          "navds-form-field",
          `navds-form-field--${size}`,
-          { "navds-textarea--error": hasError }
+          {
+            "navds-textarea--error": hasError,
+            "navds-textarea--disabled": !!inputProps.disabled,
+          }
        )}
      >
        <Label
@@ -81,6 +84,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
        </Label>
        {!!description && (
          <BodyShort
+            as="div"
            className={cl("navds-textarea__description", {
              "sr-only": hideLabel,
            })}
@@ -29,10 +29,7 @@ test("checkbox group chains onChange calls", () => {
 });

 describe("Checkbox handles controlled-state correctly", () => {
-  const CheckboxComponent = ({
-    onChange = () => null,
-    value,
-  }) => (
+  const CheckboxComponent = ({ onChange = () => null, value }) => (
    <CheckboxGroup legend="legend" onChange={onChange} value={value}>
      <Checkbox value={"value1"}>label1</Checkbox>
      <Checkbox value={"value2"}>label2</Checkbox>
@@ -55,7 +52,12 @@ describe("Checkbox handles controlled-state correctly", () => {
  test("onChange called with expected values", () => {
    const onGroupChange = jest.fn();

-    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+    render(
+      <CheckboxComponent
+        onChange={onGroupChange}
+        value={["value1", "value2"]}
+      />
+    );

    userEvent.click(screen.getByLabelText("label1"));

@@ -1,13 +1,17 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
 import useCheckbox from "./useCheckbox";
-import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
-import { BodyShort, omit } from "../..";
+import { BodyShort, Detail, omit } from "../..";

 export interface CheckboxProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Checkbox has error
+   * @default false
+   */
+  error?: boolean;
  /**
   * Label for checkbox
   */
@@ -23,14 +27,9 @@ export interface CheckboxProps
 }

 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useCheckbox(props);
+  const { inputProps, hasError, size } = useCheckbox(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;

  return (
    <div
@@ -40,8 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
        `navds-checkbox--${size}`,
        {
          "navds-checkbox--error": hasError,
-          "navds-checkbox--with-error-message": showErrorMsg,
-          "navds-checkbox--with-description": !!props.description,
+          "navds-checkbox--disabled": inputProps.disabled,
        }
      )}
    >
@@ -50,7 +48,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
          "children",
          "size",
          "error",
-          "errorId",
          "description",
          "hideLabel",
        ])}
@@ -58,30 +55,26 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
        className="navds-checkbox__input"
        ref={ref}
      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-checkbox__label"
-      >
-        {props.hideLabel ? (
-          <span className="sr-only">{props.children}</span>
-        ) : (
-          props.children
-        )}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-checkbox__description"
+      <label htmlFor={inputProps.id} className="navds-checkbox__label">
+        <div
+          className={cl("navds-checkbox__content", {
+            "sr-only": props.hideLabel,
+          })}
        >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-checkbox__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
    </div>
  );
 });
@@ -12,7 +12,8 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
  null
 );

-export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
+export interface CheckboxGroupProps
+  extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
  /**
   * Checkboxes
   */
@@ -49,6 +49,8 @@ Man kan både sette en description på CheckboxGroup og selve checkbox

 ## Errors

+Feilmeldinger kan bare settes på gruppa
+
 ```jsx
 <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
  <Checkbox value="Apple">Apple</Checkbox>
@@ -65,37 +67,23 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
  </CheckboxGroup>
 </Canvas>

-## Errors uten errorPropagation
+Enkelt-checkboxer tar en `boolean` error prop

 ```jsx
-<CheckboxGroup
-  legend="Mollit eiusmod"
-  errorPropagation={false}
-  error="Boks nr 2 må være valgt"
->
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
+<Checkbox value="Apple" error>
+  Apple
+</Checkbox>
 ```

 <Canvas>
-  <CheckboxGroup
-    legend="Mollit eiusmod"
-    errorPropagation={false}
-    error="Boks nr 2 må være valgt"
-  >
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange" error="Boksen må være valgt">
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
+  <Checkbox value="Apple" error>
+    Apple
+  </Checkbox>
 </Canvas>

 ## Sizing

-Checkboxer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
+Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px

 ```jsx
 <CheckboxGroup
@@ -166,31 +154,15 @@ Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/descrip
 Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.

 ```jsx
-<CheckboxGroup legend="Mollit eiusmod" hideLegend>
-  <Checkbox value="Apple" hideLabel>
-    Apple
-  </Checkbox>
-  <Checkbox value="Orange" hideLabel>
-    Orange
-  </Checkbox>
-  <Checkbox value="Melon" hideLabel>
-    Melon
-  </Checkbox>
-</CheckboxGroup>
+<Checkbox value="Orange" hideLabel>
+  Orange
+</Checkbox>
 ```

 <Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-    <Checkbox value="Apple" hideLabel>
-      Apple
-    </Checkbox>
-    <Checkbox value="Orange" hideLabel>
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon" hideLabel>
-      Melon
-    </Checkbox>
-  </CheckboxGroup>
+  <Checkbox value="Orange" hideLabel>
+    Orange
+  </Checkbox>
 </Canvas>

 ## Disabled
@@ -206,7 +178,7 @@ NOTE: Husk at disabled bør unngås!
  <Checkbox value="Melon">Melon</Checkbox>
 </CheckboxGroup>

-<CheckboxGroup legend="Mollit eiusmod" >
+<CheckboxGroup legend="Mollit eiusmod">
  <Checkbox value="Apple" disabled>Apple</Checkbox>
  <Checkbox value="Orange">Orange</Checkbox>
  <Checkbox value="Melon">Melon</Checkbox>
@@ -7,90 +7,63 @@ export default {
 } as Meta;

 export const All = () => {
+  const Checkboxes = (props) => (
+    <CheckboxGroup
+      legend="Mollit eiusmod"
+      description="Exercitation do labore"
+      {...props}
+    >
+      <Checkbox value="Apple">Apple</Checkbox>
+      <Checkbox value="Orange" description="Laborum ad">
+        Orange
+      </Checkbox>
+      <Checkbox value="Banana" description={<div>Laborum ad</div>}>
+        Banana
+      </Checkbox>
+      <Checkbox value="Melon">Melon</Checkbox>
+    </CheckboxGroup>
+  );
+
  return (
    <>
-      <h1>Checkboxes</h1>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>description</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        description="Exercitation do labore"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" description="Laborum ad">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error</h2>
-      <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error uten errorPropagation</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        errorPropagation={false}
-        error="Boks nr 2 må være valgt"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" error="Boksen må være valgt">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>Sizing</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        error="Boks nr 2 må være valgt"
-        size="small"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>defaultValue</h2>
-      <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLenged</h2>
-      <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLabel</h2>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" hideLabel>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange" hideLabel>
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon" hideLabel>
-          Melon
-        </Checkbox>
-      </CheckboxGroup>
-      <h2>Disabled</h2>
-      <CheckboxGroup legend="Mollit eiusmod" disabled>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" disabled>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
+      <h1>Checkbox</h1>
+      <h2>Single checkbox</h2>
+      <Checkbox value="Apple">Apple</Checkbox>
+      <h3>Desription</h3>
+      <Checkbox value="Apple" description="Laborum ad" defaultChecked>
+        Apple
+      </Checkbox>
+      <h3>Error</h3>
+      <Checkbox value="Apple" error>
+        Apple
+      </Checkbox>
+      <Checkbox value="Apple" error defaultChecked>
+        Orange
+      </Checkbox>
+      <h3>Hide label</h3>
+      <Checkbox value="Apple" hideLabel description="Laborum ad">
+        Apple
+      </Checkbox>
+      <h3>Disabled</h3>
+      <Checkbox value="Apple" disabled>
+        Apple
+      </Checkbox>
+      <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
+        Orange
+      </Checkbox>
+
+      <h2>Checkbox group</h2>
+      <Checkboxes />
+      <h3>Error</h3>
+      <Checkboxes error="Dette er en feilmelding" />
+      <h3>Small</h3>
+      <Checkboxes size="small" />
+      <h3>Small + error</h3>
+      <Checkboxes size="small" error="Dette er en feilmelding" />
+      <h3>Default value</h3>
+      <Checkboxes defaultValue={["Orange", "Melon"]} />
+      <h3>Disabled</h3>
+      <Checkboxes disabled />
    </>
  );
 };
@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { CheckboxProps } from "../..";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
+import { omit } from "../..";

 /**
 * Handles props for Checkboxes in context with Fieldset and CheckboxGroup
@@ -9,7 +10,10 @@ import { CheckboxGroupContext } from "./CheckboxGroup";
 const useCheckbox = ({ children, ...props }: CheckboxProps) => {
  const checkboxGroup = useContext(CheckboxGroupContext);

-  const { inputProps, ...rest } = useFormField(props, "checkbox");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "checkbox"
+  );

  if (checkboxGroup) {
    if (props.checked) {
@@ -12,6 +12,7 @@ export {
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
 export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
+export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import faker from "faker";
+import { Radio, RadioGroup } from ".";
+
+const value1 = faker.datatype.string();
+const label1 = faker.datatype.string();
+const value2 = faker.datatype.string();
+const label2 = faker.datatype.string();
+
+const Group = (props) => (
+  <RadioGroup {...props} legend="legend">
+    <Radio value={value1}>{label1}</Radio>
+    <Radio value={value2}>{label2}</Radio>
+  </RadioGroup>
+);
+
+describe("Controlled RadioGroup", () => {
+  const originalError = console.error;
+  const mockError = jest.fn();
+  beforeEach(() => (console.error = mockError));
+  afterEach(() => (console.error = originalError));
+
+  test("doesnt console.error", () => {
+    const { rerender } = render(<Group value={value1} />);
+    rerender(<Group value={value2} />);
+
+    expect(mockError).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe("Uncontrolled RadioGroup", () => {
+  test("handles state correctly", () => {
+    render(<Group />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+
+  test("handles defaultValue correctly", () => {
+    render(<Group defaultValue={value1} />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(true);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+});
@@ -1,70 +1,56 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, omit } from "../..";
-import ErrorMessage from "../ErrorMessage";
+import { BodyShort, Detail, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";

 export interface RadioProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "error" | "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
  /**
   * Label for radio
   */
  children: React.ReactNode;
+  /**
+   * The value of the HTML element
+   */
  value: string;
 }

 const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    size,
-    hasError,
-    inputDescriptionId,
-  } = useRadio(props);
+  const { inputProps, size, hasError } = useRadio(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;

  return (
    <div
      className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
        "navds-radio--error": hasError,
-        "navds-radio--with-error-message": showErrorMsg,
-        "navds-radio--with-description": !!props.description,
+        "navds-radio--disabled": inputProps.disabled,
      })}
    >
      <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "errorId",
-          "description",
-        ])}
+        {...omit(props, ["children", "size", "description"])}
        {...inputProps}
        className="navds-radio__input"
        ref={ref}
      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-radio__label"
-      >
-        {props.children}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-radio__description"
-        >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+      <label htmlFor={inputProps.id} className="navds-radio__label">
+        <div className="navds-radio__content">
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-radio__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
    </div>
  );
 });
Author	SHA1	Message	Date
github-actions[bot]	c24f5a029c	Lerna versionbump [ci skip] - @navikt/ds-icons@0.7.1 - @navikt/ds-react@0.14.3 - @navikt/ds-react-internal@0.9.3	2021-12-22 10:31:55 +00:00
Andreas Nordahl	129769128e	[fix] update icons (#1373 ) * update icons * rename some icons	2021-12-22 11:18:54 +01:00
github-actions[bot]	ce1c6de935	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.6 - @navikt/ds-react@0.14.2 - @navikt/ds-react-internal@0.9.2	2021-12-21 14:02:07 +00:00
Ken	6f430ae69c	[FIX] Switch-komponent (#1359 )	2021-12-21 14:47:59 +01:00
github-actions[bot]	ab03820591	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.5	2021-12-17 12:27:25 +00:00
Andreas Nordahl	9016c9bff4	[fix] selector specificity bug in zebra table (#1370 )	2021-12-17 13:14:11 +01:00
github-actions[bot]	99ed25a0b4	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.4 - @navikt/ds-react@0.14.1 - @navikt/ds-react-internal@0.9.1	2021-12-17 10:23:03 +00:00
Andreas NordahlandKen	488168f6ed	[fix] Table updates (#1369 ) * adjust table sizes * add table body row hover style * add zebra style option to table * add simple table row selection * add table row hover dark borderC * move table checkbox style to table.css * small selection table * fix token ref * a11y table story for morten * hack type errors * fix id issue * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * define table css custom props Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-12-17 11:10:19 +01:00
Ken	12d81f8553	[ci skip] Fjernet ubrukte eksempler	2021-12-16 15:47:49 +01:00
Ken	abcee8bad6	[ci skip] fjernet cron-job tokens	2021-12-16 15:37:46 +01:00
github-actions[bot]	815b07c3ff	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.3	2021-12-16 10:04:44 +00:00
Ken	942d0c522a	[FIX] FIkser bakgrunn for textarea (#1368 )	2021-12-16 10:52:01 +01:00
Ken	34dfa9d1ee	exitZeroOnChanges: false chromatic workflow	2021-12-15 22:57:46 +01:00
Ken	fa3032d13c	chromatic workflow	2021-12-15 22:09:47 +01:00
Ken	b12086625a	[ci skip] chromatic workflow	2021-12-15 17:56:32 +01:00
Ken	c1e78d0359	[ci skip] chromatic workflow	2021-12-15 16:36:19 +01:00
Ken	7fbad47841	[ci skip] chromatic workflow	2021-12-15 15:13:07 +01:00
Ken	3c426e07e7	[ci skip] chromatic-workflow	2021-12-15 15:06:55 +01:00
Ken	662ab4cbfd	[ci skip] Tester endring i conditionals, chromatic-workflow	2021-12-15 14:45:49 +01:00
Ken	85a816e415	[ci skip] Finner nå riktig chromatic comment i pr	2021-12-15 14:26:59 +01:00
Ken	613339f289	[ci skip] logger chromatic output	2021-12-14 17:17:10 +01:00
Ken	48b42c0a8f	[ci skip] fikset comments	2021-12-14 16:57:28 +01:00
Ken	a28b70343a	get status for chromatic build in comments	2021-12-14 16:39:29 +01:00
Ken	762fa3ef08	continue-on-error for chromatic error	2021-12-14 16:17:18 +01:00
Ken	8bf95d7c58	splittet push og pr build	2021-12-14 15:39:25 +01:00
Ken	3a08d0e25c	la til commit-sha i chromatic melding	2021-12-14 15:21:31 +01:00
Ken	685b443374	chromatic-status fix	2021-12-14 15:18:22 +01:00
Ken	d107eecc93	la til chromatic status i comment	2021-12-14 15:06:20 +01:00
Ken	879d8f6306	workflow for chromatic pr, fjernet vercel	2021-12-14 15:04:06 +01:00
github-actions[bot]	6641304e0e	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.2	2021-12-14 11:03:29 +00:00
Ken	d56d329547	[FIX] button:disabled opacity til 0.3, tidligere 30% (#1363 )	2021-12-14 11:48:29 +01:00
Ken	afefca5b46	Update chromatic.yml	2021-12-14 11:30:57 +01:00
Ken	918a189c3e	oppdatert workflow	2021-12-14 11:15:13 +01:00
Ken	bef36ccf81	workflow for chromatic PR	2021-12-14 11:13:13 +01:00
github-actions[bot]	80ad6349e2	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.1	2021-12-13 12:41:19 +00:00
Ken	67dc10d290	[FIX] active:disabled styling for button (#1360 )	2021-12-13 13:25:59 +01:00
Ken	05477b273e	fikset alias for vercel deploy	2021-12-13 11:23:13 +01:00
Ken	0b05928f69	vercel workflow- kjører ikke dev på master push	2021-12-13 11:02:41 +01:00
Ken	f5b2012245	vercel workflow fix	2021-12-13 11:01:08 +01:00
Ken	3b59d03bca	vercel workflow	2021-12-13 10:59:48 +01:00
Ken	794c6fea4e	oppdatert gitignore	2021-12-13 10:51:10 +01:00
Ken	01cc0b3703	Update README.md	2021-12-10 13:13:49 +01:00
github-actions[bot]	36d98e1d19	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.0 - @navikt/ds-icons@0.7.0 - @navikt/ds-react@0.14.0 - @navikt/ds-tokens@0.7.0 - @navikt/ds-css-internal@0.7.0 - @navikt/ds-react-internal@0.9.0	2021-12-07 15:12:59 +00:00
Ken Andreas Nordahl KenAJoh github-actions[bot]	705b2cbe9c	[FEATURE] Tokens migrering (#1332 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2021-12-07 15:53:48 +01:00
dependabot[bot]	2fc2572d93	Bump prismjs from 1.23.0 to 1.25.0 (#1354 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-12-07 15:31:21 +01:00
Ken	5fd0b3cffd	hotfix god-praksis accordion margin-bottom	2021-12-07 15:07:51 +01:00
Ken	ead802c0d8	hotfix god-praksis accordion margin-bottom	2021-12-07 13:41:54 +01:00
Ken	eb9ca68e5c	Update README.md	2021-12-07 13:11:39 +01:00
Ken	89a604bd57	Fjernet lvl2 toc fra god-praksis template	2021-12-06 16:23:14 +01:00
Ken	9465cdf30a	[FEATURE] React og @types/react til v17 i peerDep (#1355 )	2021-12-06 16:13:58 +01:00
Ken	cb482b4cdc	Update README.md	2021-12-06 14:18:51 +01:00
github-actions[bot]	f6c4f853af	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.5 - @navikt/ds-react@0.13.3 - @navikt/ds-react-internal@0.8.3	2021-12-06 11:09:52 +00:00
KenandAndreas Nordahl	9a2cd06452	[FEATURE] 3.0 Beta sync (#1341 ) * checkbox border + spacing * oppdatert spacing + description * oppdatert checkbox til 3.0 beta * lint fix * disabled for checkbox * fjernet ubrukte tokens * generell opacity 0.3 * reduce checkbox label spacing * adjust checkbox desc placement * bruker nå Detail for small description * reduce error message bullet spacing * adjust small checkbox alignment * adjust error message and fieldset spacing * remove duplicate disabled opacity * reduce fieldset desc margin * small checkbox size * [FIX] Beta 3.0 Disabled for restrende form-elementer (#1346) * fieldset * oppdatert textfield * select disabled * fikset additive opacity fieldset * remove duplicate disabled style Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * Beta 3.0 Radio (#1342) * oppdatert small * oppdatert radio error * oppdatert disabled for radio * fjernet ubrukte tokens * radio by box shadow * some radio positioning and fieldset desc size * remove duplicate disabled opacity * oopsie * oopsie Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * align small checkbox desc * align hidden input of small checkbox and radio * combine radio and checkbox styles * lint fixes * error on checkbox and radio is boolean * remove errorPopagation from checkbox group and radio group * remove error from radio as it only makes sense on group * cleanup checkbox stories * cleanup radio stories * update radio and checkbox how-to guides * place and size checkmark absolutely to fix strange rounding behaviour * padding around label * oopsie * Beta 3.0 Textfield (#1343) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * radio-label/desc as "div" Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-12-06 11:52:59 +01:00
Ken	40ae4d9a20	Update README.md	2021-12-06 10:46:24 +01:00
Ken	3e835fc76c	kan nå bruke accordion i god-praksis	2021-12-03 13:53:39 +01:00
github-actions[bot]	2ad9183b09	Lerna versionbump [ci skip] - @navikt/ds-react@0.13.2 - @navikt/ds-react-internal@0.8.2	2021-12-02 13:23:57 +00:00
Andreas Nordahl	627b4f06cb	[fix] field description as div (#1353 )	2021-12-02 14:05:07 +01:00
Ken	3977927ac8	Update README.md	2021-11-26 10:57:26 +01:00
Ken	6f81c2cf4e	Update update-tokens.yml	2021-11-18 11:57:06 +01:00
github-actions[bot]	46f97b006f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.4 - @navikt/ds-tokens@0.6.3	2021-11-17 14:28:50 +00:00
Ken	9338995a3c	[FIX] Nested token-parsing (#1347 )	2021-11-17 15:09:59 +01:00
github-actions[bot]	e3cf943ab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.3	2021-11-15 13:33:02 +00:00
Andreas Nordahl	59a3c71821	[FIX] Reduce body line-height to make struts smaller	2021-11-15 14:12:54 +01:00
Andreas NordahlandKen	edab708a93	add security playbook card to front page. adjust styling (#1330 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-11-12 15:50:05 +01:00
github-actions[bot]	c291a6106f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.2 - @navikt/ds-tokens@0.6.2	2021-11-12 13:43:24 +00:00
github-actions[bot]andKenAJoh	8f0601e93f	[FIX] Tokens sync Figma (#1331 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 14:27:21 +01:00
github-actions[bot]	03a9d1a554	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.1 - @navikt/ds-icons@0.6.3 - @navikt/ds-react@0.13.1 - @navikt/ds-tokens@0.6.1 - @navikt/ds-react-internal@0.8.1	2021-11-12 11:01:46 +00:00
github-actions[bot]andKenAJoh	c58688a966	[FIX] Tokens sync Figma (#1328 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 11:45:51 +01:00
Ken	f242e5028c	Fikset parsing til Style Dictionary format (#1329 )	2021-11-12 11:08:51 +01:00
KenandAndreas Nordahl	92e13a173f	[FIX ] ikon id prefikset (#1324 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-12 10:05:52 +01:00
github-actions[bot]	a06b27a218	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.0 - @navikt/ds-react@0.13.0 - @navikt/ds-tokens@0.6.0 - @navikt/ds-react-internal@0.8.0	2021-11-11 17:30:19 +00:00
KenandAndreas Nordahl	942f611c38	[FEATURE] Henter tokens fra Figma (#1270 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-11 18:08:31 +01:00
github-actions[bot]	9754e17057	Lerna versionbump [ci skip] - @navikt/ds-react-internal@0.7.4	2021-11-11 16:13:22 +00:00
Ken	656d53c9e4	[FIX] Fjernet aria-haspopup fra toggle-button (#1325 )	2021-11-11 16:57:21 +01:00
Ken	d0bf3d81a8	Update update-icons.yml	2021-11-06 13:47:34 +01:00
github-actions[bot]	39c4c751d8	Lerna versionbump [ci skip] - @navikt/ds-react@0.12.3 - @navikt/ds-react-internal@0.7.3	2021-11-05 11:00:44 +00:00
Andreas Nordahl	dacaf44ea8	[fix] controlled radio group no longer logs errors (#1322 )	2021-11-05 11:42:35 +01:00