Version Packages (#2408 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[aksel.nav.no] 📝 Story for Table i aksel (#2406 )
2026-10-13 01:02:02 +00:00 · 2023-10-20 17:18:00 +02:00 · 2023-10-20 17:02:34 +02:00 · 2023-10-20 16:30:50 +02:00 · 2023-10-20 16:05:38 +02:00 · 2023-10-20 15:54:05 +02:00
87 changed files with 1142 additions and 1071 deletions
@@ -1,5 +1,11 @@
 # @navikt/aksel-icons

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/ds-css": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,26 @@
 # @navikt/aksel

+## 5.7.6
+
+### Patch Changes
+
+- Updated dependencies [[`6d6e6443d`](https://github.com/navikt/aksel/commit/6d6e6443dd00464183b03fad6f822e5f3efab100)]:
+  - @navikt/ds-css@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Updated dependencies [[`3d1b0ac20`](https://github.com/navikt/aksel/commit/3d1b0ac2041bbc289536fa5a0dc65b2170dfc6fa)]:
+  - @navikt/ds-css@5.7.5
+
+## 5.7.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.7.3",
+    "@navikt/ds-css": "5.7.6",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,19 @@
 # @navikt/ds-css

+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+## 5.7.5
+
+### Patch Changes
+
+- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
+
+## 5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -20,7 +20,7 @@
  cursor: pointer;
  align-items: center;
  justify-content: center;
-  gap: var(--a-spacing-1);
+  gap: var(--a-spacing-05);
  margin: 0;
  padding: 0 var(--a-spacing-3);
  text-decoration: none;
@@ -97,6 +97,19 @@
  }
 }

+.navds-chips--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .navds-chips__removable {
  gap: 0;
 }
@@ -31,11 +31,13 @@
 .navds-radio__label::before {
  content: "";
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-small);
  flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: calc(1.5rem - 0.25rem);
+  height: calc(1.5rem - 0.25rem);
+  margin-block: 2px;
+  margin-inline: 2px;
 }

 .navds-radio__label::before {
@@ -64,36 +66,37 @@

 .navds-checkbox--small > .navds-checkbox__label::before,
 .navds-radio--small > .navds-radio__label::before {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: calc(1.25rem - 0.25rem);
+  height: calc(1.25rem - 0.25rem);
 }

 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
  .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
  .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@@ -114,7 +117,7 @@
 }

 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@@ -146,31 +149,33 @@

 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .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 var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -182,13 +187,13 @@
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
  + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@supports not selector(:focus-visible) {
  .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(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  }
 }

@@ -201,14 +206,14 @@
  > .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__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
@@ -216,7 +221,7 @@
    > .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__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -225,7 +230,7 @@
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
@@ -233,7 +238,7 @@
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
@@ -242,7 +247,7 @@
    + .navds-checkbox__label::before,
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
  }

  .navds-checkbox--error
@@ -250,7 +255,7 @@
    + .navds-checkbox__label::before,
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -290,7 +295,7 @@
 .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
 .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -299,8 +304,8 @@
 }

 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -308,12 +313,12 @@
 }

 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
  background-color: var(--a-icon-subtle);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
  background-color: var(--__ac-radio-checkbox-readonly-bg);
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.6",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,35 @@
 # @navikt/ds-react

+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.6
+  - @navikt/aksel-icons@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.5
+  - @navikt/aksel-icons@5.7.5
+
+## 5.7.4
+
+### Patch Changes
+
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.4
+  - @navikt/aksel-icons@5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/aksel-icons": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -6,7 +6,7 @@ export interface ToggleChipsProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: string;
  /**
-   * Toggles aria-pressed and visual-changes
+   * Toggles aria-pressed and visual changes
   */
  selected?: boolean;
  /**
@@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent<
        className={cl(
          "navds-chips__chip navds-chips__toggle",
          className,
-          `navds-chips__toggle--${variant}`
+          `navds-chips__toggle--${variant}`,
+          { "navds-chips__toggle--with-checkmark": checkmark }
        )}
        aria-pressed={selected}
      >
-        {selected && checkmark && (
+        {checkmark && (
          <svg
            aria-hidden
            className="navds-chips__toggle-icon"
-            width="10"
-            height="8"
-            viewBox="0 0 10 8"
+            width="1.25em"
+            height="1.25em"
+            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            focusable={false}
            role="img"
          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
-              fill="currentColor"
-            />
+            {selected ? (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
+                fill="currentColor"
+              />
+            ) : (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
+                fill="var(--a-border-default)"
+              />
+            )}
          </svg>
        )}
        <span className="navds-chips__chip-text">{children}</span>
@@ -60,11 +60,11 @@ Default.argTypes = {
  },
 };

-export const Toggle = () => {
+export const Toggle = ({ size }) => {
  const [selected, setSelected] = useState<number[]>([2, 4]);
  return (
    <div className="colgap">
-      <Chips>
+      <Chips size={size}>
        {options.map((c, y) => (
          <Chips.Toggle
            selected={selected.includes(y)}
@@ -81,7 +81,7 @@ export const Toggle = () => {
          </Chips.Toggle>
        ))}
      </Chips>
-      <Chips>
+      <Chips size={size}>
        {options.map((c, y) => (
          <Chips.Toggle
            variant="neutral"
@@ -102,6 +102,12 @@ export const Toggle = () => {
    </div>
  );
 };
+Toggle.argTypes = {
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};

 export const ToggleNoCheckmark = () => {
  const [selected, setSelected] = useState<number>(2);
@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
+import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { Button, HGrid, VStack } from "../..";
+import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";
-import isSameDay from "date-fns/isSameDay";

 const disabledDays = [
  new Date("Oct 10 2022"),
@@ -432,3 +432,42 @@ export const WeekDayClick = () => {
    </VStack>
  );
 };
+
+export const ModalDemo = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <Modal open header={{ heading: "Modal-demo" }} width="1024px">
+      <Modal.Body style={{ position: "relative" }}>
+        <BodyLong>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi
+          incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque
+          animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae
+          molestias.
+        </BodyLong>
+
+        <HGrid gap="6" columns={{ xs: 1, lg: 2 }}>
+          <HStack justify="center" align="start">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+          <DatePicker {...datepickerProps} dropdownCaption>
+            <DatePicker.Input {...inputProps} label="Velg dato" />
+          </DatePicker>
+          <HStack justify="center">
+            <DatePicker.Standalone
+              fromDate={new Date("Aug 23 2019")}
+              toDate={new Date("Feb 23 2024")}
+            />
+          </HStack>
+        </HGrid>
+      </Modal.Body>
+    </Modal>
+  );
+};
@@ -1,8 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
+import setYear from "date-fns/setYear";
 import React, { useId, useState } from "react";
 import { Button, DateInputProps } from "../..";
 import { useMonthpicker } from "../hooks";
-import MonthPicker, { MonthPickerProps } from "./MonthPicker";
+import MonthPicker from "./MonthPicker";
+import { MonthPickerProps } from "./types";

 export default {
  title: "ds-react/Monthpicker",
@@ -147,3 +149,28 @@ export const UserControlled = () => {
    </div>
  );
 };
+
+export const FollowYear = () => {
+  const { monthpickerProps, inputProps, selectedMonth, setSelected } =
+    useMonthpicker({
+      fromDate: new Date("Aug 23 2019"),
+      toDate: new Date("Aug 23 2025"),
+      onMonthChange: console.log,
+    });
+
+  const customYearChange = (yearDate?: Date) => {
+    monthpickerProps.onYearChange?.(yearDate);
+    if (selectedMonth && yearDate) {
+      setSelected(setYear(selectedMonth, yearDate.getFullYear()));
+    }
+  };
+
+  return (
+    <div className="min-h-96">
+      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
+      </MonthPicker>
+      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
+    </div>
+  );
+};
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, SVGProps } from "react";
 import { omit, useId } from "../util";

-export interface LoaderProps extends SVGProps<SVGSVGElement> {
+export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
  /**
   * Changes Loader width/height
   * 88px | 64px | 40px | 32px | 24px | 20px | 16px
@@ -31,6 +31,12 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   * @default "neutral"
   */
  variant?: "neutral" | "interaction" | "inverted";
+  /**
+   * Allows getting a ref to the component instance.
+   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
+   */
+  ref?: React.Ref<SVGSVGElement>;
 }

 /* Workaround for @types/react v17/v18 feil */
@@ -1,6 +1,6 @@
-import React from "react";
-import { Loader } from "..";
 import { Meta } from "@storybook/react";
+import React from "react";
+import { Loader, LoaderProps } from "..";
 export default {
  title: "ds-react/Loader",
  component: Loader,
@@ -29,7 +29,7 @@ export default {
 } as Meta;

 export const Default = {
-  render: (props: any) => {
+  render: (props: LoaderProps) => {
    return <Loader {...props} />;
  },

@@ -133,6 +133,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
    const arrowRef = useRef<HTMLDivElement | null>(null);
    const isInModal = useContext(ModalContext) !== null;
    const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
+    const chosenFlip = isInModal ? true : _flip;

    const {
      x,
@@ -150,7 +151,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      onOpenChange: () => onClose(),
      middleware: [
        flOffset(offset ?? (arrow ? 16 : 4)),
-        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        chosenFlip &&
+          flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
        shift({ padding: 12 }),
        flArrow({ element: arrowRef, padding: 8 }),
      ],
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
 ## 5.7.3

 ## 5.7.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.3",
+    "@navikt/ds-tokens": "^5.7.6",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
 ## 5.7.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.7.3",
+  "version": "5.7.6",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,12 +1,32 @@
 # Changelog

-## 5.7.3
+## 5.7.6
+
+### @navikt/ds-css
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))

 ### @navikt/ds-react

- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))

- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+## 5.7.5
+
+### @navikt/ds-css
+
+- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
+
+### @navikt/ds-react
+
+- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
+
+## 5.7.4
+
+### @navikt/ds-react
+
+- Datepicker: Fungerer nå bedre i Modal ([#2400](https://github.com/navikt/aksel/pull/2400))
+
+## 5.7.3

 ### @navikt/ds-css

@@ -16,6 +36,12 @@

 - HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))

+### @navikt/ds-react
+
+- Forms: Fikset bug der size='small' ikke oppdaterte typografi. ([#2372](https://github.com/navikt/aksel/pull/2372))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
 ### @navikt/ds-tokens

 - Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
@@ -28,11 +54,11 @@

 ## 5.7.1

-### @navikt/ds-react
+### @navikt/ds-css

 - Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))

-### @navikt/ds-css
+### @navikt/ds-react

 - Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))

@@ -42,13 +68,13 @@

 - Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))

-### @navikt/ds-react
-
- Chores: Ryddet opp i sirkulære depdendencies ([#2366](https://github.com/navikt/aksel/pull/2366))
+### @navikt/ds-css

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

-### @navikt/ds-css
+### @navikt/ds-react
+
+- Chores: Ryddet opp i sirkulære depdendencies ([#2366](https://github.com/navikt/aksel/pull/2366))

 - :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))

@@ -92,6 +118,24 @@

 * Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))

+### @navikt/ds-css
+
+- Primitives: ny komponent Bleed ([#2278](https://github.com/navikt/aksel/pull/2278))
+
+* :recycle: Box: Forenkling av CSS-variabler ([#2279](https://github.com/navikt/aksel/pull/2279))
+
+* Accordion: Har nå 0.25rem padding-top mellom innhold og heading. ([#2310](https://github.com/navikt/aksel/pull/2310))
+
+* Added cursor:pointer to Select component ([#2293](https://github.com/navikt/aksel/pull/2293))
+
+* :bug: Box: sett border-radius riktig ([#2329](https://github.com/navikt/aksel/pull/2329))
+
+* Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`. ([#2286](https://github.com/navikt/aksel/pull/2286))
+
+* Datepicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
+
+* MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
+
 ### @navikt/ds-react

 - :recycle: Refaktorering og småfikser ([#2265](https://github.com/navikt/aksel/pull/2265))
@@ -112,33 +156,15 @@

 * Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover ([#2303](https://github.com/navikt/aksel/pull/2303))

-### @navikt/ds-css
-
- Primitives: ny komponent Bleed ([#2278](https://github.com/navikt/aksel/pull/2278))
-
-* :recycle: Box: Forenkling av CSS-variabler ([#2279](https://github.com/navikt/aksel/pull/2279))
-
-* Accordion: Har nå 0.25rem padding-top mellom innhold og heading. ([#2310](https://github.com/navikt/aksel/pull/2310))
-
-* Added cursor:pointer to Select component ([#2293](https://github.com/navikt/aksel/pull/2293))
-
-* :bug: Box: sett border-radius riktig ([#2329](https://github.com/navikt/aksel/pull/2329))
-
-* Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`. ([#2286](https://github.com/navikt/aksel/pull/2286))
-
-* Datepicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
-
-* MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
-
 ## 5.5.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))

 * Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))

-### @navikt/ds-css
+### @navikt/ds-react

 - Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))

@@ -156,18 +182,18 @@

 ## 5.4.0

-### @navikt/ds-react
-
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
-
-* Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
-
 ### @navikt/ds-css

 - Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))

 * ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))

+### @navikt/ds-react
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+* Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
+
 ### @navikt/ds-tokens

 - Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
@@ -190,26 +216,32 @@

 ## 5.3.3

-### @navikt/ds-react
+### @navikt/ds-css

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

-### @navikt/ds-css
+### @navikt/ds-react

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

 ## 5.3.2

-### @navikt/ds-react
-
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
-
 ### @navikt/ds-css

 - Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))

+### @navikt/ds-react
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
 ## 5.3.1

+### @navikt/ds-css
+
+- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
+
+- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
+
 ### @navikt/ds-react

 - Fix bug in monthpicker, only compare year and month for equality on date object ([#2231](https://github.com/navikt/aksel/pull/2231))
@@ -218,13 +250,11 @@

 - :bug: DatePicker: Riktig skriftstørrelse på small input ([#2232](https://github.com/navikt/aksel/pull/2232))

+## 5.3.0
+
 ### @navikt/ds-css

- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
-
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
-
-## 5.3.0
+- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))

 ### @navikt/ds-react

@@ -236,10 +266,6 @@

 * :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))

-### @navikt/ds-css
-
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
-
 ## 5.2.1

 ### @navikt/ds-css
@@ -252,6 +278,12 @@

 - Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))

+### @navikt/ds-css
+
+- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+
+- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
+
 ### @navikt/ds-react

 - Button: Ved bruk av `as`-prop vil `role="button"` nå bli lagt til. Native `onKeyUp` for `Space` er også implementert slik at standard `button`-interaksjon vil være likere uansett html-tag. ([#2154](https://github.com/navikt/aksel/pull/2154))
@@ -260,13 +292,13 @@

 - Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))

+## 5.1.0
+
 ### @navikt/ds-css

- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))

- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
-
-## 5.1.0
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))

 ### @navikt/ds-react

@@ -276,24 +308,18 @@

 * Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))

-### @navikt/ds-css
-
- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
-
- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
-
 ## 5.0.3

-### @navikt/ds-react
-
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
 ### @navikt/ds-css

 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))

 - Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))

+### @navikt/ds-react
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
 ### @navikt/ds-tokens

 - ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
@@ -314,6 +340,17 @@

 ## 5.0.0

+### @navikt/ds-css
+
+- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
+
+  - :sparkles: Støtte for header og footer
+  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
+
+* Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
+
+* Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
+
 ### @navikt/ds-react

 - Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
@@ -326,17 +363,6 @@

 * Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))

-### @navikt/ds-css
-
- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
-
-  - :sparkles: Støtte for header og footer
-  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
-
-* Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
-
-* Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
-
 ### @navikt/ds-tokens

 - Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
@@ -345,16 +371,26 @@

 ## 4.12.1

-### @navikt/ds-react
-
- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
-
 ### @navikt/ds-css

 - Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))

+### @navikt/ds-react
+
+- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
+
 ## 4.12.0

+### @navikt/ds-css
+
+- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
+
+* List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
+
+* Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
+
+* Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
+
 ### @navikt/ds-react

 - Combobox: La til støtte for feilmeldinger i Combobox ([#2182](https://github.com/navikt/aksel/pull/2182))
@@ -373,16 +409,6 @@

 * Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect ([#2177](https://github.com/navikt/aksel/pull/2177))

-### @navikt/ds-css
-
- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
-
-* List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
-
-* Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
-
-* Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
-
 ## 4.11.2

 ### @navikt/ds-css
@@ -397,14 +423,6 @@

 ## 4.11.0

-### @navikt/ds-react
-
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
-
-* Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
-
-* Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
-
 ### @navikt/ds-css

 - HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
@@ -413,6 +431,14 @@

 * Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))

+### @navikt/ds-react
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+* Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
+
+* Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
+
 ## 4.10.2

 ### @navikt/ds-css
@@ -421,56 +447,56 @@

 ## 4.10.0

-### @navikt/ds-react
-
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
-
 ### @navikt/ds-css

 - Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))

+### @navikt/ds-react
+
+- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
+
 ## 4.9.1

+### @navikt/ds-css
+
+- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
+
 ### @navikt/ds-react

 - Button: Fikset aria-live bug der knapp alltid ble lest opp av skjermleser ved render ([#2143](https://github.com/navikt/aksel/pull/2143))

 - Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))

-### @navikt/ds-css
-
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
-
 ## 4.9.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

-### @navikt/ds-css
+### @navikt/ds-react

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

 ## 4.8.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

-### @navikt/ds-css
+### @navikt/ds-react

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

 ## 4.7.4

-### @navikt/ds-react
-
- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
-
 ### @navikt/ds-css

 - Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))

+### @navikt/ds-react
+
+- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
+
 ## 4.7.3

 ### @navikt/ds-react
@@ -479,11 +505,11 @@

 ## 4.7.2

-### @navikt/ds-react
+### @navikt/ds-css

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

-### @navikt/ds-css
+### @navikt/ds-react

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

@@ -495,6 +521,10 @@

 ## 4.7.0

+### @navikt/ds-css
+
+- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
+
 ### @navikt/ds-react

 - Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
@@ -503,35 +533,27 @@

 * Combobox post-release tweaks ([#2112](https://github.com/navikt/aksel/pull/2112))

-### @navikt/ds-css
-
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
-
 ## 4.6.1

-### @navikt/ds-react
+### @navikt/ds-css

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

-### @navikt/ds-css
+### @navikt/ds-react

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

 ## 4.6.0

-### @navikt/ds-react
-
- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
-
 ### @navikt/ds-css

 - Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))

-## 4.5.0
-
 ### @navikt/ds-react

- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 4.5.0

 ### @navikt/ds-css

@@ -539,6 +561,10 @@

 * - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))

+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ## 4.4.2

 ### @navikt/ds-react
@@ -553,46 +579,46 @@

 ## 4.4.0

+### @navikt/ds-css
+
+- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-react
+
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ### @navikt/ds-tailwind

 - Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

-### @navikt/ds-react
-
- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
-
-### @navikt/ds-css
-
- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
-
-### @navikt/ds-tokens
-
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
-
 ## 4.3.0

-### @navikt/ds-react
-
- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
-
 ### @navikt/ds-css

 - Popover/Helptext: Maksbredde på 100vw - 1.5rem. Treffer ikke lengre kanten på skjermen. ([PR](https://github.com/navikt/aksel/pull/2069))

 * ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))

-## 4.2.0
-
 ### @navikt/ds-react

- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+## 4.2.0

 ### @navikt/ds-css

 - Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))

