Version Packages (#2459 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[aksel.nav.no] 404 template (#2455 )
2026-10-17 11:12:03 +00:00 · 2023-11-08 16:24:10 +01:00 · 2023-11-08 15:23:15 +01:00 · 2023-11-08 12:14:35 +01:00 · 2023-11-08 09:12:00 +01:00 · 2023-11-07 14:29:51 +01:00
226 changed files with 32329 additions and 29638 deletions
@@ -0,0 +1,22 @@
+name: Eksempel på bruk
+description: Send et eksempel på ting fra Aksel som er brukt i det fri (tokens, komponenter, maler, etc)
+title: "[Eksempel på bruk]: "
+labels: ["dokumentasjon 📖"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar til Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Lenke til side
+      description: Lenke til siden hvor eksemplet er
+      placeholder: 
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Forklaring
+      description: Forklar om det er noe man må gjøre for å se eksemplet, eller hvor på siden det ligger
@@ -151,4 +151,5 @@ playwright-report/
 backup-*.tar.gz
 sitemap-urls.json
 *.tar.gz
-searchindex.json
+searchindex.json
+aksel.nav.no/website/public/rss
@@ -1,5 +1,13 @@
 # @navikt/aksel-icons

+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

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

+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.8.0",
+  "version": "5.10.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.8.0",
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/ds-css": "^5.10.0",
+    "@navikt/ds-tokens": "^5.10.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,33 @@
 # @navikt/aksel

+## 5.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`60d348130`](https://github.com/navikt/aksel/commit/60d34813009377a1a7d84bed6627c60524849957)]:
+  - @navikt/ds-css@5.10.0
+
+## 5.9.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`925450cb7`](https://github.com/navikt/aksel/commit/925450cb73cd792cd3b6ad3ebf9f38ba022ee4df)]:
+  - @navikt/ds-css@5.9.1
+
+## 5.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382), [`51eee7f01`](https://github.com/navikt/aksel/commit/51eee7f011aa016973bb952313cf65a1c55aa382)]:
+  - @navikt/ds-css@5.9.0
+
 ## 5.8.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.8.0",
+  "version": "5.10.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.8.0",
+    "@navikt/ds-css": "5.10.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,31 @@
 # @navikt/ds-css

+## 5.10.0
+
+### Minor Changes
+
+- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
+
+## 5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- :lipstick: Modal: Bedre håndtering av mobiler i landskapsmodus ([#2444](https://github.com/navikt/aksel/pull/2444))
+
+## 5.9.0
+
+### Minor Changes
+
+- Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
 ## 5.8.0

 ### Patch Changes
@@ -35,6 +35,10 @@ const StyleMappings = {
      component: "Box",
      main: primitivesCss,
    },
+    {
+      component: "Page",
+      main: primitivesCss,
+    },
    {
      component: "HGrid",
      main: primitivesCss,
@@ -149,18 +149,6 @@
  width: fit-content;
 }

-/* Focus layering */
-.navds-date__field-input:focus-visible,
-.navds-date__field-button {
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-input:focus {
-    z-index: 1;
-  }
-}
-
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -201,11 +189,11 @@
 }

 .navds-date__field-input {
-  padding-right: var(--a-spacing-14);
+  padding-right: var(--a-spacing-12);
 }

 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-10);
+  padding-right: var(--a-spacing-8);
 }

 /* Error-handling */
@@ -282,10 +270,6 @@
  pointer-events: none;
 }

-.navds-date__popover:where(.navds-popover) {
-  border: none;
-}
-
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
  cursor: default;
@@ -310,11 +294,35 @@
  margin: 0;
 }

+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
@media (min-width: 480px) {
  .navds-date {
    padding: var(--a-spacing-5) var(--a-spacing-4);
  }

+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
  .navds-date__caption {
    gap: var(--a-spacing-2);
  }
@@ -59,12 +59,17 @@

@media (min-width: 480px) {
  .navds-modal {
-    max-width: calc((100% - 6px) - 2em);
-    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
  }

  .navds-modal--autowidth {
-    max-width: min(700px, calc((100% - 6px) - 2em));
+    max-width: min(700px, calc(100% - 6px - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 6px - 2em);
  }
 }

@@ -130,6 +135,14 @@
  margin-left: auto;
 }

+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
@keyframes akselModalFadeIn {
  from {
    opacity: 0;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.8.0",
+  "version": "5.10.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/ds-tokens": "^5.10.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,6 @@
@import "box.css";
@import "bleed.css";
+@import "page.css";
@import "hgrid.css";
@import "stack.css";
@import "responsive.css";
@@ -0,0 +1,50 @@
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--__ac-page-background);
+}
+
+/* Page.Block */
+.navds-pageblock {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.navds-page__content--grow {
+  flex-grow: 1;
+}
+
+.navds-page__content--fullheight {
+  min-height: 100vh;
+  min-height: 100lvh;
+}
+
+.navds-page__content--padding {
+  padding-block-end: var(--a-spacing-8);
+}
+
+.navds-pageblock--lg {
+  max-width: 1024px;
+}
+
+.navds-pageblock--xl {
+  max-width: 1280px;
+}
+
+.navds-pageblock--2xl {
+  max-width: 1440px;
+}
+
+.navds-pageblock--gutters {
+  padding-inline: var(--a-spacing-4);
+}
+
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    padding-inline: var(--a-spacing-12);
+  }
+}
@@ -1,5 +1,55 @@
 # @navikt/ds-react

+## 5.10.0
+
+### Minor Changes
+
+- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.10.0
+  - @navikt/aksel-icons@5.10.0
+
+## 5.9.2
+
+### Patch Changes
+
+- :bug: Datepicker lukker ikke lenger modalen den er i ([#2451](https://github.com/navikt/aksel/pull/2451))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.2
+  - @navikt/aksel-icons@5.9.2
+
+## 5.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.1
+  - @navikt/aksel-icons@5.9.1
+
+## 5.9.0
+
+### Minor Changes
+
+- Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+- Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
+
+### Patch Changes
+
+- Added useVirtualFocus hook - used in Combobox for now ([#2394](https://github.com/navikt/aksel/pull/2394))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.9.0
+  - @navikt/aksel-icons@5.9.0
+
 ## 5.8.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.8.0",
+  "version": "5.10.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.8.0",
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/aksel-icons": "^5.10.0",
+    "@navikt/ds-tokens": "^5.10.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -13,13 +13,13 @@ interface DateContextContextProps {
   * Aria-connected ID
   */
  ariaId?: string;
+  /**
+   * Flag for enabled-check
+   */
+  defined: boolean;
 }

-export const DateContext = createContext<DateContextContextProps>({
-  open: false,
-  onOpen: () => null,
-  ariaId: undefined,
-});
+export const DateContext = createContext<DateContextContextProps | null>(null);

 export const useDateInputContext = () => {
  const context = useContext(DateContext);
@@ -1,11 +1,11 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { Popover } from "../../popover";
-import { omit, useId } from "../../util";
-import { DatePickerInput } from "../DateInput";
+import { mergeRefs, omit, useId } from "../../util";
 import { DateContext } from "../context";
+import { DatePickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
@@ -79,7 +79,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      onClose,
      onOpenToggle,
      strategy,
-      bubbleEscape = false,
      onWeekNumberClick,
      ...rest
    },
@@ -89,6 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
    const [open, setOpen] = useState(_open ?? false);

    const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);

    const [selectedDates, setSelectedDates] = React.useState<
      Date | Date[] | DateRange | undefined
@@ -110,6 +110,44 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
      rest?.onSelect?.(newSelected);
    };

+    const DatePickerComponent = (
+      <DayPicker
+        locale={getLocaleFromString(locale)}
+        mode={mode}
+        onSelect={handleSelect}
+        selected={selected ?? selectedDates}
+        components={{
+          Caption: dropdownCaption ? DropdownCaption : Caption,
+          Head: TableHead,
+          HeadRow,
+          WeekNumber,
+          Row,
+          Day: DayButton,
+        }}
+        className={cl("navds-date", className)}
+        classNames={{
+          vhidden: "navds-sr-only",
+        }}
+        disabled={(day) => {
+          return (disableWeekends && isWeekend(day)) || isMatch(day, disabled);
+        }}
+        weekStartsOn={1}
+        initialFocus={false}
+        labels={labels as any}
+        modifiers={{
+          weekend: (day) => disableWeekends && isWeekend(day),
+        }}
+        modifiersClassNames={{
+          weekend: "rdp-day__weekend",
+        }}
+        showWeekNumber={showWeekNumber}
+        onWeekNumberClick={mode === "multiple" ? onWeekNumberClick : undefined}
+        fixedWeeks
+        showOutsideDays
+        {...omit(rest, ["onSelect"])}
+      />
+    );
+
    return (
      <DateContext.Provider
        value={{
@@ -119,72 +157,27 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
            onOpenToggle?.();
          },
          ariaId,
+          defined: true,
        }}
      >
        <div
-          ref={wrapperRef}
+          ref={mergedRef}
          className={cl("navds-date__wrapper", wrapperClassName)}
        >
          {children}
-          {(_open ?? open) && (
-            <Popover
-              arrow={false}
-              anchorEl={wrapperRef.current}
-              open={_open ?? open}
-              onClose={() => {
-                onClose?.() ?? setOpen(false);
-              }}
-              placement="bottom-start"
-              id={ariaId}
-              role="dialog"
-              ref={ref}
-              strategy={strategy}
-              className="navds-date__popover"
-              bubbleEscape={bubbleEscape}
-              flip={false}
-            >
-              <DayPicker
-                locale={getLocaleFromString(locale)}
-                mode={mode}
-                onSelect={handleSelect}
-                selected={selected ?? selectedDates}
-                components={{
-                  Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Head: TableHead,
-                  HeadRow,
-                  WeekNumber,
-                  Row,
-                  Day: DayButton,
-                }}
-                className={cl("navds-date", className)}
-                classNames={{
-                  vhidden: "navds-sr-only",
-                }}
-                disabled={(day) => {
-                  return (
-                    (disableWeekends && isWeekend(day)) ||
-                    isMatch(day, disabled)
-                  );
-                }}
-                weekStartsOn={1}
-                initialFocus={false}
-                labels={labels as any}
-                modifiers={{
-                  weekend: (day) => disableWeekends && isWeekend(day),
-                }}
-                modifiersClassNames={{
-                  weekend: "rdp-day__weekend",
-                }}
-                showWeekNumber={showWeekNumber}
-                onWeekNumberClick={
-                  mode === "multiple" ? onWeekNumberClick : undefined
-                }
-                fixedWeeks
-                showOutsideDays
-                {...omit(rest, ["onSelect"])}
-              />
-            </Popover>
-          )}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant={mode}
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            {DatePickerComponent}
+          </DateWrapper>
        </div>
      </DateContext.Provider>
    );
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
+import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";

 const disabledDays = [
@@ -18,7 +18,6 @@ export default {

 type DefaultStoryProps = DatePickerProps & {
  size: "medium" | "small";
-  openOnFocus: boolean;
  inputfield: boolean;
  standalone: boolean;
 };
@@ -30,13 +29,11 @@ export const Default: StoryObj<DefaultStoryProps> = {
    const rangeCtx = useRangeDatepicker({
      fromDate: new Date("Aug 23 2020"),
      toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
    });

    const singleCtx = useDatepicker({
      fromDate: new Date("Aug 23 2020"),
      toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
    });

    const newProps = {
@@ -111,7 +108,6 @@ export const Default: StoryObj<DefaultStoryProps> = {
    disableWeekends: false,
    showWeekNumber: false,
    mode: "single",
-    openOnFocus: true,
    inputfield: true,
    standalone: false,
  },
@@ -186,21 +182,6 @@ export const UseRangedDatepicker = () => {
  );
 };

-export const OpenOnFocus = () => {
-  const { datepickerProps, inputProps } = useDatepicker({
-    onDateChange: console.log,
-    openOnFocus: false,
-  });
-
-  return (
-    <div style={{ display: "flex", gap: "1rem" }}>
-      <DatePicker {...datepickerProps}>
-        <DatePicker.Input {...inputProps} label="Velg dato" />
-      </DatePicker>
-    </div>
-  );
-};
-
 export const NB = () => (
  <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
@@ -333,15 +314,32 @@ export const Size = () => {
    fromDate: new Date("Aug 23 2019"),
    toDate: new Date("Feb 23 2024"),
    onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
+  });
+  const { datepickerProps: d2, inputProps: i2 } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
  });

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="medium"
+          {...inputProps}
+          label="Velg dato"
+        />
      </DatePicker>
-      <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="small" {...inputProps} label="Velg dato" />
+      <DatePicker {...d2} dropdownCaption>
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="small"
+          {...i2}
+          label="Velg dato"
+        />
      </DatePicker>
    </div>
  );
@@ -439,35 +437,36 @@ export const ModalDemo = () => {
    toDate: new Date("Feb 23 2024"),
    onDateChange: console.log,
  });
+  const [open, setOpen] = useState(true);

  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>
+    <>
+      <Button onClick={() => setOpen(!open)}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        header={{ heading: "Modal-demo" }}
+      >
+        <Modal.Body style={{ position: "relative" }}>
+          <BodyLong spacing>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+          </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")}
+            <DatePicker.Input
+              {...inputProps}
+              label="Velg dato"
+              description="Format: dd.mm.yyyy"
            />
-          </HStack>
-        </HGrid>
-      </Modal.Body>
-    </Modal>
+          </DatePicker>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button>Neste</Button>
+          <Button variant="secondary">Tilbake</Button>
+          <Button variant="tertiary">Avbryt</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
  );
 };
+ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };
@@ -101,9 +101,4 @@ export interface DatePickerDefaultProps
   * @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,17 +1,15 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
  isValidDate,
  parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseDatepickerOptions
  extends Pick<
@@ -59,10 +57,10 @@ export interface UseDatepickerOptions
   */
  allowTwoDigitYear?: boolean;
  /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
   */
