Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.0 - @navikt/ds-react@0.19.0 - @navikt/ds-react-internal@0.14.0
[FEATURE] Oppdatert ReadMore komponent (#1508 )
2026-10-14 09:42:02 +00:00 · 2022-06-07 12:16:14 +00:00 · 2022-06-07 14:04:27 +02:00 · 2022-06-03 12:29:16 +00:00 · 2022-06-03 14:16:14 +02:00 · 2022-06-03 13:41:23 +02:00
361 changed files with 14398 additions and 9040 deletions
@@ -0,0 +1 @@
+509e1f2ded31a7d804422d05025454fac5a4c988
@@ -117,3 +117,4 @@ react-docgen-docs.json
 cjs
 esm
 .vercel
+_docs.json
@@ -0,0 +1,12 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react(deprecated)/intro" />
+
+# Utdaterte pakker
+
+På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
+
+- PageHeader -> @navikt/ds-react-navno
+- MicroCard -> @navikt/ds-react-navno
+
+- StepIndicator -> Horisontal `<Stepper />`
@@ -0,0 +1,17 @@
+.rowgap {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.colgap {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.colgap[data-theme="dark"],
+.rowgap[data-theme="dark"] {
+  background-color: #262626;
+}
@@ -1,10 +1,20 @@
+const getStories = () => {
+  return process.env.stories
+    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
+    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
+};
+
 module.exports = {
  webpackFinal: async (config, { configType }) => {
-    config.devServer = { stats: "errors-only" };
+    config.devServer = {
+      stats: "errors-only",
+    };
    return config;
  },
-  devServer: { stats: "errors-only" },
-  stories: ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  devServer: {
+    stats: "errors-only",
+  },
+  stories: () => [...getStories(), "./*.stories.mdx"],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-a11y",
@@ -20,8 +30,28 @@ module.exports = {
      name: "@storybook/addon-essentials",
      options: {
        actions: false,
-        controls: { hideNoControlsWarning: true },
+        controls: {
+          hideNoControlsWarning: true,
+        },
      },
    },
  ],
+  features: {
+    storyStoreV7: true,
+  },
+  core: {
+    builder: {
+      name: "webpack5",
+      options: {
+        lazyCompilation: false,
+        fsCache: true,
+      },
+    },
+  },
+  framework: "@storybook/react",
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
+  },
 };
@@ -1,13 +1,16 @@
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
+import "./layout.css";

 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
  options: {
    storySort: {
      method: "",
-      order: [],
+      order: ["ds-icons", "ds-react", ["Default"]],
      locales: "",
    },
  },
+  viewMode: "docs",
+  layout: "centered",
 };
@@ -1,3 +0,0 @@
-# Designsystem v2
-
-Storybook: https://navikt.github.io/Designsystemet/
@@ -1,105 +0,0 @@
-:root {
-  --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 {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-weight: var(--navds-font-weight-bold);
-}
-
-.navds-accordion-menu-collapsable__button {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font: inherit;
-  text-align: inherit;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-accordion-menu-color-text);
-  text-decoration: underline;
-}
-
-.navds-accordion-menu-item,
-.navds-accordion-menu-collapsable__button {
-  display: flex;
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  text-decoration: none;
-}
-
-.navds-accordion-menu-collapsable__expand-icon {
-  font-size: 1.5rem;
-  color: var(--navds-accordion-menu-color);
-  flex-shrink: 0;
-  margin-left: var(--navds-spacing-2);
-}
-
-.navds-accordion-menu-collapsable--open
-  > .navds-accordion-menu-collapsable__button
-  > .navds-accordion-menu-collapsable__expand-icon {
-  transform: rotate(180deg);
-}
-
-.navds-accordion-menu-collapsable .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-8);
-}
-
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-12);
-}
-
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-item,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  padding-left: var(--navds-spacing-16);
-}
-
-.navds-accordion-menu-item:focus,
-.navds-accordion-menu-collapsable__button:focus {
-  outline: 3px solid var(--navds-accordion-menu-outline-focus);
-  outline-offset: -3px;
-  color: var(--navds-accordion-menu-color-text-focus);
-}
-
-.navds-accordion-menu-collapsable__button:focus
-  > .navds-accordion-menu-collapsable__expand-icon {
-  color: var(--navds-accordion-menu-color-focus);
-}
-
-.navds-accordion-menu-item:hover,
-.navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-accordion-menu-color-background-hover);
-}
-
-.navds-accordion-menu-item--active {
-  box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
-  color: var(--navds-accordion-menu-color-text-active);
-  text-decoration: none;
-}
@@ -4,11 +4,16 @@
    ---navds-semantic-color-component-background-light
  );
  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
+  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
  --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-color-text-open: var(--navds-semantic-color-text);
+  --navds-accordion-color-text-open-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-background-open: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
  );
 }

@@ -20,16 +25,53 @@
  background: var(--navds-accordion-color-background);
 }

