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 17:22: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
265 changed files with 5238 additions and 5721 deletions
@@ -20,7 +20,7 @@
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": ["shadow-dom", "aksel.nav.no", "aksel-icons-figma-plugin"],
+  "ignore": ["aksel.nav.no", "aksel-icons-figma-plugin"],

  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always"
@@ -31,6 +31,7 @@ module.exports = {
    "react/prop-types": "off",
    "react/display-name": "off",
    "import/no-named-as-default": "off",
+    // "import/no-cycle": [1],
  },
  reportUnusedDisableDirectives: true,
  overrides: [
@@ -38,6 +39,7 @@ module.exports = {
      files: ["**/*.ts?(x)"],
      extends: ["plugin:@typescript-eslint/recommended"],
      rules: {
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
        "@typescript-eslint/no-explicit-any": "off", // Temporary
      },
    },
@@ -1,5 +1,25 @@
 # @navikt/aksel-icons

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
+## 5.7.1
+
+## 5.7.0
+
+### Minor Changes
+
+- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
+
+## 5.6.5
+
 ## 5.6.4

 ## 5.6.3
@@ -25,7 +25,7 @@
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^3.1.0",
-    "postcss": "^8.4.0",
+    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
    "typescript": "^5.1.6",
    "vite": "^4.2.0",
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM16.0303 16.0303C15.7374 16.3232 15.2626 16.3232 14.9697 16.0303L11.4697 12.5303C11.1768 12.2374 11.1768 11.7626 11.4697 11.4697L14.9697 7.96967C15.2626 7.67678 15.7374 7.67678 16.0303 7.96967C16.3232 8.26256 16.3232 8.73744 16.0303 9.03033L13.0607 12L16.0303 14.9697C16.3232 15.2626 16.3232 15.7374 16.0303 16.0303ZM9.75 8.5C9.75 8.08579 9.41421 7.75 9 7.75C8.58579 7.75 8.25 8.08579 8.25 8.5V15.5C8.25 15.9142 8.58579 16.25 9 16.25C9.41421 16.25 9.75 15.9142 9.75 15.5V8.5Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,11 @@
+name: ChevronLeftFirstCircle
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - første
+variant: Stroke
+updated_at: 11.10.2023
+created_at: 11.10.2023
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12ZM16.2803 16.2803C15.9874 16.5732 15.5126 16.5732 15.2197 16.2803L11.428 12.4887C11.1351 12.1958 11.1351 11.7209 11.428 11.428L15.2197 7.63634C15.5126 7.34344 15.9874 7.34344 16.2803 7.63634C16.5732 7.92923 16.5732 8.4041 16.2803 8.697L13.019 11.9583L16.2803 15.2197C16.5732 15.5126 16.5732 15.9874 16.2803 16.2803ZM9.75 8.25C9.75 7.83579 9.41421 7.5 9 7.5C8.58579 7.5 8.25 7.83579 8.25 8.25V15.8333C8.25 16.2475 8.58579 16.5833 9 16.5833C9.41421 16.5833 9.75 16.2475 9.75 15.8333V8.25Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,11 @@
+name: ChevronLeftFirstCircleFill
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - første
+variant: Fill
+updated_at: 11.10.2023
+created_at: 11.10.2023
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM7.96967 7.96967C8.26256 7.67678 8.73744 7.67678 9.03033 7.96967L12.5303 11.4697C12.8232 11.7626 12.8232 12.2374 12.5303 12.5303L9.03033 16.0303C8.73744 16.3232 8.26256 16.3232 7.96967 16.0303C7.67678 15.7374 7.67678 15.2626 7.96967 14.9697L10.9393 12L7.96967 9.03033C7.67678 8.73744 7.67678 8.26256 7.96967 7.96967ZM15.75 8.55C15.75 8.13579 15.4142 7.8 15 7.8C14.5858 7.8 14.25 8.13579 14.25 8.55V15.55C14.25 15.9642 14.5858 16.3 15 16.3C15.4142 16.3 15.75 15.9642 15.75 15.55V8.55Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,11 @@
+name: ChevronRightLastCircle
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+  - siste
+variant: Stroke
+updated_at: 11.10.2023
+created_at: 11.10.2023
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12ZM7.71967 7.71967C8.01256 7.42678 8.48744 7.42678 8.78033 7.71967L12.572 11.5113C12.8649 11.8042 12.8649 12.2791 12.572 12.572L8.78033 16.3637C8.48744 16.6566 8.01256 16.6566 7.71967 16.3637C7.42678 16.0708 7.42678 15.5959 7.71967 15.303L10.981 12.0417L7.71967 8.78033C7.42678 8.48744 7.42678 8.01256 7.71967 7.71967ZM15.75 8.25C15.75 7.83579 15.4142 7.5 15 7.5C14.5858 7.5 14.25 7.83579 14.25 8.25V15.8333C14.25 16.2475 14.5858 16.5833 15 16.5833C15.4142 16.5833 15.75 16.2475 15.75 15.8333V8.25Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,11 @@
+name: ChevronRightLastCircleFill
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+  - siste
+variant: Fill
+updated_at: 11.10.2023
+created_at: 11.10.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.6.4",
+  "version": "5.7.6",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,21 @@
 # @navikt/aksel-stylelint

+## 5.7.6
+
+## 5.7.5
+
+## 5.7.4
+
+## 5.7.3
+
+## 5.7.2
+
+## 5.7.1
+
+## 5.7.0
+
+## 5.6.5
+
 ## 5.6.4

 ## 5.6.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.6.4",
+  "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.6.4",
-    "@navikt/ds-tokens": "^5.6.4",
+    "@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,7 +1,7 @@
-import stylelint from "stylelint";
-import valueParser from "postcss-value-parser";
 import { readFileSync } from "node:fs";
 import { Node as PostCSSNode } from "postcss";
+import valueParser from "postcss-value-parser";
+import stylelint from "stylelint";

 import { isCustomProperty, tokenExists } from "../../utils";

@@ -34,7 +34,6 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 });

 const checkDeclValue = (
-  controlledPrefixes: string[],
  value: string,
  postcssResult: stylelint.PostcssResult,
  rootNode: PostCSSNode
@@ -58,7 +57,6 @@ const checkDeclValue = (
 };

 const checkDeclProp = (
-  controlledPrefixes: string[],
  prop: string,
  postcssResult: stylelint.PostcssResult,
  rootNode: PostCSSNode
@@ -81,8 +79,8 @@ const checkDeclProp = (
 const ruleFunction: stylelint.Rule = () => {
  return (postcssRoot, postcssResult) => {
    postcssRoot.walkDecls((node) => {
-      checkDeclValue(controlledPrefixes, node.value, postcssResult, node);
-      checkDeclProp(controlledPrefixes, node.prop, postcssResult, node);
+      checkDeclValue(node.value, postcssResult, node);
+      checkDeclProp(node.prop, postcssResult, node);
    });
  };
 };
@@ -92,16 +92,6 @@ const tokenJsonFile = "./tokens.json";

 const allowedTokenNames = [];

-export const addTokens = (
-  tokenJSONFile: string,
-  allowedTokenNames: string[]
-) => {
-  const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`);
-  const fileString = jsonFileBuffer.toString();
-  const flattened = flattenObject(JSON.parse(fileString));
-  flattened.forEach((token) => allowedTokenNames.push(token));
-};
-
 export const tokenExists = (
  controlledPrefixes: string[],
  inputToken: string
@@ -110,7 +100,6 @@ export const tokenExists = (
  if (!allowedTokenNames.length) {
    const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`);
    const cssFileString = cssFileBuffer.toString();
-
    valueParser(cssFileString).walk((node) => {
      if (
        node.type === "word" &&
@@ -121,7 +110,9 @@ export const tokenExists = (
      }
    });

-    addTokens(tokenJsonFile, allowedTokenNames);
+    const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJsonFile}`);
+    const flattened = flattenObject(JSON.parse(jsonFileBuffer.toString()));
+    flattened.forEach((token) => allowedTokenNames.push(token));
  }

  return allowedTokenNames.includes(inputToken);
@@ -1,5 +1,61 @@
 # @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
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96), [`d8a4097c8`](https://github.com/navikt/aksel/commit/d8a4097c82ceee95bd216b36e1dc8eb99e75d7ee), [`a6b673386`](https://github.com/navikt/aksel/commit/a6b67338612b7944dc4e6b3d541244f521e94500)]:
+  - @navikt/ds-css@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`cb8c7cabe`](https://github.com/navikt/aksel/commit/cb8c7cabeec6ddcf08c06debd7ca889888b1f5e6)]:
+  - @navikt/ds-css@5.7.1
+
+## 5.7.0
+
+### Patch Changes
+
+- Updated dependencies [[`70c5affbd`](https://github.com/navikt/aksel/commit/70c5affbd3bfb245e905043e7d3ae1c97eeef5e3)]:
+  - @navikt/ds-css@5.7.0
+
+## 5.6.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.6.5
+
 ## 5.6.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.6.4",
+  "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.6.4",
+    "@navikt/ds-css": "5.7.6",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -111,9 +111,9 @@ export function getMigrationNames() {
 export function getMigrationString() {
  let str = "";

-  Object.entries(migrations).forEach(([version, migrations]) => {
+  Object.entries(migrations).forEach(([version, vMigrations]) => {
    str += `\n${chalk.underline(version)}\n`;
-    migrations.forEach((migration) => {
+    vMigrations.forEach((migration) => {
      str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
    });
  });
@@ -13,10 +13,10 @@ export default function transformer(file, api) {
  function addMigrationTag(node) {
    const attributes = node.openingElement.attributes;
    const isMigrated = attributes.find(
-      (node) =>
-        node.type === "JSXAttribute" &&
-        node.name.name === "data-version" &&
-        node.value.value === "v1"
+      (attr) =>
+        attr.type === "JSXAttribute" &&
+        attr.name.name === "data-version" &&
+        attr.value.value === "v1"
    );

    if (!isMigrated) {
@@ -30,7 +30,7 @@ export default function transformer(file, api) {
  function addExplicitStandardProp(node) {
    const attributes = node.openingElement.attributes;
    const variant = attributes.find(
-      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
    );

    if (!variant) {
@@ -1,12 +1,12 @@
 import type { JSCodeshift } from "jscodeshift";
+import { tokens } from "../../../tokens-map.mjs";
 import {
  getImportSpecifier,
  getImportSpecifierName,
  renameImportSpecifier,
 } from "../../../utils/imports";
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
 import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";

 /**
 * @param {import('jscodeshift').FileInfo} file
@@ -29,9 +29,9 @@ export default function transformer(file: JSCodeshift, api) {
    return src;
  }

-  tokens.forEach((x) => {
-    const name = translateToken(x[0], "js");
-    const out = translateToken(x[1], "js");
+  tokens.forEach((token) => {
+    const name = translateToken(token[0], "js");
+    const out = translateToken(token[1], "js");

    let foundName: string = "";

@@ -1,5 +1,45 @@
 # @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
+
+- Ny spacing token på 0.375rem ([#2370](https://github.com/navikt/aksel/pull/2370))
+
+- Select: Tokenstøtte for å endre chevronfarge sammen med tekst ([#2383](https://github.com/navikt/aksel/pull/2383))
+
+- HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px ([#2376](https://github.com/navikt/aksel/pull/2376))
+
+## 5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
+## 5.7.0
+
+### Patch Changes
+
+- :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
+
+## 5.6.5
+
 ## 5.6.4

 ## 5.6.3
@@ -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;
 }
@@ -160,11 +173,11 @@
 }

 .navds-chips--icon-left {
-  padding-left: 0.375rem;
+  padding-left: var(--a-spacing-1-alt);
 }

 .navds-chips--icon-right {
-  padding-right: 0.375rem;
+  padding-right: var(--a-spacing-1-alt);
 }

 .navds-chips--small .navds-chips--icon-right {
@@ -15,7 +15,7 @@
 }

 .navds-copybutton {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);

  cursor: pointer;
  margin: 0;
@@ -28,18 +28,30 @@
  place-content: center;
 }

+.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
+}
+
 .navds-copybutton--small {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);

  min-height: 2rem;
 }

+.navds-copybutton--small.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
+}
+
 .navds-copybutton--xsmall {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);

  min-height: 1.5rem;
 }

+.navds-copybutton--xsmall.navds-copybutton--icon-right {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
+}
+
 .navds-copybutton--icon-only {
  --__ac-copybutton-padding: var(--a-spacing-3);
 }
@@ -73,6 +85,28 @@
  margin: 0;
 }

+.navds-copybutton--active .navds-copybutton__icon {
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes akselCopyButtonIconAnimation {
+  8% {
+    transform: translateY(0);
+  }
+
+  17% {
+    transform: translateY(-10%);
+  }
+
+  25% {
+    transform: translateY(2%);
+  }
+
+  30% {
+    transform: translateY(0);
+  }
+}
+
 :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
  margin: -0.125rem;
 }
@@ -140,6 +174,10 @@
  gap: var(--a-spacing-2);
 }

+.navds-copybutton--small > .navds-copybutton__content {
+  gap: var(--a-spacing-1-alt);
+}
+
 .navds-copybutton--xsmall > .navds-copybutton__content {
  gap: var(--a-spacing-1);
 }
@@ -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 {
@@ -59,41 +61,42 @@

 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 0.375rem 0;
+  padding: var(--a-spacing-1-alt) 0;
 }

 .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));
 }

@@ -101,7 +104,7 @@
  content: "";
  position: absolute;
  top: 50%;
-  transform: translate(0.375rem, -50%);
+  transform: translate(var(--a-spacing-1-alt), -50%);
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
  width: 0.75rem;
  height: 0.25rem;
@@ -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));
 }

@@ -126,7 +129,7 @@
  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
  position: absolute;
  height: 1.5rem;
-  transform: translate(0.375rem);
+  transform: translate(var(--a-spacing-1-alt));
  pointer-events: none;
 }

@@ -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);
  }
 }

@@ -287,12 +292,10 @@
 .navds-checkbox--readonly
  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
  + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked):not(:indeterminate) + .navds-radio__label::before,
-.navds-radio--readonly
-  > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
-  + .navds-radio__label::before {
+.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,
@@ -301,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 {
@@ -310,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);
 }

@@ -43,6 +43,7 @@
  right: var(--a-spacing-2);
  pointer-events: none;
  align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
 }

 .navds-form-field--small .navds-select__input {
@@ -51,7 +52,7 @@
 }

 .navds-form-field--small .navds-select__chevron {
-  right: 0.375rem;
+  right: var(--a-spacing-1-alt);
 }

 /**
@@ -62,7 +62,7 @@
 }

 .navds-form-field--small .navds-textarea__input {
-  padding: 0.375rem;
+  padding: var(--a-spacing-1-alt);
 }

 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -1,6 +1,5 @@
 .navds-help-text__button {
  margin: 0;
-  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
@@ -9,17 +8,19 @@
  justify-content: center;
  align-items: center;
  color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
 }

 .navds-help-text__button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-help-text__button:focus {
    outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
  }
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.6.4",
+  "version": "5.7.6",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,13 +27,13 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.6.4",
+    "@navikt/ds-tokens": "^5.7.6",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
    "nodemon": "^3.0.1",
    "normalize.css": "^8.0.1",
-    "postcss": "^8.4.0",
+    "postcss": "^8.4.31",
    "postcss-cli": "^9.0.0",
    "postcss-combine-duplicated-selectors": "10.0.3",
    "postcss-import": "^14.1.0"
@@ -52,8 +52,7 @@
 }

 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline: var(--a-spacing-1-alt);
 }

 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
@@ -37,7 +37,7 @@
 }

 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
  width: 2rem;
 }

@@ -93,7 +93,7 @@

 .navds-tabs__tab--small {
  min-height: 2rem;
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
 }

 .navds-tabs__tab-icon--top,
@@ -11,7 +11,7 @@

 .navds-tag--small {
  min-height: 1.5rem;
-  padding: 0 0.375rem;
+  padding: 0 var(--a-spacing-1-alt);
 }

 .navds-tag--xsmall {
@@ -1,5 +1,89 @@
 # @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
+
+- 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))
+
+- Updated dependencies [[`3d3e90760`](https://github.com/navikt/aksel/commit/3d3e9076088c5e72ed89fb97109b75dcf6e09d96)]:
+  - @navikt/ds-tokens@5.7.3
+  - @navikt/aksel-icons@5.7.3
+
+## 5.7.2
+
+### Patch Changes
+
+- MonthPicker: Fikset tastaturnavigasjon ([#2374](https://github.com/navikt/aksel/pull/2374))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.2
+  - @navikt/aksel-icons@5.7.2
+
+## 5.7.1
+
+### Patch Changes
+
+- Radio: readonly håndterer nå hover-state bedre ([#2363](https://github.com/navikt/aksel/pull/2363))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.1
+  - @navikt/aksel-icons@5.7.1
+
+## 5.7.0
+
+### Patch Changes
+
+- 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))
+
+- Updated dependencies [[`99fca2a56`](https://github.com/navikt/aksel/commit/99fca2a566e7464506f5d64ca1c8f11834cb63ef)]:
+  - @navikt/aksel-icons@5.7.0
+  - @navikt/ds-tokens@5.7.0
+
+## 5.6.5
+
+### Patch Changes
+
+- Datepicker: Popover legger seg nå ikke ovenfor input ([#2349](https://github.com/navikt/aksel/pull/2349))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.6.5
+  - @navikt/aksel-icons@5.6.5
+
 ## 5.6.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.6.4",
+  "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.6.4",
-    "@navikt/ds-tokens": "^5.6.4",
+    "@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",
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography/BodyLong";
+import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";

 export interface AccordionContentProps
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "../typography/Heading";
+import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
@@ -7,7 +7,7 @@ import {
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "../typography/BodyLong";
+import { BodyLong } from "../typography";
 import { Button } from "../button";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1,7 +1,13 @@
-import React, { useRef, useState, forwardRef, useMemo } from "react";
 import cl from "clsx";
-import { OverridableComponent, Loader, mergeRefs, Label } from "../";
-import { omit, useClientLayoutEffect } from "../util";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { Loader } from "../loader";
+import { Label } from "../typography";
+import {
+  mergeRefs,
+  OverridableComponent,
+  omit,
+  useClientLayoutEffect,
+} from "../util";

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import ToggleChips, { ToggleChipsProps } from "./Toggle";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";

 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
  children: React.ReactNode;
@@ -1,12 +1,12 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";

 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>
@@ -1,24 +1,12 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";

-export default {
+const meta: Meta<typeof Chips> = {
  title: "ds-react/Chips",
  component: Chips,
-  argTypes: {
-    type: {
-      control: {
-        type: "radio",
-        options: ["toggle", "removable"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;

 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];

@@ -61,12 +49,22 @@ export const Default = (props) => {
    </Chips>
  );
 };
+Default.argTypes = {
+  type: {
+    control: { type: "radio" },
+    options: ["toggle", "removable"],
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};

-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)}
@@ -83,7 +81,7 @@ export const Toggle = () => {
          </Chips.Toggle>
        ))}
      </Chips>
-      <Chips>
+      <Chips size={size}>
        {options.map((c, y) => (
          <Chips.Toggle
            variant="neutral"
@@ -104,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);
@@ -8,13 +8,13 @@ import React, {
  useState,
 } from "react";
 import copy from "../util/copy";
-import Label from "../typography/Label";
+import { Label } from "../typography";

 export interface CopyButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /**
+   * 'xsmall' should only be used in tables
   * @default "medium"
-   * xsmall should only be used in tables/
   */
  size?: "medium" | "small" | "xsmall";
  /**
@@ -30,12 +30,12 @@ export interface CopyButtonProps
   */
  text?: string;
  /**
-   * Text shown when button is clicked
-   * Only set if used with 'text'-prop
+   * Text shown when button is clicked.
+   * Only set if used with `text`-prop.
   */
  activeText?: string;
  /**
-   *  Callback when 'copied'-state is active
+   * Callback when 'copied'-state is active
   */
  onActiveChange?: (state: boolean) => void;
  /**
@@ -54,17 +54,17 @@ export interface CopyButtonProps
   */
  activeDuration?: number;
  /**
-   * * accessible label for icon (ignored if text is set)
+   * Accessible label for icon (ignored if text is set)
   * @default 'Kopier'
   */
  title?: string;
  /**
-   * accessible label for icon in active-state (ignored if text is set)
+   * Accessible label for icon in active-state (ignored if text is set)
   * @default 'Kopiert'
   */
  activeTitle?: string;
  /**
-   * Icon position in Button
+   * Icon position in button
   * @default "left"
   */
  iconPosition?: "left" | "right";
@@ -125,24 +125,23 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
      }, activeDuration);
    };

-    const CopyIcon = () => {
-      return active ? (
-        <span className="navds-copybutton__icon">
-          {activeIcon ?? (
-            <CheckmarkIcon
-              aria-hidden={!!text}
-              title={text ? undefined : activeTitle}
-            />
-          )}
-        </span>
-      ) : (
-        <span className="navds-copybutton__icon">
-          {icon ?? (
-            <FilesIcon aria-hidden={!!text} title={text ? undefined : title} />
-          )}
-        </span>
-      );
-    };
+    const copyIcon = (
+      <span className="navds-copybutton__icon">
+        {active
+          ? activeIcon ?? (
+              <CheckmarkIcon
+                aria-hidden={!!text}
+                title={text ? undefined : activeTitle}
+              />
+            )
+          : icon ?? (
+              <FilesIcon
+                aria-hidden={!!text}
+                title={text ? undefined : title}
+              />
+            )}
+      </span>
+    );

    return (
      <button
@@ -157,14 +156,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
          `navds-copybutton--${variant}`,
          {
            "navds-copybutton--icon-only": !text,
+            "navds-copybutton--icon-right": iconPosition === "right",
            "navds-copybutton--active": active,
          }
        )}
        onClick={handleClick}
      >
        <span className="navds-copybutton__content">
-          {iconPosition === "left" && <CopyIcon />}
-
+          {iconPosition === "left" && copyIcon}
          {text &&
            (active ? (
              <Label
@@ -183,7 +182,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                {text}
              </Label>
            ))}
-          {iconPosition === "right" && <CopyIcon />}
+          {iconPosition === "right" && copyIcon}
        </span>
      </button>
    );
@@ -1,38 +1,40 @@
-import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
-import { userEvent, within } from "@storybook/testing-library";
 import React from "react";
-import { CopyButton } from ".";
+import { userEvent, within } from "@storybook/testing-library";
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import { Tooltip } from "../tooltip";
+import { CopyButton } from ".";

-export default {
+const meta: Meta<typeof CopyButton> = {
  title: "ds-react/CopyButton",
  component: CopyButton,
+};
+export default meta;
+
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {
+  render: (props) => <CopyButton {...props} />,
  argTypes: {
    size: {
-      defaultValue: "medium",
      control: { type: "radio" },
-      options: ["small", "medium", "xsmall"],
+      options: ["medium", "small", "xsmall"],
    },
    variant: {
-      defaultValue: undefined,
      control: { type: "radio" },
      options: ["neutral", "action"],
    },
  },
-};
-
-export const Default = {
-  render: (args) => <CopyButton {...args} />,
  args: {
    size: "medium",
-    duration: 2000,
+    activeDuration: 2000,
    copyText: "3.14",
    text: "",
    activeText: "",
  },
 };

-export const Interaction = {
+export const Interaction: Story = {
  render: () => (
    <CopyButton
      copyText="3.14"
@@ -50,7 +52,7 @@ export const Interaction = {
  },
 };

-export const Variants = {
+export const Variants: Story = {
  render: () => (
    <div className="colgap">
      <CopyButton copyText="3.14" variant="action" text="Kopier" />
@@ -60,7 +62,7 @@ export const Variants = {
  ),
 };

-export const IconPosition = {
+export const IconPosition: Story = {
  render: () => (
    <div className="colgap">
      <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
@@ -70,7 +72,7 @@ export const IconPosition = {
  ),
 };

-export const Sizes = {
+export const Sizes: Story = {
  render: () => (
    <div className="colgap">
      <div className="rowgap">
@@ -115,7 +117,7 @@ export const Sizes = {
  ),
 };

-export const Texts = {
+export const Texts: Story = {
  render: () => (
    <div className="colgap">
      <div>
@@ -145,7 +147,7 @@ export const Texts = {
  ),
 };

-export const Icons = {
+export const Icons: Story = {
  render: () => (
    <div className="rowgap">
      <div>
@@ -175,7 +177,7 @@ export const Icons = {
  ),
 };

-export const InlineDemo = {
+export const InlineDemo: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
      <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
@@ -183,7 +185,7 @@ export const InlineDemo = {
  ),
 };

-export const WithTooltip = {
+export const WithTooltip: Story = {
  render: () => {
    return (
      <div>
@@ -195,11 +197,11 @@ export const WithTooltip = {
  },
 };

-export const Duration = {
+export const Duration: Story = {
  render: () => <CopyButton copyText="3.14" activeDuration={300} />,
 };

-export const Disabled = {
+export const Disabled: Story = {
  render: () => (
    <div className="colgap">
      <CopyButton copyText="3.14" disabled />
@@ -1,10 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";

 export interface DateInputProps
  extends FormFieldProps,
@@ -1,20 +1,13 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef, useRef, useState } from "react";
-import {
-  DateRange,
-  DayPicker,
-  DayPickerBase,
-  Matcher,
-  isMatch,
-} from "react-day-picker";
-import { Popover, omit, useId } from "../..";
-import { DateInputProps, DatePickerInput } from "../DateInput";
+import { DateRange, DayPicker, isMatch } from "react-day-picker";
+import { Popover } from "../../popover";
+import { omit, useId } from "../../util";
+import { DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import DatePickerStandalone, {
-  DatePickerStandaloneType,
-} from "./DatePickerStandalone";
+import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -22,114 +15,7 @@ import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
 import TableHead from "./parts/TableHead";
 import WeekNumber from "./parts/WeekNumber";
-
-export type SingleMode = {
-  mode?: "single";
-  onSelect?: (val?: Date) => void;
-  selected?: Date;
-  defaultSelected?: Date;
-  onWeekNumberClick?: never;
-};
-
-export type MultipleMode = {
-  mode: "multiple";
-  onSelect?: (val?: Date[]) => void;
-  selected?: Date[];
-  defaultSelected?: Date[];
-  min?: number;
-  max?: number;
-  /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
-   */
-  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
-};
-
-export type RangeMode = {
-  mode: "range";
-  onSelect?: (val?: DateRange) => void;
-  selected?: DateRange;
-  defaultSelected?: DateRange;
-  min?: number;
-  max?: number;
-  onWeekNumberClick?: never;
-};
-
-type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
-
-//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
-export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
-    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
-  /**
-   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
-   */
-  children?: React.ReactNode;
-  /**
-   * Classname for datepicker in popover
-   */
-  className?: string;
-  /**
-   * Classname for wrapper
-   */
-  wrapperClassName?: string;
-  /**
-   * Changes datepicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * The earliest day to start navigation.
-   */
-  fromDate?: Date;
-  /**
-   * The latests day to end navigation.
-   */
-  toDate?: Date;
-  /**
-   * Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
-   * @default false
-   */
-  dropdownCaption?: boolean;
-  /**
-   * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
-   */
-  disabled?: Matcher[];
-  /**
-   * Disable saturday and sunday.
-   * @default false
-   */
-  disableWeekends?: boolean;
-  /**
-   * Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
-   * @default false
-   */
-  showWeekNumber?: boolean;
-  /**
-   * Open state for user-controlled state. Component controlled by default
-   */
-  open?: boolean;
-  /**
-   * onClose callback for user-controlled state
-   */
-  onClose?: () => void;
-  /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Avoid using if possible!
-   * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
-   * @default See Popover
-   */
-  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
-}
+import { ConditionalModeProps, DatePickerDefaultProps } from "./types";

 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;

@@ -145,14 +31,12 @@ interface DatePickerComponent
   * />
   * ```
   */
-  Standalone: DatePickerStandaloneType;
+  Standalone: typeof DatePickerStandalone;
  /**
   * Custom TextField for DatePicker
   * @see 🏷️ {@link DateInputProps}
   */
-  Input: React.ForwardRefExoticComponent<
-    DateInputProps & React.RefAttributes<HTMLInputElement>
-  >;
+  Input: typeof DatePickerInput;
 }

 /**
@@ -213,17 +97,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);

      if (rest.mode === "single") {
-        selected && (onClose?.() ?? setOpen(false));
+        newSelected && (onClose?.() ?? setOpen(false));
      } else if (rest.mode === "range") {
-        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+        newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false));
      }
-      rest?.onSelect?.(selected);
+      rest?.onSelect?.(newSelected);
    };

    return (
@@ -257,6 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
              strategy={strategy}
              className="navds-date__popover"
              bubbleEscape={bubbleEscape}
+              flip={false}
            >
              <DayPicker
                locale={getLocaleFromString(locale)}
@@ -2,21 +2,21 @@ import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { omit } from "../..";
+import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 import {
  DatePickerDefaultProps,
  MultipleMode,
  RangeMode,
  SingleMode,
-} from "./DatePicker";
-import TableHead from "./parts/TableHead";
-import WeekNumber from "./parts/WeekNumber";
-import Caption from "./parts/Caption";
-import DropdownCaption from "./parts/DropdownCaption";
-import Row from "./parts/Row";
-import { HeadRow } from "./parts/HeadRow";
-import DayButton from "./parts/DayButton";
+} from "./types";

 interface DatePickerStandaloneDefaultProps
  extends Omit<
@@ -71,11 +71,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
    const mode = rest.mode ?? ("single" as any);

    /**
-     * @param selected Date | Date[] | DateRange | undefined
+     * @param newSelected Date | Date[] | DateRange | undefined
     */
-    const handleSelect = (selected) => {
-      setSelectedDates(selected);
-      onSelect?.(selected);
+    const handleSelect = (newSelected) => {
+      setSelectedDates(newSelected);
+      onSelect?.(newSelected);
    };

    return (
@@ -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 { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Label } from "../../..";
+
 import WeekRow from "./WeekRow";
+import { Button } from "../../../button";
+import { Label } from "../../../typography";

 /**
 * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption
@@ -1,13 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { max, min } from "date-fns";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Select } from "../../..";
+import { Button } from "../../../button";
+import { Select } from "../../../form/Select";
 import { getMonths, getYears } from "../../utils/get-dates";
 import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
-import { max, min } from "date-fns";
 import WeekRow from "./WeekRow";

 /**
@@ -2,10 +2,10 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
+import { useId } from "../../../util";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";
-import { useId } from "../../../util";

 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
  const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
@@ -0,0 +1,109 @@
+import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+
+export type SingleMode = {
+  mode?: "single";
+  onSelect?: (val?: Date) => void;
+  selected?: Date;
+  defaultSelected?: Date;
+  onWeekNumberClick?: never;
+};
+
+export type MultipleMode = {
+  mode: "multiple";
+  onSelect?: (val?: Date[]) => void;
+  selected?: Date[];
+  defaultSelected?: Date[];
+  min?: number;
+  max?: number;
+  /**
+   * Allows selecting a week at a time. Only used with mode="multiple".
+   */
+  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+};
+
+export type RangeMode = {
+  mode: "range";
+  onSelect?: (val?: DateRange) => void;
+  selected?: DateRange;
+  defaultSelected?: DateRange;
+  min?: number;
+  max?: number;
+  onWeekNumberClick?: never;
+};
+
+export type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+
+//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
+export interface DatePickerDefaultProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
+    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
+  /**
+   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
+   */
+  children?: React.ReactNode;
+  /**
+   * Classname for datepicker in popover
+   */
+  className?: string;
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
+  /**
+   * Changes datepicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * The earliest day to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latests day to end navigation.
+   */
+  toDate?: Date;
+  /**
+   * Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: boolean;
+  /**
+   * Apply the disabled modifier to the matching days.
+   * https://react-day-picker.js.org/api/types/Matcher
+   */
+  disabled?: Matcher[];
+  /**
+   * Disable saturday and sunday.
+   * @default false
+   */
+  disableWeekends?: boolean;
+  /**
+   * Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
+   * @default false
+   */
+  showWeekNumber?: boolean;
+  /**
+   * Open state for user-controlled state. Component controlled by default
+   */
+  open?: boolean;
+  /**
+   * onClose callback for user-controlled state
+   */
+  onClose?: () => void;
+  /**
+   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use.
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default See Popover
+   */
+  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
+}
@@ -164,9 +164,10 @@ export const useDatepicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
    },
    [defaultMonth, defaultSelected, selectedDay, today]
  );