-  openOnFocus?: boolean;
+  openOnFocus?: false;
 }

 interface UseDatepickerValue {
@@ -76,7 +74,14 @@ interface UseDatepickerValue {
  inputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Resets all states (callback)
   */
@@ -143,14 +148,11 @@ export const useDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
  const locale = getLocaleFromString(_locale);

-  const inputRef = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
-
  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

  // Initialize states
@@ -172,14 +174,6 @@ export const useDatepicker = (
    [defaultMonth, defaultSelected, selectedDay, today]
  );

-  useOutsideClickHandler(open, handleOpen, [
-    daypickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
  const updateDate = (date?: Date) => {
    onDateChange?.(date);
    setSelectedDay(date);
@@ -207,7 +201,6 @@ export const useDatepicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && handleOpen(true);
    const day = parseDate(
      e.target.value,
      today,
@@ -243,7 +236,7 @@ export const useDatepicker = (
  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
    if (day && !selected) {
      handleOpen(false);
-      inputRef.current && inputRef.current.focus();
+      anchorRef?.focus();
    }

    if (!required && selected) {
@@ -319,11 +312,13 @@ export const useDatepicker = (
    toDate,
    today,
    open,
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
    onOpenToggle: () => handleOpen(!open),
    disabled,
    disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
  };

  const inputProps = {
@@ -331,7 +326,7 @@ export const useDatepicker = (
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
  };

  return { datepickerProps, inputProps, reset, selectedDay, setSelected };
@@ -1,30 +0,0 @@
-import { useCallback, useEffect, RefObject } from "react";
-
-export const useEscape = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  focusRef: RefObject<HTMLElement>
-) => {
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    focusRef?.current && focusRef.current.focus();
-  }, [focusRef, setOpen]);
-
-  const escape = useCallback(
-    (event: KeyboardEvent) => {
-      if (open && event.key === "Escape") {
-        event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
-        handleClose();
-      }
-    },
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-};
@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { DateInputProps } from "../DateInput";
+import React, { useCallback, useMemo, useState } from "react";
 import { MonthPickerProps } from "../monthpicker/types";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
@@ -8,8 +8,6 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseMonthPickerOptions
  extends Pick<
@@ -45,8 +43,8 @@ export interface UseMonthPickerOptions
   */
  allowTwoDigitYear?: boolean;
  /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
   */
  openOnFocus?: boolean;
 }
@@ -60,7 +58,12 @@ interface UseMonthPickerValue {
   * Use: <MonthPicker.Input {...inputProps} />
   */
  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
-    ref: React.RefObject<HTMLInputElement>;
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
  };
  /**
   * Currently selected Date
@@ -138,17 +141,14 @@ export const useMonthpicker = (
    onValidate,
    defaultYear,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

  const today = useMemo(() => new Date(), []);
  const locale = getLocaleFromString(_locale);

-  const inputRef = useRef<HTMLInputElement>(null);
-  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();
-
  // Initialize states
  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
  const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
@@ -169,14 +169,6 @@ export const useMonthpicker = (
    [defaultSelected, defaultYear, selectedMonth, today]
  );

-  useOutsideClickHandler(open, handleOpen, [
-    monthpickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
  const updateMonth = (date?: Date) => {
    onMonthChange?.(date);
    setSelectedMonth(date);
@@ -204,7 +196,7 @@ export const useMonthpicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && handleOpen(true);
+
    const day = parseDate(
      e.target.value,
      today,
@@ -239,8 +231,8 @@ export const useMonthpicker = (
  const handleMonthClick = (month?: Date) => {
    if (month) {
      handleOpen(false);
-      inputRef.current && inputRef.current.focus();
      setYear(month);
+      anchorRef?.focus();
    }

    if (!required && !month) {
@@ -314,9 +306,11 @@ export const useMonthpicker = (
    toDate,
    open,
    onOpenToggle: () => handleOpen(!open),
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
    disabled,
-    bubbleEscape: true,
-    ref: setMonthpickerRef,
  };

  const inputProps = {
@@ -324,7 +318,7 @@ export const useMonthpicker = (
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
  };

  return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
@@ -1,34 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-export const useOutsideClickHandler = (
-  open: boolean,
-  setOpen: (openState: boolean) => void,
-  refs: Array<any>
-) => {
-  const handleFocusIn = useCallback(
-    (e) => {
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      if (
-        !refs.some(
-          (element) =>
-            element?.contains(e.target) || element?.contains(composed)
-        )
-      ) {
-        open && setOpen(false);
-      }
-    },
-    [open, refs, setOpen]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-};
@@ -1,10 +1,10 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
  formatDateForInput,
  getLocaleFromString,
@@ -12,8 +12,6 @@ import {
  parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export type RangeValidationT = {
  from: DateValidationT;
@@ -74,14 +72,28 @@ interface UseRangeDatepickerValue {
  fromInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Use: <DatePicker.Input label="to" {...toInputProps}/>
   */
  toInputProps: Pick<
    DateInputProps,
    "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef?: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
  /**
   * Resets all states (callback)
   */
@@ -218,14 +230,11 @@ export const useRangeDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
-    openOnFocus = true,
  } = opt;

-  const locale = getLocaleFromString(_locale);
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);

-  const inputRefTo = useRef<HTMLInputElement>(null);
-  const inputRefFrom = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
+  const locale = getLocaleFromString(_locale);

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -255,20 +264,6 @@ export const useRangeDatepicker = (

  const [open, setOpen] = useState(false);

-  useOutsideClickHandler(open, setOpen, [
-    daypickerRef,
-    inputRefTo.current,
-    inputRefFrom.current,
-    inputRefTo.current?.nextSibling,
-    inputRefFrom.current?.nextSibling,
-  ]);
-
-  useEscape(
-    open,
-    setOpen,
-    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
-  );
-
  const updateRange = (range?: DateRange) => {
    onRangeChange?.(range);
    setSelectedRange(range);
@@ -324,7 +319,6 @@ export const useRangeDatepicker = (
    if (e.target.readOnly) {
      return;
    }
-    !open && openOnFocus && setOpen(true);
    const day = parseDate(
      e.target.value,
      today,
@@ -378,6 +372,7 @@ export const useRangeDatepicker = (
  const handleSelect = (range) => {
    if (range?.from && range?.to) {
      setOpen(false);
+      anchorRef?.focus();
    }
    const prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
@@ -545,10 +540,12 @@ export const useRangeDatepicker = (
    mode: "range" as const,
    open,
    onOpenToggle: () => setOpen((x) => !x),
+    onClose: () => {
+      setOpen(false);
+      anchorRef?.focus();
+    },
    disabled,
    disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
  };

  const fromInputProps = {
@@ -556,7 +553,7 @@ export const useRangeDatepicker = (
    onFocus: (e) => handleFocus(e, RANGE.FROM),
    onBlur: (e) => handleBlur(e, RANGE.FROM),
    value: fromInputValue,
-    ref: inputRefFrom,
+    setAnchorRef,
  };

  const toInputProps = {
@@ -564,7 +561,7 @@ export const useRangeDatepicker = (
    onFocus: (e) => handleFocus(e, RANGE.TO),
    onBlur: (e) => handleBlur(e, RANGE.TO),
    value: toInputValue,
-    ref: inputRefTo,
+    setAnchorRef,
  };

  return {
@@ -1,4 +1,3 @@
-export { type DateInputProps } from "./DateInput";
 export {
  default as DatePicker,
  type DatePickerProps,
@@ -15,3 +14,4 @@ export {
 export { default as MonthPicker } from "./monthpicker/MonthPicker";
 export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export { type MonthPickerProps } from "./monthpicker/types";
+export { type DateInputProps } from "./parts/DateInput";
@@ -1,10 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { Popover } from "../../popover";
-import { useId } from "../../util";
-import { MonthPickerInput } from "../DateInput";
+import { mergeRefs, useId } from "../../util";
 import { DateContext, SharedMonthProvider } from "../context";
+import { MonthPickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
@@ -74,7 +74,6 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
      year,
      onYearChange,
      strategy = "absolute",
-      bubbleEscape = false,
    },
    ref
  ) => {
@@ -82,6 +81,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    const [open, setOpen] = useState(_open ?? false);

    const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);

    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
      defaultSelected
@@ -107,51 +107,47 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
            onOpenToggle?.();
          },
          ariaId,
+          defined: true,
        }}
      >
        <div
-          ref={wrapperRef}
+          ref={mergedRef}
          className={cl("navds-date__wrapper", wrapperClassName)}
        >
          {children}
-          {(_open ?? open) && (
-            <Popover
-              arrow={false}
-              anchorEl={wrapperRef.current}
-              open={_open ?? open}
-              onClose={() => onClose?.() ?? setOpen(false)}
-              placement="bottom-start"
-              role="dialog"
-              ref={ref}
-              id={ariaId}
-              className="navds-date navds-date__popover"
-              strategy={strategy}
-              bubbleEscape={bubbleEscape}
-              flip={false}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant="month"
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            <RootProvider
+              locale={getLocaleFromString(locale)}
+              selected={selected ?? selectedMonth}
+              toDate={toDate}
+              fromDate={fromDate}
+              month={selected ?? selectedMonth}
            >
-              <RootProvider
-                locale={getLocaleFromString(locale)}
-                selected={selected ?? selectedMonth}
-                toDate={toDate}
-                fromDate={fromDate}
-                month={selected ?? selectedMonth}
-              >
-                <div className={cl("rdp-month", className)}>
-                  <SharedMonthProvider
-                    dropdownCaption={dropdownCaption}
-                    disabled={disabled}
-                    selected={selected ?? selectedMonth}
-                    onSelect={handleSelect}
-                    year={year}
-                    onYearChange={onYearChange}
-                  >
-                    <MonthCaption />
-                    <MonthSelector />
-                  </SharedMonthProvider>
-                </div>
-              </RootProvider>
-            </Popover>
-          )}
+              <div className={cl("rdp-month", className)}>
+                <SharedMonthProvider
+                  dropdownCaption={dropdownCaption}
+                  disabled={disabled}
+                  selected={selected ?? selectedMonth}
+                  onSelect={handleSelect}
+                  year={year}
+                  onYearChange={onYearChange}
+                >
+                  <MonthCaption />
+                  <MonthSelector />
+                </SharedMonthProvider>
+              </div>
+            </RootProvider>
+          </DateWrapper>
        </div>
      </DateContext.Provider>
    );
@@ -75,9 +75,4 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   * @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,11 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
-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";
+import React, { forwardRef, InputHTMLAttributes, useRef } from "react";
+import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { useDateInputContext } from "../context";

 export interface DateInputProps
  extends FormFieldProps,
@@ -28,6 +28,10 @@ export interface DateInputProps
   * @private
   */
  variant?: "datepicker" | "monthpicker";
+  /**
+   * @private
+   */
+  setAnchorRef?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
 }

 const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
@@ -37,9 +41,12 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
    label,
    description,
    variant = "datepicker",
+    setAnchorRef,
    ...rest
  } = props;

+  const buttonRef = useRef<HTMLButtonElement>(null);
+
  const isDatepickerVariant = variant === "datepicker";

  const conditionalVariables = {
@@ -50,7 +57,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
    },
  };

-  const { onOpen, ariaId, open } = useDateInputContext();
+  const context = useDateInputContext();

  const {
    inputProps,
@@ -108,7 +115,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
          {...omit(rest, ["error", "errorId", "size"])}
          {...inputProps}
          autoComplete="off"
-          aria-controls={open ? ariaId : undefined}
+          aria-controls={context?.open ? context.ariaId : undefined}
          readOnly={readOnly}
          className={cl(
            "navds-date__field-input",
@@ -116,19 +123,23 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
            "navds-body-short",
            `navds-body-short--${size}`
          )}
-          size={isDatepickerVariant ? 10 : 14}
+          size={isDatepickerVariant ? 11 : 14}
        />
        <button
          disabled={inputProps.disabled || readOnly}
-          tabIndex={readOnly ? -1 : open ? -1 : 0}
-          onClick={() => onOpen()}
+          tabIndex={readOnly ? -1 : context?.open ? -1 : 0}
+          onClick={() => {
+            context?.onOpen();
+            setAnchorRef?.(buttonRef.current);
+          }}
          type="button"
          className="navds-date__field-button"
+          ref={buttonRef}
        >
          <CalendarIcon
            pointerEvents="none"
            title={
-              open
+              context?.open
                ? conditionalVariables.iconTitle.close
                : conditionalVariables.iconTitle.open
            }
@@ -0,0 +1,83 @@
+import cl from "clsx";
+import React, { useContext, useRef } from "react";
+import { Button } from "../../button";
+import { Modal } from "../../modal";
+import { ModalContext } from "../../modal/ModalContext";
+import { Popover } from "../../popover";
+import { useMedia } from "../../util/useMedia";
+import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
+
+type DateWrapperProps = {
+  open: boolean;
+  children: React.ReactNode;
+  onClose: () => void;
+  anchor: HTMLDivElement | null;
+  locale: "nb" | "nn" | "en";
+  variant: "single" | "multiple" | "range" | "month";
+  popoverProps: {
+    id?: string;
+    strategy?: "absolute" | "fixed";
+  };
+};
+
+export const DateWrapper = ({
+  open,
+  children,
+  onClose,
+  anchor,
+  locale,
+  variant,
+  popoverProps,
+}: DateWrapperProps) => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const isInModal = useContext(ModalContext) !== null;
+  const hideModal =
+    useMedia("screen and (min-width: 768px)", true) && !isInModal;
+
+  if (hideModal) {
+    return (
+      <Popover
+        arrow={false}
+        anchorEl={anchor}
+        open={open}
+        onClose={onClose}
+        placement="bottom-start"
+        role="dialog"
+        className={cl("navds-date__popover", {
+          "navds-date": variant === "month",
+        })}
+        flip={false}
+        {...popoverProps}
+      >
+        {children}
+      </Popover>
+    );
+  }
+  return (
+    <Modal
+      ref={modalRef}
+      open={open}
+      onClose={(event) => {
+        event.stopPropagation();
+        onClose();
+      }}
+      aria-label={modalLabel(locale, variant)}
+      className={cl("navds-date__modal", {
+        "navds-date__nested-modal": isInModal,
+        "navds-date": variant === "month",
+      })}
+      closeOnBackdropClick
+    >
+      <div className="navds-date__modal-body">
+        {children}
+        <Button
+          variant="tertiary"
+          onClick={() => modalRef?.current?.close()}
+          size="small"
+        >
+          {modalCloseButtonLabel(locale)}
+        </Button>
+      </div>
+    </Modal>
+  );
+};
@@ -133,3 +133,86 @@ export const labelWeek = (localeCode?: string): string => {
      return `Uke:`;
  }
 };
+
+const modalLabelSingle = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg dato`;
+    case "nn":
+      return `Vel dato`;
+    case "en-GB":
+      return `Pick a date`;
+    default:
+      return `Velg dato`;
+  }
+};
+
+const modalLabelMultiple = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg datoer`;
+    case "nn":
+      return `Vel datoar`;
+    case "en-GB":
+      return `Pick dates`;
+    default:
+      return `Velg datoer`;
+  }
+};
+
+const modalLabelRanged = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg start- og sluttdato`;
+    case "nn":
+      return `Vel start- og sluttdato`;
+    case "en-GB":
+      return `Pick a start and end date`;
+    default:
+      return `Velg start- og sluttdato`;
+  }
+};
+
+const modalLabelMonth = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg måned`;
+    case "nn":
+      return `Vel månad`;
+    case "en-GB":
+      return `Pick a month`;
+    default:
+      return `Velg måned`;
+  }
+};
+
+export const modalLabel = (
+  localeCode: string,
+  variant: "single" | "multiple" | "range" | "month"
+) => {
+  switch (variant) {
+    case "single":
+      return modalLabelSingle(localeCode);
+    case "multiple":
+      return modalLabelMultiple(localeCode);
+    case "range":
+      return modalLabelRanged(localeCode);
+    case "month":
+      return modalLabelMonth(localeCode);
+    default:
+      return modalLabelSingle(localeCode);
+  }
+};
+
+export const modalCloseButtonLabel = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Lukk`;
+    case "nn":
+      return `Lukk`;
+    case "en-GB":
+      return `Close`;
+    default:
+      return `Lukk`;
+  }
+};
@@ -33,7 +33,7 @@ export const Combobox = forwardRef<

  const toggleListButtonRef = useRef<HTMLButtonElement>(null);

-  const { currentOption, toggleIsListOpen } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
  const { selectedOptions } = useSelectedOptionsContext();

  const {
@@ -92,7 +92,7 @@ export const Combobox = forwardRef<
            "navds-combobox__wrapper-inner navds-text-field__input",
            {
              "navds-combobox__wrapper-inner--virtually-unfocused":
-                currentOption !== null,
+                activeDecendantId !== null,
            }
          )}
          onClick={focusInput}
@@ -65,7 +65,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
          size,
        }}
      >
-        <CustomOptionsProvider>
+        <CustomOptionsProvider value={{ isMultiSelect }}>
          <SelectedOptionsProvider
            value={{
              allowNewValues,
@@ -81,7 +81,6 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
                filteredOptions,
                isListOpen,
                isLoading,
-                isMultiSelect,
                options,
              }}
            >
@@ -6,6 +6,7 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import filteredOptionsUtil from "./filtered-options-util";

 const FilteredOptions = () => {
  const {
@@ -18,25 +19,25 @@ const FilteredOptions = () => {
    isLoading,
    isListOpen,
    filteredOptions,
-    filteredOptionsIndex,
-    filteredOptionsRef,
+    setFilteredOptionsRef,
    isMouseLastUsedInputDevice,
    setIsMouseLastUsedInputDevice,
    isValueNew,
-    setFilteredOptionsIndex,
    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
  } = useFilteredOptionsContext();
  const { isMultiSelect, selectedOptions, toggleOption } =
    useSelectedOptionsContext();

  return (
    <ul
-      ref={filteredOptionsRef}
+      ref={setFilteredOptionsRef}
      className={cl("navds-combobox__list", {
        "navds-combobox__list--closed": !isListOpen,
        "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
      })}
-      id={`${id}-filtered-options`}
+      id={filteredOptionsUtil.getFilteredOptionsId(id)}
      role="listbox"
      tabIndex={-1}
    >
@@ -45,7 +46,8 @@ const FilteredOptions = () => {
          className="navds-combobox__list-item--loading"
          role="option"
          aria-selected={false}
-          id={`${id}-is-loading`}
+          id={filteredOptionsUtil.getIsLoadingId(id)}
+          data-no-focus="true"
        >
          <Loader aria-label="Søker..." />
        </li>
@@ -54,8 +56,12 @@ const FilteredOptions = () => {
        <li
          tabIndex={-1}
          onMouseMove={() => {
-            if (filteredOptionsIndex !== -1) {
-              setFilteredOptionsIndex(-1);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getAddNewOptionId(id)
+              );
              setIsMouseLastUsedInputDevice(true);
            }
          }}
@@ -64,10 +70,10 @@ const FilteredOptions = () => {
            if (!isMultiSelect && !selectedOptions.includes(value))
              toggleIsListOpen(false);
          }}
-          id={`${id}-combobox-new-option`}
+          id={filteredOptionsUtil.getAddNewOptionId(id)}
          className={cl("navds-combobox__list-item__new-option", {
            "navds-combobox__list-item__new-option--focus":
-              filteredOptionsIndex === -1,
+              activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
          })}
          role="option"
          aria-selected={false}
@@ -86,24 +92,30 @@ const FilteredOptions = () => {
          className="navds-combobox__list-item__no-options"
          role="option"
          aria-selected={false}
-          id={`${id}-no-hits`}
+          id={filteredOptionsUtil.getNoHitsId(id)}
+          data-no-focus="true"
        >
          Ingen søketreff
        </li>
      )}
-      {filteredOptions.map((option, index) => (
+      {filteredOptions.map((option) => (
        <li
          className={cl("navds-combobox__list-item", {
-            "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+            "navds-combobox__list-item--focus":
+              activeDecendantId === filteredOptionsUtil.getOptionId(id, option),
            "navds-combobox__list-item--selected":
              selectedOptions.includes(option),
          })}
-          id={`${id}-option-${option.replace(" ", "-")}`}
+          id={filteredOptionsUtil.getOptionId(id, option)}
          key={option}
          tabIndex={-1}
          onMouseMove={() => {
-            if (filteredOptionsIndex !== index) {
-              setFilteredOptionsIndex(index);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getOptionId(id, option)
+              );
              setIsMouseLastUsedInputDevice(true);
            }
          }}
@@ -0,0 +1,38 @@
+const normalizeText = (text: string): string =>
+  typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
+
+const isPartOfText = (value, text) =>
+  normalizeText(text).startsWith(normalizeText(value ?? ""));
+
+const isValueInList = (value, list) =>
+  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
+
+const getMatchingValuesFromList = (value, list) =>
+  list?.filter((listItem) => isPartOfText(value, listItem));
+
+const getFilteredOptionsId = (comboboxId: string) =>
+  `${comboboxId}-filtered-options`;
+
+const getOptionId = (comboboxId: string, option: string) =>
+  `${comboboxId.toLocaleLowerCase()}-option-${option
+    .replace(" ", "-")
+    .toLocaleLowerCase()}`;
+
+const getAddNewOptionId = (comboboxId: string) =>
+  `${comboboxId}-combobox-new-option`;
+
+const getIsLoadingId = (comboboxId: string) => `${comboboxId}-is-loading`;
+
+const getNoHitsId = (comboboxId: string) => `${comboboxId}-no-hits`;
+
+export default {
+  normalizeText,
+  isPartOfText,
+  isValueInList,
+  getMatchingValuesFromList,
+  getFilteredOptionsId,
+  getAddNewOptionId,
+  getOptionId,
+  getIsLoadingId,
+  getNoHitsId,
+};
@@ -1,11 +1,9 @@
 import React, {
  useState,
-  useEffect,
  useMemo,
  createContext,
  useContext,
  useCallback,
-  useRef,
  SetStateAction,
 } from "react";
 import cl from "clsx";
@@ -13,26 +11,29 @@ import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
 import { useClientLayoutEffect } from "../../../util";
+import filteredOptionsUtils from "./filtered-options-util";
+import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
+import { ComboboxProps } from "../types";

-const normalizeText = (text: string): string =>
-  typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
-
-const isPartOfText = (value, text) =>
-  normalizeText(text).startsWith(normalizeText(value ?? ""));
-
-const isValueInList = (value, list) =>
-  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
-
-const getMatchingValuesFromList = (value, list) =>
-  list?.filter((listItem) => isPartOfText(value, listItem));
+type FilteredOptionsProps = {
+  children: any;
+  value: Pick<
+    ComboboxProps,
+    | "allowNewValues"
+    | "filteredOptions"
+    | "isListOpen"
+    | "isLoading"
+    | "options"
+  >;
+};

 type FilteredOptionsContextType = {
  activeDecendantId?: string;
  allowNewValues?: boolean;
  ariaDescribedBy?: string;
-  filteredOptionsRef: React.RefObject<HTMLUListElement>;
-  filteredOptionsIndex: number | null;
-  setFilteredOptionsIndex: (index: number) => void;
+  setFilteredOptionsRef: React.Dispatch<
+    React.SetStateAction<HTMLUListElement | null>
+  >;
  isListOpen: boolean;
  isLoading?: boolean;
  filteredOptions: string[];
@@ -40,19 +41,18 @@ type FilteredOptionsContextType = {
  setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
  isValueNew: boolean;
  toggleIsListOpen: (newState?: boolean) => void;
-  currentOption: string | null;
-  resetFilteredOptionsIndex: () => void;
-  moveFocusUp: () => void;
-  moveFocusDown: () => void;
-  moveFocusToInput: () => void;
-  moveFocusToEnd: () => void;
+  currentOption?: string;
  shouldAutocomplete?: boolean;
+  virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
  {} as FilteredOptionsContextType
 );

-export const FilteredOptionsProvider = ({ children, value: props }) => {
+export const FilteredOptionsProvider = ({
+  children,
+  value: props,
+}: FilteredOptionsProps) => {
  const {
    allowNewValues,
    filteredOptions: externalFilteredOptions,
@@ -60,7 +60,9 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    isLoading,
    options,
  } = props;
-  const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
+  const [filteredOptionsRef, setFilteredOptionsRef] =
+    useState<HTMLUListElement | null>(null);
+  const virtualFocus = useVirtualFocus(filteredOptionsRef);
  const {
    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
    value,
@@ -70,9 +72,6 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    shouldAutocomplete,
  } = useInputContext();

-  const [filteredOptionsIndex, setFilteredOptionsIndex] = useState<
-    number | null
-  >(null);
  const [isInternalListOpen, setInternalListOpen] = useState(false);
  const { customOptions } = useCustomOptionsContext();

@@ -81,8 +80,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
      return externalFilteredOptions;
    }
    const opts = [...customOptions, ...options];
-    setFilteredOptionsIndex(null);
-    return getMatchingValuesFromList(searchTerm, opts);
+    return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
  }, [customOptions, externalFilteredOptions, options, searchTerm]);

  const previousSearchTerm = usePrevious(searchTerm);
@@ -90,10 +88,26 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
  const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
    useState(false);

+  const filteredOptionsMap = useMemo(
+    () =>
+      options.reduce(
+        (map, _option) => ({
+          ...map,
+          [filteredOptionsUtils.getOptionId(id, _option)]: _option,
+        }),
+        {
+          [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
+            ? value
+            : undefined,
+        }
+      ),
+    [allowNewValues, id, options, value]
+  );
+
  useClientLayoutEffect(() => {
    if (
      shouldAutocomplete &&
-      normalizeText(searchTerm) !== "" &&
+      filteredOptionsUtils.normalizeText(searchTerm) !== "" &&
      (previousSearchTerm?.length || 0) < searchTerm.length &&
      filteredOptions.length > 0
    ) {
@@ -115,29 +129,30 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    return isExternalListOpen ?? isInternalListOpen;
  }, [isExternalListOpen, isInternalListOpen]);

-  const toggleIsListOpen = useCallback((newState?: boolean) => {
-    setFilteredOptionsIndex(null);
-    setInternalListOpen((oldState) => newState ?? !oldState);
-  }, []);
-
-  const isValueNew = useMemo(
-    () => Boolean(value) && !isValueInList(value, filteredOptions),
-    [value, filteredOptions]
+  const toggleIsListOpen = useCallback(
+    (newState?: boolean) => {
+      virtualFocus.moveFocusToTop();
+      setInternalListOpen((oldState) => newState ?? !oldState);
+    },
+    [virtualFocus]
  );

-  const getMinimumIndex = useCallback(() => {
-    return isValueNew && allowNewValues ? -1 : 0;
-  }, [allowNewValues, isValueNew]);
+  const isValueNew = useMemo(
+    () =>
+      Boolean(value) &&
+      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
+    [filteredOptionsMap, id, value]
+  );

  const ariaDescribedBy = useMemo(() => {
    let activeOption;
    if (!isLoading && filteredOptions.length === 0) {
-      activeOption = `${id}-no-hits`;
+      activeOption = filteredOptionsUtils.getNoHitsId(id);
    } else if ((value && value !== "") || isLoading) {
      if (shouldAutocomplete && filteredOptions[0]) {
-        activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+        activeOption = filteredOptionsUtils.getOptionId(id, filteredOptions[0]);
      } else if (isListOpen && isLoading) {
-        activeOption = `${id}-is-loading`;
+        activeOption = filteredOptionsUtils.getIsLoadingId(id);
      }
    }
    return cl(activeOption, partialAriaDescribedBy) || undefined;
@@ -151,102 +166,21 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    id,
  ]);

-  const currentOption = useMemo(() => {
-    if (filteredOptionsIndex == null) {
-      return null;
-    }
-    if (filteredOptionsIndex === -1) {
-      return value;
-    }
-    return filteredOptions[filteredOptionsIndex];
-  }, [filteredOptionsIndex, filteredOptions, value]);
+  const currentOption = useMemo(
+    () =>
+      filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
+    [filteredOptionsMap, virtualFocus]
+  );

-  const resetFilteredOptionsIndex = () => {
-    setFilteredOptionsIndex(getMinimumIndex());
-  };
-
-  const scrollToOption = useCallback((newIndex: number) => {
-    if (
-      filteredOptionsRef.current &&
-      filteredOptionsRef.current.children[newIndex]
-    ) {
-      const child = filteredOptionsRef.current.children[newIndex];
-      const { top, bottom } = child.getBoundingClientRect();
-      const parentRect = filteredOptionsRef.current.getBoundingClientRect();
-      if (top < parentRect.top || bottom > parentRect.bottom) {
-        child.scrollIntoView({ block: "nearest" });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (filteredOptionsIndex !== null && isListOpen) {
-      scrollToOption(filteredOptionsIndex);
-    }
-  }, [filteredOptionsIndex, isListOpen, scrollToOption]);
-
-  const moveFocusToInput = useCallback(() => {
-    setFilteredOptionsIndex(null);
-    toggleIsListOpen(false);
-  }, [toggleIsListOpen]);
-
-  const moveFocusToEnd = useCallback(() => {
-    const lastIndex = filteredOptions.length - 1;
-    toggleIsListOpen(true);
-    setFilteredOptionsIndex(lastIndex);
-  }, [filteredOptions.length, toggleIsListOpen]);
-
-  const moveFocusUp = useCallback(() => {
-    if (filteredOptionsIndex === null) {
-      return;
-    }
-    if (filteredOptionsIndex === getMinimumIndex()) {
-      toggleIsListOpen(false);
-      setFilteredOptionsIndex(null);
-    } else {
-      const newIndex = Math.max(getMinimumIndex(), filteredOptionsIndex - 1);
-      setFilteredOptionsIndex(newIndex);
-    }
-  }, [filteredOptionsIndex, getMinimumIndex, toggleIsListOpen]);
-
-  const moveFocusDown = useCallback(() => {
-    if (filteredOptionsIndex === null || !isListOpen) {
-      toggleIsListOpen(true);
-      if (allowNewValues || filteredOptions.length >= 1) {
-        setFilteredOptionsIndex(getMinimumIndex());
-      }
-      return;
-    }
-    const newIndex = Math.min(
-      filteredOptionsIndex + 1,
-      Math.max(getMinimumIndex(), filteredOptions.length - 1)
-    );
-    setFilteredOptionsIndex(newIndex);
-  }, [
-    allowNewValues,
-    filteredOptions.length,
-    filteredOptionsIndex,
-    getMinimumIndex,
-    isListOpen,
-    toggleIsListOpen,
-  ]);
-
-  const activeDecendantId = useMemo(() => {
-    if (filteredOptionsIndex === null) {
-      return undefined;
-    } else if (filteredOptionsIndex === -1) {
-      return `${id}-combobox-new-option`;
-    } else {
-      return `${id}-option-${currentOption?.replace(" ", "-")}`;
-    }
-  }, [filteredOptionsIndex, currentOption, id]);
+  const activeDecendantId = useMemo(
+    () => virtualFocus.activeElement?.getAttribute("id") || undefined,
+    [virtualFocus.activeElement]
+  );

  const filteredOptionsState = {
    activeDecendantId,
    allowNewValues,
-    filteredOptionsRef,
-    filteredOptionsIndex,
-    setFilteredOptionsIndex,
+    setFilteredOptionsRef,
    shouldAutocomplete,
    isListOpen,
    isLoading,
@@ -256,11 +190,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
    isValueNew,
    toggleIsListOpen,
    currentOption,
-    resetFilteredOptionsIndex,
-    moveFocusUp,
-    moveFocusDown,
-    moveFocusToInput,
-    moveFocusToEnd,
+    virtualFocus,
    ariaDescribedBy,
  };

@@ -0,0 +1,87 @@
+import { Dispatch, SetStateAction, useState } from "react";
+
+export type VirtualFocusType = {
+  activeElement: HTMLElement | undefined;
+  getElementById: (id: string) => HTMLElement | undefined;
+  isFocusOnTheTop: boolean;
+  isFocusOnTheBottom: boolean;
+  setIndex: Dispatch<SetStateAction<number>>;
+  moveFocusUp: () => void;
+  moveFocusDown: () => void;
+  moveFocusToElement: (id: string) => void;
+  moveFocusToTop: () => void;
+  moveFocusToBottom: () => void;
+};
+
+const useVirtualFocus = (
+  containerRef: HTMLElement | null
+): VirtualFocusType => {
+  const [index, setIndex] = useState(-1);
+
+  const listOfAllChildren: Array<HTMLElement> = containerRef?.children
+    ? Array.prototype.slice.call(containerRef?.children)
+    : [];
+  const elementsAbleToReceiveFocus = listOfAllChildren.filter(
+    (child) => child.getAttribute("data-no-focus") !== "true"
+  );
+
+  const activeElement = elementsAbleToReceiveFocus[index];
+  const getElementById = (id: string) =>
+    listOfAllChildren.find((element) => element.id === id);
+  const isFocusOnTheTop = index === 0;
+  const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
+
+  const scrollToOption = (newIndex: number) => {
+    const indexOfElementToScrollTo = Math.min(
+      Math.max(newIndex, 0),
+      containerRef?.children.length || 0
+    );
+    if (containerRef?.children[indexOfElementToScrollTo]) {
+      const child = containerRef.children[indexOfElementToScrollTo];
+      const { top, bottom } = child.getBoundingClientRect();
+      const parentRect = containerRef.getBoundingClientRect();
+      if (top < parentRect.top || bottom > parentRect.bottom) {
+        child.scrollIntoView({ block: "nearest" });
+      }
+    }
+  };
+
+  const _moveFocusAndScrollTo = (_index: number) => {
+    setIndex(_index);
+    scrollToOption(_index);
+  };
+  const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
+  const moveFocusDown = () =>
+    _moveFocusAndScrollTo(
+      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1)
+    );
+  const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
+  const moveFocusToBottom = () =>
+    _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
+  const moveFocusToElement = (id: string) => {
+    const thisElement = elementsAbleToReceiveFocus.find(
+      (_element) => _element.getAttribute("id") === id
+    );
+    const indexOfElement = thisElement
+      ? elementsAbleToReceiveFocus.indexOf(thisElement)
+      : -1;
+    if (indexOfElement >= 0) {
+      setIndex(indexOfElement);
+    }
+  };
+
+  return {
+    activeElement,
+    getElementById,
+    isFocusOnTheTop,
+    isFocusOnTheBottom,
+    setIndex,
+    moveFocusUp,
+    moveFocusDown,
+    moveFocusToElement,
+    moveFocusToTop,
+    moveFocusToBottom,
+  };
+};
+
+export default useVirtualFocus;
@@ -9,6 +9,7 @@ import cl from "clsx";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./inputContext";
+import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";

 interface InputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
@@ -34,15 +35,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      isValueNew,
      toggleIsListOpen,
      isListOpen,
-      filteredOptionsIndex,
-      moveFocusUp,
-      moveFocusDown,
      ariaDescribedBy,
-      moveFocusToInput,
-      moveFocusToEnd,
-      setFilteredOptionsIndex,
      setIsMouseLastUsedInputDevice,
      shouldAutocomplete,
+      virtualFocus,
    } = useFilteredOptionsContext();

    const onEnter = useCallback(
@@ -57,8 +53,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          event.preventDefault();
          // Selecting a value from the dropdown / FilteredOptions
          toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
            toggleIsListOpen(false);
+          }
        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
          event.preventDefault();
          // Trying to set the same value that is already set, so just clearing the input
@@ -104,10 +101,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          onEnter(e);
          break;
        case "Home":
-          moveFocusToInput();
+          virtualFocus.moveFocusToTop();
          break;
        case "End":
-          moveFocusToEnd();
+          virtualFocus.moveFocusToBottom();
          break;
        default:
          break;
@@ -128,14 +125,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          // so we don't interfere with text editing
          if (e.target.selectionStart === value?.length) {
            e.preventDefault();
-            moveFocusDown();
+            if (virtualFocus.activeElement === null || !isListOpen) {
+              toggleIsListOpen(true);
+            }
+            virtualFocus.moveFocusDown();
          }
        } else if (e.key === "ArrowUp") {
          // Check that the FilteredOptions list is open and has virtual focus.
          // Otherwise ignore keystrokes, so it doesn't interfere with text editing
-          if (isListOpen && filteredOptionsIndex !== null) {
+          if (isListOpen && activeDecendantId) {
            e.preventDefault();
-            moveFocusUp();
+            if (virtualFocus.isFocusOnTheTop) {
+              toggleIsListOpen(false);
+            }
+            virtualFocus.moveFocusUp();
          }
        }
      },
@@ -143,11 +146,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        value,
        selectedOptions,
        removeSelectedOption,
-        moveFocusDown,
        isListOpen,
-        filteredOptionsIndex,
-        moveFocusUp,
+        activeDecendantId,
        setIsMouseLastUsedInputDevice,
+        toggleIsListOpen,
+        virtualFocus,
      ]
    );

@@ -159,13 +162,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        } else if (filteredOptions.length === 0) {
          toggleIsListOpen(false);
        }
+        virtualFocus.moveFocusToTop();
        onChange(event);
      },
-      [filteredOptions.length, onChange, toggleIsListOpen]
+      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
    );

    const onBlur = () => {
-      setFilteredOptionsIndex(-1);
+      virtualFocus.moveFocusToTop();
    };

    return (
@@ -180,7 +184,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
        onBlur={onBlur}
        onKeyUp={handleKeyUp}
        onKeyDown={handleKeyDown}
-        aria-controls={`${inputProps.id}-filtered-options`}
+        aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
        aria-expanded={!!isListOpen}
        autoComplete="off"
        aria-autocomplete={shouldAutocomplete ? "both" : "list"}
@@ -1,6 +1,5 @@
 import React, { useState, useCallback, createContext, useContext } from "react";
 import { useInputContext } from "./Input/inputContext";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";

 type CustomOptionsContextType = {
  customOptions: string[];
@@ -13,13 +12,19 @@ const CustomOptionsContext = createContext<CustomOptionsContextType>(
  {} as CustomOptionsContextType
 );

-export const CustomOptionsProvider = ({ children }) => {
+export const CustomOptionsProvider = ({
+  children,
+  value,
+}: {
+  children: any;
+  value: { isMultiSelect?: boolean };
+}) => {
  const [customOptions, setCustomOptions] = useState<string[]>([]);
  const { focusInput } = useInputContext();
-  const { isMultiSelect } = useSelectedOptionsContext();
+  const { isMultiSelect } = value;

  const removeCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
      setCustomOptions((prevCustomOptions) =>
        prevCustomOptions.filter((o) => o !== option)
      );
@@ -29,7 +34,7 @@ export const CustomOptionsProvider = ({ children }) => {
  );

  const addCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
      if (isMultiSelect) {
        setCustomOptions((prevOptions) => [...prevOptions, option]);
      } else {
@@ -1,7 +1,7 @@
+import { InformationIcon } from "@navikt/aksel-icons";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { BodyLong, GuidePanel, VStack } from "../index";
-import { Meta } from "@storybook/react";
-import { InformationIcon } from "@navikt/aksel-icons";

 export default {
  title: "ds-react/GuidePanel",
@@ -38,3 +38,4 @@ export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
 export * from "./layout/responsive";
+export * from "./layout/page";
@@ -0,0 +1,271 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import type { Meta, StoryFn } from "@storybook/react";
+import React, { useEffect } from "react";
+import { Box } from "../box";
+import { HGrid } from "../grid";
+import Page from "./Page";
+import { widths } from "./parts/PageBlock";
+
+const meta: Meta = {
+  title: "ds-react/Primitives/Page",
+  component: Page,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+export const Default: StoryFn = ({
+  belowFold,
+  background,
+  width,
+  gutters,
+  contentBlockPadding,
+}) => (
+  <Page
+    footer={<Footer width={width} gutters={gutters} />}
+    footerPosition={belowFold ? "belowFold" : undefined}
+    background={background}
+    contentBlockPadding={contentBlockPadding}
+  >
+    <Header width={width} gutters={gutters} />
+    <Content width={width} gutters={gutters} />
+  </Page>
+);
+
+Default.argTypes = {
+  width: {
+    control: "radio",
+    options: widths,
+  },
+  background: {
+    control: "radio",
+    options: Object.keys(bgColors.a),
+  },
+  belowFold: {
+    control: "boolean",
+  },
+  gutters: {
+    control: "boolean",
+  },
+  contentBlockPadding: {
+    control: "radio",
+    options: ["end", "none"],
+  },
+};
+
+Default.args = {
+  belowFold: false,
+  gutters: false,
+  contentBlockPadding: "end",
+};
+
+export const BelowFold: StoryFn = () => (
+  <Page
+    footer={<Footer />}
+    footerPosition="belowFold"
+    contentBlockPadding="end"
+  >
+    <Header />
+    <Content />
+  </Page>
+);
+
+export const Background: StoryFn = () => (
+  <HGrid columns={2} gap="4">
+    <Page
+      background="bg-default"
+      footer={<div>footer</div>}
+      contentBlockPadding="end"
+    >
+      <div>header</div>
+      <div>content</div>
+    </Page>
+    <Page
+      background="bg-subtle"
+      footer={<div>footer</div>}
+      contentBlockPadding="end"
+    >
+      <div>header</div>
+      <div>content</div>
+    </Page>
+  </HGrid>
+);
+
+export const ContentBlockPadding: StoryFn = () => (
+  <HGrid columns={2} gap="6" align="start">
+    <Page
+      footer={<Footer width="lg" gutters />}
+      contentBlockPadding="end"
+      background="bg-subtle"
+    >
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+    <Page
+      footer={<Footer width="lg" gutters />}
+      contentBlockPadding="none"
+      background="bg-subtle"
+    >
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+  </HGrid>
+);
+
+export const Gutters: StoryFn = () => (
+  <HGrid columns={2} gap="6" align="start">
+    <Page footer={<Footer width="lg" gutters />} background="bg-subtle">
+      <Header width="lg" gutters />
+      <Page.Block width="lg" gutters as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+    <Page footer={<Footer width="lg" />} background="bg-subtle">
+      <Header width="lg" />
+      <Page.Block width="lg" as="main">
+        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
+          Main
+        </Box>
+      </Page.Block>
+    </Page>
+  </HGrid>
+);
+
+Gutters.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};
+
+const MILJO_URL = "https://www.nav.no/dekoratoren";
+
+export const WithDecorator: StoryFn = () => {
+  return (
+    <Page
+      contentBlockPadding="end"
+      footerPosition="belowFold"
+      footer={<div id="decorator-footer"></div>}
+    >
+      <div id="decorator-header"></div>
+      <Content width="lg" gutters />
+      <div
+        id="decorator-env"
+        data-src={`${MILJO_URL}/env?context=privatperson`}
+      ></div>
+    </Page>
+  );
+};
+
+WithDecorator.decorators = [
+  (Story) => {
+    useEffect(() => {
+      const script = document.createElement("script");
+      script.src = `${MILJO_URL}/client.js`;
+      script.async = true;
+      document.body.appendChild(script);
+
+      const styles = document.createElement("link");
+      styles.href = `${MILJO_URL}/css/client.css`;
+      styles.rel = "stylesheet";
+      document.head.appendChild(styles);
+
+      return () => {
+        document.body.removeChild(script);
+        document.head.removeChild(styles);
+      };
+    }, []);
+
+    return <Story />;
+  },
+];
+
+WithDecorator.parameters = {
+  chromatic: {
+    disable: true,
+  },
+};
+
+export const OutsideBackground = () => {
+  return (
+    <Page
+      contentBlockPadding="end"
+      footer={
+        <Box
+          background="surface-alt-3-subtle"
+          style={{ height: 100 }}
+          as="footer"
+        >
+          <Page.Block width="lg" gutters>
+            Footer
+          </Page.Block>
+        </Box>
+      }
+    >
+      <Box background="surface-alt-1-subtle" style={{ height: 64 }} as="header">
+        <Page.Block width="lg" gutters>
+          Header
+        </Page.Block>
+      </Box>
+      <Box background="surface-alt-2-subtle" style={{ height: 300 }} as="main">
+        <Page.Block width="lg" gutters>
+          main
+        </Page.Block>
+      </Box>
+    </Page>
+  );
+};
+
+function Header({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block as="header" width={width} gutters={gutters}>
+      <Box background="surface-alt-3-subtle" style={{ height: 64 }}>
+        Header
+      </Box>
+    </Page.Block>
+  );
+}
+
+function Content({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block width={width} gutters={gutters} as="main">
+      <Box background="surface-alt-3-subtle" style={{ height: 300 }}>
+        Main
+      </Box>
+    </Page.Block>
+  );
+}
+
+function Footer({ width = "lg", gutters = false }: any) {
+  return (
+    <Page.Block width={width} gutters={gutters} as="footer">
+      <Box background="surface-alt-3-subtle" style={{ height: 100 }}>
+        Footer
+      </Box>
+    </Page.Block>
+  );
+}
@@ -0,0 +1,115 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util";
+import { PageBlock } from "./parts/PageBlock";
+
+export interface PageProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "body";
+  /**
+   * Background color. Accepts a color token.
+   * @default bg-default
+   */
+  background?: keyof typeof bgColors.a;
+  /**
+   * Allows better positioning of footer
+   */
+  footer?: React.ReactNode;
+  /**
+   * Places footer below page-fold
+   */
+  footerPosition?: "belowFold";
+  /**
+   * Adds a standardised padding of 4rem between content and footer
+   * @default block-end
+   */
+  contentBlockPadding?: "end" | "none";
+}
+
+interface PageComponentType
+  extends OverridableComponent<PageProps, HTMLElement> {
+  Block: typeof PageBlock;
+}
+
+export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
+  forwardRef(
+    (
+      {
+        as: Component = "div",
+        className,
+        style: _style,
+        footer,
+        children,
+        footerPosition,
+        background = "bg-default",
+        contentBlockPadding = "end",
+        ...rest
+      },
+      ref
+    ) => {
+      const style: React.CSSProperties = {
+        ..._style,
+        "--__ac-page-background": `var(--a-${background})`,
+      };
+
+      const belowFold = footerPosition === "belowFold";
+
+      return (
+        <Component
+          {...rest}
+          className={cl("navds-page", className)}
+          ref={ref}
+          style={style}
+        >
+          <div
+            className={cl({
+              "navds-page__content--fullheight": belowFold,
+              "navds-page__content--grow": !belowFold,
+              "navds-page__content--padding": contentBlockPadding === "end",
+            })}
+          >
+            {children}
+          </div>
+          {footer}
+        </Component>
+      );
+    }
+  );
+
+/**
+ * Page helps with establishing a top-level layout for your page
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * Footer placed below page-fold
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ *   footerPosition="belowFold"
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ */
+const Page = PageComponent as PageComponentType;
+
+Page.Block = PageBlock;
+
+export default Page;
@@ -0,0 +1,2 @@
+export { default as Page, type PageProps } from "./Page";
+export { type PageBlockProps } from "./parts/PageBlock";
@@ -0,0 +1,72 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+
+export const widths = ["lg", "xl", "2xl"] as const;
+
+export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Predefined max-width
+   * @example
+   * lg:  1024px
+   * xl:  1280px
+   * 2xl: 1440px
+   * @default max-width: 100%;
+   */
+  width?: (typeof widths)[number];
+  /**
+   * Adds a standardised responsive padding-inline
+   * @example
+   * 3rem on > md
+   * 1rem on < md
+   * @default false
+   */
+  gutters?: boolean;
+}
+
+/**
+ * Acts as a top-level container for defining max-width, gutters and horizontal centering
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageBlockProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * With background bleed
+ * Wrapping `Page.Block` with `Box` allows the background-color to use full screen-width
+ * ```jsx
+ * <Page
+ *   footer={<Box background="..."><Page.Block width="xl" gutters /></Box>}
+ *   footerPosition="belowFold"
+ * >
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Header
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Content
+ * </Page>
+ * ```
+ */
+export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
+  forwardRef(
+    ({ as: Component = "div", gutters, className, width, ...rest }, ref) => {
+      return (
+        <Component
+          {...rest}
+          className={cl(
+            "navds-pageblock",
+            `navds-pageblock--${width}`,
+            className,
+            { "navds-pageblock--gutters": gutters }
+          )}
+          ref={ref}
+        />
+      );
+    }
+  );
@@ -8,6 +8,7 @@ import React, {
  useRef,
 } from "react";
 import { createPortal } from "react-dom";
+import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
 import { mergeRefs, useId } from "../util";
@@ -99,7 +100,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
    const rootElement = useProvider()?.rootElement;
    const portalNode = useFloatingPortalNode({ root: rootElement });

-    if (useContext(ModalContext)) {
+    const dateContext = useContext(DateContext);
+    const modalContext = useContext(ModalContext);
+    if (modalContext && !dateContext) {
      console.error("Modals should not be nested");
    }

@@ -1,17 +1,19 @@
 import { FileIcon } from "@navikt/aksel-icons";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { BodyLong, Button, Heading, Tooltip } from "..";
 import Modal from "./Modal";

-export default {
+const meta: Meta<typeof Modal> = {
  title: "ds-react/Modal",
  component: Modal,
  parameters: {
    chromatic: { pauseAnimationAtEnd: true },
  },
 };
+export default meta;

-export const WithUseRef = () => {
+export const WithUseRef: StoryFn = () => {
  const ref = useRef<HTMLDialogElement>(null);
  const ref2 = useRef<HTMLDialogElement>(null);

@@ -87,7 +89,7 @@ export const WithUseRef = () => {
 };
 WithUseRef.storyName = "With useRef";

-export const WithUseState = () => {
+export const WithUseState: StoryFn = () => {
  const [open, setOpen] = useState(true);
  const [open2, setOpen2] = useState(false);

@@ -140,36 +142,43 @@ export const WithUseState = () => {
 };
 WithUseState.storyName = "With useState";

-export const EmptyHeader = () => (
-  <div style={{ minWidth: "800px", minHeight: "600px" } /* For Chromatic */}>
-    <Modal open>
-      <Modal.Header />
-      <Modal.Body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </Modal.Body>
-    </Modal>
-  </div>
+export const EmptyHeader: StoryFn = () => (
+  <Modal open>
+    <Modal.Header />
+    <Modal.Body>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Modal.Body>
+  </Modal>
 );

-export const Small = () => (
+export const Small: StoryFn = () => (
  <Modal open width="small" header={{ heading: "Simple header" }}>
    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
  </Modal>
 );
+Small.storyName = "Size = Small";

-export const MediumWithPortal = () => (
+export const MediumWithPortal: StoryFn = () => (
  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
  </Modal>
 );
+MediumWithPortal.storyName = "Size = Medium (with portal)";

-export const WithTooltip = () => {
+export const Large800: StoryFn = () => (
+  <Modal open width={800} header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);
+Large800.storyName = "Size = 800px";
+
+export const WithTooltip: StoryFn = () => {
  const ref = useRef<HTMLDialogElement>(null);

  return (
@@ -193,3 +202,66 @@ export const WithTooltip = () => {
    </div>
  );
 };
+
+export const ChromaticViewportTesting: StoryFn = () => (
+  <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
+    <style>{`#storybook-root { padding: 0 !important }`}</style>
+    <Modal
+      open
+      header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
+    >
+      <Modal.Body>
+        <BodyLong spacing>
+          This story is tailored for testing the breakpoints with Chromatic.
+        </BodyLong>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </BodyLong>
+        <BodyLong spacing>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyLong>
+        <BodyLong>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </Modal.Footer>
+    </Modal>
+  </div>
+);
+ChromaticViewportTesting.parameters = {
+  chromatic: {
+    modes: {
+      mobile_portrait: {
+        viewport: {
+          width: 400,
+          height: 850,
+        },
+      },
+      mobile_landscape: {
+        viewport: {
+          width: 850,
+          height: 400,
+        },
+      },
+      desktop: {
+        viewport: {
+          width: 1280,
+          height: 960,
+        },
+      },
+    },
+  },
+};
@@ -18,6 +18,7 @@ import React, {
  useMemo,
  useRef,
 } from "react";
+import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
 import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -73,11 +74,6 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   * @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;
  /**
   * Changes placement of the floating element in order to keep it in view.
   * @default true
@@ -124,7 +120,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      placement = "top",
      offset,
      strategy: userStrategy,
-      bubbleEscape = false,
      flip: _flip = true,
      ...rest
    },
@@ -132,8 +127,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
  ) => {
    const arrowRef = useRef<HTMLDivElement | null>(null);
    const isInModal = useContext(ModalContext) !== null;
+    const isInDatepicker = useContext(DateContext) !== null;
    const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInModal ? true : _flip;
+    const chosenFlip = isInDatepicker ? false : _flip;

    const {
      x,
@@ -160,11 +156,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(

    const { getFloatingProps } = useInteractions([
      useClick(context),
-      useDismiss(context, {
-        bubbles: {
-          escapeKey: bubbleEscape,
-        },
-      }),
+      useDismiss(context),
    ]);

    useClientLayoutEffect(() => {
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { useMedia } from "../useMedia";
+
+function TestComponent({ fallback }: { fallback?: boolean }) {
+  const media = useMedia("screen and (min-width: 1024px)", fallback);
+  return <div data-testid="media-id">{`${media}`}</div>;
+}
+
+describe("useMedia", () => {
+  test("Should return 'undefined' when no fallback is given", async () => {
+    render(<TestComponent />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("undefined");
+  });
+  test("Should return fallback", async () => {
+    render(<TestComponent fallback={true} />);
+    expect(screen.getByTestId("media-id").innerHTML).toEqual("true");
+  });
+});
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+export const noMatchMedia =
+  typeof window !== "undefined" && window.matchMedia === undefined;
+
+/**
+ * @example useMedia("screen and (min-width: 1024px)")
+ * @param media string
+ * @param fallback boolean
+ * @returns boolean | undefined
+ */
+export const useMedia = (
+  media: string,
+  fallback?: boolean
+): boolean | undefined => {
+  const [matches, setMatches] = useState(fallback);
+
+  useEffect(() => {
+    if (noMatchMedia) {
+      return;
+    }
+    const mediaQueryList = window.matchMedia(media);
+
+    setMatches(mediaQueryList.matches);
+
+    const listener = (evt: MediaQueryListEvent) => {
+      setMatches(evt.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [media]);
+
+  return matches;
+};
@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind

+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

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

+## 5.10.0
+
+## 5.9.2
+
+## 5.9.1
+
+## 5.9.0
+
 ## 5.8.0

 ## 5.7.6
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.8.0",
+  "version": "5.10.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.8.0",
-    "@navikt/ds-css": "^5.8.0",
-    "@navikt/ds-react": "^5.8.0",
-    "@navikt/ds-tailwind": "^5.8.0",
-    "@navikt/ds-tokens": "^5.8.0"
+    "@navikt/aksel-icons": "^5.10.0",
+    "@navikt/ds-css": "^5.10.0",
+    "@navikt/ds-react": "^5.10.0",
+    "@navikt/ds-tailwind": "^5.10.0",
+    "@navikt/ds-tokens": "^5.10.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,8 +1,7 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-
-import { readFileSync } from "fs";
-import { join, dirname } from "path";
 import { loadCsf } from "@storybook/csf-tools";
+import type { StorybookConfig } from "@storybook/nextjs";
+import { readFileSync } from "fs";
+import { dirname, join } from "path";

 /**
 * This function is used to resolve the absolute path of a package.
@@ -6,29 +6,26 @@ import {
  PortableTextReactComponents,
 } from "@portabletext/react";
 import cl from "clsx";
-import ExpansionCard from "components/sanity-modules/ExpansionCard";
+import Accordion from "components/sanity-modules/accordion/Accordion";
+import Alert from "components/sanity-modules/alert/Alert";
+import Bilde from "components/sanity-modules/bilde/Bilde";
 import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
-import { InlineCode } from "components/website-modules/InlineCode";
-import { KBD } from "components/website-modules/KBD";
+import CodeExamples from "components/sanity-modules/code-examples/CodeExamples";
+import SnippetLazy from "components/sanity-modules/code-snippet/SnippetLazy";
+import DoDont from "components/sanity-modules/do-dont/DoDont";
+import ExpansionCard from "components/sanity-modules/expansioncard/ExpansionCard";
+import PropsSeksjon from "components/sanity-modules/props/PropsSeksjon";
+import RelatertInnhold from "components/sanity-modules/relatert-innhold/RelatertInnhold";
+import SideModul from "components/sanity-modules/side-modul/SideModul";
+import Tabell from "components/sanity-modules/tabell/Tabell";
+import TastaturModul from "components/sanity-modules/tastatur-tabell/TastaturTabell";
+import Tips from "components/sanity-modules/tips/Tips";
+import TokenTable from "components/sanity-modules/token-tabell/TokenTable";
+import Video from "components/sanity-modules/video/Video";
+import InlineCode from "components/website-modules/InlineCode";
+import KBD from "components/website-modules/KBD";
 import NextLink from "next/link";
 import { Children } from "react";
-import {
-  Accordion,
-  Alert,
-  Bilde,
-  CodeExamples,
-  DoDont,
-  PropsSeksjon,
-  RelatertInnhold,
-  SideModul,
-  Snippet,
-  Tabell,
-  TastaturModul,
-  Tips,
-  TokenTable,
-  UuFeedback,
-  Video,
-} from ".";

 const serializers: Partial<PortableTextReactComponents> = {
  types: {
@@ -40,7 +37,7 @@ const serializers: Partial<PortableTextReactComponents> = {
    bilde: ({ value }) => <Bilde node={value} />,
    alert: ({ value }) => <Alert node={value} />,
    expansioncard: ({ value }) => <ExpansionCard node={value} />,
-    kode: ({ value }) => <Snippet node={value} />,
+    kode: ({ value }) => <SnippetLazy node={value} />,
    tabell_v2: ({ value }) => <Tabell node={value} />,
    accordion: ({ value }) => <Accordion node={value} />,
    props_seksjon: ({ value }) => <PropsSeksjon node={value} />,
@@ -49,7 +46,6 @@ const serializers: Partial<PortableTextReactComponents> = {
    video: ({ value }) => <Video node={value} />,
    tips: ({ value }) => <Tips node={value} />,
    kode_eksempler: ({ value }) => <CodeExamples node={value} />,
-    uufeedback: ({ value }) => <UuFeedback node={value} />,
  },
  unknownType: () => null,
  block: {
@@ -1,22 +1,4 @@
 export * from "./assets";
-export { default as Accordion } from "./sanity-modules/Accordion";
-export { default as Alert } from "./sanity-modules/Alert";
-export { default as Bilde } from "./sanity-modules/Bilde";
-export * from "./sanity-modules/cards";
-export * from "./sanity-modules/code";
-export * from "./sanity-modules/code-examples";
-export { default as DoDont } from "./sanity-modules/DoDont";
-export { default as IntroKomponent } from "./sanity-modules/IntroSeksjon";
-export { default as PropsSeksjon } from "./sanity-modules/props/PropsSeksjon";
-export { default as PropTable } from "./sanity-modules/props/PropTabell";
-export { default as SideModul } from "./sanity-modules/SideModul";
-export { default as Tabell } from "./sanity-modules/Tabell";
-export { default as TastaturModul } from "./sanity-modules/TastaturTabell";
-export { default as Tips } from "./sanity-modules/Tips";
-export { default as TokenTable } from "./sanity-modules/TokenTable";
-export * from "./sanity-modules/UuFeedback";
-export { default as Video } from "./sanity-modules/Video";
 export * from "./website-modules/BreadCrumbs";
-export { default as Feedback } from "./website-modules/feedback";
 export * from "./website-modules/toc/TOC";
 export * from "./website-modules/utils";
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { WithSidebar } from "./WithSidebar";
 import { SanityBlockContent } from "@/sanity-block";
 import { getBlocks } from "@/sb-util";
+import type { Meta, StoryObj } from "@storybook/react";
+import { WithSidebar } from "./WithSidebar";

 const meta = {
  title: "Layout/WithSidebar",
@@ -28,8 +28,10 @@ export const KomponenterLanding: Story = {
  args: {
    children,
    pageType: {
-      type: "Komponenter",
+      type: "komponenter",
      title: "Heading",
+      rootUrl: "/komponenter",
+      rootTitle: "Komponenter",
    },
    pageProps: { content: "1" },
    variant: "landingPage",
@@ -65,8 +67,10 @@ export const Komponenter: Story = {
  args: {
    children,
    pageType: {
-      type: "Komponenter",
+      type: "komponenter",
      title: "Heading",
+      rootUrl: "/komponenter",
+      rootTitle: "Komponenter",
    },
    pageProps: { content: "1" },
    variant: "page",
@@ -4,7 +4,6 @@ import { capitalize } from "@/utils";
 import { Box, Detail, Heading, Link } from "@navikt/ds-react";
 import cl from "clsx";
 import { Sidebar } from "components/layout/sidebar/Sidebar";
-import Feedback from "components/website-modules/feedback";
 import { TableOfContentsv2 } from "components/website-modules/toc/TOCv2";
 import Image from "next/legacy/image";
 import NextLink from "next/link";
@@ -21,8 +20,10 @@ export const WithSidebar = ({
  children: React.ReactNode;
  sidebar: AkselSidebarT;
  pageType: {
-    type: "Komponenter" | "Grunnleggende";
+    type: "komponenter" | "grunnleggende" | "templates";
    title: string;
+    rootUrl: string;
+    rootTitle: string;
  };
  pageProps: any;
  intro?: React.ReactNode;
@@ -30,7 +31,11 @@ export const WithSidebar = ({
  variant?: "page" | "landingPage";
 }) => {
  return (
-    <Box background="bg-default" paddingBlock="6 24">
+    <Box
+      background="bg-default"
+      paddingBlock="6 24"
+      className="min-h-screen-header"
+    >
      <div className="mx-auto flex w-full max-w-screen-2xl gap-6">
        <Sidebar kategori={pageType.type} links={sidebar} />
        <main
@@ -53,13 +58,9 @@ export const WithSidebar = ({
            <div className="z-[1]">
              {variant === "page" && pageProps?.kategori && (
                <Detail as="div" className="mb-2">
-                  <NextLink
-                    href={`/${pageType.type.toLowerCase()}`}
-                    passHref
-                    legacyBehavior
-                  >
+                  <NextLink href={pageType.rootUrl} passHref legacyBehavior>
                    <Link className="text-text-default">
-                      {capitalize(pageType.type)}
+                      {pageType.rootTitle}
                    </Link>
                  </NextLink>{" "}
                  / {capitalize(pageProps.kategori)}
@@ -114,7 +115,6 @@ export const WithSidebar = ({
            {variant === "page" && <TableOfContentsv2 />}
            <div className="w-full">
              {children}
-              <Feedback docId={pageProps?._id} docType={pageProps?._type} />
              {footer && <div className="w-full">{footer}</div>}
            </div>
          </div>
@@ -1,7 +1,7 @@
 import { searchOptions } from "@/types";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button, Chips, Search } from "@navikt/ds-react";
-import { KBD } from "components/website-modules/KBD";
+import KBD from "components/website-modules/KBD";
 import { useContext, useRef } from "react";
 import { useShortcut } from "./hooks";
 import {
@@ -3,7 +3,7 @@ import { SearchHitT, searchOptions } from "@/types";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Chips } from "@navikt/ds-react";
 import cl from "clsx";
-import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import { Tag } from "components/sanity-modules/frontpage-blocks/latest-articles/Tag";
 import { StatusTag } from "components/website-modules/StatusTag";
 import Image from "next/legacy/image";
 import { default as Link, default as NextLink } from "next/link";
@@ -1,7 +1,7 @@
 import { GroupedHitsT, SearchHitT, searchOptions } from "@/types";
 import { Heading } from "@navikt/ds-react";
 import cl from "clsx";
-import { Tag } from "components/sanity-modules/frontpage-blocks/Tag";
+import { Tag } from "components/sanity-modules/frontpage-blocks/latest-articles/Tag";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Hit } from "./Hit";

@@ -95,6 +95,7 @@ describe("createSearchResult", () => {
      aksel_blogg: 1,
      aksel_prinsipp: 1,
      aksel_standalone: 1,
+      templates_artikkel: 0,
    };
    const actual: SearchResultsT = createSearchResult(result, rawResults);
    expect(actual.hits).toEqual(expected);
@@ -29,6 +29,9 @@ export function createSearchResult(
        .length,
      aksel_blogg: rawResults.filter((x: any) => x.item._type === "aksel_blogg")
        .length,
+      templates_artikkel: rawResults.filter(
+        (x: any) => x.item._type === "templates_artikkel"
+      ).length,
      aksel_prinsipp: rawResults.filter(
        (x: any) => x.item._type === "aksel_prinsipp"
      ).length,
@@ -114,7 +114,7 @@ export const Sidebar = ({
  kategori,
  links,
 }: {
-  kategori: "Komponenter" | "Grunnleggende";
+  kategori: "komponenter" | "grunnleggende" | "templates";
  links: AkselSidebarT;
 }) => {
  const sections = useSection({ kategori, links });
@@ -1,23 +1,17 @@
 import { AkselSidebarT } from "@/types";
 import { useMemo } from "react";
-import {
-  grunnleggendeKategorier,
-  komponentKategorier,
-} from "../../../sanity/config";
+import { sanityCategoryLookup } from "../../../sanity/config";

 export const useSection = ({
  kategori,
  links,
 }: {
-  kategori: "Komponenter" | "Grunnleggende";
+  kategori: "komponenter" | "grunnleggende" | "templates";
  links: AkselSidebarT;
 }) => {
  const sections = useMemo(
    () =>
-      (kategori === "Komponenter"
-        ? komponentKategorier
-        : grunnleggendeKategorier
-      )
+      sanityCategoryLookup(kategori)
        .map((x) => ({
          ...x,
          pages: links
@@ -1,35 +0,0 @@
-import React from "react";
-import { withErrorBoundary } from "@/error-boundary";
-import TokenView from "./token-view";
-
-type SpesialT = {
-  _key: string;
-  _type: "spesial_seksjon";
-  modul?: "ikonsok" | "token_kategori";
-  logs?: any[];
-  komponenter?: any;
-  farge?: any;
-  token?: { title: string; kategori: string };
-};
-
-const SideModul = ({ node }: { node: SpesialT }) => {
-  if (!node || !node.modul) {
-    return null;
-  }
-
-  const GetModule = () => {
-    switch (node.modul) {
-      case "ikonsok":
-        return null;
-      case "token_kategori":
-        return <TokenView token={node.token} />;
-      default: {
-        return null;
-      }
-    }
-  };
-
-  return <div className="mb-16">{GetModule()}</div>;
-};
-
-export default withErrorBoundary(SideModul, "SideModul");
@@ -1,98 +0,0 @@
-import { withErrorBoundary } from "@/error-boundary";
-import { TokenTableT } from "@/types";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
-import core from "@navikt/ds-css/tokens.json";
-import { BodyLong, Button, CopyButton, Label, Link } from "@navikt/ds-react";
-import cl from "clsx";
-import { AkselTable, AkselTableRow } from "components/website-modules/Table";
-import NextLink from "next/link";
-import { useState } from "react";
-
-const TokenTable = ({ node }: { node: TokenTableT }) => {
-  const [open, setOpen] = useState(false);
-
-  const tokens: { [key: string]: string } | null =
-    node.title in core ? core[node.title] : null;
-
-  if (!tokens) {
-    return null;
-  }
-
-  const showMore = Object.keys(tokens).length > 8;
-
-  return (
-    <div className="mb-7">
-      <div
-        className={cl({
-          "after:to-bg-default relative max-h-80 overflow-y-hidden after:absolute after:inset-0 after:bg-gradient-to-b after:from-transparent after:via-transparent":
-            !open && showMore,
-        })}
-      >
-        <AkselTable th={[{ text: "Token" }, { text: "Fallback" }]}>
-          {Object.entries(tokens).map(([key, val]) => (
-            <AkselTableRow key={key} tr={[{ text: key }, { text: val }]} />
-          ))}
-        </AkselTable>
-        {(open || !showMore) && (
-          <div className="border-border-subtle bg-surface-default relative -mt-9 w-full rounded-b-lg border border-t-0 p-2 pr-14">
-            <CopyButton
-              copyText={Object.entries(tokens).reduce(
-                (prev, cur) =>
-                  prev +
-                  `${cur[0]}: ${
-                    cur[1].startsWith("--") ? `var(${cur[1]})` : `${cur[1]}`
-                  };\n`,
-                ""
-              )}
-              className="absolute right-2 top-2 z-10"
-            />
-            <Label size="small" as="span" spacing>
-              Hva er dette?
-            </Label>
-            <BodyLong size="small">
-              Komponent-tokens gir deg muligheten til å sette opp theming eller
-              justere styling uten å måtte overskrive css-klasser. Les gjennom{" "}
-              <NextLink
-                href="/grunnleggende/styling/design-tokens#hec62d38bc813"
-                passHref
-                legacyBehavior
-              >
-                <Link>guiden vår</Link>
-              </NextLink>{" "}
-              eller utforsk alle{" "}
-              <NextLink
-                href="/grunnleggende/styling/design-tokens"
-                passHref
-                legacyBehavior
-              >
-                <Link>design tokens</Link>
-              </NextLink>
-              .
-            </BodyLong>
-          </div>
-        )}
-      </div>
-      {!open && showMore && (
-        <div className="bg-surface-default mx-auto grid w-fit -translate-y-[80%] place-content-center shadow-[0_0_8px_8px_var(--a-surface-default)]">
-          <Button
-            variant="secondary-neutral"
-            onClick={() => setOpen(true)}
-            className="group"
-            icon={
-              <ChevronDownIcon
-                className="group-hover:translate-y-05 transition-transform"
-                aria-hidden
-                fontSize="1.5rem"
-              />
-            }
-            iconPosition="right"
-          >
-            Vis mer
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default withErrorBoundary(TokenTable, "Token-tabell");
@@ -1,83 +0,0 @@
-import { FeedbackT } from "@/types";
-import { IdContext } from "@/utils";
-import { Button, Heading, Textarea } from "@navikt/ds-react";
-import cl from "clsx";
-import { useRouter } from "next/router";
-import { useContext, useState } from "react";
-
-export const UuFeedback = ({ node }: { node: { vis: boolean } }) => {
-  const [textValue, setTextValue] = useState("");
-  const [errorMsg, setErrorMsg] = useState<string | null>(null);
-  const [sent, setSent] = useState(false);
-
-  const idCtx = useContext(IdContext);
-  const { asPath, basePath } = useRouter();
-
-  if (!node?.vis) {
-    return null;
-  }
-
-  const fetchFeedback = () => {
-    const body: FeedbackT = {
-      message: textValue,
-      url: `${basePath}${asPath}`,
-      type: "uu",
-      docId: idCtx?.id,
-    };
-
-    fetch("/api/feedback", {
-      method: "POST",
-      body: JSON.stringify(body),
-    });
-  };
-
-  const handleSend = (e) => {
-    e.preventDefault();
-
-    if (textValue === "") {
-      setErrorMsg(
-        "Tilbakemeldingen kan ikke være tom. Legg til tekst i feltet."
-      );
-      return;
-    }
-    setErrorMsg(null);
-    setSent(true);
-    fetchFeedback();
-    setTextValue("");
-  };
-
-  return (
-    <div className="my-8">
-      {!sent && (
-        <form
-          className={cl(
-            "animate-fadeIn mt-4 flex w-full max-w-sm flex-col gap-4"
-          )}
-        >
-          <Textarea
-            error={errorMsg}
-            value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
-            maxLength={600}
-            minRows={3}
-            label="Tilbakemelding"
-            description="Ikke skriv inn navn eller andre personopplysninger"
-            autoComplete="off"
-          />
-          <Button className="mr-auto" onClick={handleSend}>
-            Send inn tilbakemelding
-          </Button>
-        </form>
-      )}
-      <div aria-live="polite">
-        {sent && (
-          <>
-            <Heading size="small" as="p" className="mt-8">
-              Takk for tilbakemeldingen!
-            </Heading>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
@@ -1,10 +1,13 @@
-import { Accordion as DsAccordion } from "@navikt/ds-react";
-import React from "react";
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AccordionT } from "@/types";
+import { Accordion as DsAccordion } from "@navikt/ds-react";

-const Accordion = ({ node }: { node: AccordionT }) => {
+type AccordionProps = {
+  node: AccordionT;
+};
+
+const Accordion = ({ node }: AccordionProps) => {
  if (!node || node.list.length === 0) {
    return null;
  }
@@ -25,4 +28,10 @@ const Accordion = ({ node }: { node: AccordionT }) => {
  );
 };

-export default withErrorBoundary(Accordion, "Accordion");
+export default function Component(props: AccordionProps) {
+  return (
+    <ErrorBoundary boundaryName="Accordion">
+      <Accordion {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,8 +1,13 @@
+import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AlertT } from "@/types";
 import { Alert as DsAlert, Heading } from "@navikt/ds-react";

-const Alert = ({ node }: { node: AlertT }) => {
+type AlertProps = {
+  node: AlertT;
+};
+
+const Alert = ({ node }: AlertProps) => {
  return (
    <div className="mb-7 max-w-2xl">
      <DsAlert variant={node.variant}>
@@ -23,4 +28,10 @@ const Alert = ({ node }: { node: AlertT }) => {
  );
 };

-export default Alert;
+export default function Component(props: AlertProps) {
+  return (
+    <ErrorBoundary boundaryName="Alert">
+      <Alert {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,12 +1,17 @@
 /* eslint-disable @next/next/no-img-element */
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { urlFor } from "@/sanity/interface";
 import { BildeT } from "@/types";
 import { BodyLong, Link } from "@navikt/ds-react";
 import cl from "clsx";
 import NextLink from "next/link";

-const Bilde = ({ node, className }: { node: BildeT; className?: string }) => {
+type BildeProps = {
+  node: BildeT;
+  className?: string;
+};
+
+const Bilde = ({ node, className }: BildeProps) => {
  if (!node || !node.asset) {
    return null;
  }
@@ -65,4 +70,10 @@ const Bilde = ({ node, className }: { node: BildeT; className?: string }) => {
  );
 };

-export default withErrorBoundary(Bilde, "Bilde");
+export default function Component(props: BildeProps) {
+  return (
+    <ErrorBoundary boundaryName="Bilde">
+      <Bilde {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";

 import { amplitudeLogNavigation } from "@/logging";
 import {
@@ -12,6 +12,14 @@ import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
 import { abbrName } from "../..";

+type ArtikkelCardProps = ResolveContributorsSingleT<
+  ResolveTemaT<ResolveSlugT<AkselGodPraksisDocT>>
+> & {
+  source?: string;
+  variant: string;
+  level?: "2" | "3";
+};
+
 const ArtikkelCard = ({
  slug,
  source,
@@ -24,9 +32,7 @@ const ArtikkelCard = ({
  tema,
  level = "2",
  ...rest
-}: ResolveContributorsSingleT<
-  ResolveTemaT<ResolveSlugT<AkselGodPraksisDocT>>
-> & { source?: string; variant: string; level?: "2" | "3" }) => {
+}: ArtikkelCardProps) => {
  const date = useFormatedDate(
    (rest as any)?.updateInfo?.lastVerified ?? publishedAt ?? _updatedAt
  );
@@ -89,4 +95,10 @@ const ArtikkelCard = ({
  );
 };

-export default withErrorBoundary(ArtikkelCard, "ArtikkelCard");
+export default function Component(props: ArtikkelCardProps) {
+  return (
+    <ErrorBoundary boundaryName="ArtikkelCard">
+      <ArtikkelCard {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { amplitudeLogNavigation } from "@/logging";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
 import { getAuthors } from "@/utils";
@@ -6,11 +6,11 @@ import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";

-const BloggCard = ({
-  blog,
-}: {
+type BloggCardProps = {
  blog: ResolveContributorsT<ResolveSlugT<AkselBloggDocT>>;
-}) => {
+};
+
+const BloggCard = ({ blog }: BloggCardProps) => {
  const date = useFormatedDate(blog?.publishedAt ?? blog._createdAt);
  return (
    <li
@@ -46,4 +46,10 @@ const BloggCard = ({
  );
 };

-export default withErrorBoundary(BloggCard, "BloggCard");
+export default function Component(props: BloggCardProps) {
+  return (
+    <ErrorBoundary boundaryName="ArtikkelCard">
+      <BloggCard {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
@@ -7,7 +7,11 @@ import cl from "clsx";
 import Image from "next/legacy/image";
 import NextLink from "next/link";

-const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
+type GodPraksisCardProps = {
+  node: AkselTemaT;
+};
+
+const GodPraksisCard = ({ node }: GodPraksisCardProps) => {
  if (
    !node?.pictogram ||
    !node?.slug?.current ||
@@ -47,4 +51,10 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
  );
 };

-export default withErrorBoundary(GodPraksisCard, "GodPraksisCard");
+export default function Component(props: GodPraksisCardProps) {
+  return (
+    <ErrorBoundary boundaryName="GodPraksisCard">
+      <GodPraksisCard {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,11 +1,15 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
 import Image from "next/legacy/image";
 import NextLink from "next/link";

-const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
+type GodPraksisCardSimpleProps = {
+  node: Partial<AkselTemaT>;
+};
+
+const GodPraksisCardSimple = ({ node }: GodPraksisCardSimpleProps) => {
  if (!node?.pictogram || !node?.slug?.current || !node?.title) {
    return null;
  }
@@ -36,4 +40,10 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
  );
 };

-export default withErrorBoundary(GodPraksisCardSimple, "GodPraksisCardSimple");
+export default function Component(props: GodPraksisCardSimpleProps) {
+  return (
+    <ErrorBoundary boundaryName="GodPraksisCardSimple">
+      <GodPraksisCardSimple {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,11 +1,15 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { amplitudeLogNavigation } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { InnholdsKortPrinsipperT } from "@/types";
 import { Heading } from "@navikt/ds-react";
 import NextLink from "next/link";

-const InnholdsKort = ({ node }: { node: InnholdsKortPrinsipperT }) => {
+type InnholdsKortProps = {
+  node: InnholdsKortPrinsipperT;
+};
+
+const InnholdsKort = ({ node }: InnholdsKortProps) => {
  if (!node.title || !node.body || !node.lenke) {
    return null;
  }
@@ -39,4 +43,10 @@ const InnholdsKort = ({ node }: { node: InnholdsKortPrinsipperT }) => {
  );
 };

-export default withErrorBoundary(InnholdsKort, "InnholdsKort");
+export default function Component(props: InnholdsKortProps) {
+  return (
+    <ErrorBoundary boundaryName="InnholdsKort">
+      <InnholdsKort {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1 +0,0 @@
-export { default as RelatertInnhold } from "./RelatertInnhold";
@@ -1,6 +1,6 @@
 import { getKey } from "@/sb-util";
 import type { Meta, StoryObj } from "@storybook/react";
-import CodeExample from "./Examples";
+import CodeExample from "./CodeExamples";

 const meta = {
  title: "Sanity-modules/CodeExample",
@@ -15,8 +15,10 @@ export const Designsystem: Story = {
  args: {
    node: {
      title: "button",
+
      dir: {
        title: "button",
+        variant: "templates",
        filer: [
          {
            _key: getKey(),
@@ -24,6 +26,8 @@ export const Designsystem: Story = {
            innhold:
              'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary">Primary</Button>\n      <Button variant="secondary">Secondary</Button>\n      <Button variant="tertiary">Tertiary</Button>\n      <Button variant="danger">Danger</Button>\n    </div>\n  );\n};',
            navn: "default",
+            title: "title",
+            index: 1,
          },
          {
            _key: getKey(),
@@ -31,6 +35,8 @@ export const Designsystem: Story = {
            innhold:
              'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary-neutral">Primary</Button>\n      <Button variant="secondary-neutral">Secondary</Button>\n      <Button variant="tertiary-neutral">Tertiary</Button>\n    </div>\n  );\n};',
            navn: "neutral",
+            title: "title",
+            index: 1,
          },
          {
            _key: getKey(),
@@ -38,6 +44,8 @@ export const Designsystem: Story = {
            innhold:
              'import { PencilIcon } from "@navikt/aksel-icons";\nimport { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button size="small" variant="primary" icon={<PencilIcon aria-hidden />}>\n        Primary\n      </Button>\n      <Button size="small" variant="secondary">\n        Secondary\n      </Button>\n      <Button size="small" variant="tertiary">\n        Tertiary\n      </Button>\n      <Button size="small" variant="danger">\n        Danger\n      </Button>\n    </div>\n  );\n};',
            navn: "small",
+            title: "title",
+            index: 1,
          },
        ],
      },
@@ -1,5 +1,5 @@
-import { capitalize, Snippet } from "@/components";
-import { withErrorBoundary } from "@/error-boundary";
+import { capitalize } from "@/components";
+import ErrorBoundary from "@/error-boundary";
 import { CodeExamplesT } from "@/types";
 import {
  ExternalLinkIcon,
@@ -8,14 +8,19 @@ import {
 } from "@navikt/aksel-icons";
 import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import cl from "clsx";
+import SnippetLazy from "components/sanity-modules/code-snippet/SnippetLazy";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
-import { CodeSandbox } from "./CodeSandbox";
+import { CodeSandbox } from "./parts/CodeSandbox";

 const iframePadding = 192;
 const iframeId = "example-iframe";

-const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
+type CodeExamplesProps = {
+  node: CodeExamplesT;
+};
+
+const ComponentExamples = ({ node }: CodeExamplesProps) => {
  const [activeExample, setActiveExample] = useState(null);
  const [frameState, setFrameState] = useState(300);
  const [unloaded, setUnloaded] = useState(true);
@@ -29,7 +34,15 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
        iframeId
      ) as HTMLIFrameElement;
      const exampleIframeDOM = exampleIframe?.contentDocument;
-      const exampleWrapper = exampleIframeDOM?.getElementById("ds-example");
+
+      let exampleWrapper: HTMLElement;
+
+      if (node.dir.variant === "templates") {
+        exampleWrapper = exampleIframeDOM?.getElementById("__next");
+      } else {
+        exampleWrapper = exampleIframeDOM?.getElementById("ds-example");
+      }
+
      if (exampleWrapper && exampleWrapper.offsetHeight) {
        const newHeight = iframePadding + exampleWrapper.offsetHeight;
        clearInterval(waitForExampleContentToRender);
@@ -70,7 +83,7 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
  const fixName = (str: string) =>
    capitalize(
      str
-        .replace(/[^\w]|_/g, " ")
+        .replace(/[^\wæøå]|_/g, " ")
        .replace(/\s+/g, " ")
        .trim()
    ) ?? str;
@@ -80,6 +93,7 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
  }

  const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
+  const demoVariant = node.dir?.variant;

  return (
    <div>
@@ -102,7 +116,7 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
                  );
                }}
              >
-                {fixName(fil.navn)}
+                {fixName(fil.title)}
              </Chips.Toggle>
            );
          })}
@@ -133,7 +147,7 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
                  )}
                >
                  <iframe
-                    src={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                    src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
                      ".tsx",
                      ""
                    )}`}
@@ -143,7 +157,10 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                    className={cl(
                      "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
-                      { invisible: unloaded }
+                      {
+                        invisible: unloaded,
+                        "p-6": demoVariant === "templates",
+                      }
                    )}
                    title="Kode-eksempler"
                    ref={iframeRef}
@@ -194,16 +211,15 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
                        target="_blank"
                        className="si-ignore"
                        as="a"
-                        href={`/eksempler/${node.dir.title}/${fil.navn.replace(
-                          ".tsx",
-                          ""
-                        )}`}
+                        href={`/${demoVariant}/${
+                          node.dir.title
+                        }/${fil.navn.replace(".tsx", "")}`}
                      />
                    </HStack>
                  </HStack>
                </div>

-                <Snippet
+                <SnippetLazy
                  node={{
                    code: { code: fil.innhold.trim(), language: "tsx" },
                  }}
@@ -217,4 +233,10 @@ const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
  );
 };

-export default withErrorBoundary(ComponentExamples, "Eksempler kode");
+export default function Component(props: CodeExamplesProps) {
+  return (
+    <ErrorBoundary boundaryName="Kodeeksempler">
+      <ComponentExamples {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1 +0,0 @@
-export { default as CodeExamples } from "./Examples";
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { CodeSnippetT } from "@/types";
 import { ChevronRightIcon, TerminalIcon } from "@navikt/aksel-icons";
 import { CopyButton, Label } from "@navikt/ds-react";
@@ -6,7 +6,11 @@ import cl from "clsx";
 import { Highlight, Language } from "prism-react-renderer";
 import theme from "./theme";

-const CodeSnippet = ({ node: { code, title } }: { node: CodeSnippetT }) => {
+type CodeSnippetProps = {
+  node: CodeSnippetT;
+};
+
+const CodeSnippet = ({ node: { code, title } }: CodeSnippetProps) => {
  if (!code || !code.code) {
    return null;
  }
@@ -94,4 +98,10 @@ const CodeSnippet = ({ node: { code, title } }: { node: CodeSnippetT }) => {
  );
 };

-export default withErrorBoundary(CodeSnippet, "Kode snippet");
+export default function Component(props: CodeSnippetProps) {
+  return (
+    <ErrorBoundary boundaryName="Kodesnippet">
+      <CodeSnippet {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -0,0 +1,7 @@
+import dynamic from "next/dynamic";
+
+const SnippetLazy = dynamic(() => import("./Snippet"), {
+  ssr: false,
+});
+
+export default SnippetLazy;
@@ -1,5 +0,0 @@
-import dynamic from "next/dynamic";
-
-export const Snippet = dynamic(() => import("./Snippet"), {
-  ssr: false,
-});
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { urlFor } from "@/sanity/interface";
 import { DoDontT } from "@/types";
 import {
@@ -53,7 +53,11 @@ const Element = ({ block }: { block: DoDontT["blokker"][number] }) => {
  );
 };

-const DoDont = ({ node }: { node: DoDontT }) => {
+type DoDontProps = {
+  node: DoDontT;
+};
+
+const DoDont = ({ node }: DoDontProps) => {
  if (!node) return null;

  return (
@@ -101,4 +105,10 @@ function getText(s: string) {
  }
 }

-export default withErrorBoundary(DoDont, "DoDont");
+export default function Component(props: DoDontProps) {
+  return (
+    <ErrorBoundary boundaryName="Dodont">
+      <DoDont {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,17 +1,17 @@
+import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { ExpansionCard as DsExpansionCard } from "@navikt/ds-react";
-import { withErrorBoundary } from "@/error-boundary";

-const ExpansionCard = ({
-  node,
-}: {
+type ExpansionCardProps = {
  node: {
    heading: string;
    heading_level: "h3" | "h4";
    description?: string;
    body: any[];
  };
-}) => {
+};
+
+const ExpansionCard = ({ node }: ExpansionCardProps) => {
  if (!node.heading || !node.body || !node.heading_level) {
    return null;
  }
@@ -42,4 +42,10 @@ const ExpansionCard = ({
  );
 };

-export default withErrorBoundary(ExpansionCard, "ExpansionCard");
+export default function Component(props: ExpansionCardProps) {
+  return (
+    <ErrorBoundary boundaryName="ExpansionCard">
+      <ExpansionCard {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,8 +1,12 @@
-import Latest, { LatestT } from "./Latest";
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
+import Latest, { LatestT } from "./latest-articles/Latest";
 export type BlocksT = LatestT;

-export const FrontpageBlock = ({ blocks }: { blocks: BlocksT[] }) => {
+type FrontpageBlockProps = {
+  blocks: BlocksT[];
+};
+
+export const FrontpageBlock = ({ blocks }: FrontpageBlockProps) => {
  if (!blocks || !blocks.length) {
    return null;
  }
@@ -20,4 +24,10 @@ export const FrontpageBlock = ({ blocks }: { blocks: BlocksT[] }) => {
  );
 };

-export default withErrorBoundary(FrontpageBlock, "FrontpageBlock");
+export default function Component(props: FrontpageBlockProps) {
+  return (
+    <ErrorBoundary boundaryName="FrontpageBlock">
+      <FrontpageBlock {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { abbrName } from "@/utils";
@@ -29,15 +29,13 @@ export type ArticleT = {
  contributors?: { title: string }[];
 };

-const Card = ({
-  article,
-  visible,
-  index,
-}: {
+type CardProps = {
  article: ArticleT;
  visible: boolean;
  index: number;
-}) => {
+};
+
+const Card = ({ article, visible, index }: CardProps) => {
  const date = useFormatedDate(article.publishedAt ?? article._updatedAt);

  const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
@@ -45,6 +43,7 @@ const Card = ({
    "ds_artikkel",
    "komponent_artikkel",
    "aksel_blogg",
+    "templates_artikkel",
  ].includes(article._type);

  return (
@@ -153,4 +152,10 @@ const Card = ({
  );
 };

-export default withErrorBoundary(Card, "FrontpageBlockCard");
+export default function Component(props: CardProps) {
+  return (
+    <ErrorBoundary boundaryName="FrontpageBlockCard">
+      <Card {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { Heading } from "@navikt/ds-react";
 import cl from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -17,7 +17,11 @@ export type LatestT = {
  };
 };

-const Latest = ({ block }: { block: LatestT }) => {
+type LatestArticlesProps = {
+  block: LatestT;
+};
+
+const Latest = ({ block }: LatestArticlesProps) => {
  const highlights = block.highlights?.length;
  const [intersected, setIntersected] = useState(false);
  const section = useRef(null);
@@ -90,4 +94,10 @@ function getList(block: LatestT) {
  });
 }

-export default withErrorBoundary(Latest, "Latest");
+export default function Component(props: LatestArticlesProps) {
+  return (
+    <ErrorBoundary boundaryName="Latest-articles">
+      <Latest {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,4 +1,4 @@
-import { Heading, Label, Tag as DsTag } from "@navikt/ds-react";
+import { Tag as DsTag, Heading, Label } from "@navikt/ds-react";
 import cl from "clsx";

 export const Tag = ({
@@ -65,7 +65,26 @@ export const Tag = ({
        <Comp className="text-deepblue-600 flex items-center gap-3">
          Grunnleggende
          {beta && (
-            <DsTag variant="alt1" size="small">
+            <DsTag
+              variant="alt1"
+              size="small"
+              className="border-violet-300 bg-violet-50"
+            >
+              Beta
+            </DsTag>
+          )}
+        </Comp>
+      );
+    case "templates_artikkel":
+      return (
+        <Comp className="text-deepblue-600 flex items-center gap-3">
+          Mønster og Maler
+          {beta && (
+            <DsTag
+              variant="alt1"
+              size="small"
+              className="border-violet-300 bg-violet-50"
+            >
              Beta
            </DsTag>
          )}
@@ -1,15 +1,14 @@
-import { withErrorBoundary } from "@/error-boundary";
+import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { Label } from "@navikt/ds-react";

-const Intro = ({
-  node,
-  internal,
-}: {
+type IntroProps = {
  node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
  internal?: boolean;
-}) => {
+};
+
+const Intro = ({ node, internal }: IntroProps) => {
  if (!node || !node.body || !node.brukes_til) {
    return null;
  }
@@ -61,4 +60,10 @@ const Intro = ({
  );
 };

-export default withErrorBoundary(Intro, "Intro komponent");
+export default function Component(props: IntroProps) {
+  return (
+    <ErrorBoundary boundaryName="Intro-modul">
+      <Intro {...props} />
+    </ErrorBoundary>
+  );
+}
@@ -1,92 +0,0 @@
-import { withErrorBoundary } from "@/error-boundary";
-import { BodyShort, Detail, Heading, Tooltip } from "@navikt/ds-react";
-import { Highlighter } from "./Highlight";
-import { PropTableT } from "@/types";
-
-const List = ({ prop, parent }: { prop: any; parent: string }) => {
-  if (prop?.description && prop.description.includes("@private")) {
-    return null;
-  }
-
-  return (
-    <Detail
-      as="div"
-      className="block overflow-x-auto border border-t-0 border-gray-300 p-2 font-mono first-of-type:border-t last-of-type:rounded-b"
-    >
-      <dt>
-        {!prop.defaultValue ? (
-          <span className="font-semibold">{`${prop.name}${
-            prop?.required ? "" : "?"
-          } `}</span>
-        ) : (
-          <Tooltip
-            content={`default: ${prop.defaultValue}`}
-            arrow={false}
-            delay={0}
-          >
-            <span className="mr-2 cursor-pointer border-b border-dashed border-gray-600 font-semibold">{`${
-              prop.name
-            }${prop?.required ? "" : "?"}`}</span>
-          </Tooltip>
-        )}
-
-        <span>{prop.type ? <>{Highlighter({ type: prop.type })}</> : ""}</span>
-      </dt>
-      {prop.description && (
-        <dd className="whitespace-pre-wrap font-sans text-base">
-          {prop.description}
-        </dd>
-      )}
-      {prop.name === "ref" && prop.type.includes("Ref<") && (
-        <dd className="font-sans text-base">
-          {`${parent} extends ${prop.type.slice(
-            prop.type.indexOf("<") + 1,
-            prop.type.lastIndexOf(">")
-          )}`}
-        </dd>
-      )}
-    </Detail>
-  );
-};
-
-const PropTable = ({ komponent }: { komponent: PropTableT }) => {
-  return (
-    <div>
-      <Heading
-        size="xsmall"
-        level="3"
-        className="scroll-m-8 rounded-t-lg border border-b-0 border-gray-300 bg-gray-50 p-2"
-        id={`${komponent._key}`}
-      >
-        {komponent?.title ? komponent.title : "Props"}
-      </Heading>
-
-      <div className="toc-ignore relative mb-8">
-        {komponent?.propref?.proplist?.length === 0 && (
-          <div className="mb-8 rounded-b-lg border border-gray-300 p-2">
-            <BodyShort>Fant ingen props for denne komponenten.</BodyShort>
-          </div>
-        )}
-
-        <dl>
-          {komponent?.overridable && (
-            <List
-              prop={{
-                description: "OverridableComponent-api",
-                required: false,
-                name: "as",
-                type: "React.ElementType",
-              }}
-              parent={komponent?.title ?? ""}
-            />
-          )}
-          {komponent?.propref?.proplist?.map((prop) => (
-            <List key={prop.name} prop={prop} parent={komponent?.title ?? ""} />
-          ))}
-        </dl>
-      </div>
-    </div>
-  );
-};
-
-export default withErrorBoundary(PropTable, "Proptable");
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	37165e9f38	Version Packages (#2459 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-08 16:24:10 +01:00
KenandHalvor Haugan	d19920ca78	[aksel.nav.no] 404 template (#2455 ) * ✨ Initial template * 💄 Automatisk skalert svg * 🎉 Maler v1 * 📝 Bedre endringslogg * Update aksel.nav.no/website/pages/templates/404/complete.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update aksel.nav.no/website/pages/templates/404/complete.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 📝 Bedre kommentarer * 📝 rename stories * ♻️ Bruker nå page * 🎨 Oppdatert mal med endringer * 🎨 Bruker 404-mal på Aksel * :trucK: Flyttet data-atributt --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2023-11-08 15:23:15 +01:00
Ken	60d3481300	[Primitives] Page-primitive (#2456 ) * ✨ Frame-component * 🏷️ rename to page * 🎨 Belowfold * 🎨 Gutters * 🎨 Fjernet content width * 🎨 Page-stories * 📝 Config * 📝 changeset * 📝 Bedre props * ♻️ Ryddet opp i CSS og prop-navn * ♻️ Tokens for padding-verdier * ♻️ Bedre background example * ♻️ Bedre contentblockpadding example * ♻️ Bedre gutters example * 🔥 Fjernet dekoratør-story fra chromatic * 🐛 Riktig page-padding * 💄 Justert maksbredder * 📝 kommentarer * 📝 JSDoc * 📝 jsdoc update * 📝 Kommentarer	2023-11-08 12:14:35 +01:00
Halvor Haugan	f486937439	⬆️ Storybook 7.5.3 (#2458 )	2023-11-08 09:12:00 +01:00
Halvor Haugan	c62058abc1	🚨 eslint: sjekk avhengighetssykluser når i CI (#2430 )	2023-11-07 14:29:51 +01:00
Halvor Haugan	84d9b8260f	Fiks typo i timeline eksempel desc	2023-11-07 13:56:58 +01:00
Halvor Haugan	c108063dcb	Justering av eksempler på Timeline (#2454 )	2023-11-06 08:55:31 +01:00
Ken	2a8533ad56	[aksel.nav.no] Templates vises nå riktig på mønster/mal-sider (#2450 ) * 🐛 Fikset visning av templates * 🐛 autoGenerateArrayKeys fungerte ikke for nested arrays * 🐛 Fikset tester	2023-11-03 12:18:38 +01:00
KenandAnders Olsen Sandvik	9b990a2178	[aksel.nav.no] Legg til RSS feed på produktbloggen (#2439 ) (#2453 ) * [aksel.nav.no] Legg til RSS feed på produktbloggen * Adjust generateRssFeed to accept a path parameter * 🎉 Oppdatert generering av rss --------- Co-authored-by: Anders Olsen Sandvik <github@mlsv.no>	2023-11-03 10:26:35 +01:00
github-actions[bot]andgithub-actions[bot]	5fec1f24f4	Version Packages (#2452 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-02 22:03:10 +01:00
Halvor Haugan	c27c1cfe26	🐛 Datepicker lukker ikke lenger modalen den er i (#2451 )	2023-11-02 21:59:06 +01:00
Ken	5a649d2282	🐛 Kunne ikke se preview av mønster forside (#2449 )	2023-11-02 15:11:34 +01:00
Ken	baac9cc251	[aksel.nav.no] Sidemaler for Mønster og maler (#2438 ) * 🎉 Sanity-schema for mønster og maler * 🎨 La til mønster og maler i sanity structure * 🎨 Støtte for templates i søk * 🎨 Sidemaler for Mønster og Maler * 🎨 Riktig håndtering av breadcrumbs * 🐛 Fikset story * 🐛 Fikset search-indeksering * 🐛 Fikset search-test * 🐛 Fikset typo * [aksel.nav.no] Refaktorert synking av eksempler/templates mellom kode og sanity (#2442) * 🎨 Template pages * 🔥 Fjernet templates fra logging * ♻️ Refaktorert example-generering * ✅ extractArgs tests * ✅ filter-code tester * ✅ Ny code-parsing tester * 🚚 Flyttet filer * 🎨 Oppdaterer sanity remote * 🎨 sanity schema for templates * 🎨 Schema for metadata in templates * 🎨 henter nå ut metadata fra templates * 🎨 Flyttet createId funksjon * 🚚 rename folder * 🎨 schema for templates i sanity * 🐛 Fjernet dryrun fra oppdatering * 🎨 Make sure to delete old documents after updating * 🐛 Riktige typer for version-schema * [aksel.nav.no] Integrert mønster og maler templates inn på aksel (#2447) * 🎨 Template pages * 🔥 Fjernet templates fra logging * ♻️ Refaktorert example-generering * ✅ extractArgs tests * ✅ filter-code tester * ✅ Ny code-parsing tester * 🚚 Flyttet filer * 🎨 Oppdaterer sanity remote * 🎨 sanity schema for templates * 🎨 Schema for metadata in templates * 🎨 henter nå ut metadata fra templates * 🎨 Flyttet createId funksjon * 🚚 rename folder * 🎨 schema for templates i sanity * 🐛 Fjernet dryrun fra oppdatering * 🎨 Make sure to delete old documents after updating * 🐛 Riktige typer for version-schema * 🎨 Kan nå vise eksempler på side * 🎨 Automatisk visning av changelog * 📝 typo * 📝 Rename fra changelog til Endringer * 🐛 Fikset story-typer * 🎨 Forsideblokk for templates * 🐛 feil riktekst ble brukt	2023-11-02 11:47:57 +01:00
Sjur	d924d523e4	Update in-the-wild.yml (#2448 ) Tok bort "assignees"	2023-11-02 10:38:51 +01:00
Sjur	fc5a77081d	Create in-the-wild.yml (#2445 ) Issue template for å ta imot eksempler fra folk	2023-11-02 10:01:49 +01:00
github-actions[bot]andgithub-actions[bot]	1f3477a3e9	Version Packages (#2446 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-02 09:55:38 +01:00
Halvor Haugan	925450cb73	💄 Modal: Bedre håndtering av mobiler i landskapsmodus (#2444 )	2023-11-02 09:30:19 +01:00
github-actions[bot]andgithub-actions[bot]	534a6a3b40	Version Packages (#2443 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-01 15:46:41 +01:00
Ken Halvor Haugan Halvor Haugan	51eee7f011	[Datepicker/Modal] Datepicker bruker nå Modal på mobil og for nested Modal (#2419 ) * 🎨 Initial Modal-update * 🐛 close(open handling for Modal * 🔥 Fjernet openOnFocus * 🔥 Fjernet outsideclick og useEscape * 🐛 monthpicker onClose forwarding * 🎨 Flyttet DateInput til egen parts-mappe * 🏷️ DateInput imports * 🚚 Flyttet DateWrapper ut til egen komponent * 🎨 Monthpicker bruker dateWrapper * 💄 Oppdatert styling for datepicker * 📝 Oppdatert eksempler * 📝 changeset * 🐛 Fikset imports i date-hooks * ♻️ Bedre context-bruk i Modal.tsx * 📝 Bedre tekster for deprecation * 🐛 Støtter nå jsdom * 🐛 Fikset polyfill av datepicker * 🎨 closeOnBackdropClick i datepicker * 🏷️ 🐛 Fikset outsideClick boundary + fjernet bubbleEscape-prop * 🔥 Fjernet console.log * 🔥 Fjernet bubbleEscape-prop * Update @navikt/core/react/src/date/hooks/useMonthPicker.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/datepicker/datepicker.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🎨 Bedre className for nested modal * 🐛 Bedre check om popover er i datepicker * 🔥 Fjernet unødvendig if rundt window-check * 🎨 Bedre fallback for useMedia-hook * 🎨 bedre navn i useMedia * 📝 Datepicker-stories for size har preset-values * Update @navikt/core/react/src/date/hooks/useDatepicker.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🎨 DateContext er nå default null hvis ikke satt * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/utils/labels.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🐛 Fikset small-size padding * 🔥 Fjernet error-demo * fokusgreier * 🎨 bedre onClose-handling av modal * 🐛 Håndterer focus ved cancel og select nå * 🐛 Feil i typer for dateinput * 🐛 setAnchorRef var optional * 🐛 null-test * 🎨 Fjernet jsdom sjekk tester for useMedia --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>	2023-11-01 15:38:57 +01:00
Vegard Haugstvedt	909ae6aed1	Add new useVirtualFocus hook, for use in Combobox (#2394 ) * Add new useVirtualFocus hook, for use in Combobox. Might be useful for other components later, but will scope it for Combobox at first. * Create filteredOptionsUtils, which has utiltity functions for creating IDs and for text lookups in lists. * Get rid of data-value, and use filteredOptionsMap to look up the value of the currently (virtually) focused element instead This allows use of e.g. numbers as options, which data-value didn't. * Using useState instead of useRef to handle filteredOptionsRef * Added changeset * Force option id to be lower case, to avoid different casing from being interpreted as being different from the existing options * Fix bug where it was not possible to select multiple custom (new) options in a multiselect selectedOptionsContext is not available inside customOptionsContext, so need to take isMultiSelect from props instead * Switch to use toLocalLowerCase and remove uneccessary use of string literal * type mismatch * Clean up types - reuse from ComboboxProps type definition, and fix resulting type mismatches * Rename filteredOptionsRef variable returned from filteredOptionsContext to reflect that it is now actually a setState-function * Expose virtualFocus as an object through filteredOptionsContext, instead of each separate method. Done to remove need to wrap moveFocusUp and moveFocusDown in order to toggle isListOpen	2023-11-01 12:02:57 +01:00
Lars Eirik Korsgaard Hansen	cd3859a91e	📝 add aria roles example to Alert (#2440 )	2023-11-01 09:16:42 +01:00
Ken	338f14e7ac	[aksel.nav.no] Refaktorert ErrorBoundary-bruk for fast-refresh (#2433 ) * ♻️ errorboundary refactor * ♻️ Converted to non-anonymous function errorboundary * ♻️ Fikset ErrorBoundary Full-refresh * [aksel.nav.no] ♻️ Component-structure (#2435) * 🔥 Fjernet UUFeedback-modul * 🚚 Flyttet filer i egne mapper * 🚚 Oppdatert struktur for sanity-moduler * 🚚 Oppdatert akselcube exports * 🔥 Fjernet Feedback-modul * 🚚 Rename SuggestionBlock * 🚚 Flyttet relatert innhold * 🐛 Fikset suggestionblock imports * 🎨 Oppdatert bruk av ShowMore	2023-10-30 15:42:35 +01:00
Halvor Haugan	aed1d082c3	🐛 Legg på onClose på Popover-eksempler (#2436 )	2023-10-30 12:36:47 +01:00
Ken	31e9226b55	[Aksel.nav.no] Bruker alpha ShowMore lokalt på nettsiden (#2409 ) * 📝 Story for TokenTable * ✨ Tester lokal alpha-showmore på Aksel * 🎨 Showmore brukes nå bare når det er over 10 tokens i listen * 📝 yarn lock	2023-10-30 12:10:16 +01:00
				`@@ -1 +0,0 @@`
				`export { default as RelatertInnhold } from "./RelatertInnhold";`
				`@@ -1 +0,0 @@`
				`export { default as CodeExamples } from "./Examples";`