+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
 .navds-accordion__header:focus {
  outline: none;
  box-shadow: var(--navds-shadow-focus);
-  border-color: var(--navds-accordion-color-border-focus);
 }

 .navds-accordion__header:hover {
  color: var(--navds-accordion-color-text-hover);
  border-color: var(--navds-accordion-color-border-hover);
-  text-decoration: underline;
+}
+
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  color: var(--navds-accordion-color-text-open);
+  border-color: transparent;
+}
+
+.navds-accordion__item--open > .navds-accordion__header:hover {
+  border-color: transparent;
+  color: var(--navds-accordion-color-text-open-hover);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__item--open
+  > .navds-accordion__header:hover
+  + *
+  .navds-accordion__content {
+  border-color: var(--navds-accordion-color-border-hover);
 }

 .navds-accordion__expand-icon {
@@ -42,26 +84,6 @@
  transform: rotateZ(180deg);
 }

-.navds-accordion__header {
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
-  background: transparent;
-  text-align: left;
-  border: none;
-  width: 100%;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 2px solid #a0a0a0;
-  gap: var(--navds-spacing-4);
-}
-
-.navds-accordion__content {
-  color: var(--navds-accordion-color-text);
-  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
-}
-
 .navds-accordion__expand-icon--filled {
  display: none;
 }
@@ -3,53 +3,32 @@
  --navds-alert-color-error-border: var(
    --navds-semantic-color-feedback-danger-border
  );
-  --navds-alert-color-error-background: var(
-    --navds-semantic-color-feedback-danger-background
-  );
+  --navds-alert-color-error-background: var(--navds-global-color-red-50);
  --navds-alert-color-warning-border: var(
    --navds-semantic-color-feedback-warning-border
  );
-  --navds-alert-color-warning-background: var(
-    --navds-semantic-color-feedback-warning-background
-  );
+  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
  --navds-alert-color-info-border: var(
    --navds-semantic-color-feedback-info-border
  );
-  --navds-alert-color-info-background: var(
-    --navds-semantic-color-feedback-info-background
-  );
+  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
  --navds-alert-color-success-border: var(
    --navds-semantic-color-feedback-success-border
  );
-  --navds-alert-color-success-background: var(
-    --navds-semantic-color-feedback-success-background
-  );
+  --navds-alert-color-success-background: var(--navds-global-color-green-50);
  --navds-alert-color-error-icon: var(
    --navds-semantic-color-feedback-danger-icon
  );
-  --navds-alert-color-error-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-alert-color-warning-icon: var(
-    --navds-semantic-color-feedback-warning-icon
-  );
-  --navds-alert-color-warning-icon-background: var(
-    --navds-semantic-color-component-background-inverted
-  );
+  --navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
-  --navds-alert-color-info-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
  --navds-alert-color-success-icon: var(
    --navds-semantic-color-feedback-success-icon
  );
-  --navds-alert-color-success-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
+  --navds-alert-color-icon-background: var(--navds-global-color-white);
 }

 .navds-alert {
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid;
  border-color: var(--navds-alert-color-border);
  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
@@ -91,7 +70,7 @@
  color: var(--navds-alert-color-error-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-error-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -104,12 +83,11 @@

 .navds-alert--warning > .navds-alert__icon {
  color: var(--navds-alert-color-warning-icon);
-  background: radial-gradient(
-    circle,
-    var(--navds-alert-color-warning-icon-background) 50%,
-    0,
-    transparent
-  );
+  background: linear-gradient(
+      var(--navds-alert-color-icon-background),
+      var(--navds-alert-color-icon-background)
+    )
+    center / 16% 60% no-repeat;
 }

 .navds-alert--info {
@@ -121,7 +99,7 @@
  color: var(--navds-alert-color-info-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-info-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -136,7 +114,7 @@
  color: var(--navds-alert-color-success-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-success-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -20,10 +20,22 @@ html {
  box-sizing: inherit;
 }

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
  /* Primary */
  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
  --navds-button-color-primary-border-focus: var(
@@ -19,7 +20,7 @@
    --navds-semantic-color-interaction-primary
  );
  --navds-button-color-secondary-text-hover: var(
-    --navds-semantic-color-text-inverted
+    --navds-semantic-color-interaction-primary
  );
  --navds-button-color-secondary-text-active: var(
    --navds-semantic-color-text-inverted
@@ -34,7 +35,7 @@
    --navds-semantic-color-component-background-light
  );
  --navds-button-color-secondary-background-hover: var(
-    --navds-semantic-color-interaction-primary-hover
+    --navds-semantic-color-interaction-primary-hover-subtle
  );
  --navds-button-color-secondary-background-active: var(
    --navds-semantic-color-interaction-primary-selected
@@ -47,8 +48,8 @@
  --navds-button-color-tertiary-text-active: var(
    --navds-semantic-color-text-inverted
  );
-  --navds-button-color-tertiary-border-hover: var(
-    --navds-semantic-color-interaction-primary
+  --navds-button-color-tertiary-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
  );
  --navds-button-color-tertiary-border-focus: var(
    --navds-semantic-color-interaction-primary
@@ -74,6 +75,43 @@
  --navds-button-color-danger-border-focus: var(
    --navds-semantic-color-component-background-light
  );
+
+  /* Loader */
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
+[data-theme="dark"] {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-semantic-color-text);
+  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
+  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
+  --navds-button-color-primary-background-hover: var(
+    --navds-global-color-blue-300
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-global-color-blue-400
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-active: var(
+    --navds-global-color-blue-200
+  );
+  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-semantic-color-text
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-button-color-secondary-background-hover: var(
+    --navds-global-color-blue-900
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-global-color-blue-800
+  );
 }

 .navds-button {
@@ -84,7 +122,7 @@
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
  min-width: 48px;
  padding: var(--navds-spacing-3);
 }
@@ -95,6 +133,11 @@
  min-width: 32px;
 }

+.navds-button--xsmall {
+  padding: 0.125rem 0.375rem;
+  min-width: 24px;
+}
+
 .navds-button:focus {
  outline: none;
  box-shadow: var(--navds-shadow-focus);
@@ -111,7 +154,8 @@
  font-size: 1.5rem;
 }

-.navds-button--small svg {
+.navds-button--small svg,
+.navds-button--xsmall svg {
  font-size: 1.25rem;
 }

@@ -155,7 +199,6 @@
 .navds-button--secondary:hover {
  color: var(--navds-button-color-secondary-text-hover);
  background-color: var(--navds-button-color-secondary-background-hover);
-  box-shadow: none;
 }

 .navds-button--secondary:focus {
@@ -169,7 +212,6 @@
  box-shadow: none;
 }

-.navds-button--secondary:focus:hover,
 .navds-button--secondary:focus:active {
  box-shadow: inset 0 0 0 1px
      var(--navds-button-color-secondary-border-focus-active-hover),
@@ -192,7 +234,7 @@
 }

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

 .navds-button--tertiary:focus {
@@ -255,7 +297,18 @@
 **************************/

 .navds-button:disabled {
-  opacity: 0.3;
  cursor: not-allowed;
-  transform: none;
+}
+
+.navds-button:disabled:not(.navds-button--loading) {
+  opacity: 0.3;
+}
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
 }
@@ -27,7 +27,7 @@
 */

 .navds-card__micro {
-  border-radius: 1rem;
+  border-radius: var(--navds-border-radius-full);
  color: var(--navds-card-micro-color-text);
  display: inline-flex;
  padding: var(--navds-spacing-1) var(--navds-spacing-2);
@@ -1,7 +1,11 @@
+:root {
+  --navds-content-container-max-width: 79.5rem;
+}
+
 .navds-content-container {
  margin-left: auto;
  margin-right: auto;
-  max-width: 79.5rem;
+  max-width: var(--navds-content-container-max-width);
  padding: var(--navds-spacing-4);
 }

@@ -1,15 +1,21 @@
 :root {
  --navds-confirmation-panel-color-background: var(
-    --navds-semantic-color-feedback-warning-background
+    --navds-global-color-orange-50
  );
  --navds-confirmation-panel-color-background-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-global-color-green-50
+  );
+  --navds-confirmation-panel-color-border: var(
+    --navds-semantic-color-feedback-warning-border
  );
  --navds-confirmation-panel-color-border-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-confirmation-panel-color-border-error: var(
+    --navds-semantic-color-feedback-danger-background
  );
  --navds-confirmation-panel-color-background-error: var(
-    --navds-semantic-color-feedback-danger-background
+    --navds-global-color-red-50
  );
  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
    --navds-global-color-green-700
@@ -28,12 +34,13 @@
  );
 }

-.navds-confirmation-panel {
+.navds-confirmation-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--navds-spacing-4);
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
+  border: 1px solid var(--navds-confirmation-panel-color-border);
  background-color: var(--navds-confirmation-panel-color-background);
  transition: background-color linear 100ms;
 }
@@ -42,17 +49,17 @@
  max-width: 80ch;
 }

-.navds-confirmation-panel--small {
+.navds-confirmation-panel--small .navds-confirmation-panel__inner {
  padding: var(--navds-spacing-3);
  gap: var(--navds-spacing-2);
 }

-.navds-confirmation-panel--checked {
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
  background-color: var(--navds-confirmation-panel-color-background-checked);
  border-color: var(--navds-confirmation-panel-color-border-checked);
 }

-.navds-confirmation-panel--error {
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
  background-color: var(--navds-confirmation-panel-color-background-error);
  border: 1px solid transparent;
 }
@@ -14,7 +14,7 @@
 }

 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
  margin-top: 0;
 }

@@ -4,7 +4,7 @@
 }

 /* Applied when hideLabel is applied to form-element */
-.navds-form-field > .sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .sr-only + input:not(:first-child) {
+.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .navds-sr-only + input:not(:first-child) {
  margin-top: 0;
 }
@@ -11,4 +11,4 @@
@import "switch.css";
@import "text-field.css";
@import "textarea.css";
-@import "search-field.css";
+@import "search.css";
@@ -1,6 +1,10 @@
 :root {
  --navds-radio-checkbox-color-background: var(
-    --navds-semantic-color-canvas-background-light
+    --navds-semantic-color-component-background-light
+  );
+  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-description: var(
+    --navds-semantic-color-text-muted
  );
  --navds-radio-checkbox-color-background-hover: var(
    --navds-semantic-color-interaction-primary-hover-subtle
@@ -56,12 +60,12 @@
  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
  width: 1.5rem;
  height: 1.5rem;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  flex-shrink: 0;
 }

 .navds-radio__label::before {
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
 }

 .navds-checkbox__content,
@@ -73,7 +77,7 @@

 .navds-checkbox__description,
 .navds-radio__description {
-  color: var(--navds-color-text-primary);
+  color: var(--navds-radio-checkbox-color-description);
 }

 .navds-checkbox--small > .navds-checkbox__input,
@@ -107,6 +111,29 @@
    var(--navds-shadow-focus);
 }

+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--navds-radio-checkbox-color-background);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px; /* Custom value OK */
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small
+  .navds-checkbox__input:indeterminate
+  + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
  background-position: 6px center;
@@ -121,7 +148,7 @@
  + .navds-checkbox__label::before {
  background-position: 4px center;
 }
-
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
 }
@@ -142,28 +169,34 @@
  color: var(--navds-radio-checkbox-color-label-hover);
 }

-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
  + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
  + .navds-radio__label::before {
  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked)
