Version Packages (#2364 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Ryddet opp i sirkulære dependencies (#2366 )
2026-10-13 01:02:02 +00:00 · 2023-10-13 10:10:20 +02:00 · 2023-10-13 10:06:34 +02:00 · 2023-10-12 09:20:36 +02:00 · 2023-10-12 09:13:55 +02:00 · 2023-10-11 21:55:54 +02:00
157 changed files with 3557 additions and 4148 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: [
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 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.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint

+## 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.0",
  "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.0",
+    "@navikt/ds-tokens": "^5.7.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,19 @@
 # @navikt/aksel

+## 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.0",
  "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.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-css

+## 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
@@ -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: 0.375rem;
+}
+
 .navds-copybutton--xsmall > .navds-copybutton__content {
  gap: var(--a-spacing-1);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.6.4",
+  "version": "5.7.0",
  "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.0",
    "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"
@@ -1,5 +1,27 @@
 # @navikt/ds-react

+## 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.0",
  "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.0",
+    "@navikt/ds-tokens": "^5.7.0",
    "@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,6 +1,6 @@
 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> {
@@ -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;
 }

 /**
@@ -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<
@@ -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;
+}
@@ -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,
@@ -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";
@@ -4,10 +4,11 @@ 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 { useSharedMonthContext } from "../context";
 import { labelNextYear, labelPrevYear } from "../utils";
 import { isAfter, isBefore } from "date-fns";
+import { Button } from "../../button";
+import { Select } from "../../form/Select";

 export const MonthCaption = () => {
  const {
@@ -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";
@@ -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,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,
@@ -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";

@@ -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
@@ -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,
@@ -1,5 +1,5 @@
 import React from "react";
-import { Chips } from "../../..";
+import { Chips } from "../../../chips";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";

@@ -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";

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../..";
+import { OverridableComponent } from "../../util";

 export interface ErrorSummaryItemProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -1,27 +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 { RadioProps } from "./types";
 import { useRadio } from "./useRadio";

-export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
-  /**
-   * Radio label
-   */
-  children: React.ReactNode;
-  /**
-   * The value of the HTML element
-   */
-  value: any;
-  /**
-   * Adds a description to extend labling of Radio
-   */
-  description?: string;
-}
-
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
  const { inputProps, size, hasError, readOnly } = useRadio(props);

@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { Fieldset, FieldsetContext, FieldsetProps } from "..";
-import { useId } from "../..";
+import React, { forwardRef, useContext } from "react";
+import { useId } from "../../util";
+import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";

 export interface RadioGroupContextProps {
  name: string;
@@ -1,2 +1,3 @@
-export { default as Radio, type RadioProps } from "./Radio";
+export { default as Radio } from "./Radio";
 export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";
+export { type RadioProps } from "./types";
@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface RadioProps
+  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
+  /**
+   * Radio label
+   */
+  children: React.ReactNode;
+  /**
+   * The value of the HTML element
+   */
+  value: any;
+  /**
+   * Adds a description to extend labling of Radio
+   */
+  description?: string;
+}
@@ -1,8 +1,8 @@
 import { useContext } from "react";
+import { omit } from "../../util";
 import { useFormField } from "../useFormField";
-import { RadioProps } from "./Radio";
 import { RadioGroupContext } from "./RadioGroup";
-import { omit } from "../..";
+import { RadioProps } from "./types";

 /**
 * Handles props for Radios in context with Fieldset and RadioGroup
@@ -1,16 +1,18 @@
-import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
-  forwardRef,
  InputHTMLAttributes,
+  forwardRef,
  useCallback,
  useMemo,
  useRef,
  useState,
 } from "react";
-import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { mergeRefs, omit } from "../../util";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
+import { SearchContext } from "./context";

 export type SearchClearEvent =
  | {
@@ -73,17 +75,6 @@ interface SearchComponent
  Button: SearchButtonType;
 }

-export interface SearchContextProps {
-  disabled?: boolean;
-  size: "medium" | "small";
-  variant: "primary" | "secondary" | "simple";
-  handleClick: () => void;
-}
-
-export const SearchContext = React.createContext<SearchContextProps | null>(
-  null
-);
-
 /**
 * A component that displays a search input field.
 *
@@ -1,8 +1,8 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Button, ButtonProps } from "../..";
-import { SearchContext } from "./Search";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button, ButtonProps } from "../../button";
+import { SearchContext } from "./context";

 export interface SearchButtonProps
  extends Omit<ButtonProps, "size" | "children" | "variant"> {
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export interface SearchContextProps {
+  disabled?: boolean;
+  size: "medium" | "small";
+  variant: "primary" | "secondary" | "simple";
+  handleClick: () => void;
+}
+
+export const SearchContext = createContext<SearchContextProps | null>(null);
@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
 import cl from "clsx";
-import { FieldsetContext } from "./index";
-import { useId } from "../index";
+import React, { useContext } from "react";
+import { useId } from "../util";
+import { FieldsetContext } from "./Fieldset/context";

 export interface FormFieldProps {
  /**
@@ -1,5 +1,5 @@
 import React, { SVGProps } from "react";
-import { useId } from "..";
+import { useId } from "../util";

 interface SVGRProps {
  title?: string;
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { Popover, PopoverProps, mergeRefs } from "..";
+import { Popover, PopoverProps } from "../popover";
+import { mergeRefs } from "../util";
 import { HelpTextIcon } from "./HelpTextIcon";

 export interface HelpTextProps
@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { Panel, OverridableComponent } from "..";

 import cl from "clsx";
 import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
@@ -8,6 +7,8 @@ import {
  LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { OverridableComponent } from "../util";
+import { Panel } from "../panel";

 export interface LinkPanelProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography";

 export interface LinkPanelDescriptionProps
  extends React.HTMLAttributes<HTMLDivElement> {
@@ -1,58 +1,21 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemProps } from "./ListItem";
-
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * HTML list element to render
-   * @default "ul"
-   */
-  as?: "ul" | "ol";
-  /**
-   * List heading title
-   */
-  title?: string;
-  /**
-   * List heading description
-   */
-  description?: string;
-  /**
-   * Allows setting a different HTML h-tag
-   * @default "h3"
-   */
-  headingTag?: React.ElementType<any>;
-  /**
-   * Changes padding, height and font-size
-   * @default medium
-   */
-  size?: "medium" | "small";
-}
+import { ListItem } from "./ListItem";
+import { ListContext } from "./context";
+import { ListProps } from "./types";

 export interface ListComponent