+### @navikt/ds-react
+
+- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+
 ## 4.1.7

 ### @navikt/ds-react
@@ -645,13 +671,11 @@

 ## 4.1.0

-### @navikt/aksel-stylelint
+### @navikt/ds-css

- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))

-### @navikt/ds-tailwind
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))

 ### @navikt/ds-react

@@ -663,18 +687,20 @@

 * Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))

-### @navikt/ds-css
-
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
-
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ### @navikt/ds-tokens

 - :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+### @navikt/aksel-stylelint
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+
 ## 4.0.0

 ### @navikt/aksel
@@ -683,12 +709,6 @@

 - Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))

-### @navikt/ds-react
-
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
-
- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
-
 ### @navikt/ds-css

 - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -699,6 +719,12 @@

 - Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)

+### @navikt/ds-react
+
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
 ## 3.4.2

 ### @navikt/aksel-stylelint
@@ -713,17 +739,17 @@

 ## 3.4.0

-### @navikt/aksel-stylelint
+### @navikt/ds-css

- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
+- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

 ### @navikt/ds-react

 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

-### @navikt/ds-css
+### @navikt/aksel-stylelint

- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

 ## 3.3.1

@@ -749,18 +775,18 @@

 - Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))

-### @navikt/ds-react
-
- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
-
- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
-
 ### @navikt/ds-css

 - Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))

 - CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))

+### @navikt/ds-react
+
+- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
 ## 3.2.2

 ### @navikt/ds-react
@@ -781,16 +807,16 @@

 ## 3.1.0

-### @navikt/ds-react
-
- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
-
 ### @navikt/ds-css

 - Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))

 * Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))

+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
 ## 3.0.1

 ### @navikt/ds-react
@@ -801,16 +827,16 @@

 ## 3.0.0

+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
 ### @navikt/ds-react

 - Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))

 - Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))

-### @navikt/ds-css
-
- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
-
 ## 2.9.8

 ### @navikt/aksel-icons
@@ -905,14 +931,14 @@

 ## 2.8.7

-### @navikt/ds-react
-
- Fikset typografi-bruk for `Radio` og `Checkbox`.
-
 ### @navikt/ds-css

 - Button: token for tertiary

+### @navikt/ds-react
+
+- Fikset typografi-bruk for `Radio` og `Checkbox`.
+
 ## 2.8.6

 ### @navikt/ds-css
@@ -941,14 +967,14 @@

 ## 2.8.2

-### @navikt/ds-react
-
- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
-
 ### @navikt/ds-css

 - ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

+### @navikt/ds-react
+
+- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
+
 ## 2.8.1

 ### @navikt/ds-react
@@ -1011,14 +1037,14 @@

 ## 2.5.0

-### @navikt/ds-tailwind
-
- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ### @navikt/ds-tokens

 - Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))

+### @navikt/ds-tailwind
+
+- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
+
 ## 2.4.3

 ### @navikt/ds-css
@@ -1027,14 +1053,14 @@

 ## 2.4.2

-### @navikt/ds-react
-
- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
-
 ### @navikt/ds-css

 - List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))

+### @navikt/ds-react
+
+- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
+
 ## 2.4.1

 ### @navikt/ds-react
@@ -1063,18 +1089,18 @@

 ## 2.2.0

-### @navikt/ds-react
-
- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
 ### @navikt/ds-css

 - ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))

 - Button: `Neutral`-variant.

+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
 ### @navikt/ds-tokens

 - Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
@@ -1195,24 +1221,24 @@

 ## 2.0.0

-### @navikt/ds-tailwind
-
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
-### @navikt/ds-react
-
- Fonter blir bruk i all typografi blir nå lastet fra CDN
-
 ### @navikt/ds-css

 - Fontlasting: Fonter lastes nå fra NAV-CDN

 - Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.

+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
 ### @navikt/ds-tokens

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))

+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ## 1.5.10

 ### @navikt/ds-react
@@ -1257,16 +1283,16 @@

 ## 1.5.0

+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
 ### @navikt/ds-react

 - Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))

 - Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))

-### @navikt/ds-css
-
- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
-
 ## 1.4.4

 ### @navikt/ds-react
@@ -1293,6 +1319,10 @@

 ## 1.3.39

+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
 ### @navikt/ds-react

 - useId-bug fikset ved bruk i både react 17 og 18
@@ -1315,10 +1345,6 @@

 - Stepper: `interactive` og `completed`-props for wizard-løsninger