+  + .navds-radio__label::before {
  background-color: var(--navds-radio-checkbox-color-background-hover);
 }

 .navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .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__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-radio__label::before {
  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
    var(--navds-shadow-focus);
@@ -1,59 +0,0 @@
-:root {
-  --navds-search-field-color-shadow-error: var(
-    --navds-semantic-color-interaction-danger
-  );
-  --navds-search-field-color-border-error: var(
-    --navds-semantic-color-interaction-danger
-  );
-  --navds-search-field-color-clearbutton-border: var(
-    --navds-semantic-color-border
-  );
-}
-
-.navds-search-field__input-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navds-form-field--small .navds-search-field__input {
-  padding: 0.15rem;
-  min-height: 32px;
-}
-
-.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-
-.navds-search-field__input-wrapper > :first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.navds-search-field__input-wrapper > :last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.navds-search-field__input-wrapper > :last-child:first-child {
-  border-radius: 4px;
-}
-
-.navds-search-field__input-wrapper :focus {
-  z-index: var(--navds-z-index-focus);
-}
-
-.navds-search-field__button,
-.navds-search-field__clear-button {
-  flex-shrink: 0;
-}
-
-.navds-search-field--error
-  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
-  border-color: var(--navds-search-field-color-border-error);
-}
-
-.navds-search-field--disabled {
-  opacity: 0.3;
-}
@@ -0,0 +1,158 @@
+:root,
+[data-theme="light"] {
+  --navds-search-color-text: var(--navds-semantic-color-text);
+  --navds-search-color-border: var(--navds-semantic-color-border);
+  --navds-search-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
+}
+
+[data-theme="dark"] {
+  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
+}
+
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  padding-right: var(--navds-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--navds-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--navds-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--navds-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--navds-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--navds-spacing-2);
+  font-size: 1rem;
+}
+
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--navds-border-radius-medium);
+  color: var(--navds-search-color-text);
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--navds-search-color-clear-hover);
+}
+
+.navds-search__button-clear:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 64px;
+  min-height: 32px;
+  border-radius: 0;
+  border-top-right-radius: var(--navds-border-radius-medium);
+  border-bottom-right-radius: var(--navds-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 40px;
+}
+
+.navds-search__button-search.navds-button--secondary {
+  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
+    0 1px 0 0 var(--navds-search-color-border) inset,
+    0 -1px 0 0 var(--navds-search-color-border) inset;
+}
+
+.navds-search__button-search.navds-button--secondary:hover {
+  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
+    0 1px 0 0 var(--navds-search-color-border-hover) inset,
+    0 -1px 0 0 var(--navds-search-color-border-hover) inset,
+    -1px 0 0 0 var(--navds-search-color-border-hover);
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within
+  + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+
+.navds-search__button-search.navds-button--secondary:focus {
+  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
+    var(--navds-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus:hover {
+  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
+    var(--navds-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus:active {
+  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus,
+.navds-search__button-clear,
+.navds-search__button-search:focus {
+  z-index: 1;
+}
@@ -22,7 +22,7 @@
 .navds-select__input {
  appearance: none;
  background-color: var(--navds-select-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid var(--navds-select-color-border);
  width: 100%;
  box-sizing: border-box;
@@ -72,6 +72,10 @@
  padding: 0.75rem 0 0.75rem 3.25rem;
 }

+.navds-switch__description {
+  color: var(--navds-semantic-color-text-muted);
+}
+
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
  padding: 0.75rem 3.25rem 0.75rem 0;
 }
@@ -112,7 +116,7 @@
  position: absolute;
  top: var(--navds-spacing-3);
  left: 0;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

@@ -155,7 +159,7 @@
 .navds-switch__thumb {
  background-color: var(--navds-switch-color-thumb);
  color: var(--navds-switch-color-thumb-icon);
-  border-radius: 2.5px;
+  border-radius: var(--navds-border-radius-small);
  width: 20px;
  height: 20px;
  position: absolute;
@@ -210,7 +214,7 @@
  appearance: none;
 }

-.navds-switch--disabled {
+.navds-switch--disabled:not(.navds-switch--loading) {
  opacity: 0.3;
 }

@@ -1,4 +1,6 @@
-:root {
+:root,
+[data-theme="light"] {
+  --navds-text-field-color-text: var(--navds-semantic-color-text);
  --navds-text-field-color-background: var(
    --navds-semantic-color-component-background-light
  );
@@ -17,20 +19,38 @@
    --navds-semantic-color-component-background-alternate
  );
  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-text-field-color-placeholder-text: var(
+    --navds-semantic-color-text-muted
+  );
+}
+
+[data-theme="dark"] {
+  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-dark
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
 }

 .navds-text-field__input {
  appearance: none;
-  padding: 0.5rem;
+  padding: var(--navds-spacing-2);
  background-color: var(--navds-text-field-color-background);
-  border-radius: 4px;
-  border: 2px solid var(--navds-text-field-color-border);
+  border-radius: var(--navds-border-radius-medium);
+  border: 1px solid var(--navds-text-field-color-border);
  min-height: 48px;
  width: 100%;
+  color: var(--navds-text-field-color-text);
 }

-.navds-form-field--small > .navds-text-field__input {
-  padding: 0 0.15rem;
+.navds-text-field__input::placeholder {
+  color: var(--navds-text-field-color-placeholder-text);
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 0.25rem;
  min-height: 32px;
 }

@@ -52,6 +72,13 @@
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
  border-color: var(--navds-text-field-color-border-error);
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
+}
+
+.navds-text-field--error
+  > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
+    var(--navds-shadow-focus);
 }

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

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

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

 .navds-help-text__button:focus {
  outline: none;
+  color: var(--navds-help-text-color-focus);
+  background: var(--navds-help-text-color-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
 }

 .navds-help-text__icon {
-  border-radius: 50%;
-  font-size: 1.5rem;
-  color: var(--navds-help-text-color-icon);
-}
-
-.navds-help-text__button:hover > .navds-help-text__icon {
-  color: var(--navds-help-text-color-icon-hover);
-  background: var(--navds-help-text-color-icon-background-hover);
-  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
-}
-
-.navds-help-text__button:focus > .navds-help-text__icon {
-  outline: none;
-  color: var(--navds-help-text-color-icon-focus);
-  background: var(--navds-help-text-color-icon-background-focus);
-  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+  border-radius: var(--navds-border-radius-full);
 }

 .navds-help-text__popover > .navds-popover__arrow::before {
@@ -1,9 +1,9 @@
+@charset "UTF-8";
@import "baseline/baseline.css";
@import "typography.css";
@import "grid.css";

@import "accordion.css";
-@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
@import "content-container.css";
@@ -12,14 +12,21 @@
@import "help-text.css";
@import "link.css";
@import "loader.css";
+@import "menu.css";
@import "modal.css";
+@import "pagination.css";
@import "popover.css";
@import "tag.css";
+@import "tooltip.css";
+@import "toggle-group.css";
@import "panel.css";
@import "link-panel.css";
+@import "read-more.css";
@import "speech-bubble.css";
@import "step-indicator.css";
+@import "stepper.css";
@import "table.css";
+@import "tabs.css";

 /* Navno spesific packages */
@import "page-header.css";
@@ -49,6 +49,7 @@

 .navds-link svg {
  color: var(--navds-link-color-icon);
+  flex-shrink: 0;
 }

 .navds-link:focus svg {
@@ -12,8 +12,6 @@
  );
  --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);
-  --navds-loader-color-on-button-foreground: currentColor;
 }

 .navds-loader {
@@ -78,27 +76,6 @@
  width: 1rem;
 }

-/*
- * Button spesific styling
- */
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
-}
-
-.navds-button:hover .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button:active .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
@keyframes loader-rotate {
  100% {
    transform: rotate(360deg);
@@ -0,0 +1,102 @@
+:root {
+  --navds-menu-color-text: var(--navds-semantic-color-link);
+  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
+  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
+  --navds-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
+}
+
+.navds-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding: 0 0.5rem;
+}
+
+.navds-menu__list--inner {
+  padding: 0;
+}
+
+.navds-menu-collapse__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-menu-color-text);
+}
+
+.navds-menu-item,
+.navds-menu-collapse__button {
+  font-weight: var(--navds-font-weight-bold);
+  display: flex;
+  padding: var(--navds-spacing-3) var(--navds-spacing-2);
+  text-decoration: none;
+}
+
+.navds-menu-item:focus,
+.navds-menu-collapse__button:focus {
+  outline: 3px solid var(--navds-menu-outline-focus);
+  outline-offset: -3px;
+  color: var(--navds-menu-color-text-focus);
+}
+
+.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
+  color: var(--navds-menu-color-focus);
+}
+
+.navds-menu-item:hover,
+.navds-menu-collapse__button:hover {
+  background-color: var(--navds-menu-color-background-hover);
+  color: var(--navds-menu-color-text-hover);
+}
+
+.navds-menu-item--active {
+  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
+  color: var(--navds-menu-color-text-active);
+  text-decoration: none;
+}
+
+/* Collapse icon */
+.navds-menu-collapse__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-left: var(--navds-spacing-2);
+}
+
+.navds-menu-collapse__expand-icon--filled,
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
+  display: none;
+}
+
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
+  display: block;
+}
+
+.navds-menu-collapse--open
+  > .navds-menu-collapse__button
+  > .navds-menu-collapse__expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Nesting levels */
+.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="1"] .navds-menu-item {
+  padding-left: var(--navds-spacing-6);
+}
+
+.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="2"] .navds-menu-item {
+  padding-left: var(--navds-spacing-10);
+}
+
+.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="3"] .navds-menu-item {
+  padding-left: var(--navds-spacing-14);
+}
@@ -11,7 +11,7 @@

 .navds-modal {
  background-color: var(--navds-modal-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  display: block;
  position: relative;
  overflow: auto;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.12.9",
+  "version": "0.18.0",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -17,14 +17,15 @@
  },
  "main": "./dist/index.css",
  "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.7.1",
+    "@navikt/ds-tokens": "^0.9.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
    "postcss-import": "^14.0.2"
  }
 }
@@ -26,7 +26,7 @@
 .navds-page-header__wrapper {
  width: 100%;
  max-width: 56.5rem;
-  text-align: start;
+  text-align: left;
 }

 .navds-page-header__title {
@@ -38,7 +38,7 @@
 }

 .navds-page-header--left > .navds-page-header__wrapper {
-  text-align: start;
+  text-align: left;
 }

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

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

 .navds-popover__content {
@@ -0,0 +1,78 @@
+.navds-read-more {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+  color: var(--navds-semantic-color-link);
+  border-radius: var(--navds-border-radius-small);
+  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
+    2px;
+  text-align: start;
+}
+
+.navds-read-more--small {
+  padding: 2px var(--navds-spacing-1) 2px 2px;
+}
+
+.navds-read-more:hover {
+  background-color: rgba(38, 38, 38, 0.06);
+}
+
+.navds-read-more:active {
+  background-color: rgba(38, 38, 38, 0.1);
+}
+
+.navds-read-more:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-read-more + .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  padding-top: var(--navds-spacing-2);
+}
+
+.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
+  padding: 0;
+}
+
+.navds-read-more__content {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  padding: 0 var(--navds-spacing-1);
+}
+
+.navds-read-more__content::before {
+  content: "";
+  display: block;
+  width: 2px;
+  background-color: rgba(38, 38, 38, 0.36);
+  margin: 0 7px;
+  flex-shrink: 0;
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more__expand-icon--filled {
+  display: none;
+}
+
+.navds-read-more:hover
+  > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-read-more:hover > .navds-read-more__expand-icon {
+  display: none;
+}
@@ -38,7 +38,7 @@
  align-items: center;
  background: var(--navds-speechbubble-color-illustration-background);
  color: var(--navds-speechbubble-color-illustration);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
@@ -59,7 +59,7 @@
  width: fit-content;
  max-width: 37.5rem;
  background-color: var(--navds-speechbubble-color-background);
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
  border-bottom-left-radius: 2px;
  display: flex;
  flex-direction: column;
@@ -72,7 +72,7 @@
 }

 .navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
  border-bottom-right-radius: 2px;
 }

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

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

 .navds-table {
-  border-collapse: collapse;
  width: 100%;
+  border-collapse: collapse;
  display: table;
 }

@@ -47,18 +47,46 @@

 .navds-table--zebra-stripes
  .navds-table__body
