From ef58f8145979fb4f228a1bbb985dcbb08e2e68f4 Mon Sep 17 00:00:00 2001
From: Jostein Stuhaug <135307852+josstn@users.noreply.github.com>
Date: Wed, 4 Oct 2023 10:54:07 +0200
Subject: [PATCH 1/5] Revert "Nav design system updates (#295)" (#308)

This reverts commit f82e6487c406a28bbdbaa057bebf55147e789eeb.
---
 .github/dependabot.yml                        |  3 -
 packages/etablert-tilsyn/package.json         |  4 +-
 packages/inntektsmelding/package.json         |  4 +-
 .../form-utils/package.json                   |  4 +-
 .../cypress/e2e/Sykdom.cy.js"                 |  6 +-
 .../medisinsk-vilk\303\245r/mock/handlers.ts" |  1 +
 .../medisinsk-vilk\303\245r/package.json"     |  4 +-
 .../confirmation-modal/ConfirmationModal.tsx" |  8 +-
 .../diagnosekode-modal/DiagnosekodeModal.tsx" | 77 ++++++++-------
 .../Diagnosekodeoversikt.tsx"                 |  8 +-
 .../diagnosekodeoversikt.css"                 | 24 +----
 .../InnleggelsesperiodeFormModal.tsx"         |  9 +-
 .../Innleggelsesperiodeoversikt.tsx"          |  5 +-
 .../modal-form-wrapper/ModalFormWrapper.tsx"  | 19 ++++
 .../OverlappendePeriodeModal.tsx"             |  8 +-
 .../SlettDuplikatModal.tsx"                   | 57 ++++++-----
 ...03\245rsvurderingAvTilsynOgPleie.spec.tsx" | 15 +--
 .../VilkarsvurderingLangvarigSykdom.tsx"      |  5 +-
 packages/om-barnet/package.json               |  4 +-
 packages/omsorgen-for/package.json            |  4 +-
 packages/omsorgsdager/package.json            |  4 +-
 packages/uttak/package.json                   |  4 +-
 yarn.lock                                     | 98 ++++++++++---------
 23 files changed, 200 insertions(+), 175 deletions(-)
 create mode 100644 "packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 4fe5b39a..4d7e5fda 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -27,9 +27,6 @@ updates:
       typescript-eslint:
         patterns:
           - "@typescript-eslint*"
-      aksel:
-        patterns:
-          - "@navikt/ds-*"
   - package-ecosystem: github-actions
     directory: "/"
     schedule:
diff --git a/packages/etablert-tilsyn/package.json b/packages/etablert-tilsyn/package.json
index ef292b48..e15b0b0d 100644
--- a/packages/etablert-tilsyn/package.json
+++ b/packages/etablert-tilsyn/package.json
@@ -27,9 +27,9 @@
         "@types/react-dom": "18.2.7"
     },
     "dependencies": {
-        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-date-utils": "^1.0.5",
diff --git a/packages/inntektsmelding/package.json b/packages/inntektsmelding/package.json
index 4a6d2e40..81a752d4 100644
--- a/packages/inntektsmelding/package.json
+++ b/packages/inntektsmelding/package.json
@@ -35,9 +35,9 @@
         "ts-node": "10.9.1"
     },
     "dependencies": {
-        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-form-hooks": "4.2.0",
         "@navikt/ft-plattform-komponenter": "2.3.0",
diff --git a/packages/k9-frontend-modules/form-utils/package.json b/packages/k9-frontend-modules/form-utils/package.json
index b9fb7ddc..db808974 100644
--- a/packages/k9-frontend-modules/form-utils/package.json
+++ b/packages/k9-frontend-modules/form-utils/package.json
@@ -19,8 +19,8 @@
     ],
     "devDependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "5.5.0",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@popperjs/core": "2.11.8",