-### @navikt/ds-css
-
- Fikset bruk av `:watch` for diverse parsere (less, parcel)
-
 ## 1.3.24

 ### @navikt/ds-css
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.7.3",
-    "@navikt/ds-css": "^5.7.3",
-    "@navikt/ds-react": "^5.7.3",
-    "@navikt/ds-tailwind": "^5.7.3",
-    "@navikt/ds-tokens": "^5.7.3"
+    "@navikt/aksel-icons": "^5.7.6",
+    "@navikt/ds-css": "^5.7.6",
+    "@navikt/ds-react": "^5.7.6",
+    "@navikt/ds-tailwind": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,3 +1,4 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyLong, Detail, Heading, Link } from "@navikt/ds-react";
 import {
  PortableText,
@@ -27,7 +28,6 @@ import {
  TokenTable,
  UuFeedback,
  Video,
-  logNav,
 } from ".";

 const serializers: Partial<PortableTextReactComponents> = {
@@ -133,11 +133,7 @@ const serializers: Partial<PortableTextReactComponents> = {
          href={href}
          inlineText
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
          {...(href.startsWith("http") &&
          !href.startsWith("https://aksel.nav.no/")
@@ -160,11 +156,7 @@ const serializers: Partial<PortableTextReactComponents> = {
          href={href}
          inlineText
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          {text}
@@ -1,7 +1,7 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyShort, Heading, Link } from "@navikt/ds-react";
 import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
 import Logo from "components/assets/Logo";
-import { logNav } from "components/website-modules/utils/amplitude";
 import dynamic from "next/dynamic";
 /* import FooterForm from "./FooterForm"; */

@@ -119,11 +119,7 @@ function FooterLink({ children, href }) {
        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 underline hover:no-underline focus:bg-blue-200 focus:shadow-blue-200"
        href={href}
        onClick={(e) =>
-          logNav(
-            "footer",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("footer", e.currentTarget.getAttribute("href"))
        }
      >
        {children}
@@ -1,11 +1,11 @@
 import { MenuHamburgerIcon } from "@navikt/aksel-icons";

+import { amplitudeLogNavigation } from "@/logging";
 import { Modal } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { logNav } from "../..";

 const LinkElement = ({ name, href, onClick }) => {
  const { asPath } = useRouter();
@@ -23,9 +23,8 @@ const LinkElement = ({ name, href, onClick }) => {
          }
        )}
        onClick={(e) => {
-          logNav(
+          amplitudeLogNavigation(
            "header",
-            window.location.pathname,
            e.currentTarget.getAttribute("href")
          );
          onClick();
@@ -1,12 +1,12 @@
+import { amplitudeLogNavigation } from "@/logging";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Logo from "components/assets/Logo";
 import { Hamburger } from "components/layout/header/Hamburger";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { logNav } from "../..";
-import { Button } from "@navikt/ds-react";
-import dynamic from "next/dynamic";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";

 export const GlobalSearch = dynamic(() => import("./search"), {
  loading: () => (
@@ -46,11 +46,7 @@ const LinkElement = ({ name, href, prefetch = undefined }) => {
          }
        )}
        onClick={(e) =>
-          logNav(
-            "header",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("header", e.currentTarget.getAttribute("href"))
        }
      >
        {name}
@@ -87,9 +83,8 @@ export const Header = ({
              href="/"
              passHref
              onClick={(e) =>
-                logNav(
+                amplitudeLogNavigation(
                  "header",
-                  window.location.pathname,
                  e.currentTarget.getAttribute("href")
                )
              }
@@ -1,10 +1,10 @@
+import { amplitude, AmplitudeEvents } from "@/logging";
 import { allArticleDocuments } from "@/sanity/config";
 import { SearchResultsT } from "@/types";
+import { debounce } from "@navikt/ds-react";
 import { useMemo, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import { createSearchResult, formatResults, fuseSearch } from "../utils";
-import { debounce } from "@navikt/ds-react";
-import { logSearch } from "@/utils";

 export const useSearch = () => {
  const [fuseResults, setFuseResults] = useState<SearchResultsT>(null);
@@ -35,7 +35,7 @@ export const useSearch = () => {
          ...createSearchResult(formatedResults, rawResults),
          query: value,
        });
-        logSearch({
+        amplitude.track(AmplitudeEvents.søk, {
          type: "standard",
          searchedFromUrl: window.location.pathname,
          query: value,
@@ -1,4 +1,4 @@
-import { logSearch } from "@/utils";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { createContext, useCallback, useContext } from "react";
 import { useSearch } from "../hooks";
 import { SearchContext } from "./SearchProvider";
@@ -32,7 +32,7 @@ export const SearchLoggingProvider = ({
        accuracy: (100 - index / context?.results?.totalHits).toFixed(0),
        topResult: index <= context?.results?.topResults?.length,
      };
-      logSearch(data);
+      amplitude.track(AmplitudeEvents.søk, data);
    },
    [
      query,
@@ -1,5 +1,5 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselSidebarT } from "@/types";
-import { logNav } from "@/utils";
 import {
  ChevronDownIcon,
  SparklesIcon,
@@ -26,11 +26,7 @@ const NavItem = ({
      <Link
        href={`/${link.slug}`}
        onClick={(e) => {
-          logNav(
-            "meny",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          );
+          amplitudeLogNavigation("meny", e.currentTarget.getAttribute("href"));
        }}
        className={cl(
          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium pr-05 relative flex overflow-hidden py-1 pl-4 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none focus-visible:z-10 focus-visible:rounded-sm",
@@ -1,10 +1,10 @@
-import { Heading } from "@navikt/ds-react";
-import Nextlink from "next/link";
-import cl from "clsx";
-import Image from "next/legacy/image";
-import { StatusTag } from "components/website-modules/StatusTag";
-import { ArticleListT } from "@/types";
 import { urlFor } from "@/sanity/interface";
+import { ArticleListT } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
+import { StatusTag } from "components/website-modules/StatusTag";
+import Image from "next/legacy/image";
+import Nextlink from "next/link";

 const ComponentOverview = ({ node }: { node: ArticleListT }) => {
  if (!node || node.length === 0) {
@@ -26,6 +26,16 @@ const ComponentOverview = ({ node }: { node: ArticleListT }) => {
      } else if (b?.status?.tag === "deprecated") {
        return -1;
      }
+
+      if (a.sidebarindex !== null || b.sidebarindex !== null) {
+        if (a.sidebarindex !== null && b.sidebarindex !== null) {
+          return a.sidebarindex - b.sidebarindex;
+        } else if (a.sidebarindex !== null) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
      return a?.heading?.localeCompare(b?.heading);
    });

@@ -0,0 +1,39 @@
+import { AkselTheme, getKey } from "@/sb-util";
+import type { Meta, StoryObj } from "@storybook/react";
+import Tabell from "./Tabell";
+
+const meta = {
+  title: "Sanity-modules/Tabell",
+  component: Tabell,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const args = {
+  node: {
+    rows: [
+      {
+        _key: getKey(),
+        cells: ["Tablehead 1", "Tablehead 2", "Tablehead 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+    ],
+  },
+};
+export const Aksel: Story = {
+  args,
+  decorators: [AkselTheme],
+};
+
+export const Designsystem: Story = {
+  args,
+};
@@ -1,5 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";

+import { amplitudeLogNavigation } from "@/logging";
 import {
  AkselGodPraksisDocT,
  ResolveContributorsSingleT,
@@ -9,7 +10,7 @@ import {
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { abbrName, logNav } from "../..";
+import { abbrName } from "../..";

 const ArtikkelCard = ({
  slug,
@@ -42,9 +43,8 @@ const ArtikkelCard = ({
        passHref
        className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
        onClick={(e) =>
-          logNav(
+          amplitudeLogNavigation(
            "artikkel-kort",
-            window.location.pathname,
            e.currentTarget.getAttribute("href")
          )
        }
@@ -1,9 +1,10 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { getAuthors } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { getAuthors, logNav } from "@/utils";

 const BloggCard = ({
  blog,
@@ -21,9 +22,8 @@ const BloggCard = ({
          <Link
            className="text-deepblue-500 underline hover:no-underline"
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "blogg-card",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
-import { logNav } from "@/utils";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import Image from "next/legacy/image";
@@ -33,11 +33,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
        href={`/god-praksis/${node.slug.current}`}
        passHref
        onClick={(e) =>
-          logNav(
-            "card",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("card", e.currentTarget.getAttribute("href"))
        }
        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:no-underline"
      >
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
-import { logNav } from "@/utils";
 import Image from "next/legacy/image";
 import NextLink from "next/link";

@@ -26,11 +26,7 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
        href={`/god-praksis/${node.slug.current}`}
        passHref
        onClick={(e) =>
-          logNav(
-            "card",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("card", e.currentTarget.getAttribute("href"))
        }
        className="navds-heading--small navds-link text-deepblue-700 navds-heading flex-wrap break-all no-underline hover:underline focus:outline-none"
      >
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { InnholdsKortPrinsipperT } from "@/types";
-import { logNav } from "@/utils";
 import { Heading } from "@navikt/ds-react";
 import NextLink from "next/link";

@@ -23,9 +23,9 @@ const InnholdsKort = ({ node }: { node: InnholdsKortPrinsipperT }) => {
          href={`/${node?.lenke}`}
          passHref
          onClick={(e) =>
-            logNav(
+            amplitudeLogNavigation(
              "prinsipp-kort",
-              window.location.pathname,
+
              e.currentTarget.getAttribute("href")
            )
          }
@@ -1,5 +1,5 @@
-import { logNav } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { RelatertInnholdT } from "@/types";
 import { NewspaperIcon } from "@navikt/aksel-icons";
 import { Heading, Link } from "@navikt/ds-react";
@@ -31,9 +31,8 @@ const RelatertInnhold = ({ node }: { node: RelatertInnholdT }) => {
              as={NextLink}
              href={getHref(x)}
              onClick={(e) =>
-                logNav(
+                amplitudeLogNavigation(
                  "relatert-innhold",
-                  window.location.pathname,
                  e.currentTarget.getAttribute("href")
                )
              }
@@ -1,9 +1,9 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { abbrName } from "@/utils";
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import cl from "clsx";
-import { logNav } from "components/website-modules/utils/amplitude";
 import { getImage } from "components/website-modules/utils/get-image";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextImage from "next/legacy/image";
@@ -112,9 +112,8 @@ const Card = ({
            passHref
            className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "forside-masonary",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,5 +1,6 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
-import { getAuthors, logNav } from "@/utils";
+import { getAuthors } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
@@ -79,9 +80,8 @@ export const Highlight = ({
          <Link
            as={NextLink}
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "artikkel-kort",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,8 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
+import cl from "clsx";
 import Link from "next/link";
 import React from "react";
-import cl from "clsx";
-import { logNav } from "@/utils";

 const AkselLink = ({
  href,
@@ -26,11 +26,7 @@ const AkselLink = ({
          !inverted,
      })}
      onClick={(e) =>
-        logNav(
-          "link",
-          window.location.pathname,
-          e.currentTarget.getAttribute("href")
-        )
+        amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
      }
    >
      {children}
@@ -1,6 +1,6 @@
-import { logNav } from "components/website-modules/utils/amplitude";
-import Link from "next/link";
+import { amplitudeLogNavigation } from "@/logging";
 import cl from "clsx";
+import Link from "next/link";

 export const IntroCards = ({
  links,
@@ -31,9 +31,8 @@ export const IntroCards = ({
            )}
            prefetch={false}
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "intro-kort",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,9 +1,10 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { FeedbackT, HelpfulArticleEnum } from "@/types";
 import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
 import cl from "clsx";
 import { useRouter } from "next/router";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { AmplitudeEvents, IdContext, logAmplitudeEvent } from "../utils";
+import { IdContext } from "../utils";
 import styles from "./feedback.module.css";

 const Feedback = ({
@@ -55,7 +56,7 @@ const Feedback = ({
    (completed: boolean) => {
      !hasLoggedFeedback &&
        activeState &&
-        logAmplitudeEvent(AmplitudeEvents.feedbackinteraksjon, {
+        amplitude.track(AmplitudeEvents.feedbackinteraksjon, {
          fra: asPath,
          vamd: activeState,
          completed,
@@ -1,12 +1,9 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import * as Icons from "@navikt/aksel-icons";
 import meta from "@navikt/aksel-icons/metadata";
 import { Button, Heading } from "@navikt/ds-react";
 import Snippet from "components/sanity-modules/code/Snippet";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
-import {
-  AmplitudeEvents,
-  logAmplitudeEvent,
-} from "components/website-modules/utils/amplitude";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -52,7 +49,7 @@ export const IconSidebar = ({
  }, [name]);

  const logDownload = (icon, format) => {
-    logAmplitudeEvent(AmplitudeEvents.ikonnedlastning, {
+    amplitude.track(AmplitudeEvents.ikonnedlastning, {
      icon,
      format,
    });
@@ -1,7 +1,6 @@
-import { AmplitudeEvents, logAmplitudeEvent, logNav } from "@/utils";
+import { AmplitudeEvents, amplitude, amplitudeLogNavigation } from "@/logging";
 import { BrailleIcon, DownloadIcon, PackageIcon } from "@navikt/aksel-icons";
 import { Link as DsLink } from "@navikt/ds-react";
-
 import { FigmaIcon, GithubIcon } from "components/assets";
 import NextLink from "next/link";

@@ -23,11 +22,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <FigmaIcon className="ml-1" /> <span className="">Figma</span>
@@ -41,7 +36,7 @@ export const TitleLinks = () => (
        href="https://cdn.nav.no/aksel/icons/zip/aksel-icons.zip"
        download="Ikonpakke"
        onClick={() => {
-          logAmplitudeEvent(AmplitudeEvents.ikonnedlastning, {
+          amplitude.track(AmplitudeEvents.ikonnedlastning, {
            icon: "Ikonpakke",
            format: "zip",
          });
@@ -60,11 +55,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <PackageIcon className="text-2xl" aria-hidden /> Installer med NPM
@@ -81,11 +72,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <GithubIcon className="ml-[3px] h-[18px] w-[18px]" />{" "}
@@ -103,11 +90,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <BrailleIcon aria-hidden className="text-2xl" />{" "}
@@ -1,158 +0,0 @@
-import { SearchLogT } from "@/types";
-import getConfig from "next/config";
-import { Router } from "next/router";
-import { useCallback, useEffect } from "react";
-import { track, init } from "@amplitude/analytics-browser";
-const { publicRuntimeConfig } = getConfig();
-
-export enum AmplitudeEvents {
-  "sidevisning" = "sidevisning",
-  "navigasjon" = "navigasjon",
-  "notfound" = "notfound",
-  "error" = "error",
-  "ikonklikk" = "ikonklikk",
-  "ikonsok" = "ikonsok",
-  "fargeklikk" = "fargeklikk",
-  "ikonnedlastning" = "ikonnedlastning",
-  "feedbackinteraksjon" = "feedbackinteraksjon",
-  "scroll" = "scroll",
-  "søk" = "søk",
-}
-
-export const initAmplitude = () => {
-  if (!(typeof window === "undefined")) {
-    init("1a9a84a5e557ac9635a250bc27d75030", undefined, {
-      useBatch: true,
-      serverUrl: "https://amplitude.nav.no/collect",
-      defaultTracking: {
-        attribution: false,
-      },
-      ingestionMetadata: { sourceName: window.location.toString() },
-    });
-  }
-};
-
-export const logSearch = (data: SearchLogT) => {
-  logAmplitudeEvent(AmplitudeEvents.søk, {
-    ...data,
-  });
-};
-
-const logPageView = (s: string, data: any = {}, firstLoad?: boolean) => {
-  logAmplitudeEvent(AmplitudeEvents.sidevisning, {
-    side: s,
-    firstLoad: !!firstLoad,
-    ...data,
-  });
-};
-
-export const logNav = (kilde: string, fra: string, til: string) => {
-  logAmplitudeEvent(AmplitudeEvents.navigasjon, {
-    kilde,
-    fra,
-    til,
-  });
-};
-
-const isPreview = () => !!document.getElementById("exit-preview-id");
-const isProdUrl = () => window.location.host === "aksel.nav.no";
-
-const isDevelopment = process.env.NODE_ENV === "development";
-const isTest = publicRuntimeConfig?.NEXT_PUBLIC_TEST !== undefined;
-
-const isProduction = () => {
-  return !(isDevelopment || isTest || isPreview()) && isProdUrl();
-};
-
-export function logAmplitudeEvent(eventName: string, data?: any): Promise<any> {
-  return new Promise(function (resolve: any) {
-    const eventData = data ? { ...data } : {};
-    if (isProduction()) {
-      track(eventName, eventData, resolve);
-    }
-  });
-}
-
-export const usePageView = (router: Router, pageProps: any) => {
-  const logView = useCallback(
-    (e, first = false) => {
-      const data = {};
-      try {
-        if (pageProps?.page && pageProps.page?._type === "aksel_artikkel") {
-          const tema = pageProps.page.tema.map((x) => x?.slug?.current) ?? null;
-          if (tema && tema.length > 0) {
-            data["tema"] = tema;
-          }
-        }
-      } catch (error) {
-        isDevelopment && console.error(error);
-      }
-      /* first-prop might be an object */
-      logPageView(
-        e,
-        {
-          ...data,
-          ...(pageProps?.title && pageProps?.title.length > 0
-            ? { sidetittel: pageProps.title }
-            : {}),
-        },
-        first === true
-      );
-    },
-    [pageProps]
-  );
-
-  const logScroll = useCallback((highestPercent: number) => {
-    highestPercent > 100 && (highestPercent = 100);
-    if (
-      document === undefined ||
-      window?.location?.pathname?.startsWith?.("/eksempler")
-    ) {
-      return;
-    }
-
-    if (isNaN(highestPercent)) {
-      return;
-    }
-
-    logAmplitudeEvent(AmplitudeEvents.scroll, {
-      side: window.location.pathname,
-      prosent: highestPercent,
-    });
-  }, []);
-
-  useEffect(() => {
-    let highestPercent = 0;
-    let timeoutId = null;
-    const footer = document.querySelector("#aksel-footer") as HTMLElement;
-
-    //get highest scroll percent
-    function scrollListener() {
-      timeoutId = setTimeout(() => {
-        const currentPercent = Math.round(
-          (window.scrollY /
-            (document.body.scrollHeight -
-              window.innerHeight -
-              (footer ? footer.offsetHeight : 0))) *
-            100
-        );
-        if (currentPercent > highestPercent) {
-          highestPercent = currentPercent;
-          clearTimeout(timeoutId);
-        }
-      }, 500);
-    }
-
-    window.addEventListener("scroll", scrollListener);
-
-    router.events.on("routeChangeComplete", logView);
-    router.events.on("routeChangeStart", logScroll);
-    window.onload = () => logView(window.location.pathname, true);
-
-    return () => {
-      router.events.off("routeChangeComplete", logView);
-      router.events.off("routeChangeStart", logScroll);
-      window.removeEventListener("scroll", scrollListener);
-    };
-  }, [router.events, logView, logScroll]);
-};
@@ -1,10 +1,9 @@
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";

-export * from "./util";
-export * from "./amplitude";
-export * from "./hooks";
 export * from "./contexts";
 export * from "./date-string";
+export * from "./hooks";
+export * from "./util";

 export const isNew = (date: string) => {
  const date1 = new Date(date);
@@ -0,0 +1,14 @@
+import { AmplitudeEvents } from "./events";
+import { amplitude } from "./useAmplitude";
+
+/**
+ * Preset for logging navigation-events
+ * @param src Component/Elements to keep track of
+ * @param to Destination URL
+ */
+export const amplitudeLogNavigation = (src: string, to: string) =>
+  amplitude.track(AmplitudeEvents.navigasjon, {
+    src,
+    to,
+    from: window.location.pathname,
+  });
@@ -0,0 +1,9 @@
+export enum AmplitudeEvents {
+  "navigasjon" = "navigasjon",
+  "notfound" = "notfound",
+  "error" = "error",
+  "ikonnedlastning" = "ikonnedlastning",
+  "feedbackinteraksjon" = "feedbackinteraksjon",
+  "søk" = "søk",
+  "link" = "link",
+}
@@ -0,0 +1,3 @@
+export { amplitudeLogNavigation } from "./event-tracking";
+export { AmplitudeEvents } from "./events";
+export { amplitude } from "./useAmplitude";
@@ -0,0 +1,95 @@
+import type { Types } from "@amplitude/analytics-browser";
+
+import { useEffect } from "react";
+
+const batchedEvents = [];
+
+export let amplitude: Partial<Pick<Types.BrowserClient, "init" | "track">> = {
+  track: (...eventsData) => {
+    batchedEvents.push(eventsData);
+    return {
+      promise: new Promise<Types.Result>((resolve) =>
+        resolve({
+          event: { event_type: "MockEvent" },
+          code: 200,
+          message: "Success: pre-batched amplitude-tracking",
+        })
+      ),
+    };
+  },
+};
+
+const AMPLITUDE_PUBLIC_API_KEY = "1a9a84a5e557ac9635a250bc27d75030";
+
+/**
+ * https://www.docs.developers.amplitude.com/data/sdks/browser-2/#tracking-default-events
+ * https://javascript.plainenglish.io/how-to-implement-amplitude-in-next-js-a-3-step-guide-6803c44ca862
+ */
+const useAmplitudeInit = () => {
+  useEffect(() => {
+    const isProdUrl = () => window.location.host === "aksel.nav.no";
+    const isExample = () => window.location.pathname.includes("eksempler/");
+    const isPreview = () => !!document.getElementById("exit-preview-id");
+
+    const initAmplitude = async () => {
+      if (isExample()) {
+        return;
+      } else if (!isProdUrl()) {
+        mockAmplitude();
+        return;
+      }
+
+      amplitude = await import("@amplitude/analytics-browser");
+      amplitude
+        .init(AMPLITUDE_PUBLIC_API_KEY, undefined, {
+          useBatch: true,
+          serverUrl: "https://amplitude.nav.no/collect",
+          defaultTracking: {
+            pageViews: {
+              trackHistoryChanges: "pathOnly",
+              trackOn: () => {
+                return !isPreview();
+              },
+            },
+          },
+        })
+        .promise.then(() =>
+          batchedEvents
+            .splice(0, batchedEvents.length)
+            .forEach(([event, eventData]) => amplitude.track(event, eventData))
+        )
+        .catch(async () => {
+          const { logger } = await import("logger");
+          logger.error("Failed logging batched events");
+        });
+    };
+    initAmplitude();
+  }, []);
+};
+
+/**
+ * Allows logging events to console in dev
+ */
+function mockAmplitude() {
+  amplitude = {
+    track: (
+      eventInput: Types.BaseEvent | string,
+      eventProperties?: Record<string, any>
+    ) => {
+      console.group("Mocked amplitude-event");
+      console.table({ eventInput, ...eventProperties });
+      console.groupEnd();
+      return {
+        promise: new Promise<Types.Result>((resolve) =>
+          resolve({
+            event: { event_type: "MockEvent" },
+            code: 200,
+            message: "Success: mocked amplitude-tracking",
+          })
+        ),
+      };
+    },
+  };
+}
+
+export default useAmplitudeInit;
@@ -1,19 +1,5 @@
 import { useEffect } from "react";

-const environment = process.env.NODE_ENV;
-
-export const isProduction = (): boolean => {
-  if (typeof window !== "undefined") {
-    const url =
-      window && window.location && window.location.href
-        ? window.location.href
-        : "";
-    return environment === "production" && /aksel.nav.no/.test(url);
-  } else {
-    return false;
-  }
-};
-
 // https://stackoverflow.com/questions/38588346/anchor-a-tags-not-working-in-chrome-when-using/38588927#38588927
 // https://github.com/vercel/next.js/discussions/13134
 export function useScrollToHashOnPageLoad(): void {
@@ -13,7 +13,7 @@ const ContentSecurityPolicy = `
  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data: ${cdnUrl} ${hotjarUrl};
  script-src 'self' ${cdnUrl} ${hotjarUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
  style-src 'self' ${cdnUrl} ${hotjarUrl} 'unsafe-inline';
-  connect-src 'self' ${cdnUrl} ${hotjarUrl} https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://in2.taskanalytics.com/03346;
+  connect-src 'self' ${cdnUrl} ${hotjarUrl} https://*.hotjar.io wss://*.hotjar.com https://raw.githubusercontent.com/navikt/ https://hnbe3yhs.apicdn.sanity.io wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://in2.taskanalytics.com/03346;
  frame-ancestors 'self' localhost:3000;
  media-src 'self' ${cdnUrl} cdn.sanity.io;
  frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.ekstern.dev.nav.no;
@@ -11,10 +11,10 @@
    "start": "cd .next/standalone/aksel.nav.no/website && PORT=3000 HOSTNAME=0.0.0.0 node server.js",
    "cp:assets": "cross-env cp -R public .next/standalone/aksel.nav.no/website/ && cross-env cp -R .next/static .next/standalone/aksel.nav.no/website/.next/static",
    "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
-    "e2e": "yarn build && NEXT_PUBLIC_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && NEXT_PUBLIC_TEST=true FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci": "NEXT_PUBLIC_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && NEXT_PUBLIC_TEST=true FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:ci": " yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
    "update:tokens": "ts-node --project tsconfig.tsnode.json ./scripts/update-tokens",
    "update:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/examples/update-sanity",
@@ -42,9 +42,9 @@
    "date-fns": "2.29.3",
    "fuse.js": "^6.6.2",
    "lodash": "^4.17.21",
-    "next": "^13.5.0",
-    "next-logger": "^3.0.2",
-    "next-sanity": "^5.5.8",
+    "next": "^13.2.1",
+    "next-logger": "3.0.2",
+    "next-sanity": "5.5.8",
    "pino": "^8.14.1",
    "prism-react-renderer": "^2.0.0",
    "react": "^18.0.0",
@@ -63,8 +63,8 @@
  "devDependencies": {
    "@axe-core/playwright": "^4.5.2",
    "@babel/core": "^7.19.0",
-    "@next/bundle-analyzer": "^13.5.0",
-    "@next/eslint-plugin-next": "^12.2.0",
+    "@next/bundle-analyzer": "^13.2.1",
+    "@next/eslint-plugin-next": "^13.2.1",
    "@playwright/test": "1.35.1",
    "@sanity/block-tools": "^3.18.0",
    "@sanity/schema": "^3.18.0",
@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { AmplitudeEvents, logAmplitudeEvent } from "@/components";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { BodyLong, Heading, Link } from "@navikt/ds-react";
-import NextLink from "next/link";
 import { AkselCubeStatic } from "components/website-modules/cube";
+import NextLink from "next/link";
+import { useEffect } from "react";

 function Page() {
  useEffect(() => {
-    logAmplitudeEvent(AmplitudeEvents.notfound, {
+    amplitude.track(AmplitudeEvents.notfound, {
      side: window.location.pathname,
    });
  }, []);
@@ -1,11 +1,11 @@
-import { AmplitudeEvents, logAmplitudeEvent } from "@/components";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { BodyLong, Heading } from "@navikt/ds-react";
 import { AkselCubeStatic } from "components/website-modules/cube";
 import { useEffect } from "react";

 function Page() {
  useEffect(() => {
-    logAmplitudeEvent(AmplitudeEvents.error, {
+    amplitude.track(AmplitudeEvents.error, {
      side: window.location.pathname,
    });
  }, []);
@@ -1,8 +1,5 @@
 import { BaseSEO } from "components/website-modules/seo/BaseSEO";
-import {
-  initAmplitude,
-  usePageView,
-} from "components/website-modules/utils/amplitude";
+import useAmplitudeInit from "components/website-modules/utils/logging/useAmplitude";
 import { useScrollToHashOnPageLoad } from "components/website-modules/utils/util";
 import { AppProps } from "next/app";
 import { useEffect } from "react";
@@ -10,11 +7,9 @@ import { hotjar } from "react-hotjar";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
 import "../styles/index.css";

-initAmplitude();
-
 function App({ Component, pageProps, router }: AppProps) {
  useScrollToHashOnPageLoad();
-  usePageView(router, pageProps);
+  useAmplitudeInit();

  useEffect(() => {
    window.location.host === "design.nav.no" &&
@@ -1,7 +1,7 @@
 // This is imported to allow the Output File Tracing feature of Next.js to work correctly with the log patcher
 import "next-logger";

-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";

 export default function Document() {
  return (
@@ -15,12 +15,6 @@ export default function Document() {
          type="font/woff2"
          crossOrigin="anonymous"
        />
-        <link
-          rel="preload"
-          href="/searchindex.json"
-          as="fetch"
-          crossOrigin="anonymous"
-        />
      </Head>
      <body data-theme="light" className="aksel antialiased">
        <Main />
@@ -1,35 +1,27 @@
-import { DatePicker, useDatepicker, Button, Modal } from "@navikt/ds-react";
+import { DatePicker, Modal } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
-import { useRef } from "react";
 import format from "date-fns/format";
 import nbLocale from "date-fns/locale/nb";
+import { useState } from "react";

 const Example = () => {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  const { datepickerProps, inputProps, selectedDay } = useDatepicker({
-    fromDate: new Date("Aug 23 2019"),
-    onDateChange: console.log,
-  });
+  const [date, setDate] = useState(null);

  return (
-    <>
-      <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
-
-      <Modal ref={ref} header={{ heading: "Heading" }}>
-        <Modal.Body>
-          <div className="min-h-96 min-w-96 max-w-full">
-            <DatePicker {...datepickerProps}>
-              <DatePicker.Input {...inputProps} label="Velg dato" />
-            </DatePicker>
-            <div className="pt-4">
-              {selectedDay &&
-                format(selectedDay, "dd.MM.yyyy", { locale: nbLocale })}
-            </div>
+    <Modal open header={{ heading: "Heading" }}>
+      <Modal.Body>
+        <div className="min-h-96 min-w-96 max-w-full">
+          <DatePicker.Standalone
+            onSelect={setDate}
+            fromDate={new Date("Aug 23 2019")}
+            fixedWeeks
+          />
+          <div className="pt-4">
+            {date && format(date, "dd.MM.yyyy", { locale: nbLocale })}
          </div>
-        </Modal.Body>
-      </Modal>
-    </>
+        </div>
+      </Modal.Body>
+    </Modal>
  );
 };

@@ -23,5 +23,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 3,
 };
@@ -26,5 +26,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 1,
 };
@@ -0,0 +1,22 @@
+import { Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import NextLink from "next/link";
+
+const Example = () => {
+  return (
+    <Link href="#" as={NextLink}>
+      Lenke til ny side
+    </Link>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+};
@@ -21,5 +21,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 4,
 };
@@ -25,5 +25,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -0,0 +1,22 @@
+import { LinkPanel } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import NextLink from "next/link";
+
+const Example = () => {
+  return (
+    <LinkPanel href="#" border as={NextLink}>
+      <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
+    </LinkPanel>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};
@@ -1,51 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <VStack gap="2">
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginInline="10 0" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">Med asChild</HStack>
        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginInline="0 10" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginBlock="10 0" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="5">
-          <Box background="surface-alt-2-subtle" padding="5">
-            <Bleed marginBlock="0 10" asChild>
-              <Box padding="3" background="surface-success-subtle">
-                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -56,5 +33,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 4,
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };
@@ -1,92 +0,0 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <>
-      <VStack gap="2">
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginInline={{ xs: "10 0", md: "20 0" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginInline={{ xs: "0 10", md: "0 20" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
-          <Box
-            background="surface-alt-2-subtle"
-            padding={{ xs: "5", md: "10" }}
-          >
-            <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
-              <Box
-                padding={{ xs: "3", md: "7" }}
-                background="surface-success-subtle"
-              >
-                <BodyLong>
-                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
-                </BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
-  );
-};
-
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 0,
-};
@@ -1,49 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <VStack gap="2">
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginInline="10 0">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">marginInline</HStack>
        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginInline="0 10">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginBlock="10 0">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-      <Box background="surface-alt-1-subtle" padding="5">
-        <Box background="surface-alt-2-subtle" padding="5">
-          <Bleed marginBlock="0 10">
-            <Box padding="3" className="p" background="surface-success-subtle">
-              <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
-            </Box>
-          </Bleed>
-        </Box>
-      </Box>
-    </VStack>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -0,0 +1,60 @@
+import { Bleed, Box, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <DemoWrapper>
+        <Bleed marginInline="10 0" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginInline start</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginInline="0 10" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginInline end</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginBlock="10 0" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginBlock start</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+      <DemoWrapper>
+        <Bleed marginBlock="0 10" asChild>
+          <Box padding="3" className="p" background="surface-alt-3-subtle">
+            <HStack justify="center">marginBlock end</HStack>
+          </Box>
+        </Bleed>
+      </DemoWrapper>
+    </VStack>
+  );
+};
+
+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};
@@ -1,42 +1,28 @@
-import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
+import { Bleed, Box, HStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <VStack gap="2" align="center">
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="full">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;full&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
+    <DemoWrapper>
+      <Bleed marginInline="full" asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">Full</HStack>
        </Box>
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="full 0">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-        <Box background="surface-alt-1-subtle" padding="10">
-          <Box background="surface-alt-2-subtle" padding="10">
-            <Bleed marginInline="0 full">
-              <Box background="surface-success-subtle">
-                <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
-              </Box>
-            </Bleed>
-          </Box>
-        </Box>
-      </VStack>
-    </>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -47,5 +33,6 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 3,
+  desc: "Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout",
 };
@@ -0,0 +1,49 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Bleed, Box, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="6" align="start">
+      <HStack gap="2" align="center">
+        Med
+        <Box
+          paddingBlock="1"
+          paddingInline="2"
+          background="surface-alt-3-subtle"
+          borderRadius="full"
+        >
+          <Bleed marginBlock="px 0" asChild>
+            <MagnifyingGlassIcon aria-hidden fontSize="1.25rem" />
+          </Bleed>
+        </Box>
+      </HStack>
+
+      <HStack gap="2" align="center">
+        Uten
+        <Box
+          paddingBlock="1"
+          paddingInline="2"
+          background="surface-alt-3-subtle"
+          borderRadius="full"
+        >
+          <MagnifyingGlassIcon aria-hidden fontSize="1.25rem" />
+        </Box>
+      </HStack>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+  desc: "Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.",
+};
@@ -1,54 +0,0 @@
-import { Bleed, Box, HStack } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
-
-const Example = () => {
-  return (
-    <>
-      <style>
-        {`
-        .circle {
-          width: 24px;
-          height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .scale {
-          transform: scale(5);
-        }
-        `}
-      </style>
-      <Box padding="32">
-        <HStack className="" gap="32">
-          <Box
-            className="circle scale"
-            background="surface-success-subtle"
-            borderRadius="full"
-          >
-            L
-          </Box>
-          <Box
-            className="circle scale"
-            background="surface-success-subtle"
-            borderRadius="full"
-          >
-            <Bleed marginInline="0 px">L</Bleed>
-          </Box>
-        </HStack>
-      </Box>
-    </>
-  );
-};
-
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
-
-/* Storybook story */
-export const Demo = {
-  render: Example,
-};
-
-export const args = {
-  index: 0,
-};
@@ -1,109 +1,33 @@
-import { Bleed, BodyLong, Box, HStack, VStack } from "@navikt/ds-react";
+import { Bleed, Box, VStack } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
-    <>
-      <style>
-        {`
-      .navds-bleed {
-        background-color: var(--a-surface-success-subtle);
-        width: fit-content;
-      }
-      `}
-      </style>
-      <HStack gap="3">
-        <VStack gap="2">
-          <p>CSS string</p>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed asChild>
-                <BodyLong>before Bleed</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0" asChild>
-                <BodyLong>without reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box background="surface-alt-1-subtle" padding="5">
-            <Box background="surface-alt-2-subtle" padding="5">
-              <Bleed marginInline="10 0" reflectivePadding asChild>
-                <BodyLong>with reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-        </VStack>
-
-        <VStack gap="2">
-          <p>breakpoints</p>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed asChild>
-                <BodyLong>before Bleed</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed
-                marginInline={{
-                  xs: "4 0",
-                  sm: "8 0",
-                  md: "12 0",
-                  lg: "16 0",
-                  xl: "20 0",
-                }}
-                asChild
-              >
-                <BodyLong>without reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-          <Box
-            background="surface-alt-1-subtle"
-            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-          >
-            <Box
-              background="surface-alt-2-subtle"
-              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
-            >
-              <Bleed
-                marginInline={{
-                  xs: "4 0",
-                  sm: "8 0",
-                  md: "12 0",
-                  lg: "16 0",
-                  xl: "20 0",
-                }}
-                reflectivePadding
-                asChild
-              >
-                <BodyLong>with reflectivePadding</BodyLong>
-              </Bleed>
-            </Box>
-          </Box>
-        </VStack>
-      </HStack>
-    </>
+    <DemoWrapper>
+      <Bleed marginInline="10" asChild reflectivePadding>
+        <Box className="p" background="surface-alt-3-subtle">
+          reflectivePadding lar innhold forbli der det ville vært uten Bleed
+        </Box>
+      </Bleed>
+      <Bleed marginInline="10" asChild>
+        <Box className="p" background="surface-alt-3-subtle">
+          Uten reflectivePadding
+        </Box>
+      </Bleed>
+    </DemoWrapper>
  );
 };

+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box background="surface-alt-3" padding="5" borderRadius="large">
+      <Box background="surface-subtle" padding="5" borderRadius="medium">
+        <VStack gap="4">{children}</VStack>
+      </Box>
+    </Box>
+  );
+}
+
 export default withDsExample(Example, {
  showBreakpoints: true,
 });
@@ -114,5 +38,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -0,0 +1,45 @@
+import { Bleed, BodyLong, Box, HStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <DemoWrapper>
+      <Bleed marginInline={{ xs: "8", md: "12", lg: "16" }} asChild>
+        <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <HStack justify="center">
+            <BodyLong>xs: 8, md: 12, lg: 16</BodyLong>
+          </HStack>
+        </Box>
+      </Bleed>
+    </DemoWrapper>
+  );
+};
+
+function DemoWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Box
+      background="surface-alt-3"
+      paddingBlock="4"
+      paddingInline={{ xs: "4", md: "8", lg: "12" }}
+      borderRadius="large"
+    >
+      <Box background="surface-subtle" padding="4" borderRadius="medium">
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.",
+};
@@ -1,6 +1,6 @@
-import { Hide, HGrid } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { HGrid, Hide } from "@navikt/ds-react";
 import cl from "clsx";
+import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,7 +22,7 @@ export const Demo = {

 export const args = {
  index: 0,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Hide + child-komponent skal fungere må child kunne ta inn 'className' som prop.",
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Hide + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };

 const Placeholder = ({
@@ -1,6 +1,6 @@
-import { Show, HGrid } from "@navikt/ds-react";
-import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { HGrid, Show } from "@navikt/ds-react";
 import cl from "clsx";
+import { withDsExample } from "components/website-modules/examples/withDsExample";

 const Example = () => {
  return (
@@ -22,7 +22,7 @@ export const Demo = {

 export const args = {
  index: 0,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Show + child-komponent skal fungere må child kunne ta inn 'className' som prop.",
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Show + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
 };

 const Placeholder = ({
@@ -14,7 +14,6 @@ import Footer from "components/layout/footer/Footer";
 import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { SEO } from "components/website-modules/seo/SEO";
-import { logger } from "logger";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -27,7 +26,7 @@ type PageProps = NextPageT<{

 export const query = `{${sidebarQuery}, ${landingPageQuery(
  "grunnleggende"
-)}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
+)}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori,"sidebarindex": sidebarindex}}`;

 export const getStaticProps: GetStaticProps = async ({
  preview = false,
@@ -36,11 +35,6 @@ export const getStaticProps: GetStaticProps = async ({
    type: "ds_artikkel",
  });

-  logger.info(
-    { sidebar: !!sidebar, page: !!page, links: !!links },
-    "getStaticProps in /grunnleggende"
-  );
-
  return {
    props: {
      page,
@@ -3,9 +3,9 @@ import {
  dateStr,
  FigmaIcon,
  GithubIcon,
-  logAmplitudeEvent,
  YarnIcon,
 } from "@/components";
+import { amplitude, AmplitudeEvents } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity/client.server";
 import { getDocumentsTmp } from "@/sanity/interface";
@@ -27,9 +27,9 @@ import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
 import { SEO } from "components/website-modules/seo/SEO";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
+import { GetStaticPaths, GetStaticProps } from "next/types";
 import { lazy, Suspense } from "react";
 import NotFotfund from "../404";
-import { GetStaticPaths, GetStaticProps } from "next/types";

 const kodepakker = {
  "ds-react": {
@@ -186,7 +186,7 @@ const Page = ({
            href={pack.git}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "github",
              })
@@ -200,7 +200,7 @@ const Page = ({
            href={`https://yarnpkg.com/package/${pack.title}`}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "yarn",
              })
@@ -219,7 +219,7 @@ const Page = ({
          href={page.figma_link}
          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
          onClick={() =>
-            logAmplitudeEvent("link", {
+            amplitude.track(AmplitudeEvents.link, {
              kilde: "intro-lenker komponenter",
              til: "figma",
            })
@@ -236,7 +236,7 @@ const Page = ({
            href={pack.changelog}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "endringslogg",
              })
@@ -303,7 +303,7 @@ const Page = ({
          />
        )}
        <IntroSeksjon node={page?.intro} internal={internal} />
-        {page?.status?.tag === "ready" && (
+        {page?.status?.tag === "ready" && !page?.hide_feedback && (
          <SuggestionBlock
            variant="komponent"
            reference={`<${page?.heading} />`}
@@ -1,3 +1,4 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity/client.server";
 import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
@@ -7,7 +8,6 @@ import {
  ArticleListT,
  NextPageT,
 } from "@/types";
-import { logAmplitudeEvent } from "@/utils";
 import { CodeIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
@@ -24,7 +24,6 @@ import { Header } from "components/layout/header/Header";
 import ComponentOverview from "components/sanity-modules/ComponentOverview";
 import { IntroCards } from "components/website-modules/IntroCards";
 import { SEO } from "components/website-modules/seo/SEO";
-import { logger } from "logger";
 import { GetStaticProps } from "next/types";
 import { Suspense, lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
@@ -37,7 +36,7 @@ type PageProps = NextPageT<{

 export const query = `{${sidebarQuery}, ${landingPageQuery(
  "komponenter"
-)}, "links": *[_type == "komponent_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
+)}, "links": *[_type == "komponent_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori, "sidebarindex": sidebarindex}}`;

 export const getStaticProps: GetStaticProps = async ({
  preview = false,
@@ -48,11 +47,6 @@ export const getStaticProps: GetStaticProps = async ({
    type: "komponent_artikkel",
  });

-  logger.info(
-    { sidebar: !!sidebar, page: !!page, links: !!links },
-    "getStaticProps in /komponenter"
-  );
-
  return {
    props: {
      page,
@@ -164,7 +158,7 @@ function Links() {
        href="https://github.com/navikt/aksel/tree/main/%40navikt"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "github",
          })
@@ -178,7 +172,7 @@ function Links() {
        href="https://yarnpkg.com/package/@navikt/ds-react"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "yarn",
          })
@@ -193,7 +187,7 @@ function Links() {
        href="/grunnleggende/kode/endringslogg"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker komponenter",
            til: "endringslogg",
          })
@@ -209,7 +203,7 @@ function Links() {
        href="https://www.figma.com/@nav_aksel"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "figma",
          })
@@ -223,7 +217,7 @@ function Links() {
        href="/storybook"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted group flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "storybook",
          })
@@ -1,10 +1,11 @@
 import { defineField, defineType } from "sanity";
 import { komponentKategorier } from "../../../config";
+import { devsOnly } from "../../../util";
 import { artikkelPreview } from "../presets/artikkel-preview";
-import { oppdateringsvarsel } from "../presets/oppdateringsvarsel";
 import { editorField } from "../presets/editors";
 import { groups } from "../presets/groups";
 import { hiddenFields } from "../presets/hidden-fields";
+import { oppdateringsvarsel } from "../presets/oppdateringsvarsel";
 import { SEOFields } from "../presets/seo";
 import { kategoriSlug } from "../presets/slug";
 import { titleField } from "../presets/title-field";
@@ -92,6 +93,14 @@ export const KomponentArtikkel = defineType({
      type: "number",
      group: "settings",
    }),
+    defineField({
+      title: "Ikke vis 'Send innspill'-modul på siden",
+      name: "hide_feedback",
+      type: "boolean",
+      initialValue: false,
+      group: "settings",
+      hidden: devsOnly,
+    }),
    defineField({
      name: "intro",
      type: "intro_komponent",
@@ -1,3 +1,8 @@
+export const devsOnly = ({ currentUser }) =>
+  !currentUser.roles.find(({ name }) =>
+    ["developer", "administrator"].includes(name)
+  );
+
 export const getTemplates = (restTemplates: any[] = []) => {
  const templates = {
    profil: [
@@ -29,7 +29,8 @@
      "@/sanity/config": ["sanity/config.ts"],
      "@/sanity/client.server": ["sanity/interface/client.server.js"],
      "@/sanity/interface": ["sanity/interface/interface.ts"],
-      "@/sanity/queries": ["sanity/interface/queries.js"]
+      "@/sanity/queries": ["sanity/interface/queries.js"],
+      "@/logging": ["components/website-modules/utils/logging/index.ts"]
    }
  },
  "ts-node": {
@@ -15,7 +15,8 @@
      "@/sanity/config": ["sanity/config.ts"],
      "@/sanity/client.server": ["sanity/interface/client.server.js"],
      "@/sanity/interface": ["sanity/interface/interface.ts"],
-      "@/sanity/queries": ["sanity/interface/queries.js"]
+      "@/sanity/queries": ["sanity/interface/queries.js"],
+      "@/logging": ["components/website-modules/utils/logging/index.ts"]
    }
  }
 }
@@ -109,6 +109,7 @@ export interface AkselKomponentDocT
    brukes_til: string[];
    brukes_ikke_til?: string[];
  };
+  hide_feedback?: boolean;
  content: any[];
  kodepakker?: string[];
  figma_link?: string;
@@ -155,6 +156,7 @@ export type ArticleListT = Array<{
    unsafe?: boolean;
    bilde?: any;
  };
+  sidebarindex?: number;
 }>;

 export type LandingPageTypeT<T extends string> = `${T}_landingsside`;
@@ -3415,7 +3415,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^5.7.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.7.5, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3442,8 +3442,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-css": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    "@types/jest": ^29.0.0
    concurrently: 7.2.1
    copyfiles: 2.4.1
@@ -3461,7 +3461,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 5.7.2
+    "@navikt/ds-css": 5.7.5
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3485,11 +3485,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@5.7.2, @navikt/ds-css@^5.7.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.7.5, @navikt/ds-css@^5.7.5, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-tokens": ^5.7.5
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3502,13 +3502,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@^5.7.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.7.5, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/aksel-icons": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3542,11 +3542,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^5.7.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.7.5, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/ds-tokens": ^5.7.5
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3557,7 +3557,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^5.7.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.7.5, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -3584,7 +3584,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@next/bundle-analyzer@npm:^13.5.0":
+"@next/bundle-analyzer@npm:^13.2.1":
  version: 13.5.5
  resolution: "@next/bundle-analyzer@npm:13.5.5"
  dependencies:
@@ -3600,12 +3600,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@next/eslint-plugin-next@npm:^12.2.0":
-  version: 12.3.4
-  resolution: "@next/eslint-plugin-next@npm:12.3.4"
+"@next/eslint-plugin-next@npm:^13.2.1":
+  version: 13.5.5
+  resolution: "@next/eslint-plugin-next@npm:13.5.5"
  dependencies:
    glob: 7.1.7
-  checksum: e4ae97062f3efe8f70904cf0da296ab501a2924423273352d01b18d8ffff1eb2e9a65c47dd6f9cfa0d696eada272486a3f519b2786918d0a9ab735b93f5ce4b3
+  checksum: 760747343864e9edfefbed686dba2b06319a62c327f5357c44b8f66f558f4a6696712e5ce88166cc6f637b2ed5cae3b7f8261f53c074776c778308912979db88
  languageName: node
  linkType: hard

@@ -8410,11 +8410,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^5.7.2
-    "@navikt/ds-css": ^5.7.2
-    "@navikt/ds-react": ^5.7.2
-    "@navikt/ds-tailwind": ^5.7.2
-    "@navikt/ds-tokens": ^5.7.2
+    "@navikt/aksel-icons": ^5.7.5
+    "@navikt/ds-css": ^5.7.5
+    "@navikt/ds-react": ^5.7.5
+    "@navikt/ds-tailwind": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -18902,7 +18902,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next-logger@npm:^3.0.2":
+"next-logger@npm:3.0.2":
  version: 3.0.2
  resolution: "next-logger@npm:3.0.2"
  dependencies:
@@ -18914,7 +18914,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next-sanity@npm:^5.5.8":
+"next-sanity@npm:5.5.8":
  version: 5.5.8
  resolution: "next-sanity@npm:5.5.8"
  dependencies:
@@ -18935,7 +18935,7 @@ __metadata:
  languageName: node
  linkType: hard

-"next@npm:^13.5.0":
+"next@npm:^13.2.1":
  version: 13.5.5
  resolution: "next@npm:13.5.5"
  dependencies:
@@ -26473,8 +26473,8 @@ __metadata:
    "@amplitude/analytics-browser": ^2.2.3
    "@axe-core/playwright": ^4.5.2
    "@babel/core": ^7.19.0
-    "@next/bundle-analyzer": ^13.5.0
-    "@next/eslint-plugin-next": ^12.2.0
+    "@next/bundle-analyzer": ^13.2.1
+    "@next/eslint-plugin-next": ^13.2.1
    "@playwright/test": 1.35.1
    "@portabletext/react": ^3.0.7
    "@sanity/block-tools": ^3.18.0
@@ -26504,9 +26504,9 @@ __metadata:
    jsdom: ^22.1.0
    json5: 2.2.1
    lodash: ^4.17.21
-    next: ^13.5.0
-    next-logger: ^3.0.2
-    next-sanity: ^5.5.8
+    next: ^13.2.1
+    next-logger: 3.0.2
+    next-sanity: 5.5.8
    pino: ^8.14.1
    pino-pretty: ^10.0.0
    postcss: ^8.4.31
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	0ddb589138	Version Packages (#2408 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-20 17:18:00 +02:00
Ken	1440c99b96	[aksel.nav.no] 📝 Story for Table i aksel (#2406 ) * 📝 Story for Table i aksel * ♻️ Trukket args ut	2023-10-20 17:02:34 +02:00
Ken	f8cf39c906	[aksel.nav.no] Lagt til muligheten til å ikke ha "Send innspill" modul på komponent-artikler (#2407 ) * 🎨 Oversikt blir nå sortert basert på index * 🎨 Kan nå skjule send innspill modul	2023-10-20 16:30:50 +02:00
Ken	158c032436	[aksel.nav.no] Refactor av amplitude-logging (#2396 ) * ♻️ Refaktorert logging * ♻️ Refaktorert logging * 🔥 No need to lazyload hotjar * 🐛 Sjekker nå produrl riktig * ♻️ Bedre import/export av logging * ✨ Batching evets logged pre-init * ♻️ Cleanup av amplitude bruk	2023-10-20 16:05:38 +02:00
Halvor Haugan	6d6e6443dd	💄 Chips.Toggle: Ikon i uvalgt tilstand (#2395 )	2023-10-20 15:54:05 +02:00
Ken	e12ea8694e	✨ Monthpicker eksempel og bug (#2404 )	2023-10-20 12:44:28 +02:00
github-actions[bot]andgithub-actions[bot]	2d4cb67643	Version Packages (#2403 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-20 10:52:13 +02:00
Ken	f5533766c8	📝 Oppdatert link og linkpanel med nextjs eksempler	2023-10-20 10:28:24 +02:00
Ken	3d1b0ac204	🎨 Forms-border har nå outside shadow for background-bleed (#2388 )	2023-10-20 09:21:42 +02:00
Ken	a1678d3b19	🐛 Loader hadde legacyRef som ref-prop (#2391 ) * 🐛 Loader hadde legacyRef som ref-prop * Update .changeset/heavy-shoes-pay.md	2023-10-20 09:17:39 +02:00
github-actions[bot]andgithub-actions[bot]	7007d3c58e	Version Packages (#2401 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-19 19:56:13 +02:00
Ken	8524346044	🐛 Modal + Popover fix (#2400 ) * 🧪 SB-demo * 🐛 Datepicker-popover vises ikke ritkig i Modal * 📝 Modal + datepicker demo	2023-10-19 19:52:06 +02:00
Ken	d5d8898659	🐛 Riktig CSP for hotjar	2023-10-19 18:28:24 +02:00
Ken	1d635e1dbd	⬇️ reverted til gammel nextjs-versjon (#2393 )	2023-10-18 15:57:07 +02:00
Ken	6b3932b172	[aksel.nav.no] 📝 Oppdatert eksempler for Bleed og show/hide (#2385 ) * 📝 Oppdatert eksempler for Bleed og show/hide * ♻️ Refactor wrapper rundt bleed-eksempler	2023-10-18 12:50:12 +02:00
Ken	4d6ae1ae42	[aksel.nav.no] 🐛 Fikset next error ved redeploy av app (#2387 ) * 🐛 Fikset next error ved redeploy av app * 🎨 synket next-versjoner	2023-10-18 11:11:52 +02:00