@@ -310,7 +311,7 @@ export const useDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onDayClick: handleDayClick,
    selected: selectedDay ?? new Date("Invalid date"),
    locale: _locale,
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { DateInputProps } from "../DateInput";
-import { MonthPickerProps } from "../monthpicker/MonthPicker";
+import { MonthPickerProps } from "../monthpicker/types";
 import {
  formatDateForInput,
  getLocaleFromString,
@@ -161,9 +161,10 @@ export const useMonthpicker = (
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const handleOpen = useCallback(
-    (open: boolean) => {
-      setOpen(open);
-      open && setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      newOpen &&
+        setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
    },
    [defaultSelected, defaultYear, selectedMonth, today]
  );
@@ -1,5 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isBefore from "date-fns/isBefore";
+import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -382,7 +382,7 @@ export const useRangeDatepicker = (
    const prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;

-    const resetTo = isBefore(prevToRange, range?.from);
+    const resetTo = checkIsBefore(prevToRange, range?.from);

    range?.from
      ? setFromInputValue(
@@ -535,7 +535,7 @@ export const useRangeDatepicker = (

  const datepickerProps = {
    month,
-    onMonthChange: (month) => setMonth(month),
+    onMonthChange: setMonth,
    onSelect: handleSelect,
    selected: selectedRange,
    locale: _locale,
@@ -1,19 +1,17 @@
 export { type DateInputProps } from "./DateInput";
 export {
-  type DatePickerProps,
  default as DatePicker,
+  type DatePickerProps,
 } from "./datepicker/DatePicker";
 export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
-export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
  useDatepicker,
  useMonthpicker,
  useRangeDatepicker,
-  type RangeValidationT,
  type DateValidationT,
  type MonthValidationT,
+  type RangeValidationT,
 } from "./hooks";
-export {
-  default as MonthPicker,
-  type MonthPickerProps,
-} from "./monthpicker/MonthPicker";
+export { default as MonthPicker } from "./monthpicker/MonthPicker";
+export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export { type MonthPickerProps } from "./monthpicker/types";
@@ -1,8 +1,8 @@
 import cl from "clsx";
-import format from "date-fns/format";
-import isSameMonth from "date-fns/isSameMonth";
 import compareAsc from "date-fns/compareAsc";
 import compareDesc from "date-fns/compareDesc";
+import format from "date-fns/format";
+import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
@@ -1,13 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
-import { Button, Select } from "../..";
+import { Button } from "../../button";
+import { Select } from "../../form/Select";
 import { useSharedMonthContext } from "../context";
 import { labelNextYear, labelPrevYear } from "../utils";
-import { isAfter, isBefore } from "date-fns";

 export const MonthCaption = () => {
  const {
@@ -23,9 +24,9 @@ export const MonthCaption = () => {

  if (hasDropdown && fromDate && toDate) {
    const fromYear = fromDate.getFullYear();
-    const toYear = toDate.getFullYear();
-    for (let year = fromYear; year <= toYear; year++) {
-      years.push(setYear(startOfYear(new Date()), year));
+    const toDateYear = toDate.getFullYear();
+    for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
+      years.push(setYear(startOfYear(new Date()), currYear));
    }

    if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
@@ -74,9 +75,9 @@ export const MonthCaption = () => {
          onChange={handleYearChange}
          className="navds-date__caption__year"
        >
-          {years.map((year) => (
-            <option key={year.getFullYear()} value={year.getFullYear()}>
-              {formatYearCaption(year, { locale })}
+          {years.map((yearOpt) => (
+            <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
+              {formatYearCaption(yearOpt, { locale })}
            </option>
          ))}
        </Select>
@@ -1,97 +1,15 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { Popover, useId } from "../..";
-import { DateInputProps, MonthPickerInput } from "../DateInput";
+import { Popover } from "../../popover";
+import { useId } from "../../util";
+import { MonthPickerInput } from "../DateInput";
 import { DateContext, SharedMonthProvider } from "../context";
-import { getLocaleFromString, Matcher } from "../utils";
+import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
-import MonthPickerStandalone, {
-  MonthPickerStandaloneType,
-} from "./MonthPickerStandalone";
+import MonthPickerStandalone from "./MonthPickerStandalone";
 import MonthSelector from "./MonthSelector";
-
-export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Element monthpicker anchors to. Use <MonthPicker.Input /> for built-in toggle,
-   * or make your own with the open/onClose props
-   */
-  children?: React.ReactNode;
-  /**
-   * Classname for datepicker in popover
-   */
-  className?: string;
-  /**
-   * Classname for wrapper
-   */
-  wrapperClassName?: string;
-  /**
-   * The earliest month to start navigation.
-   */
-  fromDate?: Date;
-  /**
-   * The latest day to end  navigation.
-   */
-  toDate?: Date;
-  /**
-   * Changes monthpicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
-   * @default false
-   */
-  dropdownCaption?: boolean;
-  /**
-   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
-   */
-  disabled?: Matcher[];
-  /**
-   * Controlled selected-month
-   */
-  selected?: Date;
-  /**
-   * Default selected month.
-   */
-  defaultSelected?: Date;
-  /**
-   * Open state for user-controlled state. Component controlled by default
-   */
-  open?: boolean;
-  /**
-   * onClose callback for user-controlled state
-   */
-  onClose?: () => void;
-  /**
-   * onOpenToggle callback for user-controlled-state. Only called if `<MonthPicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Callback for user-controlled state
-   */
-  onMonthSelect?: (month?: Date) => void;
-  /**
-   * Used to set visible year programmatically. Component controlled by default
-   */
-  year?: Date;
-  /**
-   * Event fired when the user navigates between years.
-   */
-  onYearChange?: (y?: Date) => void;
-  /**
-   * Avoid using if possible!
-   * Changes what CSS position property to use
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
-   * @default "absolute"
-   */
-  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
-}
+import { MonthPickerProps } from "./types";

 interface MonthPickerComponent
  extends React.ForwardRefExoticComponent<MonthPickerProps> {
@@ -105,14 +23,12 @@ interface MonthPickerComponent
   * />
   * ```
   */
-  Standalone: MonthPickerStandaloneType;
+  Standalone: typeof MonthPickerStandalone;
  /**
   * Custom TextField for MonthPicker
   * @see 🏷️ {@link DateInputProps}
   */
-  Input: React.ForwardRefExoticComponent<
-    DateInputProps & React.RefAttributes<HTMLInputElement>
-  >;
+  Input: typeof MonthPickerInput;
 }

 /**
@@ -211,6 +127,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
              className="navds-date navds-date__popover"
              strategy={strategy}
              bubbleEscape={bubbleEscape}
+              flip={false}
            >
              <RootProvider
                locale={getLocaleFromString(locale)}
@@ -4,8 +4,8 @@ import { RootProvider } from "react-day-picker";
 import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
-import { MonthPickerProps } from "./MonthPicker";
 import MonthSelector from "./MonthSelector";
+import { MonthPickerProps } from "./types";

 export interface MonthPickerStandaloneProps
  extends Omit<
@@ -3,7 +3,7 @@ import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { useState } from "react";
-import { BodyShort } from "../..";
+import { BodyShort } from "../../typography";
 import { useSharedMonthContext } from "../context";
 import { isMatch } from "../utils";
 import MonthButton from "./MonthButton";
@@ -62,9 +62,9 @@ export const MonthSelector = () => {
  return (
    <BodyShort as="table" className="rdp-table">
      <tbody className="rdp-tbody">
-        {tableMonths.map((months, i) => (
+        {tableMonths.map((tableRow, i) => (
          <tr className="rdp-row" key={i}>
-            {months.map((month: Date) => {
+            {tableRow.map((month: Date) => {
              return (
                <td key={month.toDateString()} className="rdp-cell">
                  <MonthButton
@@ -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>
+  );
+};
@@ -0,0 +1,83 @@
+import { Matcher } from "../utils";
+
+export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element monthpicker anchors to. Use <MonthPicker.Input /> for built-in toggle,
+   * or make your own with the open/onClose props
+   */
+  children?: React.ReactNode;
+  /**
+   * Classname for datepicker in popover
+   */
+  className?: string;
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
+  /**
+   * The earliest month to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latest day to end  navigation.
+   */
+  toDate?: Date;
+  /**
+   * Changes monthpicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: boolean;
+  /**
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+   */
+  disabled?: Matcher[];
+  /**
+   * Controlled selected-month
+   */
+  selected?: Date;
+  /**
+   * Default selected month.
+   */
+  defaultSelected?: Date;
+  /**
+   * Open state for user-controlled state. Component controlled by default
+   */
+  open?: boolean;
+  /**
+   * onClose callback for user-controlled state
+   */
+  onClose?: () => void;
+  /**
+   * onOpenToggle callback for user-controlled-state. Only called if `<MonthPicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Callback for user-controlled state
+   */
+  onMonthSelect?: (month?: Date) => void;
+  /**
+   * Used to set visible year programmatically. Component controlled by default
+   */
+  year?: Date;
+  /**
+   * Event fired when the user navigates between years.
+   */
+  onYearChange?: (y?: Date) => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
+}
@@ -1,13 +1,12 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
-import { nb, enGB } from "date-fns/locale";
+import { enGB, nb } from "date-fns/locale";

 import { getMonthWeeks } from "../get-month-weeks";

 describe('when using the "nB" locale', () => {
  const locale = nb;
  describe("when getting the weeks for January 2022", () => {
-    const date = new Date(2022, 0);
-    const weeks = getMonthWeeks(date, { locale });
+    const weeks = getMonthWeeks(new Date(2022, 0), { locale });
    test("the first week should be the last of the previous year", () => {
      const weekNumbers = weeks.map((week) => week.weekNumber);
      expect(weekNumbers[0]).toEqual(52);
@@ -29,8 +28,10 @@ describe('when using the "enGB" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -67,8 +68,10 @@ describe('when using the "nb" locale', () => {
  describe("when using fixed weeks", () => {
    const useFixedWeeks = true;
    describe("when getting the weeks for December 2022", () => {
-      const date = new Date(2022, 11);
-      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      const weeks = getMonthWeeks(new Date(2022, 11), {
+        useFixedWeeks,
+        locale,
+      });
      test("should return 48 - 1 week numbers", () => {
        const weekNumbers = weeks.map((week) => week.weekNumber);
        const expectedResult = [48, 49, 50, 51, 52, 1];
@@ -15,27 +15,27 @@ export const nextEnabled = (
  const currentIndex = currentMonth.getMonth();

  if (key === "Home") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "home"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "End") {
-    const nextEnabled = nextOnRow(
+    const nextDate = nextOnRow(
      currentIndex,
      months,
      yearState,
      disabled,
      "end"
    );
-    if (nextEnabled) {
-      return nextEnabled;
+    if (nextDate) {
+      return nextDate;
    }
  }
  if (key === "PageUp") {
@@ -1,7 +1,7 @@
 import parse from "date-fns/parse";
 import isBefore from "date-fns/isBefore";
 import sub from "date-fns/sub";
-import { isValidDate } from ".";
+import { isValidDate } from "./check-dates";

 export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";

@@ -1,6 +1,7 @@
-import React, { createContext, useState } from "react";
-import Toggle, { ToggleProps } from "./Toggle";
+import React, { useState } from "react";
 import Menu, { MenuType } from "./Menu";
+import Toggle, { ToggleProps } from "./Toggle";
+import { DropdownContext } from "./context";

 export interface DropdownProps {
  children: React.ReactNode;
@@ -36,16 +37,6 @@ export interface DropdownType extends React.FC<DropdownProps> {
  Menu: MenuType;
 }

-export interface DropdownContextType {
-  readonly isOpen: boolean;
-  handleToggle: (v: boolean) => void;
-  readonly anchorEl: Element | null;
-  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
-  onSelect: (element: React.MouseEvent) => void;
-}
-
-export const DropdownContext = createContext<DropdownContextType | null>(null);
-
 /**
 * A component that displays a dropdown menu when the user clicks on its toggle button.
 *
@@ -1,7 +1,7 @@
-import { OverridableComponent } from "../../../util/OverridableComponent";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { DropdownContext } from "../../Dropdown";
+import { OverridableComponent } from "../../../util";
+import { DropdownContext } from "../../context";

 export interface GroupedItemProps
  extends React.ButtonHTMLAttributes<HTMLElement> {
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util/OverridableComponent";
+import { OverridableComponent } from "../../../util";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";

@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../../../util/OverridableComponent";
-import { DropdownContext } from "../../Dropdown";
+import React, { forwardRef, useContext } from "react";
+import { OverridableComponent } from "../../../util";
+import { DropdownContext } from "../../context";

 export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
  /**
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util/OverridableComponent";
+import { OverridableComponent } from "../../../util";
 import ListItem, { ListItemProps } from "./Item";

 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Popover } from "../../popover";
-import { DropdownContext } from "../Dropdown";
+import { DropdownContext } from "../context";
 import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
 import List, { ListType } from "./List";
@@ -1,6 +1,6 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { DropdownContext } from "./Dropdown";
+import React, { forwardRef, useContext } from "react";
+import { DropdownContext } from "./context";

 export interface ToggleProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export interface DropdownContextType {
+  readonly isOpen: boolean;
+  handleToggle: (v: boolean) => void;
+  readonly anchorEl: Element | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
+  onSelect: (element: React.MouseEvent) => void;
+}
+
+export const DropdownContext = createContext<DropdownContextType | null>(null);
@@ -1,6 +1,6 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useRef, useState } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef, useRef, useState } from "react";
+import { OverridableComponent } from "../util";
 import ExpansionCardContent, {
  ExpansionCardContentProps,
 } from "./ExpansionCardContent";
@@ -15,6 +15,7 @@ import {
  ExpansionCardTitle,
  ExpansionCardTitleProps,
 } from "./ExpansionCardTitle";
+import { ExpansionCardContext } from "./context";

 interface ExpansionCardComponent
  extends React.ForwardRefExoticComponent<
@@ -82,18 +83,6 @@ type ExpansionCardConditionalProps =
      "aria-labelledby": string;
    };

-export type ExpansionCardContextProps = {
-  open: boolean;
-  toggleOpen: () => void;
-  size: "medium" | "small";
-};
-
-export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
-  open: false,
-  toggleOpen: () => {},
-  size: "medium",
-});
-
 export type ExpansionCardProps = ExpansionCardCommonProps &
  ExpansionCardConditionalProps;

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography/BodyLong";
-import { ExpansionCardContext } from "./ExpansionCard";
+import { BodyLong } from "../typography";
+import { ExpansionCardContext } from "./context";

 export interface ExpansionCardContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { BodyLong } from "../typography/BodyLong";
-import { ExpansionCardContext } from "./ExpansionCard";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography";
+import { ExpansionCardContext } from "./context";

 export interface ExpansionCardDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -1,7 +1,7 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { ExpansionCardContext } from "./ExpansionCard";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { ExpansionCardContext } from "./context";

 export interface ExpansionCardHeaderProps
  extends React.HTMLAttributes<HTMLDivElement> {
@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";

 export interface ExpansionCardTitleProps
  extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  size: "medium" | "small";
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+  size: "medium",
+});
@@ -1,6 +1,8 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyLong, Checkbox, CheckboxProps, ErrorMessage, useId } from "..";
+import React, { forwardRef } from "react";
+import { BodyLong, ErrorMessage } from "../typography";
+import { useId } from "../util";
+import { Checkbox, CheckboxProps } from "./checkbox";
 import { useFormField } from "./useFormField";

 export interface ConfirmationPanelProps
@@ -1,36 +1,11 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "../..";
-import { FormFieldProps } from "../useFormField";
-import { useFieldset } from "./useFieldset";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
-
-export type FieldsetContextProps = {
-  /**
-   * Error message applied to element,
-   */
-  error?: React.ReactNode;
-  /**
-   * Overrides internal errorId
-   */
-  errorId: string;
-  /**
-   * Changes paddings, margins and font-sizes
-   */
-  size: "medium" | "small";
-  /**
-   * Sets fieldset and all form-children to disabled
-   */
-  disabled: boolean;
-  /**
-   * Read only-state
-   */
-  readOnly?: boolean;
-};
-
-export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
-  null
-);
+import { FormFieldProps } from "../useFormField";
+import { FieldsetContext } from "./context";
+import { useFieldset } from "./useFieldset";

 export interface FieldsetProps
  extends FormFieldProps,
@@ -0,0 +1,26 @@
+import { createContext } from "react";
+
+export type FieldsetContextProps = {
+  /**
+   * Error message applied to element,
+   */
+  error?: React.ReactNode;
+  /**
+   * Overrides internal errorId
+   */
+  errorId: string;
+  /**
+   * Changes paddings, margins and font-sizes
+   */
+  size: "medium" | "small";
+  /**
+   * Sets fieldset and all form-children to disabled
+   */
+  disabled: boolean;
+  /**
+   * Read only-state
+   */
+  readOnly?: boolean;
+};
+
+export const FieldsetContext = createContext<FieldsetContextProps | null>(null);
@@ -1,5 +1,2 @@
-export {
-  default as Fieldset,
-  type FieldsetProps,
-  FieldsetContext,
-} from "./Fieldset";
+export { default as Fieldset, type FieldsetProps } from "./Fieldset";
+export { FieldsetContext } from "./context";
@@ -1,10 +1,10 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, SelectHTMLAttributes } from "react";
-
-import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./useFormField";

 export interface SelectProps
  extends FormFieldProps,
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            className={cl(
              "navds-select__input",
              "navds-body-short",
-              `navds-body--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`
            )}
            size={htmlSize}
          >
@@ -5,9 +5,11 @@ import React, {
  useEffect,
  useState,
 } from "react";
-import { BodyShort, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { Loader } from "../loader";
+import { BodyShort } from "../typography";
+import { omit } from "../util";

 const SelectedIcon = () => (
  <svg
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./useFormField";

@@ -115,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
          className={cl(
            "navds-text-field__input",
            "navds-body-short",
-            `navds-body-${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`
          )}
          size={htmlSize}
        />
@@ -1,9 +1,10 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
+import { BodyShort, ErrorMessage, Label } from "../typography";
 import TextareaAutosize from "../util/TextareaAutoSize";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { omit, useId } from "../util";

 /**
 * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -161,7 +162,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            className={cl(
              "navds-textarea__input",
              "navds-body-short",
-              `navds-body-${size ?? "medium"}`,
+              `navds-body-short--${size ?? "medium"}`,
              {
                "navds-textarea--counter": hasMaxLength,
              }
@@ -1,45 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { FormFieldProps } from "../useFormField";
-import useCheckbox from "./useCheckbox";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
-
-export interface CheckboxProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
-  /**
-   * Adds error indication on checkbox
-   * @default false
-   */
-  error?: boolean;
-  /**
-   * Id for error resulting in checkbox having error
-   */
-  errorId?: string;
-  /**
-   * Checkbox label
-   */
-  children: React.ReactNode;
-  /**
-   * Hides label and makes it viewable for screen-readers only.
-   */
-  hideLabel?: boolean;
-  /**
-   * The value of the HTML element.
-   */
-  value?: any;
-  /**
-   * Specify whether the Checkbox is in an indeterminate state
-   * @default false
-   */
-  indeterminate?: boolean;
-  /**
-   * Adds a description to extend labling of Checkbox
-   */
-  description?: string;
-}
+import { CheckboxProps } from "./types";
+import useCheckbox from "./useCheckbox";

 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  (props, ref) => {
@@ -1,6 +1,6 @@
-import React, { createContext, forwardRef, useContext, useState } from "react";
 import cl from "clsx";
-import { Fieldset, FieldsetProps, FieldsetContext } from "..";
+import React, { createContext, forwardRef, useContext, useState } from "react";
+import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";

 export interface CheckboxGroupState {
  readonly defaultValue?: readonly any[];
@@ -1,5 +1,6 @@
-export { default as Checkbox, type CheckboxProps } from "./Checkbox";
+export { default as Checkbox } from "./Checkbox";
 export {
  default as CheckboxGroup,
  type CheckboxGroupProps,
 } from "./CheckboxGroup";
+export { type CheckboxProps } from "./types";
@@ -0,0 +1,37 @@
+import { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface CheckboxProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
+  /**
+   * Adds error indication on checkbox
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * Id for error resulting in checkbox having error
+   */
+  errorId?: string;
+  /**
+   * Checkbox label
+   */
+  children: React.ReactNode;
+  /**
+   * Hides label and makes it viewable for screen-readers only.
+   */
+  hideLabel?: boolean;
+  /**
+   * The value of the HTML element.
+   */
+  value?: any;
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * Adds a description to extend labling of Checkbox
+   */
+  description?: string;
+}
@@ -1,7 +1,8 @@
 import { useContext } from "react";
-import { CheckboxProps, omit } from "../..";
+import { omit } from "../../util";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
+import { CheckboxProps } from "./types";

 /**
 * Handles props for Checkboxes in context with Fieldset and CheckboxGroup
@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
-import { BodyShort, ErrorMessage, Label, mergeRefs } from "../..";
 import ClearButton from "./ClearButton";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -11,6 +10,8 @@ import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsCont
 import ComboboxWrapper from "./ComboboxWrapper";
 import { useInputContext } from "./Input/inputContext";
 import Input from "./Input/Input";
+import { mergeRefs } from "../../util";
+import { BodyShort, ErrorMessage, Label } from "../../typography";

 export const Combobox = forwardRef<
  HTMLInputElement,
@@ -1,10 +1,11 @@
 import React from "react";
 import cl from "clsx";
-import { BodyShort, Label, Loader } from "../../..";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
+import { Loader } from "../../../loader";
+import { BodyShort, Label } from "../../../typography";

 const FilteredOptions = () => {
  const {
@@ -1,4 +1,4 @@
-import { omit } from "../../..";
+import { omit } from "../../../util";
 import React, {
  useCallback,
  forwardRef,
@@ -176,7 +176,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          inputClassName,
          "navds-combobox__input",
          "navds-body-short",
-          `navds-body-${size}`
+          `navds-body-short--${size}`
        )}
      />
    );
@@ -8,8 +8,8 @@ import React, {
  useRef,
  useState,
 } from "react";
-import { useFormField, FormFieldType } from "../../useFormField";
 import { useClientLayoutEffect } from "../../../util";
+import { FormFieldType, useFormField } from "../../useFormField";

 interface InputContextType extends FormFieldType {
  clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
@@ -63,10 +63,10 @@ export const InputContextProvider = ({ children, value: props }) => {

  const onChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value;
-      externalValue ?? setInternalValue(value);
+      const newValue = event.currentTarget.value;
+      externalValue ?? setInternalValue(newValue);
      externalOnChange?.(event);
-      setSearchTerm(value);
+      setSearchTerm(newValue);
    },
    [externalValue, externalOnChange]
  );
@@ -1,5 +1,5 @@
 import React from "react";
-import { Chips } from "../../..";
+import { Chips } from "../../../chips";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import usePrevious from "../../../util/usePrevious";
 import { useInputContext } from "../Input/inputContext";
-import { ComboboxProps } from "../types";
 import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";

 type SelectedOptionsContextType = {
  addSelectedOption: (option: string) => void;
@@ -71,8 +71,8 @@ export const SelectedOptionsProvider = ({
        allowNewValues && addCustomOption(option);
        !isMultiSelect && setSelectedOptions([]);
      } else if (isMultiSelect) {
-        setSelectedOptions((prevSelectedOptions) => [
-          ...prevSelectedOptions,
+        setSelectedOptions((oldSelectedOptions) => [
+          ...oldSelectedOptions,
          option,
        ]);
      } else {
@@ -97,8 +97,8 @@ export const SelectedOptionsProvider = ({
      if (isCustomOption) {
        removeCustomOption(option);
      } else {
-        setSelectedOptions((prevSelectedOptions) =>
-          prevSelectedOptions.filter(
+        setSelectedOptions((oldSelectedOptions) =>
+          oldSelectedOptions.filter(
            (selectedOption) => selectedOption !== option
          )
        );
@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import { Heading, BodyShort } from "../..";
+import { Heading, BodyShort } from "../../typography";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 import { useId } from "../../util";
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
github-actions[bot]andgithub-actions[bot]	6c29fa83dd	Version Packages (#2381 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-17 16:30:38 +02:00
Ken	a6b6733861	🎨 Mindre Helptext variant (#2376 ) * 🎨 Mindre Helptext variant * 🎨 small-variant er nå default helptext * 💄 Larger helptext circle stroke-width * Update .changeset/wild-rice-arrive.md	2023-10-17 16:23:14 +02:00
Halvor Haugan	3e54bd4f43	Ny eslint-regel no-shadow (#2377 )	2023-10-17 16:05:22 +02:00
Mathias S. MüllerandKen	ec205fbc5f	🐛 Fiks skrivefeil på size-klasse på form-komponenter (#2372 ) * Fiks skrivefeil på size-klasse på select-komponent * Fiks skrivefeil på size-klasse på form-komponenter * 📝 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-10-17 15:11:41 +02:00
Ken	d8a4097c82	💄 Endring av tekstfarge endrer også chevron nå (#2383 )	2023-10-17 14:55:53 +02:00
KenandHalvor Haugan	3a3a53f823	[Aksel.nav.no] Nextjs logging av getStaticProps (#2384 ) * 🎨 Caching in dev * 🎨 Logging getstaticprops * 🐛 Endret tilbake til gammel caching * Update aksel.nav.no/website/pages/komponenter/index.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-10-17 13:09:02 +02:00
Halvor Haugan	3d3e907608	Ny spacing token på 0.375rem (#2370 )	2023-10-17 09:13:39 +02:00
Ken	986d0e9740	[aksel.nav.no] ⬆️ Oppdatert sanity (#2379 ) * ⬆️ Oppdatert sanity * ⬆️ yarnlock	2023-10-16 18:58:28 +02:00
dependabot[bot]	50bb7d4ff8	⬆️ Bump @babel/traverse from 7.23.0 to 7.23.2 (#2380 ) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.23.0 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-16 18:51:53 +02:00
github-actions[bot]andgithub-actions[bot]	c2151e0514	Version Packages (#2378 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-16 16:19:27 +02:00
Ken	4bc4dea85f	🐛 Fikset tastaturnavigasjon i monthpicker (#2374 )	2023-10-16 14:33:23 +02:00
github-actions[bot]andgithub-actions[bot]	6b2547cec5	Version Packages (#2375 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-16 11:20:56 +02:00
Ken	5d4a46d1a8	[aksel.nav.no] Added hotjar (#2362 ) * 🔊 Added hotjar * ⬆️ Bump yarn lock	2023-10-16 10:29:40 +02:00
Ken	cb8c7cabee	🐛 Fikset hover på radio ved bruk av readonly (#2363 )	2023-10-16 09:36:11 +02:00
github-actions[bot]andgithub-actions[bot]	7d675373bf	Version Packages (#2364 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-13 10:10:20 +02:00
Ken	e49b7ec875	Ryddet opp i sirkulære dependencies (#2366 ) * ✨ Boilerplate * 🎨 Testbuild * ♻️ Bedre exports av utils * ♻️ Update imports * ♻️ Fikset root imports * 🎨 Hide examples from workspace * 🔥 Fjernet next appdir * 🔥 Fjernet npm exports * 🎨 Fikset default export av Select * 🎨 Datepicker dependencies * 🎨 Monthpicker deps * 🎨 Monthpicker deps * 🎨 Dropdown deps * 🎨 Expansioncard context * 🎨 Checkbox types * 🎨 Radio types * 🎨 Form props * 🎨 List deps * 🎨 Modal deps * 🎨 Stepper deps * 🎨 Table types * 🎨 Tabs deps * 🎨 ToggleGroup context * 🐛 Fikset useMonthpicker import * 🔥 Fjernet shadow-dom example fra changeset config * 📝 Changeset * 🎨 Ryddet opp i sirkulære depdendencies * 🔥 Fjernet composeEventHandlers * 🎨 Oppdatert yarn lockfile	2023-10-13 10:06:34 +02:00
Ken	c8cac2eafb	🔥 Fjernet changeset for annen PR	2023-10-12 09:20:36 +02:00
Halvor Haugan	99fca2a566	Nye ikoner ChevronLeftFirstCircle og ChevronRightLastCircle (#2365 )	2023-10-12 09:13:55 +02:00
Ken	aa7f8ba1f8	📝 changeset	2023-10-11 21:55:54 +02:00
Halvor Haugan	70c5affbd3	💄 CopyButton: Justert padding, gap og animasjon (#2355 )	2023-10-11 15:36:29 +02:00
KenandHalvor Haugan	d88a0c8aef	[Aksel.nav.no] Fikser bug i `_id`-generering for props-tabeller (#2361 ) * 🎨 Oppdatert prop-dokumentasjon * 🎨 Oppdatert prop-dokumentering * 📝 Bedre tekster * support .env.local and fix typo * 🔥 Fjernet dryrun * fix type in List * 🎨 Bedre håndtering av error * 🎨 Bedre preview av props når de blir referert til * 📝 La til throw error --------- Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>	2023-10-11 13:46:26 +02:00
github-actions[bot]andgithub-actions[bot]	dfd04f3ed7	Version Packages (#2360 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-10 14:17:55 +02:00
Ken	a2d915cab9	🐛 Fikset yarn.lock dependency mismatch	2023-10-10 13:58:30 +02:00
Ken	e77568f58f	🎨 Popover legger seg nå ikke over Input i Datepicker (#2349 ) * 🎨 Popover legger seg nå ikke over Input i Datepicker * Update .changeset/eighty-pants-switch.md * 📝 Yarn sync * 📝 Yarn sync	2023-10-10 13:30:54 +02:00
Ken	fcbf6eada5	🎨 Fikset h2 bruk på nettsiden (#2350 )	2023-10-10 10:47:34 +02:00
dependabot[bot]andKen	732a0491ea	⬆️ Bump postcss from 8.4.27 to 8.4.31 (#2348 ) * ⬆️ Bump postcss from 8.4.27 to 8.4.31 Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.27...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> * 🔧 Yarn lock synk * ⬆️ Bump website postcss --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-10-09 14:52:44 +02:00