-  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  .navds-table__row:nth-child(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expandable-row:nth-child(4n
+    + 1):not(:hover):not(.navds-table__row--selected) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expanded-row:nth-child(4n) {
  background-color: var(--navds-table-row-color-background-zebra);
 }

 .navds-table__header-cell,
 .navds-table__data-cell {
  display: table-cell;
-  padding: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
  border-bottom: 1px solid var(--navds-table-cell-color-border);
  text-align: left;
 }

+.navds-table__header .navds-table__header-cell,
+.navds-table__header .navds-table__data-cell {
+  border-bottom-width: 2px;
+}
+
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
 .navds-table__body .navds-table__row:hover .navds-table__header-cell,
 .navds-table__body .navds-table__row:hover .navds-table__data-cell {
  border-color: var(--navds-table-cell-color-border-hover);
@@ -66,7 +94,7 @@

 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--navds-spacing-2);
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
 }

 .navds-table .navds-checkbox .navds-checkbox__input {
@@ -80,3 +108,131 @@
 .navds-table .navds-checkbox .navds-checkbox__label {
  padding: 0;
 }
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--navds-semantic-color-link);
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--navds-semantic-color-canvas-background);
+}
+
+.navds-table__sort-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--navds-global-color-blue-50);
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.navds-table__expandable-row--open .navds-table__header-cell,
+.navds-table__expandable-row--open .navds-table__data-cell {
+  border-color: var(--navds-semantic-color-border-muted);
+}
+
+.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+  border-color: transparent;
+}
+
+.navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 56px;
+}
+
+.navds-table--small .navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 36px;
+}
+
+.navds-table__toggle-expand-button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--navds-spacing-4);
+}
+
+.navds-table--small .navds-table__toggle-expand-button {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-table__toggle-expand-button:focus {
+  box-shadow: inset var(--navds-shadow-focus);
+}
+
+.navds-table__expandable-icon {
+  font-size: 1.5rem;
+}
+
+.navds-table--small .navds-table__expandable-icon {
+  font-size: 1.25rem;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
+.navds-table__expandable-icon--filled {
+  display: none;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
+  display: block;
+}
+
+.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
+  transform: rotate(180deg);
+}
+
+.navds-table__expanded-row-cell {
+  padding: 0;
+}
+
+.navds-table__expanded-row-cell:empty {
+  display: none;
+}
+
+.navds-table__expanded-row-collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+}
+
+.navds-table__expanded-row-content {
+  padding: var(--navds-spacing-4) 4.25rem;
+}
+
+.navds-table--small .navds-table__expanded-row-content {
+  padding: var(--navds-spacing-2) var(--navds-spacing-12);
+}
@@ -0,0 +1,109 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: auto;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: 0.375rem var(--navds-spacing-4);
+  width: 32px;
+}
+
+.navds-tabs__tab {
+  min-height: 48px;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--navds-semantic-color-text-muted);
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab:focus {
+  outline: none;
+  box-shadow: inset var(--navds-shadow-focus);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 32px;
+  padding: 0.375rem var(--navds-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
+  font-size: 1.25rem;
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab-icon--top svg {
+  font-size: 1.5rem;
+}
+
+.navds-tabs__tabpanel:focus {
+  outline: none;
+}
@@ -32,7 +32,7 @@
 .navds-tag {
  border: 1px solid;
  border-color: var(--navds-tag-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  background-color: var(--navds-tag-color-background);
  display: inline-flex;
  align-items: center;
@@ -0,0 +1,97 @@
+:root {
+  --navds-toggle-group-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
+  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
+  --navds-toggle-group-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-toggle-group-color-text-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-toggle-group-color-background-pressed: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-toggle-group-color-text-pressed: var(
+    --navds-semantic-color-text-inverted
+  );
+}
+
+.navds-toggle-group {
+  border-radius: 7px; /* Custom value OK */
+  background-color: var(--navds-toggle-group-color-background);
+  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
+  padding: calc(var(--navds-spacing-1) + 1px);
+  gap: var(--navds-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.navds-toggle-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--navds-spacing-3);
+  min-height: 48px;
+  border: none;
+  cursor: pointer;
+  background-color: var(--navds-toggle-group-color-background);
+  color: var(--navds-toggle-group-color-text);
+  border-radius: var(--navds-border-radius-small);
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button:hover {
+  background-color: var(--navds-toggle-group-color-background-hover);
+  color: var(--navds-toggle-group-color-text-hover);
+}
+
+.navds-toggle-group__button:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background),
+    0 0 0 4px var(--navds-semantic-color-focus);
+}
+
+.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover),
+    0 0 0 4px var(--navds-semantic-color-focus);
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-toggle-group__button-inner > * {
+  flex-shrink: 0;
+}
+
+.navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--navds-toggle-group-color-background-pressed);
+  color: var(--navds-toggle-group-color-text-pressed);
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button {
+  padding: 0.375rem;
+  min-height: 32px;
+  min-width: fit-content;
+}
+
+.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
+  font-size: 1.5rem;
+}
+
+.navds-toggle-group--small
+  > .navds-toggle-group__button
+  > .navds-toggle-group__button-inner
+  > svg {
+  font-size: 1.125rem;
+}
+
+.navds-toggle-group__label {
+  margin-bottom: 0.5rem;
+}
@@ -0,0 +1,56 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip {
+  z-index: var(--navds-z-index-tooltip);
+}
+
+.navds-tooltip__inner {
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-2);
+  align-items: center;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
+    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 0.2s;
+  animation-name: tooltipFadeIn;
+  text-align: center;
+}
+
+.navds-tooltip__arrow {
+  height: 7px;
+  width: 7px;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--navds-spacing-1);
+  display: flex;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--navds-font-family);
+  background-color: var(--navds-global-color-gray-700);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-1);
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
@@ -4,34 +4,47 @@
  margin: 0;
 }

-.navds-heading--2xlarge {
+.navds-heading--xlarge {
  font-size: var(--navds-font-size-heading-2xlarge);
  letter-spacing: -0.01em;
  line-height: var(--navds-font-line-height-heading-2xlarge);
 }

-.navds-heading--2xlarge.navds-typo--spacing {
+.navds-heading--xlarge.navds-typo--spacing {
  margin-bottom: var(--navds-spacing-5);
 }

-.navds-heading--xlarge {
+.navds-heading--large {
  font-size: var(--navds-font-size-heading-xlarge);
  letter-spacing: -0.008em;
  line-height: var(--navds-font-line-height-heading-xlarge);
 }

-.navds-heading--xlarge.navds-typo--spacing {
+.navds-heading--large.navds-typo--spacing {
  margin-bottom: var(--navds-spacing-4);
 }

-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
-  letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-large);
-}
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--navds-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--navds-font-line-height-heading-xlarge);
+  }

-.navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--navds-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--navds-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-3);
+  }
 }

 .navds-heading--medium {
@@ -22,9 +22,10 @@ export const getPublishedIcons = async () => {
      throw e;
    });