-  extends React.ForwardRefExoticComponent<ListProps> {
+  extends React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLDivElement>
+  > {
  /**
   * @see 🏷️ {@link ListItemProps}
   */
-  Item: React.ForwardRefExoticComponent<
-    ListItemProps & React.RefAttributes<HTMLLIElement>
-  >;
+  Item: typeof ListItem;
 }

-interface ListContextProps {
-  listType: ListProps["as"];
-  isNested: boolean | null;
-  size: ListProps["size"];
-}
-
-export const ListContext = createContext<ListContextProps>({
-  listType: "ul",
-  isNested: null,
-  size: "medium",
-});
-
 export const List = forwardRef<HTMLDivElement, ListProps>(
  (
    {
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
-import { ListContext } from "./List";
+import { ListContext } from "./context";

 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
  /**
@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { ListProps } from "./types";
+
+interface ListContextProps {
+  listType: ListProps["as"];
+  isNested: boolean | null;
+  size: ListProps["size"];
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+  isNested: null,
+  size: "medium",
+});
@@ -1,2 +1,2 @@
 export { default as List } from "./List";
-export type { ListProps } from "./List";
+export type { ListProps } from "./types";
@@ -0,0 +1,26 @@
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+  /**
+   * Changes padding, height and font-size
+   * @default medium
+   */
+  size?: "medium" | "small";
+}
@@ -1,6 +1,6 @@
-import React, { forwardRef, SVGProps } from "react";
 import cl from "clsx";
-import { omit, useId } from "..";
+import React, { forwardRef, SVGProps } from "react";
+import { omit, useId } from "../util";

 export interface LoaderProps extends SVGProps<SVGSVGElement> {
  /**
@@ -1,3 +1,5 @@
+import { useFloatingPortalNode } from "@floating-ui/react";
+import cl from "clsx";
 import React, {
  forwardRef,
  useContext,
@@ -6,80 +8,16 @@ import React, {
  useRef,
 } from "react";
 import { createPortal } from "react-dom";
-import { useFloatingPortalNode } from "@floating-ui/react";
-import cl from "clsx";
-import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
+import { useProvider } from "../provider";
+import { Detail, Heading } from "../typography";
+import { mergeRefs, useId } from "../util";
 import ModalBody from "./ModalBody";
-import ModalHeader from "./ModalHeader";
-import ModalFooter from "./ModalFooter";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
 import { ModalContext } from "./ModalContext";
-
-export interface ModalProps
-  extends React.DialogHTMLAttributes<HTMLDialogElement> {
-  /**
-   * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
-   * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
-   */
-  header?: {
-    label?: string;
-    icon?: React.ReactNode;
-    heading: string;
-    /**
-     * Heading size
-     * @default "medium"
-     * */
-    size?: "medium" | "small";
-    /**
-     * Removes close-button (X) when false
-     * @default true
-     */
-    closeButton?: boolean;
-  };
-  /**
-   * Modal content
-   */
-  children: React.ReactNode;
-  /**
-   * Whether the modal should be visible or not.
-   * Remember to use the `onClose` callback to keep your local state in sync.
-   * You can also use `ref.current.openModal()` and `ref.current.close()`.
-   */
-  open?: boolean;
-  /**
-   * Called when the modal has been closed
-   */
-  onClose?: React.ReactEventHandler<HTMLDialogElement>;
-  /**
-   * Called when the user wants to close the modal (clicked the close button or pressed Esc).
-   * @returns Whether to close the modal
-   */
-  onBeforeClose?: () => boolean | void;
-  /**
-   * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
-   */
-  onCancel?: React.ReactEventHandler<HTMLDialogElement>;
-  /**
-   * @default fit-content (up to 700px)
-   * */
-  width?: "medium" | "small" | number | `${number}${string}`;
-  /**
-   * Lets you render the modal into a different part of the DOM.
-   * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
-   */
-  portal?: boolean;
-  /**
-   * User defined classname for modal
-   */
-  className?: string;
-  /**
-   * Sets aria-labelledby on modal.
-   * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
-   */
-  "aria-labelledby"?: string;
-}
+import ModalFooter from "./ModalFooter";
+import ModalHeader from "./ModalHeader";
+import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
+import { ModalProps } from "./types";

 interface ModalComponent
  extends React.ForwardRefExoticComponent<
@@ -1,5 +1,5 @@
 import React from "react";
-import type { ModalProps } from "./Modal";
+import type { ModalProps } from "./types";

 export function getCloseHandler(
  modalRef: React.RefObject<HTMLDialogElement>,
@@ -1,4 +1,5 @@
-export { default as Modal, type ModalProps } from "./Modal";
-export { type ModalHeaderProps } from "./ModalHeader";
+export { default as Modal } from "./Modal";
 export { type ModalBodyProps } from "./ModalBody";
 export { type ModalFooterProps } from "./ModalFooter";
+export { type ModalHeaderProps } from "./ModalHeader";
+export { type ModalProps } from "./types";
Author	SHA1	Message	Date
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