diff --git "a/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js" "b/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
index 6c1bddd3..b94484b5 100644
--- "a/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
+++ "b/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
@@ -13,7 +13,7 @@ describe('Sykdom', () => {
         cy.contains('Legg til innleggelsesperiode').click();
         cy.get('input[id="innleggelsesperioder[3].fom"]').type('010123');
         cy.get('input[id="innleggelsesperioder[3].tom"]').type('300123');
-        cy.get('dialog').contains('Bekreft').click();
+        cy.get('div[role="dialog"]').contains('Bekreft').click();
         cy.contains('Fortsett').click();
     });
     it('skal kunne håndtere tilsyn og pleie', () => {
@@ -39,7 +39,7 @@ describe('Sykdom', () => {
             'Du har ikke vurdert alle periodene som må vurderes. Resterende perioder vurderer du etter at du har lagret denne.'
         ).should('not.exist');
         cy.contains('Bekreft').click();
-        cy.get('dialog').find('button').contains('Bekreft').click();
+        cy.get('.ReactModalPortal').find('button').contains('Bekreft').click();
         cy.contains('Eventuelle endringer er registrert').click();
     });
     it('skal kunne håndtere to omsorgspersoner', () => {
@@ -47,7 +47,7 @@ describe('Sykdom', () => {
         cy.get('[name="vurderingAvToOmsorgspersoner"]').type('test');
         cy.get('input[id="harBehovForToOmsorgspersonerYES"]').check({ force: true });
         cy.contains('Bekreft').click();
-        cy.get('dialog').find('button').contains('Bekreft').click();
+        cy.get('.ReactModalPortal').find('button').contains('Bekreft').click();
         cy.contains('Sykdom er ferdig vurdert og du kan gå videre i behandlingen.').should('exist');
     });
 });
diff --git "a/packages/medisinsk-vilk\303\245r/mock/handlers.ts" "b/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
index 071ab37c..d609654a 100644
--- "a/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
+++ "b/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
@@ -9,6 +9,7 @@ import mockedDokumentoversikt from './mocked-data/mockedDokumentoversikt';
 import { createKontinuerligTilsynVurdering, createToOmsorgspersonerVurdering } from './apiUtils';
 import Vurderingstype from '../src/types/Vurderingstype';
 import mockedDiagnosekoderesponse from './mocked-data/mockedDiagnosekodeResponse';
+import mockedDiagnosekodeSearchResponse from './mocked-data/mockedDiagnosekodeSearchResponse';
 import createStrukturertDokument from './mocked-data/createStrukturertDokument';
 import mockedInnleggelsesperioder from './mocked-data/mockedInnleggelsesperioder';
 import { Dokumenttype } from '../src/types/Dokument';
diff --git "a/packages/medisinsk-vilk\303\245r/package.json" "b/packages/medisinsk-vilk\303\245r/package.json"
index 23d9a6cb..b341ac09 100644
--- "a/packages/medisinsk-vilk\303\245r/package.json"
+++ "b/packages/medisinsk-vilk\303\245r/package.json"
@@ -34,9 +34,9 @@
     },
     "dependencies": {
         "@navikt/diagnosekoder": "^1.2023.0",
-        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
index 05c97c69..9dbf89a8 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
@@ -16,9 +16,9 @@ const ConfirmationModal = ({
     onCancel,
     isOpen,
     isSubmitting,
-}: ConfirmationModalProps): JSX.Element => isOpen ? (
+}: ConfirmationModalProps): JSX.Element => (
     <Modal open={isOpen} onClose={onCancel} className={styles.confirmationModal}>
-        <Modal.Body>
+        <Modal.Content>
             {children}
             <div className={styles.confirmationModal__buttonSection}>
                 <Button
@@ -40,8 +40,8 @@ const ConfirmationModal = ({
                     Avbryt
                 </Button>
             </div>
-        </Modal.Body>
+        </Modal.Content>
     </Modal>
-) : null;
+);
 
 export default ConfirmationModal;
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
index 485cce76..4b6d8230 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
@@ -3,6 +3,7 @@ import { Box, Margin } from '@navikt/ft-plattform-komponenter';
 import React from 'react';
 import DiagnosekodeSelector from '../../form/pure/PureDiagnosekodeSelector';
 import styles from '../diagnosekodeoversikt/diagnosekodeoversikt.css';
+import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import type { DiagnosekodeSearcherPromise } from '../../../util/diagnosekodeSearcher';
 
 interface DiagnosekodeModalProps {
@@ -27,8 +28,8 @@ const DiagnosekodeModal = ({
     };
 
     return (
-        <Modal open={isOpen} header={{heading: "Legg til diagnosekoder", closeButton: true}} onClose={onRequestClose} className={styles.diagnosekodeoversikt__modal}>
-            <Modal.Body>
+        <Modal open={isOpen} closeButton onClose={onRequestClose} className={styles.diagnosekodeoversikt__modal}>
+            <Modal.Content>
                 <form
                     onSubmit={(e) => {
                         e.preventDefault();
@@ -41,42 +42,44 @@ const DiagnosekodeModal = ({
                         setSelectedDiagnosekoder([]);
                     }}
                 >
-                    <Box marginTop={Margin.large}>
-                        <DiagnosekodeSelector
-                            initialDiagnosekodeValue=""
-                            name="diagnosekode"
-                            onChange={(diagnosekoder) => {
-                                setSelectedDiagnosekoder(diagnosekoder);
-                            }}
-                            label="Diagnosekode"
-                            selectedDiagnosekoder={selectedDiagnosekoder}
-                            hideLabel
-                            searcherPromise={searcherPromise}
-                        />
-                    </Box>
-                    <Box marginTop={Margin.xLarge}>
-                        <div style={{ display: 'flex' }}>
-                            <Button
-                                size="small"
-                                disabled={isSubmitting}
-                                loading={isSubmitting}
-                                id="bekreftDiagnosekodeKnapp"
-                            >
-                                Bekreft
-                            </Button>
-                            <Button
-                                variant="secondary"
-                                size="small"
-                                style={{ marginLeft: '1rem' }}
-                                onClick={handleClose}
-                                disabled={isSubmitting}
-                            >
-                                Avbryt
-                            </Button>
-                        </div>
-                    </Box>
+                    <ModalFormWrapper title="Legg til diagnosekoder">
+                        <Box marginTop={Margin.large}>
+                            <DiagnosekodeSelector
+                                initialDiagnosekodeValue=""
+                                name="diagnosekode"
+                                onChange={(diagnosekoder) => {
+                                    setSelectedDiagnosekoder(diagnosekoder);
+                                }}
+                                label="Diagnosekode"
+                                selectedDiagnosekoder={selectedDiagnosekoder}
+                                hideLabel
+                                searcherPromise={searcherPromise}
+                            />
+                        </Box>
+                        <Box marginTop={Margin.xLarge}>
+                            <div style={{ display: 'flex' }}>
+                                <Button
+                                    size="small"
+                                    disabled={isSubmitting}
+                                    loading={isSubmitting}
+                                    id="bekreftDiagnosekodeKnapp"
+                                >
+                                    Bekreft
+                                </Button>
+                                <Button
+                                    variant="secondary"
+                                    size="small"
+                                    style={{ marginLeft: '1rem' }}
+                                    onClick={handleClose}
+                                    disabled={isSubmitting}
+                                >
+                                    Avbryt
+                                </Button>
+                            </div>
+                        </Box>
+                    </ModalFormWrapper>
                 </form>
-            </Modal.Body>
+            </Modal.Content>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
index 31acd3e6..596776af 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
@@ -1,8 +1,8 @@
 import { Box, Margin, TitleWithUnderline, WarningIcon } from '@navikt/ft-plattform-komponenter';
 import { get, post } from '@navikt/k9-fe-http-utils';
 
-import { Loader } from '@navikt/ds-react';
-import React, { useMemo } from 'react';
+import { Loader, Modal } from '@navikt/ds-react';
+import React, { useEffect, useMemo } from 'react';
 import { useMutation, useQueries, useQuery } from 'react-query';
 import LinkRel from '../../../constants/LinkRel';
 import Diagnosekode from '../../../types/Diagnosekode';
@@ -39,6 +39,10 @@ const Diagnosekodeoversikt = ({ onDiagnosekoderUpdated }: DiagnosekodeoversiktPr
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
     const addButtonRef = React.useRef<HTMLButtonElement>();
 
+    useEffect(() => {
+        Modal.setAppElement(document.body);
+    }, []);
+
     const hentDiagnosekoder = () =>
         get<DiagnosekodeResponse>(endpoints.diagnosekoder, httpErrorHandler).then(
             (response: DiagnosekodeResponse) => response
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
index 83d6dbfc..c1328170 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
@@ -8,25 +8,5 @@
 }
 
 .diagnosekodeoversikt__modal :global .autocomplete ul {
-  /*
-  This overrides the position: relative set in the Autocomplete component css.
-  Without this, the autocomplete suggestions appear inline in the DOM, pushing
-  other content down, causing jank.
-
-  Using fixed works with dialog element, let's the popup content overflow the
-  dialog box.
-  */
-  position: fixed;
-  /*
-  The css in Autocomplete component used in the modal has width: 100% (minus
-  a little) for the suggestions list. With the original position: relative
-  that makes the width of the suggestion list match the parent Autocomplete
-  input element.
-
-  When changing to position fixed, the width: 100% becomes calculated from the
-  viewport instead, so the ul becomes much to wide.
-
-  Setting width: inherit makes it as wide as its content instead.
-  */
-  width: inherit;
-}
\ No newline at end of file
+  position: absolute;
+}
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
index 1c42fd89..ed65a521 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
@@ -8,6 +8,7 @@ import { InnleggelsesperiodeDryRunResponse } from '../../../api/api';
 import AddButton from '../add-button/AddButton';
 import DeleteButton from '../delete-button/DeleteButton';
 import { FieldName } from '../innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt';
+import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import styles from './innleggelsesperiodeFormModal.css';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -62,11 +63,12 @@ const InnleggelsesperiodeFormModal = ({
     };
 
     return (
-        <Modal open onBeforeClose={handleCloseModal} header={{heading: "Innleggelsesperioder", closeButton: true}} className={styles.innleggelsesperiodeFormModal}>
-            <Modal.Body>
+        <Modal open closeButton onClose={handleCloseModal} className={styles.innleggelsesperiodeFormModal}>
+            <Modal.Content>
                 {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                 <FormProvider {...formMethods}>
                     <Form onSubmit={formMethods.handleSubmit(handleSubmit)} shouldShowSubmitButton={false}>
+                        <ModalFormWrapper title="Innleggelsesperioder">
                             <Box marginTop={Margin.large}>
                                 <PeriodpickerList
                                     name="innleggelsesperioder"
@@ -181,9 +183,10 @@ const InnleggelsesperiodeFormModal = ({
                                     </Button>
                                 </div>
                             </Box>
+                        </ModalFormWrapper>
                     </Form>
                 </FormProvider>
-            </Modal.Body>
+            </Modal.Content>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
index 378c35c9..64f5b688 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
@@ -1,4 +1,4 @@
-import { Loader } from '@navikt/ds-react';
+import { Loader, Modal } from '@navikt/ds-react';
 import { Box, LinkButton, Margin, PageError, TitleWithUnderline } from '@navikt/ft-plattform-komponenter';
 import { get } from '@navikt/k9-fe-http-utils';
 import { Period } from '@navikt/k9-fe-period-utils';
@@ -25,6 +25,9 @@ interface InnleggelsesperiodeoversiktProps {
 const Innleggelsesperiodeoversikt = ({
     onInnleggelsesperioderUpdated,
 }: InnleggelsesperiodeoversiktProps): JSX.Element => {
+    useEffect(() => {
+        Modal.setAppElement(document.body);
+    }, []);
     const { endpoints, httpErrorHandler } = React.useContext(ContainerContext);
 
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"
new file mode 100644
index 00000000..d4362f71
--- /dev/null
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"
@@ -0,0 +1,19 @@
+import { Heading } from '@navikt/ds-react';
+import { Box, Margin } from '@navikt/ft-plattform-komponenter';
+import React from 'react';
+
+interface ModalFormWrapperProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+const ModalFormWrapper = ({ title, children }: ModalFormWrapperProps): JSX.Element => (
+    <div style={{ paddingTop: '1.5rem', paddingBottom: '1.5rem', paddingLeft: '1rem', paddingRight: '1rem' }}>
+        <Heading size="small" level="2">
+            {title}
+        </Heading>
+        <Box marginTop={Margin.large}>{children}</Box>
+    </div>
+);
+
+export default ModalFormWrapper;
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
index 1abf092b..e084ae14 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
@@ -1,6 +1,6 @@
-import { Alert, BodyShort, Heading } from '@navikt/ds-react';
+import { Alert, BodyShort, Heading, Modal } from '@navikt/ds-react';
 import { Box, Margin } from '@navikt/ft-plattform-komponenter';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PeriodeMedEndring } from '../../../types/PeriodeMedEndring';
 import ConfirmationModal from '../confirmation-modal/ConfirmationModal';
 
@@ -37,6 +37,10 @@ const OverlappendePeriodeModal = ({
     isOpen,
     isSubmitting,
 }: OverlappendePeriodeModalProps): JSX.Element => {
+    useEffect(() => {
+        Modal.setAppElement(document.body);
+    }, []);
+
     const overlappendePerioderISammeBehandling =
         perioderMedEndring.filter(({ endrerVurderingSammeBehandling }) => endrerVurderingSammeBehandling === true) ||
         [];
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
index d908428e..bca5273a 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
@@ -7,6 +7,7 @@ import Dokument from '../../../types/Dokument';
 import { findLinkByRel } from '../../../util/linkUtils';
 import scrollUp from '../../../util/viewUtils';
 import ContainerContext from '../../context/ContainerContext';
+import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import styles from './slettDuplikatModal.css';
 
 interface SlettDuplikatModalProps {
@@ -53,35 +54,37 @@ const SlettDuplikatModal = ({ handleCloseModal, selectedDocument, onRemove }: Sl
         );
     };
     return (
-        <Modal open header={{heading: "Fjern som duplikat", closeButton: true}} onClose={handleCloseModal}>
-            <Modal.Body>
-                <BodyShort size="small">
-                    Når du fjerner et dokument som duplikat vil det bli lagt som et eget dokument i listen.
-                </BodyShort>
-                {removeDuplikatFeilet && (
-                    <Box marginTop={Margin.medium}>
-                        <PageError message="Noe gikk galt, vennligst prøv igjen senere" />
-                    </Box>
-                )}
-                <div className={styles.buttonContainer}>
-                    <Button
-                        id="submitButton"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            removeDuplikatreferanse();
-                        }}
-                        loading={isSubmitting}
-                        disabled={isSubmitting}
-                    >
-                        Fjern som duplikat
-                    </Button>
-                    <div className={styles.cancelButton}>
-                        <Button variant="secondary" onClick={handleCloseModal}>
-                            Avbryt
+        <Modal open closeButton onClose={handleCloseModal}>
+            <Modal.Content>
+                <ModalFormWrapper title="Fjern som duplikat">
+                    <BodyShort size="small">
+                        Når du fjerner et dokument som duplikat vil det bli lagt som et eget dokument i listen.
+                    </BodyShort>
+                    {removeDuplikatFeilet && (
+                        <Box marginTop={Margin.medium}>
+                            <PageError message="Noe gikk galt, vennligst prøv igjen senere" />
+                        </Box>
+                    )}
+                    <div className={styles.buttonContainer}>
+                        <Button
+                            id="submitButton"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                removeDuplikatreferanse();
+                            }}
+                            loading={isSubmitting}
+                            disabled={isSubmitting}
+                        >
+                            Fjern som duplikat
                         </Button>
+                        <div className={styles.cancelButton}>
+                            <Button variant="secondary" onClick={handleCloseModal}>
+                                Avbryt
+                            </Button>
+                        </div>
                     </div>
-                </div>
-            </Modal.Body>
+                </ModalFormWrapper>
+            </Modal.Content>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
index df78a5db..0f1ac877 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
@@ -189,13 +189,14 @@ describe('VilkårsvurderingAvTilsynOgPleie', () => {
         });
 
         it('should open vurdering-form when Ny vurdering-button is clicked, and form should be closeable by clicking Avbryt button', async () => {
-            const res = renderVilkårsvurderingComponent();
-            expect(res.queryByText(/Vurdering av tilsyn og pleie/)).toBeNull()
-            fireEvent.click(await res.findByText('Ny vurdering'));
-            expect(res.getByText(/Vurdering av tilsyn og pleie/i)).toBeVisible()
-            const avbrytKnapp = await res.findByText(/^Avbryt$/i)
-            fireEvent.click(avbrytKnapp);
-            expect(res.queryByText(/Vurdering av tilsyn og pleie/)).toBeNull()
+            const { getByText, queryByText } = renderVilkårsvurderingComponent();
+            await waitFor(() => {
+                expect(queryByText(/Vurdering av tilsyn og pleie/)).toBeNull();
+                fireEvent.click(screen.getByText('Ny vurdering'));
+                expect(getByText(/Vurdering av tilsyn og pleie/i)).toBeInTheDocument();
+                fireEvent.click(screen.getByText(/Avbryt/i));
+                expect(queryByText(/Vurdering av tilsyn og pleie/)).toBeNull();
+            });
         });
     });
 
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
index 90a7eea5..8f6d8c84 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
@@ -1,6 +1,6 @@
 import { get } from '@navikt/k9-fe-http-utils';
 import { Period } from '@navikt/k9-fe-period-utils';
-import { Box, Margin, NavigationWithDetailView, PageContainer } from '@navikt/ft-plattform-komponenter';
+import { NavigationWithDetailView, PageContainer, Box, Margin } from '@navikt/ft-plattform-komponenter';
 import React, { useMemo } from 'react';
 import Step, { langvarigSykdomSteg, StepId } from '../../../types/Step';
 import SykdomsstegStatusResponse from '../../../types/SykdomsstegStatusResponse';
@@ -15,8 +15,7 @@ import Vurderingsdetaljer from '../vurderingsdetaljer/Vurderingsdetaljer';
 
 import BehandlingType from '../../../constants/BehandlingType';
 import FagsakYtelseType from '../../../constants/FagsakYtelseType';
-import VurderingsoversiktLangvarigSykdomMessages
-    from '../vurderingsoversikt-langvarig-sykdom-messages/VurderingsoversiktLangvarigSykdomMessages';
+import VurderingsoversiktLangvarigSykdomMessages from '../vurderingsoversikt-langvarig-sykdom-messages/VurderingsoversiktLangvarigSykdomMessages';
 
 interface VilkårsvurderingLangvarigSykdomProps {
     navigerTilNesteSteg: (steg: Step, ikkeMarkerSteg?: boolean) => void;
diff --git a/packages/om-barnet/package.json b/packages/om-barnet/package.json
index 45ea2fa3..f8c01ea9 100644
--- a/packages/om-barnet/package.json
+++ b/packages/om-barnet/package.json
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "5.5.0",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git a/packages/omsorgen-for/package.json b/packages/omsorgen-for/package.json
index cd154f2d..66a62419 100644
--- a/packages/omsorgen-for/package.json
+++ b/packages/omsorgen-for/package.json
@@ -24,9 +24,9 @@
     },
     "dependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git a/packages/omsorgsdager/package.json b/packages/omsorgsdager/package.json
index d8fd35ec..58410862 100644
--- a/packages/omsorgsdager/package.json
+++ b/packages/omsorgsdager/package.json
@@ -27,8 +27,8 @@
         "stylelint": "15.10.3"
     },
     "dependencies": {
-        "@navikt/ds-css": "5.5.0",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/fnrvalidator": "1.3.3",
         "classnames": "2.3.2",
         "cors": "2.8.5",
diff --git a/packages/uttak/package.json b/packages/uttak/package.json
index a8028993..73b98e19 100644
--- a/packages/uttak/package.json
+++ b/packages/uttak/package.json
@@ -29,8 +29,8 @@
         "@types/testing-library__jest-dom": "5.14.9"
     },
     "dependencies": {
-        "@navikt/ds-css": "5.5.0",
-        "@navikt/ds-react": "5.5.0",
+        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-react": "4.12.1",
         "@navikt/ft-form-hooks": "4.2.0",
         "@navikt/ft-form-validators": "2.1.0",
         "@navikt/ft-plattform-komponenter": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index 7a8d66e5..f07fc00f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4009,10 +4009,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^5.5.0":
-  version: 5.5.0
-  resolution: "@navikt/aksel-icons@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Faksel-icons%2F5.5.0%2Fb382aa387897f3f4850fbc16c3b95d6a57b7ef38"
-  checksum: 500b039ed265398cfb3706a5f3455bdecf6180356dc2c5fbf9f6400c668f7c24e226c191308c6a6e5469ad2e2c15a870202bcbfc5e6bcc431de1ce7be6e4d3dd
+"@navikt/aksel-icons@npm:^4.12.1":
+  version: 4.12.1
+  resolution: "@navikt/aksel-icons@npm:4.12.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Faksel-icons%2F4.12.1%2F1055d322e956e073b83dca8e8b3a6be62879e1f1"
+  checksum: 7c4d671c1cda7fed95f3d740a60cbc1c9885518c04073b2636430322da18b4b4e4dbb48af9be87bb707880c3df5745d890e692fadaf435a2aaf9a628ed9b5c89
   languageName: node
   linkType: hard
 
@@ -4023,6 +4023,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/ds-css@npm:4.12.3":
+  version: 4.12.3
+  resolution: "@navikt/ds-css@npm:4.12.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F4.12.3%2F49e36eb3a1060bb5d4d73975accbdb4ec5a79f8b"
+  checksum: c516028db7005059fe1cdcd00611210fbf0b632562f555d065d53adc5df265885dc6bfd1218d449d3d550f6fe0a874582d58d0f7272ba954ffb5dd6444eab9ae
+  languageName: node
+  linkType: hard
+
 "@navikt/ds-css@npm:5.2.1":
   version: 5.2.1
   resolution: "@navikt/ds-css@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F5.2.1%2F32c364033ff71a9cb0fcbc4cdcdeee810b42a8af"
@@ -4030,13 +4037,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-css@npm:5.5.0":
-  version: 5.5.0
-  resolution: "@navikt/ds-css@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F5.5.0%2F1802dd367f4fc83a892bbc250068efc6f5f5c205"
-  checksum: 3b460c3e3fff9359a53b4bf2fc4fa462d1e636e08bd079709264684618004fbdac1fdb2f7c43f91dfbeb0a83d2ae0f9abcea26cb7fac56f1fb865b21243ab733
-  languageName: node
-  linkType: hard
-
 "@navikt/ds-icons@npm:3.4.3":
   version: 3.4.3
   resolution: "@navikt/ds-icons@npm:3.4.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-icons%2F3.4.3%2Feaa8fc38f6d184806d3405a5efbc9d137c2b8d27"
@@ -4047,31 +4047,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-react@npm:5.2.1":
-  version: 5.2.1
-  resolution: "@navikt/ds-react@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.2.1%2Fc43b6af3e53f69a4fa47741729610f17535c40d1"
+"@navikt/ds-react@npm:4.12.1":
+  version: 4.12.1
+  resolution: "@navikt/ds-react@npm:4.12.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F4.12.1%2F75b4207b51213a3de620f9dd8b5b72095c741bbe"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.2.1
+    "@navikt/aksel-icons": ^4.12.1
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     clsx: ^1.2.1
     date-fns: 2.29.3
     react-day-picker: 8.3.4
+    react-modal: 3.15.1
   peerDependencies:
     "@types/react": ^17.0.30 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
-  checksum: 722c3ad7b460d40ae3325884741df1fce40d5f05f0973bdf0677b6231560fd5e7b03d206ccc30b5ca591cfd0ba94ae536cfdd8194bf85fc639a2b69cf51c9781
+  checksum: a680b5c6a9353d2b8be0f1ff6527703973709dbd231db63be5bc954ffc4e11efd52aade1d0787554240371278811025673c58fb817ec272b8ebe615e687f5edc
   languageName: node
   linkType: hard
 
-"@navikt/ds-react@npm:5.5.0":
-  version: 5.5.0
-  resolution: "@navikt/ds-react@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.5.0%2F9dd060472b85eaaf0f7cf344a93d20bb0bbd9d42"
+"@navikt/ds-react@npm:5.2.1":
+  version: 5.2.1
+  resolution: "@navikt/ds-react@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.2.1%2Fc43b6af3e53f69a4fa47741729610f17535c40d1"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.5.0
-    "@navikt/ds-tokens": ^5.5.0
+    "@navikt/aksel-icons": ^5.2.1
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     clsx: ^1.2.1
@@ -4080,14 +4080,7 @@ __metadata:
   peerDependencies:
     "@types/react": ^17.0.30 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
-  checksum: e1481e470f5bfe6c3b7010f0e71ef70919e1f34ace69c94cc74d493c80f95b2d898a67fc3a99d73ea887f0f53e1d1446c199ea7213ffd8b2014b45edf429077a
-  languageName: node
-  linkType: hard
-
-"@navikt/ds-tokens@npm:^5.5.0":
-  version: 5.5.0
-  resolution: "@navikt/ds-tokens@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-tokens%2F5.5.0%2Ff963d7872d9b6eb74198f19f107b6073bfa8c6a5"
-  checksum: 2a7db42e1db5b481f4613552d658d211023c8eae308603161d5957026f10ca8bc7ef1057d2865416c9ce3e1c21b78ab3066061601e382c04328f068fea065a3a
+  checksum: 722c3ad7b460d40ae3325884741df1fce40d5f05f0973bdf0677b6231560fd5e7b03d206ccc30b5ca591cfd0ba94ae536cfdd8194bf85fc639a2b69cf51c9781
   languageName: node
   linkType: hard
 
@@ -4254,8 +4247,8 @@ __metadata:
   resolution: "@navikt/k9-fe-form-utils@workspace:packages/k9-frontend-modules/form-utils"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 5.5.0
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-bem-utils": 1.0.2
@@ -17819,9 +17812,9 @@ __metadata:
   resolution: "medisinsk-vilkar-frontend@workspace:packages/medisinsk-vilkår"
   dependencies:
     "@navikt/diagnosekoder": ^1.2023.0
-    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-css": 4.12.3
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -19695,9 +19688,9 @@ __metadata:
   resolution: "omsorgen-for-frontend@workspace:packages/omsorgen-for"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-css": 4.12.3
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -19750,8 +19743,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "omsorgsdager-frontend@workspace:packages/omsorgsdager"
   dependencies:
-    "@navikt/ds-css": 5.5.0
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@testing-library/react": 14.0.0
     "@types/react": 18.2.21
@@ -21902,9 +21895,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-etablert-tilsyn-frontend@workspace:packages/etablert-tilsyn"
   dependencies:
-    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-css": 4.12.3
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-date-utils": ^1.0.5
@@ -21963,9 +21956,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-inntektsmelding-frontend@workspace:packages/inntektsmelding"
   dependencies:
-    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-css": 4.12.3
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-form-hooks": 4.2.0
     "@navikt/ft-plattform-komponenter": 2.3.0
@@ -22033,8 +22026,8 @@ __metadata:
   resolution: "psb-om-barnet-frontend@workspace:packages/om-barnet"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 5.5.0
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-react": 4.12.1
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -22072,8 +22065,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-uttak-frontend@workspace:packages/uttak"
   dependencies:
-    "@navikt/ds-css": 5.5.0
-    "@navikt/ds-react": 5.5.0
+    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-react": 4.12.1
     "@navikt/ft-form-hooks": 4.2.0
     "@navikt/ft-form-validators": 2.1.0
     "@navikt/ft-plattform-komponenter": 2.3.0
@@ -22493,6 +22486,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-modal@npm:3.15.1":
+  version: 3.15.1
+  resolution: "react-modal@npm:3.15.1"
+  dependencies:
+    exenv: ^1.2.0
+    prop-types: ^15.7.2
+    react-lifecycles-compat: ^3.0.0
+    warning: ^4.0.3
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+  checksum: ee99ca312c35bcec9ef0868babf970ce03c52801731e29be336bb6bdc867a1ecf00a73e1fb5bc3b1b1ef66ceb0c9b4a0199fadb85b1b9829f731409951b018f0
+  languageName: node
+  linkType: hard
+
 "react-modal@npm:3.16.1":
   version: 3.16.1
   resolution: "react-modal@npm:3.16.1"

From ec4572fb608d00a9d910e3b63aba2a3a7e9f8c62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vebj=C3=B8rn=20Nordby?= <vebjorn.nordby@nav.no>
Date: Wed, 4 Oct 2023 15:09:35 +0200
Subject: [PATCH 2/5] bruker stable versjon av nginx. Minor og patch bumpes
 automatisk (#313)

---
 packages/etablert-tilsyn/Dockerfile           | 2 +-
 packages/inntektsmelding/Dockerfile           | 2 +-
 "packages/medisinsk-vilk\303\245r/Dockerfile" | 2 +-
 packages/om-barnet/Dockerfile                 | 2 +-
 packages/omsorgen-for/Dockerfile              | 2 +-
 packages/omsorgsdager/Dockerfile              | 2 +-
 packages/uttak/Dockerfile                     | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/etablert-tilsyn/Dockerfile b/packages/etablert-tilsyn/Dockerfile
index 1adb9e45..4075bc54 100644
--- a/packages/etablert-tilsyn/Dockerfile
+++ b/packages/etablert-tilsyn/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html
diff --git a/packages/inntektsmelding/Dockerfile b/packages/inntektsmelding/Dockerfile
index fbbabec3..47dca01c 100644
--- a/packages/inntektsmelding/Dockerfile
+++ b/packages/inntektsmelding/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html
diff --git "a/packages/medisinsk-vilk\303\245r/Dockerfile" "b/packages/medisinsk-vilk\303\245r/Dockerfile"
index d1eb6218..50c84566 100644
--- "a/packages/medisinsk-vilk\303\245r/Dockerfile"
+++ "b/packages/medisinsk-vilk\303\245r/Dockerfile"
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html
diff --git a/packages/om-barnet/Dockerfile b/packages/om-barnet/Dockerfile
index f23ba5f0..f71cc814 100644
--- a/packages/om-barnet/Dockerfile
+++ b/packages/om-barnet/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.3-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 RUN rm /etc/nginx/conf.d/default.conf
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
diff --git a/packages/omsorgen-for/Dockerfile b/packages/omsorgen-for/Dockerfile
index 0b68a2f8..a7e267eb 100644
--- a/packages/omsorgen-for/Dockerfile
+++ b/packages/omsorgen-for/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html
diff --git a/packages/omsorgsdager/Dockerfile b/packages/omsorgsdager/Dockerfile
index 43ac10d8..28987c48 100644
--- a/packages/omsorgsdager/Dockerfile
+++ b/packages/omsorgsdager/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.3-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html
diff --git a/packages/uttak/Dockerfile b/packages/uttak/Dockerfile
index 0b68a2f8..a7e267eb 100644
--- a/packages/uttak/Dockerfile
+++ b/packages/uttak/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim
 
 ADD server.nginx /etc/nginx/conf.d/app.conf.template
 COPY build /usr/share/nginx/html

From 9c618ff6e0fbd6c3a7f4ddc2cf35a9b727e40408 Mon Sep 17 00:00:00 2001
From: Emil Albrektsson <61695840+albrektsson@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:03:37 +0200
Subject: [PATCH 3/5] Lagt til trivy scan i deploy workflows (#316)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Lagt til trivy scan i deploy workflows

* Setter image output i alle workflows

* Kjører kun trivy vid push til main
---
 .github/workflows/deploy-etablert-tilsyn.yml    | 16 ++++++++++++++++
 .github/workflows/deploy-inntektsmelding.yml    | 16 ++++++++++++++++
 .../deploy-medisinsk-vilk\303\245r.yml"         | 16 ++++++++++++++++
 .github/workflows/deploy-om-barnet.yml          | 16 ++++++++++++++++
 .github/workflows/deploy-omsorgen-for.yml       | 16 ++++++++++++++++
 .github/workflows/deploy-omsorgsdager.yml       | 17 ++++++++++++++++-
 .github/workflows/deploy-uttak.yml              | 16 ++++++++++++++++
 7 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy-etablert-tilsyn.yml b/.github/workflows/deploy-etablert-tilsyn.yml
index 65791779..8ca6b94d 100644
--- a/.github/workflows/deploy-etablert-tilsyn.yml
+++ b/.github/workflows/deploy-etablert-tilsyn.yml
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -90,6 +92,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -152,3 +157,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git a/.github/workflows/deploy-inntektsmelding.yml b/.github/workflows/deploy-inntektsmelding.yml
index 17196ad6..79d217cf 100644
--- a/.github/workflows/deploy-inntektsmelding.yml
+++ b/.github/workflows/deploy-inntektsmelding.yml
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -63,6 +65,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -125,3 +130,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git "a/.github/workflows/deploy-medisinsk-vilk\303\245r.yml" "b/.github/workflows/deploy-medisinsk-vilk\303\245r.yml"
index 7ed90593..3509e714 100644
--- "a/.github/workflows/deploy-medisinsk-vilk\303\245r.yml"
+++ "b/.github/workflows/deploy-medisinsk-vilk\303\245r.yml"
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -90,6 +92,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -152,3 +157,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git a/.github/workflows/deploy-om-barnet.yml b/.github/workflows/deploy-om-barnet.yml
index a97ec838..211fddbf 100644
--- a/.github/workflows/deploy-om-barnet.yml
+++ b/.github/workflows/deploy-om-barnet.yml
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -63,6 +65,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -125,3 +130,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git a/.github/workflows/deploy-omsorgen-for.yml b/.github/workflows/deploy-omsorgen-for.yml
index 7dd75981..bb0914bf 100644
--- a/.github/workflows/deploy-omsorgen-for.yml
+++ b/.github/workflows/deploy-omsorgen-for.yml
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -63,6 +65,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -125,3 +130,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git a/.github/workflows/deploy-omsorgsdager.yml b/.github/workflows/deploy-omsorgsdager.yml
index 4aaf4489..ca817ea2 100644
--- a/.github/workflows/deploy-omsorgsdager.yml
+++ b/.github/workflows/deploy-omsorgsdager.yml
@@ -23,6 +23,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -54,7 +56,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
-
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -120,3 +124,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file
diff --git a/.github/workflows/deploy-uttak.yml b/.github/workflows/deploy-uttak.yml
index 4df19099..08ae0385 100644
--- a/.github/workflows/deploy-uttak.yml
+++ b/.github/workflows/deploy-uttak.yml
@@ -24,6 +24,8 @@ jobs:
     permissions:
       packages: write
       contents: write
+    outputs:
+      image: ${{ steps.docker-push.outputs.image }}
     steps:
       - name: Hente kode
         uses: actions/checkout@v4
@@ -63,6 +65,9 @@ jobs:
           echo "LATEST=${IMAGE_BASE}:latest" >> $GITHUB_ENV
           echo "CSS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/styles.css | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
           echo "JS_HASH=$(shasum -b -a 384 build/${MAJOR_VERSION}/app.js | awk '{ print $1 }' | xxd -r -p | base64)" >> $GITHUB_ENV
+      - name: Set image output
+        id: docker-push
+        run: echo "IMAGE=$IMAGE_BASE:$TAG" >> $GITHUB_OUTPUT
       - uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -125,3 +130,14 @@ jobs:
             ```
           draft: false
           prerelease: false
+  trivy:
+    needs: [ deploy-docker-image ]
+    uses: navikt/sif-gha-workflows/.github/workflows/trivy-ghcr.yml@main
+    if: (github.ref == 'refs/heads/main')
+    permissions:
+      contents: write
+      security-events: write
+      actions: read
+    secrets: inherit
+    with:
+      image: ${{ needs.deploy-docker-image.outputs.image }}
\ No newline at end of file

From c81e167fa0ac38e62a804817ebd87d57d7ff293f Mon Sep 17 00:00:00 2001
From: "Thomas H. Wiberg" <thomas@thawi.no>
Date: Wed, 11 Oct 2023 11:59:37 +0200
Subject: [PATCH 4/5] test

---
 packages/omsorgsdager/src/app.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/omsorgsdager/src/app.ts b/packages/omsorgsdager/src/app.ts
index a1252125..b508e8d3 100644
--- a/packages/omsorgsdager/src/app.ts
+++ b/packages/omsorgsdager/src/app.ts
@@ -1,6 +1,6 @@
 import renderers from './util/renderers';
 import ContainerContract from './types/ContainerContract';
-
+// test
 (window as any).renderMicrofrontendOmsorgsdagerApp = async (appId, data: ContainerContract) => {
     const { renderAppInSuccessfulState } = renderers;
     renderAppInSuccessfulState(appId, data);

From 8bdf0922ddc4d9f321e79d4a91404584e6f0f0c4 Mon Sep 17 00:00:00 2001
From: Jostein Stuhaug <135307852+josstn@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:33:33 +0200
Subject: [PATCH 5/5] Nav design system updates, take 2 (#312)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Bump @navikt/ds-css from 4.12.3 to 5.5.0

Bumps [@navikt/ds-css](https://github.com/navikt/aksel) from 4.12.3 to 5.5.0.
- [Release notes](https://github.com/navikt/aksel/releases)
- [Changelog](https://github.com/navikt/aksel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/navikt/aksel/commits/@navikt/ds-css@5.5.0)

---
updated-dependencies:
- dependency-name: "@navikt/ds-css"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Bump @navikt/ds-react from 4.12.1 to 5.5.0

Bumps [@navikt/ds-react](https://github.com/navikt/aksel) from 4.12.1 to 5.5.0.
- [Release notes](https://github.com/navikt/aksel/releases)
- [Changelog](https://github.com/navikt/aksel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/navikt/aksel/compare/@navikt/ds-react@4.12.1...@navikt/ds-react@5.5.0)

---
updated-dependencies:
- dependency-name: "@navikt/ds-react"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Fixed breaking changes of Modal component from ds-react upgrade.

This also removes use of "ModalFormWrapper" since I don't see the point of it, but perhaps there is some reason for having it that I don't know of. Check it in PR review.

* Fixed lint errors.

* Group @navikt/ds-* dependencies in dependabot.

So that updates to @navikt/ds-react and @navikt/ds-css is done together.

* medisinsk-vilkar: ConfirmationModal - return no DOM until dialog is opened.

Instead of returning empty Modal element.

* medisinsk-vilkar: Fiks diagnosekode velger autocomplete.

Etter overgang til Modal versjon 5.5 viste ikkje alle linjene med diagnosekode søkeresultat lenger. liste-element vart skjult når lista overflowa kanten på dialog elementet.

Endrer til å bruke position: fixed på autocomplete lista, slik at den kan vise ut over dialogen sitt område.

Autocomplete setter igrunn også width: 100% på  lista, dette blir no også overstyrt, sidan med position: fixed vil 100% vere relativt til skjermbredda, så lista med resultat ville bli alt for brei.

Bredda på lista blir derfor no endra  til å følge bredda på innhaldet i søkeresultatet, som er ei endring i forhold til før då den var like brei som søke-input feltet, men ser ikkje noko betre løysing på dette utan å skrive om mykje meir.

* Fix spaces in import brackets.

So that it matches prettier output.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/dependabot.yml                        |  3 +
 packages/etablert-tilsyn/package.json         |  4 +-
 packages/inntektsmelding/package.json         |  4 +-
 .../form-utils/package.json                   |  4 +-
 .../cypress/e2e/Sykdom.cy.js"                 |  6 +-
 .../medisinsk-vilk\303\245r/mock/handlers.ts" |  1 -
 .../medisinsk-vilk\303\245r/package.json"     |  4 +-
 .../confirmation-modal/ConfirmationModal.tsx" |  8 +-
 .../diagnosekode-modal/DiagnosekodeModal.tsx" | 77 +++++++--------
 .../Diagnosekodeoversikt.tsx"                 |  8 +-
 .../diagnosekodeoversikt.css"                 | 24 ++++-
 .../InnleggelsesperiodeFormModal.tsx"         |  9 +-
 .../Innleggelsesperiodeoversikt.tsx"          |  5 +-
 .../modal-form-wrapper/ModalFormWrapper.tsx"  | 19 ----
 .../OverlappendePeriodeModal.tsx"             |  8 +-
 .../SlettDuplikatModal.tsx"                   | 57 +++++------
 ...03\245rsvurderingAvTilsynOgPleie.spec.tsx" | 15 ++-
 .../VilkarsvurderingLangvarigSykdom.tsx"      |  5 +-
 packages/om-barnet/package.json               |  4 +-
 packages/omsorgen-for/package.json            |  4 +-
 packages/omsorgsdager/package.json            |  4 +-
 packages/uttak/package.json                   |  4 +-
 yarn.lock                                     | 98 +++++++++----------
 23 files changed, 175 insertions(+), 200 deletions(-)
 delete mode 100644 "packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 4d7e5fda..4fe5b39a 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -27,6 +27,9 @@ updates:
       typescript-eslint:
         patterns:
           - "@typescript-eslint*"
+      aksel:
+        patterns:
+          - "@navikt/ds-*"
   - package-ecosystem: github-actions
     directory: "/"
     schedule:
diff --git a/packages/etablert-tilsyn/package.json b/packages/etablert-tilsyn/package.json
index e15b0b0d..ef292b48 100644
--- a/packages/etablert-tilsyn/package.json
+++ b/packages/etablert-tilsyn/package.json
@@ -27,9 +27,9 @@
         "@types/react-dom": "18.2.7"
     },
     "dependencies": {
-        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-css": "5.5.0",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-date-utils": "^1.0.5",
diff --git a/packages/inntektsmelding/package.json b/packages/inntektsmelding/package.json
index 81a752d4..4a6d2e40 100644
--- a/packages/inntektsmelding/package.json
+++ b/packages/inntektsmelding/package.json
@@ -35,9 +35,9 @@
         "ts-node": "10.9.1"
     },
     "dependencies": {
-        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-css": "5.5.0",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-form-hooks": "4.2.0",
         "@navikt/ft-plattform-komponenter": "2.3.0",
diff --git a/packages/k9-frontend-modules/form-utils/package.json b/packages/k9-frontend-modules/form-utils/package.json
index db808974..b9fb7ddc 100644
--- a/packages/k9-frontend-modules/form-utils/package.json
+++ b/packages/k9-frontend-modules/form-utils/package.json
@@ -19,8 +19,8 @@
     ],
     "devDependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "4.12.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@popperjs/core": "2.11.8",
diff --git "a/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js" "b/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
index b94484b5..6c1bddd3 100644
--- "a/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
+++ "b/packages/medisinsk-vilk\303\245r/cypress/e2e/Sykdom.cy.js"
@@ -13,7 +13,7 @@ describe('Sykdom', () => {
         cy.contains('Legg til innleggelsesperiode').click();
         cy.get('input[id="innleggelsesperioder[3].fom"]').type('010123');
         cy.get('input[id="innleggelsesperioder[3].tom"]').type('300123');
-        cy.get('div[role="dialog"]').contains('Bekreft').click();
+        cy.get('dialog').contains('Bekreft').click();
         cy.contains('Fortsett').click();
     });
     it('skal kunne håndtere tilsyn og pleie', () => {
@@ -39,7 +39,7 @@ describe('Sykdom', () => {
             'Du har ikke vurdert alle periodene som må vurderes. Resterende perioder vurderer du etter at du har lagret denne.'
         ).should('not.exist');
         cy.contains('Bekreft').click();
-        cy.get('.ReactModalPortal').find('button').contains('Bekreft').click();
+        cy.get('dialog').find('button').contains('Bekreft').click();
         cy.contains('Eventuelle endringer er registrert').click();
     });
     it('skal kunne håndtere to omsorgspersoner', () => {
@@ -47,7 +47,7 @@ describe('Sykdom', () => {
         cy.get('[name="vurderingAvToOmsorgspersoner"]').type('test');
         cy.get('input[id="harBehovForToOmsorgspersonerYES"]').check({ force: true });
         cy.contains('Bekreft').click();
-        cy.get('.ReactModalPortal').find('button').contains('Bekreft').click();
+        cy.get('dialog').find('button').contains('Bekreft').click();
         cy.contains('Sykdom er ferdig vurdert og du kan gå videre i behandlingen.').should('exist');
     });
 });
diff --git "a/packages/medisinsk-vilk\303\245r/mock/handlers.ts" "b/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
index d609654a..071ab37c 100644
--- "a/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
+++ "b/packages/medisinsk-vilk\303\245r/mock/handlers.ts"
@@ -9,7 +9,6 @@ import mockedDokumentoversikt from './mocked-data/mockedDokumentoversikt';
 import { createKontinuerligTilsynVurdering, createToOmsorgspersonerVurdering } from './apiUtils';
 import Vurderingstype from '../src/types/Vurderingstype';
 import mockedDiagnosekoderesponse from './mocked-data/mockedDiagnosekodeResponse';
-import mockedDiagnosekodeSearchResponse from './mocked-data/mockedDiagnosekodeSearchResponse';
 import createStrukturertDokument from './mocked-data/createStrukturertDokument';
 import mockedInnleggelsesperioder from './mocked-data/mockedInnleggelsesperioder';
 import { Dokumenttype } from '../src/types/Dokument';
diff --git "a/packages/medisinsk-vilk\303\245r/package.json" "b/packages/medisinsk-vilk\303\245r/package.json"
index b341ac09..23d9a6cb 100644
--- "a/packages/medisinsk-vilk\303\245r/package.json"
+++ "b/packages/medisinsk-vilk\303\245r/package.json"
@@ -34,9 +34,9 @@
     },
     "dependencies": {
         "@navikt/diagnosekoder": "^1.2023.0",
-        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-css": "5.5.0",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
index 9dbf89a8..05c97c69 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/confirmation-modal/ConfirmationModal.tsx"
@@ -16,9 +16,9 @@ const ConfirmationModal = ({
     onCancel,
     isOpen,
     isSubmitting,
-}: ConfirmationModalProps): JSX.Element => (
+}: ConfirmationModalProps): JSX.Element => isOpen ? (
     <Modal open={isOpen} onClose={onCancel} className={styles.confirmationModal}>
-        <Modal.Content>
+        <Modal.Body>
             {children}
             <div className={styles.confirmationModal__buttonSection}>
                 <Button
@@ -40,8 +40,8 @@ const ConfirmationModal = ({
                     Avbryt
                 </Button>
             </div>
-        </Modal.Content>
+        </Modal.Body>
     </Modal>
-);
+) : null;
 
 export default ConfirmationModal;
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
index 4b6d8230..485cce76 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekode-modal/DiagnosekodeModal.tsx"
@@ -3,7 +3,6 @@ import { Box, Margin } from '@navikt/ft-plattform-komponenter';
 import React from 'react';
 import DiagnosekodeSelector from '../../form/pure/PureDiagnosekodeSelector';
 import styles from '../diagnosekodeoversikt/diagnosekodeoversikt.css';
-import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import type { DiagnosekodeSearcherPromise } from '../../../util/diagnosekodeSearcher';
 
 interface DiagnosekodeModalProps {
@@ -28,8 +27,8 @@ const DiagnosekodeModal = ({
     };
 
     return (
-        <Modal open={isOpen} closeButton onClose={onRequestClose} className={styles.diagnosekodeoversikt__modal}>
-            <Modal.Content>
+        <Modal open={isOpen} header={{heading: "Legg til diagnosekoder", closeButton: true}} onClose={onRequestClose} className={styles.diagnosekodeoversikt__modal}>
+            <Modal.Body>
                 <form
                     onSubmit={(e) => {
                         e.preventDefault();
@@ -42,44 +41,42 @@ const DiagnosekodeModal = ({
                         setSelectedDiagnosekoder([]);
                     }}
                 >
-                    <ModalFormWrapper title="Legg til diagnosekoder">
-                        <Box marginTop={Margin.large}>
-                            <DiagnosekodeSelector
-                                initialDiagnosekodeValue=""
-                                name="diagnosekode"
-                                onChange={(diagnosekoder) => {
-                                    setSelectedDiagnosekoder(diagnosekoder);
-                                }}
-                                label="Diagnosekode"
-                                selectedDiagnosekoder={selectedDiagnosekoder}
-                                hideLabel
-                                searcherPromise={searcherPromise}
-                            />
-                        </Box>
-                        <Box marginTop={Margin.xLarge}>
-                            <div style={{ display: 'flex' }}>
-                                <Button
-                                    size="small"
-                                    disabled={isSubmitting}
-                                    loading={isSubmitting}
-                                    id="bekreftDiagnosekodeKnapp"
-                                >
-                                    Bekreft
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    size="small"
-                                    style={{ marginLeft: '1rem' }}
-                                    onClick={handleClose}
-                                    disabled={isSubmitting}
-                                >
-                                    Avbryt
-                                </Button>
-                            </div>
-                        </Box>
-                    </ModalFormWrapper>
+                    <Box marginTop={Margin.large}>
+                        <DiagnosekodeSelector
+                            initialDiagnosekodeValue=""
+                            name="diagnosekode"
+                            onChange={(diagnosekoder) => {
+                                setSelectedDiagnosekoder(diagnosekoder);
+                            }}
+                            label="Diagnosekode"
+                            selectedDiagnosekoder={selectedDiagnosekoder}
+                            hideLabel
+                            searcherPromise={searcherPromise}
+                        />
+                    </Box>
+                    <Box marginTop={Margin.xLarge}>
+                        <div style={{ display: 'flex' }}>
+                            <Button
+                                size="small"
+                                disabled={isSubmitting}
+                                loading={isSubmitting}
+                                id="bekreftDiagnosekodeKnapp"
+                            >
+                                Bekreft
+                            </Button>
+                            <Button
+                                variant="secondary"
+                                size="small"
+                                style={{ marginLeft: '1rem' }}
+                                onClick={handleClose}
+                                disabled={isSubmitting}
+                            >
+                                Avbryt
+                            </Button>
+                        </div>
+                    </Box>
                 </form>
-            </Modal.Content>
+            </Modal.Body>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
index 596776af..31acd3e6 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/Diagnosekodeoversikt.tsx"
@@ -1,8 +1,8 @@
 import { Box, Margin, TitleWithUnderline, WarningIcon } from '@navikt/ft-plattform-komponenter';
 import { get, post } from '@navikt/k9-fe-http-utils';
 
-import { Loader, Modal } from '@navikt/ds-react';
-import React, { useEffect, useMemo } from 'react';
+import { Loader } from '@navikt/ds-react';
+import React, { useMemo } from 'react';
 import { useMutation, useQueries, useQuery } from 'react-query';
 import LinkRel from '../../../constants/LinkRel';
 import Diagnosekode from '../../../types/Diagnosekode';
@@ -39,10 +39,6 @@ const Diagnosekodeoversikt = ({ onDiagnosekoderUpdated }: DiagnosekodeoversiktPr
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
     const addButtonRef = React.useRef<HTMLButtonElement>();
 
-    useEffect(() => {
-        Modal.setAppElement(document.body);
-    }, []);
-
     const hentDiagnosekoder = () =>
         get<DiagnosekodeResponse>(endpoints.diagnosekoder, httpErrorHandler).then(
             (response: DiagnosekodeResponse) => response
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css" "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
index c1328170..83d6dbfc 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/diagnosekodeoversikt/diagnosekodeoversikt.css"
@@ -8,5 +8,25 @@
 }
 
 .diagnosekodeoversikt__modal :global .autocomplete ul {
-  position: absolute;
-}
+  /*
+  This overrides the position: relative set in the Autocomplete component css.
+  Without this, the autocomplete suggestions appear inline in the DOM, pushing
+  other content down, causing jank.
+
+  Using fixed works with dialog element, let's the popup content overflow the
+  dialog box.
+  */
+  position: fixed;
+  /*
+  The css in Autocomplete component used in the modal has width: 100% (minus
+  a little) for the suggestions list. With the original position: relative
+  that makes the width of the suggestion list match the parent Autocomplete
+  input element.
+
+  When changing to position fixed, the width: 100% becomes calculated from the
+  viewport instead, so the ul becomes much to wide.
+
+  Setting width: inherit makes it as wide as its content instead.
+  */
+  width: inherit;
+}
\ No newline at end of file
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
index ed65a521..1c42fd89 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeFormModal/InnleggelsesperiodeFormModal.tsx"
@@ -8,7 +8,6 @@ import { InnleggelsesperiodeDryRunResponse } from '../../../api/api';
 import AddButton from '../add-button/AddButton';
 import DeleteButton from '../delete-button/DeleteButton';
 import { FieldName } from '../innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt';
-import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import styles from './innleggelsesperiodeFormModal.css';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -63,12 +62,11 @@ const InnleggelsesperiodeFormModal = ({
     };
 
     return (
-        <Modal open closeButton onClose={handleCloseModal} className={styles.innleggelsesperiodeFormModal}>
-            <Modal.Content>
+        <Modal open onBeforeClose={handleCloseModal} header={{heading: "Innleggelsesperioder", closeButton: true}} className={styles.innleggelsesperiodeFormModal}>
+            <Modal.Body>
                 {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                 <FormProvider {...formMethods}>
                     <Form onSubmit={formMethods.handleSubmit(handleSubmit)} shouldShowSubmitButton={false}>
-                        <ModalFormWrapper title="Innleggelsesperioder">
                             <Box marginTop={Margin.large}>
                                 <PeriodpickerList
                                     name="innleggelsesperioder"
@@ -183,10 +181,9 @@ const InnleggelsesperiodeFormModal = ({
                                     </Button>
                                 </div>
                             </Box>
-                        </ModalFormWrapper>
                     </Form>
                 </FormProvider>
-            </Modal.Content>
+            </Modal.Body>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
index 64f5b688..378c35c9 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/innleggelsesperiodeoversikt/Innleggelsesperiodeoversikt.tsx"
@@ -1,4 +1,4 @@
-import { Loader, Modal } from '@navikt/ds-react';
+import { Loader } from '@navikt/ds-react';
 import { Box, LinkButton, Margin, PageError, TitleWithUnderline } from '@navikt/ft-plattform-komponenter';
 import { get } from '@navikt/k9-fe-http-utils';
 import { Period } from '@navikt/k9-fe-period-utils';
@@ -25,9 +25,6 @@ interface InnleggelsesperiodeoversiktProps {
 const Innleggelsesperiodeoversikt = ({
     onInnleggelsesperioderUpdated,
 }: InnleggelsesperiodeoversiktProps): JSX.Element => {
-    useEffect(() => {
-        Modal.setAppElement(document.body);
-    }, []);
     const { endpoints, httpErrorHandler } = React.useContext(ContainerContext);
 
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"
deleted file mode 100644
index d4362f71..00000000
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/modal-form-wrapper/ModalFormWrapper.tsx"
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Heading } from '@navikt/ds-react';
-import { Box, Margin } from '@navikt/ft-plattform-komponenter';
-import React from 'react';
-
-interface ModalFormWrapperProps {
-    title: string;
-    children: React.ReactNode;
-}
-
-const ModalFormWrapper = ({ title, children }: ModalFormWrapperProps): JSX.Element => (
-    <div style={{ paddingTop: '1.5rem', paddingBottom: '1.5rem', paddingLeft: '1rem', paddingRight: '1rem' }}>
-        <Heading size="small" level="2">
-            {title}
-        </Heading>
-        <Box marginTop={Margin.large}>{children}</Box>
-    </div>
-);
-
-export default ModalFormWrapper;
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
index e084ae14..1abf092b 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/overlappende-periode-modal/OverlappendePeriodeModal.tsx"
@@ -1,6 +1,6 @@
-import { Alert, BodyShort, Heading, Modal } from '@navikt/ds-react';
+import { Alert, BodyShort, Heading } from '@navikt/ds-react';
 import { Box, Margin } from '@navikt/ft-plattform-komponenter';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { PeriodeMedEndring } from '../../../types/PeriodeMedEndring';
 import ConfirmationModal from '../confirmation-modal/ConfirmationModal';
 
@@ -37,10 +37,6 @@ const OverlappendePeriodeModal = ({
     isOpen,
     isSubmitting,
 }: OverlappendePeriodeModalProps): JSX.Element => {
-    useEffect(() => {
-        Modal.setAppElement(document.body);
-    }, []);
-
     const overlappendePerioderISammeBehandling =
         perioderMedEndring.filter(({ endrerVurderingSammeBehandling }) => endrerVurderingSammeBehandling === true) ||
         [];
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
index bca5273a..d908428e 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/slett-duplikat-modal/SlettDuplikatModal.tsx"
@@ -7,7 +7,6 @@ import Dokument from '../../../types/Dokument';
 import { findLinkByRel } from '../../../util/linkUtils';
 import scrollUp from '../../../util/viewUtils';
 import ContainerContext from '../../context/ContainerContext';
-import ModalFormWrapper from '../modal-form-wrapper/ModalFormWrapper';
 import styles from './slettDuplikatModal.css';
 
 interface SlettDuplikatModalProps {
@@ -54,37 +53,35 @@ const SlettDuplikatModal = ({ handleCloseModal, selectedDocument, onRemove }: Sl
         );
     };
     return (
-        <Modal open closeButton onClose={handleCloseModal}>
-            <Modal.Content>
-                <ModalFormWrapper title="Fjern som duplikat">
-                    <BodyShort size="small">
-                        Når du fjerner et dokument som duplikat vil det bli lagt som et eget dokument i listen.
-                    </BodyShort>
-                    {removeDuplikatFeilet && (
-                        <Box marginTop={Margin.medium}>
-                            <PageError message="Noe gikk galt, vennligst prøv igjen senere" />
-                        </Box>
-                    )}
-                    <div className={styles.buttonContainer}>
-                        <Button
-                            id="submitButton"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                removeDuplikatreferanse();
-                            }}
-                            loading={isSubmitting}
-                            disabled={isSubmitting}
-                        >
-                            Fjern som duplikat
+        <Modal open header={{heading: "Fjern som duplikat", closeButton: true}} onClose={handleCloseModal}>
+            <Modal.Body>
+                <BodyShort size="small">
+                    Når du fjerner et dokument som duplikat vil det bli lagt som et eget dokument i listen.
+                </BodyShort>
+                {removeDuplikatFeilet && (
+                    <Box marginTop={Margin.medium}>
+                        <PageError message="Noe gikk galt, vennligst prøv igjen senere" />
+                    </Box>
+                )}
+                <div className={styles.buttonContainer}>
+                    <Button
+                        id="submitButton"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            removeDuplikatreferanse();
+                        }}
+                        loading={isSubmitting}
+                        disabled={isSubmitting}
+                    >
+                        Fjern som duplikat
+                    </Button>
+                    <div className={styles.cancelButton}>
+                        <Button variant="secondary" onClick={handleCloseModal}>
+                            Avbryt
                         </Button>
-                        <div className={styles.cancelButton}>
-                            <Button variant="secondary" onClick={handleCloseModal}>
-                                Avbryt
-                            </Button>
-                        </div>
                     </div>
-                </ModalFormWrapper>
-            </Modal.Content>
+                </div>
+            </Modal.Body>
         </Modal>
     );
 };
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
index 0f1ac877..df78a5db 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-tilsyn-og-pleie/__tests__/Vilk\303\245rsvurderingAvTilsynOgPleie.spec.tsx"
@@ -189,14 +189,13 @@ describe('VilkårsvurderingAvTilsynOgPleie', () => {
         });
 
         it('should open vurdering-form when Ny vurdering-button is clicked, and form should be closeable by clicking Avbryt button', async () => {
-            const { getByText, queryByText } = renderVilkårsvurderingComponent();
-            await waitFor(() => {
-                expect(queryByText(/Vurdering av tilsyn og pleie/)).toBeNull();
-                fireEvent.click(screen.getByText('Ny vurdering'));
-                expect(getByText(/Vurdering av tilsyn og pleie/i)).toBeInTheDocument();
-                fireEvent.click(screen.getByText(/Avbryt/i));
-                expect(queryByText(/Vurdering av tilsyn og pleie/)).toBeNull();
-            });
+            const res = renderVilkårsvurderingComponent();
+            expect(res.queryByText(/Vurdering av tilsyn og pleie/)).toBeNull()
+            fireEvent.click(await res.findByText('Ny vurdering'));
+            expect(res.getByText(/Vurdering av tilsyn og pleie/i)).toBeVisible()
+            const avbrytKnapp = await res.findByText(/^Avbryt$/i)
+            fireEvent.click(avbrytKnapp);
+            expect(res.queryByText(/Vurdering av tilsyn og pleie/)).toBeNull()
         });
     });
 
diff --git "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx" "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
index 8f6d8c84..90a7eea5 100644
--- "a/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
+++ "b/packages/medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-langvarig-sykdom/VilkarsvurderingLangvarigSykdom.tsx"
@@ -1,6 +1,6 @@
 import { get } from '@navikt/k9-fe-http-utils';
 import { Period } from '@navikt/k9-fe-period-utils';
-import { NavigationWithDetailView, PageContainer, Box, Margin } from '@navikt/ft-plattform-komponenter';
+import { Box, Margin, NavigationWithDetailView, PageContainer } from '@navikt/ft-plattform-komponenter';
 import React, { useMemo } from 'react';
 import Step, { langvarigSykdomSteg, StepId } from '../../../types/Step';
 import SykdomsstegStatusResponse from '../../../types/SykdomsstegStatusResponse';
@@ -15,7 +15,8 @@ import Vurderingsdetaljer from '../vurderingsdetaljer/Vurderingsdetaljer';
 
 import BehandlingType from '../../../constants/BehandlingType';
 import FagsakYtelseType from '../../../constants/FagsakYtelseType';
-import VurderingsoversiktLangvarigSykdomMessages from '../vurderingsoversikt-langvarig-sykdom-messages/VurderingsoversiktLangvarigSykdomMessages';
+import VurderingsoversiktLangvarigSykdomMessages
+    from '../vurderingsoversikt-langvarig-sykdom-messages/VurderingsoversiktLangvarigSykdomMessages';
 
 interface VilkårsvurderingLangvarigSykdomProps {
     navigerTilNesteSteg: (steg: Step, ikkeMarkerSteg?: boolean) => void;
diff --git a/packages/om-barnet/package.json b/packages/om-barnet/package.json
index f8c01ea9..45ea2fa3 100644
--- a/packages/om-barnet/package.json
+++ b/packages/om-barnet/package.json
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "4.12.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git a/packages/omsorgen-for/package.json b/packages/omsorgen-for/package.json
index 66a62419..cd154f2d 100644
--- a/packages/omsorgen-for/package.json
+++ b/packages/omsorgen-for/package.json
@@ -24,9 +24,9 @@
     },
     "dependencies": {
         "@hookform/error-message": "2.0.1",
-        "@navikt/ds-css": "4.12.3",
+        "@navikt/ds-css": "5.5.0",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "@navikt/ft-plattform-komponenter": "2.3.0",
         "@navikt/k9-fe-array-utils": "1.0.4",
diff --git a/packages/omsorgsdager/package.json b/packages/omsorgsdager/package.json
index 58410862..d8fd35ec 100644
--- a/packages/omsorgsdager/package.json
+++ b/packages/omsorgsdager/package.json
@@ -27,8 +27,8 @@
         "stylelint": "15.10.3"
     },
     "dependencies": {
-        "@navikt/ds-css": "4.12.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/fnrvalidator": "1.3.3",
         "classnames": "2.3.2",
         "cors": "2.8.5",
diff --git a/packages/uttak/package.json b/packages/uttak/package.json
index 73b98e19..a8028993 100644
--- a/packages/uttak/package.json
+++ b/packages/uttak/package.json
@@ -29,8 +29,8 @@
         "@types/testing-library__jest-dom": "5.14.9"
     },
     "dependencies": {
-        "@navikt/ds-css": "4.12.3",
-        "@navikt/ds-react": "4.12.1",
+        "@navikt/ds-css": "5.5.0",
+        "@navikt/ds-react": "5.5.0",
         "@navikt/ft-form-hooks": "4.2.0",
         "@navikt/ft-form-validators": "2.1.0",
         "@navikt/ft-plattform-komponenter": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index f07fc00f..7a8d66e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4009,10 +4009,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^4.12.1":
-  version: 4.12.1
-  resolution: "@navikt/aksel-icons@npm:4.12.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Faksel-icons%2F4.12.1%2F1055d322e956e073b83dca8e8b3a6be62879e1f1"
-  checksum: 7c4d671c1cda7fed95f3d740a60cbc1c9885518c04073b2636430322da18b4b4e4dbb48af9be87bb707880c3df5745d890e692fadaf435a2aaf9a628ed9b5c89
+"@navikt/aksel-icons@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "@navikt/aksel-icons@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Faksel-icons%2F5.5.0%2Fb382aa387897f3f4850fbc16c3b95d6a57b7ef38"
+  checksum: 500b039ed265398cfb3706a5f3455bdecf6180356dc2c5fbf9f6400c668f7c24e226c191308c6a6e5469ad2e2c15a870202bcbfc5e6bcc431de1ce7be6e4d3dd
   languageName: node
   linkType: hard
 
@@ -4023,13 +4023,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-css@npm:4.12.3":
-  version: 4.12.3
-  resolution: "@navikt/ds-css@npm:4.12.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F4.12.3%2F49e36eb3a1060bb5d4d73975accbdb4ec5a79f8b"
-  checksum: c516028db7005059fe1cdcd00611210fbf0b632562f555d065d53adc5df265885dc6bfd1218d449d3d550f6fe0a874582d58d0f7272ba954ffb5dd6444eab9ae
-  languageName: node
-  linkType: hard
-
 "@navikt/ds-css@npm:5.2.1":
   version: 5.2.1
   resolution: "@navikt/ds-css@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F5.2.1%2F32c364033ff71a9cb0fcbc4cdcdeee810b42a8af"
@@ -4037,6 +4030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/ds-css@npm:5.5.0":
+  version: 5.5.0
+  resolution: "@navikt/ds-css@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-css%2F5.5.0%2F1802dd367f4fc83a892bbc250068efc6f5f5c205"
+  checksum: 3b460c3e3fff9359a53b4bf2fc4fa462d1e636e08bd079709264684618004fbdac1fdb2f7c43f91dfbeb0a83d2ae0f9abcea26cb7fac56f1fb865b21243ab733
+  languageName: node
+  linkType: hard
+
 "@navikt/ds-icons@npm:3.4.3":
   version: 3.4.3
   resolution: "@navikt/ds-icons@npm:3.4.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-icons%2F3.4.3%2Feaa8fc38f6d184806d3405a5efbc9d137c2b8d27"
@@ -4047,31 +4047,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-react@npm:4.12.1":
-  version: 4.12.1
-  resolution: "@navikt/ds-react@npm:4.12.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F4.12.1%2F75b4207b51213a3de620f9dd8b5b72095c741bbe"
+"@navikt/ds-react@npm:5.2.1":
+  version: 5.2.1
+  resolution: "@navikt/ds-react@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.2.1%2Fc43b6af3e53f69a4fa47741729610f17535c40d1"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^4.12.1
+    "@navikt/aksel-icons": ^5.2.1
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     clsx: ^1.2.1
     date-fns: 2.29.3
     react-day-picker: 8.3.4
-    react-modal: 3.15.1
   peerDependencies:
     "@types/react": ^17.0.30 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
-  checksum: a680b5c6a9353d2b8be0f1ff6527703973709dbd231db63be5bc954ffc4e11efd52aade1d0787554240371278811025673c58fb817ec272b8ebe615e687f5edc
+  checksum: 722c3ad7b460d40ae3325884741df1fce40d5f05f0973bdf0677b6231560fd5e7b03d206ccc30b5ca591cfd0ba94ae536cfdd8194bf85fc639a2b69cf51c9781
   languageName: node
   linkType: hard
 
-"@navikt/ds-react@npm:5.2.1":
-  version: 5.2.1
-  resolution: "@navikt/ds-react@npm:5.2.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.2.1%2Fc43b6af3e53f69a4fa47741729610f17535c40d1"
+"@navikt/ds-react@npm:5.5.0":
+  version: 5.5.0
+  resolution: "@navikt/ds-react@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-react%2F5.5.0%2F9dd060472b85eaaf0f7cf344a93d20bb0bbd9d42"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.2.1
+    "@navikt/aksel-icons": ^5.5.0
+    "@navikt/ds-tokens": ^5.5.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     clsx: ^1.2.1
@@ -4080,7 +4080,14 @@ __metadata:
   peerDependencies:
     "@types/react": ^17.0.30 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
-  checksum: 722c3ad7b460d40ae3325884741df1fce40d5f05f0973bdf0677b6231560fd5e7b03d206ccc30b5ca591cfd0ba94ae536cfdd8194bf85fc639a2b69cf51c9781
+  checksum: e1481e470f5bfe6c3b7010f0e71ef70919e1f34ace69c94cc74d493c80f95b2d898a67fc3a99d73ea887f0f53e1d1446c199ea7213ffd8b2014b45edf429077a
+  languageName: node
+  linkType: hard
+
+"@navikt/ds-tokens@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "@navikt/ds-tokens@npm:5.5.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-tokens%2F5.5.0%2Ff963d7872d9b6eb74198f19f107b6073bfa8c6a5"
+  checksum: 2a7db42e1db5b481f4613552d658d211023c8eae308603161d5957026f10ca8bc7ef1057d2865416c9ce3e1c21b78ab3066061601e382c04328f068fea065a3a
   languageName: node
   linkType: hard
 
@@ -4247,8 +4254,8 @@ __metadata:
   resolution: "@navikt/k9-fe-form-utils@workspace:packages/k9-frontend-modules/form-utils"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 4.12.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-bem-utils": 1.0.2
@@ -17812,9 +17819,9 @@ __metadata:
   resolution: "medisinsk-vilkar-frontend@workspace:packages/medisinsk-vilkår"
   dependencies:
     "@navikt/diagnosekoder": ^1.2023.0
-    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-css": 5.5.0
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -19688,9 +19695,9 @@ __metadata:
   resolution: "omsorgen-for-frontend@workspace:packages/omsorgen-for"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-css": 5.5.0
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -19743,8 +19750,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "omsorgsdager-frontend@workspace:packages/omsorgsdager"
   dependencies:
-    "@navikt/ds-css": 4.12.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@testing-library/react": 14.0.0
     "@types/react": 18.2.21
@@ -21895,9 +21902,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-etablert-tilsyn-frontend@workspace:packages/etablert-tilsyn"
   dependencies:
-    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-css": 5.5.0
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-date-utils": ^1.0.5
@@ -21956,9 +21963,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-inntektsmelding-frontend@workspace:packages/inntektsmelding"
   dependencies:
-    "@navikt/ds-css": 4.12.3
+    "@navikt/ds-css": 5.5.0
     "@navikt/ds-icons": 3.4.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-form-hooks": 4.2.0
     "@navikt/ft-plattform-komponenter": 2.3.0
@@ -22026,8 +22033,8 @@ __metadata:
   resolution: "psb-om-barnet-frontend@workspace:packages/om-barnet"
   dependencies:
     "@hookform/error-message": 2.0.1
-    "@navikt/ds-css": 4.12.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-react": 5.5.0
     "@navikt/fnrvalidator": 1.3.3
     "@navikt/ft-plattform-komponenter": 2.3.0
     "@navikt/k9-fe-array-utils": 1.0.4
@@ -22065,8 +22072,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "psb-uttak-frontend@workspace:packages/uttak"
   dependencies:
-    "@navikt/ds-css": 4.12.3
-    "@navikt/ds-react": 4.12.1
+    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-react": 5.5.0
     "@navikt/ft-form-hooks": 4.2.0
     "@navikt/ft-form-validators": 2.1.0
     "@navikt/ft-plattform-komponenter": 2.3.0
@@ -22486,21 +22493,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-modal@npm:3.15.1":
-  version: 3.15.1
-  resolution: "react-modal@npm:3.15.1"
-  dependencies:
-    exenv: ^1.2.0
-    prop-types: ^15.7.2
-    react-lifecycles-compat: ^3.0.0
-    warning: ^4.0.3
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
-    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
-  checksum: ee99ca312c35bcec9ef0868babf970ce03c52801731e29be336bb6bdc867a1ecf00a73e1fb5bc3b1b1ef66ceb0c9b4a0199fadb85b1b9829f731409951b018f0
-  languageName: node
-  linkType: hard
-
 "react-modal@npm:3.16.1":
   version: 3.16.1
   resolution: "react-modal@npm:3.16.1"