-  return data?.meta?.components?.filter(
-    (component: any) => component?.containing_frame?.pageName !== "🔆Pictogram"
-  );
+  return data?.meta?.components?.filter((component: any) => {
+    const page = component?.containing_frame?.pageName;
+    return page !== "🔆Pictogram" && page !== "🧩Placeholder";
+  });
 };

 /**
@@ -0,0 +1,25 @@
+import React from "react";
+
+import * as Icons from "./src";
+export default {
+  title: "ds-icons/Ikoner",
+  argTypes: {
+    Icon: {
+      defaultValue: "System",
+      control: {
+        type: "select",
+        options: Object.entries(Icons).map(([Name, _]) => Name),
+      },
+    },
+    color: { control: "color" },
+  },
+};
+
+const Template = ({ Icon, color, size, ...args }) => {
+  const Iconname = Icons[Icon];
+  return <Iconname style={{ fontSize: size, color }} {...args} />;
+};
+export const Default = Template.bind({});
+Default.args = {
+  size: "24px",
+};
@@ -43,14 +43,14 @@
  },
  {
    "name": "Attachment",
-    "description": "",
-    "created_at": "2020-07-01T10:37:43.111Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.129Z",
    "pageName": "Attachment"
  },
  {
    "name": "AttachmentFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:48:27.872Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.124Z",
    "pageName": "Attachment"
  },
  {
@@ -708,15 +708,15 @@
    "pageName": "Communication"
  },
  {
-    "name": "EmailOpen",
-    "description": "",
-    "created_at": "2020-07-01T10:37:42.632Z",
+    "name": "EmailOpened",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.018Z",
    "pageName": "Communication"
  },
  {
-    "name": "EmailOpenFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:37:55.419Z",
+    "name": "EmailOpenedFilled",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.024Z",
    "pageName": "Communication"
  },
  {
@@ -743,6 +743,18 @@
    "created_at": "2021-01-11T13:37:55.499Z",
    "pageName": "Status"
  },
+  {
+    "name": "Eu",
+    "description": "",
+    "created_at": "2022-02-08T11:45:47.104Z",
+    "pageName": "International"
+  },
+  {
+    "name": "EuFilled",
+    "description": "",
+    "created_at": "2022-02-08T11:45:47.109Z",
+    "pageName": "International"
+  },
  {
    "name": "Expand",
    "description": "",
@@ -857,6 +869,18 @@
    "created_at": "2021-01-11T13:37:55.491Z",
    "pageName": "File"
  },
+  {
+    "name": "FileError",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.583Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileErrorFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.605Z",
+    "pageName": "File"
+  },
  {
    "name": "FileFilled",
    "description": "",
@@ -875,6 +899,30 @@
    "created_at": "2021-04-26T09:24:37.951Z",
    "pageName": "File"
  },
+  {
+    "name": "FileProgressFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.592Z",
+    "pageName": "File"
+  },
+  {
+    "name": "Files",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.567Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileSuccess",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.575Z",
+    "pageName": "File"
+  },
+  {
+    "name": "FileSuccessFilled",
+    "description": "",
+    "created_at": "2022-01-27T12:48:37.598Z",
+    "pageName": "File"
+  },
  {
    "name": "FillForms",
    "description": "",
@@ -893,6 +941,18 @@
    "created_at": "2020-07-01T10:37:42.891Z",
    "pageName": "Interface"
  },
+  {
+    "name": "Filter2",
+    "description": "",
+    "created_at": "2022-01-14T09:16:08.202Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "Filter2Filled",
+    "description": "",
+    "created_at": "2022-01-14T09:16:08.197Z",
+    "pageName": "Interface"
+  },
  {
    "name": "FilterFilled",
    "description": "",
@@ -947,6 +1007,18 @@
    "created_at": "2021-01-28T14:00:38.562Z",
    "pageName": "Fyrstikkalleen"
  },
+  {
+    "name": "Forward",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T10:42:53.765Z",
+    "pageName": "Communication"
+  },
+  {
+    "name": "ForwardFilled",
+    "description": "forward, videresend",
+    "created_at": "2022-04-28T12:21:53.189Z",
+    "pageName": "Communication"
+  },
  {
    "name": "Freezer",
    "description": "",
@@ -959,6 +1031,30 @@
    "created_at": "2021-01-28T14:00:38.520Z",
    "pageName": "Fyrstikkalleen"
  },
+  {
+    "name": "FullscreenEnter",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.614Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenEnterFilled",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.604Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenExit",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.597Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "FullscreenExitFilled",
+    "description": "",
+    "created_at": "2022-02-10T15:01:12.608Z",
+    "pageName": "Interface"
+  },
  {
    "name": "Glass",
    "description": "",
@@ -1625,6 +1721,18 @@
    "created_at": "2020-07-01T10:37:42.850Z",
    "pageName": "People"
  },
+  {
+    "name": "PeopleDialogFilled",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.398Z",
+    "pageName": "People"
+  },
+  {
+    "name": "PeopleDialogOutline",
+    "description": "",
+    "created_at": "2022-03-30T07:30:17.392Z",
+    "pageName": "People"
+  },
  {
    "name": "PeopleFilled",
    "description": "",
@@ -2123,6 +2231,18 @@
    "created_at": "2021-01-11T13:37:55.271Z",
    "pageName": "Social media"
  },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.695Z",
+    "pageName": "Health"
+  },
+  {
+    "name": "Stethoscope",
+    "description": "",
+    "created_at": "2022-03-18T08:51:04.700Z",
+    "pageName": "Health"
+  },
  {
    "name": "StopWatch",
    "description": "",
@@ -2315,6 +2435,18 @@
    "created_at": "2020-07-01T10:37:42.692Z",
    "pageName": "Arrow"
  },
+  {
+    "name": "UpDown",
+    "description": "",
+    "created_at": "2022-03-16T13:47:53.004Z",
+    "pageName": "Arrow"
+  },
+  {
+    "name": "UpDownFilled",
+    "description": "",
+    "created_at": "2022-03-16T13:47:52.999Z",
+    "pageName": "Arrow"
+  },
  {
    "name": "UpFilled",
    "description": "",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.7.2",
+  "version": "0.8.13",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -26,29 +26,30 @@
    "/meta.json"
  ],
  "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
    "create-icons": "svgr --out-dir src svg",
    "clean": "rimraf src cjs esm",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
    "update": "ts-node figma/index.ts dotenv/config"
  },
  "dependencies": {
    "uuid": "^8.3.2"
  },
  "peerDependencies": {
-    "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
  },
  "devDependencies": {
-    "@svgr/cli": "^5.5.0",
+    "@svgr/cli": "6.2.1",
    "@types/lodash.startcase": "^4.4.6",
+    "@types/rimraf": "3.0.2",
    "@types/uuid": "^8.3.1",
    "axios": "^0.21.3",
    "copyfiles": "^2.4.1",
    "dotenv": "^10.0.0",
    "lodash.kebabcase": "^4.1.1",
    "lodash.startcase": "4.4.0",
-    "react": "^16.8.0 || ^17.0.0",
+    "react": "^18.0.0",
    "rimraf": "3.0.2",
    "sharp": "0.29.1",
    "ts-node": "^10.4.0"
@@ -1,23 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="ds-icons/Kom i gang" />
-
-# Ta i bruk ikonpakken `@navikt/ds-icons`
-
-Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
-
-## Oppsett
-
-```bash
-yarn add @navikt/ds-icons
-```
-
-```jsx
-Import { Expand } from `@navikt/ds-icons`;
-
-<Expand
-	title="Åpne meny"
-/>
-```
-
-Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.
@@ -1,66 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import isChromatic from "chromatic/isChromatic";
-
-import * as Icons from "../src";
-export default {
-  title: "ds-icons/Ikoner",
-  argTypes: {
-    Icon: {
-      defaultValue: "System",
-      control: {
-        type: "select",
-        options: Object.entries(Icons).map(([Name, _]) => Name),
-      },
-    },
-    color: { control: "color" },
-  },
-};
-
-if (isChromatic()) {
-  const iconsStories = storiesOf("ds-icons/Ikoner", module);
-
-  Object.entries(Icons).forEach(([name, Icon]) => {
-    iconsStories.add(name, () => (
-      <div>
-        <Icon title="hello, world" />
-        <Icon style={{ height: "2em", width: "2em" }} />
-        <Icon style={{ height: "4em", width: "4em" }} />
-        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
-        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
-        <br />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
-        />
-        <br />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
-        />
-        <Icon
-          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
-        />
-      </div>
-    ));
-  });
-}
-
-const Template = ({ Icon, color, size, ...args }) => {
-  const Iconname = Icons[Icon];
-  return <Iconname style={{ fontSize: size, color }} {...args} />;
-};
-export const Ikon = Template.bind({});
-Ikon.args = {
-  size: "24px",
-};
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11515C20.7324 5.94459 20.7324 4.04674 19.4858 2.87619C18.2838 1.74743 16.3616 1.70712 15.1081 2.75525L14.9716 2.87619L3.6862 13.4736L3.52649 13.6301C1.61004 15.5902 1.66328 18.6389 3.6862 20.5385C5.70912 22.4381 8.95584 22.4881 11.0432 20.6885L11.2098 20.5385L22.4953 9.94113L24 11.3541L12.7146 21.9515L12.5304 22.1187C9.61022 24.6816 5.02951 24.6259 2.18147 21.9515C-0.666561 19.2771 -0.725895 14.9757 2.00347 12.2335L2.18147 12.0606L13.4669 1.4632C15.5445 -0.487732 18.913 -0.487732 20.9905 1.4632C23.0135 3.36279 23.0667 6.41157 21.1503 8.37164L20.9905 8.52814L9.7051 19.1255L9.56865 19.2465C8.31517 20.2946 6.39296 20.2543 5.19092 19.1255C3.98889 17.9968 3.94596 16.1918 5.06214 15.0147L5.19092 14.8866L16.4764 4.28917L17.9811 5.70216L6.69565 16.2996L6.61297 16.3867C6.28225 16.7789 6.30981 17.3502 6.69565 17.7126C7.08149 18.0749 7.68993 18.1008 8.10757 17.7902L8.20038 17.7126L19.4858 7.11515Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.185 18.9095L11.185 18.9095L20.2926 9.79323C20.6829 9.40252 21.3161 9.40222 21.7068 9.79255C22.0975 10.1829 22.0978 10.8161 21.7074 11.2068L12.6034 20.3196C10.4053 22.5614 6.83586 22.5601 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.1845 18.91L11.1845 18.91L13.2429 16.8466C13.2588 16.8283 13.2754 16.8103 13.2929 16.7929L14.792 15.2937L20.2929 9.79289C20.6834 9.40237 21.3166 9.40237 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7063L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5603 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12L15.5714 3L17 4.5L9.85714 12L17 19.5L15.5714 21L7 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.58578 12L14.2929 4.29289L15.7071 5.70711L9.41421 12L15.7071 18.2929L14.2929 19.7071L6.58578 12Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 11.5L15.0714 2.5L17.5 5L11 11.5L17.5 18L15.0714 20.5L6.5 11.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87868 12L13.9393 3.93934L16.0607 6.06066L10.1213 12L16.0607 17.9393L13.9393 20.0607L5.87868 12Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H15.874C15.9562 19.3196 16 19.6547 16 20C16 22.2091 14.2091 24 12 24C9.79086 24 8 22.2091 8 20C8 19.6547 8.04375 19.3196 8.12602 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM10.2676 19C10.0974 19.2942 10 19.6357 10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20C14 19.6357 13.9026 19.2942 13.7324 19H10.2676ZM11.9171 4.77778C9.55416 4.77778 7.57822 6.40998 7.35299 8.54785L7.24974 9.56957C7.14584 10.6481 7.078 11.5374 7.04602 12.2332L7.02693 12.807C7.00383 14.0852 6.60221 15.4394 5.8426 16.8798L5.65607 17.2222H18.4049L18.3026 17.0342C17.3858 15.3383 16.888 14.0211 16.8156 12.988L16.7864 12.3678C16.7398 11.6039 16.6215 10.3086 16.4326 8.50896C16.2105 6.3933 14.2553 4.77778 11.9171 4.77778Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM12 6C9.23858 6 7 8.23858 7 11V12.3767C7 14.0885 6.47556 15.7593 5.49727 17.164L4.91504 18H19.085L18.5027 17.164C17.5244 15.7593 17 14.0885 17 12.3767V11C17 8.23857 14.7614 6 12 6Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V3.08197C15.8497 3.51786 18.0968 5.64555 18.3797 8.34007L18.5037 9.54994C18.6344 10.8614 18.7161 11.8225 18.7487 12.4333L18.7629 12.7778C18.7871 13.7392 19.4928 15.375 20.8803 17.6852C21.139 18.1161 20.9645 18.6561 20.4904 18.8913C20.3467 18.9626 20.1856 19 20.0218 19H3.978C3.43787 19 3 18.602 3 18.1111C3 17.9452 3.0511 17.7826 3.14752 17.6416C4.40461 15.8045 5.04585 14.1833 5.07124 12.7778C5.08901 11.7944 5.20058 10.328 5.40595 8.37841C5.69763 5.60978 8.04742 3.43564 11 3.05816V0ZM12 24C10.1362 24 8.57006 22.7252 8.12602 21H15.874C15.4299 22.7252 13.8638 24 12 24Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.83233 6L7.4182 2.41414L6.00398 0.999924L0 7.00391L6.00008 13.004L7.41429 11.5898L3.82452 8H15.004C18.87 8 22.004 11.134 22.004 15C22.004 18.866 18.87 22 15.004 22V24C19.9746 24 24.004 19.9706 24.004 15C24.004 10.0294 19.9746 6 15.004 6H3.83233Z" fill="#262626"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289C7.31659 2.90237 6.68342 2.90237 6.2929 3.29289L2.29289 7.2929C2.10536 7.48043 2 7.73479 2 8C2 8.26522 2.10536 8.51957 2.29289 8.70711L6.2929 12.7071C6.68342 13.0976 7.31659 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 9H15C17.7614 9 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 7 15 7H5.41422L7.70711 4.70711Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 14L0 7.00391L8 0V5H14.5C19.7467 5 24 9.25329 24 14.5C24 19.7467 19.7467 24 14.5 24H14.25V20H14.5C17.5376 20 20 17.5376 20 14.5C20 11.4624 17.5376 9 14.5 9H8V14Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711L5.41422 7H15C18.866 7 22 10.134 22 14C22 17.866 18.866 21 15 21H13.7879C13.2356 21 12.7879 20.5523 12.7879 20C12.7879 19.4477 13.2356 19 13.7879 19H15C17.7614 19 20 16.7614 20 14C20 11.2386 17.7614 9 15 9H5.41421L7.70711 11.2929C8.09763 11.6834 8.09763 12.3166 7.70711 12.7071C7.31659 13.0976 6.68342 13.0976 6.2929 12.7071L2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8C2 7.73479 2.10536 7.48043 2.29289 7.2929L6.2929 3.29289C6.68342 2.90237 7.31659 2.90237 7.70711 3.29289Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7L3 15.5714L4.5 17L12 9.85714L19.5 17L21 15.5714L12 7Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.58579L19.7071 14.2929L18.2929 15.7071L12 9.41421L5.70712 15.7071L4.29291 14.2929L12 6.58579Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6L21 14.5714L18.5 17L12 10.5L5.5 17L3 14.5714L12 6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.87868L20.0607 13.9393L17.9393 16.0607L12 10.1213L6.06065 16.0607L3.93933 13.9393L12 5.87868Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C14.4189 0 16.4366 1.71767 16.8999 3.99981L23 4V6H21V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V6H1V4L7.10006 3.99981C7.5634 1.71767 9.58111 0 12 0ZM9.17004 4H9.66856H9.70601H10.2674H13.7327H14.2598H14.3079H14.829L14.7533 3.80669C14.6245 3.50979 14.449 3.23782 14.2362 3C13.7661 2.47481 13.1137 2.11621 12.3786 2.02365L12.1763 2.00509L12 2C11.1115 2 10.3133 2.38625 9.76394 3C9.54865 3.24054 9.3716 3.51603 9.24235 3.8169L9.17004 4ZM5 6H19V20L18.9945 20.1493C18.9182 21.1841 18.0544 22 17 22H7L6.85074 21.9945C5.81588 21.9182 5 21.0544 5 20V6ZM10 9V19H8V9H10ZM16 9V19H14V9H16Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 3C9.44769 3 8.99998 3.44772 8.99998 4V5H15V4C15 3.44772 14.5523 3 14 3H9.99998ZM17 5V4C17 2.34315 15.6568 1 14 1H9.99998C8.34312 1 6.99998 2.34315 6.99998 4V5H3.93109H2V7H4.06442L4.87773 19.1996C4.98279 20.7754 6.29169 22 7.87108 22H16.1289C17.7083 22 19.0172 20.7754 19.1222 19.1996L19.9355 7H22V5H20.0689H17ZM17.9311 7H6.06886L6.8733 19.0665C6.90832 19.5918 7.34462 20 7.87108 20H16.1289C16.6553 20 17.0916 19.5918 17.1267 19.0665L17.9311 7ZM9 18V9H11V18H9ZM13 18V9H15V18H13Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C14.4189 0 16.4366 1.71767 16.8999 3.99981L23 4V6H21V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V6H1V4L7.10006 3.99981C7.5634 1.71767 9.58111 0 12 0ZM9.66856 4H9.17004L9.24235 3.8169C9.3716 3.51603 9.54865 3.24054 9.76394 3C10.3133 2.38625 11.1115 2 12 2L12.1763 2.00509L12.3786 2.02365C13.1137 2.11621 13.7661 2.47481 14.2362 3C14.449 3.23782 14.6245 3.50979 14.7533 3.80669L14.829 4H14.3079H14.2598H13.7327H10.2674H9.70601H9.66856ZM10 9V19H8V9H10ZM16 9V19H14V9H16Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.34315 8.34315 1 10 1H14C15.6569 1 17 2.34315 17 4V5H22V7H19.9355L19.1222 19.1996C19.0172 20.7755 17.7083 22 16.1289 22H7.87108C6.29169 22 4.98279 20.7755 4.87773 19.1996L4.06442 7H2V5H7ZM9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V5H9V4ZM9 9V18H11V9H9ZM13 9V18H15V9H13Z" fill="#262626"/>
 </svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.23607L2.4102 8.03097L12 13.2254L21.5898 8.03097L12 4.23607ZM0 7.80877V7L12 2L24 7V7.80878C24 7.87303 23.9969 7.93683 23.9909 8H24V19C24 20.6569 22.6569 22 21 22H3C1.34314 22 0 20.6569 0 19V8H0.00913671C0.00308106 7.93683 0 7.87303 0 7.80877ZM2 17.1315L7.83295 13.2428L2 10.0833V17.1315ZM9.82222 14.3204L2.11208 19.4605C2.27866 19.781 2.61376 20 3 20H21C21.3862 20 21.7213 19.781 21.8879 19.4605L14.1778 14.3204L12 15.5L9.82222 14.3204ZM22 10.0833V17.1315L16.1671 13.2428L22 10.0833Z" fill="#262626"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.5L24 9V7L12 2L0 7V9L12 15.5ZM15.833 15.4238L23.8477 20.7669C23.5468 21.4909 22.8329 22 22 22H2C1.16715 22 0.453196 21.4909 0.15234 20.767L8.16706 15.4238L12 17.5L15.833 15.4238ZM24 11V18.4648L17.8222 14.3463L24 11ZM0 11L6.17779 14.3463L0 18.4648V11Z" fill="#262626"/>
-</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8.2L0.518081 7.32378L0 7.60873V8.2H1ZM23 8.2H24V7.60873L23.4819 7.32378L23 8.2ZM12 2.15L12.4819 1.27378L12 1.00873L11.5181 1.27378L12 2.15ZM12 15L11.5211 15.8779L12 16.1391L12.4789 15.8779L12 15ZM22 20H2V22H22V20ZM1.48192 9.07622L12.4819 3.02622L11.5181 1.27378L0.518081 7.32378L1.48192 9.07622ZM11.5181 3.02622L22.5181 9.07622L23.4819 7.32378L12.4819 1.27378L11.5181 3.02622ZM22 8.2V9H24V8.2H22ZM2 9V8.2H0V9H2ZM22 9V20H24V9H22ZM22.5211 8.1221L13.5211 13.0312L14.4789 14.787L23.4789 9.8779L22.5211 8.1221ZM13.5211 13.0312L11.5211 14.1221L12.4789 15.8779L14.4789 14.787L13.5211 13.0312ZM23.5605 19.1718L14.5605 13.0809L13.4395 14.7373L22.4395 20.8282L23.5605 19.1718ZM2 20V9H0V20H2ZM12.4789 14.1221L10.4789 13.0312L9.52115 14.787L11.5211 15.8779L12.4789 14.1221ZM10.4789 13.0312L1.47885 8.1221L0.521148 9.8779L9.52115 14.787L10.4789 13.0312ZM1.56048 20.8282L10.5605 14.7373L9.43952 13.0809L0.439522 19.1718L1.56048 20.8282ZM2 20H2H0C0 21.1046 0.895431 22 2 22V20ZM22 22C23.1046 22 24 21.1046 24 20H22V22Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.210623 7.51518L10.4732 13.0282L10.4789 13.0312L10.4789 13.0312L12 13.8609L13.5211 13.0312L13.5268 13.0281L13.5268 13.0282L23.7894 7.51518L12 1L0.210623 7.51518ZM24 9.67234L15.9314 14.0067L24 19.4557V9.67234ZM23.3783 21.4492L13.9446 15.0784L12.4789 15.8779L12 16.1391L11.5211 15.8779L10.0554 15.0784L0.621651 21.4492C0.980399 21.7905 1.46574 22 2 22H22C22.5343 22 23.0196 21.7905 23.3783 21.4492ZM0 19.4557L8.06862 14.0067L0 9.67234V19.4557Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6836 0.585361C11.7435 0.401105 12.0041 0.401105 12.064 0.585362L12.5383 2.04506C12.5651 2.12746 12.6419 2.18325 12.7286 2.18325H14.2632C14.4569 2.18325 14.5375 2.43117 14.3807 2.54505L13.1391 3.44712C13.069 3.49805 13.0397 3.58833 13.0664 3.67074L13.5407 5.13034C13.6006 5.3146 13.3897 5.46783 13.233 5.35394L11.9914 4.45183C11.9213 4.4009 11.8263 4.4009 11.7563 4.45183L10.5146 5.35397C10.3578 5.46785 10.1469 5.31462 10.2068 5.13036L10.6811 3.67074C10.7079 3.58833 10.6785 3.49805 10.6084 3.44712L9.36682 2.54505C9.21008 2.43117 9.29063 2.18325 9.48438 2.18325H11.0191C11.1057 2.18325 11.1825 2.12746 11.2093 2.04506L11.6836 0.585361Z" fill="#262626"/>
+<path d="M3.72187 3.991C3.63391 3.81837 3.81823 3.63404 3.99086 3.72199L5.38403 4.43175C5.46122 4.47108 5.55497 4.45623 5.61623 4.39497L6.72162 3.28964C6.85862 3.15264 7.09089 3.271 7.06057 3.46236L6.81595 5.00634C6.80239 5.09192 6.84548 5.1765 6.92269 5.21584L8.31573 5.92562C8.48835 6.01358 8.44758 6.27105 8.25622 6.30136L6.71211 6.54594C6.62654 6.55949 6.55942 6.62661 6.54587 6.71219L6.30129 8.25637C6.27098 8.44773 6.01351 8.48851 5.92555 8.31588L5.21577 6.92284C5.17643 6.84564 5.09185 6.80254 5.00627 6.8161L3.46232 7.06072C3.27095 7.09104 3.1526 6.85877 3.2896 6.72177L4.39497 5.61639C4.45624 5.55513 4.47109 5.46137 4.43175 5.38417L3.72187 3.991Z" fill="#262626"/>
+<path d="M0.585361 12.2186C0.401105 12.1587 0.401105 11.898 0.585362 11.8381L2.15739 11.3273C2.23979 11.3005 2.29558 11.2238 2.29558 11.1371V9.48437C2.29558 9.29062 2.54351 9.21007 2.65739 9.36682L3.62879 10.704C3.67971 10.7741 3.76999 10.8034 3.8524 10.7767L5.42439 10.2659C5.60866 10.206 5.76189 10.4169 5.64799 10.5737L4.6764 11.9108C4.62546 11.9809 4.62546 12.0758 4.6764 12.1459L5.64802 13.4831C5.76191 13.6398 5.60869 13.8507 5.42442 13.7909L3.85239 13.2801C3.76999 13.2533 3.67971 13.2827 3.62879 13.3528L2.65739 14.6899C2.54351 14.8467 2.29558 14.7661 2.29558 14.5724V12.9196C2.29558 12.8329 2.23979 12.7562 2.15739 12.7294L0.585361 12.2186Z" fill="#262626"/>
+<path d="M3.99086 20.0891C3.81823 20.177 3.63391 19.9927 3.72186 19.8201L4.43169 18.4269C4.47103 18.3497 4.45618 18.2559 4.39492 18.1947L3.28959 17.0893C3.15259 16.9523 3.27096 16.72 3.46232 16.7503L5.00638 16.995C5.09197 17.0086 5.17655 16.9655 5.21589 16.8883L5.92553 15.4953C6.01348 15.3226 6.27096 15.3634 6.30128 15.5548L6.54591 17.0989C6.55947 17.1845 6.62659 17.2516 6.71216 17.2651L8.25628 17.5097C8.44763 17.54 8.48841 17.7975 8.31579 17.8854L6.92289 18.5952C6.8457 18.6346 6.80261 18.7191 6.81616 18.8047L7.06069 20.3488C7.09099 20.5401 6.85872 20.6585 6.72173 20.5215L5.61627 19.416C5.55501 19.3548 5.46126 19.3399 5.38406 19.3793L3.99086 20.0891Z" fill="#262626"/>
+<path d="M12.064 23.1204C12.0041 23.3047 11.7435 23.3047 11.6836 23.1205L11.2092 21.6608C11.1824 21.5784 11.1056 21.5226 11.019 21.5226H9.4844C9.29066 21.5226 9.2101 21.2746 9.36685 21.1608L10.6085 20.2587C10.6786 20.2078 10.7079 20.1175 10.6812 20.0351L10.2068 18.5756C10.1469 18.3914 10.3578 18.2381 10.5146 18.352L11.7563 19.254C11.8264 19.3049 11.9213 19.3049 11.9914 19.254L13.233 18.352C13.3897 18.2381 13.6006 18.3914 13.5407 18.5756L13.0665 20.0351C13.0397 20.1175 13.069 20.2078 13.1391 20.2587L14.3807 21.1608C14.5375 21.2746 14.4569 21.5226 14.2632 21.5226H12.7285C12.6418 21.5226 12.565 21.5784 12.5383 21.6608L12.064 23.1204Z" fill="#262626"/>
+<path d="M20.0891 19.8201C20.177 19.9928 19.9927 20.1771 19.8201 20.0892L18.427 19.3794C18.3498 19.3401 18.2561 19.3549 18.1948 19.4162L17.0893 20.5217C16.9523 20.6587 16.72 20.5403 16.7503 20.3489L16.995 18.8047C17.0085 18.7191 16.9654 18.6345 16.8882 18.5952L15.4953 17.8855C15.3227 17.7975 15.3634 17.54 15.5548 17.5097L17.0989 17.2652C17.1845 17.2516 17.2516 17.1845 17.2651 17.0989L17.5097 15.5548C17.54 15.3634 17.7975 15.3226 17.8854 15.4953L18.5952 16.8883C18.6345 16.9655 18.7191 17.0086 18.8047 16.9951L20.3487 16.7504C20.5401 16.72 20.6584 16.9523 20.5214 17.0893L19.416 18.1949C19.3547 18.2562 19.3399 18.3499 19.3792 18.4271L20.0891 19.8201Z" fill="#262626"/>
+<path d="M23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4145 12.2187L21.8424 12.7295C21.76 12.7563 21.7042 12.8331 21.7042 12.9197V14.5726C21.7042 14.7663 21.4563 14.8469 21.3424 14.6901L20.3709 13.3528C20.3199 13.2827 20.2297 13.2534 20.1473 13.2802L18.5754 13.791C18.3912 13.8508 18.2379 13.64 18.3518 13.4832L19.3233 12.146C19.3743 12.0759 19.3743 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3912 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7742 20.371 10.7041L21.3424 9.36682C21.4563 9.21007 21.7042 9.29062 21.7042 9.48437V11.1373C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382Z" fill="#262626"/>
+<path d="M19.82 3.72203C19.9927 3.63407 20.177 3.8184 20.089 3.99102L19.3792 5.38419C19.3399 5.46139 19.3547 5.55514 19.416 5.61641L20.5214 6.72179C20.6584 6.85879 20.54 7.09107 20.3487 7.06075L18.8045 6.81606C18.719 6.8025 18.6344 6.8456 18.595 6.92281L17.8854 8.31578C17.7975 8.48842 17.54 8.44765 17.5097 8.25629L17.2651 6.71221C17.2515 6.62664 17.1844 6.55952 17.0988 6.54596L15.5547 6.30132C15.3634 6.271 15.3226 6.01354 15.4952 5.92558L16.8882 5.21585C16.9654 5.17652 17.0085 5.09194 16.9949 5.00635L16.7503 3.46238C16.72 3.27102 16.9522 3.15266 17.0892 3.28965L18.1948 4.39506C18.2561 4.45632 18.3498 4.47116 18.427 4.43183L19.82 3.72203Z" 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 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM11.6942 1.58536C11.754 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.0019 5.08798C11.9318 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5231 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.6278 3.36313C9.47105 3.24925 9.55161 3.00132 9.74535 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536ZM4.704 4.43512C4.53138 4.34717 4.34706 4.5315 4.43502 4.70413L5.05696 5.92473C5.0963 6.00193 5.08145 6.09568 5.02018 6.15695L4.05175 7.12538C3.91475 7.26238 4.03311 7.49465 4.22447 7.46433L5.57715 7.25002C5.66273 7.23646 5.74731 7.27955 5.78664 7.35676L6.40849 8.57722C6.49645 8.74985 6.75392 8.70907 6.78423 8.51772L6.99851 7.16483C7.01207 7.07925 7.07919 7.01213 7.16476 6.99858L8.51758 6.7843C8.70894 6.75399 8.74972 6.49652 8.57709 6.40856L7.35662 5.78671C7.27941 5.74737 7.23632 5.66279 7.24988 5.57721L7.4642 4.22451C7.49452 4.03315 7.26225 3.91479 7.12524 4.05178L6.1568 5.02018C6.09553 5.08144 6.00179 5.09629 5.92459 5.05696L4.704 4.43512ZM1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163ZM4.43501 19.1228C4.34705 19.2954 4.53138 19.4798 4.704 19.3918L5.92462 18.7699C6.00182 18.7306 6.09557 18.7454 6.15684 18.8067L7.12535 19.7752C7.26234 19.9122 7.49461 19.7938 7.46431 19.6025L7.25008 18.2497C7.23652 18.1641 7.27961 18.0796 7.35681 18.0402L8.57716 17.4184C8.74977 17.3304 8.70899 17.0729 8.51764 17.0426L7.1648 16.8283C7.07923 16.8148 7.01212 16.7477 6.99856 16.6621L6.78423 15.3093C6.75391 15.1179 6.49643 15.0771 6.40848 15.2498L5.78675 16.4702C5.74742 16.5474 5.66283 16.5905 5.57724 16.577L4.22447 16.3626C4.03311 16.3323 3.91475 16.5645 4.05174 16.7015L5.02013 17.67C5.0814 17.7312 5.09624 17.825 5.05691 17.9022L4.43501 19.1228ZM12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74537C9.55163 20.7291 9.47107 20.4812 9.62782 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9318 18.6934 12.0019 18.6425L13.0888 17.8529C13.2455 17.739 13.4564 17.8923 13.3965 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451ZM19.1228 19.3919C19.2954 19.4798 19.4798 19.2955 19.3918 19.1229L18.7699 17.9024C18.7305 17.8252 18.7454 17.7314 18.8066 17.6702L19.7752 16.7016C19.9121 16.5646 19.7938 16.3323 19.6024 16.3626L18.2497 16.577C18.1641 16.5905 18.0795 16.5475 18.0402 16.4702L17.4184 15.2498C17.3304 15.0771 17.0729 15.1179 17.0426 15.3093L16.8283 16.6621C16.8148 16.7477 16.7477 16.8148 16.6621 16.8284L15.3093 17.0426C15.1179 17.073 15.0772 17.3304 15.2498 17.4184L16.4702 18.0402C16.5474 18.0795 16.5905 18.1641 16.5769 18.2497L16.3626 19.6026C16.3322 19.794 16.5645 19.9123 16.7015 19.7753L17.6701 18.8068C17.7313 18.7456 17.8251 18.7307 17.9023 18.77L19.1228 19.3919ZM22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7389 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74534V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359ZM19.3918 4.70416C19.4797 4.53153 19.2954 4.34721 19.1228 4.43517L17.9023 5.05703C17.8251 5.09637 17.7314 5.08152 17.6701 5.02027L16.7015 4.05179C16.5645 3.9148 16.3322 4.03316 16.3625 4.22452L16.5769 5.57722C16.5904 5.6628 16.5473 5.74738 16.4701 5.78672L15.2497 6.40853C15.0771 6.49648 15.1179 6.75395 15.3092 6.78427L16.6621 6.9986C16.7476 7.01216Line truncated
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17L3 8.42857L4.5 7L12 14.1429L19.5 7L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.4142L4.2929 9.7071L5.70711 8.29289L12 14.5858L18.2929 8.29289L19.7071 9.70711L12 17.4142Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17L3 8.42857L5.5 6L12 12.5L18.5 6L21 8.42857L12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.1213L3.93934 10.0607L6.06066 7.93934L12 13.8787L17.9393 7.93934L20.0607 10.0607L12 18.1213Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 24H3V0H14L21 7V24ZM12 2H5V22H19V8H12V2ZM14 2.83V6L17.17 5.999L14 2.83Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM6 20V4H14V6C14 7.10457 14.8954 8 16 8H18V20H6ZM17.5858 6L16 4.41421V6H17.5858Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7071 16.7071C15.3166 17.0976 14.6834 17.0976 14.2929 16.7071L12 14.4142L9.70711 16.7071C9.31658 17.0976 8.68342 17.0976 8.29289 16.7071C7.90237 16.3166 7.90237 15.6834 8.29289 15.2929L10.5858 13L8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289C8.68342 8.90237 9.31658 8.90237 9.7071 9.29289L12 11.5858L14.2929 9.29289C14.6834 8.90237 15.3166 8.90237 15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L13.4142 13L15.7071 15.2929C16.0976 15.6834 16.0976 16.3166 15.7071 16.7071Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM6 20V4H14V6C14 7.10457 14.8954 8 16 8H18V20H6ZM17.5858 6L16 4.41421V6H17.5858Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM14.2929 16.7071C14.6834 17.0976 15.3166 17.0976 15.7071 16.7071C16.0976 16.3166 16.0976 15.6834 15.7071 15.2929L13.4142 13L15.7071 10.7071C16.0976 10.3166 16.0976 9.68342 15.7071 9.29289C15.3166 8.90237 14.6834 8.90237 14.2929 9.29289L12 11.5858L9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289C7.90237 9.68342 7.90237 10.3166 8.29289 10.7071L10.5858 13L8.29289 15.2929C7.90237 15.6834 7.90237 16.3166 8.29289 16.7071C8.68342 17.0976 9.31658 17.0976 9.70711 16.7071L12 14.4142L14.2929 16.7071Z" fill="#262626"/>
+<path d="M16 2V6H20C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 24H3V0H14L21 7V24ZM14 2.83V6L17.17 5.999L14 2.83Z" fill="#262626"/>
+<path d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3Z" fill="#262626"/>
+<path d="M16 2V6H20C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2Z" fill="#262626"/>
 </svg>
@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 23V10C2 9.44772 2.44772 9 3 9H11.5556C12.1078 9 12.5556 9.44772 12.5556 10V12H21C21.5523 12 22 12.4477 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H14V9C14 7.89543 13.1046 7 12 7H4V0ZM8 5H16V3H8V5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H4V7H12C13.1046 7 14 7.89543 14 9V10H20V0ZM16 5H8V3H16V5ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13C16 13.5523 15.5523 14 15 14C14.4477 14 14 13.5523 14 13C14 11.8954 13.1046 11 12 11Z" fill="#262626"/>
+<path d="M20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2V6H20Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7071 11.7071C16.0976 11.3166 16.0976 10.6834 15.7071 10.2929C15.3166 9.90237 14.6834 9.90237 14.2929 10.2929L11 13.5858L9.70711 12.2929C9.31658 11.9024 8.68342 11.9024 8.29289 12.2929C7.90237 12.6834 7.90237 13.3166 8.29289 13.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L15.7071 11.7071Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H16C16.2652 2 16.5196 2.10536 16.7071 2.29289L19.7071 5.29289C19.8946 5.48043 20 5.73478 20 6V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM6 4V20H18V8H16C14.8954 8 14 7.10457 14 6V4H6ZM16 4.41421L17.5858 6H16V4.41421Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H14V6C14 7.10457 14.8954 8 16 8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L11.7071 15.7071C11.3166 16.0976 10.6834 16.0976 10.2929 15.7071L8.29289 13.7071C7.90237 13.3166 7.90237 12.6834 8.29289 12.2929C8.68342 11.9024 9.31658 11.9024 9.70711 12.2929L11 13.5858L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z" fill="#262626"/>
+<path d="M20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2V6H20Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13C10 11.8954 10.8954 11 12 11C13.1046 11 14 11.8954 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 10.7909 14.2091 9 12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C10.8954 15 10 14.1046 10 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 2.44772 4.44772 2 5 2H16C16.2652 2 16.5196 2.10536 16.7071 2.29289L19.7071 5.29289C19.8946 5.48043 20 5.73478 20 6V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3ZM6 4V20H18V8H16C14.8954 8 14 7.10457 14 6V4H6ZM16 4.41421L17.5858 6H16V4.41421Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.34783 12.9348V12.5015L9.03177 12.2052L1 4.67546L0.316059 5.405L1 4.67546V3.5H23V4.69448L15.4668 12.2277L15.1739 12.5206V12.9348L15.1739 21.5495L9.34783 23.0384V12.9348Z" stroke="#262626" stroke-width="2"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3V4.17546C0 4.45187 0.114409 4.71595 0.316059 4.905L8.34783 12.4348V22.5384C8.34783 23.1911 8.96302 23.6689 9.59542 23.5073L15.4215 22.0184C15.8642 21.9052 16.1739 21.5064 16.1739 21.0495V12.4348L23.7071 4.90159C23.8946 4.71405 24 4.4597 24 4.19448V3C24 2.44772 23.5523 2 23 2H1C0.447715 2 0 2.44772 0 3Z" 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 d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.414 8.99999L21.7068 3.7071L20.2926 2.29288L14.9999 7.58561V2.99999H12.9999V11H20.9999V8.99999H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1H24V3H0V1ZM0 11H24V13H0V11ZM24 21H0V23H24V21Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 21L2 21L2 19L22 19V21ZM22 13L2 13L2 11L22 11V13ZM22 5L2 5L2 3L22 3L22 5Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1H24V5H0V1ZM0 10H24V14H0V10ZM24 19H0V23H24V19Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM2 21L22 21V19L2 19V21ZM2 13L22 13V11L2 11V13ZM2 5L22 5V3L2 3V5Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 22L21 2L11 2L11 8L9 8L9 2C9 0.895428 9.89543 0 11 0H21C22.1046 0 23 0.89543 23 2L23 22C23 23.1046 22.1046 24 21 24L11 24C9.89543 24 9 23.1046 9 22L9 17H11L11 22L21 22ZM15.5859 11L12.293 7.70711L13.7072 6.29289L19.4143 12L13.7072 17.7071L12.293 16.2929L15.5859 13L1 13V11L15.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4L14 4V2L19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H14V20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4ZM10.7071 6.29289L16.4142 12L10.7071 17.7071L9.29289 16.2929L12.5858 13L2 13V11L12.5858 11L9.29289 7.70711L10.7071 6.29289Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 0H10C9.44772 0 9 0.447716 9 1V7.63636V11H1V13H9V17.4545V23C9 23.5523 9.44771 24 10 24L22 24C22.5523 24 23 23.5523 23 23L23 1C23 0.447718 22.5523 0 22 0ZM9 13V11H15.5859L12.293 7.70711L13.7072 6.29289L19.4143 12L13.7072 17.7071L12.293 16.2929L15.5859 13H9Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM14 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H14V22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2L14 2V4ZM16.4142 12L10.7071 6.29289L9.29289 7.70711L12.5858 11L2 11V13L12.5858 13L9.29289 16.2929L10.7071 17.7071L16.4142 12Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2L2 2V22H12V17H14V22C14 23.1046 13.1046 24 12 24H2C0.89543 24 0 23.1046 0 22V2C0 0.895435 0.895428 0 2 0H12C13.1046 0 14 0.895432 14 2V7H12L12 2H2ZM19.5859 11L16.293 7.70711L17.7072 6.29289L23.4143 12L17.7072 17.7071L16.293 16.2929L19.5859 13L6 13V11L19.5859 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4143 12L16.7072 17.7071L15.293 16.2929L18.5859 13L8.00009 13L8.00009 11L18.5859 11L15.293 7.70711L16.7072 6.29289L22.4143 12ZM10.0001 22L5.00009 22C3.34324 22 2.00009 20.6569 2.00009 19L2.00009 5C2.00009 3.34314 3.34324 2 5.00009 2L10.0001 2L10.0001 4L5.00009 4C4.44781 4 4.00009 4.44771 4.00009 5L4.00009 19C4.00009 19.5523 4.44781 20 5.00009 20L10.0001 20L10.0001 22Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 24H1C0.447716 24 0 23.5523 0 23V1C0 0.447717 0.447715 0 1 0H13C13.5523 0 14 0.447715 14 1V6.54545L14 11H6V13L14 13V17.4545V23C14 23.5523 13.5523 24 13 24ZM19.5859 13H14V11H19.5859L16.293 7.70711L17.7072 6.29289L23.4143 12L17.7072 17.7071L16.293 16.2929L19.5859 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM16.7072 17.7071L22.4143 12L16.7072 6.29289L15.293 7.70711L18.5859 11L8.00009 11L8.00009 13L18.5859 13L15.293 16.2929L16.7072 17.7071ZM5.00009 22H10.0001V20H5.00009C4.44781 20 4.00009 19.5523 4.00009 19L4.00009 5C4.00009 4.44771 4.44781 4 5.00009 4L10.0001 4V2H5.00009C3.34324 2 2.00009 3.34314 2.00009 5L2.00009 19C2.00009 20.6569 3.34324 22 5.00009 22Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12L8.42857 3L7 4.5L14.1429 12L7 19.5L8.42857 21L17 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4142 12L9.70711 19.7071L8.29289 18.2929L14.5858 12L8.2929 5.70711L9.70711 4.29289L17.4142 12Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 11.5L8.92857 20.5L6.5 18L13 11.5L6.5 5L8.92857 2.5L17.5 11.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1213 12L10.0606 20.0607L7.93933 17.9393L13.8787 12L7.93933 6.06066L10.0606 3.93934L18.1213 12Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7ZM19 7C19 10.866 15.866 14 12 14C8.13401 14 5 10.866 5 7C5 3.13401 8.13401 0 12 0C15.866 0 19 3.13401 19 7ZM12 17C16.355 17 19.9994 19.992 20.9241 24H23C22.0437 18.8798 17.4825 15 12 15C6.51746 15 1.95628 18.8798 1 24H3.07587C4.00057 19.992 7.64502 17 12 17Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7ZM12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2ZM6 21C6 17.6863 8.68629 15 12 15C15.3137 15 18 17.6863 18 21V22H20V21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21V22H6V21Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 3C23 1.89543 22.1046 1 21 1H16C14.8954 1 14 1.89543 14 3V7L14 7.0082V10.618L17.2361 9H21C22.1046 9 23 8.10457 23 7V3ZM7.5 5C5.01472 5 3 7.01472 3 9.5C3 11.9853 5.01472 14 7.5 14C9.98528 14 12 11.9853 12 9.5C12 7.01472 9.98528 5 7.5 5ZM1 22V21.5C1 17.9101 3.91015 15 7.5 15C11.0899 15 14 17.9101 14 21.5V22H1Z" fill="#262626"/>
+</svg>