From 8508eb6653b402aa9a556b83ac7048a17cd3ec97 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 27 Jan 2025 14:10:07 +0100
Subject: [PATCH 001/170] update ds, wip fixing errors

---
 package.json                                  |   6 +-
 src/app-components/Button/Button.tsx          |   8 +-
 .../VersionSwitcher/VersionSwitcher.tsx       |   2 +-
 src/index.tsx                                 |   2 +-
 .../RadioButtons/ControlledRadioGroup.tsx     |  10 +-
 .../Pagination/RepeatingGroupPagination.tsx   | 103 +++++--------
 .../Summary/LargeGroupSummaryContainer.tsx    |  36 +++--
 .../Summary2/RepeatingGroupSummary.tsx        |   8 +-
 .../RepeatingGroupTableSummary.tsx            |   6 +-
 src/layout/Subform/SubformComponent.tsx       |   2 +-
 .../Summary/SubformSummaryComponent.tsx       |   4 +-
 .../Summary/SubformSummaryComponent2.tsx      |   3 +-
 .../Subform/Summary/SubformSummaryTable.tsx   |   2 +-
 .../LayoutSetSummaryAccordion.tsx             |  60 ++++----
 .../MultipleValueSummary.tsx                  |  28 ++--
 .../SingleValueSummary.tsx                    |   6 +-
 src/layout/Tabs/Tabs.tsx                      |  14 +-
 src/layout/Tabs/TabsSummary.tsx               |   2 +-
 src/utils/options.ts                          |   9 +-
 yarn.lock                                     | 139 +++++++++++++-----
 20 files changed, 246 insertions(+), 204 deletions(-)

diff --git a/package.json b/package.json
index c8063912e8..6c545e06fd 100644
--- a/package.json
+++ b/package.json
@@ -133,9 +133,9 @@
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
     "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "0.10.0",
-    "@digdir/designsystemet-react": "0.63.1",
-    "@digdir/designsystemet-theme": "0.15.3",
+    "@digdir/designsystemet-css": "1.0.0-next.47",
+    "@digdir/designsystemet-react": "1.0.0-next.47",
+    "@digdir/designsystemet-theme": "1.0.0-next.47",
     "@material-ui/core": "4.12.4",
     "@navikt/aksel-icons": "7.9.2",
     "@tanstack/react-query": "5.64.2",
diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 8136814d1d..f74180130a 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -15,13 +15,13 @@ export type ButtonProps = {
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
+  fullWidth?: boolean;
 } & Pick<
   DesignSystemButtonProps,
   | 'id'
   | 'title'
   | 'disabled'
   | 'icon'
-  | 'fullWidth'
   | 'onClick'
   | 'style'
   | 'tabIndex'
@@ -71,12 +71,12 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       disabled={disabled || isLoading}
       variant={variant}
       color={color}
-      size={size}
+      data-size={size}
+      data-fullWidth={fullWidth}
       ref={ref}
       className={className}
       title={title}
       icon={icon}
-      fullWidth={fullWidth}
       onClick={onClick}
       style={style}
       tabIndex={tabIndex}
@@ -94,7 +94,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
         <Spinner
           aria-hidden='true'
           color={color}
-          size={size === 'lg' ? 'sm' : 'xs'}
+          data-size={size === 'lg' ? 'sm' : 'xs'}
           title={langAsString('general.loading')}
         />
       )}
diff --git a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
index e8948278b0..68d7b23ade 100644
--- a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
+++ b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
@@ -47,7 +47,7 @@ export const VersionSwitcher = () => {
   };
 
   if (isVersionsLoading || isHtmlLoading || !versions) {
-    return <Spinner title='Laster...' />;
+    return <Spinner aria-label='Laster...' />;
   }
 
   if (isVersionsError || isHtmlError) {
diff --git a/src/index.tsx b/src/index.tsx
index 9a921237b0..2309a88ca8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,7 @@ import 'src/features/toggles';
 import 'src/features/logging';
 import 'src/features/styleInjection';
 import '@digdir/designsystemet-css';
+import '@digdir/designsystemet-theme';
 
 import { AppWrapper } from '@altinn/altinn-design-system';
 
@@ -42,7 +43,6 @@ import * as queries from 'src/queries/queries';
 
 import 'react-toastify/dist/ReactToastify.css';
 import 'src/index.css';
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 
 const router = createHashRouter([
   {
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index ae633387de..2f1db975cb 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Radio } from '@digdir/designsystemet-react';
+import { Fieldset } from '@digdir/designsystemet-react';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { RadioButton } from 'src/components/form/RadioButton';
@@ -69,8 +69,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
   return (
     <ComponentStructureWrapper node={node}>
       <div id={id}>
-        <Radio.Group
-          legend={labelText}
+        <Fieldset
           hideLegend={overrideDisplay?.renderLegend === false}
           description={<Lang id={textResourceBindings?.description} />}
           error={!isValid}
@@ -78,6 +77,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
           inline={shouldDisplayHorizontally}
           role='radiogroup'
         >
+          <Fieldset.Legend>{labelText}</Fieldset.Legend>
           {calculatedOptions.map((option) => (
             <RadioButton
               value={option.value}
@@ -91,13 +91,13 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
               readOnly={readOnly}
               onChange={handleChange}
               hideLabel={hideLabel}
-              size='small'
+              data-size='small'
               alertOnChange={alertOnChange}
               alertText={alertText}
               confirmChangeText={confirmChangeText}
             />
           ))}
-        </Radio.Group>
+        </Fieldset>
       </div>
     </ComponentStructureWrapper>
   );
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 63e78b0985..b6a323e407 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Pagination, Table, usePagination } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { useResetScrollPosition } from 'src/core/ui/useResetScrollPosition';
@@ -18,11 +17,9 @@ import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { useNodeTraversalSelector } from 'src/utils/layout/useNodeTraversal';
 import type { RepGroupRow } from 'src/layout/RepeatingGroup/types';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
-
 interface RepeatingGroupPaginationProps {
   inTable?: boolean;
 }
-
 /**
  * Simple wrapper to prevent running any hooks unless pagination is actually going to be used
  * Specifically, usePagesWithErrors and useRowStructure would be doing unecessary work
@@ -30,14 +27,11 @@ interface RepeatingGroupPaginationProps {
 export function RepeatingGroupPagination(props: RepeatingGroupPaginationProps) {
   const { visibleRows } = useRepeatingGroupRowState();
   const { hasPagination, rowsPerPage } = useRepeatingGroupPagination();
-
   if (!hasPagination || visibleRows.length <= rowsPerPage) {
     return null;
   }
-
   return <RGPagination {...props} />;
 }
-
 function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
   const { changePage, node } = useRepeatingGroup();
   const { hasPagination, rowsPerPage, currentPage, totalPages } = useRepeatingGroupPagination();
@@ -46,30 +40,30 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
   const isMobile = useIsMobile();
   const isMini = useIsMini();
   const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings || {});
-
   const getScrollPosition = useCallback(
     () => document.querySelector(`[data-pagination-id="${node.id}"]`)?.getClientRects().item(0)?.y,
     [node],
   );
-
   /**
    * The last page can have fewer items than the other pages,
    * navigating to or from the last page will cause everything to move.
    * This resets the scroll position so that the buttons are in the same place.
    */
   const resetScrollPosition = useResetScrollPosition(getScrollPosition);
-
   // Should never be true, but leaving it for type inference
   if (!hasPagination) {
     return null;
   }
 
-  const onChange = async (pageNumber: number) => {
+  const onChange = async () => {
     const prevScrollPosition = getScrollPosition();
-    await changePage(pageNumber - 1);
     resetScrollPosition(prevScrollPosition);
   };
 
+  const setCurrentPage = (pagenumber: number) => {
+    changePage(pagenumber - 1);
+  };
+
   return (
     <ConditionalWrapper
       condition={inTable}
@@ -89,33 +83,28 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
         currentPage={currentPage + 1}
         totalPages={totalPages}
         pagesWithErrors={pagesWithErrors}
-        onChange={onChange}
+        onChange={() => onChange}
+        setCurrentPage={setCurrentPage}
         compact={isTablet}
         hideLabels={isMobile}
-        size={isMini ? 'small' : 'medium'}
+        size={isMini ? 'sm' : 'md'}
       />
     </ConditionalWrapper>
   );
 }
-
 type PaginationComponentProps = {
   nextTextKey: string;
   backTextKey: string;
-  size: NonNullable<Parameters<typeof Pagination>[0]['size']>;
+  size: NonNullable<Parameters<typeof Pagination>[0]['data-size']>;
   compact: boolean;
   hideLabels: boolean;
   currentPage: number;
   totalPages: number;
   pagesWithErrors: number[];
+  setCurrentPage: (pageNumber: number) => void;
   onChange: Parameters<typeof Pagination>[0]['onChange'];
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
-const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
-};
-
 function PaginationComponent({
   nextTextKey,
   backTextKey,
@@ -125,13 +114,15 @@ function PaginationComponent({
   currentPage,
   totalPages,
   pagesWithErrors,
+  setCurrentPage,
   onChange,
   ...rest
 }: PaginationComponentProps) {
-  const { pages, showNextPage, showPreviousPage } = usePagination({
-    compact,
+  const { pages, prevButtonProps, nextButtonProps, hasPrev, hasNext } = usePagination({
+    setCurrentPage,
     currentPage,
     totalPages,
+    onChange,
   });
   const { langAsString } = useLanguage();
 
@@ -139,71 +130,51 @@ function PaginationComponent({
   const previousLabel = langAsString(backTextKey);
 
   return (
-    <Pagination.Root
+    <Pagination
       aria-label='Pagination'
-      size={size}
-      compact={compact}
+      data-size={size}
       {...rest}
     >
-      <Pagination.Content>
+      <Pagination.List>
         <Pagination.Item>
-          <Pagination.Previous
-            className={!showPreviousPage ? classes.hidden : undefined}
-            onClick={() => {
-              onChange(currentPage - 1);
-            }}
+          <Pagination.Button
+            className={!hasPrev ? classes.hidden : undefined}
             aria-label={previousLabel}
+            {...prevButtonProps}
           >
-            <ChevronLeftIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
             {!hideLabels && previousLabel}
-          </Pagination.Previous>
+          </Pagination.Button>
         </Pagination.Item>
-        {pages.map((page, i) => {
+        {pages.map(({ page, buttonProps, itemKey }) => {
           const hasErrors = typeof page === 'number' && pagesWithErrors.includes(page - 1);
           const label = hasErrors
             ? `${langAsString('general.edit_alt_error')}: ${langAsString('general.page_number', [page])}`
             : langAsString('general.page_number', [page]);
 
           return (
-            <Pagination.Item key={`${page}${i}`}>
-              {page === 'ellipsis' ? (
-                <Pagination.Ellipsis />
-              ) : (
-                <Pagination.Button
-                  color={hasErrors ? 'danger' : 'first'}
-                  aria-current={currentPage === page}
-                  isActive={currentPage === page}
-                  aria-label={label}
-                  onClick={() => {
-                    onChange(page);
-                  }}
-                >
-                  {page}
-                </Pagination.Button>
-              )}
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button
+                color={hasErrors ? 'danger' : 'accent'}
+                aria-current={currentPage === page}
+                aria-label={label}
+                {...buttonProps}
+              >
+                {page}
+              </Pagination.Button>
             </Pagination.Item>
           );
         })}
         <Pagination.Item>
-          <Pagination.Next
+          <Pagination.Button
             aria-label={nextLabel}
-            onClick={() => {
-              onChange(currentPage + 1);
-            }}
-            className={!showNextPage ? classes.hidden : undefined}
+            className={!hasNext ? classes.hidden : undefined}
+            {...nextButtonProps}
           >
             {!hideLabels && nextLabel}
-            <ChevronRightIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
-          </Pagination.Next>
+          </Pagination.Button>
         </Pagination.Item>
-      </Pagination.Content>
-    </Pagination.Root>
+      </Pagination.List>
+    </Pagination>
   );
 }
 
diff --git a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
index 5e21328c8a..daf0fe4ca3 100644
--- a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
+++ b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
@@ -22,12 +22,12 @@ export interface IDisplayRepAsLargeGroup {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
+  [2]: 'md',
+  [3]: 's',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderLayoutNode }: IDisplayRepAsLargeGroup) {
@@ -47,23 +47,21 @@ export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderL
 
   return (
     <Fieldset
-      legend={
-        legend && (
-          <Heading
-            level={headingLevel}
-            size={headingSize}
-          >
-            <Lang
-              id={legend}
-              node={groupNode}
-            />
-          </Heading>
-        )
-      }
       className={cn(pageBreakStyles(item.pageBreak), classes.summary, {
         [classes.largeGroupContainer]: !isNested,
       })}
     >
+      <Fieldset.Legend>
+        <Heading
+          level={headingLevel}
+          data-size={headingSize}
+        >
+          <Lang
+            id={legend}
+            node={groupNode}
+          />
+        </Heading>
+      </Fieldset.Legend>
       <div
         id={id || item.id}
         className={classes.largeGroupContainer}
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
index 8fdf860a00..56102c1002 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -57,7 +57,7 @@ export const RepeatingGroupSummary = ({
       data-testid='summary-repeating-group-component'
     >
       <Heading
-        size='xs'
+        daata-size='xs'
         level={4}
       >
         <Lang
@@ -86,7 +86,7 @@ export const RepeatingGroupSummary = ({
         ))}
       </div>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
           className={classes.errorMessage}
         >
@@ -96,7 +96,7 @@ export const RepeatingGroupSummary = ({
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
index ce0e8a666e..36e2d74afc 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Table } from '@digdir/designsystemet-react';
+import { Table, ValidationMessage } from '@digdir/designsystemet-react';
 import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -100,7 +100,7 @@ export const RepeatingGroupTableSummary = ({
         </Table.Body>
       </Table>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
           className={classes.errorMessage}
         >
@@ -110,7 +110,7 @@ export const RepeatingGroupTableSummary = ({
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/Subform/SubformComponent.tsx b/src/layout/Subform/SubformComponent.tsx
index 1fba901c8a..5d96e5b0ac 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -204,7 +204,7 @@ function SubformTableRow({
     return (
       <Table.Row>
         <Table.Cell colSpan={actualColumns}>
-          <Spinner title={langAsString('general.loading')} />
+          <Spinner aria-label={langAsString('general.loading')} />
         </Table.Cell>
       </Table.Row>
     );
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent.tsx b/src/layout/Subform/Summary/SubformSummaryComponent.tsx
index e3ea34f83e..4acd0492ea 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent.tsx
@@ -57,8 +57,8 @@ function SubformSummaryRow({ dataElement, node }: { dataElement: IData; node: La
   if (isFetching) {
     return (
       <Spinner
-        title={langAsString('general.loading')}
-        size='xs'
+        aria-label={langAsString('general.loading')}
+        data-size='xs'
       />
     );
   } else if (error) {
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
index f8514853d9..17af5f2912 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
@@ -97,8 +97,7 @@ const DoSummaryWrapper = ({
               />
               <Heading
                 className='no-visual-testing'
-                spacing={false}
-                size='sm'
+                data-size='sm'
                 level={2}
               >
                 {dataElementId}
diff --git a/src/layout/Subform/Summary/SubformSummaryTable.tsx b/src/layout/Subform/Summary/SubformSummaryTable.tsx
index 9e5babfe7f..677c06dfea 100644
--- a/src/layout/Subform/Summary/SubformSummaryTable.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryTable.tsx
@@ -52,7 +52,7 @@ function SubformTableRow({
     return (
       <Table.Row>
         <Table.Cell colSpan={numColumns}>
-          <Spinner title={langAsString('general.loading')} />
+          <Spinner aria-label={langAsString('general.loading')} />
         </Table.Cell>
       </Table.Row>
     );
diff --git a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
index 196f8b7bf7..88697c7513 100644
--- a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion, Label } from '@digdir/designsystemet-react';
+import { Details, Label } from '@digdir/designsystemet-react';
 
 import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
@@ -12,38 +12,34 @@ type LayoutSetAccordionSummaryProps = {
 };
 
 export function LayoutSetSummaryAccordion({ filteredPages }: LayoutSetAccordionSummaryProps) {
-  return (
-    <Accordion
-      border
+  return filteredPages.map((layoutId: string) => (
+    <Details
+      key={layoutId}
+      defaultOpen={true}
       color='neutral'
       className={classes.summaryItem}
     >
-      {filteredPages.map((layoutId: string) => (
-        <Accordion.Item
-          key={layoutId}
-          defaultOpen={true}
-        >
-          <Accordion.Header level={2}>
-            <Label asChild>
-              <span>
-                <Lang id={layoutId} />
-              </span>
-            </Label>
-          </Accordion.Header>
-          <Accordion.Content>
-            <Flex
-              container
-              spacing={6}
-              alignItems='flex-start'
-            >
-              <PageSummary
-                pageId={layoutId}
-                key={layoutId}
-              />
-            </Flex>
-          </Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  );
+      <Details>
+        <Details.Summary>
+          <Label asChild>
+            <span>
+              <Lang id={layoutId} />
+            </span>
+          </Label>
+        </Details.Summary>
+        <Details.Content>
+          <Flex
+            container
+            spacing={6}
+            alignItems='flex-start'
+          >
+            <PageSummary
+              pageId={layoutId}
+              key={layoutId}
+            />
+          </Flex>
+        </Details.Content>
+      </Details>
+    </Details>
+  ));
 }
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
index 51b19e82e5..dcc29a61ea 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, List, Paragraph } from '@digdir/designsystemet-react';
+import { Label, List, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Lang } from 'src/features/language/Lang';
@@ -81,18 +81,16 @@ export const MultipleValueSummary = ({
         >
           <Label weight='regular'>{title}</Label>
           {displayType === 'list' && (
-            <List.Root>
-              <List.Unordered>
-                {displayValues?.map((item) => (
-                  <List.Item
-                    key={`list-item-${item}`}
-                    className={classes.formValue}
-                  >
-                    {item}
-                  </List.Item>
-                ))}
-              </List.Unordered>
-            </List.Root>
+            <List.Unordered>
+              {displayValues?.map((item) => (
+                <List.Item
+                  key={`list-item-${item}`}
+                  className={classes.formValue}
+                >
+                  {item}
+                </List.Item>
+              ))}
+            </List.Unordered>
           )}
           {displayType === 'inline' && (
             <Paragraph
@@ -115,13 +113,13 @@ export const MultipleValueSummary = ({
         </div>
         {errors.length > 0 &&
           errors.map(({ message }) => (
-            <ErrorMessage key={message.key}>
+            <ValidationMessage key={message.key}>
               <Lang
                 id={message.key}
                 params={message.params}
                 node={componentNode}
               />
-            </ErrorMessage>
+            </ValidationMessage>
           ))}
       </div>
       <EditButton
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
index 647402625a..0a2649714c 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, Paragraph } from '@digdir/designsystemet-react';
+import { Label, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Lang } from 'src/features/language/Lang';
@@ -70,13 +70,13 @@ export const SingleValueSummary = ({
     {errors &&
       errors?.length > 0 &&
       errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
   </div>
 );
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index bb3f2c1423..b8708ae2f4 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -14,8 +14,14 @@ import { useNodeTraversalSelector } from 'src/utils/layout/useNodeTraversal';
 import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
 
+const sizeMap: Record<string, 'sm' | 'md' | 'lg'> = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+};
+
 export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
-  const size = useNodeItem(node, (i) => i.size);
+  const size = useNodeItem(node, (i) => i.size) ?? 'medium';
   const defaultTab = useNodeItem(node, (i) => i.defaultTab);
   const tabs = useNodeItem(node, (i) => i.tabsInternal);
   const [activeTab, setActiveTab] = useState<string | undefined>(defaultTab ?? tabs.at(0)?.id);
@@ -41,7 +47,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
         defaultValue={activeTab}
         value={activeTab}
         onChange={(tabId) => setActiveTab(tabId)}
-        size={size}
+        data-size={sizeMap[size]}
       >
         <DesignsystemetTabs.List>
           {tabs.map((tab) => (
@@ -55,7 +61,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
           ))}
         </DesignsystemetTabs.List>
         {tabs.map((tab) => (
-          <DesignsystemetTabs.Content
+          <DesignsystemetTabs.Panel
             key={tab.id}
             value={tab.id}
             role='tabpanel'
@@ -73,7 +79,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
                 />
               ))}
             </Flex>
-          </DesignsystemetTabs.Content>
+          </DesignsystemetTabs.Panel>
         ))}
       </DesignsystemetTabs>
     </ComponentStructureWrapper>
diff --git a/src/layout/Tabs/TabsSummary.tsx b/src/layout/Tabs/TabsSummary.tsx
index ef7fcb3de7..3140f5cf5b 100644
--- a/src/layout/Tabs/TabsSummary.tsx
+++ b/src/layout/Tabs/TabsSummary.tsx
@@ -39,7 +39,7 @@ export const TabsSummary = ({ componentNode }: TabsSummaryProps) => {
             className={classes.tabWrapper}
           >
             <Heading
-              size='xs'
+              data-size='xs'
               level={4}
             >
               <Lang
diff --git a/src/utils/options.ts b/src/utils/options.ts
index 18e69449eb..c057ad6112 100644
--- a/src/utils/options.ts
+++ b/src/utils/options.ts
@@ -1,7 +1,12 @@
-import type { Option } from '@digdir/designsystemet-react/dist/types/components/form/Combobox/useCombobox';
-
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 
+type Option = {
+  value: string;
+  label: string;
+  displayValue?: string;
+  description?: string;
+};
+
 const emptyArray: IOptionInternal[] = [];
 export function verifyAndDeduplicateOptions(options: IOptionInternal[] | undefined, multi: boolean): IOptionInternal[] {
   if (!options) {
diff --git a/yarn.lock b/yarn.lock
index 83ea0c07a8..719a13033d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1909,25 +1909,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:0.10.0":
-  version: 0.10.0
-  resolution: "@digdir/designsystemet-css@npm:0.10.0"
-  checksum: 10c0/695f3bedf73aa440d832bccdf710a7ebb1a0fc05bfce2b4f9a70fb3e8abfae67f3792cfaaaddf1d87f5a2e7cd8edbf2e6f0d3fd020878b731dee5e3f61044935
+"@digdir/designsystemet-css@npm:1.0.0-next.47":
+  version: 1.0.0-next.47
+  resolution: "@digdir/designsystemet-css@npm:1.0.0-next.47"
+  checksum: 10c0/4b2decaf6f91e89ed54a4e89df9f0ef53cda7b1d7267c7da62d3f292f4a60c6a076cef0dcdcf3b88a5fae04995fb4ae8c929cd1eecedfaa63f8aceaecd66b652
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:0.63.1":
-  version: 0.63.1
-  resolution: "@digdir/designsystemet-react@npm:0.63.1"
+"@digdir/designsystemet-react@npm:1.0.0-next.47":
+  version: 1.0.0-next.47
+  resolution: "@digdir/designsystemet-react@npm:1.0.0-next.47"
   dependencies:
-    "@floating-ui/react": "npm:0.26.12"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    "@radix-ui/react-slot": "npm:^1.0.2"
-    "@tanstack/react-virtual": "npm:^3.2.0"
+    "@floating-ui/dom": "npm:^1.6.10"
+    "@floating-ui/react": "npm:0.26.23"
+    "@navikt/aksel-icons": "npm:^6.14.0"
+    "@radix-ui/react-slot": "npm:^1.1.0"
+    "@tanstack/react-virtual": "npm:^3.10.7"
+    "@u-elements/u-details": "npm:^0.1.0"
+    clsx: "npm:^2.1.1"
   peerDependencies:
     react: ">=18.3.1"
     react-dom: ">=18.3.1"
-  checksum: 10c0/20ad11de9fb0203ff10cffd0966b56a39503a7863db1aa69b772e38b47c3fd98828a60310a4ce8c1d4163d7edc9704341222877286e6a7ad65723b7909e2ac5b
+  checksum: 10c0/6c706274d2d3e3657822eb037ab416e555b480d513201e03fe7e0c6f1e39692cc12e7dcf8ad0ac71c0d2f43e23aaf14ba93ecbfb63f9dc5f274eafd45968787d
   languageName: node
   linkType: hard
 
@@ -1938,6 +1941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@digdir/designsystemet-theme@npm:1.0.0-next.47":
+  version: 1.0.0-next.47
+  resolution: "@digdir/designsystemet-theme@npm:1.0.0-next.47"
+  checksum: 10c0/41d661b9f636340086c8fca077273df330ae771a2d0fed18ea5e691e4c037afb4d3a9b3683fab5795f2ca88ca1614faefe2a28ad373011c091a42748d8d8fc9a
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.6.1":
   version: 0.6.3
   resolution: "@discoveryjs/json-ext@npm:0.6.3"
@@ -2405,7 +2415,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3":
+"@floating-ui/dom@npm:^1.6.10":
+  version: 1.6.13
+  resolution: "@floating-ui/dom@npm:1.6.13"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3, @floating-ui/react-dom@npm:^2.1.1":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
@@ -2431,17 +2451,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:0.26.12":
-  version: 0.26.12
-  resolution: "@floating-ui/react@npm:0.26.12"
+"@floating-ui/react@npm:0.26.23":
+  version: 0.26.23
+  resolution: "@floating-ui/react@npm:0.26.23"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.0.0"
-    "@floating-ui/utils": "npm:^0.2.0"
+    "@floating-ui/react-dom": "npm:^2.1.1"
+    "@floating-ui/utils": "npm:^0.2.7"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/f47e133b9fe5dd404886c4e69e760dc0d6ab30774de82b5547cba83d0cd6e7a3bb4c221587e115a3c0c466ac344578c3db78b5808b5acd70ae5d43d587de9fd1
+  checksum: 10c0/d339c3d760e83c8384a16c8a38fb47f7f855a3db4d19117fd54cccbf871a27b089887202074e9871ffc19ad769bed709ecdd69445a39d2ea9406c84814427f3b
   languageName: node
   linkType: hard
 
@@ -2466,7 +2486,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.8":
+"@floating-ui/utils@npm:^0.2.7, @floating-ui/utils@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@floating-ui/utils@npm:0.2.9"
+  checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.8":
   version: 0.2.8
   resolution: "@floating-ui/utils@npm:0.2.8"
   checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
@@ -3000,6 +3027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/aksel-icons@npm:^6.14.0":
+  version: 6.17.0
+  resolution: "@navikt/aksel-icons@npm:6.17.0"
+  checksum: 10c0/e3b3fd152e3266e23aa6a9a4d69c8c59ace60bc334b2fdbbdc208984fa540875a3469f3e9170e112ed9dc3be9c2b13139760c8e32b49d4a9fe0504ad41615989
+  languageName: node
+  linkType: hard
+
 "@navikt/ds-icons@npm:^2.3.0":
   version: 2.9.8
   resolution: "@navikt/ds-icons@npm:2.9.8"
@@ -3379,6 +3413,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/3e84580024e66e3cc5b9ae79355e787815c1d2a3c7d46e7f47900a29c33751ca24cf4ac8903314957ab1f7788aebe1687e2258641c188cf94653f7ddf8f70627
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-context@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-context@npm:1.1.0"
@@ -3597,7 +3644,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-slot@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -3612,6 +3659,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@radix-ui/react-slot@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/f3cc71c16529c67a8407a89e0ac13a868cafa0cd05ca185b464db609aa5996a3f00588695518e420bd47ffdb4cc2f76c14cc12ea5a38fc2ca3578a30d2ca58b9
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
@@ -3962,22 +4024,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.2.0":
-  version: 3.10.8
-  resolution: "@tanstack/react-virtual@npm:3.10.8"
+"@tanstack/react-virtual@npm:^3.10.7":
+  version: 3.11.2
+  resolution: "@tanstack/react-virtual@npm:3.11.2"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.10.8"
+    "@tanstack/virtual-core": "npm:3.11.2"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/b7aec88ef48f604d3e7245b9996ba42f06e6ee2c1a45146cb96814cb3873a4c888bf86d26d10284c847a5ed97e16dc9430c380387abc1231c2e43c00f6ebadff
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/de446ce517d0855b3d58e79b6a75a37be40b4529baf0a5c3ffa2662dea80aba03409e06545aea27aa9e3a36fc2a2e3005ecbfce16a4659991d66930ea3bd62d4
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.10.8":
-  version: 3.10.8
-  resolution: "@tanstack/virtual-core@npm:3.10.8"
-  checksum: 10c0/ddb97cd03d84b343b38a2c14d85e33c788f4af622fccc0fdf997caf4e83e47e8f67b099b854c7dc4337d7662f647625ab3247cd8aa1bc9d4dda701bda83245f6
+"@tanstack/virtual-core@npm:3.11.2":
+  version: 3.11.2
+  resolution: "@tanstack/virtual-core@npm:3.11.2"
+  checksum: 10c0/38f1047127c6b1d07fe95becb7a12e66fb7c59d37ec0359e4ab339f837c6b906e1adff026ebd12849ba851d3f118d491014205c6b3c6ed8568cc232a798aeaaf
   languageName: node
   linkType: hard
 
@@ -4838,6 +4900,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@u-elements/u-details@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@u-elements/u-details@npm:0.1.0"
+  checksum: 10c0/b4a45ed5a28fedf27688e66f8cc67ba323fe5ceae8625cf39c2b56da07fd1bb7fb666fd54ad42c4906dbf691f6de29844246e6bddf2d591c7220e847a7d9f57a
+  languageName: node
+  linkType: hard
+
 "@ungap/promise-all-settled@npm:1.1.2":
   version: 1.1.2
   resolution: "@ungap/promise-all-settled@npm:1.1.2"
@@ -5375,9 +5444,9 @@ __metadata:
     "@babel/runtime-corejs3": "npm:7.26.0"
     "@date-fns/tz": "npm:1.2.0"
     "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:0.10.0"
-    "@digdir/designsystemet-react": "npm:0.63.1"
-    "@digdir/designsystemet-theme": "npm:0.15.3"
+    "@digdir/designsystemet-css": "npm:1.0.0-next.47"
+    "@digdir/designsystemet-react": "npm:1.0.0-next.47"
+    "@digdir/designsystemet-theme": "npm:1.0.0-next.47"
     "@eslint/compat": "npm:1.2.5"
     "@faker-js/faker": "npm:9.4.0"
     "@material-ui/core": "npm:4.12.4"

From d8688c3de0ae32ca9d27ee3fc5226d909e0bc170 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 10 Feb 2025 10:06:16 +0100
Subject: [PATCH 002/170] re-use visually hidden css

---
 src/app-components/Table/Table.module.css        | 13 -------------
 src/app-components/Table/Table.tsx               |  3 ++-
 src/components/form/RadioButton.tsx              |  4 ++--
 src/layout/Grid/GridSummary.module.css           | 13 -------------
 src/layout/Grid/GridSummary.tsx                  |  3 ++-
 src/layout/RadioButtons/ControlledRadioGroup.tsx | 16 ++++++++++------
 .../RepeatingGroup/RepeatingGroup.module.css     | 13 -------------
 .../RepeatingGroupTableSummary.module.css        | 13 -------------
 .../RepeatingGroupTableSummary.tsx               |  3 ++-
 .../RepeatingGroup/Table/RepeatingGroupTable.tsx |  5 +++--
 src/layout/Subform/SubformComponent.module.css   | 13 -------------
 src/layout/Subform/SubformComponent.tsx          |  5 +++--
 .../Subform/Summary/SubformSummaryTable.tsx      |  3 ++-
 src/styles/utils.module.css                      | 13 +++++++++++++
 14 files changed, 39 insertions(+), 81 deletions(-)

diff --git a/src/app-components/Table/Table.module.css b/src/app-components/Table/Table.module.css
index 8a3555816d..0da64bb440 100644
--- a/src/app-components/Table/Table.module.css
+++ b/src/app-components/Table/Table.module.css
@@ -73,16 +73,3 @@
 .mobileTable td .buttonContainer {
   justify-content: start;
 }
-
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
diff --git a/src/app-components/Table/Table.tsx b/src/app-components/Table/Table.tsx
index 681e931860..869428ae01 100644
--- a/src/app-components/Table/Table.tsx
+++ b/src/app-components/Table/Table.tsx
@@ -7,6 +7,7 @@ import { pick } from 'dot-object';
 import type { JSONSchema7 } from 'json-schema';
 
 import classes from 'src/app-components/Table/Table.module.css';
+import utilClasses from 'src/styles/util.module.css';
 import type { FormDataObject, FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
 
 interface Column {
@@ -95,7 +96,7 @@ export function AppTable({
           ))}
           {actionButtons && actionButtons.length > 0 && (
             <Table.HeaderCell>
-              <span className={classes.visuallyHidden}>{actionButtonHeader}</span>
+              <span className={utilClasses.visuallyHidden}>{actionButtonHeader}</span>
             </Table.HeaderCell>
           )}
         </Table.Row>
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index 59a196446f..5e76187b6d 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -13,7 +13,6 @@ import { useLanguage } from 'src/features/language/useLanguage';
 
 export interface IRadioButtonProps extends Omit<RadioProps, 'children'> {
   showAsCard?: boolean;
-  label?: string;
   helpText?: React.ReactNode;
   hideLabel?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -24,8 +23,8 @@ export interface IRadioButtonProps extends Omit<RadioProps, 'children'> {
 
 export const RadioButton = ({
   showAsCard = false,
-  label,
   helpText,
+  label,
   hideLabel,
   onChange,
   alertOnChange,
@@ -45,6 +44,7 @@ export const RadioButton = ({
   const radioButton = (
     <Radio
       {...rest}
+      label={label}
       className={cn(classes.radioButton, className)}
       onChange={handleChange}
       ref={showAsCard ? inputRef : undefined}
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index 2b2f2f2b23..ecdbd47f11 100644
--- a/src/layout/Grid/GridSummary.module.css
+++ b/src/layout/Grid/GridSummary.module.css
@@ -158,16 +158,3 @@ tr > .fullWidthCellLast {
   text-align: left;
   font-weight: 500;
 }
-
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index d34f58de54..7e672721fe 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -23,6 +23,7 @@ import { Hidden, useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { useNodeTraversal } from 'src/utils/layout/useNodeTraversal';
 import { typedBoolean } from 'src/utils/typing';
+import utilClasses from 'src/utils/util.module.css';
 import type { DisplayDataProps } from 'src/features/displayData';
 import type {
   GridCellLabelFrom,
@@ -164,7 +165,7 @@ export function GridRowRenderer(props: GridRowProps) {
       ))}
       {!pdfModeActive && row.header && !isSmall && (
         <Table.HeaderCell>
-          <span className={classes.visuallyHidden}>
+          <span className={utilClasses.visuallyHidden}>
             <Lang id='general.edit' />
           </span>
         </Table.HeaderCell>
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 2f1db975cb..8da78caa9a 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Fieldset } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { RadioButton } from 'src/components/form/RadioButton';
@@ -13,6 +14,7 @@ import { useRadioButtons } from 'src/layout/RadioButtons/radioButtonsUtils';
 import { shouldUseRowLayout } from 'src/utils/layout';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import utilClasses from 'src/utils/util.module.css';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IControlledRadioGroupProps = PropsFromGenericComponent<'RadioButtons' | 'LikertItem'>;
@@ -70,22 +72,24 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
     <ComponentStructureWrapper node={node}>
       <div id={id}>
         <Fieldset
-          hideLegend={overrideDisplay?.renderLegend === false}
-          description={<Lang id={textResourceBindings?.description} />}
-          error={!isValid}
-          readOnly={readOnly}
           inline={shouldDisplayHorizontally}
           role='radiogroup'
         >
-          <Fieldset.Legend>{labelText}</Fieldset.Legend>
+          <Fieldset.Legend className={cn({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}>
+            {labelText}
+          </Fieldset.Legend>
+          <Fieldset.Description>
+            <Lang id={textResourceBindings?.description} />
+          </Fieldset.Description>
           {calculatedOptions.map((option) => (
             <RadioButton
+              key={option.value}
               value={option.value}
               label={langAsString(option.label)}
               description={option.description && <Lang id={option.description} />}
               helpText={option.helpText && <Lang id={option.helpText} />}
               name={id}
-              key={option.value}
+              error={!isValid}
               checked={option.value === selectedValues[0]}
               showAsCard={showAsCard}
               readOnly={readOnly}
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index ecfd023426..f2b14ba42a 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -115,19 +115,6 @@ table > tbody > tr.editingRow:hover {
   border-left: 2px dotted var(--repeating-group-edit-border-color);
 }
 
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .contentFormatting {
   --cell-max-number-of-lines: 2;
   --cell-text-alignment: left;
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
index 9ff9aafdd0..ca777dd16a 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
@@ -64,19 +64,6 @@
   align-items: start;
 }
 
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .narrowLastColumn {
   width: 1%;
 }
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
index 36e2d74afc..7a7304c250 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -23,6 +23,7 @@ import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import utilClasses from 'src/utils/util.module.css';
 import type { ITableColumnFormatting } from 'src/layout/common.generated';
 import type { RepGroupRow } from 'src/layout/RepeatingGroup/types';
 import type { BaseLayoutNode, LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -79,7 +80,7 @@ export const RepeatingGroupTableSummary = ({
             ))}
             {!pdfModeActive && !isSmall && (
               <Table.HeaderCell className={tableClasses.narrowLastColumn}>
-                <span className={tableClasses.visuallyHidden}>
+                <span className={utilClasses.visuallyHidden}>
                   <Lang id='general.edit' />
                 </span>
               </Table.HeaderCell>
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
index e004e4a896..814e7e5efc 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
@@ -23,6 +23,7 @@ import { useTableNodes } from 'src/layout/RepeatingGroup/useTableNodes';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import utilClasses from 'src/utils/util.module.css';
 import type { ITableColumnFormatting } from 'src/layout/common.generated';
 import type { GridCellInternal } from 'src/layout/Grid/types';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -119,14 +120,14 @@ export function RepeatingGroupTable(): React.JSX.Element | null {
               ))}
               {displayEditColumn && (
                 <Table.HeaderCell style={{ padding: 0, paddingRight: '10px' }}>
-                  <span className={classes.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.edit' />
                   </span>
                 </Table.HeaderCell>
               )}
               {displayDeleteColumn && (
                 <Table.HeaderCell style={{ padding: 0 }}>
-                  <span className={classes.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.delete' />
                   </span>
                 </Table.HeaderCell>
diff --git a/src/layout/Subform/SubformComponent.module.css b/src/layout/Subform/SubformComponent.module.css
index 60720f8de1..e6b6874cc9 100644
--- a/src/layout/Subform/SubformComponent.module.css
+++ b/src/layout/Subform/SubformComponent.module.css
@@ -1,16 +1,3 @@
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .tableButton {
   width: max-content;
 }
diff --git a/src/layout/Subform/SubformComponent.tsx b/src/layout/Subform/SubformComponent.tsx
index 5d96e5b0ac..1944cf375a 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -21,6 +21,7 @@ import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper'
 import classes from 'src/layout/Subform/SubformComponent.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { getStatefulDataModelUrl } from 'src/utils/urls/appUrlHelper';
+import utilClasses from 'src/utils/util.module.css';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IData } from 'src/types/shared';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -107,13 +108,13 @@ export function SubformComponent({ node }: PropsFromGenericComponent<'Subform'>)
                     </Table.HeaderCell>
                   )}
                   <Table.HeaderCell>
-                    <span className={classes.visuallyHidden}>
+                    <span className={utilClasses.visuallyHidden}>
                       <Lang id='general.edit' />
                     </span>
                   </Table.HeaderCell>
                   {showDeleteButton && (
                     <Table.HeaderCell>
-                      <span className={classes.visuallyHidden}>
+                      <span className={utilClasses.visuallyHidden}>
                         <Lang id='general.delete' />
                       </span>
                     </Table.HeaderCell>
diff --git a/src/layout/Subform/Summary/SubformSummaryTable.tsx b/src/layout/Subform/Summary/SubformSummaryTable.tsx
index 677c06dfea..fa62a75745 100644
--- a/src/layout/Subform/Summary/SubformSummaryTable.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryTable.tsx
@@ -22,6 +22,7 @@ import classes2 from 'src/layout/Subform/Summary/SubformSummaryComponent2.module
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { getStatefulDataModelUrl } from 'src/utils/urls/appUrlHelper';
+import utilClasses from 'src/utils/util.module.css';
 import type { ISubformSummaryComponent } from 'src/layout/Subform/Summary/SubformSummaryComponent';
 import type { IData } from 'src/types/shared';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -175,7 +176,7 @@ export function SubformSummaryTable({ targetNode }: ISubformSummaryComponent): R
               )}
               {!pdfModeActive && (
                 <Table.HeaderCell className={classNames(classes2.editColumnHeader, classes2.noRightPad)}>
-                  <span className={classes1.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.edit' />
                   </span>
                 </Table.HeaderCell>
diff --git a/src/styles/utils.module.css b/src/styles/utils.module.css
index 5f116e8df6..3145ef68e0 100644
--- a/src/styles/utils.module.css
+++ b/src/styles/utils.module.css
@@ -4,3 +4,16 @@
   outline-offset: var(--fds-focus-border-width);
   box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
 }
+
+.visuallyHidden {
+  border: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

From cd8fbb4799567b83826740e84800558fb6c497f9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Feb 2025 09:59:18 +0100
Subject: [PATCH 003/170] card app component and DS upgrade WIP

---
 src/app-components/Card/Card.module.css       |   4 +
 src/app-components/Card/Card.tsx              |  46 +++++
 src/app-components/Pagination/Pagination.tsx  |  56 ++-----
 src/layout/Cards/Cards.tsx                    | 158 +++++++-----------
 .../CheckboxesContainerComponent.tsx          |  29 ++--
 src/layout/Checkboxes/WrappedCheckbox.tsx     |  46 +++--
 src/layout/Datepicker/DropdownCaption.tsx     |   4 +-
 .../FileUpload/Error/FailedAttachments.tsx    |   6 +-
 src/layout/Grid/GridSummary.tsx               |   8 +-
 src/layout/Group/GroupComponent.tsx           |   4 +-
 src/layout/Group/GroupSummary.tsx             |   2 +-
 src/layout/Header/HeaderComponent.tsx         |   2 +-
 src/layout/Likert/LikertComponent.tsx         |   4 +-
 .../Summary/LargeLikertSummaryContainer.tsx   |   4 +-
 src/layout/Likert/Summary2/LikertSummary.tsx  |   8 +-
 src/layout/LikertItem/LikertItemComponent.tsx |   2 +-
 src/layout/List/ListComponent.tsx             |  81 +++++----
 src/layout/Map/MapComponent.tsx               |   2 +-
 src/layout/Map/Summary2/MapSummary.tsx        |   6 +-
 src/layout/Option/OptionComponent.tsx         |   2 +-
 .../OrganisationLookupComponent.tsx           |  10 +-
 .../OrganisationLookupSummary.tsx             |   2 +-
 src/layout/Payment/PaymentComponent.tsx       |   4 +-
 .../PaymentReceiptDetails.tsx                 |  24 +--
 .../SkeletonLoader/SkeletonLoader.module.css  |  10 --
 .../Payment/SkeletonLoader/SkeletonLoader.tsx |  29 ----
 src/layout/Payment/SkeletonLoader/index.tsx   |   2 -
 .../PersonLookup/PersonLookupComponent.tsx    |   8 +-
 .../PersonLookup/PersonLookupSummary.tsx      |   2 +-
 .../ControlledRadioGroup.module.css           |   5 +
 .../RadioButtons/ControlledRadioGroup.tsx     |  52 +++---
 31 files changed, 304 insertions(+), 318 deletions(-)
 create mode 100644 src/app-components/Card/Card.module.css
 create mode 100644 src/app-components/Card/Card.tsx
 delete mode 100644 src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
 delete mode 100644 src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
 delete mode 100644 src/layout/Payment/SkeletonLoader/index.tsx
 create mode 100644 src/layout/RadioButtons/ControlledRadioGroup.module.css

diff --git a/src/app-components/Card/Card.module.css b/src/app-components/Card/Card.module.css
new file mode 100644
index 0000000000..860a4fbfbf
--- /dev/null
+++ b/src/app-components/Card/Card.module.css
@@ -0,0 +1,4 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}
diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
new file mode 100644
index 0000000000..6c038e810b
--- /dev/null
+++ b/src/app-components/Card/Card.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+import Grid from '@material-ui/core/Grid';
+
+import classes from 'src/app-components/Card/Card.module.css';
+
+type AppCardProps = {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaPosition?: 'top' | 'bottom';
+  color?: Parameters<typeof Card>[0]['color'];
+  children?: React.ReactNode;
+};
+
+export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) {
+  return (
+    <Card color={color}>
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      {(title || description) && (
+        <Card.Block>
+          {title && <Heading data-size='md'>{title}</Heading>}
+          {description && <Paragraph>{description}</Paragraph>}
+        </Card.Block>
+      )}
+      {children && (
+        <Card.Block>
+          <Grid
+            container
+            spacing={6}
+          >
+            {children}
+          </Grid>
+        </Card.Block>
+      )}
+      {footer && (
+        <Card.Block>
+          <Paragraph data-size='sm'>{footer}</Paragraph>
+        </Card.Block>
+      )}
+      {media && mediaPosition === 'bottom' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+    </Card>
+  );
+}
diff --git a/src/app-components/Pagination/Pagination.tsx b/src/app-components/Pagination/Pagination.tsx
index 1fd4feb63d..06a50e8f39 100644
--- a/src/app-components/Pagination/Pagination.tsx
+++ b/src/app-components/Pagination/Pagination.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Combobox, Pagination as DesignSystemPagination, usePagination } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 
 import classes from 'src/app-components/Pagination/Pagination.module.css';
 import { Lang } from 'src/features/language/Lang';
@@ -14,7 +13,7 @@ type PaginationProps = {
   nextLabelAriaLabel: string;
   previousLabel: string;
   previousLabelAriaLabel: string;
-  size: NonNullable<Parameters<typeof DesignSystemPagination>[0]['size']>;
+  size: NonNullable<Parameters<typeof DesignSystemPagination>[0]['data-size']>;
   compact?: boolean;
   hideLabels?: boolean;
   showRowsPerPageDropdown?: boolean;
@@ -56,11 +55,12 @@ export const Pagination = ({
   const isMini = useIsMini();
   const isMobile = useIsMobile();
   const isTablet = useIsTablet();
+  const isCompact = compact || isMini || isTablet;
 
-  const { pages, showNextPage, showPreviousPage } = usePagination({
-    compact: compact || isMini || isTablet,
+  const { pages, prevButtonProps, nextButtonProps, hasNext, hasPrev } = usePagination({
     currentPage: pageNumber,
     totalPages,
+    onChange,
   });
   const { langAsString } = useLanguage();
 
@@ -95,43 +95,30 @@ export const Pagination = ({
           ))}
         </Combobox>
       )}
-      <DesignSystemPagination.Root
+      <DesignSystemPagination
         data-testid='pagination'
         aria-label='Pagination'
-        size={size}
-        compact={compact || isMini || isTablet}
+        data-size={size}
         className={classes.pagination}
       >
-        <DesignSystemPagination.Content>
+        <DesignSystemPagination.List>
           <DesignSystemPagination.Item>
-            <DesignSystemPagination.Previous
+            <DesignSystemPagination.Button
               data-testid='paginationPreviousButton'
-              className={!showPreviousPage ? classes.hidden : undefined}
-              onClick={() => {
-                onChange(currentPage - 1);
-              }}
+              {...prevButtonProps}
               aria-label={previousLabelAriaLabel}
             >
-              <ChevronLeftIcon
-                aria-hidden
-                fontSize={iconSize[size]}
-              />
               {!hideLabels && !isMobile && previousLabel}
-            </DesignSystemPagination.Previous>
+            </DesignSystemPagination.Button>
           </DesignSystemPagination.Item>
-          {pages.map((page, i) => (
+          {pages.map((page, i, buttonProps) => (
             <DesignSystemPagination.Item key={`${page}${i}`}>
-              {page === 'ellipsis' ? (
-                <DesignSystemPagination.Ellipsis />
-              ) : (
+              {typeof page === 'number' && (
                 <DesignSystemPagination.Button
                   color='first'
                   aria-current={pageNumber === page}
-                  isActive={pageNumber === page}
                   aria-label={langAsString('general.page_number', [page])}
-                  onClick={() => {
-                    onChange(page - 1);
-                  }}
+                  {...buttonProps}
                 >
                   {page}
                 </DesignSystemPagination.Button>
@@ -139,23 +126,16 @@ export const Pagination = ({
             </DesignSystemPagination.Item>
           ))}
           <DesignSystemPagination.Item>
-            <DesignSystemPagination.Next
+            <DesignSystemPagination.Button
               data-testid='paginationNextButton'
               aria-label={nextLabelAriaLabel}
-              onClick={() => {
-                onChange(currentPage + 1);
-              }}
-              className={!showNextPage ? classes.hidden : undefined}
+              {...nextButtonProps}
             >
               {!hideLabels && !isMobile && nextLabel}
-              <ChevronRightIcon
-                aria-hidden
-                fontSize={iconSize[size]}
-              />
-            </DesignSystemPagination.Next>
+            </DesignSystemPagination.Button>
           </DesignSystemPagination.Item>
-        </DesignSystemPagination.Content>
-      </DesignSystemPagination.Root>
+        </DesignSystemPagination.List>
+      </DesignSystemPagination>
     </>
   );
 };
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 7a5f2e965a..4c81409a91 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -1,140 +1,110 @@
 import React from 'react';
 import type { CSSProperties } from 'react';
 
-import { Card } from '@digdir/designsystemet-react';
-
-import { Flex } from 'src/app-components/Flex/Flex';
+import { AppCard } from 'src/app-components/Card/Card';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
-import { GenericComponent, GenericComponentById } from 'src/layout/GenericComponent';
+import { GenericComponent } from 'src/layout/GenericComponent';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
-import type { CardInternal } from 'src/layout/Cards/CardsPlugin';
-import type { LayoutNode } from 'src/utils/layout/LayoutNode';
+import type { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 
 type ICardsProps = PropsFromGenericComponent<'Cards'>;
 
 function parseSize(size: string | undefined, defaultValue: string): string {
   return size && /^[0-9]+$/.test(size) ? `${size}px` : (size ?? defaultValue);
 }
-
 export const Cards = ({ node }: ICardsProps) => {
   const { cardsInternal, minMediaHeight, minWidth, color, mediaPosition: _mediaPosition } = useNodeItem(node);
   const processedMinWidth = parseSize(minWidth, '250px');
   const processedMinMediaHeight = parseSize(minMediaHeight, '150px');
   const mediaPosition = _mediaPosition ?? 'top';
-
   const cardContainer: CSSProperties = {
     display: 'grid',
     gap: '28px',
     gridTemplateColumns: `repeat(auto-fit, minmax(${processedMinWidth}, 1fr))`,
   };
-
   return (
     <ComponentStructureWrapper node={node}>
       <div style={cardContainer}>
         {cardsInternal.map((card, idx) => (
-          <Card
+          <AppCard
             key={idx}
+            title={card.title && <Lang id={card.title} />}
+            description={card.description && <Lang id={card.description} />}
+            footer={card.footer && <Lang id={card.footer} />}
             color={color}
-            style={{ height: '100%' }}
+            mediaPosition={mediaPosition}
+            media={
+              card.mediaId && (
+                <CardItem
+                  key={idx}
+                  nodeId={card.mediaId}
+                  parentNode={node}
+                  isMedia={true}
+                  minMediaHeight={processedMinMediaHeight}
+                />
+              )
+            }
           >
-            {mediaPosition === 'top' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-            {card.title && (
-              <Card.Header>
-                <Lang id={card.title} />
-              </Card.Header>
-            )}
-            {card.description && (
-              <Card.Content>
-                <Lang id={card.description} />
-              </Card.Content>
-            )}
-            {card.childIds && card.childIds.length > 0 && (
-              <Flex
-                container
-                item
-                direction='row'
-                spacing={6}
-              >
-                <Flex
-                  container
-                  alignItems='flex-start'
-                  item
-                  spacing={6}
-                >
-                  <CardProvider
-                    node={node}
-                    renderedInMedia={false}
-                  >
-                    {card.childIds.map((childId, idx) => (
-                      <GenericComponentById
-                        key={idx}
-                        id={childId}
-                      />
-                    ))}
-                  </CardProvider>
-                </Flex>
-              </Flex>
-            )}
-            {card.footer && (
-              <Card.Footer>
-                <Lang id={card.footer} />
-              </Card.Footer>
-            )}
-            {mediaPosition === 'bottom' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-          </Card>
+            {card?.childIds &&
+              card.childIds?.length > 0 &&
+              card.childIds?.filter(typedBoolean).map((childId, idx) => (
+                <CardItem
+                  key={idx}
+                  nodeId={childId}
+                  parentNode={node}
+                  isMedia={false}
+                />
+              ))}
+          </AppCard>
         ))}
       </div>
     </ComponentStructureWrapper>
   );
 };
 
-interface MediaProps {
-  card: CardInternal;
-  node: LayoutNode<'Cards'>;
-  minMediaHeight: string | undefined;
-}
+type CardItemProps = {
+  nodeId: string;
+  parentNode: BaseLayoutNode<'Cards'>;
+  isMedia: boolean;
+  minMediaHeight?: string;
+};
 
-function Media({ card, node, minMediaHeight }: MediaProps) {
-  const mediaNode = useNode(card.mediaId);
-  if (!mediaNode) {
+function CardItem({ nodeId, parentNode, isMedia, minMediaHeight }: CardItemProps) {
+  const itemNode = useNode(nodeId);
+  if (!itemNode) {
     return null;
   }
 
   return (
-    <Card.Media>
-      <CardProvider
-        node={node}
-        renderedInMedia={true}
-        minMediaHeight={minMediaHeight}
+    <CardProvider
+      node={parentNode}
+      renderedInMedia={isMedia}
+      minMediaHeight={minMediaHeight}
+    >
+      <ConditionalWrapper
+        condition={isMedia}
+        wrapper={(children) => (
+          <div
+            data-componentid={nodeId}
+            data-componentbaseid={itemNode.baseId}
+          >
+            {children}
+          </div>
+        )}
       >
-        <div
-          data-componentid={mediaNode.id}
-          data-componentbaseid={mediaNode.baseId}
-        >
-          <GenericComponent
-            node={mediaNode}
-            overrideDisplay={{
-              directRender: true,
-            }}
-          />
-        </div>
-      </CardProvider>
-    </Card.Media>
+        <GenericComponent
+          node={itemNode}
+          overrideDisplay={{
+            directRender: true,
+          }}
+        />
+      </ConditionalWrapper>
+    </CardProvider>
   );
 }
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index a5f887cefc..2c6b2d8296 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from '@digdir/designsystemet-react';
+import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -44,6 +44,14 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
   const hideLabel = overrideDisplay?.renderedInTable === true && calculatedOptions.length === 1 && !showLabelsInTable;
   const ariaLabel = overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined;
 
+  const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+    name: id,
+    readOnly,
+    value: selectedValues,
+    onChange: setData,
+    error: !isValid,
+  });
+
   return (
     <ComponentStructureWrapper node={node}>
       {isFetching ? (
@@ -53,34 +61,35 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
           id={id}
           key={`checkboxes_group_${id}`}
         >
-          <Checkbox.Group
+          <Fieldset
             className={cn({ [classes.horizontal]: horizontal }, classes.checkboxGroup)}
-            legend={labelTextGroup}
-            description={textResourceBindings?.description && <Lang id={textResourceBindings?.description} />}
-            readOnly={readOnly}
-            hideLegend={overrideDisplay?.renderLegend === false}
-            error={!isValid}
             aria-label={ariaLabel}
-            value={selectedValues}
             data-testid='checkboxes-fieldset'
           >
+            {overrideDisplay?.renderLegend !== false && <Fieldset.Legend>{labelTextGroup}</Fieldset.Legend>}
+            {textResourceBindings?.description && (
+              <Fieldset.Description>
+                <Lang id={textResourceBindings?.description} />
+              </Fieldset.Description>
+            )}
             {calculatedOptions.map((option) => (
               <WrappedCheckbox
                 key={option.value}
                 id={id}
+                label={langAsString(option.label)}
                 option={option}
                 hideLabel={hideLabel}
                 alertOnChange={alertOnChange}
-                checked={selectedValues.includes(option.value)}
                 setChecked={(isChecked) => {
                   const newData = isChecked
                     ? [...selectedValues, option.value]
                     : selectedValues.filter((o) => o !== option.value);
                   setData(newData);
                 }}
+                {...getCheckboxProps(option.value)}
               />
             ))}
-          </Checkbox.Group>
+          </Fieldset>
         </div>
       )}
     </ComponentStructureWrapper>
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index 79ee77dd68..409ee2d986 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Checkbox } from '@digdir/designsystemet-react';
 import cn from 'classnames';
+import type { CheckboxProps } from '@digdir/designsystemet-react';
 
 import { HelpText } from 'src/app-components/HelpText/HelpText';
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
@@ -12,16 +13,23 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import classes from 'src/layout/Checkboxes/CheckboxesContainerComponent.module.css';
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 
-interface IWrappedCheckboxProps {
+type IWrappedCheckboxProps = {
   id: string;
   option: IOptionInternal;
   hideLabel?: boolean;
   alertOnChange?: boolean;
-  checked: boolean;
   setChecked: (checked: boolean) => void;
-}
+} & CheckboxProps;
 
-export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked, setChecked }: IWrappedCheckboxProps) {
+export function WrappedCheckbox({
+  id,
+  option,
+  hideLabel,
+  alertOnChange,
+  checked,
+  setChecked,
+  readOnly,
+}: IWrappedCheckboxProps) {
   const { langAsString, elementAsString } = useLanguage();
 
   const { alertOpen, setAlertOpen, handleChange, confirmChange, cancelChange } = useAlertOnChange(
@@ -53,22 +61,24 @@ export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked,
         name={option.value}
         description={option.description && <Lang id={option.description} />}
         value={option.value}
+        readOnly={readOnly}
+        label={
+          <span className={cn({ 'sr-only': hideLabel }, classes.checkboxLabelContainer)}>
+            {langAsString(option.label)}
+            {option.helpText && (
+              <HelpText
+                id={id}
+                title={elementAsString(option.helpText)}
+              >
+                <Lang id={option.helpText} />
+              </HelpText>
+            )}
+          </span>
+        }
         checked={checked}
-        size='small'
+        data-size='small'
         onChange={(e) => handleChange(e.target.checked)}
-      >
-        <span className={cn({ 'sr-only': hideLabel }, classes.checkboxLabelContainer)}>
-          {langAsString(option.label)}
-          {option.helpText && (
-            <HelpText
-              id={id}
-              title={elementAsString(option.helpText)}
-            >
-              <Lang id={option.helpText} />
-            </HelpText>
-          )}
-        </span>
-      </Checkbox>
+      />
     </ConditionalWrapper>
   );
 }
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index c354f10e6d..4d227e0fc8 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -54,7 +54,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
         <Combobox
           style={{ width: '150px' }}
           id={id}
-          size='small'
+          data-size='small'
           value={[calendarMonth.date.getMonth().toString()]}
           onValueChange={(months) => months.length && handleMonthChange(months[0])}
           aria-label={langAsString('date_picker.aria_label_month_dropdown')}
@@ -78,7 +78,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
         <Combobox
           style={{ width: '100px' }}
           id={id}
-          size='small'
+          data-size='small'
           value={[calendarMonth.date.getFullYear().toString()]}
           onValueChange={(years) => years.length && handleYearChange(years[0])}
           aria-label={langAsString('date_picker.aria_label_year_dropdown')}
diff --git a/src/layout/FileUpload/Error/FailedAttachments.tsx b/src/layout/FileUpload/Error/FailedAttachments.tsx
index a618063e6c..38ab00d6e4 100644
--- a/src/layout/FileUpload/Error/FailedAttachments.tsx
+++ b/src/layout/FileUpload/Error/FailedAttachments.tsx
@@ -34,8 +34,8 @@ function FileUploadError({ attachment, handleClose }: { attachment: IFailedAttac
   const { langAsString } = useLanguage();
   return (
     <Alert
-      size='sm'
-      severity='danger'
+      data-size='sm'
+      data-color='danger'
       role='alert'
       aria-live='assertive'
       aria-label={langAsString('form_filler.file_uploader_failed_to_upload_file', [attachment.data.filename])}
@@ -111,7 +111,7 @@ function ErrorDetails({ attachment: { data, error } }: { attachment: IFailedAtta
             <Button
               id={buttonId}
               style={{ marginTop: '0.5rem' }}
-              size='sm'
+              data-size='sm'
               variant='tertiary'
               color='second'
               onClick={() => {
diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index 7e672721fe..0db98c306e 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX, PropsWithChildren } from 'react';
 
-import { ErrorMessage, Heading, Table } from '@digdir/designsystemet-react';
+import { Heading, Table, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { LabelContent } from 'src/components/label/LabelContent';
@@ -115,7 +115,7 @@ export const GridSummary = ({ componentNode }: GridSummaryProps) => {
       {title && (
         <caption className={classes.tableCaption}>
           <Heading
-            size='xs'
+            data-size='xs'
             level={4}
           >
             <Lang
@@ -362,13 +362,13 @@ function CellWithComponent({
       <div className={cn({ [classes.errorMessage]: errors.length > 0 })} />
       {errors.length > 0 &&
         errors.map(({ message }) => (
-          <ErrorMessage key={message.key}>
+          <ValidationMessage key={message.key}>
             <Lang
               id={message.key}
               params={message.params}
               node={node}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         ))}
     </CellComponent>
   );
diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx
index 15e62ad696..975c43a0dc 100644
--- a/src/layout/Group/GroupComponent.tsx
+++ b/src/layout/Group/GroupComponent.tsx
@@ -27,7 +27,7 @@ export interface IGroupComponent {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
   [2]: 'sm',
   [3]: 'xs',
   [4]: '2xs',
@@ -77,7 +77,7 @@ export function GroupComponent({
               <Heading
                 className={classes.legend}
                 level={headingLevel}
-                size={headingSize}
+                data-size={headingSize}
               >
                 <Lang id={legend} />
               </Heading>
diff --git a/src/layout/Group/GroupSummary.tsx b/src/layout/Group/GroupSummary.tsx
index 6c9dbaf784..f724015ff7 100644
--- a/src/layout/Group/GroupSummary.tsx
+++ b/src/layout/Group/GroupSummary.tsx
@@ -81,7 +81,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
     >
       {(summaryTitle || title) && (
         <Heading
-          size={isNestedGroup ? 'xsmall' : 'small'}
+          data-size={isNestedGroup ? 'xsmall' : 'small'}
           level={headingLevel}
         >
           <Lang
diff --git a/src/layout/Header/HeaderComponent.tsx b/src/layout/Header/HeaderComponent.tsx
index dd12d17b74..9ff8af5b30 100644
--- a/src/layout/Header/HeaderComponent.tsx
+++ b/src/layout/Header/HeaderComponent.tsx
@@ -13,7 +13,7 @@ export type IHeaderProps = PropsFromGenericComponent<'Header'>;
 
 type HeadingProps = {
   level: Parameters<typeof Heading>[0]['level'];
-  size: Parameters<typeof Heading>[0]['size'];
+  size: Parameters<typeof Heading>[0]['data-size'];
 };
 
 function getHeaderProps(size?: string): HeadingProps {
diff --git a/src/layout/Likert/LikertComponent.tsx b/src/layout/Likert/LikertComponent.tsx
index 378a290daf..8d7cca3a33 100644
--- a/src/layout/Likert/LikertComponent.tsx
+++ b/src/layout/Likert/LikertComponent.tsx
@@ -52,7 +52,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
           >
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
             </Heading>
@@ -102,7 +102,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
             >
               <Heading
                 level={2}
-                size='sm'
+                data-size='sm'
               >
                 <Lang id={title} />
               </Heading>
diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
index 931fb87b09..336db75089 100644
--- a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
+++ b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
@@ -21,7 +21,7 @@ export interface IDisplayLikertContainer {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
   [2]: 'medium',
   [3]: 'small',
   [4]: 'xsmall',
@@ -56,7 +56,7 @@ export function LargeLikertSummaryContainer({
         legend && (
           <Heading
             level={headingLevel}
-            size={headingSize}
+            data-size={headingSize}
           >
             <Lang id={legend} />
           </Heading>
diff --git a/src/layout/Likert/Summary2/LikertSummary.tsx b/src/layout/Likert/Summary2/LikertSummary.tsx
index e98bf61f89..ecb4181ae4 100644
--- a/src/layout/Likert/Summary2/LikertSummary.tsx
+++ b/src/layout/Likert/Summary2/LikertSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
@@ -49,7 +49,7 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
     <div className={classes.summaryItemWrapper}>
       <div className={classes.summaryItem}>
         <Heading
-          size='xs'
+          data-size='xs'
           level={4}
         >
           <Lang
@@ -68,13 +68,13 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
         />
       ))}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/LikertItem/LikertItemComponent.tsx b/src/layout/LikertItem/LikertItemComponent.tsx
index bd529bbbbe..3e21f2da71 100644
--- a/src/layout/LikertItem/LikertItemComponent.tsx
+++ b/src/layout/LikertItem/LikertItemComponent.tsx
@@ -60,7 +60,7 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, PropsFromGenericCompo
       >
         <Label
           asChild
-          size='sm'
+          data-size='sm'
           weight='regular'
         >
           <span>
diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 3177700a35..666b9d06a1 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { AriaAttributes } from 'react';
 
-import { Heading, Radio, Table } from '@digdir/designsystemet-react';
+import { Fieldset, Heading, Radio, Table, useRadioGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Pagination as CustomPagination } from 'src/app-components/Pagination/Pagination';
@@ -40,13 +40,13 @@ export const ListComponent = ({ node }: IListProps) => {
   } = item;
 
   const [pageSize, setPageSize] = useState<number>(pagination?.default ?? 0);
-  const [pageNumber, setPageNumber] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(0);
   const [sortColumn, setSortColumn] = useState<string | undefined>();
   const [sortDirection, setSortDirection] = useState<AriaAttributes['aria-sort']>('none');
 
   const filter: Filter = {
     pageSize,
-    pageNumber,
+    pageNumber: currentPage,
     sortColumn,
     sortDirection,
   };
@@ -76,33 +76,37 @@ export const ListComponent = ({ node }: IListProps) => {
 
   const title = item.textResourceBindings?.title;
   const description = item.textResourceBindings?.description;
+  const { getRadioProps } = useRadioGroup({
+    name: node.id,
+    value: JSON.stringify(selectedRow),
+    required,
+  });
   if (isMobile) {
     return (
       <ComponentStructureWrapper node={node}>
-        <Radio.Group
+        <Fieldset
           role='radiogroup'
-          required={required}
-          legend={
+          className={classes.mobileRadioGroup}
+        >
+          <Fieldset.Legend>
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
               <RequiredIndicator required={required} />
             </Heading>
-          }
-          description={description && <Lang id={description} />}
-          className={classes.mobileRadioGroup}
-          value={JSON.stringify(selectedRow)}
-        >
+          </Fieldset.Legend>
+          {description && (
+            <Fieldset.Description>
+              <Lang id={description} />
+            </Fieldset.Description>
+          )}
+
           {data?.listItems.map((row) => (
             <Radio
               key={JSON.stringify(row)}
-              value={JSON.stringify(row)}
-              className={cn(classes.mobileRadio, { [classes.selectedRow]: isRowSelected(row) })}
-              onClick={() => handleRowSelect({ selectedValue: row })}
-            >
-              {tableHeadersToShowInMobile.map((key) => (
+              label={tableHeadersToShowInMobile.map((key) => (
                 <div key={key}>
                   <strong>
                     <Lang id={tableHeaders[key]} />
@@ -110,14 +114,18 @@ export const ListComponent = ({ node }: IListProps) => {
                   <span>{typeof row[key] === 'string' ? <Lang id={row[key]} /> : row[key]}</span>
                 </div>
               ))}
-            </Radio>
+              {...getRadioProps({ value: JSON.stringify(row) })}
+              value={JSON.stringify(row)}
+              onClick={() => handleRowSelect({ selectedValue: row })}
+              className={cn(classes.mobileRadio, { [classes.selectedRow]: isRowSelected(row) })}
+            />
           ))}
-        </Radio.Group>
+        </Fieldset>
         <Pagination
           pageSize={pageSize}
           setPageSize={setPageSize}
-          pageNumber={pageNumber}
-          setPageNumber={setPageNumber}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
           numberOfRows={data?._metaData.totaltItemsCount}
           rowsPerPageOptions={pagination?.alternatives}
         />
@@ -132,7 +140,7 @@ export const ListComponent = ({ node }: IListProps) => {
           <caption id={getLabelId(node.id)}>
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
               <RequiredIndicator required={required} />
@@ -151,16 +159,7 @@ export const ListComponent = ({ node }: IListProps) => {
             {Object.entries(tableHeaders).map(([key, value]) => (
               <Table.HeaderCell
                 key={key}
-                sortable={sortableColumns?.includes(key)}
-                sort={sortColumn === key ? sortDirection : undefined}
-                onSortClick={() => {
-                  if (sortColumn === key) {
-                    setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending');
-                  } else {
-                    setSortDirection('descending');
-                    setSortColumn(key);
-                  }
-                }}
+                sort={sortableColumns?.includes(key) && sortColumn === key ? sortDirection : undefined}
               >
                 <Lang id={value} />
               </Table.HeaderCell>
@@ -209,8 +208,8 @@ export const ListComponent = ({ node }: IListProps) => {
         <Pagination
           pageSize={pageSize}
           setPageSize={setPageSize}
-          pageNumber={pageNumber}
-          setPageNumber={setPageNumber}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
           numberOfRows={data?._metaData.totaltItemsCount}
           rowsPerPageOptions={pagination?.alternatives}
         />
@@ -222,8 +221,8 @@ export const ListComponent = ({ node }: IListProps) => {
 type PaginationProps = {
   pageSize: number;
   setPageSize: (pageSize: number) => void;
-  pageNumber: number;
-  setPageNumber: (pageNumber: number) => void;
+  currentPage: number;
+  setCurrentPage: (pageNumber: number) => void;
   numberOfRows: number | undefined;
   rowsPerPageOptions: number[] | undefined;
 };
@@ -231,8 +230,8 @@ type PaginationProps = {
 function Pagination({
   pageSize,
   setPageSize,
-  pageNumber,
-  setPageNumber,
+  currentPage,
+  setCurrentPage,
   numberOfRows = 0,
   rowsPerPageOptions = [],
 }: PaginationProps) {
@@ -240,7 +239,7 @@ function Pagination({
   const isMobile = useIsMobile();
 
   function handlePageSizeChange(newSize: number) {
-    setPageNumber(0);
+    setCurrentPage(0);
     setPageSize(newSize);
   }
   const textStrings = language?.['list_component'];
@@ -254,10 +253,10 @@ function Pagination({
         previousLabelAriaLabel={textStrings['previousPageAriaLabel']}
         rowsPerPageText={textStrings['rowsPerPage']}
         size='sm'
-        currentPage={pageNumber}
+        currentPage={currentPage}
         numberOfRows={numberOfRows}
         pageSize={pageSize}
-        onChange={setPageNumber}
+        onChange={() => setCurrentPage}
         showRowsPerPageDropdown
         onPageSizeChange={(value) => handlePageSizeChange(+value)}
         rowsPerPageOptions={rowsPerPageOptions}
diff --git a/src/layout/Map/MapComponent.tsx b/src/layout/Map/MapComponent.tsx
index 6cefbe3a76..da5f958dc7 100644
--- a/src/layout/Map/MapComponent.tsx
+++ b/src/layout/Map/MapComponent.tsx
@@ -59,7 +59,7 @@ export function MapComponent({ node }: IMapComponentProps) {
         />
       </div>
       <Paragraph
-        size='sm'
+        data-size='sm'
         className={classes.footer}
       >
         {markerBinding ? (
diff --git a/src/layout/Map/Summary2/MapSummary.tsx b/src/layout/Map/Summary2/MapSummary.tsx
index 9f1474d8b2..983027dfcf 100644
--- a/src/layout/Map/Summary2/MapSummary.tsx
+++ b/src/layout/Map/Summary2/MapSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react';
+import { Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Label } from 'src/components/label/Label';
@@ -82,13 +82,13 @@ export function MapSummary({ componentNode, emptyFieldText, isCompact }: MapSumm
         </Paragraph>
       )}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/Option/OptionComponent.tsx b/src/layout/Option/OptionComponent.tsx
index 5804bbf651..9d9a18f91f 100644
--- a/src/layout/Option/OptionComponent.tsx
+++ b/src/layout/Option/OptionComponent.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { HelpText } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
+import { HelpText } from 'src/app-components/HelpText/HelpText';
 import { getLabelId } from 'src/components/label/Label';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
index a73491d14c..eb6bc2d3d4 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react';
+import { Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import type { PropsFromGenericComponent } from '..';
@@ -187,19 +187,19 @@ export function OrganisationLookupComponent({
             )}
           </div>
           {data?.error && (
-            <ErrorMessage
-              size='sm'
+            <ValidationMessage
+              data-size='sm'
               className={classes.apiError}
             >
               <Lang id={data.error} />
-            </ErrorMessage>
+            </ValidationMessage>
           )}
           {hasSuccessfullyFetched && orgName && (
             <div
               className={classes.orgname}
               aria-label={langAsString('organisation_lookup.org_name')}
             >
-              {hasSuccessfullyFetched && <Paragraph size='sm'>{orgName}</Paragraph>}
+              {hasSuccessfullyFetched && <Paragraph data-size='sm'>{orgName}</Paragraph>}
             </div>
           )}
         </div>
diff --git a/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx b/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
index 36f71d087d..025abddffa 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
@@ -28,7 +28,7 @@ export function OrganisationLookupSummary({ componentNode }: OrganisationLookupS
   return (
     <div className={classes.organisationSummaryWrapper}>
       <Heading
-        size='sm'
+        data-size='sm'
         level={2}
       >
         <Lang
diff --git a/src/layout/Payment/PaymentComponent.tsx b/src/layout/Payment/PaymentComponent.tsx
index 5bd7b6c9f9..8a3d9834a8 100644
--- a/src/layout/Payment/PaymentComponent.tsx
+++ b/src/layout/Payment/PaymentComponent.tsx
@@ -33,12 +33,12 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
         />
         <div className={classes.alertContainer}>
           {(paymentInfo?.status === PaymentStatus.Failed || paymentError) && (
-            <Alert severity='warning'>
+            <Alert data-color='warning'>
               <Lang id='payment.alert.failed' />
             </Alert>
           )}
           {paymentInfo?.status === PaymentStatus.Paid && (
-            <Alert severity='info'>
+            <Alert data-color='info'>
               <Lang id='payment.alert.paid' />
             </Alert>
           )}
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
index d09b34476f..d9088cf8ea 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
@@ -23,16 +23,16 @@ const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => (
   <tr>
     <th>
       <Paragraph
-        size='small'
-        spacing={false}
+        data-size='small'
+        data-spacing={false}
       >
         <Lang id={labelId} />
       </Paragraph>
     </th>
     <td>
       <Label
-        size='small'
-        spacing={false}
+        data-size='small'
+        data-spacing={false}
         asChild
       >
         <span>{value}</span>
@@ -138,32 +138,32 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
       <div className={classes.infoDetailsContainer}>
         {paymentInfo?.paymentDetails?.paymentId && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='small'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.payment_id' />: <b>{paymentInfo.paymentDetails.paymentId}</b>
           </Paragraph>
         )}
         {instanceId && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='small'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.altinn_ref' />: <b>{getInstanceReferenceNumber(instanceId)}</b>
           </Paragraph>
         )}
         {paymentInfo?.paymentDetails?.chargedDate && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='small'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.payment_date' />:{' '}
             <b>{formatDateLocale(selectedLanguage, new Date(paymentInfo?.paymentDetails?.chargedDate))}</b>
           </Paragraph>
         )}
         <Paragraph
-          size='small'
-          spacing={false}
+          data-size='small'
+          data-spacing={false}
         >
           <Lang id='payment.receipt.total_amount' />:{' '}
           <b>
diff --git a/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css b/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
deleted file mode 100644
index 8a7545eaaa..0000000000
--- a/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.titleContainer {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 5px 0 5px 0;
-}
-
-.skeletonWrapper {
-  width: 100%;
-}
diff --git a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx b/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
deleted file mode 100644
index 52e826d20c..0000000000
--- a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { Heading, Skeleton } from '@digdir/designsystemet-react';
-
-import classes from 'src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css';
-
-export const SkeletonLoader = () => (
-  <div className={classes.skeletonWrapper}>
-    <Skeleton.Rectangle
-      width='100%'
-      height='150px'
-    />
-    <div className={classes.titleContainer}>
-      <Skeleton.Circle
-        width='30px'
-        height='30px'
-      />
-      <Heading
-        asChild
-        size='medium'
-      >
-        <Skeleton.Text>En medium tittel</Skeleton.Text>
-      </Heading>
-    </div>
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='80%' />
-  </div>
-);
diff --git a/src/layout/Payment/SkeletonLoader/index.tsx b/src/layout/Payment/SkeletonLoader/index.tsx
deleted file mode 100644
index b4531f9669..0000000000
--- a/src/layout/Payment/SkeletonLoader/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { SkeletonLoader } from 'src/layout/Payment/SkeletonLoader/SkeletonLoader';
-export { SkeletonLoader };
diff --git a/src/layout/PersonLookup/PersonLookupComponent.tsx b/src/layout/PersonLookup/PersonLookupComponent.tsx
index 52720257d6..6fb3cacedf 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.tsx
+++ b/src/layout/PersonLookup/PersonLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ErrorMessage } from '@digdir/designsystemet-react';
+import { ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -248,12 +248,12 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
             )}
           </div>
           {data?.error && (
-            <ErrorMessage
-              size='sm'
+            <ValidationMessage
+              data-size='sm'
               className={classes.apiError}
             >
               <Lang id={data.error} />
-            </ErrorMessage>
+            </ValidationMessage>
           )}
         </div>
       </ComponentStructureWrapper>
diff --git a/src/layout/PersonLookup/PersonLookupSummary.tsx b/src/layout/PersonLookup/PersonLookupSummary.tsx
index cfb55bd358..5780dd5b6d 100644
--- a/src/layout/PersonLookup/PersonLookupSummary.tsx
+++ b/src/layout/PersonLookup/PersonLookupSummary.tsx
@@ -28,7 +28,7 @@ export function PersonLookupSummary({ componentNode }: PersonLookupSummaryProps)
   return (
     <div className={classes.personSummaryWrapper}>
       <Heading
-        size='sm'
+        data-size='sm'
         level={2}
       >
         <Lang
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.module.css b/src/layout/RadioButtons/ControlledRadioGroup.module.css
new file mode 100644
index 0000000000..68c3d39f5e
--- /dev/null
+++ b/src/layout/RadioButtons/ControlledRadioGroup.module.css
@@ -0,0 +1,5 @@
+.inlineRadioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-size-6);
+}
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 8da78caa9a..468cf50ea8 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -4,12 +4,14 @@ import { Fieldset } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/RadioButtons/ControlledRadioGroup.module.css';
 import { useRadioButtons } from 'src/layout/RadioButtons/radioButtonsUtils';
 import { shouldUseRowLayout } from 'src/utils/layout';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
@@ -71,36 +73,38 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
   return (
     <ComponentStructureWrapper node={node}>
       <div id={id}>
-        <Fieldset
-          inline={shouldDisplayHorizontally}
-          role='radiogroup'
-        >
+        <Fieldset role='radiogroup'>
           <Fieldset.Legend className={cn({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}>
             {labelText}
           </Fieldset.Legend>
           <Fieldset.Description>
             <Lang id={textResourceBindings?.description} />
           </Fieldset.Description>
-          {calculatedOptions.map((option) => (
-            <RadioButton
-              key={option.value}
-              value={option.value}
-              label={langAsString(option.label)}
-              description={option.description && <Lang id={option.description} />}
-              helpText={option.helpText && <Lang id={option.helpText} />}
-              name={id}
-              error={!isValid}
-              checked={option.value === selectedValues[0]}
-              showAsCard={showAsCard}
-              readOnly={readOnly}
-              onChange={handleChange}
-              hideLabel={hideLabel}
-              data-size='small'
-              alertOnChange={alertOnChange}
-              alertText={alertText}
-              confirmChangeText={confirmChangeText}
-            />
-          ))}
+          <ConditionalWrapper
+            condition={shouldDisplayHorizontally}
+            wrapper={(children) => <div className={classes.inlineRadioGroup}>{children}</div>}
+          >
+            {calculatedOptions.map((option) => (
+              <RadioButton
+                key={option.value}
+                value={option.value}
+                label={langAsString(option.label)}
+                description={option.description && <Lang id={option.description} />}
+                helpText={option.helpText && <Lang id={option.helpText} />}
+                name={id}
+                error={!isValid}
+                checked={option.value === selectedValues[0]}
+                showAsCard={showAsCard}
+                readOnly={readOnly}
+                onChange={handleChange}
+                hideLabel={hideLabel}
+                data-size='small'
+                alertOnChange={alertOnChange}
+                alertText={alertText}
+                confirmChangeText={confirmChangeText}
+              />
+            ))}
+          </ConditionalWrapper>
         </Fieldset>
       </div>
     </ComponentStructureWrapper>

From 36b0c63aa874ffe3d3178bd974d02bcab0d27628 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Feb 2025 16:11:00 +0100
Subject: [PATCH 004/170] ds update wip

---
 src/app-components/Pagination/Pagination.tsx  | 51 ++++++++++---------
 src/app-components/TextArea/TextArea.tsx      | 35 ++++++-------
 .../PDFGeneratorPreview.tsx                   | 29 +++++------
 src/components/atoms/AltinnAttachment.tsx     | 18 ++++---
 src/components/form/RadioButton.tsx           | 18 +++----
 .../organisms/AltinnAppHeaderMenu.tsx         | 15 +++---
 src/components/organisms/AltinnReceipt.tsx    |  4 +-
 .../organisms/AltinnReceiptSimple.tsx         |  2 +-
 src/components/presentation/Header.tsx        |  2 +-
 .../alertOnChange/DeleteWarningPopover.tsx    | 24 +++++----
 src/features/devtools/DevToolsControls.tsx    | 22 ++++----
 .../DevHiddenFunctionality.tsx                |  5 +-
 .../DevLanguageSelector.tsx                   |  6 +--
 .../DevNavigationButtons.tsx                  | 37 +++++++-------
 .../DownloadXMLButton/DownloadXMLButton.tsx   |  3 +-
 .../ExpressionPlayground.tsx                  | 17 ++++---
 .../FeatureToggles/FeatureToggles.tsx         | 14 ++---
 .../LayoutInspector/LayoutInspector.tsx       |  2 +-
 .../NodeInspector/NodeInspector.tsx           | 10 ++--
 .../PDFPreviewButton/PDFPreviewButton.tsx     | 26 +++++-----
 .../PermissionsEditor/PermissionsEditor.tsx   | 38 ++++++--------
 .../VersionSwitcher/VersionSwitcher.tsx       |  6 +--
 .../instantiate/containers/PartySelection.tsx |  2 +-
 .../selection/InstanceSelection.tsx           |  8 +--
 src/features/pdf/PdfView2.tsx                 |  2 +-
 .../validation/ComponentValidations.tsx       |  8 +--
 src/language/sharedLanguage.ts                | 12 ++---
 src/layout/Accordion/Accordion.tsx            | 20 ++++----
 src/layout/Accordion/AccordionItem.tsx        | 31 ++++-------
 .../SummaryAccordionGroupComponent.tsx        |  2 +-
 src/layout/AddToList/AddToList.tsx            | 41 ++++++++-------
 src/layout/Alert/AlertBaseComponent.tsx       |  2 +-
 src/layout/List/ListComponent.tsx             |  3 +-
 .../SimpleTable/SimpleTableComponent.tsx      |  4 +-
 yarn.lock                                     | 22 ++++----
 35 files changed, 265 insertions(+), 276 deletions(-)

diff --git a/src/app-components/Pagination/Pagination.tsx b/src/app-components/Pagination/Pagination.tsx
index 06a50e8f39..873aa7ff59 100644
--- a/src/app-components/Pagination/Pagination.tsx
+++ b/src/app-components/Pagination/Pagination.tsx
@@ -23,15 +23,10 @@ type PaginationProps = {
   rowsPerPageText: string;
   rowsPerPageOptions?: number[];
   onPageSizeChange?: (value: string[]) => void;
-  onChange: Parameters<typeof DesignSystemPagination>[0]['onChange'];
+  setCurrentPage: (pageNumber: number) => void;
+  onChange?: Parameters<typeof DesignSystemPagination>[0]['onChange'];
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
-const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
-};
-
 export const Pagination = ({
   nextLabel,
   nextLabelAriaLabel,
@@ -41,6 +36,7 @@ export const Pagination = ({
   compact,
   hideLabels,
   currentPage,
+  setCurrentPage,
   onChange,
   onPageSizeChange,
   numberOfRows = 0,
@@ -59,6 +55,7 @@ export const Pagination = ({
 
   const { pages, prevButtonProps, nextButtonProps, hasNext, hasPrev } = usePagination({
     currentPage: pageNumber,
+    setCurrentPage,
     totalPages,
     onChange,
   });
@@ -102,15 +99,17 @@ export const Pagination = ({
         className={classes.pagination}
       >
         <DesignSystemPagination.List>
-          <DesignSystemPagination.Item>
-            <DesignSystemPagination.Button
-              data-testid='paginationPreviousButton'
-              {...prevButtonProps}
-              aria-label={previousLabelAriaLabel}
-            >
-              {!hideLabels && !isMobile && previousLabel}
-            </DesignSystemPagination.Button>
-          </DesignSystemPagination.Item>
+          {hasPrev && (
+            <DesignSystemPagination.Item>
+              <DesignSystemPagination.Button
+                data-testid='paginationPreviousButton'
+                {...prevButtonProps}
+                aria-label={previousLabelAriaLabel}
+              >
+                {!hideLabels && !isMobile && previousLabel}
+              </DesignSystemPagination.Button>
+            </DesignSystemPagination.Item>
+          )}
           {pages.map((page, i, buttonProps) => (
             <DesignSystemPagination.Item key={`${page}${i}`}>
               {typeof page === 'number' && (
@@ -125,15 +124,17 @@ export const Pagination = ({
               )}
             </DesignSystemPagination.Item>
           ))}
-          <DesignSystemPagination.Item>
-            <DesignSystemPagination.Button
-              data-testid='paginationNextButton'
-              aria-label={nextLabelAriaLabel}
-              {...nextButtonProps}
-            >
-              {!hideLabels && !isMobile && nextLabel}
-            </DesignSystemPagination.Button>
-          </DesignSystemPagination.Item>
+          {hasNext && (
+            <DesignSystemPagination.Item>
+              <DesignSystemPagination.Button
+                data-testid='paginationNextButton'
+                aria-label={nextLabelAriaLabel}
+                {...nextButtonProps}
+              >
+                {!hideLabels && !isMobile && nextLabel}
+              </DesignSystemPagination.Button>
+            </DesignSystemPagination.Item>
+          )}
         </DesignSystemPagination.List>
       </DesignSystemPagination>
     </>
diff --git a/src/app-components/TextArea/TextArea.tsx b/src/app-components/TextArea/TextArea.tsx
index 4074cee620..14705b8114 100644
--- a/src/app-components/TextArea/TextArea.tsx
+++ b/src/app-components/TextArea/TextArea.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Textarea } from '@digdir/designsystemet-react';
-import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
+import { Field, Textarea } from '@digdir/designsystemet-react';
 
 export interface TextAreaWithLabelProps {
   id: string;
@@ -9,7 +8,7 @@ export interface TextAreaWithLabelProps {
   onChange: (value: string) => void;
   onBlur?: () => void;
   readOnly?: boolean;
-  characterLimit?: CharacterLimitProps | undefined;
+  characterLimit?: number;
   error?: boolean;
   dataTestId?: string;
   ariaDescribedBy?: string;
@@ -32,18 +31,20 @@ export const TextArea: React.FC<TextAreaWithLabelProps> = ({
   autoComplete,
   style,
 }) => (
-  <Textarea
-    id={id}
-    onChange={(e) => onChange(e.target.value)}
-    onBlur={onBlur}
-    readOnly={readOnly}
-    characterLimit={characterLimit}
-    error={error}
-    value={value}
-    data-testid={dataTestId}
-    aria-describedby={ariaDescribedBy}
-    aria-label={ariaLabel}
-    autoComplete={autoComplete}
-    style={style}
-  />
+  <Field>
+    <Textarea
+      id={id}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      readOnly={readOnly}
+      error={error}
+      value={value}
+      data-testid={dataTestId}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      autoComplete={autoComplete}
+      style={style}
+    />
+    {characterLimit && <Field.Counter limit={characterLimit} />}
+  </Field>
 );
diff --git a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
index a93d72adde..2d32d7b317 100644
--- a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
+++ b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { Modal, Spinner } from '@digdir/designsystemet-react';
+import { Heading, Modal, Spinner } from '@digdir/designsystemet-react';
 import { FilePdfIcon } from '@navikt/aksel-icons';
 
 import { Button } from 'src/app-components/Button/Button';
 import classes from 'src/features/devtools/components/PDFPreviewButton/PDFPreview.module.css';
 import { useLaxInstance } from 'src/features/instance/InstanceContext';
 import { useTaskTypeFromBackend } from 'src/features/instance/ProcessContext';
-import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { ProcessTaskType } from 'src/types';
@@ -81,7 +80,7 @@ export function PDFGeneratorPreview({
       <Modal
         ref={modalRef}
         onClose={() => abortRef.current?.abort()}
-        onInteractOutside={() => modalRef.current?.close()}
+        backdropClose={true}
         className={classes.modal}
       >
         {blobUrl ? (
@@ -92,24 +91,20 @@ export function PDFGeneratorPreview({
           />
         ) : errorText ? (
           <div style={{ textAlign: 'center' }}>
-            <Modal.Header>
-              <Lang id='pdfPreview.error' />
-            </Modal.Header>
-            <Modal.Content>
-              {showErrorDetails &&
-                errorText.split('\n').map((line) => (
-                  <React.Fragment key={line}>
-                    {line}
-                    <br />
-                  </React.Fragment>
-                ))}
-            </Modal.Content>
+            <Heading id='pdfPreview.error' />
+            {showErrorDetails &&
+              errorText.split('\n').map((line) => (
+                <React.Fragment key={line}>
+                  {line}
+                  <br />
+                </React.Fragment>
+              ))}
           </div>
         ) : (
           <div className={classes.loading}>
             <Spinner
-              title={langAsString('general.loading')}
-              size='xlarge'
+              aria-label={langAsString('general.loading')}
+              data-size='xlarge'
             />
           </div>
         )}
diff --git a/src/components/atoms/AltinnAttachment.tsx b/src/components/atoms/AltinnAttachment.tsx
index 52856cb41b..44f6ae426c 100644
--- a/src/components/atoms/AltinnAttachment.tsx
+++ b/src/components/atoms/AltinnAttachment.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Link, List } from '@digdir/designsystemet-react';
+import { Heading, Link, List } from '@digdir/designsystemet-react';
 
 import classes from 'src/components/atoms/AltinnAttachment.module.css';
 import { Lang } from 'src/features/language/Lang';
@@ -24,16 +24,22 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
     ?.filter((attachment) => attachment.name)
     .sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name, selectedLanguage, { numeric: true }) : 0));
   return (
-    <List.Root
+    <div
       id={id}
       data-testid='attachment-list'
     >
       {title && (
-        <List.Heading>
+        <Heading
+          level={2}
+          data-size='xs'
+        >
           <Lang id={title} />
-        </List.Heading>
+        </Heading>
       )}
-      <List.Unordered className={classes.attachmentList}>
+      <List.Unordered
+        className={classes.attachmentList}
+        data-size='sm'
+      >
         {filteredAndSortedAttachments?.map((attachment, index) => (
           <List.Item key={index}>
             <Link
@@ -51,6 +57,6 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
           </List.Item>
         ))}
       </List.Unordered>
-    </List.Root>
+    </div>
   );
 }
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index 5e76187b6d..b095d388d6 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -44,18 +44,18 @@ export const RadioButton = ({
   const radioButton = (
     <Radio
       {...rest}
-      label={label}
+      label={
+        label && (
+          <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
+            {label}
+            {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
+          </div>
+        )
+      }
       className={cn(classes.radioButton, className)}
       onChange={handleChange}
       ref={showAsCard ? inputRef : undefined}
-    >
-      {label && (
-        <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
-          {label}
-          {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
-        </div>
-      )}
-    </Radio>
+    />
   );
   const cardElement = (
     /** This element is only clickable for visual
diff --git a/src/components/organisms/AltinnAppHeaderMenu.tsx b/src/components/organisms/AltinnAppHeaderMenu.tsx
index dcc684e33c..727b999107 100644
--- a/src/components/organisms/AltinnAppHeaderMenu.tsx
+++ b/src/components/organisms/AltinnAppHeaderMenu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Popover } from '@digdir/designsystemet-react';
+import { Popover, PopoverTriggerContext } from '@digdir/designsystemet-react';
 import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons';
 
 import { CircleIcon } from 'src/components/CircleIcon';
@@ -23,9 +23,9 @@ export function AltinnAppHeaderMenu({ party, logoColor }: IAltinnAppHeaderMenuPr
   }
 
   return (
-    <Popover placement='bottom'>
+    <PopoverTriggerContext>
       <Popover.Trigger
-        size='sm'
+        data-size='sm'
         variant='tertiary'
         style={{ padding: 0 }}
         aria-label={langAsString('general.header_profile_icon_label')}
@@ -47,14 +47,17 @@ export function AltinnAppHeaderMenu({ party, logoColor }: IAltinnAppHeaderMenuPr
           )}
         </CircleIcon>
       </Popover.Trigger>
-      <Popover.Content className={classes.popoverContent}>
+      <Popover
+        placement='bottom'
+        className={classes.popoverContent}
+      >
         <a
           className='altinnLink'
           href={logoutUrlAltinn(window.location.origin)}
         >
           <Lang id='general.log_out' />
         </a>
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </PopoverTriggerContext>
   );
 }
diff --git a/src/components/organisms/AltinnReceipt.tsx b/src/components/organisms/AltinnReceipt.tsx
index d527b3eceb..c140073f84 100644
--- a/src/components/organisms/AltinnReceipt.tsx
+++ b/src/components/organisms/AltinnReceipt.tsx
@@ -129,7 +129,7 @@ export function ReceiptComponent({
     >
       <Heading
         level={2}
-        size='medium'
+        data-size='medium'
       >
         {title}
       </Heading>
@@ -156,7 +156,7 @@ export function ReceiptComponent({
           {titleSubmitted && (
             <Heading
               level={3}
-              size='small'
+              data-size='small'
               style={{
                 paddingTop: '2.562rem',
                 paddingBottom: '0.3125rem',
diff --git a/src/components/organisms/AltinnReceiptSimple.tsx b/src/components/organisms/AltinnReceiptSimple.tsx
index 5153679267..f16fa6ec4f 100644
--- a/src/components/organisms/AltinnReceiptSimple.tsx
+++ b/src/components/organisms/AltinnReceiptSimple.tsx
@@ -15,7 +15,7 @@ export function ReceiptComponentSimple({ title, body }: IReceiptComponentProps)
     <div className={classes.wordBreak}>
       <Heading
         level={2}
-        size='medium'
+        data-size='medium'
       >
         {title}
       </Heading>
diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
index 27ce9d39a1..439876d1e5 100644
--- a/src/components/presentation/Header.tsx
+++ b/src/components/presentation/Header.tsx
@@ -33,7 +33,7 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
         <Flex item>
           <Heading
             level={1}
-            size='medium'
+            data-size='medium'
             data-testid='presentation-heading'
           >
             {header}
diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index 3ef5461ee2..fefc5b64ed 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -28,14 +28,18 @@ export function DeleteWarningPopover({
   setOpen,
 }: IDeleteWarningPopover) {
   return (
-    <Popover
-      variant='warning'
-      placement={placement}
-      open={open}
-      onOpenChange={() => setOpen(!open)}
-    >
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content>
+    <Popover.TriggerContext>
+      <Popover.Trigger
+        asChild
+        onClick={() => setOpen(!open)}
+      >
+        {children}
+      </Popover.Trigger>
+      <Popover
+        open={open}
+        placement={placement}
+        data-color='warning'
+      >
         <div>{messageText}</div>
         <div className={classes.popoverButtonContainer}>
           <Button
@@ -52,7 +56,7 @@ export function DeleteWarningPopover({
             <Lang id='general.cancel' />
           </Button>
         </div>
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.TriggerContext>
   );
 }
diff --git a/src/features/devtools/DevToolsControls.tsx b/src/features/devtools/DevToolsControls.tsx
index 1949884dc8..2be02c03bd 100644
--- a/src/features/devtools/DevToolsControls.tsx
+++ b/src/features/devtools/DevToolsControls.tsx
@@ -30,7 +30,7 @@ export const DevToolsControls = () => {
   return (
     <Tabs
       className={classes.tabs}
-      size='small'
+      data-size='small'
       value={activeTab}
       onChange={setActiveTab}
     >
@@ -52,7 +52,7 @@ export const DevToolsControls = () => {
         {isInForm && <Tabs.Tab value={DevToolsTab.Expressions}>{DevToolsTab.Expressions}</Tabs.Tab>}
         {/* <Tabs.Tab value={DevToolsTab.FeatureToggles}>{DevToolsTab.FeatureToggles}</Tabs.Tab> */}
       </Tabs.List>
-      <Tabs.Content value={DevToolsTab.General}>
+      <Tabs.Panel value={DevToolsTab.General}>
         <div className={classes.page}>
           <PDFPreviewButton />
           <DevNavigationButtons />
@@ -63,24 +63,24 @@ export const DevToolsControls = () => {
           <DownloadXMLButton />
           <ReactQueryDevtools initialIsOpen={false} />
         </div>
-      </Tabs.Content>
-      <Tabs.Content value={DevToolsTab.Logs}>
+      </Tabs.Panel>
+      <Tabs.Panel value={DevToolsTab.Logs}>
         <DevToolsLogs />
-      </Tabs.Content>
+      </Tabs.Panel>
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Layout}>
+        <Tabs.Panel value={DevToolsTab.Layout}>
           <LayoutInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Components}>
+        <Tabs.Panel value={DevToolsTab.Components}>
           <NodeInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Expressions}>
+        <Tabs.Panel value={DevToolsTab.Expressions}>
           <ExpressionPlayground />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {
         // <Tabs.Content value={DevToolsTab.FeatureToggles}>
diff --git a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
index 7afd9c10e3..aa17f4b5e4 100644
--- a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
+++ b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
@@ -26,11 +26,12 @@ function InnerDevHiddenFunctionality() {
   const setShowHiddenComponents = useDevToolsStore((state) => state.actions.setShowHiddenComponents);
 
   return (
-    <Fieldset legend='Skjulte komponenter'>
+    <Fieldset>
+      <Fieldset.Legend>Skjulte komponenter</Fieldset.Legend>
       <MarkHiddenComponents />
       <div>
         <ToggleGroup
-          size='small'
+          data-size='small'
           onChange={(selectedValue) => setShowHiddenComponents(selectedValue as IDevToolsState['hiddenComponents'])}
           value={state}
         >
diff --git a/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx b/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
index a06f9cf595..c017aaa19d 100644
--- a/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
+++ b/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
@@ -5,10 +5,8 @@ import { Fieldset } from '@digdir/designsystemet-react';
 import { LanguageSelector } from 'src/components/presentation/LanguageSelector';
 
 export const DevLanguageSelector = () => (
-  <Fieldset
-    legend='Språk'
-    style={{ width: 250 }}
-  >
+  <Fieldset style={{ width: 250 }}>
+    <Fieldset.Legend>Språk</Fieldset.Legend>
     <LanguageSelector hideLabel={true} />
   </Fieldset>
 );
diff --git a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
index 266c4e0bab..049cf5899a 100644
--- a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
+++ b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
@@ -72,26 +72,25 @@ const InnerDevNavigationButtons = () => {
   const compactView = allPages.length > 8;
 
   return (
-    <Fieldset legend='Navigasjon'>
+    <Fieldset
+      data-size='small'
+      className={classes.chipGroup}
+    >
+      <Fieldset.Legend>Navigasjon</Fieldset.Legend>
       <div className={compactView ? classes.hidden : classes.responsiveButtons}>
-        <Chip.Group
-          size='small'
-          className={classes.chipGroup}
-        >
-          {orderedPages.map((page) => (
-            <Chip.Toggle
-              key={page}
-              className={isHidden(page) ? classes.hiddenPage : undefined}
-              title={hiddenText(page)}
-              // TODO(DevTools): Navigate to hidden pages is not working
-              disabled={isHidden(page)}
-              onClick={() => handleChange([page])}
-              selected={pageKey == page}
-            >
-              {page}
-            </Chip.Toggle>
-          ))}
-        </Chip.Group>
+        {orderedPages.map((page) => (
+          <Chip.Radio
+            key={page}
+            className={isHidden(page) ? classes.hiddenPage : undefined}
+            title={hiddenText(page)}
+            // TODO(DevTools): Navigate to hidden pages is not working
+            disabled={isHidden(page)}
+            onClick={() => handleChange([page])}
+            checked={pageKey == page}
+          >
+            {page}
+          </Chip.Radio>
+        ))}
       </div>
       <div className={cn(classes.dropdown, { [classes.responsiveDropdown]: !compactView })}>
         <Combobox
diff --git a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
index a26eda7911..4fc34191e0 100644
--- a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
+++ b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
@@ -70,7 +70,8 @@ const InnerDownloadXMLButton = () => {
     }
   };
   return (
-    <Fieldset legend='Skjemadata'>
+    <Fieldset>
+      <Fieldset.Legend>Skejmadata</Fieldset.Legend>
       {writableDataTypes?.length > 1 && (
         <Combobox
           size='sm'
diff --git a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
index 5994414482..4673b74a08 100644
--- a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
+++ b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
@@ -186,7 +186,7 @@ export const ExpressionPlayground = () => {
           {outputs.length > 1 && (
             <div className={classes.outputs}>
               <Tabs
-                size='small'
+                data-size='small'
                 value={activeOutputTab}
                 onChange={(outputName) => {
                   setActiveOutputTab(outputName);
@@ -208,7 +208,7 @@ export const ExpressionPlayground = () => {
                 {outputs.map((output, i) => {
                   const { key, value } = getTabKeyAndValue(i, output);
                   return (
-                    <Tabs.Content
+                    <Tabs.Panel
                       value={value}
                       key={key}
                     >
@@ -219,7 +219,7 @@ export const ExpressionPlayground = () => {
                         value={output.value}
                         placeholder='Resultatet av uttrykket vises her'
                       />
-                    </Tabs.Content>
+                    </Tabs.Panel>
                   );
                 })}
               </Tabs>
@@ -227,7 +227,8 @@ export const ExpressionPlayground = () => {
           )}
         </SplitView>
         <div className={classes.rightColumn}>
-          <Fieldset legend='Kjør uttrykk i kontekst av komponent'>
+          <Fieldset>
+            <Fieldset.Legend>Kjør uttrykk i kontekst av komponent</Fieldset.Legend>
             <Combobox
               size='sm'
               value={selectedContext}
@@ -276,14 +277,14 @@ export const ExpressionPlayground = () => {
                   setShowAllSteps(ev.target.checked);
                 }}
                 value='nothing'
-              >
-                Vis alle steg i evalueringen
-              </Checkbox>
+                label='Vis alle steg i evalueringen'
+              />
             </div>
           </Fieldset>
           <br />
           <br />
-          <Fieldset legend='Dokumentasjon'>
+          <Fieldset>
+            <Fieldset.Legend>Dokumentasjon</Fieldset.Legend>
             Les mer om uttrykk{' '}
             <a
               href='https://docs.altinn.studio/nb/app/development/logic/expressions/'
diff --git a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
index 67a75cbcfb..87ce733e32 100644
--- a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
+++ b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
@@ -53,27 +53,27 @@ export function FeatureToggles() {
                   id={`${key}-checkbox`}
                   onChange={(ev) => setFeature(key, ev.target.checked)}
                   value='nothing'
+                  aria-labelledby={`${key}-content`}
                 />
               </div>
               <label
-                key={`${key}-content`}
-                htmlFor={`${key}-checkbox`}
+                id={`${key}-content`}
                 className={classes.itemContent}
               >
                 <Heading
-                  spacing={true}
-                  size='small'
+                  data-spacing={true}
+                  data-size='small'
                   level={4}
                 >
                   {parseAndCleanText(title)}
                 </Heading>
-                <Label size='xsmall'>Nøkkel: {key}</Label>
+                <Label data-size='xsmall'>Nøkkel: {key}</Label>
                 <br />
-                <Label size='xsmall'>
+                <Label data-size='xsmall'>
                   Verdi: {JSON.stringify(value)} / Standardverdi: {JSON.stringify(defaultValue)}
                 </Label>
                 <br />
-                <Label size='xsmall'>Kilde: {sourceMap[source]}</Label>
+                <Label data-size='xsmall'>Kilde: {sourceMap[source]}</Label>
                 <Paragraph>
                   {parseAndCleanText(description)}
                   {links && links.length && (
diff --git a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
index 980b39b4aa..0330bcf95c 100644
--- a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
+++ b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
@@ -128,7 +128,7 @@ export const LayoutInspector = () => {
             {validationErrorsForPage[selectedComponent] && validationErrorsForPage[selectedComponent].length > 0 && (
               <Alert
                 className={classes.errorAlert}
-                severity='warning'
+                data-color='warning'
               >
                 <div className={classes.errorList}>
                   <ul>
diff --git a/src/features/devtools/components/NodeInspector/NodeInspector.tsx b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
index 5c1ecb621f..4584ed1bb7 100644
--- a/src/features/devtools/components/NodeInspector/NodeInspector.tsx
+++ b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
@@ -61,7 +61,7 @@ export const NodeInspector = () => {
             }}
           >
             <Tabs
-              size='small'
+              data-size='small'
               defaultValue='properties'
               className={reusedClasses.tabs}
             >
@@ -69,7 +69,7 @@ export const NodeInspector = () => {
                 <Tabs.Tab value='properties'>Egenskaper</Tabs.Tab>
                 {implementsAnyValidation(selectedNode.def) && <Tabs.Tab value='validation'>Validering</Tabs.Tab>}
               </Tabs.List>
-              <Tabs.Content value='properties'>
+              <Tabs.Panel value='properties'>
                 <div className={reusedClasses.properties}>
                   <div className={reusedClasses.headerLink}>
                     <a
@@ -85,12 +85,12 @@ export const NodeInspector = () => {
                   {/*  eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                   {selectedNode.def.renderDevToolsInspector(selectedNode as any)}
                 </div>
-              </Tabs.Content>
-              <Tabs.Content value='validation'>
+              </Tabs.Panel>
+              <Tabs.Panel value='validation'>
                 <div className={reusedClasses.scrollable}>
                   <ValidationInspector node={selectedNode} />
                 </div>
-              </Tabs.Content>
+              </Tabs.Panel>
             </Tabs>
           </NodeInspectorContextProvider>
         </>
diff --git a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
index d4bf664947..74ae8481a6 100644
--- a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
+++ b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
@@ -16,19 +16,19 @@ export const PDFPreviewButton = () => {
   const setPdfPreview = useDevToolsStore((state) => state.actions.setPdfPreview);
 
   return (
-    <Fieldset
-      legend='Forhåndsvis PDF'
-      description={
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        !(window as any).chrome ? (
-          <span>
-            Vær oppmerksom på at <code>Forhåndsvis PDF</code> ikke vil se riktig ut i andre nettlesere enn Google
-            Chrome.
-          </span>
-        ) : undefined
-      }
-      className={classes.fieldset}
-    >
+    <Fieldset className={classes.fieldset}>
+      <Fieldset.Legend>Forhåndsvis PDF</Fieldset.Legend>
+      <Fieldset.Description>
+        {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          !(window as any).chrome ? (
+            <span>
+              Vær oppmerksom på at <code>Forhåndsvis PDF</code> ikke vil se riktig ut i andre nettlesere enn Google
+              Chrome.
+            </span>
+          ) : undefined
+        }
+      </Fieldset.Description>
       <Button
         onClick={() => setPdfPreview(true)}
         disabled={taskType !== ProcessTaskType.Data}
diff --git a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
index fe7e59b62c..3239482d20 100644
--- a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
+++ b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from '@digdir/designsystemet-react';
+import { Checkbox, Fieldset } from '@digdir/designsystemet-react';
 
 import classes from 'src/features/devtools/components/PermissionsEditor/PermissionsEditor.module.css';
 import { useLaxInstanceId } from 'src/features/instance/InstanceContext';
@@ -25,12 +25,10 @@ export const PermissionsEditor = () => {
   }
 
   return (
-    <Checkbox.Group
-      legend='Policy'
-      className={classes.checkboxWrapper}
-    >
+    <Fieldset className={classes.checkboxWrapper}>
+      <Fieldset.Legend>Policy</Fieldset.Legend>
       <Checkbox
-        size='small'
+        data-size='small'
         checked={Boolean(write)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -39,11 +37,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Write
-      </Checkbox>
+        label='Write'
+      />
       <Checkbox
-        size='small'
+        data-size='small'
         checked={Boolean(actions?.confirm)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -52,11 +49,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Confirm
-      </Checkbox>
+        label='Confirm'
+      />
       <Checkbox
-        size='small'
+        data-size='small'
         checked={Boolean(actions?.sign)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -65,11 +61,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Sign
-      </Checkbox>
+        label='Sign'
+      />
       <Checkbox
-        size='small'
+        data-size='small'
         checked={Boolean(actions?.reject)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -78,9 +73,8 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Reject
-      </Checkbox>
-    </Checkbox.Group>
+        label='Reject'
+      />
+    </Fieldset>
   );
 };
diff --git a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
index 68d7b23ade..f5b6a498c0 100644
--- a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
+++ b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
@@ -55,10 +55,8 @@ export const VersionSwitcher = () => {
   }
 
   return (
-    <Fieldset
-      legend='Frontend versjon'
-      style={{ width: 250 }}
-    >
+    <Fieldset style={{ width: 250 }}>
+      <Fieldset.Legend>Frontend versjon</Fieldset.Legend>
       <Combobox
         size='sm'
         value={selectedVersion ? [selectedVersion] : []}
diff --git a/src/features/instantiate/containers/PartySelection.tsx b/src/features/instantiate/containers/PartySelection.tsx
index a47c436f12..faf683a0e1 100644
--- a/src/features/instantiate/containers/PartySelection.tsx
+++ b/src/features/instantiate/containers/PartySelection.tsx
@@ -271,7 +271,7 @@ export const PartySelection = () => {
           <Flex style={{ padding: 12 }}>
             <Heading
               level={2}
-              size='medium'
+              data-size='medium'
               style={{ fontSize: '1.5rem', fontWeight: '500', marginBottom: 12 }}
             >
               <Lang id='party_selection.why_seeing_this' />
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index fc464263e5..7b3e46a957 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -93,7 +93,7 @@ function InstanceSelection() {
   const renderMobileTable = () => (
     <>
       <Heading
-        size='xsmall'
+        data-size='xsmall'
         level={3}
         className={classes.leftOffHeading}
       >
@@ -159,7 +159,7 @@ function InstanceSelection() {
                     showRowsPerPageDropdown={true}
                     rowsPerPageOptions={rowsPerPageOptions}
                     onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    onChange={setCurrentPage}
+                    setCurrentPage={setCurrentPage}
                   />
                 </div>
               </Table.Cell>
@@ -232,7 +232,7 @@ function InstanceSelection() {
                     pageSize={rowsPerPage}
                     rowsPerPageOptions={rowsPerPageOptions}
                     onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    onChange={setCurrentPage}
+                    setCurrentPage={setCurrentPage}
                   />
                 </div>
               </Table.Cell>
@@ -253,7 +253,7 @@ function InstanceSelection() {
         <div>
           <Heading
             level={2}
-            size='medium'
+            data-size='medium'
             id='instance-selection-header'
           >
             <Lang id='instance_selection.header' />
diff --git a/src/features/pdf/PdfView2.tsx b/src/features/pdf/PdfView2.tsx
index 106623f860..6e7d98fe1e 100644
--- a/src/features/pdf/PdfView2.tsx
+++ b/src/features/pdf/PdfView2.tsx
@@ -178,7 +178,7 @@ function PdfWrapping({ children }: PropsWithChildren) {
       >
         <Heading
           level={1}
-          size='lg'
+          data-size='lg'
         >
           {isPayment ? `${appName} - ${langAsString('payment.receipt.title')}` : appName}
         </Heading>
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index 908a299df6..cc3b0706ae 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert as AlertDesignSystem, ErrorMessage } from '@digdir/designsystemet-react';
+import { Alert as AlertDesignSystem, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
@@ -99,13 +99,13 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
     <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
-          <ErrorMessage size='small'>
+          <ValidationMessage data-size='small'>
             <Lang
               id={validation.message.key}
               params={validation.message.params}
               node={node}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         </li>
       ))}
     </ul>
@@ -127,7 +127,7 @@ function SoftValidations({
     <div style={{ paddingTop: 'var(--fds-spacing-2)' }}>
       <AlertDesignSystem
         style={{ breakInside: 'avoid' }}
-        severity={severity}
+        data-color={severity}
       >
         <ul style={{ paddingLeft: 0, listStyleType: 'none' }}>
           {validations.map((validation) => (
diff --git a/src/language/sharedLanguage.ts b/src/language/sharedLanguage.ts
index 2ccd77fccf..da4a522b36 100644
--- a/src/language/sharedLanguage.ts
+++ b/src/language/sharedLanguage.ts
@@ -88,42 +88,42 @@ const parserOptions: HTMLReactParserOptions = {
     if (isElement(domNode) && domNode.name === 'h1') {
       return React.createElement(
         Heading,
-        { level: 1, size: 'large' },
+        { level: 1, 'data-size': 'large' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h2') {
       return React.createElement(
         Heading,
-        { level: 2, size: 'medium' },
+        { level: 2, 'data-size': 'medium' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h3') {
       return React.createElement(
         Heading,
-        { level: 3, size: 'small' },
+        { level: 3, 'data-size': 'small' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h4') {
       return React.createElement(
         Heading,
-        { level: 4, size: 'xsmall' },
+        { level: 4, 'data-size': 'xsmall' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h5') {
       return React.createElement(
         Heading,
-        { level: 5, size: 'xsmall' },
+        { level: 5, 'data-size': 'xsmall' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h6') {
       return React.createElement(
         Heading,
-        { level: 6, size: 'xsmall' },
+        { level: 6, 'data-size': 'xsmall' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
diff --git a/src/layout/Accordion/Accordion.tsx b/src/layout/Accordion/Accordion.tsx
index 7dab247cb0..c592394cbf 100644
--- a/src/layout/Accordion/Accordion.tsx
+++ b/src/layout/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Card, Details } from '@digdir/designsystemet-react';
 
 import { Flex } from 'src/app-components/Flex/Flex';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -15,7 +15,7 @@ import type { PropsFromGenericComponent } from 'src/layout';
 type IAccordionProps = PropsFromGenericComponent<'Accordion'>;
 
 export const Accordion = ({ node }: IAccordionProps) => {
-  const { textResourceBindings, headingLevel, childComponents, openByDefault } = useNodeItem(node);
+  const { textResourceBindings, childComponents, openByDefault } = useNodeItem(node);
   const { langAsString } = useLanguage();
   const renderAsAccordionItem = useIsInAccordionGroup();
 
@@ -25,7 +25,6 @@ export const Accordion = ({ node }: IAccordionProps) => {
     <AltinnAcordionItem
       title={title}
       className={className}
-      headingLevel={headingLevel}
       open={openByDefault}
     >
       <Flex
@@ -49,13 +48,14 @@ export const Accordion = ({ node }: IAccordionProps) => {
       {renderAsAccordionItem ? (
         <AccordionItem className={classes.container} />
       ) : (
-        <DesignSystemAccordion
-          color='subtle'
-          border
-          className={classes.container}
-        >
-          <AccordionItem />
-        </DesignSystemAccordion>
+        <Card>
+          <Details
+            data-color='subtle'
+            className={classes.container}
+          >
+            <AccordionItem />
+          </Details>
+        </Card>
       )}
     </ComponentStructureWrapper>
   );
diff --git a/src/layout/Accordion/AccordionItem.tsx b/src/layout/Accordion/AccordionItem.tsx
index f39b610d42..1b1bb75f04 100644
--- a/src/layout/Accordion/AccordionItem.tsx
+++ b/src/layout/Accordion/AccordionItem.tsx
@@ -1,44 +1,31 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Details } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import classes from 'src/layout/Accordion/Accordion.module.css';
 import type { ExprVal, ExprValToActualOrExpr } from 'src/features/expressions/types';
-import type { HeadingLevel } from 'src/layout/common.generated';
 
 interface AccordionBaseComponentProps {
   title: string;
   children: React.ReactNode;
   className?: string;
-  headingLevel?: HeadingLevel;
   open?: ExprValToActualOrExpr<ExprVal.Boolean>;
 }
 
-export const AccordionItem = ({
-  title,
-  children,
-  className,
-  headingLevel = 2,
-  open,
-}: AccordionBaseComponentProps): React.JSX.Element => {
+export const AccordionItem = ({ title, children, className, open }: AccordionBaseComponentProps): React.JSX.Element => {
   const [isOpen, setOpen] = React.useState(open);
 
-  const handleHeaderClick = () => {
-    setOpen(!isOpen);
-  };
   return (
-    <DesignSystemAccordion.Item
+    <Details
       open={isOpen as boolean}
+      onToggle={() => {
+        setOpen(!isOpen);
+      }}
       className={cn(className, classes.accordion)}
     >
-      <DesignSystemAccordion.Header
-        level={headingLevel}
-        onHeaderClick={handleHeaderClick}
-      >
-        {title}
-      </DesignSystemAccordion.Header>
-      <DesignSystemAccordion.Content>{children}</DesignSystemAccordion.Content>
-    </DesignSystemAccordion.Item>
+      <Details.Summary>{title}</Details.Summary>
+      <Details.Content>{children}</Details.Content>
+    </Details>
   );
 };
diff --git a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
index dba82b6ab4..feff1e6bb3 100644
--- a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
+++ b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Details as DesignSystemAccordion } from '@digdir/designsystemet-react';
 
 import { SummaryAccordionComponent } from 'src/layout/Accordion/SummaryAccordion';
 import { useNode } from 'src/utils/layout/NodesContext';
diff --git a/src/layout/AddToList/AddToList.tsx b/src/layout/AddToList/AddToList.tsx
index a221cc87b6..3c893ef0df 100644
--- a/src/layout/AddToList/AddToList.tsx
+++ b/src/layout/AddToList/AddToList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import type { MonthCaption } from 'react-day-picker';
 
-import { Button, Modal, ModalContent, ModalFooter, ModalHeader } from '@digdir/designsystemet-react';
+import { Button, Modal } from '@digdir/designsystemet-react';
 import { v4 as uuidv4 } from 'uuid';
 import type { JSONSchema7 } from 'json-schema';
 
@@ -40,7 +40,9 @@ interface ModalDynamicFormProps {
   onChange: (data: FormDataObject) => void;
   initialData?: FormDataObject; // Added to receive existing item
   locale?: string;
-  onInteractOutside?: () => void;
+  backdropClose?: boolean;
+  onClose?: () => void;
+  modalRef?: React.RefObject<HTMLDialogElement>;
   DropdownCaption: typeof MonthCaption;
 }
 
@@ -48,11 +50,14 @@ export function AddToListModal({
   onChange,
   initialData,
   dataModelReference,
-  onInteractOutside,
+  backdropClose,
+  onClose,
+  modalRef,
   DropdownCaption,
 }: ModalDynamicFormProps) {
   const appendToList = FD.useAppendToList();
-  const modalRef = useRef<HTMLDialogElement>(null);
+  let addToListModalRef = useRef<HTMLDialogElement>(null);
+  addToListModalRef = modalRef ?? addToListModalRef;
 
   const { schemaLookup } = DataModels.useFullStateRef().current;
 
@@ -63,7 +68,6 @@ export function AddToListModal({
   const { langAsString } = useLanguage();
 
   useEffect(() => {
-    modalRef.current?.showModal();
     if (!initialData) {
       const uuid = uuidv4();
       appendToList({
@@ -85,13 +89,12 @@ export function AddToListModal({
   }
   return (
     <Modal
-      ref={modalRef}
+      ref={addToListModalRef}
       style={{ padding: 'var(--fds-spacing-3)' }}
-      onInteractOutside={onInteractOutside}
-      onClose={onInteractOutside}
+      backdropClose={backdropClose}
+      onClose={onClose}
     >
-      <ModalHeader />
-      <ModalContent>
+      <Modal.Block>
         <DynamicForm
           schema={schema?.items}
           onChange={onFormDataUpdate}
@@ -100,10 +103,10 @@ export function AddToListModal({
           buttonAriaLabel={langAsString('date_picker.aria_label_icon')}
           calendarIconTitle={langAsString('date_picker.aria_label_icon')}
         />
-      </ModalContent>
-      <ModalFooter>
+      </Modal.Block>
+      <Modal.Block>
         <Button
-          size='md'
+          data-size='md'
           variant='primary'
           onClick={() => {
             if (tempFormData) {
@@ -113,7 +116,7 @@ export function AddToListModal({
         >
           Lagre
         </Button>
-      </ModalFooter>
+      </Modal.Block>
     </Modal>
   );
 }
@@ -124,6 +127,7 @@ export function AddToListComponent({ node }: AddToListProps) {
   const { formData } = useDataModelBindings(item.dataModelBindings, 1, 'raw');
   const setMultiLeafValues = FD.useSetMultiLeafValues();
 
+  const modalRef = useRef<HTMLDialogElement>(null);
   const [showForm, setShowForm] = useState(false);
 
   return (
@@ -131,6 +135,7 @@ export function AddToListComponent({ node }: AddToListProps) {
       {showForm && (
         <AddToListModal
           dataModelReference={item.dataModelBindings.data}
+          modalRef={modalRef}
           onChange={(formProps) => {
             const changes = Object.entries(formProps).map((entry) => ({
               reference: {
@@ -142,17 +147,15 @@ export function AddToListComponent({ node }: AddToListProps) {
             setMultiLeafValues({ changes });
             setShowForm(false);
           }}
-          onInteractOutside={() => {
-            setShowForm(false);
-          }}
+          backdropClose={true}
           DropdownCaption={DropdownCaption}
         />
       )}
 
       <Button
-        size='md'
+        data-size='md'
         variant='primary'
-        onClick={() => setShowForm(true)} // Call onChange when button is clicked
+        onClick={() => modalRef.current?.showModal()} // Call onChange when button is clicked
       >
         Legg til
       </Button>
diff --git a/src/layout/Alert/AlertBaseComponent.tsx b/src/layout/Alert/AlertBaseComponent.tsx
index d353f31830..510abe0f91 100644
--- a/src/layout/Alert/AlertBaseComponent.tsx
+++ b/src/layout/Alert/AlertBaseComponent.tsx
@@ -23,7 +23,7 @@ export type AlertBaseComponentProps = {
 export const AlertBaseComponent = ({ title, children, useAsAlert, severity, ariaLabel }: AlertBaseComponentProps) => (
   <AlertDesignSystem
     className={styles.container}
-    severity={severity}
+    data-color={severity}
     role={useAsAlert ? 'alert' : undefined}
     aria-live={useAsAlert ? calculateAriaLive(severity) : undefined}
     aria-label={useAsAlert ? (ariaLabel ?? title) : undefined}
diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 666b9d06a1..72a19b3911 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -102,7 +102,6 @@ export const ListComponent = ({ node }: IListProps) => {
               <Lang id={description} />
             </Fieldset.Description>
           )}
-
           {data?.listItems.map((row) => (
             <Radio
               key={JSON.stringify(row)}
@@ -256,7 +255,7 @@ function Pagination({
         currentPage={currentPage}
         numberOfRows={numberOfRows}
         pageSize={pageSize}
-        onChange={() => setCurrentPage}
+        setCurrentPage={setCurrentPage}
         showRowsPerPageDropdown
         onPageSizeChange={(value) => handlePageSizeChange(+value)}
         rowsPerPageOptions={rowsPerPageOptions}
diff --git a/src/layout/SimpleTable/SimpleTableComponent.tsx b/src/layout/SimpleTable/SimpleTableComponent.tsx
index dc3933796b..ae118e8a8d 100644
--- a/src/layout/SimpleTable/SimpleTableComponent.tsx
+++ b/src/layout/SimpleTable/SimpleTableComponent.tsx
@@ -130,9 +130,7 @@ export function SimpleTableComponent({ node, dataModelBindings }: TableComponent
             setEditItemIndex(-1);
             setShowEdit(false);
           }}
-          onInteractOutside={() => {
-            setShowEdit(false);
-          }}
+          backdropClose={true}
           DropdownCaption={DropdownCaption}
         />
       )}
diff --git a/yarn.lock b/yarn.lock
index ce68f7581f..4ba95514a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3719,8 +3719,8 @@ __metadata:
   linkType: hard
 
 "@radix-ui/react-slot@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "@radix-ui/react-slot@npm:1.1.1"
+  version: 1.1.2
+  resolution: "@radix-ui/react-slot@npm:1.1.2"
   dependencies:
     "@radix-ui/react-compose-refs": "npm:1.1.1"
   peerDependencies:
@@ -3729,7 +3729,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/f3cc71c16529c67a8407a89e0ac13a868cafa0cd05ca185b464db609aa5996a3f00588695518e420bd47ffdb4cc2f76c14cc12ea5a38fc2ca3578a30d2ca58b9
+  checksum: 10c0/81d45091806c52b507cec80b4477e4f31189d76ffcd7845b382eb3a034e6cf1faef71b881612028d5893f7580bf9ab59daa18fbf2792042dccd755c99a18df67
   languageName: node
   linkType: hard
 
@@ -4084,21 +4084,21 @@ __metadata:
   linkType: hard
 
 "@tanstack/react-virtual@npm:^3.10.7":
-  version: 3.11.2
-  resolution: "@tanstack/react-virtual@npm:3.11.2"
+  version: 3.13.0
+  resolution: "@tanstack/react-virtual@npm:3.13.0"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.11.2"
+    "@tanstack/virtual-core": "npm:3.13.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/de446ce517d0855b3d58e79b6a75a37be40b4529baf0a5c3ffa2662dea80aba03409e06545aea27aa9e3a36fc2a2e3005ecbfce16a4659991d66930ea3bd62d4
+  checksum: 10c0/89eaf76294be3cfe294304859db2b0f7364a9bf8934849e42cb8ef08435dfb28f5504d57b08b30426a811f127f8f6320ec6c14aa7fcd304bde4fbfeaef04bc36
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.11.2":
-  version: 3.11.2
-  resolution: "@tanstack/virtual-core@npm:3.11.2"
-  checksum: 10c0/38f1047127c6b1d07fe95becb7a12e66fb7c59d37ec0359e4ab339f837c6b906e1adff026ebd12849ba851d3f118d491014205c6b3c6ed8568cc232a798aeaaf
+"@tanstack/virtual-core@npm:3.13.0":
+  version: 3.13.0
+  resolution: "@tanstack/virtual-core@npm:3.13.0"
+  checksum: 10c0/88ff5fbd59b449e2ec2cafa9cac1ea6f449d84a593fb869ad9e8a467813e9060d4065517c5657c2de765c165453bb336751641cf670cb27143d51791bbfedc3a
   languageName: node
   linkType: hard
 

From 297e33193322654c1663867917498031a963cc09 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 17 Feb 2025 09:27:52 +0100
Subject: [PATCH 005/170] fixed last errors

---
 src/app-components/Button/Button.tsx          |  2 +-
 .../Datepicker/DatePickerCalendar.tsx         |  1 -
 src/app-components/Datepicker/Datepicker.tsx  |  1 -
 .../Datepicker/DatepickerDialog.tsx           | 37 ++++++++-----------
 .../DynamicForm/DynamicForm.tsx               | 11 +++---
 src/app-components/HelpText/HelpText.tsx      | 31 ++++++++--------
 src/app-components/Input/Input.tsx            | 33 +++++++++++------
 src/app-components/Label/Fieldset.tsx         | 18 ++++-----
 src/app-components/Label/Label.tsx            |  2 +-
 src/app-components/Panel/Panel.tsx            |  2 +-
 src/app-components/Table/Table.tsx            |  6 +--
 src/app-components/TextArea/TextArea.tsx      |  7 ++--
 src/components/form/RadioButton.tsx           | 12 +++---
 .../components/DevToolsLogs/DevToolsLogs.tsx  |  1 +
 src/language/texts/en.ts                      |  5 +--
 src/language/texts/nb.ts                      |  5 +--
 src/language/texts/nn.ts                      |  5 +--
 src/layout/Address/AddressComponent.tsx       |  5 +++
 src/layout/Grid/GridSummary.tsx               |  2 +-
 src/layout/Input/InputComponent.tsx           |  2 +-
 .../OrganisationLookupComponent.tsx           |  1 +
 .../PersonLookup/PersonLookupComponent.tsx    |  4 ++
 .../RadioButtons/ControlledRadioGroup.tsx     | 14 ++++---
 .../RepeatingGroupTableSummary.tsx            |  2 +-
 .../Table/RepeatingGroupTable.tsx             |  2 +-
 src/layout/Subform/SubformComponent.tsx       |  2 +-
 .../Subform/Summary/SubformSummaryTable.tsx   |  2 +-
 src/utils/inputUtils.tsx                      | 14 +++----
 28 files changed, 117 insertions(+), 112 deletions(-)

diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index f74180130a..bd728d102a 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -95,7 +95,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
           aria-hidden='true'
           color={color}
           data-size={size === 'lg' ? 'sm' : 'xs'}
-          title={langAsString('general.loading')}
+          aria-label={langAsString('general.loading')}
         />
       )}
       {children}
diff --git a/src/app-components/Datepicker/DatePickerCalendar.tsx b/src/app-components/Datepicker/DatePickerCalendar.tsx
index 73884c3e96..8b7fc077ef 100644
--- a/src/app-components/Datepicker/DatePickerCalendar.tsx
+++ b/src/app-components/Datepicker/DatePickerCalendar.tsx
@@ -7,7 +7,6 @@ import { getLocale } from 'src/app-components/Datepicker/utils/dateHelpers';
 
 export interface CalendarDialogProps {
   id: string;
-  isOpen?: boolean;
   selectedDate: Date | undefined;
   onSelect: (value: Date) => void;
   maxDate?: Date;
diff --git a/src/app-components/Datepicker/Datepicker.tsx b/src/app-components/Datepicker/Datepicker.tsx
index e464ef4335..c12ccd7924 100644
--- a/src/app-components/Datepicker/Datepicker.tsx
+++ b/src/app-components/Datepicker/Datepicker.tsx
@@ -99,7 +99,6 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
             id={id}
             locale={locale}
             selectedDate={dayPickerDate}
-            isOpen={isDialogOpen}
             onSelect={(date) => {
               handleDayPickerSelect(date);
               setIsDialogOpen(false);
diff --git a/src/app-components/Datepicker/DatepickerDialog.tsx b/src/app-components/Datepicker/DatepickerDialog.tsx
index ba62b5a0fe..3458a97157 100644
--- a/src/app-components/Datepicker/DatepickerDialog.tsx
+++ b/src/app-components/Datepicker/DatepickerDialog.tsx
@@ -22,40 +22,33 @@ export function DatePickerDialog({
 
   if (isMobile) {
     return (
-      <>
-        {trigger}
+      <Modal.TriggerContext>
+        <Modal.Trigger asChild={true}>{trigger}</Modal.Trigger>
         <Modal
-          role='dialog'
           ref={modalRef}
-          onInteractOutside={() => setIsDialogOpen(false)}
+          backdropClose={true}
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
+          onClose={() => setIsDialogOpen(false)}
         >
-          <Modal.Content>{children}</Modal.Content>
+          {children}
         </Modal>
-      </>
+      </Modal.TriggerContext>
     );
   }
   return (
-    <Popover
-      portal={true}
-      open={isDialogOpen}
-      onClose={() => setIsDialogOpen(false)}
-      size='lg'
-      placement='top'
-    >
-      <Popover.Trigger
-        onClick={() => setIsDialogOpen(!isDialogOpen)}
-        asChild={true}
-      >
-        {trigger}
-      </Popover.Trigger>
-      <Popover.Content
+    <Popover.TriggerContext>
+      <Popover.Trigger asChild={true}>{trigger}</Popover.Trigger>
+      <Popover
         className={styles.calendarWrapper}
         aria-modal
+        open={isDialogOpen}
+        data-size='lg'
+        placement='top'
         autoFocus={true}
+        onClose={() => setIsDialogOpen(false)}
       >
         {children}
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.TriggerContext>
   );
 }
diff --git a/src/app-components/DynamicForm/DynamicForm.tsx b/src/app-components/DynamicForm/DynamicForm.tsx
index 24df2fdcf8..24084232c3 100644
--- a/src/app-components/DynamicForm/DynamicForm.tsx
+++ b/src/app-components/DynamicForm/DynamicForm.tsx
@@ -150,7 +150,7 @@ export function FieldRenderer({
           >
             <Textfield
               label={label}
-              size='sm'
+              data-size='sm'
               required={required}
               value={(formData[fieldKey] as string) || ''}
               onChange={(e) => handleChange(fieldKey, e.target.value)}
@@ -166,7 +166,7 @@ export function FieldRenderer({
           >
             <Textfield
               label={label}
-              size='sm'
+              data-size='sm'
               type='number'
               required={required}
               value={formData[fieldKey] !== undefined ? String(formData[fieldKey]) : ''}
@@ -205,7 +205,7 @@ export function FieldRenderer({
           <div key={fieldKey}>
             {component?.options?.map(({ label, value }) => (
               <Radio
-                size='sm'
+                data-size='sm'
                 key={value}
                 value={value}
                 checked={formData[fieldKey] === value}
@@ -213,9 +213,8 @@ export function FieldRenderer({
                   handleChange(fieldKey, e.target.value);
                 }}
                 name={`${fieldKey}-${rowIndex}`}
-              >
-                {label}
-              </Radio>
+                label={label}
+              />
             ))}
           </div>
         );
diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index c2c2996ff4..d788c5fe54 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -12,10 +12,9 @@ import { HelpTextIcon } from 'src/app-components/HelpText/HelpTextIcon';
 export type HelpTextProps = {
   id?: string;
   title?: string;
-  size?: PopoverProps['size'];
+  size?: PopoverProps['data-size'];
   placement?: 'right' | 'bottom' | 'left' | 'top';
-  portal?: boolean;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function getSize(size: string) {
   switch (size) {
@@ -45,24 +44,17 @@ export function getSize(size: string) {
 }
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function HelpText(
-  { id, title, placement = 'right', portal, className, children, ...rest },
+  { id, title, placement = 'right', className, children, ...rest },
   ref,
 ) {
   const uuid = uuidv4();
   const [open, setOpen] = useState(false);
 
-  const size = getSize(rest.size || 'md') as PopoverProps['size'];
+  const size = getSize(rest.size || 'md') as PopoverProps['data-size'];
 
   const helpTextSize = size ? classes[`helpText-${size}`] : '';
   return (
-    <Popover
-      variant='info'
-      placement={placement}
-      size={size}
-      portal={portal}
-      open={open}
-      onClose={() => setOpen(false)}
-    >
+    <Popover.TriggerContext>
       <Popover.Trigger
         asChild
         variant='tertiary'
@@ -87,7 +79,16 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
           <span className={classes.screenReaderOnly}>{title}</span>
         </button>
       </Popover.Trigger>
-      <Popover.Content className={classes.helpTextContent}>{children}</Popover.Content>
-    </Popover>
+      <Popover
+        className={classes.helpTextContent}
+        data-color='info'
+        placement={placement}
+        data-size={size}
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        {children}
+      </Popover>
+    </Popover.TriggerContext>
   );
 });
diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index 99521a2620..325a5bd0e0 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -1,17 +1,22 @@
 import React from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import { Paragraph, Textfield } from '@digdir/designsystemet-react';
-import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
+import { Field, Paragraph, Textfield } from '@digdir/designsystemet-react';
+import type { FieldCounterProps } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Input/Input.module.css';
 import type { InputType } from 'src/app-components/Input/constants';
 
+type LabelRequired =
+  | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
+  | { 'aria-label'?: never; 'aria-labelledby'?: never; label: ReactNode }
+  | { 'aria-label'?: never; 'aria-labelledby': string; label?: never };
+
 export type InputProps = {
   size?: 'sm' | 'md' | 'lg';
   prefix?: string;
   suffix?: string;
-  characterLimit?: CharacterLimitProps;
+  characterLimit?: FieldCounterProps;
   error?: ReactNode;
   disabled?: boolean;
   id?: string;
@@ -31,10 +36,11 @@ export type InputProps = {
   | 'placeholder'
   | 'inputMode'
   | 'style'
->;
+> &
+  LabelRequired;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', readOnly, ...rest } = props;
+  const { size = 'sm', readOnly, characterLimit, ...rest } = props;
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     if (readOnly) {
@@ -51,7 +57,7 @@ export function Input(props: InputProps) {
     return (
       <Paragraph
         id={id}
-        size={size}
+        data-size={size}
         className={`${classes.textPadding} ${classes.focusable} ${className}`}
         tabIndex={0}
       >
@@ -61,11 +67,14 @@ export function Input(props: InputProps) {
   }
 
   return (
-    <Textfield
-      onPaste={handlePaste}
-      size={size}
-      readOnly={readOnly}
-      {...rest}
-    />
+    <Field>
+      <Textfield
+        onPaste={handlePaste}
+        data-size={size}
+        readOnly={readOnly}
+        {...rest}
+      />
+      {characterLimit && <Field.Counter {...characterLimit} />}
+    </Field>
   );
 }
diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
index 00dce996e8..206678d4e6 100644
--- a/src/app-components/Label/Fieldset.tsx
+++ b/src/app-components/Label/Fieldset.tsx
@@ -12,7 +12,7 @@ import type { IGridStyling } from 'src/layout/common.generated';
 export type FieldsetProps = {
   id?: string;
   legend: string | ReactElement | undefined;
-  legendSize?: Extract<DesignsystemetLabelProps['size'], 'sm' | 'md' | 'lg' | 'xl'>;
+  legendSize?: Extract<DesignsystemetLabelProps['data-size'], 'sm' | 'md' | 'lg' | 'xl'>;
   className?: string;
   grid?: IGridStyling;
   optionalIndicator?: ReactElement;
@@ -21,7 +21,7 @@ export type FieldsetProps = {
   required?: boolean;
   requiredIndicator?: JSX.Element;
   style?: DesignsystemetLabelProps['style'];
-  size?: Extract<DesignsystemetLabelProps['size'], 'sm' | 'md' | 'lg' | 'xl'>;
+  size?: Extract<DesignsystemetLabelProps['data-size'], 'sm' | 'md' | 'lg' | 'xl'>;
 };
 
 export function Fieldset({
@@ -69,12 +69,14 @@ export function Fieldset({
       >
         <DesignsystemetFieldset
           className={cn(className)}
-          size={size}
-          legend={
+          data-size={size}
+          // FIXME: find a way to use classnames for setting font size. Not working currently
+        >
+          <DesignsystemetFieldset.Legend>
             <span className={cn(labelClasses.labelAndHelpWrapper)}>
               <DesignsystemetLabel
                 weight='medium'
-                size={legendSize}
+                data-size={legendSize}
                 style={style}
                 asChild
               >
@@ -86,10 +88,8 @@ export function Fieldset({
               </DesignsystemetLabel>
               {help}
             </span>
-          }
-          // FIXME: find a way to use classnames for setting font size. Not working currently
-          description={description}
-        >
+          </DesignsystemetFieldset.Legend>
+          <DesignsystemetFieldset.Description>{description}</DesignsystemetFieldset.Description>
           {children}
         </DesignsystemetFieldset>
       </Flex>
diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
index 3e082dc60e..7d373c3988 100644
--- a/src/app-components/Label/Label.tsx
+++ b/src/app-components/Label/Label.tsx
@@ -53,7 +53,7 @@ export function Label({
           <span className={classes.labelAndHelpWrapper}>
             <DesignsystemetLabel
               weight='medium'
-              size='md'
+              data-size='md'
               htmlFor={htmlFor}
               className={cn(className, {
                 [classes.labelPadding]: !children,
diff --git a/src/app-components/Panel/Panel.tsx b/src/app-components/Panel/Panel.tsx
index f37838fda6..94cfd03ec1 100644
--- a/src/app-components/Panel/Panel.tsx
+++ b/src/app-components/Panel/Panel.tsx
@@ -95,7 +95,7 @@ export const Panel: React.FC<PanelProps> = ({
           {title && (
             <Heading
               level={2}
-              size={isMobileLayout ? 'xs' : 'sm'}
+              data-size={isMobileLayout ? 'xs' : 'sm'}
               className={classes.panelHeader}
             >
               {title}
diff --git a/src/app-components/Table/Table.tsx b/src/app-components/Table/Table.tsx
index 869428ae01..69a2e22a18 100644
--- a/src/app-components/Table/Table.tsx
+++ b/src/app-components/Table/Table.tsx
@@ -7,7 +7,7 @@ import { pick } from 'dot-object';
 import type { JSONSchema7 } from 'json-schema';
 
 import classes from 'src/app-components/Table/Table.module.css';
-import utilClasses from 'src/styles/util.module.css';
+import utilClasses from 'src/styles/utils.module.css';
 import type { FormDataObject, FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
 
 interface Column {
@@ -78,7 +78,7 @@ export function AppTable({
   const defaultButtonVariant = mobile ? 'secondary' : 'tertiary';
   return (
     <Table
-      size={size || 'sm'}
+      data-size={size || 'sm'}
       className={cn(classes.table, { [classes.mobileTable]: mobile })}
       zebra={zebra}
       stickyHeader={stickyHeader}
@@ -162,7 +162,7 @@ export function AppTable({
                     <Button
                       key={idx}
                       onClick={() => button.onClick(rowIndex, rowData)}
-                      size='sm'
+                      data-size='sm'
                       variant={button.variant ? button.variant : defaultButtonVariant}
                       color={button.color ? button.color : 'second'}
                     >
diff --git a/src/app-components/TextArea/TextArea.tsx b/src/app-components/TextArea/TextArea.tsx
index 14705b8114..42f625a5aa 100644
--- a/src/app-components/TextArea/TextArea.tsx
+++ b/src/app-components/TextArea/TextArea.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Field, Textarea } from '@digdir/designsystemet-react';
+import type { FieldCounterProps } from '@digdir/designsystemet-react';
 
 export interface TextAreaWithLabelProps {
   id: string;
@@ -8,7 +9,7 @@ export interface TextAreaWithLabelProps {
   onChange: (value: string) => void;
   onBlur?: () => void;
   readOnly?: boolean;
-  characterLimit?: number;
+  characterLimit?: FieldCounterProps | undefined;
   error?: boolean;
   dataTestId?: string;
   ariaDescribedBy?: string;
@@ -24,7 +25,6 @@ export const TextArea: React.FC<TextAreaWithLabelProps> = ({
   onBlur,
   readOnly = false,
   characterLimit,
-  error = false,
   dataTestId,
   ariaDescribedBy,
   ariaLabel,
@@ -37,7 +37,6 @@ export const TextArea: React.FC<TextAreaWithLabelProps> = ({
       onChange={(e) => onChange(e.target.value)}
       onBlur={onBlur}
       readOnly={readOnly}
-      error={error}
       value={value}
       data-testid={dataTestId}
       aria-describedby={ariaDescribedBy}
@@ -45,6 +44,6 @@ export const TextArea: React.FC<TextAreaWithLabelProps> = ({
       autoComplete={autoComplete}
       style={style}
     />
-    {characterLimit && <Field.Counter limit={characterLimit} />}
+    {characterLimit && <Field.Counter {...characterLimit} />}
   </Field>
 );
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index b095d388d6..fd4c4a6d5a 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -11,7 +11,7 @@ import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPo
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
 import { useLanguage } from 'src/features/language/useLanguage';
 
-export interface IRadioButtonProps extends Omit<RadioProps, 'children'> {
+export interface IRadioButtonProps extends Omit<RadioProps, 'children' | 'aria-label' | 'aria-labelledby'> {
   showAsCard?: boolean;
   helpText?: React.ReactNode;
   hideLabel?: boolean;
@@ -45,12 +45,10 @@ export const RadioButton = ({
     <Radio
       {...rest}
       label={
-        label && (
-          <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
-            {label}
-            {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
-          </div>
-        )
+        <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
+          {label}
+          {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
+        </div>
       }
       className={cn(classes.radioButton, className)}
       onChange={handleChange}
diff --git a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
index ea26170aa8..c5fdcf124f 100644
--- a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
+++ b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
@@ -71,6 +71,7 @@ export const DevToolsLogs = () => {
         </Button>
         <div className={classes.filterField}>
           <Input
+            aria-label='Filtrer logger'
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
             placeholder='Filtrer logger'
diff --git a/src/language/texts/en.ts b/src/language/texts/en.ts
index 18bb58212b..e5bcb27962 100644
--- a/src/language/texts/en.ts
+++ b/src/language/texts/en.ts
@@ -202,9 +202,8 @@ export function en() {
         'Your browser does not support iframes that use srcdoc. This may result in not being able to see all the content intended to be displayed here. We recommend trying a different browser.',
     },
     input_components: {
-      character_limit_sr_label: 'Textfield has a maximum length of {0} characters',
-      remaining_characters: 'You have {0} of {1} characters left',
-      exceeded_max_limit: 'You have exceeded the maximum limit with {0} characters',
+      remaining_characters: 'You have %d characters left',
+      exceeded_max_limit: 'You have exceeded the maximum limit with %d characters',
     },
     instance_selection: {
       changed_by: 'Changed by',
diff --git a/src/language/texts/nb.ts b/src/language/texts/nb.ts
index 143d5e996a..8de64ba96e 100644
--- a/src/language/texts/nb.ts
+++ b/src/language/texts/nb.ts
@@ -202,9 +202,8 @@ export function nb(): FixedLanguageList {
         'Nettleseren du bruker støtter ikke iframes som benytter seg av srcdoc. Dette kan føre til at du ikke ser all innholdet som er ment å vises her. Vi anbefaler deg å prøve en annen nettleser.',
     },
     input_components: {
-      character_limit_sr_label: 'Tekstfeltet kan inneholde maks {0} tegn',
-      remaining_characters: 'Du har {0} av {1} tegn igjen',
-      exceeded_max_limit: 'Du har overskredet maks antall tegn med {0}',
+      remaining_characters: 'Du har %d tegn igjen',
+      exceeded_max_limit: 'Du har overskredet maks antall tegn med %d',
     },
     instance_selection: {
       changed_by: 'Endret av',
diff --git a/src/language/texts/nn.ts b/src/language/texts/nn.ts
index a3abf7205b..19baea80de 100644
--- a/src/language/texts/nn.ts
+++ b/src/language/texts/nn.ts
@@ -202,9 +202,8 @@ export function nn(): FixedLanguageList {
         'Nettlesaren di støttar ikkje iframes som brukar srcdoc. Dette kan føre til at du ikkje ser all innhaldet som er meint å visast her. Vi anbefalar deg å prøve ein annan nettlesar.',
     },
     input_components: {
-      character_limit_sr_label: 'Tekstfeltet kan innehalde maks {0} teikn.',
-      remaining_characters: 'Du har {0} av {1} teikn igjen',
-      exceeded_max_limit: 'Du har overskride maks teikn med {0}',
+      remaining_characters: 'Du har %d teikn igjen',
+      exceeded_max_limit: 'Du har overskride maks teikn med %d',
     },
     instance_selection: {
       changed_by: 'Endra av',
diff --git a/src/layout/Address/AddressComponent.tsx b/src/layout/Address/AddressComponent.tsx
index f5d68a0c4d..d2903d30f5 100644
--- a/src/layout/Address/AddressComponent.tsx
+++ b/src/layout/Address/AddressComponent.tsx
@@ -88,6 +88,7 @@ export function AddressComponent({ node }: IAddressProps) {
             <Input
               id={`address_address_${id}`}
               data-bindingkey={bindingKeys.address}
+              aria-label={langAsString(textResourceBindings?.title ?? 'address_component.address')}
               error={hasValidationErrors(bindingValidations?.address)}
               value={address}
               onChange={(ev) => setValue('address', ev.target.value)}
@@ -124,6 +125,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_care_of_${id}`}
                 data-bindingkey={bindingKeys.careOf}
+                aria-label={langAsString(textResourceBindings?.careOfTitle ?? 'address_component.care_of')}
                 error={hasValidationErrors(bindingValidations?.careOf)}
                 value={careOf}
                 onChange={(ev) => setValue('careOf', ev.target.value)}
@@ -166,6 +168,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_zip_code_${id}`}
                 data-bindingkey={bindingKeys.zipCode}
+                aria-label={langAsString(textResourceBindings?.zipCodeTitle ?? 'address_component.zip_code')}
                 error={hasValidationErrors(bindingValidations?.zipCode)}
                 value={zipCode}
                 onChange={(ev) => setValue('zipCode', ev.target.value)}
@@ -204,6 +207,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_post_place_${id}`}
                 data-bindingkey={bindingKeys.postPlace}
+                aria-label={langAsString(textResourceBindings?.postPlaceTitle ?? 'address_component.post_place')}
                 value={postPlace}
                 readOnly={true}
                 required={required}
@@ -245,6 +249,7 @@ export function AddressComponent({ node }: IAddressProps) {
                 <Input
                   id={`address_house_number_${id}`}
                   data-bindingkey={bindingKeys.houseNumber}
+                  aria-label={langAsString(textResourceBindings?.houseNumberTitle ?? 'address_component.house_number')}
                   error={hasValidationErrors(bindingValidations?.houseNumber)}
                   value={houseNumber}
                   onChange={(ev) => setValue('houseNumber', ev.target.value)}
diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index 0db98c306e..e568c010b1 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -18,12 +18,12 @@ import classes from 'src/layout/Grid/GridSummary.module.css';
 import { isGridRowHidden } from 'src/layout/Grid/tools';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+import utilClasses from 'src/styles/utils.module.css';
 import { getColumnStyles } from 'src/utils/formComponentUtils';
 import { Hidden, useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { useNodeTraversal } from 'src/utils/layout/useNodeTraversal';
 import { typedBoolean } from 'src/utils/typing';
-import utilClasses from 'src/utils/util.module.css';
 import type { DisplayDataProps } from 'src/features/displayData';
 import type {
   GridCellLabelFrom,
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 583e670d13..2ad22d2661 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -80,7 +80,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
 
   const inputProps: InputProps = {
     id,
-    'aria-label': overrideDisplay?.renderedInTable === true ? langAsString(textResourceBindings?.title) : undefined,
+    'aria-label': langAsString(textResourceBindings?.title),
     'aria-describedby':
       textResourceBindings?.title && textResourceBindings?.description ? getDescriptionId(id) : undefined,
     autoComplete: autocomplete,
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
index eb6bc2d3d4..44d23d3196 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
@@ -151,6 +151,7 @@ export function OrganisationLookupComponent({
           <NumericInput
             id={`${id}_orgnr`}
             aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_orgnr`) : undefined}
+            aria-label={langAsString('organisation_lookup.orgnr_label')}
             value={hasSuccessfullyFetched ? organisation_lookup_orgnr : tempOrgNr}
             className={classes.orgnr}
             required={required}
diff --git a/src/layout/PersonLookup/PersonLookupComponent.tsx b/src/layout/PersonLookup/PersonLookupComponent.tsx
index 6fb3cacedf..292859f2f2 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.tsx
+++ b/src/layout/PersonLookup/PersonLookupComponent.tsx
@@ -176,6 +176,7 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
           <NumericInput
             id={`${id}_ssn`}
             aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_ssn`) : undefined}
+            aria-label={langAsString('person_lookup.ssn_label')}
             value={hasSuccessfullyFetched ? person_lookup_ssn : tempSsn}
             className={classes.ssn}
             required={required}
@@ -211,6 +212,9 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
           <Input
             id={`${id}_name`}
             aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_name`) : undefined}
+            aria-label={langAsString(
+              hasSuccessfullyFetched ? 'person_lookup.name_label' : 'person_lookup.surname_label',
+            )}
             value={hasSuccessfullyFetched ? person_lookup_name : tempName}
             className={classes.name}
             type='text'
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 468cf50ea8..a8bf063d4e 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Fieldset } from '@digdir/designsystemet-react';
+import { Fieldset, useRadioGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -13,10 +13,10 @@ import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import classes from 'src/layout/RadioButtons/ControlledRadioGroup.module.css';
 import { useRadioButtons } from 'src/layout/RadioButtons/radioButtonsUtils';
+import utilClasses from 'src/styles/utils.module.css';
 import { shouldUseRowLayout } from 'src/utils/layout';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import utilClasses from 'src/utils/util.module.css';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IControlledRadioGroupProps = PropsFromGenericComponent<'RadioButtons' | 'LikertItem'>;
@@ -38,6 +38,12 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
     ? lang('form_filler.radiobutton_alert_label', [`<strong>${selectedLabelTranslated}</strong>`])
     : null;
   const confirmChangeText = langAsString('form_filler.alert_confirm');
+  const { getRadioProps } = useRadioGroup({
+    name: id,
+    value: selectedValues[0],
+    onChange: () => handleChange,
+    error: !isValid,
+  });
 
   const getLabelPrefixForLikert = () => {
     if (parentItem?.type === 'Likert' && parentItem.textResourceBindings?.leftColumnHeader) {
@@ -87,12 +93,10 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
             {calculatedOptions.map((option) => (
               <RadioButton
                 key={option.value}
-                value={option.value}
                 label={langAsString(option.label)}
                 description={option.description && <Lang id={option.description} />}
                 helpText={option.helpText && <Lang id={option.helpText} />}
-                name={id}
-                error={!isValid}
+                {...getRadioProps({ value: option.value })}
                 checked={option.value === selectedValues[0]}
                 showAsCard={showAsCard}
                 readOnly={readOnly}
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
index 7a7304c250..cf7f32a2bc 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -21,9 +21,9 @@ import { useTableNodes } from 'src/layout/RepeatingGroup/useTableNodes';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import utilClasses from 'src/utils/util.module.css';
 import type { ITableColumnFormatting } from 'src/layout/common.generated';
 import type { RepGroupRow } from 'src/layout/RepeatingGroup/types';
 import type { BaseLayoutNode, LayoutNode } from 'src/utils/layout/LayoutNode';
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
index 814e7e5efc..97c17d3e56 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
@@ -20,10 +20,10 @@ import classes from 'src/layout/RepeatingGroup/RepeatingGroup.module.css';
 import { RepeatingGroupTableRow } from 'src/layout/RepeatingGroup/Table/RepeatingGroupTableRow';
 import { RepeatingGroupTableTitle } from 'src/layout/RepeatingGroup/Table/RepeatingGroupTableTitle';
 import { useTableNodes } from 'src/layout/RepeatingGroup/useTableNodes';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import utilClasses from 'src/utils/util.module.css';
 import type { ITableColumnFormatting } from 'src/layout/common.generated';
 import type { GridCellInternal } from 'src/layout/Grid/types';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
diff --git a/src/layout/Subform/SubformComponent.tsx b/src/layout/Subform/SubformComponent.tsx
index 1944cf375a..5edd057114 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -19,9 +19,9 @@ import { isSubformValidation } from 'src/features/validation';
 import { useComponentValidationsForNode } from 'src/features/validation/selectors/componentValidationsForNode';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import classes from 'src/layout/Subform/SubformComponent.module.css';
+import utilClasses from 'src/styles/utils.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { getStatefulDataModelUrl } from 'src/utils/urls/appUrlHelper';
-import utilClasses from 'src/utils/util.module.css';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IData } from 'src/types/shared';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
diff --git a/src/layout/Subform/Summary/SubformSummaryTable.tsx b/src/layout/Subform/Summary/SubformSummaryTable.tsx
index fa62a75745..e6e154ca95 100644
--- a/src/layout/Subform/Summary/SubformSummaryTable.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryTable.tsx
@@ -20,9 +20,9 @@ import { DataQueryWithDefaultValue } from 'src/layout/Subform/SubformComponent';
 import classes1 from 'src/layout/Subform/SubformComponent.module.css';
 import classes2 from 'src/layout/Subform/Summary/SubformSummaryComponent2.module.css';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
+import utilClasses from 'src/styles/utils.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { getStatefulDataModelUrl } from 'src/utils/urls/appUrlHelper';
-import utilClasses from 'src/utils/util.module.css';
 import type { ISubformSummaryComponent } from 'src/layout/Subform/Summary/SubformSummaryComponent';
 import type { IData } from 'src/types/shared';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
diff --git a/src/utils/inputUtils.tsx b/src/utils/inputUtils.tsx
index 27112af705..42be035740 100644
--- a/src/utils/inputUtils.tsx
+++ b/src/utils/inputUtils.tsx
@@ -1,11 +1,11 @@
-import type { CharacterLimit } from '@digdir/design-system-react/dist/types/utilities/InputWrapper';
+import type { FieldCounterProps } from '@digdir/designsystemet-react';
 
 import { useLanguage } from 'src/features/language/useLanguage';
 
 /**
  * Hook to create a character limit object for use in input components
  */
-export const useCharacterLimit = (maxLength: number | undefined): CharacterLimit | undefined => {
+export const useCharacterLimit = (maxLength: number | undefined): FieldCounterProps | undefined => {
   const { langAsString } = useLanguage();
 
   if (maxLength === undefined) {
@@ -13,12 +13,8 @@ export const useCharacterLimit = (maxLength: number | undefined): CharacterLimit
   }
 
   return {
-    maxCount: maxLength,
-    label: (count: number) =>
-      count >= 0
-        ? langAsString('input_components.remaining_characters', [`${count}`, `${maxLength}`])
-        : langAsString('input_components.exceeded_max_limit', [`${Math.abs(count)}`]),
-
-    srLabel: langAsString('input_components.character_limit_sr_label', [`${maxLength}`]),
+    limit: maxLength,
+    under: langAsString('input_components.remaining_characters'),
+    over: langAsString('input_components.exceeded_max_limit'),
   };
 };

From 5b0df7c0e0146419f45def98038f87bce3cf02a4 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 17 Feb 2025 16:35:31 +0100
Subject: [PATCH 006/170] update css variables and classnames

---
 .../Datepicker/Calendar.module.css            | 32 ++++++++---------
 .../HelpText/Helptext.module.css              | 31 ++++++++--------
 src/app-components/Input/Input.module.css     | 11 +++---
 src/app-components/Label/Label.module.css     |  8 ++---
 .../Pagination/Pagination.module.css          |  6 ++--
 src/app-components/Panel/Panel.module.css     | 36 +++++++++----------
 src/app-components/Table/Table.module.css     | 14 ++++----
 src/components/AltinnAppHeader.module.css     |  8 ++---
 src/components/CircleIcon.module.css          |  2 +-
 .../atoms/AltinnAttachment.module.css         |  2 +-
 src/components/form/Description.module.css    |  4 +--
 src/components/form/Fieldset.module.css       |  2 +-
 src/components/form/RadioButton.module.css    | 25 +++++++------
 .../form/caption/Caption.module.css           |  4 +--
 src/components/label/Label.module.css         |  2 +-
 src/components/label/LabelContent.module.css  |  6 ++--
 src/components/presentation/NavBar.module.css |  2 +-
 .../OrganisationLogo.module.css               |  2 +-
 .../presentation/Progress.module.css          |  4 +--
 src/features/devtools/DevTools.module.css     |  4 +--
 src/features/footer/Footer.module.css         |  2 +-
 .../selection/InstanceSelection.module.css    |  2 +-
 src/features/pdf/PDFView.module.css           | 10 +++---
 .../validation/ComponentValidations.tsx       |  2 +-
 src/index.css                                 | 17 ++++-----
 src/layout/Accordion/Accordion.test.tsx       | 12 +++----
 .../Accordion/SummaryAccordion.module.css     | 12 +++----
 src/layout/AddToList/AddToList.tsx            |  2 +-
 .../AddressSummary/AddressSummary.module.css  |  4 +--
 .../CheckboxesContainerComponent.module.css   |  4 +--
 .../Checkboxes/CheckboxesSummary.module.css   |  2 +-
 .../Error/FailedAttachments.module.css        |  2 +-
 .../FileTableComponent.module.css             |  8 ++---
 .../FileUploadTable/FileTableRow.module.css   |  4 +--
 src/layout/Grid/Grid.module.css               |  2 +-
 src/layout/Grid/GridSummary.module.css        | 18 +++++-----
 src/layout/Group/GroupComponent.module.css    | 16 ++++-----
 src/layout/Group/GroupSummary.module.css      | 10 +++---
 .../Likert/Summary2/LikertSummary.module.css  |  2 +-
 .../LikertItem/LikertItemComponent.module.css |  4 +--
 src/layout/List/ListComponent.module.css      | 22 ++++++------
 src/layout/List/ListComponent.tsx             |  2 +-
 src/layout/Map/MapComponent.module.css        |  2 +-
 src/layout/Map/Summary2/MapSummary.module.css |  4 +--
 .../NavigationBarComponent.module.css         |  6 ++--
 .../OrganisationLookupComponent.module.css    |  8 ++---
 .../OrganisationLookupSummary.module.css      |  2 +-
 .../Payment/PaymentComponent.module.css       |  6 ++--
 .../PaymentReceiptDetails.module.css          |  8 ++---
 .../PaymentDetailsTable.module.css            |  2 +-
 .../PersonLookupComponent.module.css          |  6 ++--
 .../PersonLookupSummary.module.css            |  2 +-
 .../RepeatingGroupPagination.module.css       |  2 +-
 .../RepeatingGroup/RepeatingGroup.module.css  |  6 ++--
 .../Summary2/RepeatingGroupSummary.module.css | 18 +++++-----
 .../RepeatingGroupTableSummary.module.css     | 12 +++----
 .../Subform/SubformComponent.module.css       |  2 +-
 .../SubformSummaryComponent2.module.css       | 14 ++++----
 .../MultipleValueSummary.module.css           | 10 +++---
 .../SingleValueSummary.module.css             | 10 +++---
 src/layout/Tabs/Tabs.module.css               |  4 +--
 src/layout/Tabs/TabsSummary.module.css        |  8 ++---
 src/styles/combobox.module.css                |  4 +--
 src/styles/utils.module.css                   |  6 ++--
 .../component-library/checkboxes.ts           |  2 +-
 .../integration/component-library/dropdown.ts |  2 +-
 .../component-library/multiple-select.ts      |  2 +-
 .../component-library/radio-buttons.ts        |  2 +-
 .../component-library/text-area.ts            |  2 +-
 test/e2e/integration/frontend-test/options.ts | 16 ++++-----
 test/e2e/integration/payment-test/payment.ts  |  2 +-
 test/e2e/integration/subform-test/subform.ts  |  4 +--
 test/e2e/pageobjects/app-frontend.ts          |  2 +-
 .../component-library/fillAddressAndVerify.ts | 13 +++----
 .../apps/component-library/inputAndVerify.ts  |  2 +-
 test/e2e/support/custom.ts                    |  2 +-
 76 files changed, 273 insertions(+), 284 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index d2d9f94132..9df8d95152 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -2,10 +2,10 @@
   margin-bottom: 0;
 }
 .calendarGrid {
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .formatText {
@@ -20,29 +20,29 @@
 }
 
 .selectedDate {
-  background-color: var(--fds-colors-blue-900);
+  background-color: var(--ds-global-blue-9);
   color: white;
   font-weight: normal;
-  border-radius: var(--fds-border_radius-medium);
+  border-radius: var(--ds-border-radius-md);
 }
 .selectedDate button {
   color: white;
 }
 .disabledDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-grey-100);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-neutral-1);
   cursor: not-allowed;
 }
 .disabledDate button {
   text-decoration: line-through;
 }
 .focusedDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-global-blue-2);
 }
 .today {
-  border-radius: var(--fds-border_radius-medium);
-  border: var(--fds-border_width-default) solid var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-global-blue-2);
 }
 .disabledDate:hover button {
   cursor: not-allowed;
@@ -66,8 +66,8 @@
   font-weight: 500;
 }
 .calendarDay:hover {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-global-blue-2);
 }
 .calendarDay {
   width: 48px;
@@ -83,7 +83,7 @@
 .monthWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 .dropdownCaption {
   display: flex;
@@ -94,12 +94,12 @@
 .calendarInputWrapper {
   display: flex;
   border-radius: 4px;
-  border: var(--fds-border_width-default, 1px) solid var(--fds-semantic-border-neutral-default);
-  gap: var(--fds-spacing-1);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-strong);
+  gap: var(--ds-size-1);
   background: white;
 }
 .calendarInputWrapper:hover {
-  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+  box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
 }
 .calendarInput {
   padding: 1px;
diff --git a/src/app-components/HelpText/Helptext.module.css b/src/app-components/HelpText/Helptext.module.css
index 27e28d7bfe..fa601f16b6 100644
--- a/src/app-components/HelpText/Helptext.module.css
+++ b/src/app-components/HelpText/Helptext.module.css
@@ -19,11 +19,11 @@
 }
 
 .helpText-icon {
-  color: var(--fds-semantic-text-action-default);
-  width: var(--fds-sizing-7);
-  height: var(--fds-sizing-7);
-  min-width: var(--fds-sizing-7);
-  min-height: var(--fds-sizing-7);
+  color: var(--ds-color-accent-base-default);
+  width: var(--ds-size-7);
+  height: var(--ds-size-7);
+  min-width: var(--ds-size-7);
+  min-height: var(--ds-size-7);
 }
 
 .helpTextButton:where(:hover, :focus, [data-state^='open']) > .helpText-icon {
@@ -35,31 +35,30 @@
 }
 
 .helpTextContent {
-  font: var(--fds-typography-paragraph-medium);
+  font: var(--ds-typography-paragraph-md);
   font-family: inherit;
   width: fit-content;
   max-width: 700px;
 }
 
 .helpText-sm .helpText-icon {
-  width: var(--fds-sizing-6);
-  height: var(--fds-sizing-6);
+  width: var(--ds-size-6);
+  height: var(--ds-size-6);
 }
 
 .helpText-md .helpText-icon {
-  width: var(--fds-sizing-7);
-  height: var(--fds-sizing-7);
+  width: var(--ds-size-7);
+  height: var(--ds-size-7);
 }
 
 .helpText-lg .helpText-icon {
-  width: var(--fds-sizing-8);
-  height: var(--fds-sizing-8);
+  width: var(--ds-size-8);
+  height: var(--ds-size-8);
 }
 .helpText-focus:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-neutral-text-default);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-neutral-background-default);
 }
 .screenReaderOnly {
   border: 0;
diff --git a/src/app-components/Input/Input.module.css b/src/app-components/Input/Input.module.css
index 5252ad2529..97666f0c29 100644
--- a/src/app-components/Input/Input.module.css
+++ b/src/app-components/Input/Input.module.css
@@ -6,14 +6,13 @@ input[type='search'] {
 }
 
 .text-padding {
-  padding: 0 var(--fds-spacing-2);
+  padding: 0 var(--ds-size-2);
   line-height: 32px;
 }
 
 .focusable:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  border-radius: var(--fds-border_radius-medium);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-neutral-text-default);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-neutral-background-default);
+  border-radius: var(--ds-border-radius-md);
 }
diff --git a/src/app-components/Label/Label.module.css b/src/app-components/Label/Label.module.css
index cdc87ac406..d6a56eec5f 100644
--- a/src/app-components/Label/Label.module.css
+++ b/src/app-components/Label/Label.module.css
@@ -1,20 +1,20 @@
 .labelAndHelpWrapper {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
 
 .labelAndDescWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .labelPadding {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
diff --git a/src/app-components/Pagination/Pagination.module.css b/src/app-components/Pagination/Pagination.module.css
index cbcdf8b51a..8ec7222b33 100644
--- a/src/app-components/Pagination/Pagination.module.css
+++ b/src/app-components/Pagination/Pagination.module.css
@@ -2,7 +2,7 @@
   visibility: hidden;
 }
 .pagination {
-  ul[class*='fds-pagination'] {
+  ul[class*='ds-pagination'] {
     padding: 0;
   }
 }
@@ -10,11 +10,11 @@
   display: flex;
   flex-direction: row-reverse;
 
-  div[class*='fds-combobox__input__wrapper'] {
+  div[class*='ds-combobox__input__wrapper'] {
     width: 80px;
   }
 
-  div[class*='fds-combobox__chip-and-input'] {
+  div[class*='ds-combobox__chip-and-input'] {
     width: 34px;
   }
 }
diff --git a/src/app-components/Panel/Panel.module.css b/src/app-components/Panel/Panel.module.css
index d1bd58ac7f..2ef70751c6 100644
--- a/src/app-components/Panel/Panel.module.css
+++ b/src/app-components/Panel/Panel.module.css
@@ -1,27 +1,27 @@
 /* breakpoints-xs */
 @media only screen and (min-width: 0) {
   .panel {
-    --y-padding: var(--fds-spacing-6);
-    --x-padding: var(--fds-spacing-6);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-6);
+    --x-padding: var(--ds-size-6);
+    --content-gap: var(--ds-size-3);
   }
 }
 
 /* breakpoints-sm */
 @media only screen and (min-width: 540px) {
   .panel:not(.panelMobileLayout) {
-    --y-padding: var(--fds-spacing-9);
-    --x-padding: var(--fds-spacing-22);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-9);
+    --x-padding: var(--ds-size-22);
+    --content-gap: var(--ds-size-3);
   }
 }
 
 /* print style */
 @media print {
   .panel {
-    --y-padding: var(--fds-spacing-6);
-    --x-padding: var(--fds-spacing-6);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-6);
+    --x-padding: var(--ds-size-6);
+    --content-gap: var(--ds-size-3);
   }
 }
 
@@ -36,19 +36,19 @@
 }
 
 .panelContentWrapper_info {
-  background-color: var(--fds-semantic-surface-info-subtle);
+  background-color: var(--ds-color-info-surface-default);
 }
 
 .panelContentWrapper_success {
-  background-color: var(--fds-semantic-surface-success-subtle);
+  background-color: var(--ds-color-success-surface-default);
 }
 
 .panelContentWrapper_warning {
-  background-color: var(--fds-semantic-surface-warning-subtle);
+  background-color: var(--ds-color-warning-surface-default);
 }
 
 .panelContentWrapper_error {
-  background-color: var(--fds-semantic-surface-danger-no_fill-active);
+  background-color: var(--ds-color-danger-surface-hover);
 }
 
 .panelIconWrapper {
@@ -57,25 +57,25 @@
 }
 
 .panelIconWrapper_success svg {
-  color: var(--fds-semantic-surface-success-default);
+  color: var(--ds-color-success-base-default);
 }
 
 .panelIconWrapper_info svg {
-  color: var(--fds-semantic-border-info-default);
+  color: var(--ds-color-info-border-strong);
 }
 
 .panelIconWrapper_error svg {
-  color: var(--fds-semantic-surface-danger-default);
+  color: var(--ds-color-danger-base-default);
 }
 
 .panelIconWrapper_warning svg {
-  color: var(--fds-semantic-border-warning-default);
+  color: var(--ds-color-warning-border-default);
 }
 
 .panelContent {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   width: 100%;
 }
 
diff --git a/src/app-components/Table/Table.module.css b/src/app-components/Table/Table.module.css
index 0da64bb440..1aac438392 100644
--- a/src/app-components/Table/Table.module.css
+++ b/src/app-components/Table/Table.module.css
@@ -5,7 +5,7 @@
 .buttonContainer {
   display: flex;
   justify-content: end;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .mobileTable {
@@ -34,7 +34,7 @@
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .mobileTable td .contentWrapper {
@@ -45,17 +45,17 @@
 }
 
 .mobileTable tbody tr:last-child {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tbody tr:first-child {
-  border-top: 2px solid var(--fds-semantic-border-neutral-default);
+  border-top: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tr {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .mobileTable tr:hover td {
diff --git a/src/components/AltinnAppHeader.module.css b/src/components/AltinnAppHeader.module.css
index 5ba8f49c09..880d24b528 100644
--- a/src/components/AltinnAppHeader.module.css
+++ b/src/components/AltinnAppHeader.module.css
@@ -11,7 +11,7 @@
 }
 
 .headerLink {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-color-accent-base-default);
   font-size: 1.25rem;
   line-height: 1.5;
   margin-left: 2.25rem;
@@ -26,13 +26,13 @@
   }
 
   & a {
-    color: var(--fds-semantic-surface-action-default);
+    color: var(--ds-color-accent-base-default);
     border-bottom: 0;
   }
 
   & a:hover {
-    color: var(--fds-semantic-surface-action-default);
-    border-bottom: 3px solid var(--fds-semantic-surface-action-default);
+    color: var(--ds-color-accent-base-default);
+    border-bottom: 3px solid var(--ds-color-accent-base-default);
   }
 }
 
diff --git a/src/components/CircleIcon.module.css b/src/components/CircleIcon.module.css
index a8381bd8aa..6845c0a01d 100644
--- a/src/components/CircleIcon.module.css
+++ b/src/components/CircleIcon.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--fds-semantic-surface-action-default);
+  background-color: var(--ds-color-accent-base-default);
   width: calc(var(--icon-size) * 0.75);
   height: calc(var(--icon-size) * 0.75);
   padding: calc(var(--icon-size) * 0.25);
diff --git a/src/components/atoms/AltinnAttachment.module.css b/src/components/atoms/AltinnAttachment.module.css
index 282ca70f0e..bb220bb550 100644
--- a/src/components/atoms/AltinnAttachment.module.css
+++ b/src/components/atoms/AltinnAttachment.module.css
@@ -15,7 +15,7 @@
 
 .attachmentLink:hover {
   border-bottom: none;
-  background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
+  background-color: var(--ds-color-accent-surface-default);
 }
 
 .attachmentIcon {
diff --git a/src/components/form/Description.module.css b/src/components/form/Description.module.css
index 622c30d409..34a06a33d5 100644
--- a/src/components/form/Description.module.css
+++ b/src/components/form/Description.module.css
@@ -1,8 +1,8 @@
 .description {
   word-break: break-word;
-  line-height: var(--fds-sizing-6);
+  line-height: var(--ds-size-6);
   color: var(--semantic-text-neutral-subtle);
   display: inline-block;
   font-weight: normal;
-  font-size: var(--fds-sizing-4);
+  font-size: var(--ds-size-4);
 }
diff --git a/src/components/form/Fieldset.module.css b/src/components/form/Fieldset.module.css
index f2a8c6ff86..4225875ef4 100644
--- a/src/components/form/Fieldset.module.css
+++ b/src/components/form/Fieldset.module.css
@@ -8,5 +8,5 @@
 .description {
   font-size: 1.125rem;
   margin: 0;
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
index 87e4ae3ca6..c1e653caa7 100644
--- a/src/components/form/RadioButton.module.css
+++ b/src/components/form/RadioButton.module.css
@@ -1,6 +1,6 @@
 .radioLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: center;
 }
 
@@ -10,10 +10,10 @@
 
 .card {
   border-radius: 6px;
-  background-color: var(--fds-semantic-background-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
   width: 100%;
-  padding: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-3);
+  padding: var(--ds-size-2);
+  margin-bottom: var(--ds-size-3);
   cursor: pointer;
 }
 
@@ -22,23 +22,22 @@
 }
 
 .card:hover {
-  background: var(--fds-semantic-surface-neutral-subtle-hover);
+  background: var(--ds-color-neutral-surface-default);
 }
 
 .card:active {
-  background: var(--fds-semantic-border-neutral-subtle);
+  background: var(--ds-color-neutral-border-subtle);
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--fds-semantic-surface-neutral-selected);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-first-active);
+  background: var(--ds-color-neutral-surface-tinted);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-brand1-base-active);
 }
 
 .card:has(:focus-visible) {
-  --fds-focus-border-width: 3px;
-  background: var(--fds-semantic-surface-neutral-selected);
+  background: var(--ds-color-neutral-surface-tinted);
 
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
 }
diff --git a/src/components/form/caption/Caption.module.css b/src/components/form/caption/Caption.module.css
index 58d120d38b..2e2b2c1c21 100644
--- a/src/components/form/caption/Caption.module.css
+++ b/src/components/form/caption/Caption.module.css
@@ -1,6 +1,6 @@
 .tableCaption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .captionTitle {
@@ -10,5 +10,5 @@
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
diff --git a/src/components/label/Label.module.css b/src/components/label/Label.module.css
index a18230d6ea..8004622a5a 100644
--- a/src/components/label/Label.module.css
+++ b/src/components/label/Label.module.css
@@ -1,6 +1,6 @@
 .fieldWrapper {
   display: grid;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .fullWidth {
diff --git a/src/components/label/LabelContent.module.css b/src/components/label/LabelContent.module.css
index 4aa85c2098..96b3c4a86f 100644
--- a/src/components/label/LabelContent.module.css
+++ b/src/components/label/LabelContent.module.css
@@ -1,6 +1,6 @@
 .labelContainer {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
 
@@ -11,10 +11,10 @@
 .labelWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
diff --git a/src/components/presentation/NavBar.module.css b/src/components/presentation/NavBar.module.css
index ef05496d2e..836b641d6a 100644
--- a/src/components/presentation/NavBar.module.css
+++ b/src/components/presentation/NavBar.module.css
@@ -15,7 +15,7 @@
 }
 
 .buttonMargin {
-  margin-top: calc(2 * var(--fds-focus-border-width));
+  margin-top: calc(2 * var(--ds-border-width-focus));
 }
 
 @media only screen and (max-width: 1200px) {
diff --git a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
index 8a74fafe46..33cac28e15 100644
--- a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
+++ b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .small {
diff --git a/src/components/presentation/Progress.module.css b/src/components/presentation/Progress.module.css
index f90c6d844a..e5634e73e1 100644
--- a/src/components/presentation/Progress.module.css
+++ b/src/components/presentation/Progress.module.css
@@ -6,12 +6,12 @@
 }
 
 .circleBackground {
-  stroke: var(--fds-colors-blue-200);
+  stroke: var(--ds-global-blue-2);
 }
 
 .circleTransition {
   transition: stroke-dashoffset 1s ease-in-out;
-  stroke: var(--fds-colors-blue-900);
+  stroke: var(--ds-global-blue-9);
   stroke-dasharray: 100 100;
 }
 
diff --git a/src/features/devtools/DevTools.module.css b/src/features/devtools/DevTools.module.css
index 703b73ad41..709379675d 100644
--- a/src/features/devtools/DevTools.module.css
+++ b/src/features/devtools/DevTools.module.css
@@ -18,8 +18,8 @@
   justify-content: center;
   height: 100%;
   text-align: center;
-  color: var(--fds-colors-red-600);
-  border: 3px solid var(--fds-colors-red-600);
+  color: var(--ds-global-red-6);
+  border: 3px solid var(--ds-global-red-6);
 }
 
 .panel {
diff --git a/src/features/footer/Footer.module.css b/src/features/footer/Footer.module.css
index a23ef34326..66552b7a8d 100644
--- a/src/features/footer/Footer.module.css
+++ b/src/features/footer/Footer.module.css
@@ -28,7 +28,7 @@
 
 .separator {
   margin: 36px 0;
-  background-color: var(--fds-semantic-surface-neutral-dark);
+  background-color: var(----ds-color-neutral-base-default);
   height: 1px;
   width: 100%;
 }
diff --git a/src/features/instantiate/selection/InstanceSelection.module.css b/src/features/instantiate/selection/InstanceSelection.module.css
index d2ecf3330a..13949a4982 100644
--- a/src/features/instantiate/selection/InstanceSelection.module.css
+++ b/src/features/instantiate/selection/InstanceSelection.module.css
@@ -51,7 +51,7 @@ Altinn, and making sure they are consistent. */
   background-color: #f5f5f5; /* Remove this when upgrading to the new design system component look*/
 }
 tr.tableFooter:hover {
-  background-color: var(--fds-semantic-background-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 .startNewButtonContainer {
diff --git a/src/features/pdf/PDFView.module.css b/src/features/pdf/PDFView.module.css
index 2d9dbfb8b1..bd84bccb29 100644
--- a/src/features/pdf/PDFView.module.css
+++ b/src/features/pdf/PDFView.module.css
@@ -15,20 +15,20 @@
 .pdf-wrapper .page {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
-  margin-bottom: var(--fds-spacing-2);
+  gap: var(--ds-size-4);
+  margin-bottom: var(--ds-size-2);
 }
 
 .pdf-wrapper .instanceInfo {
-  margin-bottom: var(--fds-spacing-4);
+  margin-bottom: var(--ds-size-4);
 }
 
 .paymentTitleContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--fds-spacing-6);
-  margin-bottom: var(--fds-spacing-3);
+  gap: var(--ds-size-6);
+  margin-bottom: var(--ds-size-3);
   h1 {
     margin-bottom: 0;
   }
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index cc3b0706ae..4cb2cfd0ce 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -124,7 +124,7 @@ function SoftValidations({
   const getUniqueKeyFromObject = useGetUniqueKeyFromObject();
 
   return (
-    <div style={{ paddingTop: 'var(--fds-spacing-2)' }}>
+    <div style={{ paddingTop: 'var(--ds-size-2)' }}>
       <AlertDesignSystem
         style={{ breakInside: 'avoid' }}
         data-color={severity}
diff --git a/src/index.css b/src/index.css
index 16c8517b8b..625c162c04 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,7 +12,7 @@
 }
 
 /* Workaround for the design-system aggressively setting the font to 'Inter' */
-[class^='fds-'] {
+[class^='ds-'] {
   font-family: var(--font-family);
 }
 
@@ -64,11 +64,6 @@
   --repeating-group-edit-divider-color: var(--colors-blue-200);
   --repeating-group-error-color: var(--colors-red-200);
 
-  /* Focus styles */
-  --fds-inner-focus-border-color: #1e2b3c;
-  --fds-outer-focus-border-color: #fadf4b;
-  --fds-focus-border-width: 3px;
-
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);
   --dashed-border-primary: 1px dashed var(--border-color-primary);
@@ -79,16 +74,16 @@
   --button-gap: 0.75rem;
 
   /* Toast styles */
-  --toastify-color-info: var(--fds-semantic-surface-action-primary-default);
-  --toastify-color-success: var(--fds-semantic-surface-success-default);
-  --toastify-color-warning: var(--fds-semantic-surface-warning-default);
-  --toastify-color-error: var(--fds-semantic-surface-danger-default);
+  --toastify-color-info: var(--ds-color-accent-base-default);
+  --toastify-color-success: var(--ds-color-success-base-default);
+  --toastify-color-warning: var(--ds-color-warning-surface-default);
+  --toastify-color-error: var(--ds-color-danger-base-default);
   --toastify-toast-width: 400px;
 }
 
 .Toastify__toast {
   line-height: 1.5rem;
-  padding: var(--fds-spacing-3) var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3);
+  padding: var(--ds-size-3) var(--ds-size-3) var(--ds-size-4) var(--ds-size-3);
 }
 
 @media only screen and (min-width: 768px) {
diff --git a/src/layout/Accordion/Accordion.test.tsx b/src/layout/Accordion/Accordion.test.tsx
index 31f0ce8639..c096d353b0 100644
--- a/src/layout/Accordion/Accordion.test.tsx
+++ b/src/layout/Accordion/Accordion.test.tsx
@@ -20,16 +20,16 @@ describe('Accordion', () => {
 
   it('should open accordion by default if openByDefault is set to true', async () => {
     const { container } = await render({ openByDefault: true });
-    const element = container.querySelector('.fds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('fds-animate-height--open');
-    expect(element).not.toHaveClass('fds-animate-height--closed');
+    const element = container.querySelector('.ds-animate-height') as HTMLElement;
+    expect(element).toHaveClass('ds-animate-height--open');
+    expect(element).not.toHaveClass('ds-animate-height--closed');
   });
 
   it('accordion should be closed by default if openByDefault is set to false', async () => {
     const { container } = await render({ openByDefault: false });
-    const element = container.querySelector('.fds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('fds-animate-height--closed');
-    expect(element).not.toHaveClass('fds-animate-height--open');
+    const element = container.querySelector('.ds-animate-height') as HTMLElement;
+    expect(element).toHaveClass('ds-animate-height--closed');
+    expect(element).not.toHaveClass('ds-animate-height--open');
   });
 });
 
diff --git a/src/layout/Accordion/SummaryAccordion.module.css b/src/layout/Accordion/SummaryAccordion.module.css
index beb1e204af..2d72d25709 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -1,20 +1,20 @@
 .container {
   border-radius: 3px;
-  border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 .header {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 .padding {
-  padding: var(--fds-spacing-5);
+  padding: var(--ds-spacing-5);
 }
 
 .paddingSmall {
-  padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  padding: var(--ds-size-3) var(--ds-spacing-5);
 }
 
 .container .header > h2,
diff --git a/src/layout/AddToList/AddToList.tsx b/src/layout/AddToList/AddToList.tsx
index 3c893ef0df..a17751f7c6 100644
--- a/src/layout/AddToList/AddToList.tsx
+++ b/src/layout/AddToList/AddToList.tsx
@@ -90,7 +90,7 @@ export function AddToListModal({
   return (
     <Modal
       ref={addToListModalRef}
-      style={{ padding: 'var(--fds-spacing-3)' }}
+      style={{ padding: 'var(--ds-size-3)' }}
       backdropClose={backdropClose}
       onClose={onClose}
     >
diff --git a/src/layout/Address/AddressSummary/AddressSummary.module.css b/src/layout/Address/AddressSummary/AddressSummary.module.css
index 425bbd1287..c7ed0fbb98 100644
--- a/src/layout/Address/AddressSummary/AddressSummary.module.css
+++ b/src/layout/Address/AddressSummary/AddressSummary.module.css
@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .addressSummaryComponentPostplaceZipCode {
@@ -49,5 +49,5 @@
 }
 
 .addressComponentZipCode {
-  margin-right: var(--fds-spacing-4);
+  margin-right: var(--ds-size-4);
 }
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index cfbb36c8be..2f9112a3d8 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
@@ -6,7 +6,7 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .checkboxGroup div label {
@@ -16,7 +16,7 @@
 
 .checkboxLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: center;
 }
 
diff --git a/src/layout/Checkboxes/CheckboxesSummary.module.css b/src/layout/Checkboxes/CheckboxesSummary.module.css
index c67a1f1b7f..1ec76dd082 100644
--- a/src/layout/Checkboxes/CheckboxesSummary.module.css
+++ b/src/layout/Checkboxes/CheckboxesSummary.module.css
@@ -5,7 +5,7 @@
 .labelValueWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .checkboxSummaryItem {
diff --git a/src/layout/FileUpload/Error/FailedAttachments.module.css b/src/layout/FileUpload/Error/FailedAttachments.module.css
index 05f72faedd..c17869431d 100644
--- a/src/layout/FileUpload/Error/FailedAttachments.module.css
+++ b/src/layout/FileUpload/Error/FailedAttachments.module.css
@@ -18,7 +18,7 @@
 }
 
 .close-button {
-  color: var(--fds-semantic-text-neutral-default);
+  color: var(--ds-color-neutral-text-default);
   margin: -16px -16px 0 0;
   padding: 8px;
   min-width: 20px;
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
index f40352ab03..1f9bd8dffe 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
@@ -7,13 +7,13 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
   box-shadow: none;
   border-spacing: 0;
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .tableMobile tbody tr td {
@@ -52,7 +52,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-strong);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -60,5 +60,5 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
 }
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
index 6dbd15b83b..3c5fe82690 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
@@ -19,11 +19,11 @@ tr.blueUnderlineDotted td {
 }
 
 tr.grayUnderlineDotted td {
-  border-bottom: 1px dotted var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dotted var(--ds-color-neutral-border-strong);
 }
 
 tr.grayUnderline td {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
 }
 
 .altinnLoader {
diff --git a/src/layout/Grid/Grid.module.css b/src/layout/Grid/Grid.module.css
index 3a66d1e8e6..4794422b10 100644
--- a/src/layout/Grid/Grid.module.css
+++ b/src/layout/Grid/Grid.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index ecdbd47f11..02dbda52bf 100644
--- a/src/layout/Grid/GridSummary.module.css
+++ b/src/layout/Grid/GridSummary.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 tr > .fullWidthCellFirst {
@@ -18,11 +18,11 @@ tr > .fullWidthCellLast {
 
 .table th {
   font-weight: 500;
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-strong);
+  border-bottom: 2px solid var(--ds-color-neutral-base-default);
 }
 
 .table td {
-  border-bottom: 1px dashed var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dashed var(--ds-color-neutral-border-strong);
 }
 
 .table tr:hover td {
@@ -92,11 +92,11 @@ tr > .fullWidthCellLast {
 }
 
 .validationError {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .errorMessage {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .mobileFieldset {
@@ -131,7 +131,7 @@ tr > .fullWidthCellLast {
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .responsiveTable td .contentWrapper {
@@ -146,9 +146,9 @@ tr > .fullWidthCellLast {
 }
 
 .responsiveTable tr {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .responsiveTable td[data-header-title]:not([data-header-title=''])::before,
diff --git a/src/layout/Group/GroupComponent.module.css b/src/layout/Group/GroupComponent.module.css
index b18c5500a6..d27f15086c 100644
--- a/src/layout/Group/GroupComponent.module.css
+++ b/src/layout/Group/GroupComponent.module.css
@@ -1,16 +1,16 @@
 .groupWrapper {
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-9);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-9);
   width: 100%;
 
   .legend,
   .description {
-    padding: 0 var(--fds-spacing-3);
+    padding: 0 var(--ds-size-3);
   }
 }
 
 .panelWrapper {
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-size-3);
   padding-bottom: 0;
   width: 100%;
 
@@ -24,22 +24,22 @@
   flex-wrap: wrap;
 
   > * {
-    padding: var(--fds-spacing-3);
+    padding: var(--ds-size-3);
   }
 }
 
 .indented {
   border-left: 2px solid #949494;
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-size-3);
   padding-right: 0;
-  margin-left: var(--fds-spacing-3);
+  margin-left: var(--ds-size-3);
 }
 
 .summary {
   width: 100%;
 
   .groupContainer > * {
-    padding: var(--fds-spacing-3) 0;
+    padding: var(--ds-size-3) 0;
   }
 
   .legend,
diff --git a/src/layout/Group/GroupSummary.module.css b/src/layout/Group/GroupSummary.module.css
index 6b6d89f322..94b4885b75 100644
--- a/src/layout/Group/GroupSummary.module.css
+++ b/src/layout/Group/GroupSummary.module.css
@@ -2,13 +2,13 @@
   color: var(--semantic-text-neutral-subtle);
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .nested {
-  border-width: var(--fds-border_width-default);
-  border-radius: var(--fds-border_radius-medium);
-  border-color: var(--fds-semantic-border-neutral-default);
+  border-width: var(--ds-border-width-default);
+  border-radius: var(--ds-border-radius-md);
+  border-color: var(--ds-color-neutral-border-strong);
   border-style: dashed;
-  padding: var(--fds-spacing-6) var(--fds-spacing-4);
+  padding: var(--ds-size-6) var(--ds-size-4);
 }
diff --git a/src/layout/Likert/Summary2/LikertSummary.module.css b/src/layout/Likert/Summary2/LikertSummary.module.css
index a7f3204150..c2e76abe8a 100644
--- a/src/layout/Likert/Summary2/LikertSummary.module.css
+++ b/src/layout/Likert/Summary2/LikertSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .editButton {
diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css
index 89497ed486..08aae1deeb 100644
--- a/src/layout/LikertItem/LikertItemComponent.module.css
+++ b/src/layout/LikertItem/LikertItemComponent.module.css
@@ -18,7 +18,7 @@ Altinn, and making sure they are consistent. */
 }
 
 .likertTable thead th {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .likertTable tr:not(:last-of-type) td {
@@ -47,7 +47,7 @@ Altinn, and making sure they are consistent. */
 
 .likertHeading {
   text-align: left;
-  padding-bottom: var(--fds-spacing-4);
+  padding-bottom: var(--ds-size-4);
 }
 
 .likertMobileGroup {
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index f56130e909..a9e1a74076 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -4,7 +4,7 @@
 
 .listTable caption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-4);
+  padding-bottom: var(--ds-size-4);
 }
 
 .listTable th:first-of-type {
@@ -12,7 +12,7 @@
 }
 
 .listTable th {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .listTable tr {
@@ -31,7 +31,7 @@
 
 .selectedRow,
 .selectedRowCell {
-  background-color: var(--fds-colors-blue-100);
+  background-color: var(--ds-global-blue-1);
 }
 
 .pagination {
@@ -39,7 +39,7 @@
   display: flex;
   justify-content: right;
   align-items: center;
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
   width: 100%;
 }
 .paginationMobile {
@@ -52,17 +52,17 @@
 }
 
 .mobileRadioGroup > div :hover {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .mobileRadio {
-  border-top: 1px solid var(--fds-colors-grey-200);
-  padding: var(--fds-spacing-4);
-  gap: var(--fds-spacing-8);
+  border-top: 1px solid var(--ds-color-neutral-2);
+  padding: var(--ds-size-4);
+  gap: var(--ds-size-8);
 }
 
 .mobileRadio input:checked:hover {
-  background-color: var(--fds-radio-border-color);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .mobileRadio label {
@@ -72,11 +72,11 @@
 .mobileRadio span {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .mobileRadio label div {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 72a19b3911..eb4379063b 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -244,7 +244,7 @@ function Pagination({
   const textStrings = language?.['list_component'];
 
   return (
-    <div className={cn({ [classes.paginationMobile]: isMobile }, classes.pagination, 'fds-table__header__cell')}>
+    <div className={cn({ [classes.paginationMobile]: isMobile }, classes.pagination, 'ds-table__header__cell')}>
       <CustomPagination
         nextLabel={textStrings['nextPage']}
         nextLabelAriaLabel={textStrings['nextPageAriaLabel']}
diff --git a/src/layout/Map/MapComponent.module.css b/src/layout/Map/MapComponent.module.css
index 897405ec24..434e32f936 100644
--- a/src/layout/Map/MapComponent.module.css
+++ b/src/layout/Map/MapComponent.module.css
@@ -53,7 +53,7 @@
 }
 
 .map-error {
-  border-color: var(--fds-semantic-border-danger-default);
+  border-color: var(--ds-color-danger-border-default);
   border-width: 2px;
   border-style: solid;
 }
diff --git a/src/layout/Map/Summary2/MapSummary.module.css b/src/layout/Map/Summary2/MapSummary.module.css
index 780a08ce60..a45585463d 100644
--- a/src/layout/Map/Summary2/MapSummary.module.css
+++ b/src/layout/Map/Summary2/MapSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   break-inside: avoid;
 }
 
@@ -17,7 +17,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/NavigationBar/NavigationBarComponent.module.css b/src/layout/NavigationBar/NavigationBarComponent.module.css
index a9c0d25e84..7caf03ffdf 100644
--- a/src/layout/NavigationBar/NavigationBarComponent.module.css
+++ b/src/layout/NavigationBar/NavigationBarComponent.module.css
@@ -49,9 +49,9 @@
 }
 
 .buttonBase:focus-within {
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
 }
 
 .buttonBase:disabled {
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css b/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
index 1c9ce3141d..735ba0eb06 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
@@ -9,7 +9,7 @@
       'apiError';
   }
   .submit {
-    margin-top: var(--fds-spacing-6);
+    margin-top: var(--ds-size-6);
   }
 }
 
@@ -23,7 +23,7 @@
       'orgnr submit'
       'orgname .'
       'apiError .';
-    column-gap: var(--fds-spacing-6);
+    column-gap: var(--ds-size-6);
   }
   .submit {
     margin-top: 0;
@@ -43,7 +43,7 @@
   }
 
   .orgname {
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
     grid-area: orgname;
   }
 
@@ -54,6 +54,6 @@
 
   .apiError {
     grid-area: apiError;
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
   }
 }
diff --git a/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css b/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
index c245f0e3d8..2d990f8a2c 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
+++ b/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
@@ -17,7 +17,7 @@
 .organisationSummaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   width: 100%;
 }
 
diff --git a/src/layout/Payment/PaymentComponent.module.css b/src/layout/Payment/PaymentComponent.module.css
index df8a49952a..f6d83ae310 100644
--- a/src/layout/Payment/PaymentComponent.module.css
+++ b/src/layout/Payment/PaymentComponent.module.css
@@ -1,16 +1,16 @@
 .buttonContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
 }
 
 .alertContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
 }
 
 .paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
index 8107e50074..9238dd3fda 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
@@ -1,8 +1,8 @@
 .infoContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
   flex-direction: row;
-  padding: var(--fds-spacing-3) 0;
+  padding: var(--ds-size-3) 0;
 }
 
 .infoDetailsContainer {
@@ -13,7 +13,7 @@
 .senderReceiverInfoContainer {
   display: flex;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 
   table {
     width: 100%;
@@ -27,5 +27,5 @@
 .paymentSummaryContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
diff --git a/src/layout/PaymentDetails/PaymentDetailsTable.module.css b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
index 90644d4077..a83807c425 100644
--- a/src/layout/PaymentDetails/PaymentDetailsTable.module.css
+++ b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
@@ -7,5 +7,5 @@
 }
 
 .tableRow:hover td {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
diff --git a/src/layout/PersonLookup/PersonLookupComponent.module.css b/src/layout/PersonLookup/PersonLookupComponent.module.css
index 1af19f3ffb..10bd284411 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.module.css
+++ b/src/layout/PersonLookup/PersonLookupComponent.module.css
@@ -6,7 +6,7 @@
 
   .nameLabel,
   .submit {
-    margin-top: var(--fds-spacing-6);
+    margin-top: var(--ds-size-6);
   }
 }
 
@@ -16,7 +16,7 @@
     grid-template-columns: repeat(2, minmax(250px, 250px)) auto;
     grid-template-areas: 'ssnLabel nameLabel .' 'ssn name submit' 'apiError apiError .';
     align-items: start;
-    column-gap: var(--fds-spacing-6);
+    column-gap: var(--ds-size-6);
   }
   .nameLabel,
   .submit {
@@ -51,6 +51,6 @@
 
   .apiError {
     grid-area: apiError;
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
   }
 }
diff --git a/src/layout/PersonLookup/PersonLookupSummary.module.css b/src/layout/PersonLookup/PersonLookupSummary.module.css
index 900d2922f0..acfcc38990 100644
--- a/src/layout/PersonLookup/PersonLookupSummary.module.css
+++ b/src/layout/PersonLookup/PersonLookupSummary.module.css
@@ -17,7 +17,7 @@
 .personSummaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   width: 100%;
 }
 
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
index ccb288b1fd..7f755a107c 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
@@ -9,7 +9,7 @@
 
 .row,
 .row td {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
 }
 
 .hidden {
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index f2b14ba42a..52424f1da0 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -57,16 +57,16 @@ Altinn, and making sure they are consistent. */
 }
 
 .nestedTable {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 .nestedTable > thead > tr > th {
-  /*background-color: var(--fds-semantic-background-subtle);*/
+  /*background-color: var(--ds-color-neutral-background-subtle);*/
   background-color: #f5f5f5;
 }
 
 .nestedTable thead:not(:first-of-type) th {
-  /*border-top: 2px solid var(--fds-semantic-border-divider-default);*/
+  /*border-top: 2px solid var(--ds-color-neutral-border-subtle);*/
   border-top: 1px solid #dde3e5; /* Remove this and uncomment the line above when adjusting the new table component*/
 }
 
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
index c1b33eb2fb..08419bcc5b 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
@@ -1,37 +1,37 @@
 .summaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .contentWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-size-8);
 }
 
 .rowDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border-width-highlight);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-strong);
   margin: 0;
 }
 
 .nestedSummaryWrapper {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
   flex-direction: column;
 }
 
 .nestedContentWrapper {
-  border: dashed 1px var(--fds-semantic-border-neutral-default);
-  padding: var(--fds-spacing-2) var(--fds-spacing-4);
-  border-radius: var(--fds-border_radius-medium);
+  border: dashed 1px var(--ds-color-neutral-border-strong);
+  padding: var(--ds-size-2) var(--ds-size-4);
+  border-radius: var(--ds-border-radius-md);
 }
 
 .errorMessage {
   display: flex;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
index ca777dd16a..0381fb7d5c 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
@@ -24,7 +24,7 @@
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .mobileTable td .contentWrapper {
@@ -35,17 +35,17 @@
 }
 
 .mobileTable tbody tr:last-child {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tbody tr:first-child {
-  border-top: 2px solid var(--fds-semantic-border-neutral-default);
+  border-top: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tr {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .mobileTable tr:hover td {
diff --git a/src/layout/Subform/SubformComponent.module.css b/src/layout/Subform/SubformComponent.module.css
index e6b6874cc9..f2d4235943 100644
--- a/src/layout/Subform/SubformComponent.module.css
+++ b/src/layout/Subform/SubformComponent.module.css
@@ -70,7 +70,7 @@ Altinn, and making sure they are consistent. */
 
 .addButton {
   width: 100%;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .emptyField {
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
index a0ee45dee2..cdcfd19dd0 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
@@ -1,11 +1,11 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .table {
@@ -17,8 +17,8 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-top: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-2);
+  margin-top: var(--ds-size-2);
+  margin-bottom: var(--ds-size-2);
   box-shadow: none;
   border-spacing: 0;
 }
@@ -59,7 +59,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-strong);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -74,8 +74,8 @@ tr.noRowSpacing td {
 }
 
 .summaryWrapperMargin {
-  margin-top: var(--fds-spacing-3);
-  margin-bottom: var(--fds-spacing-8);
+  margin-top: var(--ds-size-3);
+  margin-bottom: var(--ds-size-8);
 }
 
 .editColumnHeader {
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
index fb37d6f25f..c9bb926571 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
@@ -1,7 +1,7 @@
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .labelValueWrapper.compact {
@@ -9,7 +9,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-size-2);
 }
 
 .formValue {
@@ -17,12 +17,12 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .summaryItemWrapper {
@@ -35,7 +35,7 @@
 .summaryItem {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .editButton {
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
index 28f0beda99..1077506ffa 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
@@ -7,14 +7,14 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   break-inside: avoid;
 }
 
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .labelValueWrapper.compact {
@@ -22,7 +22,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-size-2);
 }
 
 .formValue {
@@ -30,7 +30,7 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 669146ab41..87cde66b1d 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -2,8 +2,8 @@
   background-color: white;
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 .icon {
-  width: var(--fds-sizing-6);
+  width: var(--ds-size-6);
 }
diff --git a/src/layout/Tabs/TabsSummary.module.css b/src/layout/Tabs/TabsSummary.module.css
index 358d3dd555..59d2555fc6 100644
--- a/src/layout/Tabs/TabsSummary.module.css
+++ b/src/layout/Tabs/TabsSummary.module.css
@@ -1,18 +1,18 @@
 .summaryContent {
   display: flex;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   flex-direction: column;
 }
 
 .tabDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border-width-highlight);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-strong);
   margin: 0;
 }
 
 .tabWrapper {
   display: flex;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-size-8);
   flex-direction: column;
 }
diff --git a/src/styles/combobox.module.css b/src/styles/combobox.module.css
index 496af66398..9fb3c9f8d9 100644
--- a/src/styles/combobox.module.css
+++ b/src/styles/combobox.module.css
@@ -1,8 +1,8 @@
 /*
  * Workaround to make the combobox shrink on narrow screens
  */
-.container [class*='fds-combobox__input__wrapper'],
-.container [class*='fds-combobox__chip-and-input'],
+.container [class*='ds-combobox__input__wrapper'],
+.container [class*='ds-combobox__chip-and-input'],
 .container input {
   min-width: 0;
 }
diff --git a/src/styles/utils.module.css b/src/styles/utils.module.css
index 3145ef68e0..4d15a2ab73 100644
--- a/src/styles/utils.module.css
+++ b/src/styles/utils.module.css
@@ -1,8 +1,8 @@
 /* Focus utility class */
 .focusable:focus-within {
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
 }
 
 .visuallyHidden {
diff --git a/test/e2e/integration/component-library/checkboxes.ts b/test/e2e/integration/component-library/checkboxes.ts
index dabf8058a2..f1927fd106 100644
--- a/test/e2e/integration/component-library/checkboxes.ts
+++ b/test/e2e/integration/component-library/checkboxes.ts
@@ -25,7 +25,7 @@ describe('Checkboxes component', () => {
 
     cy.get('div[data-componentbaseid="CheckboxesPage-Header-Summary2-Display-String"]')
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 });
diff --git a/test/e2e/integration/component-library/dropdown.ts b/test/e2e/integration/component-library/dropdown.ts
index 2fcce05c91..234d02b93f 100644
--- a/test/e2e/integration/component-library/dropdown.ts
+++ b/test/e2e/integration/component-library/dropdown.ts
@@ -12,7 +12,7 @@ describe('Dropdown component', () => {
     cy.get('div[role="listbox"]').contains('span', testText).click();
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
   });
 
diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index 542dfd64d4..a734ee4ce2 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -16,7 +16,7 @@ describe('Multiple select component', () => {
     cy.get('div[role="listbox"]').contains('span', checkboxText).click();
     cy.get('div[data-componentbaseid="MultipleSelectPage-Header-Summary2-Display-String"]')
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', checkboxText);
   });
 });
diff --git a/test/e2e/integration/component-library/radio-buttons.ts b/test/e2e/integration/component-library/radio-buttons.ts
index 696a06188f..d0b45b4717 100644
--- a/test/e2e/integration/component-library/radio-buttons.ts
+++ b/test/e2e/integration/component-library/radio-buttons.ts
@@ -11,7 +11,7 @@ describe('RadioButtons component', () => {
     cy.contains('label', testText).click();
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
   });
 });
diff --git a/test/e2e/integration/component-library/text-area.ts b/test/e2e/integration/component-library/text-area.ts
index 61813aca58..a0a692f065 100644
--- a/test/e2e/integration/component-library/text-area.ts
+++ b/test/e2e/integration/component-library/text-area.ts
@@ -11,7 +11,7 @@ describe('TextArea component', () => {
     cy.get('#TextareaPage-Textarea').type(testText);
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
   });
 });
diff --git a/test/e2e/integration/frontend-test/options.ts b/test/e2e/integration/frontend-test/options.ts
index 732fbc8759..6e20023bc7 100644
--- a/test/e2e/integration/frontend-test/options.ts
+++ b/test/e2e/integration/frontend-test/options.ts
@@ -361,18 +361,18 @@ describe('Options', () => {
 
     cy.dsReady('[data-componentid="ingredientType-0"]');
     cy.get('[data-componentid="ingredientType-0"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('contain.text', 'Vannmelon');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Blåbær');
-    cy.get('[class*="fds-combobox__option"]').findByText('Vannmelon').click();
+    cy.get('[class*="ds-combobox__option"]').should('contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Blåbær');
+    cy.get('[class*="ds-combobox__option"]').findByText('Vannmelon').click();
     cy.get('[data-componentid="ingredientId-0"]').should('have.text', '10');
 
     cy.findByRole('button', { name: 'Legg til ny' }).click();
     cy.dsReady('[data-componentid="ingredientType-1"]');
     cy.get('[data-componentid="ingredientType-1"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('contain.text', 'Banan');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Vannmelon');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Blåbær');
-    cy.get('[class*="fds-combobox__option"]').findByText('Banan').click();
+    cy.get('[class*="ds-combobox__option"]').should('contain.text', 'Banan');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Blåbær');
+    cy.get('[class*="ds-combobox__option"]').findByText('Banan').click();
     cy.get('[data-componentid="ingredientId-1"]').should('have.text', '5');
 
     // Disliking 'vannmelon' will remove the selection and not allow it to be re-selected
@@ -380,7 +380,7 @@ describe('Options', () => {
     cy.get('[data-componentid="ingredientId-0"]').should('have.text', '');
     cy.get('[data-componentid="ingredientId-1"]').should('have.text', '5');
     cy.get('[data-componentid="ingredientType-0"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Vannmelon');
     cy.get('[data-componentid="ingredientType-0"]').type('{esc}');
 
     // Add two rows with no ingredients selected
diff --git a/test/e2e/integration/payment-test/payment.ts b/test/e2e/integration/payment-test/payment.ts
index ee611ed294..05829788f9 100644
--- a/test/e2e/integration/payment-test/payment.ts
+++ b/test/e2e/integration/payment-test/payment.ts
@@ -67,7 +67,7 @@ describe('Payment', () => {
         },
       ).as('paymentInfoRequest');
       cy.wait('@paymentInfoRequest').then((_) => {
-        cy.get('div.fds-alert--warning')
+        cy.get('div.ds-alert--warning')
           .should('exist')
           .and('be.visible')
           .within(() => {
diff --git a/test/e2e/integration/subform-test/subform.ts b/test/e2e/integration/subform-test/subform.ts
index 55d84052a2..25a68d912e 100644
--- a/test/e2e/integration/subform-test/subform.ts
+++ b/test/e2e/integration/subform-test/subform.ts
@@ -17,8 +17,8 @@ describe('Subform test', () => {
     cy.get('#Input-Name').should('be.visible').type(name);
 
     // Test process next when required subform is missing
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').contains('Neste').scrollIntoView();
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').should('be.visible').click();
+    cy.get('[data-testid="NavigationButtons"] button.ds-btn--primary').contains('Neste').scrollIntoView();
+    cy.get('[data-testid="NavigationButtons"] button.ds-btn--primary').should('be.visible').click();
     cy.get('[data-testid="ErrorReport"]').should('be.visible');
 
     // Navigate to the subform page
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index 8aea50aa12..43451fe461 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -50,7 +50,7 @@ export class AppFrontend {
   public notExpandedWidth = '[data-expanded="false"]';
 
   public helpText = {
-    button: 'button[class^="fds-helptext"]',
+    button: 'button[class^="ds-helptext"]',
     alert: 'div[role="dialog"]',
   };
 
diff --git a/test/e2e/support/apps/component-library/fillAddressAndVerify.ts b/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
index c81d54e4e3..19193651aa 100644
--- a/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
+++ b/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
@@ -6,23 +6,20 @@ export const fillInAddressAndVerify = (address: string, co: string, zip: string,
   cy.get('#address_house_number_AddressPage-Address').type(houseNumber);
 
   // Verify Gateadresse (Street address)
-  cy.get('[data-testid="summary-single-value-component"]')
-    .eq(0)
-    .find('span.fds-paragraph')
-    .should('have.text', address);
+  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.ds-paragraph').should('have.text', address);
 
   // Verify C/O eller annan tilleggsadresse (C/O or additional address)
-  cy.get('[data-testid="summary-single-value-component"]').eq(1).find('span.fds-paragraph').should('have.text', co);
+  cy.get('[data-testid="summary-single-value-component"]').eq(1).find('span.ds-paragraph').should('have.text', co);
 
   // Verify Postnr (Postal code)
-  cy.get('[data-testid="summary-single-value-component"]').eq(2).find('span.fds-paragraph').should('have.text', zip);
+  cy.get('[data-testid="summary-single-value-component"]').eq(2).find('span.ds-paragraph').should('have.text', zip);
 
   // Verify Poststad (City)
-  cy.get('[data-testid="summary-single-value-component"]').eq(3).find('span.fds-paragraph').should('have.text', 'OSLO');
+  cy.get('[data-testid="summary-single-value-component"]').eq(3).find('span.ds-paragraph').should('have.text', 'OSLO');
 
   // Verify Bustadnummer (House number)
   cy.get('[data-testid="summary-single-value-component"]')
     .eq(4)
-    .find('span.fds-paragraph')
+    .find('span.ds-paragraph')
     .should('have.text', houseNumber);
 };
diff --git a/test/e2e/support/apps/component-library/inputAndVerify.ts b/test/e2e/support/apps/component-library/inputAndVerify.ts
index fd52474c42..7fd29c1a44 100644
--- a/test/e2e/support/apps/component-library/inputAndVerify.ts
+++ b/test/e2e/support/apps/component-library/inputAndVerify.ts
@@ -1,5 +1,5 @@
 export const fillInInputAndVerify = (text: string) => {
   cy.gotoNavPage('Kort svar');
   cy.get('#InputPage-Input').type(text);
-  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.fds-paragraph').should('have.text', text);
+  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.ds-paragraph').should('have.text', text);
 };
diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index c1e3457332..70506a3c94 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -75,7 +75,7 @@ Cypress.Commands.add('dsSelect', (selector, value, debounce = true) => {
   // It is tempting to just use findByRole('option', { name: value }) here, but that's flakier than using findByText()
   // as it never retries if the element re-renders. More information here:
   // https://github.com/testing-library/cypress-testing-library/issues/205#issuecomment-974688283
-  cy.get('[class*="fds-combobox__option"]').findByText(value).click();
+  cy.get('[class*="ds-combobox__option"]').findByText(value).click();
   if (debounce) {
     cy.get('body').click();
   }

From 80bf23ee9d19f024610677463026e08e294f0dec Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 18 Feb 2025 12:32:40 +0100
Subject: [PATCH 007/170] fix radio tests

---
 src/app-components/HelpText/HelpText.tsx              |  1 +
 src/layout/NavigationBar/NavigationBarComponent.tsx   |  2 +-
 src/layout/RadioButtons/ControlledRadioGroup.test.tsx | 10 ++++++++--
 src/setupTests.ts                                     |  3 ++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index d788c5fe54..03811c15cb 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -82,6 +82,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
       <Popover
         className={classes.helpTextContent}
         data-color='info'
+        role='dialog'
         placement={placement}
         data-size={size}
         open={open}
diff --git a/src/layout/NavigationBar/NavigationBarComponent.tsx b/src/layout/NavigationBar/NavigationBarComponent.tsx
index ac52670862..766fb53cfb 100644
--- a/src/layout/NavigationBar/NavigationBarComponent.tsx
+++ b/src/layout/NavigationBar/NavigationBarComponent.tsx
@@ -160,7 +160,7 @@ export const NavigationBarComponent = ({ node }: INavigationBar) => {
                       {isProcessing === pageId && (
                         <Spinner
                           className={classes.spinner}
-                          title={langAsString('general.loading')}
+                          aria-label={langAsString('general.loading')}
                         />
                       )}
                       <span>
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
index 48de1fe195..465222c835 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
@@ -185,14 +185,20 @@ describe('RadioButtonsContainerComponent', () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for first' }),
     );
-    expect(await screen.findByRole('dialog')).toHaveTextContent(
+    expect(
+      screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for first' }),
+    ).toHaveAttribute('aria-expanded', 'true');
+    expect((await screen.findAllByRole('dialog')).at(0)).toHaveTextContent(
       'Help Text: The value from the group is: Label for first',
     );
 
     await userEvent.click(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
     );
-    expect(await screen.findByRole('dialog')).toHaveTextContent(
+    expect(
+      screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
+    ).toHaveAttribute('aria-expanded', 'true');
+    expect((await screen.findAllByRole('dialog')).at(1)).toHaveTextContent(
       'Help Text: The value from the group is: Label for second',
     );
 
diff --git a/src/setupTests.ts b/src/setupTests.ts
index e3b558d230..2342d2b545 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -4,6 +4,8 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/jest-globals';
 import 'core-js/stable/structured-clone'; // https://github.com/jsdom/jsdom/issues/3363
 import 'jest';
+// Importing CSS for jest-preview to look nicer
+import '@digdir/designsystemet-theme';
 
 import { jest } from '@jest/globals';
 import { configure as testingLibraryConfigure } from '@testing-library/dom';
@@ -17,7 +19,6 @@ import type { fetchApplicationMetadata, fetchProcessState } from 'src/queries/qu
 import type { AppQueries } from 'src/queries/types';
 
 // Importing CSS for jest-preview to look nicer
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 import 'src/index.css';
 import 'src/styles/shared.css';
 

From 6beb20ef3cd72c9c7de7578a3ee314162196643a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 19 Feb 2025 10:02:43 +0100
Subject: [PATCH 008/170] update to next.49 and fix some tests

---
 package.json                                  |  6 +-
 src/app-components/Button/Button.tsx          |  2 +-
 .../Datepicker/DatepickerDialog.tsx           | 16 ++++--
 .../PDFGeneratorPreview.tsx                   |  8 +--
 src/components/organisms/AltinnReceipt.tsx    |  4 +-
 .../organisms/AltinnReceiptSimple.tsx         |  2 +-
 src/components/presentation/Header.tsx        |  2 +-
 src/features/devtools/DevToolsControls.tsx    |  2 +-
 .../DevHiddenFunctionality.tsx                |  2 +-
 .../DevNavigationButtons.tsx                  |  2 +-
 .../ExpressionPlayground.tsx                  |  2 +-
 .../FeatureToggles/FeatureToggles.tsx         |  8 +--
 .../NodeInspector/NodeInspector.tsx           |  2 +-
 .../PermissionsEditor/PermissionsEditor.tsx   |  8 +--
 .../instantiate/containers/PartySelection.tsx |  2 +-
 .../selection/InstanceSelection.tsx           |  4 +-
 .../validation/ComponentValidations.tsx       |  2 +-
 src/language/sharedLanguage.ts                | 12 ++--
 src/layout/AddToList/AddToList.tsx            | 14 ++---
 src/layout/Checkboxes/WrappedCheckbox.tsx     |  2 +-
 src/layout/Group/GroupSummary.tsx             |  2 +-
 src/layout/Header/HeaderComponent.tsx         |  6 +-
 .../Summary/LargeLikertSummaryContainer.tsx   | 10 ++--
 .../PaymentReceiptDetails.tsx                 | 12 ++--
 .../RadioButtons/ControlledRadioGroup.tsx     |  2 +-
 .../Summary/LargeGroupSummaryContainer.tsx    |  2 +-
 yarn.lock                                     | 56 +++++++++++--------
 27 files changed, 102 insertions(+), 90 deletions(-)

diff --git a/package.json b/package.json
index 313aac1a7b..b4511b5964 100644
--- a/package.json
+++ b/package.json
@@ -133,9 +133,9 @@
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
     "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "1.0.0-next.47",
-    "@digdir/designsystemet-react": "1.0.0-next.47",
-    "@digdir/designsystemet-theme": "1.0.0-next.47",
+    "@digdir/designsystemet-css": "1.0.0-next.49",
+    "@digdir/designsystemet-react": "1.0.0-next.49",
+    "@digdir/designsystemet-theme": "1.0.0-next.49",
     "@material-ui/core": "4.12.4",
     "@navikt/aksel-icons": "7.12.2",
     "@tanstack/react-query": "5.66.0",
diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index bd728d102a..16cdc7b0b3 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -72,7 +72,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       variant={variant}
       color={color}
       data-size={size}
-      data-fullWidth={fullWidth}
+      data-fullwidth={fullWidth}
       ref={ref}
       className={className}
       title={title}
diff --git a/src/app-components/Datepicker/DatepickerDialog.tsx b/src/app-components/Datepicker/DatepickerDialog.tsx
index 3458a97157..f5feca6f18 100644
--- a/src/app-components/Datepicker/DatepickerDialog.tsx
+++ b/src/app-components/Datepicker/DatepickerDialog.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 
-import { Modal, Popover } from '@digdir/designsystemet-react';
+import { Dialog, Popover } from '@digdir/designsystemet-react';
 
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { useIsMobile } from 'src/hooks/useDeviceWidths';
@@ -22,17 +22,19 @@ export function DatePickerDialog({
 
   if (isMobile) {
     return (
-      <Modal.TriggerContext>
-        <Modal.Trigger asChild={true}>{trigger}</Modal.Trigger>
-        <Modal
+      <Dialog.TriggerContext>
+        <Dialog.Trigger asChild={true}>{trigger}</Dialog.Trigger>
+        <Dialog
           ref={modalRef}
+          role='dialog'
+          aria-hidden={!isDialogOpen}
           backdropClose={true}
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
           onClose={() => setIsDialogOpen(false)}
         >
           {children}
-        </Modal>
-      </Modal.TriggerContext>
+        </Dialog>
+      </Dialog.TriggerContext>
     );
   }
   return (
@@ -41,6 +43,8 @@ export function DatePickerDialog({
       <Popover
         className={styles.calendarWrapper}
         aria-modal
+        aria-hidden={!isDialogOpen}
+        role='dialog'
         open={isDialogOpen}
         data-size='lg'
         placement='top'
diff --git a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
index 2d32d7b317..7a7a5e8a01 100644
--- a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
+++ b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Heading, Modal, Spinner } from '@digdir/designsystemet-react';
+import { Dialog, Heading, Spinner } from '@digdir/designsystemet-react';
 import { FilePdfIcon } from '@navikt/aksel-icons';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -77,7 +77,7 @@ export function PDFGeneratorPreview({
         />
         {buttonTitle ? langAsString(buttonTitle) : langAsString('pdfPreview.defaultButtonText')}
       </Button>
-      <Modal
+      <Dialog
         ref={modalRef}
         onClose={() => abortRef.current?.abort()}
         backdropClose={true}
@@ -104,11 +104,11 @@ export function PDFGeneratorPreview({
           <div className={classes.loading}>
             <Spinner
               aria-label={langAsString('general.loading')}
-              data-size='xlarge'
+              data-size='xl'
             />
           </div>
         )}
-      </Modal>
+      </Dialog>
     </>
   );
 }
diff --git a/src/components/organisms/AltinnReceipt.tsx b/src/components/organisms/AltinnReceipt.tsx
index c140073f84..83f6fda33b 100644
--- a/src/components/organisms/AltinnReceipt.tsx
+++ b/src/components/organisms/AltinnReceipt.tsx
@@ -129,7 +129,7 @@ export function ReceiptComponent({
     >
       <Heading
         level={2}
-        data-size='medium'
+        data-size='md'
       >
         {title}
       </Heading>
@@ -156,7 +156,7 @@ export function ReceiptComponent({
           {titleSubmitted && (
             <Heading
               level={3}
-              data-size='small'
+              data-size='sm'
               style={{
                 paddingTop: '2.562rem',
                 paddingBottom: '0.3125rem',
diff --git a/src/components/organisms/AltinnReceiptSimple.tsx b/src/components/organisms/AltinnReceiptSimple.tsx
index f16fa6ec4f..ff051f1ca5 100644
--- a/src/components/organisms/AltinnReceiptSimple.tsx
+++ b/src/components/organisms/AltinnReceiptSimple.tsx
@@ -15,7 +15,7 @@ export function ReceiptComponentSimple({ title, body }: IReceiptComponentProps)
     <div className={classes.wordBreak}>
       <Heading
         level={2}
-        data-size='medium'
+        data-size='md'
       >
         {title}
       </Heading>
diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
index 439876d1e5..89142da7f8 100644
--- a/src/components/presentation/Header.tsx
+++ b/src/components/presentation/Header.tsx
@@ -33,7 +33,7 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
         <Flex item>
           <Heading
             level={1}
-            data-size='medium'
+            data-size='md'
             data-testid='presentation-heading'
           >
             {header}
diff --git a/src/features/devtools/DevToolsControls.tsx b/src/features/devtools/DevToolsControls.tsx
index 2be02c03bd..78fc9d29ce 100644
--- a/src/features/devtools/DevToolsControls.tsx
+++ b/src/features/devtools/DevToolsControls.tsx
@@ -30,7 +30,7 @@ export const DevToolsControls = () => {
   return (
     <Tabs
       className={classes.tabs}
-      data-size='small'
+      data-size='sm'
       value={activeTab}
       onChange={setActiveTab}
     >
diff --git a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
index aa17f4b5e4..26ea561f08 100644
--- a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
+++ b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
@@ -31,7 +31,7 @@ function InnerDevHiddenFunctionality() {
       <MarkHiddenComponents />
       <div>
         <ToggleGroup
-          data-size='small'
+          data-size='sm'
           onChange={(selectedValue) => setShowHiddenComponents(selectedValue as IDevToolsState['hiddenComponents'])}
           value={state}
         >
diff --git a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
index 049cf5899a..c2cad45ce1 100644
--- a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
+++ b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
@@ -73,7 +73,7 @@ const InnerDevNavigationButtons = () => {
 
   return (
     <Fieldset
-      data-size='small'
+      data-size='sm'
       className={classes.chipGroup}
     >
       <Fieldset.Legend>Navigasjon</Fieldset.Legend>
diff --git a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
index 94eba31792..9540ce0502 100644
--- a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
+++ b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
@@ -186,7 +186,7 @@ export const ExpressionPlayground = () => {
           {outputs.length > 1 && (
             <div className={classes.outputs}>
               <Tabs
-                data-size='small'
+                data-size='sm'
                 value={activeOutputTab}
                 onChange={(outputName) => {
                   setActiveOutputTab(outputName);
diff --git a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
index 87ce733e32..e6c322935e 100644
--- a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
+++ b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
@@ -62,18 +62,18 @@ export function FeatureToggles() {
               >
                 <Heading
                   data-spacing={true}
-                  data-size='small'
+                  data-size='sm'
                   level={4}
                 >
                   {parseAndCleanText(title)}
                 </Heading>
-                <Label data-size='xsmall'>Nøkkel: {key}</Label>
+                <Label data-size='sm'>Nøkkel: {key}</Label>
                 <br />
-                <Label data-size='xsmall'>
+                <Label data-size='sm'>
                   Verdi: {JSON.stringify(value)} / Standardverdi: {JSON.stringify(defaultValue)}
                 </Label>
                 <br />
-                <Label data-size='xsmall'>Kilde: {sourceMap[source]}</Label>
+                <Label data-size='sm'>Kilde: {sourceMap[source]}</Label>
                 <Paragraph>
                   {parseAndCleanText(description)}
                   {links && links.length && (
diff --git a/src/features/devtools/components/NodeInspector/NodeInspector.tsx b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
index 4584ed1bb7..16a742fbcc 100644
--- a/src/features/devtools/components/NodeInspector/NodeInspector.tsx
+++ b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
@@ -61,7 +61,7 @@ export const NodeInspector = () => {
             }}
           >
             <Tabs
-              data-size='small'
+              data-size='sm'
               defaultValue='properties'
               className={reusedClasses.tabs}
             >
diff --git a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
index 3239482d20..78bfa095cb 100644
--- a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
+++ b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
@@ -28,7 +28,7 @@ export const PermissionsEditor = () => {
     <Fieldset className={classes.checkboxWrapper}>
       <Fieldset.Legend>Policy</Fieldset.Legend>
       <Checkbox
-        data-size='small'
+        data-size='sm'
         checked={Boolean(write)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -40,7 +40,7 @@ export const PermissionsEditor = () => {
         label='Write'
       />
       <Checkbox
-        data-size='small'
+        data-size='sm'
         checked={Boolean(actions?.confirm)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -52,7 +52,7 @@ export const PermissionsEditor = () => {
         label='Confirm'
       />
       <Checkbox
-        data-size='small'
+        data-size='sm'
         checked={Boolean(actions?.sign)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -64,7 +64,7 @@ export const PermissionsEditor = () => {
         label='Sign'
       />
       <Checkbox
-        data-size='small'
+        data-size='sm'
         checked={Boolean(actions?.reject)}
         onChange={(e) =>
           handleChange((obj) => {
diff --git a/src/features/instantiate/containers/PartySelection.tsx b/src/features/instantiate/containers/PartySelection.tsx
index faf683a0e1..3c731493bc 100644
--- a/src/features/instantiate/containers/PartySelection.tsx
+++ b/src/features/instantiate/containers/PartySelection.tsx
@@ -271,7 +271,7 @@ export const PartySelection = () => {
           <Flex style={{ padding: 12 }}>
             <Heading
               level={2}
-              data-size='medium'
+              data-size='md'
               style={{ fontSize: '1.5rem', fontWeight: '500', marginBottom: 12 }}
             >
               <Lang id='party_selection.why_seeing_this' />
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index 7b3e46a957..82b8fa6dda 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -93,7 +93,7 @@ function InstanceSelection() {
   const renderMobileTable = () => (
     <>
       <Heading
-        data-size='xsmall'
+        data-size='xs'
         level={3}
         className={classes.leftOffHeading}
       >
@@ -253,7 +253,7 @@ function InstanceSelection() {
         <div>
           <Heading
             level={2}
-            data-size='medium'
+            data-size='md'
             id='instance-selection-header'
           >
             <Lang id='instance_selection.header' />
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index 4cb2cfd0ce..d736f1b5bd 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -99,7 +99,7 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
     <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
-          <ValidationMessage data-size='small'>
+          <ValidationMessage data-size='sm'>
             <Lang
               id={validation.message.key}
               params={validation.message.params}
diff --git a/src/language/sharedLanguage.ts b/src/language/sharedLanguage.ts
index da4a522b36..93aafc0a11 100644
--- a/src/language/sharedLanguage.ts
+++ b/src/language/sharedLanguage.ts
@@ -88,42 +88,42 @@ const parserOptions: HTMLReactParserOptions = {
     if (isElement(domNode) && domNode.name === 'h1') {
       return React.createElement(
         Heading,
-        { level: 1, 'data-size': 'large' },
+        { level: 1, 'data-size': 'lg' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h2') {
       return React.createElement(
         Heading,
-        { level: 2, 'data-size': 'medium' },
+        { level: 2, 'data-size': 'md' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h3') {
       return React.createElement(
         Heading,
-        { level: 3, 'data-size': 'small' },
+        { level: 3, 'data-size': 'sm' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h4') {
       return React.createElement(
         Heading,
-        { level: 4, 'data-size': 'xsmall' },
+        { level: 4, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h5') {
       return React.createElement(
         Heading,
-        { level: 5, 'data-size': 'xsmall' },
+        { level: 5, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h6') {
       return React.createElement(
         Heading,
-        { level: 6, 'data-size': 'xsmall' },
+        { level: 6, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
diff --git a/src/layout/AddToList/AddToList.tsx b/src/layout/AddToList/AddToList.tsx
index a17751f7c6..5aa8fd26bb 100644
--- a/src/layout/AddToList/AddToList.tsx
+++ b/src/layout/AddToList/AddToList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import type { MonthCaption } from 'react-day-picker';
 
-import { Button, Modal } from '@digdir/designsystemet-react';
+import { Button, Dialog } from '@digdir/designsystemet-react';
 import { v4 as uuidv4 } from 'uuid';
 import type { JSONSchema7 } from 'json-schema';
 
@@ -88,13 +88,13 @@ export function AddToListModal({
     return null;
   }
   return (
-    <Modal
+    <Dialog
       ref={addToListModalRef}
       style={{ padding: 'var(--ds-size-3)' }}
       backdropClose={backdropClose}
       onClose={onClose}
     >
-      <Modal.Block>
+      <Dialog.Block>
         <DynamicForm
           schema={schema?.items}
           onChange={onFormDataUpdate}
@@ -103,8 +103,8 @@ export function AddToListModal({
           buttonAriaLabel={langAsString('date_picker.aria_label_icon')}
           calendarIconTitle={langAsString('date_picker.aria_label_icon')}
         />
-      </Modal.Block>
-      <Modal.Block>
+      </Dialog.Block>
+      <Dialog.Block>
         <Button
           data-size='md'
           variant='primary'
@@ -116,8 +116,8 @@ export function AddToListModal({
         >
           Lagre
         </Button>
-      </Modal.Block>
-    </Modal>
+      </Dialog.Block>
+    </Dialog>
   );
 }
 
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index 409ee2d986..118450a6a8 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -76,7 +76,7 @@ export function WrappedCheckbox({
           </span>
         }
         checked={checked}
-        data-size='small'
+        data-size='sm'
         onChange={(e) => handleChange(e.target.checked)}
       />
     </ConditionalWrapper>
diff --git a/src/layout/Group/GroupSummary.tsx b/src/layout/Group/GroupSummary.tsx
index f724015ff7..b1f13d74ef 100644
--- a/src/layout/Group/GroupSummary.tsx
+++ b/src/layout/Group/GroupSummary.tsx
@@ -81,7 +81,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
     >
       {(summaryTitle || title) && (
         <Heading
-          data-size={isNestedGroup ? 'xsmall' : 'small'}
+          data-size={isNestedGroup ? 'xs' : 'sm'}
           level={headingLevel}
         >
           <Lang
diff --git a/src/layout/Header/HeaderComponent.tsx b/src/layout/Header/HeaderComponent.tsx
index 9ff8af5b30..4a18fadc48 100644
--- a/src/layout/Header/HeaderComponent.tsx
+++ b/src/layout/Header/HeaderComponent.tsx
@@ -22,14 +22,14 @@ function getHeaderProps(size?: string): HeadingProps {
     case 'h2': {
       return {
         level: 2,
-        size: 'medium',
+        size: 'md',
       };
     }
     case 'M':
     case 'h3': {
       return {
         level: 3,
-        size: 'small',
+        size: 'sm',
       };
     }
     case 'S':
@@ -37,7 +37,7 @@ function getHeaderProps(size?: string): HeadingProps {
     default: {
       return {
         level: 4,
-        size: 'xsmall',
+        size: 'xs',
       };
     }
   }
diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
index 336db75089..fcdb1e947a 100644
--- a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
+++ b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
@@ -22,11 +22,11 @@ export interface IDisplayLikertContainer {
 }
 
 const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeLikertSummaryContainer({
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
index d9088cf8ea..d72429f7f6 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
@@ -23,7 +23,7 @@ const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => (
   <tr>
     <th>
       <Paragraph
-        data-size='small'
+        data-size='sm'
         data-spacing={false}
       >
         <Lang id={labelId} />
@@ -31,7 +31,7 @@ const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => (
     </th>
     <td>
       <Label
-        data-size='small'
+        data-size='sm'
         data-spacing={false}
         asChild
       >
@@ -138,7 +138,7 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
       <div className={classes.infoDetailsContainer}>
         {paymentInfo?.paymentDetails?.paymentId && (
           <Paragraph
-            data-size='small'
+            data-size='sm'
             data-spacing={false}
           >
             <Lang id='payment.receipt.payment_id' />: <b>{paymentInfo.paymentDetails.paymentId}</b>
@@ -146,7 +146,7 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
         )}
         {instanceId && (
           <Paragraph
-            data-size='small'
+            data-size='sm'
             data-spacing={false}
           >
             <Lang id='payment.receipt.altinn_ref' />: <b>{getInstanceReferenceNumber(instanceId)}</b>
@@ -154,7 +154,7 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
         )}
         {paymentInfo?.paymentDetails?.chargedDate && (
           <Paragraph
-            data-size='small'
+            data-size='sm'
             data-spacing={false}
           >
             <Lang id='payment.receipt.payment_date' />:{' '}
@@ -162,7 +162,7 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
           </Paragraph>
         )}
         <Paragraph
-          data-size='small'
+          data-size='sm'
           data-spacing={false}
         >
           <Lang id='payment.receipt.total_amount' />:{' '}
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index a8bf063d4e..bba935dc04 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -102,7 +102,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
                 readOnly={readOnly}
                 onChange={handleChange}
                 hideLabel={hideLabel}
-                data-size='small'
+                data-size='sm'
                 alertOnChange={alertOnChange}
                 alertText={alertText}
                 confirmChangeText={confirmChangeText}
diff --git a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
index daf0fe4ca3..7f8868221b 100644
--- a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
+++ b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
@@ -24,7 +24,7 @@ export interface IDisplayRepAsLargeGroup {
 
 const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
   [2]: 'md',
-  [3]: 's',
+  [3]: 'sm',
   [4]: 'xs',
   [5]: 'xs',
   [6]: 'xs',
diff --git a/yarn.lock b/yarn.lock
index 5237816af0..5a2779fc68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2272,28 +2272,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:1.0.0-next.47":
-  version: 1.0.0-next.47
-  resolution: "@digdir/designsystemet-css@npm:1.0.0-next.47"
-  checksum: 10c0/4b2decaf6f91e89ed54a4e89df9f0ef53cda7b1d7267c7da62d3f292f4a60c6a076cef0dcdcf3b88a5fae04995fb4ae8c929cd1eecedfaa63f8aceaecd66b652
+"@digdir/designsystemet-css@npm:1.0.0-next.49":
+  version: 1.0.0-next.49
+  resolution: "@digdir/designsystemet-css@npm:1.0.0-next.49"
+  checksum: 10c0/256f56735b0146a6a2fc051505d42e731a201af20a89c91c8eba12df19448b97e9fbb5b8e7ef96df348e4ea250e2913431f2b40fc62f9f92a5e28d7c983058e5
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:1.0.0-next.47":
-  version: 1.0.0-next.47
-  resolution: "@digdir/designsystemet-react@npm:1.0.0-next.47"
+"@digdir/designsystemet-react@npm:1.0.0-next.49":
+  version: 1.0.0-next.49
+  resolution: "@digdir/designsystemet-react@npm:1.0.0-next.49"
   dependencies:
     "@floating-ui/dom": "npm:^1.6.10"
     "@floating-ui/react": "npm:0.26.23"
-    "@navikt/aksel-icons": "npm:^6.14.0"
-    "@radix-ui/react-slot": "npm:^1.1.0"
-    "@tanstack/react-virtual": "npm:^3.10.7"
+    "@navikt/aksel-icons": "npm:^7.0.0"
+    "@radix-ui/react-slot": "npm:^1.1.1"
+    "@tanstack/react-virtual": "npm:^3.11.2"
+    "@u-elements/u-datalist": "npm:^0.1.2"
     "@u-elements/u-details": "npm:^0.1.0"
     clsx: "npm:^2.1.1"
   peerDependencies:
     react: ">=18.3.1"
     react-dom: ">=18.3.1"
-  checksum: 10c0/6c706274d2d3e3657822eb037ab416e555b480d513201e03fe7e0c6f1e39692cc12e7dcf8ad0ac71c0d2f43e23aaf14ba93ecbfb63f9dc5f274eafd45968787d
+  checksum: 10c0/ff34ef5bc15c1480d0c46af414f48bc4cc0676f5e22cc319307c54b710193f8d322cfde2e27c3fca27d2b7dbd7d316db1359ebd75b195072884e5bbd9ada0ebe
   languageName: node
   linkType: hard
 
@@ -2304,10 +2305,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:1.0.0-next.47":
-  version: 1.0.0-next.47
-  resolution: "@digdir/designsystemet-theme@npm:1.0.0-next.47"
-  checksum: 10c0/41d661b9f636340086c8fca077273df330ae771a2d0fed18ea5e691e4c037afb4d3a9b3683fab5795f2ca88ca1614faefe2a28ad373011c091a42748d8d8fc9a
+"@digdir/designsystemet-theme@npm:1.0.0-next.49":
+  version: 1.0.0-next.49
+  resolution: "@digdir/designsystemet-theme@npm:1.0.0-next.49"
+  checksum: 10c0/acb63115c89769d570805f717748f646aa692bb2774c079ac3b25f3d1da886a2467b4ae644421f8e96936de234099d77c78dcb56c11b126bfd6b0f001f145070
   languageName: node
   linkType: hard
 
@@ -3399,10 +3400,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^6.14.0":
-  version: 6.17.0
-  resolution: "@navikt/aksel-icons@npm:6.17.0"
-  checksum: 10c0/e3b3fd152e3266e23aa6a9a4d69c8c59ace60bc334b2fdbbdc208984fa540875a3469f3e9170e112ed9dc3be9c2b13139760c8e32b49d4a9fe0504ad41615989
+"@navikt/aksel-icons@npm:^7.0.0":
+  version: 7.13.0
+  resolution: "@navikt/aksel-icons@npm:7.13.0"
+  checksum: 10c0/2c47f9d5ff2c3cd55c7cf0f6d5184531e32bbeadc30daba845dd5e6fc9ad1f16ce50dbb9a42bbc20ac16a9254a93415c129522b5e4b1113a9c39894a06819377
   languageName: node
   linkType: hard
 
@@ -4045,7 +4046,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.1.0":
+"@radix-ui/react-slot@npm:^1.1.1":
   version: 1.1.2
   resolution: "@radix-ui/react-slot@npm:1.1.2"
   dependencies:
@@ -4410,7 +4411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.10.7":
+"@tanstack/react-virtual@npm:^3.11.2":
   version: 3.13.0
   resolution: "@tanstack/react-virtual@npm:3.13.0"
   dependencies:
@@ -5300,6 +5301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@u-elements/u-datalist@npm:^0.1.2":
+  version: 0.1.3
+  resolution: "@u-elements/u-datalist@npm:0.1.3"
+  checksum: 10c0/090ce2ed43cda471313d51ddcfb4429ee9bf300f15a16de93cca10b9e05c0e033ad7be98a08f91700ee2b38e03cd53952bb590f077783fb03240407132ee4c88
+  languageName: node
+  linkType: hard
+
 "@u-elements/u-details@npm:^0.1.0":
   version: 0.1.0
   resolution: "@u-elements/u-details@npm:0.1.0"
@@ -5851,9 +5859,9 @@ __metadata:
     "@babel/runtime-corejs3": "npm:7.26.7"
     "@date-fns/tz": "npm:1.2.0"
     "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:1.0.0-next.47"
-    "@digdir/designsystemet-react": "npm:1.0.0-next.47"
-    "@digdir/designsystemet-theme": "npm:1.0.0-next.47"
+    "@digdir/designsystemet-css": "npm:1.0.0-next.49"
+    "@digdir/designsystemet-react": "npm:1.0.0-next.49"
+    "@digdir/designsystemet-theme": "npm:1.0.0-next.49"
     "@eslint/compat": "npm:1.2.6"
     "@faker-js/faker": "npm:9.4.0"
     "@material-ui/core": "npm:4.12.4"

From d94c005ec59d8fe50ea1ecfb2ae56fabc485792d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 19 Feb 2025 10:16:54 +0100
Subject: [PATCH 009/170] fix accordion tests

---
 src/layout/Accordion/Accordion.test.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/layout/Accordion/Accordion.test.tsx b/src/layout/Accordion/Accordion.test.tsx
index c096d353b0..49aac58edd 100644
--- a/src/layout/Accordion/Accordion.test.tsx
+++ b/src/layout/Accordion/Accordion.test.tsx
@@ -9,27 +9,23 @@ describe('Accordion', () => {
   it('should display text from textResourceBindings', async () => {
     await render({ title: 'Accordion title' });
 
-    expect(await screen.findByRole('heading', { name: /accordion title/i })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /accordion title/i })).toBeInTheDocument();
   });
 
   it('should display text from textResourceBindings if an ID to a text resource is used as title', async () => {
     await render({ title: 'accordion.title' });
 
-    expect(await screen.findByRole('heading', { name: /this is a title/i })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toBeInTheDocument();
   });
 
   it('should open accordion by default if openByDefault is set to true', async () => {
-    const { container } = await render({ openByDefault: true });
-    const element = container.querySelector('.ds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('ds-animate-height--open');
-    expect(element).not.toHaveClass('ds-animate-height--closed');
+    await render({ openByDefault: true, title: 'accordion.title' });
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('accordion should be closed by default if openByDefault is set to false', async () => {
-    const { container } = await render({ openByDefault: false });
-    const element = container.querySelector('.ds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('ds-animate-height--closed');
-    expect(element).not.toHaveClass('ds-animate-height--open');
+    await render({ openByDefault: false, title: 'accordion.title' });
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toHaveAttribute('aria-expanded', 'false');
   });
 });
 

From e723204e0c7f6b051427e4d4317b78f8b5ddbc65 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 19 Feb 2025 10:22:06 +0100
Subject: [PATCH 010/170] fix helptext tests

---
 src/app-components/HelpText/HelpText.test.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app-components/HelpText/HelpText.test.tsx b/src/app-components/HelpText/HelpText.test.tsx
index 8de94b4242..b2f65d4541 100644
--- a/src/app-components/HelpText/HelpText.test.tsx
+++ b/src/app-components/HelpText/HelpText.test.tsx
@@ -34,11 +34,11 @@ describe('HelpText', () => {
     render();
     const helpTextTrigger = screen.getByRole('button');
 
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('should close HelpText on trigger-click when open', async () => {
@@ -48,23 +48,23 @@ describe('HelpText', () => {
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should open HelpText on SPACE pressed when closed', async () => {
     render();
     const helpTextTrigger = screen.getByRole('button');
 
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
     helpTextTrigger.focus();
     await act(async () => {
       await user.keyboard('[Space]');
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('should close HelpText on ESC pressed when open', async () => {
@@ -75,11 +75,11 @@ describe('HelpText', () => {
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
     await act(async () => {
       await user.keyboard('[Escape]');
     });
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should have `aria-expanded` set to `false` when closed', () => {

From 893ccfb3ffd33d4b4ebd7ecaecc47406e08fde3b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 19 Feb 2025 13:30:53 +0100
Subject: [PATCH 011/170] fix lang tests

---
 src/features/language/Lang.test.tsx        |  4 ++--
 src/features/language/useLanguage.test.tsx | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/features/language/Lang.test.tsx b/src/features/language/Lang.test.tsx
index e8ecfa2e90..539c056def 100644
--- a/src/features/language/Lang.test.tsx
+++ b/src/features/language/Lang.test.tsx
@@ -45,7 +45,7 @@ describe('Lang', () => {
         <LanguageProvider>
           <div data-testid='test-subject'>
             <Lang
-              id='input_components.remaining_characters'
+              id='general.progress'
               params={[
                 <Lang
                   key={0}
@@ -63,7 +63,7 @@ describe('Lang', () => {
     });
 
     expect(console.error).not.toHaveBeenCalled();
-    expect(screen.getByTestId('test-subject')).toHaveTextContent('Du har innboks av profil tegn igjen');
+    expect(screen.getByTestId('test-subject')).toHaveTextContent('Side innboks av profil');
   });
 
   it('should fallback if Language is not provided', async () => {
diff --git a/src/features/language/useLanguage.test.tsx b/src/features/language/useLanguage.test.tsx
index f506dff9d0..62593b2d1c 100644
--- a/src/features/language/useLanguage.test.tsx
+++ b/src/features/language/useLanguage.test.tsx
@@ -31,7 +31,7 @@ const TestComplexAsString = () => {
     '<strong>hello world</strong>',
     <span key={0}>
       <Lang
-        id='input_components.character_limit_sr_label'
+        id='form_filler.error_required'
         params={[
           <div key={0}>
             {'et hundre og '}
@@ -43,7 +43,7 @@ const TestComplexAsString = () => {
     </span>,
   ];
 
-  const langId = 'input_components.remaining_characters';
+  const langId = 'general.progress';
 
   return (
     <>
@@ -99,7 +99,7 @@ describe('useLanguage', () => {
       renderer: () => <TestComplexAsString />,
     });
 
-    const expected = 'Du har hello world av Tekstfeltet kan inneholde maks et hundre og Hjelp tegn tegn igjen';
+    const expected = 'Side hello world av Du må fylle ut et hundre og Hjelp';
 
     expect(screen.getByTestId('subject1')).toHaveTextContent(expected);
     expect(screen.getByTestId('subject2')).toHaveTextContent(expected);
@@ -131,17 +131,23 @@ describe('useLanguage', () => {
 
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
 
     rerender(<TestSimple input='simpleHtml' />);
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
 
     rerender(<TestSimple input='simpleMarkdown' />);
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
   });
 
   it('langAsString() should work with complex lookups and arrays', async () => {

From 4e755ce6dcad2308ca7fa13630196a81721d3f7d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 19 Feb 2025 15:07:57 +0100
Subject: [PATCH 012/170] fix navbar test

---
 src/components/presentation/NavBar.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/presentation/NavBar.test.tsx b/src/components/presentation/NavBar.test.tsx
index 928ada2912..e1a47af5e9 100644
--- a/src/components/presentation/NavBar.test.tsx
+++ b/src/components/presentation/NavBar.test.tsx
@@ -96,7 +96,7 @@ describe('NavBar', () => {
 
     // Language now changed, so the value should be the language name in the selected language
     await waitFor(() => {
-      expect(screen.getByRole('combobox', { name: /Language/i })).toHaveValue('English');
+      expect(screen.getByLabelText(/Language/i)).toHaveValue('English');
     });
   });
   it('should render app language with custom labels', async () => {
@@ -112,7 +112,7 @@ describe('NavBar', () => {
     });
 
     expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    await userEvent.click(screen.getByRole('combobox', { name: /Velg språk test/i }));
+    await userEvent.click(screen.getByLabelText(/Velg språk test/i));
     screen.getByRole('option', { name: /norsk test/i });
     screen.getByRole('option', { name: /engelsk test/i });
   });

From e759eada680c179f43a97e6574873f82ce15880f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 21 Feb 2025 15:46:50 +0100
Subject: [PATCH 013/170] fix misc and pagination instance select

---
 src/app-components/HelpText/HelpText.tsx      |  1 -
 src/app-components/Pagination/Pagination.tsx  | 56 ++++++++-----------
 .../organisms/AltinnAppHeaderMenu.module.css  |  1 -
 .../selection/InstanceSelection.tsx           |  8 +--
 src/layout/List/ListComponent.test.tsx        |  2 +-
 src/setupTests.ts                             |  1 +
 6 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index 03811c15cb..d788c5fe54 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -82,7 +82,6 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
       <Popover
         className={classes.helpTextContent}
         data-color='info'
-        role='dialog'
         placement={placement}
         data-size={size}
         open={open}
diff --git a/src/app-components/Pagination/Pagination.tsx b/src/app-components/Pagination/Pagination.tsx
index 873aa7ff59..eca136e4f9 100644
--- a/src/app-components/Pagination/Pagination.tsx
+++ b/src/app-components/Pagination/Pagination.tsx
@@ -29,9 +29,7 @@ type PaginationProps = {
 
 export const Pagination = ({
   nextLabel,
-  nextLabelAriaLabel,
   previousLabel,
-  previousLabelAriaLabel,
   size,
   compact,
   hideLabels,
@@ -45,19 +43,24 @@ export const Pagination = ({
   showRowsPerPageDropdown = false,
   pageSize,
 }: PaginationProps) => {
-  const totalPages = Math.ceil(numberOfRows / pageSize);
-  const pageNumber = currentPage + 1;
-
   const isMini = useIsMini();
   const isMobile = useIsMobile();
   const isTablet = useIsTablet();
   const isCompact = compact || isMini || isTablet;
 
-  const { pages, prevButtonProps, nextButtonProps, hasNext, hasPrev } = usePagination({
-    currentPage: pageNumber,
+  const totalPages = Math.ceil(numberOfRows / pageSize);
+  let showPages = isCompact ? 3 : 5;
+
+  if (showPages > totalPages) {
+    showPages = totalPages;
+  }
+
+  const { pages, prevButtonProps, nextButtonProps } = usePagination({
+    currentPage,
     setCurrentPage,
     totalPages,
     onChange,
+    showPages,
   });
   const { langAsString } = useLanguage();
 
@@ -99,23 +102,16 @@ export const Pagination = ({
         className={classes.pagination}
       >
         <DesignSystemPagination.List>
-          {hasPrev && (
-            <DesignSystemPagination.Item>
-              <DesignSystemPagination.Button
-                data-testid='paginationPreviousButton'
-                {...prevButtonProps}
-                aria-label={previousLabelAriaLabel}
-              >
-                {!hideLabels && !isMobile && previousLabel}
-              </DesignSystemPagination.Button>
-            </DesignSystemPagination.Item>
-          )}
-          {pages.map((page, i, buttonProps) => (
-            <DesignSystemPagination.Item key={`${page}${i}`}>
+          <DesignSystemPagination.Item>
+            <DesignSystemPagination.Button {...prevButtonProps}>
+              {!hideLabels && !isMobile && previousLabel}
+            </DesignSystemPagination.Button>
+          </DesignSystemPagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <DesignSystemPagination.Item key={itemKey}>
               {typeof page === 'number' && (
                 <DesignSystemPagination.Button
-                  color='first'
-                  aria-current={pageNumber === page}
+                  aria-current={currentPage === page}
                   aria-label={langAsString('general.page_number', [page])}
                   {...buttonProps}
                 >
@@ -124,17 +120,11 @@ export const Pagination = ({
               )}
             </DesignSystemPagination.Item>
           ))}
-          {hasNext && (
-            <DesignSystemPagination.Item>
-              <DesignSystemPagination.Button
-                data-testid='paginationNextButton'
-                aria-label={nextLabelAriaLabel}
-                {...nextButtonProps}
-              >
-                {!hideLabels && !isMobile && nextLabel}
-              </DesignSystemPagination.Button>
-            </DesignSystemPagination.Item>
-          )}
+          <DesignSystemPagination.Item>
+            <DesignSystemPagination.Button {...nextButtonProps}>
+              {!hideLabels && !isMobile && nextLabel}
+            </DesignSystemPagination.Button>
+          </DesignSystemPagination.Item>
         </DesignSystemPagination.List>
       </DesignSystemPagination>
     </>
diff --git a/src/components/organisms/AltinnAppHeaderMenu.module.css b/src/components/organisms/AltinnAppHeaderMenu.module.css
index 640537074a..3dada2873c 100644
--- a/src/components/organisms/AltinnAppHeaderMenu.module.css
+++ b/src/components/organisms/AltinnAppHeaderMenu.module.css
@@ -2,7 +2,6 @@
   border-radius: 1px;
   max-width: 100px;
   padding: 10px;
-  top: 50px;
 }
 
 .popoverTrigger {
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index 82b8fa6dda..0216fd3721 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -75,17 +75,17 @@ function InstanceSelection() {
     selectedIndex !== undefined && rowsPerPageOptions.length - 1 >= selectedIndex && selectedIndex >= 0;
 
   const defaultSelectedOption = doesIndexExist(selectedIndex) ? selectedIndex : 0;
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
   const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[defaultSelectedOption]);
 
   const instances = instanceSelectionOptions?.sortDirection === 'desc' ? [..._instances].reverse() : _instances;
-  const paginatedInstances = instances.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage);
+  const paginatedInstances = instances.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
 
   const textStrings = language?.['list_component'];
 
   function handleRowsPerPageChanged(newRowsPerPage: number) {
     setRowsPerPage(newRowsPerPage);
-    if (instances.length < currentPage * newRowsPerPage) {
+    if (instances.length < (currentPage - 1) * newRowsPerPage) {
       setCurrentPage(Math.floor(instances.length / newRowsPerPage));
     }
   }
@@ -154,12 +154,12 @@ function InstanceSelection() {
                     rowsPerPageText={textStrings['rowsPerPage']}
                     size='sm'
                     currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
                     numberOfRows={instances.length}
                     pageSize={rowsPerPage}
                     showRowsPerPageDropdown={true}
                     rowsPerPageOptions={rowsPerPageOptions}
                     onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    setCurrentPage={setCurrentPage}
                   />
                 </div>
               </Table.Cell>
diff --git a/src/layout/List/ListComponent.test.tsx b/src/layout/List/ListComponent.test.tsx
index 2dd8e6477f..65f0bdbcf6 100644
--- a/src/layout/List/ListComponent.test.tsx
+++ b/src/layout/List/ListComponent.test.tsx
@@ -198,7 +198,7 @@ describe('ListComponent', () => {
     ]);
   });
 
-  it('should save all field values in when in mobile', async () => {
+  it('should save all field values when in mobile', async () => {
     jest.useFakeTimers();
     jest.spyOn(useDeviceWidths, 'useIsMobile').mockReturnValue(true);
 
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 2342d2b545..65f52ee2d3 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -6,6 +6,7 @@ import 'core-js/stable/structured-clone'; // https://github.com/jsdom/jsdom/issu
 import 'jest';
 // Importing CSS for jest-preview to look nicer
 import '@digdir/designsystemet-theme';
+import '@digdir/designsystemet-css';
 
 import { jest } from '@jest/globals';
 import { configure as testingLibraryConfigure } from '@testing-library/dom';

From 3e67be4fdcd252e3a89afa5667834478ec0f2478 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 24 Feb 2025 10:20:48 +0100
Subject: [PATCH 014/170] fix instanceselection pagination

---
 .../Pagination/Pagination.module.css          | 14 ++---
 src/app-components/Pagination/Pagination.tsx  | 56 +++++++++----------
 .../selection/InstanceSelection.tsx           |  9 +--
 3 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/app-components/Pagination/Pagination.module.css b/src/app-components/Pagination/Pagination.module.css
index 8ec7222b33..5f5de936c4 100644
--- a/src/app-components/Pagination/Pagination.module.css
+++ b/src/app-components/Pagination/Pagination.module.css
@@ -7,14 +7,10 @@
   }
 }
 .rowsPerPageDropdown {
-  display: flex;
-  flex-direction: row-reverse;
-
-  div[class*='ds-combobox__input__wrapper'] {
-    width: 80px;
-  }
+  width: var(--ds-size-22);
+}
 
-  div[class*='ds-combobox__chip-and-input'] {
-    width: 34px;
-  }
+.rowsPerPageField {
+  display: flex;
+  gap: var(--ds-size-2);
 }
diff --git a/src/app-components/Pagination/Pagination.tsx b/src/app-components/Pagination/Pagination.tsx
index eca136e4f9..daf6153a79 100644
--- a/src/app-components/Pagination/Pagination.tsx
+++ b/src/app-components/Pagination/Pagination.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 
-import { Combobox, Pagination as DesignSystemPagination, usePagination } from '@digdir/designsystemet-react';
+import {
+  Field,
+  Label,
+  Pagination as DesignSystemPagination,
+  Select,
+  usePagination,
+} from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Pagination/Pagination.module.css';
-import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useIsMini, useIsMobile, useIsTablet } from 'src/hooks/useDeviceWidths';
-import { optionSearchFilter } from 'src/utils/options';
 
 type PaginationProps = {
   nextLabel: string;
@@ -22,7 +26,7 @@ type PaginationProps = {
   pageSize: number;
   rowsPerPageText: string;
   rowsPerPageOptions?: number[];
-  onPageSizeChange?: (value: string[]) => void;
+  onPageSizeChange: (value: number) => void;
   setCurrentPage: (pageNumber: number) => void;
   onChange?: Parameters<typeof DesignSystemPagination>[0]['onChange'];
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
@@ -67,33 +71,25 @@ export const Pagination = ({
   return (
     <>
       {showRowsPerPageDropdown && !isMobile && (
-        <Combobox
-          id='paginationRowsPerPageDropdown'
-          data-testid='paginationRowsPerPageDropdown'
-          filter={optionSearchFilter}
-          size='sm'
-          value={[pageSize.toString()]}
-          onValueChange={onPageSizeChange}
-          label={rowsPerPageText}
-          aria-label={rowsPerPageText}
-          className={classes.rowsPerPageDropdown}
-        >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
-          {rowsPerPageOptions?.map((option, i) => (
-            <Combobox.Option
-              key={`${option}${i}`}
-              value={option.toString()}
-              displayValue={option.toString()}
-            >
-              <span>
-                <wbr />
+        <Field className={classes.rowsPerPageField}>
+          <Select
+            id='paginationRowsPerPageDropdown'
+            data-size='sm'
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(parseInt(e.target.value))}
+            className={classes.rowsPerPageDropdown}
+          >
+            {rowsPerPageOptions?.map((option, i) => (
+              <Select.Option
+                key={`${option}${i}`}
+                value={option}
+              >
                 {option}
-              </span>
-            </Combobox.Option>
-          ))}
-        </Combobox>
+              </Select.Option>
+            ))}
+          </Select>
+          <Label htmlFor='paginationRowsPerPageDropdown'>{rowsPerPageText}</Label>
+        </Field>
       )}
       <DesignSystemPagination
         data-testid='pagination'
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index 0216fd3721..80b7100050 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -84,6 +84,7 @@ function InstanceSelection() {
   const textStrings = language?.['list_component'];
 
   function handleRowsPerPageChanged(newRowsPerPage: number) {
+    console.log('newRowsPerPage', newRowsPerPage);
     setRowsPerPage(newRowsPerPage);
     if (instances.length < (currentPage - 1) * newRowsPerPage) {
       setCurrentPage(Math.floor(instances.length / newRowsPerPage));
@@ -153,13 +154,13 @@ function InstanceSelection() {
                     previousLabelAriaLabel={textStrings['previousPageAriaLabel']}
                     rowsPerPageText={textStrings['rowsPerPage']}
                     size='sm'
-                    currentPage={currentPage}
-                    setCurrentPage={setCurrentPage}
                     numberOfRows={instances.length}
-                    pageSize={rowsPerPage}
                     showRowsPerPageDropdown={true}
                     rowsPerPageOptions={rowsPerPageOptions}
-                    onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                    pageSize={rowsPerPage}
+                    onPageSizeChange={(value) => handleRowsPerPageChanged(value)}
                   />
                 </div>
               </Table.Cell>

From b0960da1a4b4b73ac1aa8f5f84cb4c88ba1de709 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 24 Feb 2025 10:22:23 +0100
Subject: [PATCH 015/170] remove console.log

---
 src/features/instantiate/selection/InstanceSelection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index 80b7100050..99390bce61 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -84,7 +84,6 @@ function InstanceSelection() {
   const textStrings = language?.['list_component'];
 
   function handleRowsPerPageChanged(newRowsPerPage: number) {
-    console.log('newRowsPerPage', newRowsPerPage);
     setRowsPerPage(newRowsPerPage);
     if (instances.length < (currentPage - 1) * newRowsPerPage) {
       setCurrentPage(Math.floor(instances.length / newRowsPerPage));

From 55d6ad476948593b163afc1b6e24605c1d324198 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 24 Feb 2025 10:34:22 +0100
Subject: [PATCH 016/170] style instance selection table

---
 .../selection/InstanceSelection.module.css           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/features/instantiate/selection/InstanceSelection.module.css b/src/features/instantiate/selection/InstanceSelection.module.css
index 13949a4982..b1967797a9 100644
--- a/src/features/instantiate/selection/InstanceSelection.module.css
+++ b/src/features/instantiate/selection/InstanceSelection.module.css
@@ -41,19 +41,17 @@ Altinn, and making sure they are consistent. */
   padding-top: 12px;
   padding-bottom: 12px;
 }
+
+.table tfoot td {
+  background-color: #f5f5f5;
+  border-top: none;
+}
 /* ==== */
 
 .table tr:hover {
   background-color: unset;
 }
 
-.tableFooter {
-  background-color: #f5f5f5; /* Remove this when upgrading to the new design system component look*/
-}
-tr.tableFooter:hover {
-  background-color: var(--ds-color-neutral-background-subtle);
-}
-
 .startNewButtonContainer {
   margin-top: 12px;
 }

From 02ffe72942c02168c2dffe832e10b62c21de7465 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 24 Feb 2025 13:03:08 +0100
Subject: [PATCH 017/170] fix helptext size

---
 src/app-components/HelpText/HelpText.tsx        |  1 -
 src/app-components/HelpText/Helptext.module.css | 10 +++++-----
 yarn.lock                                       |  9 +--------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index d788c5fe54..5e6ea3bd98 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -57,7 +57,6 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
     <Popover.TriggerContext>
       <Popover.Trigger
         asChild
-        variant='tertiary'
         ref={ref}
         aria-label={title}
         id={id ?? uuid}
diff --git a/src/app-components/HelpText/Helptext.module.css b/src/app-components/HelpText/Helptext.module.css
index fa601f16b6..ad78b33f40 100644
--- a/src/app-components/HelpText/Helptext.module.css
+++ b/src/app-components/HelpText/Helptext.module.css
@@ -20,10 +20,10 @@
 
 .helpText-icon {
   color: var(--ds-color-accent-base-default);
-  width: var(--ds-size-7);
-  height: var(--ds-size-7);
-  min-width: var(--ds-size-7);
-  min-height: var(--ds-size-7);
+  width: var(--ds-size-9);
+  height: var(--ds-size-9);
+  min-width: var(--ds-size-9);
+  min-height: var(--ds-size-9);
 }
 
 .helpTextButton:where(:hover, :focus, [data-state^='open']) > .helpText-icon {
@@ -37,7 +37,7 @@
 .helpTextContent {
   font: var(--ds-typography-paragraph-md);
   font-family: inherit;
-  width: fit-content;
+  width: moz-fit-content;
   max-width: 700px;
 }
 
diff --git a/yarn.lock b/yarn.lock
index a07bc84a62..9ec252e5f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3164,7 +3164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:7.13.0":
+"@navikt/aksel-icons@npm:7.13.0, @navikt/aksel-icons@npm:^7.0.0":
   version: 7.13.0
   resolution: "@navikt/aksel-icons@npm:7.13.0"
   checksum: 10c0/2c47f9d5ff2c3cd55c7cf0f6d5184531e32bbeadc30daba845dd5e6fc9ad1f16ce50dbb9a42bbc20ac16a9254a93415c129522b5e4b1113a9c39894a06819377
@@ -3185,13 +3185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.0.0":
-  version: 7.13.0
-  resolution: "@navikt/aksel-icons@npm:7.13.0"
-  checksum: 10c0/2c47f9d5ff2c3cd55c7cf0f6d5184531e32bbeadc30daba845dd5e6fc9ad1f16ce50dbb9a42bbc20ac16a9254a93415c129522b5e4b1113a9c39894a06819377
-  languageName: node
-  linkType: hard
-
 "@navikt/ds-icons@npm:^2.3.0":
   version: 2.9.8
   resolution: "@navikt/ds-icons@npm:2.9.8"

From d3d4403d34f8ccefc059ea7a0462d499acc11e97 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 25 Feb 2025 10:19:01 +0100
Subject: [PATCH 018/170] fix input validation message

---
 src/app-components/Input/Input.tsx |  3 ++-
 src/index.css                      | 14 --------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index 325a5bd0e0..73b60b510b 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -40,7 +40,7 @@ export type InputProps = {
   LabelRequired;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', readOnly, characterLimit, ...rest } = props;
+  const { size = 'sm', readOnly, error, characterLimit, ...rest } = props;
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     if (readOnly) {
@@ -69,6 +69,7 @@ export function Input(props: InputProps) {
   return (
     <Field>
       <Textfield
+        aria-invalid={!!error}
         onPaste={handlePaste}
         data-size={size}
         readOnly={readOnly}
diff --git a/src/index.css b/src/index.css
index 625c162c04..8781171d45 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,20 +11,6 @@
   color: var(--semantic-text-neutral-default);
 }
 
-/* Workaround for the design-system aggressively setting the font to 'Inter' */
-[class^='ds-'] {
-  font-family: var(--font-family);
-}
-
-/* Override design system variables */
-* {
-  --component-panel-font_size-header-breakpoint_sm: 1.4rem;
-  --component-panel-font_size-header-breakpoint_md: 1.6rem;
-  --component-panel-font_size-header-breakpoint_lg: 1.75rem;
-  --component-panel-font_size-body-breakpoint_md: 1rem;
-  --component-panel-font_weight-heading: 500;
-}
-
 /* Global variables */
 :root {
   /* @see altinnAppTheme.tsx */

From 2d16e1521bab2bd48581a1d70e6c20bc56100d80 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 25 Feb 2025 10:20:47 +0100
Subject: [PATCH 019/170] fix field counter size

---
 src/app-components/Input/Input.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index 73b60b510b..4a2d48bda0 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -75,7 +75,12 @@ export function Input(props: InputProps) {
         readOnly={readOnly}
         {...rest}
       />
-      {characterLimit && <Field.Counter {...characterLimit} />}
+      {characterLimit && (
+        <Field.Counter
+          {...characterLimit}
+          data-size='sm'
+        />
+      )}
     </Field>
   );
 }

From 5eed55500e56aa534b179c8dc922ef423707b679 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 26 Feb 2025 15:40:40 +0100
Subject: [PATCH 020/170] checkbox fix

---
 .../CheckboxesContainerComponent.module.css   |  7 +--
 .../CheckboxesContainerComponent.tsx          | 44 ++++++++++---------
 src/layout/Checkboxes/WrappedCheckbox.tsx     |  5 ++-
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index 2f9112a3d8..917c802ba5 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
@@ -2,18 +2,13 @@
   No longer supported with horizontal layout in design system.
   Possible breaking change if we remove this option of styling.
   */
-.horizontal > div {
+.horizontal {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   gap: var(--ds-size-2);
 }
 
-.checkboxGroup div label {
-  display: inline-flex;
-  padding-left: 3px;
-}
-
 .checkboxLabelContainer {
   display: flex;
   gap: var(--ds-size-1);
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index 2c6b2d8296..9eb3740c0b 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
-import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -48,7 +48,6 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
     name: id,
     readOnly,
     value: selectedValues,
-    onChange: setData,
     error: !isValid,
   });
 
@@ -62,7 +61,7 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
           key={`checkboxes_group_${id}`}
         >
           <Fieldset
-            className={cn({ [classes.horizontal]: horizontal }, classes.checkboxGroup)}
+            className={classes.checkboxGroup}
             aria-label={ariaLabel}
             data-testid='checkboxes-fieldset'
           >
@@ -72,23 +71,28 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
                 <Lang id={textResourceBindings?.description} />
               </Fieldset.Description>
             )}
-            {calculatedOptions.map((option) => (
-              <WrappedCheckbox
-                key={option.value}
-                id={id}
-                label={langAsString(option.label)}
-                option={option}
-                hideLabel={hideLabel}
-                alertOnChange={alertOnChange}
-                setChecked={(isChecked) => {
-                  const newData = isChecked
-                    ? [...selectedValues, option.value]
-                    : selectedValues.filter((o) => o !== option.value);
-                  setData(newData);
-                }}
-                {...getCheckboxProps(option.value)}
-              />
-            ))}
+            <ConditionalWrapper
+              condition={horizontal}
+              wrapper={(children) => <div className={classes.horizontal}>{children}</div>}
+            >
+              {calculatedOptions.map((option) => (
+                <WrappedCheckbox
+                  key={option.value}
+                  id={id}
+                  option={option}
+                  hideLabel={hideLabel}
+                  alertOnChange={alertOnChange}
+                  {...getCheckboxProps(option.value)}
+                  checked={selectedValues.includes(option.value)}
+                  setChecked={(isChecked) => {
+                    const newData = isChecked
+                      ? [...selectedValues, option.value]
+                      : selectedValues.filter((o) => o !== option.value);
+                    setData(newData);
+                  }}
+                />
+              ))}
+            </ConditionalWrapper>
           </Fieldset>
         </div>
       )}
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index 118450a6a8..5381519111 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -19,7 +19,7 @@ type IWrappedCheckboxProps = {
   hideLabel?: boolean;
   alertOnChange?: boolean;
   setChecked: (checked: boolean) => void;
-} & CheckboxProps;
+} & Omit<CheckboxProps, 'label' | 'aria-label' | 'aria-labelledby'>;
 
 export function WrappedCheckbox({
   id,
@@ -29,6 +29,7 @@ export function WrappedCheckbox({
   checked,
   setChecked,
   readOnly,
+  ...rest
 }: IWrappedCheckboxProps) {
   const { langAsString, elementAsString } = useLanguage();
 
@@ -58,7 +59,6 @@ export function WrappedCheckbox({
     >
       <Checkbox
         id={`${id}-${option.label.replace(/\s/g, '-')}`}
-        name={option.value}
         description={option.description && <Lang id={option.description} />}
         value={option.value}
         readOnly={readOnly}
@@ -75,6 +75,7 @@ export function WrappedCheckbox({
             )}
           </span>
         }
+        {...rest}
         checked={checked}
         data-size='sm'
         onChange={(e) => handleChange(e.target.checked)}

From ba4398ea3550dad09f11f267602bd10258186e06 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 26 Feb 2025 15:41:02 +0100
Subject: [PATCH 021/170] remove unused value

---
 src/layout/Checkboxes/CheckboxesContainerComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index 9eb3740c0b..283025af9d 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -44,7 +44,7 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
   const hideLabel = overrideDisplay?.renderedInTable === true && calculatedOptions.length === 1 && !showLabelsInTable;
   const ariaLabel = overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined;
 
-  const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+  const { getCheckboxProps } = useCheckboxGroup({
     name: id,
     readOnly,
     value: selectedValues,

From 730bea0ec410163a2a1a35883dc27aa9655a531f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 26 Feb 2025 15:44:28 +0100
Subject: [PATCH 022/170] fix validation message size

---
 src/layout/Grid/GridSummary.tsx                              | 5 ++++-
 src/layout/Likert/Summary2/LikertSummary.tsx                 | 5 ++++-
 src/layout/Map/Summary2/MapSummary.tsx                       | 5 ++++-
 src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx | 1 +
 .../RepeatingGroupTableSummary.tsx                           | 1 +
 .../CommonSummaryComponents/MultipleValueSummary.tsx         | 5 ++++-
 .../Summary2/CommonSummaryComponents/SingleValueSummary.tsx  | 5 ++++-
 7 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index 922a260428..f1d2ce582e 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -381,7 +381,10 @@ function CellWithComponent({
       <div className={cn({ [classes.errorMessage]: errors.length > 0 })} />
       {errors.length > 0 &&
         errors.map(({ message }) => (
-          <ValidationMessage key={message.key}>
+          <ValidationMessage
+            key={message.key}
+            data-size='sm'
+          >
             <Lang
               id={message.key}
               params={message.params}
diff --git a/src/layout/Likert/Summary2/LikertSummary.tsx b/src/layout/Likert/Summary2/LikertSummary.tsx
index ecb4181ae4..b7f843883b 100644
--- a/src/layout/Likert/Summary2/LikertSummary.tsx
+++ b/src/layout/Likert/Summary2/LikertSummary.tsx
@@ -68,7 +68,10 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
         />
       ))}
       {errors?.map(({ message }) => (
-        <ValidationMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}
diff --git a/src/layout/Map/Summary2/MapSummary.tsx b/src/layout/Map/Summary2/MapSummary.tsx
index 983027dfcf..1b24436b39 100644
--- a/src/layout/Map/Summary2/MapSummary.tsx
+++ b/src/layout/Map/Summary2/MapSummary.tsx
@@ -82,7 +82,10 @@ export function MapSummary({ componentNode, emptyFieldText, isCompact }: MapSumm
         </Paragraph>
       )}
       {errors?.map(({ message }) => (
-        <ValidationMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
index 56102c1002..506fdaace1 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
@@ -88,6 +88,7 @@ export const RepeatingGroupSummary = ({
       {errors?.map(({ message }) => (
         <ValidationMessage
           key={message.key}
+          data-size='sm'
           className={classes.errorMessage}
         >
           <ExclamationmarkTriangleIcon fontSize='1.5rem' />
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
index cf7f32a2bc..df317e106a 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -103,6 +103,7 @@ export const RepeatingGroupTableSummary = ({
       {errors?.map(({ message }) => (
         <ValidationMessage
           key={message.key}
+          data-size='sm'
           className={classes.errorMessage}
         >
           <ExclamationmarkTriangleIcon fontSize='1.5rem' />
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
index dcc29a61ea..685fd8850d 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
@@ -113,7 +113,10 @@ export const MultipleValueSummary = ({
         </div>
         {errors.length > 0 &&
           errors.map(({ message }) => (
-            <ValidationMessage key={message.key}>
+            <ValidationMessage
+              key={message.key}
+              data-size='sm'
+            >
               <Lang
                 id={message.key}
                 params={message.params}
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
index 0a2649714c..50a8330d96 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
@@ -70,7 +70,10 @@ export const SingleValueSummary = ({
     {errors &&
       errors?.length > 0 &&
       errors?.map(({ message }) => (
-        <ValidationMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}

From 55b314f9dbe976d568474e707d22991ff1ecc7d7 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 26 Feb 2025 16:24:45 +0100
Subject: [PATCH 023/170] fix radiocard

---
 src/components/form/RadioButton.module.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
index c1e653caa7..0cf4d786d7 100644
--- a/src/components/form/RadioButton.module.css
+++ b/src/components/form/RadioButton.module.css
@@ -9,10 +9,10 @@
 }
 
 .card {
-  border-radius: 6px;
-  background-color: var(--ds-color-neutral-background-subtle);
+  border-radius: var(--ds-border-radius-md);
+  background-color: var(--ds-color-neutral-background-tinted);
   width: 100%;
-  padding: var(--ds-size-2);
+  padding: var(--ds-size-3);
   margin-bottom: var(--ds-size-3);
   cursor: pointer;
 }
@@ -22,7 +22,7 @@
 }
 
 .card:hover {
-  background: var(--ds-color-neutral-surface-default);
+  background: var(--ds-color-accent-surface-hover);
 }
 
 .card:active {
@@ -30,14 +30,17 @@
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--ds-color-neutral-surface-tinted);
-  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-brand1-base-active);
+  background: var(--ds-color-accent-surface-tinted);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-accent-border-strong);
 }
 
 .card:has(:focus-visible) {
-  background: var(--ds-color-neutral-surface-tinted);
-
   box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
   outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
   outline-offset: var(--ds-border-width-focus);
 }
+
+.card > div:has(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}

From c6e2819d7874281d90590da65c77fba551426ed8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 3 Mar 2025 10:38:59 +0100
Subject: [PATCH 024/170] update to 0.100

---
 package.json |  6 +++---
 yarn.lock    | 40 ++++++++++++++++++++--------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 2a7e262666..20aef33bac 100644
--- a/package.json
+++ b/package.json
@@ -133,9 +133,9 @@
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
     "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "1.0.0-next.49",
-    "@digdir/designsystemet-react": "1.0.0-next.49",
-    "@digdir/designsystemet-theme": "1.0.0-next.49",
+    "@digdir/designsystemet-css": "0.100.52",
+    "@digdir/designsystemet-react": "0.100.52",
+    "@digdir/designsystemet-theme": "0.100.52",
     "@material-ui/core": "4.12.4",
     "@navikt/aksel-icons": "7.13.0",
     "@tanstack/react-query": "5.66.7",
diff --git a/yarn.lock b/yarn.lock
index 9ec252e5f8..cea054d847 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2043,29 +2043,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:1.0.0-next.49":
-  version: 1.0.0-next.49
-  resolution: "@digdir/designsystemet-css@npm:1.0.0-next.49"
-  checksum: 10c0/256f56735b0146a6a2fc051505d42e731a201af20a89c91c8eba12df19448b97e9fbb5b8e7ef96df348e4ea250e2913431f2b40fc62f9f92a5e28d7c983058e5
+"@digdir/designsystemet-css@npm:0.100.52":
+  version: 0.100.52
+  resolution: "@digdir/designsystemet-css@npm:0.100.52"
+  checksum: 10c0/0a75bd93f4e71808cf65632436654e80c0f58a1dd39d733bd312f362520bf4401db89fcb2c4593bea92d236c2c8b5175b03c3b6fc91c2dda8c9e256d77136f32
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:1.0.0-next.49":
-  version: 1.0.0-next.49
-  resolution: "@digdir/designsystemet-react@npm:1.0.0-next.49"
+"@digdir/designsystemet-react@npm:0.100.52":
+  version: 0.100.52
+  resolution: "@digdir/designsystemet-react@npm:0.100.52"
   dependencies:
     "@floating-ui/dom": "npm:^1.6.10"
     "@floating-ui/react": "npm:0.26.23"
     "@navikt/aksel-icons": "npm:^7.0.0"
     "@radix-ui/react-slot": "npm:^1.1.1"
     "@tanstack/react-virtual": "npm:^3.11.2"
-    "@u-elements/u-datalist": "npm:^0.1.2"
+    "@u-elements/u-datalist": "npm:^0.1.3"
     "@u-elements/u-details": "npm:^0.1.0"
     clsx: "npm:^2.1.1"
   peerDependencies:
     react: ">=18.3.1"
     react-dom: ">=18.3.1"
-  checksum: 10c0/ff34ef5bc15c1480d0c46af414f48bc4cc0676f5e22cc319307c54b710193f8d322cfde2e27c3fca27d2b7dbd7d316db1359ebd75b195072884e5bbd9ada0ebe
+  checksum: 10c0/02286cb629ba5c813cc25256c7987a16cb47faa515b043ff56f29d687a37347fdeea7596bc6b7a75aff2cca4639aeef1b318c8cc7665185bb70ad6c6cd26e051
+  languageName: node
+  linkType: hard
+
+"@digdir/designsystemet-theme@npm:0.100.52":
+  version: 0.100.52
+  resolution: "@digdir/designsystemet-theme@npm:0.100.52"
+  checksum: 10c0/86f48b35ca34e7ff44929f6e2ac0526181a3e592405722a11dfbffa15508c534db6e66ae43029d26ec7455697878d93ee9d6e605f207a8dc6ecd9fba4c875c51
   languageName: node
   linkType: hard
 
@@ -2076,13 +2083,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:1.0.0-next.49":
-  version: 1.0.0-next.49
-  resolution: "@digdir/designsystemet-theme@npm:1.0.0-next.49"
-  checksum: 10c0/acb63115c89769d570805f717748f646aa692bb2774c079ac3b25f3d1da886a2467b4ae644421f8e96936de234099d77c78dcb56c11b126bfd6b0f001f145070
-  languageName: node
-  linkType: hard
-
 "@discoveryjs/json-ext@npm:^0.6.1":
   version: 0.6.3
   resolution: "@discoveryjs/json-ext@npm:0.6.3"
@@ -5063,7 +5063,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@u-elements/u-datalist@npm:^0.1.2":
+"@u-elements/u-datalist@npm:^0.1.3":
   version: 0.1.3
   resolution: "@u-elements/u-datalist@npm:0.1.3"
   checksum: 10c0/090ce2ed43cda471313d51ddcfb4429ee9bf300f15a16de93cca10b9e05c0e033ad7be98a08f91700ee2b38e03cd53952bb590f077783fb03240407132ee4c88
@@ -5621,9 +5621,9 @@ __metadata:
     "@babel/runtime-corejs3": "npm:7.26.9"
     "@date-fns/tz": "npm:1.2.0"
     "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:1.0.0-next.49"
-    "@digdir/designsystemet-react": "npm:1.0.0-next.49"
-    "@digdir/designsystemet-theme": "npm:1.0.0-next.49"
+    "@digdir/designsystemet-css": "npm:0.100.52"
+    "@digdir/designsystemet-react": "npm:0.100.52"
+    "@digdir/designsystemet-theme": "npm:0.100.52"
     "@eslint/compat": "npm:1.2.6"
     "@faker-js/faker": "npm:9.5.0"
     "@material-ui/core": "npm:4.12.4"

From 5ac90ee169c65c7f1dc5b3592dd394ede8edf239 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 4 Mar 2025 09:59:08 +0100
Subject: [PATCH 025/170] fix closedby any for datepicker

---
 src/app-components/Datepicker/DatepickerDialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app-components/Datepicker/DatepickerDialog.tsx b/src/app-components/Datepicker/DatepickerDialog.tsx
index 18dd029321..57ad99c1eb 100644
--- a/src/app-components/Datepicker/DatepickerDialog.tsx
+++ b/src/app-components/Datepicker/DatepickerDialog.tsx
@@ -29,6 +29,7 @@ export function DatePickerDialog({
           role='dialog'
           aria-hidden={!isDialogOpen}
           closedby='any'
+          modal
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
           onClose={() => setIsDialogOpen(false)}
         >

From ef551f5508da846a80af356ae59b601fe7471bfb Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 4 Mar 2025 10:19:33 +0100
Subject: [PATCH 026/170] fix validationmessage placement

---
 src/features/validation/ComponentValidations.module.css | 6 ++++++
 src/features/validation/ComponentValidations.tsx        | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/features/validation/ComponentValidations.module.css

diff --git a/src/features/validation/ComponentValidations.module.css b/src/features/validation/ComponentValidations.module.css
new file mode 100644
index 0000000000..24c7a682eb
--- /dev/null
+++ b/src/features/validation/ComponentValidations.module.css
@@ -0,0 +1,6 @@
+.errorList {
+  padding: 0;
+  padding-top: var(--ds-size-2);
+  margin: 0;
+  list-style-type: none;
+}
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index d736f1b5bd..d2c51039d5 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Alert as AlertDesignSystem, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
+import classes from 'src/features/Validation/ComponentValidations.module.css';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
 import { validationsOfSeverity } from 'src/features/validation/utils';
 import { useCurrentNode } from 'src/layout/FormComponentContext';
@@ -96,7 +97,7 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
   const getUniqueKeyFromObject = useGetUniqueKeyFromObject();
 
   return (
-    <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
+    <ul className={classes.errorList}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
           <ValidationMessage data-size='sm'>

From 74fa09ab4b4479973733ee6a8d0b677b4d8e6508 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 5 Mar 2025 09:11:16 +0100
Subject: [PATCH 027/170] WIP

---
 .../Datepicker/Calendar.module.css            |  2 +
 src/layout/Datepicker/DropdownCaption.tsx     | 42 +++++++------------
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index 9df8d95152..79771aa577 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -88,6 +88,8 @@
 .dropdownCaption {
   display: flex;
   margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
   gap: 4px;
 }
 
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index 4d227e0fc8..48037b742e 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { formatMonthDropdown, useDayPicker } from 'react-day-picker';
 import type { MonthCaptionProps } from 'react-day-picker';
 
-import { Combobox } from '@digdir/designsystemet-react';
+import { Select } from '@digdir/designsystemet-react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@navikt/aksel-icons';
 import { addYears, max, min, setMonth, setYear, startOfMonth, subYears } from 'date-fns';
 
@@ -51,54 +51,42 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
         <ArrowLeftIcon />
       </Button>
       <div style={{ display: 'flex', gap: '8px' }}>
-        <Combobox
+        <Select
           style={{ width: '150px' }}
           id={id}
-          data-size='small'
-          value={[calendarMonth.date.getMonth().toString()]}
-          onValueChange={(months) => months.length && handleMonthChange(months[0])}
+          data-size='sm'
+          value={calendarMonth.date.getMonth().toString()}
+          onChange={(e) => handleMonthChange(e.target.value)}
           aria-label={langAsString('date_picker.aria_label_month_dropdown')}
           className={comboboxClasses.container}
-          portal={!isMobile}
         >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
           {months.map((date) => (
-            <Combobox.Option
-              ref={scrollToIfSelected(date.getMonth() === calendarMonth.date.getMonth())}
+            <Select.Option
               key={date.getMonth()}
               value={date.getMonth().toString()}
-              displayValue={formatMonthDropdown(date, dateLib)}
             >
               <Lang id={formatMonthDropdown(date, dateLib)} />
-            </Combobox.Option>
+            </Select.Option>
           ))}
-        </Combobox>
-        <Combobox
+        </Select>
+        <Select
           style={{ width: '100px' }}
           id={id}
-          data-size='small'
-          value={[calendarMonth.date.getFullYear().toString()]}
-          onValueChange={(years) => years.length && handleYearChange(years[0])}
+          data-size='sm'
+          value={calendarMonth.date.getFullYear().toString()}
+          onChange={(e) => handleYearChange(e.target.value)}
           aria-label={langAsString('date_picker.aria_label_year_dropdown')}
           className={comboboxClasses.container}
-          portal={!isMobile}
         >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
           {years.map((date) => (
-            <Combobox.Option
-              ref={scrollToIfSelected(date.getFullYear() === calendarMonth.date.getFullYear())}
+            <Select.Option
               key={date.getFullYear().toString()}
               value={date.getFullYear().toString()}
-              displayValue={date.getFullYear().toString()}
             >
               <Lang id={date.getFullYear().toString()} />
-            </Combobox.Option>
+            </Select.Option>
           ))}
-        </Combobox>
+        </Select>
       </div>
       <Button
         icon={true}

From 62704182a5b0cc5458d7744bfba47832e2343614 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 6 Mar 2025 14:27:41 +0100
Subject: [PATCH 028/170] calendar input fixes and card fix

---
 src/app-components/Card/Card.tsx              |  6 ++--
 .../Datepicker/Calendar.module.css            |  4 ---
 .../Datepicker/DatePickerInput.tsx            |  1 +
 src/app-components/Datepicker/Datepicker.tsx  |  4 +--
 src/layout/Datepicker/DatepickerComponent.tsx | 34 +++++++++----------
 5 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
index 6c038e810b..d84d268c82 100644
--- a/src/app-components/Card/Card.tsx
+++ b/src/app-components/Card/Card.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
-import Grid from '@material-ui/core/Grid';
 
 import classes from 'src/app-components/Card/Card.module.css';
+import { Flex } from 'src/app-components/Flex/Flex';
 
 type AppCardProps = {
   title?: React.ReactNode;
@@ -27,12 +27,12 @@ export function AppCard({ title, description, footer, media, color, mediaPositio
       )}
       {children && (
         <Card.Block>
-          <Grid
+          <Flex
             container
             spacing={6}
           >
             {children}
-          </Grid>
+          </Flex>
         </Card.Block>
       )}
       {footer && (
diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index 79771aa577..a11460993c 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -106,10 +106,6 @@
 .calendarInput {
   padding: 1px;
 }
-.calendarInput,
-.calendarInput * {
-  height: 36px;
-}
 .calendarInputWrapper button {
   min-height: 38px;
   min-width: 38px;
diff --git a/src/app-components/Datepicker/DatePickerInput.tsx b/src/app-components/Datepicker/DatePickerInput.tsx
index a2bbf5cef1..9c7a5eec03 100644
--- a/src/app-components/Datepicker/DatePickerInput.tsx
+++ b/src/app-components/Datepicker/DatePickerInput.tsx
@@ -58,6 +58,7 @@ export function DatePickerInput({
     <PatternFormat
       format={formatPattern}
       customInput={Textfield}
+      data-size='sm'
       mask='_'
       className={styles.calendarInput}
       type='text'
diff --git a/src/app-components/Datepicker/Datepicker.tsx b/src/app-components/Datepicker/Datepicker.tsx
index c12ccd7924..147bbb1d53 100644
--- a/src/app-components/Datepicker/Datepicker.tsx
+++ b/src/app-components/Datepicker/Datepicker.tsx
@@ -81,14 +81,14 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
             <Button
               id={`${id}-button`}
               variant='tertiary'
-              icon={true}
+              icon
               aria-controls='dialog'
               aria-haspopup='dialog'
               onClick={() => setIsDialogOpen(!isDialogOpen)}
               aria-label={buttonAriaLabel}
               aria-expanded={isDialogOpen}
               disabled={readOnly}
-              color='first'
+              data-color='accent'
               size='sm'
             >
               <CalendarIcon title={calendarIconTitle} />
diff --git a/src/layout/Datepicker/DatepickerComponent.tsx b/src/layout/Datepicker/DatepickerComponent.tsx
index fbce012218..3640c44210 100644
--- a/src/layout/Datepicker/DatepickerComponent.tsx
+++ b/src/layout/Datepicker/DatepickerComponent.tsx
@@ -70,24 +70,22 @@ export function DatepickerComponent({ node, overrideDisplay }: IDatepickerProps)
             item
             size={{ xs: 12 }}
           >
-            <div className={styles.calendarInputWrapper}>
-              <DatePickerControl
-                id={id}
-                value={value}
-                dateFormat={dateFormat}
-                timeStamp={timeStamp}
-                onValueChange={handleInputValueChange}
-                readOnly={readOnly}
-                required={required}
-                locale={languageLocale}
-                isMobile={isMobile}
-                minDate={calculatedMinDate}
-                maxDate={calculatedMaxDate}
-                DropdownCaption={DropdownCaption}
-                buttonAriaLabel={langAsString('date_picker.aria_label_icon')}
-                calendarIconTitle={langAsString('date_picker.aria_label_icon')}
-              />
-            </div>
+            <DatePickerControl
+              id={id}
+              value={value}
+              dateFormat={dateFormat}
+              timeStamp={timeStamp}
+              onValueChange={handleInputValueChange}
+              readOnly={readOnly}
+              required={required}
+              locale={languageLocale}
+              isMobile={isMobile}
+              minDate={calculatedMinDate}
+              maxDate={calculatedMaxDate}
+              DropdownCaption={DropdownCaption}
+              buttonAriaLabel={langAsString('date_picker.aria_label_icon')}
+              calendarIconTitle={langAsString('date_picker.aria_label_icon')}
+            />
           </Flex>
           <span className={`${styles.formatText} no-visual-testing`}>
             {langAsString('date_picker.format_text', [formatDate(new Date(), dateFormat)])}

From 8200ec337c13b544bf4593115170111ad86cb98e Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 10 Mar 2025 15:32:36 +0100
Subject: [PATCH 029/170] fix different number of hooks from prev render error

---
 src/layout/List/ListComponent.tsx | 116 +++++++++++++++---------------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 3c37691c2a..1aa1a2515b 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -160,68 +160,66 @@ export const ListComponent = ({ node }: IListProps) => {
     required,
   });
 
-  const options = saveToList ? (
-    <Fieldset>
-      <Fieldset.Legend>
-        {description && (
-          <Fieldset.Description>
-            <Lang id={description} />
-          </Fieldset.Description>
-        )}
-        <Heading
-          level={2}
-          data-size='sm'
-        >
-          <Lang id={title} />
-          <RequiredIndicator required={required} />
-        </Heading>
-      </Fieldset.Legend>
-      {data?.listItems.map((row) => (
-        <Checkbox
-          key={JSON.stringify(row)}
-          className={cn(classes.mobile)}
-          {...getCheckboxProps({ value: JSON.stringify(row) })}
-          onClick={() => handleRowClick(row)}
-          value={JSON.stringify(row)}
-          checked={isRowChecked(row)}
-          label={renderListItems(row, tableHeaders)}
-        />
-      ))}
-    </Fieldset>
-  ) : (
-    <Fieldset className={classes.mobileGroup}>
-      <Fieldset.Legend>
-        <Heading
-          level={2}
-          data-size='sm'
-        >
-          <Lang id={title} />
-          <RequiredIndicator required={required} />
-        </Heading>
-      </Fieldset.Legend>
-      {description && (
-        <Fieldset.Description>
-          <Lang id={description} />
-        </Fieldset.Description>
-      )}
-
-      {data?.listItems.map((row) => (
-        <Radio
-          key={JSON.stringify(row)}
-          {...getRadioProps({ value: JSON.stringify(row) })}
-          value={JSON.stringify(row)}
-          className={cn(classes.mobile, { [classes.selectedRow]: isRowSelected(row) })}
-          onClick={() => handleSelectedRadioRow({ selectedValue: row })}
-          label={renderListItems(row, tableHeaders)}
-        />
-      ))}
-    </Fieldset>
-  );
-
   if (isMobile) {
     return (
       <ComponentStructureWrapper node={node}>
-        {options}
+        {saveToList ? (
+          <Fieldset>
+            <Fieldset.Legend>
+              {description && (
+                <Fieldset.Description>
+                  <Lang id={description} />
+                </Fieldset.Description>
+              )}
+              <Heading
+                level={2}
+                data-size='sm'
+              >
+                <Lang id={title} />
+                <RequiredIndicator required={required} />
+              </Heading>
+            </Fieldset.Legend>
+            {data?.listItems.map((row) => (
+              <Checkbox
+                key={JSON.stringify(row)}
+                className={cn(classes.mobile)}
+                {...getCheckboxProps({ value: JSON.stringify(row) })}
+                onClick={() => handleRowClick(row)}
+                value={JSON.stringify(row)}
+                checked={isRowChecked(row)}
+                label={renderListItems(row, tableHeaders)}
+              />
+            ))}
+          </Fieldset>
+        ) : (
+          <Fieldset className={classes.mobileGroup}>
+            <Fieldset.Legend>
+              <Heading
+                level={2}
+                data-size='sm'
+              >
+                <Lang id={title} />
+                <RequiredIndicator required={required} />
+              </Heading>
+            </Fieldset.Legend>
+            {description && (
+              <Fieldset.Description>
+                <Lang id={description} />
+              </Fieldset.Description>
+            )}
+
+            {data?.listItems.map((row) => (
+              <Radio
+                key={JSON.stringify(row)}
+                {...getRadioProps({ value: JSON.stringify(row) })}
+                value={JSON.stringify(row)}
+                className={cn(classes.mobile, { [classes.selectedRow]: isRowSelected(row) })}
+                onClick={() => handleSelectedRadioRow({ selectedValue: row })}
+                label={renderListItems(row, tableHeaders)}
+              />
+            ))}
+          </Fieldset>
+        )}
         <Pagination
           pageSize={pageSize}
           setPageSize={setPageSize}

From 4c9b6e245a8cc0a173e707005bcf117de3db4ece Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 10 Mar 2025 15:43:46 +0100
Subject: [PATCH 030/170] fix list pagination page number

---
 src/layout/List/ListComponent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 1aa1a2515b..c68db0fe68 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -51,13 +51,13 @@ export const ListComponent = ({ node }: IListProps) => {
   } = item;
 
   const [pageSize, setPageSize] = useState<number>(pagination?.default ?? 0);
-  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(1);
   const [sortColumn, setSortColumn] = useState<string | undefined>();
   const [sortDirection, setSortDirection] = useState<AriaAttributes['aria-sort']>('none');
 
   const filter: Filter = {
     pageSize,
-    pageNumber: currentPage,
+    pageNumber: currentPage - 1,
     sortColumn,
     sortDirection,
   };

From 93d7496dcdddad88c34e13861803ddc0be1cd30f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 10 Mar 2025 16:05:50 +0100
Subject: [PATCH 031/170] fix listcomponent pagesize

---
 src/layout/List/ListComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index c68db0fe68..74c5b27501 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -347,7 +347,7 @@ function Pagination({
   const isMobile = useIsMobile();
 
   function handlePageSizeChange(newSize: number) {
-    setCurrentPage(0);
+    setCurrentPage(1);
     setPageSize(newSize);
   }
   const textStrings = language?.['list_component'];

From 6f968bc3c575d3ae8d0b8936b41d8b6aac86c2e2 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 11 Mar 2025 15:14:38 +0100
Subject: [PATCH 032/170] fix datepicker

---
 .../Datepicker/Calendar.module.css            |  1 +
 src/app-components/Datepicker/Datepicker.tsx  | 22 ++---------
 .../Datepicker/DatepickerDialog.tsx           | 38 +++++++++++++++++--
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index a11460993c..e4b9442128 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -50,6 +50,7 @@
 
 .calendarWrapper {
   max-width: 363px;
+  box-sizing: content-box;
 }
 .calendar {
   width: 350px;
diff --git a/src/app-components/Datepicker/Datepicker.tsx b/src/app-components/Datepicker/Datepicker.tsx
index 147bbb1d53..a9b2014933 100644
--- a/src/app-components/Datepicker/Datepicker.tsx
+++ b/src/app-components/Datepicker/Datepicker.tsx
@@ -4,7 +4,6 @@ import type { MonthCaption } from 'react-day-picker';
 import { CalendarIcon } from '@navikt/aksel-icons';
 import { isValid as isValidDate } from 'date-fns';
 
-import { Button } from 'src/app-components/Button/Button';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { DatePickerCalendar } from 'src/app-components/Datepicker/DatePickerCalendar';
 import { DatePickerDialog } from 'src/app-components/Datepicker/DatepickerDialog';
@@ -75,25 +74,12 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
           readOnly={readOnly}
         />
         <DatePickerDialog
+          id={id}
+          buttonAriaLabel={buttonAriaLabel}
+          readOnly={readOnly}
           isDialogOpen={isDialogOpen}
           setIsDialogOpen={setIsDialogOpen}
-          trigger={
-            <Button
-              id={`${id}-button`}
-              variant='tertiary'
-              icon
-              aria-controls='dialog'
-              aria-haspopup='dialog'
-              onClick={() => setIsDialogOpen(!isDialogOpen)}
-              aria-label={buttonAriaLabel}
-              aria-expanded={isDialogOpen}
-              disabled={readOnly}
-              data-color='accent'
-              size='sm'
-            >
-              <CalendarIcon title={calendarIconTitle} />
-            </Button>
-          }
+          trigger={<CalendarIcon title={calendarIconTitle} />}
         >
           <DatePickerCalendar
             id={id}
diff --git a/src/app-components/Datepicker/DatepickerDialog.tsx b/src/app-components/Datepicker/DatepickerDialog.tsx
index 57ad99c1eb..ceb4a32a67 100644
--- a/src/app-components/Datepicker/DatepickerDialog.tsx
+++ b/src/app-components/Datepicker/DatepickerDialog.tsx
@@ -6,12 +6,24 @@ import { Dialog, Popover } from '@digdir/designsystemet-react';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { useIsMobile } from 'src/hooks/useDeviceWidths';
 
+type DatePickerDialogProps = {
+  id: string;
+  buttonAriaLabel: string;
+  readOnly: boolean;
+  trigger: ReactNode;
+  isDialogOpen: boolean;
+  setIsDialogOpen: (open: boolean) => void;
+};
+
 export function DatePickerDialog({
+  id,
+  buttonAriaLabel,
+  readOnly,
   children,
   trigger,
   isDialogOpen,
   setIsDialogOpen,
-}: PropsWithChildren<{ trigger: ReactNode; isDialogOpen: boolean; setIsDialogOpen: (open: boolean) => void }>) {
+}: PropsWithChildren<DatePickerDialogProps>) {
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -23,7 +35,17 @@ export function DatePickerDialog({
   if (isMobile) {
     return (
       <Dialog.TriggerContext>
-        <Dialog.Trigger asChild={true}>{trigger}</Dialog.Trigger>
+        <Dialog.Trigger
+          id={`${id}-button`}
+          variant='tertiary'
+          icon
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          aria-label={buttonAriaLabel}
+          disabled={readOnly}
+          data-size='sm'
+        >
+          {trigger}
+        </Dialog.Trigger>
         <Dialog
           ref={modalRef}
           role='dialog'
@@ -40,7 +62,17 @@ export function DatePickerDialog({
   }
   return (
     <Popover.TriggerContext>
-      <Popover.Trigger asChild={true}>{trigger}</Popover.Trigger>
+      <Popover.Trigger
+        id={`${id}-button`}
+        variant='tertiary'
+        icon
+        onClick={() => setIsDialogOpen(!isDialogOpen)}
+        aria-label={buttonAriaLabel}
+        disabled={readOnly}
+        data-size='sm'
+      >
+        {trigger}
+      </Popover.Trigger>
       <Popover
         className={styles.calendarWrapper}
         aria-modal

From c728531857c645a38f1b863687a1837b2adb29a8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 11 Mar 2025 15:24:32 +0100
Subject: [PATCH 033/170] remove css class doing nothing

---
 src/app-components/Datepicker/Calendar.module.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index e4b9442128..b042aa06c2 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -107,10 +107,7 @@
 .calendarInput {
   padding: 1px;
 }
-.calendarInputWrapper button {
-  min-height: 38px;
-  min-width: 38px;
-}
+
 .calendarInput input:not(:focus-visible),
 .calendarInput button {
   border: none;

From b90677aa9537a21e545e9e05f089f885a6818541 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Mar 2025 08:44:56 +0100
Subject: [PATCH 034/170] fix some datepicker styling

---
 src/app-components/Datepicker/Calendar.module.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index b042aa06c2..0736b95744 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -20,7 +20,7 @@
 }
 
 .selectedDate {
-  background-color: var(--ds-global-blue-9);
+  background-color: var(--ds-color-accent-base-active);
   color: white;
   font-weight: normal;
   border-radius: var(--ds-border-radius-md);
@@ -38,18 +38,18 @@
 }
 .focusedDate {
   border-radius: var(--ds-border-radius-md);
-  background: var(--ds-global-blue-2);
+  background: var(--ds-blue-2);
 }
 .today {
   border-radius: var(--ds-border-radius-md);
-  border: var(--ds-border-width-default) solid var(--ds-global-blue-2);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
 }
 .disabledDate:hover button {
   cursor: not-allowed;
 }
 
 .calendarWrapper {
-  max-width: 363px;
+  max-width: 380px;
   box-sizing: content-box;
 }
 .calendar {
@@ -68,7 +68,8 @@
 }
 .calendarDay:hover {
   border-radius: var(--ds-border-radius-md);
-  background: var(--ds-global-blue-2);
+  background: var(--ds-color-accent-surface-hover);
+  cursor: pointer;
 }
 .calendarDay {
   width: 48px;
@@ -85,6 +86,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--ds-size-2);
+  align-items: center;
 }
 .dropdownCaption {
   display: flex;

From 5dedc5ff287d7f6965e73e5785afdce29393abc3 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Mar 2025 08:53:10 +0100
Subject: [PATCH 035/170] fix datepicker input button styling

---
 src/app-components/Datepicker/Calendar.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index 0736b95744..92b37aff07 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -103,6 +103,11 @@
   gap: var(--ds-size-1);
   background: white;
 }
+
+.calendarInputWrapper button {
+  margin: 1px;
+}
+
 .calendarInputWrapper:hover {
   box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
 }
@@ -115,6 +120,7 @@
   border: none;
   background: white;
 }
+
 .calendarInput input:not(:focus-visible):hover {
   box-shadow: none;
 }

From 89432a1d45291c51b46635b5a94f9ee4221ce527 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Mar 2025 09:22:24 +0100
Subject: [PATCH 036/170] move css where it belongs for likert

---
 src/layout/Likert/LikertComponent.module.css  | 64 +++++++++++++++++++
 src/layout/Likert/LikertComponent.tsx         |  2 +-
 .../LikertItem/LikertItemComponent.module.css | 52 ---------------
 3 files changed, 65 insertions(+), 53 deletions(-)
 create mode 100644 src/layout/Likert/LikertComponent.module.css

diff --git a/src/layout/Likert/LikertComponent.module.css b/src/layout/Likert/LikertComponent.module.css
new file mode 100644
index 0000000000..0e07cfac46
--- /dev/null
+++ b/src/layout/Likert/LikertComponent.module.css
@@ -0,0 +1,64 @@
+.likertTable {
+  width: 100%;
+}
+
+/* ====
+TODO(1779): Remove these styles after going through all the different Table styles in
+Altinn, and making sure they are consistent. */
+.likertTable {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.12),
+    0 2px 2px rgba(0, 0, 0, 0.12);
+}
+
+.likertTable th {
+  border-bottom: 1px solid #dde3e5;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.likertTable thead th {
+  background-color: var(--ds-color-neutral-1);
+}
+
+.likertTable tr:not(:last-of-type) td {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #dde3e5;
+}
+
+.likertTable tr:last-of-type td {
+  border-bottom: none;
+}
+
+/* ==== */
+
+.likertTable thead th:not(:first-of-type) {
+  width: 100px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.likertHeading {
+  text-align: left;
+  padding-bottom: var(--ds-size-4);
+}
+
+.likertMobileGroup {
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.likertCellDividerStart {
+  border-inline-start: 1px solid #dde3e5;
+}
+
+.likertCellDividerEnd {
+  border-inline-end: 1px solid #dde3e5;
+}
+
+.likertCellDividerBoth {
+  border-inline-start: 1px solid #dde3e5;
+  border-inline-end: 1px solid #dde3e5;
+}
diff --git a/src/layout/Likert/LikertComponent.tsx b/src/layout/Likert/LikertComponent.tsx
index 8d7cca3a33..3833415c29 100644
--- a/src/layout/Likert/LikertComponent.tsx
+++ b/src/layout/Likert/LikertComponent.tsx
@@ -14,7 +14,7 @@ import { useIsMobileOrTablet } from 'src/hooks/useDeviceWidths';
 import { LayoutStyle } from 'src/layout/common.generated';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponentById } from 'src/layout/GenericComponent';
-import classes from 'src/layout/LikertItem/LikertItemComponent.module.css';
+import classes from 'src/layout/Likert/LikertComponent.module.css';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { typedBoolean } from 'src/utils/typing';
diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css
index 08aae1deeb..3cef531e3d 100644
--- a/src/layout/LikertItem/LikertItemComponent.module.css
+++ b/src/layout/LikertItem/LikertItemComponent.module.css
@@ -1,61 +1,9 @@
-.likertTable {
-  width: 100%;
-}
-
-/* ====
-TODO(1779): Remove these styles after going through all the different Table styles in
-Altinn, and making sure they are consistent. */
-.likertTable {
-  box-shadow:
-    0 1px 1px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.12);
-}
-
-.likertTable th {
-  border-bottom: 1px solid #dde3e5;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.likertTable thead th {
-  background-color: var(--ds-color-neutral-1);
-}
-
-.likertTable tr:not(:last-of-type) td {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #dde3e5;
-}
-
-.likertTable tr:last-of-type td {
-  border-bottom: none;
-}
-
-/* ==== */
-
-.likertTable thead th:not(:first-of-type) {
-  width: 100px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
 .likertRadioButton {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.likertHeading {
-  text-align: left;
-  padding-bottom: var(--ds-size-4);
-}
-
-.likertMobileGroup {
-  gap: 12px;
-  display: flex;
-  flex-direction: column;
-}
-
 /*
   This styling was causing a weird frame around
   the input element in some screen readers.

From a869b821b54ed3fef243a17fc3058cdb540d013d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Mar 2025 10:00:01 +0100
Subject: [PATCH 037/170] Likert styling fixes

---
 src/layout/Likert/LikertComponent.module.css  | 14 +++++++++-----
 src/layout/Likert/LikertComponent.tsx         |  1 +
 src/layout/LikertItem/LikertItemComponent.tsx | 19 ++++++++++---------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/layout/Likert/LikertComponent.module.css b/src/layout/Likert/LikertComponent.module.css
index 0e07cfac46..d939dbe40c 100644
--- a/src/layout/Likert/LikertComponent.module.css
+++ b/src/layout/Likert/LikertComponent.module.css
@@ -13,17 +13,17 @@ Altinn, and making sure they are consistent. */
 
 .likertTable th {
   border-bottom: 1px solid #dde3e5;
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .likertTable thead th {
   background-color: var(--ds-color-neutral-1);
 }
 
-.likertTable tr:not(:last-of-type) td {
-  padding-top: 8px;
-  padding-bottom: 8px;
+.likertTable tr td {
+  padding-top: var(--ds-size-4);
+  padding-bottom: var(--ds-size-4);
   border-bottom: 1px solid #dde3e5;
 }
 
@@ -33,6 +33,10 @@ Altinn, and making sure they are consistent. */
 
 /* ==== */
 
+.likertTable thead td:not(:first-of-type) {
+  justify-content: center;
+}
+
 .likertTable thead th:not(:first-of-type) {
   width: 100px;
   text-align: center;
diff --git a/src/layout/Likert/LikertComponent.tsx b/src/layout/Likert/LikertComponent.tsx
index 3833415c29..9333d784e6 100644
--- a/src/layout/Likert/LikertComponent.tsx
+++ b/src/layout/Likert/LikertComponent.tsx
@@ -92,6 +92,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
       ) : (
         <Table
           id={id}
+          border
           className={classes.likertTable}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
         >
diff --git a/src/layout/LikertItem/LikertItemComponent.tsx b/src/layout/LikertItem/LikertItemComponent.tsx
index 3e21f2da71..e5389c92c8 100644
--- a/src/layout/LikertItem/LikertItemComponent.tsx
+++ b/src/layout/LikertItem/LikertItemComponent.tsx
@@ -85,15 +85,16 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, PropsFromGenericCompo
               [classes.likertCellDividerBoth]: divider === 'both',
             })}
           >
-            <Radio
-              checked={isChecked}
-              readOnly={readOnly}
-              onChange={handleChange}
-              value={option.value}
-              className={classes.likertRadioButton}
-              name={rowLabelId}
-              aria-labelledby={labelledby}
-            />
+            <div className={classes.likertRadioButton}>
+              <Radio
+                checked={isChecked}
+                readOnly={readOnly}
+                onChange={handleChange}
+                value={option.value}
+                name={rowLabelId}
+                aria-labelledby={labelledby}
+              />
+            </div>
           </Table.Cell>
         );
       })}

From 01ec60da947951ca0ecae3b998e8649a3765ed17 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 12 Mar 2025 15:46:13 +0100
Subject: [PATCH 038/170] move character counter out of input app component

---
 src/app-components/Input/Input.tsx  |  28 ++----
 src/layout/Input/InputComponent.tsx | 129 +++++++++++++++++-----------
 2 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index 9671a1beb6..b8790b749e 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import { Field, Paragraph, Textfield } from '@digdir/designsystemet-react';
-import type { FieldCounterProps } from '@digdir/designsystemet-react';
+import { Paragraph, Textfield } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Input/Input.module.css';
 import type { InputType } from 'src/app-components/Input/constants';
@@ -16,7 +15,6 @@ export type InputProps = {
   size?: 'sm' | 'md' | 'lg';
   prefix?: string;
   suffix?: string;
-  characterLimit?: FieldCounterProps;
   error?: ReactNode;
   disabled?: boolean;
   id?: string;
@@ -40,7 +38,7 @@ export type InputProps = {
   LabelRequired;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', readOnly, error, textonly, characterLimit, ...rest } = props;
+  const { size = 'sm', readOnly, error, textonly, ...rest } = props;
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     if (readOnly) {
@@ -67,20 +65,12 @@ export function Input(props: InputProps) {
   }
 
   return (
-    <Field>
-      <Textfield
-        aria-invalid={!!error}
-        onPaste={handlePaste}
-        data-size={size}
-        readOnly={readOnly}
-        {...rest}
-      />
-      {characterLimit && (
-        <Field.Counter
-          {...characterLimit}
-          data-size='sm'
-        />
-      )}
-    </Field>
+    <Textfield
+      data-size={size}
+      onPaste={handlePaste}
+      aria-invalid={!!error}
+      readOnly={readOnly}
+      {...rest}
+    />
   );
 }
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 2ad22d2661..0807ebb033 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Field } from '@digdir/designsystemet-react';
+
 import { FormattedInput } from 'src/app-components/Input/FormattedInput';
 import { Input } from 'src/app-components/Input/Input';
 import { NumericInput } from 'src/app-components/Input/NumericInput';
@@ -92,7 +94,6 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     error: !useIsValid(node),
     prefix: textResourceBindings?.prefix ? langAsString(textResourceBindings.prefix) : undefined,
     suffix: textResourceBindings?.suffix ? langAsString(textResourceBindings.suffix) : undefined,
-    characterLimit: !readOnly ? characterLimit : undefined,
     style: { width: '100%' },
   };
 
@@ -102,63 +103,87 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     case 'search':
     case 'text':
       return (
-        <Input
-          {...inputProps}
-          value={formValue}
-          type={variant.type}
-          onChange={(event) => {
-            setValue('simpleBinding', event.target.value);
-          }}
-        />
+        <Field>
+          <Input
+            {...inputProps}
+            value={formValue}
+            type={variant.type}
+            onChange={(event) => {
+              setValue('simpleBinding', event.target.value);
+            }}
+          />
+          {characterLimit && !readOnly && (
+            <Field.Counter
+              {...characterLimit}
+              data-size='sm'
+            />
+          )}
+        </Field>
       );
     case 'pattern':
       return (
-        <FormattedInput
-          {...inputProps}
-          {...variant.format}
-          value={formValue}
-          type='text'
-          onValueChange={(values, sourceInfo) => {
-            if (sourceInfo.source === 'prop') {
-              return;
-            }
-            setValue('simpleBinding', values.value);
-          }}
-        />
+        <Field>
+          <FormattedInput
+            {...inputProps}
+            {...variant.format}
+            value={formValue}
+            type='text'
+            onValueChange={(values, sourceInfo) => {
+              if (sourceInfo.source === 'prop') {
+                return;
+              }
+              setValue('simpleBinding', values.value);
+            }}
+          />
+          {characterLimit && !readOnly && (
+            <Field.Counter
+              {...characterLimit}
+              data-size='sm'
+            />
+          )}
+        </Field>
       );
     case 'number':
       return (
-        <NumericInput
-          {...inputProps}
-          {...variant.format}
-          value={formValue}
-          type='text'
-          onValueChange={(values, sourceInfo) => {
-            if (sourceInfo.source === 'prop') {
-              // Do not update the value if the change is from props (i.e. let's not send form data updates when
-              // visual-only decimalScale changes)
-              return;
-            }
-            setValue('simpleBinding', values.value);
-          }}
-          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-            /* This is a workaround for a react-number-format bug that
-             * removes the decimal on paste.
-             * We should be able to remove it when this issue gets fixed:
-             * https://github.com/s-yadav/react-number-format/issues/349
-             *  */
-            event.preventDefault();
-            if (inputProps.readOnly) {
-              return;
-            }
-            const pastedText = event.clipboardData.getData('Text');
-            if (pastedText.indexOf(',') !== -1) {
-              setValue('simpleBinding', pastedText.replace(',', '.'));
-            } else {
-              setValue('simpleBinding', pastedText);
-            }
-          }}
-        />
+        <Field>
+          <NumericInput
+            {...inputProps}
+            {...variant.format}
+            value={formValue}
+            type='text'
+            onValueChange={(values, sourceInfo) => {
+              if (sourceInfo.source === 'prop') {
+                // Do not update the value if the change is from props (i.e. let's not send form data updates when
+                // visual-only decimalScale changes)
+                return;
+              }
+              setValue('simpleBinding', values.value);
+            }}
+            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+              /* This is a workaround for a react-number-format bug that
+               * removes the decimal on paste.
+               * We should be able to remove it when this issue gets fixed:
+               * https://github.com/s-yadav/react-number-format/issues/349
+               *  */
+              event.preventDefault();
+              if (inputProps.readOnly) {
+                return;
+              }
+              const pastedText = event.clipboardData.getData('Text');
+              if (pastedText.indexOf(',') !== -1) {
+                setValue('simpleBinding', pastedText.replace(',', '.'));
+              } else {
+                setValue('simpleBinding', pastedText);
+              }
+            }}
+          />
+          {characterLimit && !readOnly && (
+            <Field.Counter
+              {...characterLimit}
+              data-size='sm'
+            />
+          )}
+        </Field>
       );
   }
 };

From ad4258d2781293e956aa4059e6a1b8d1b7e43b47 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 13 Mar 2025 11:06:50 +0100
Subject: [PATCH 039/170] remove unused function in datepicker

---
 package.json                              |  6 ++---
 src/layout/Datepicker/DropdownCaption.tsx | 29 ----------------------
 yarn.lock                                 | 30 +++++++++++------------
 3 files changed, 18 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 1eb037e139..e77933d052 100644
--- a/package.json
+++ b/package.json
@@ -133,9 +133,9 @@
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
     "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "1.0.0",
-    "@digdir/designsystemet-react": "1.0.0",
-    "@digdir/designsystemet-theme": "1.0.0",
+    "@digdir/designsystemet-css": "1.0.2",
+    "@digdir/designsystemet-react": "1.0.2",
+    "@digdir/designsystemet-theme": "1.0.2",
     "@material-ui/core": "4.12.4",
     "@navikt/aksel-icons": "7.14.2",
     "@tanstack/react-query": "5.66.9",
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index 48037b742e..9c0274f582 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -13,13 +13,11 @@ import { getDateLib } from 'src/app-components/Datepicker/utils/dateHelpers';
 import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
-import { useIsMobile } from 'src/hooks/useDeviceWidths';
 import comboboxClasses from 'src/styles/combobox.module.css';
 
 export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
   const { langAsString } = useLanguage();
-  const isMobile = useIsMobile();
   const languageLocale = useCurrentLanguage();
   const dateLib = getDateLib(languageLocale ?? 'nb');
 
@@ -101,30 +99,3 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
     </div>
   );
 };
-
-/**
- * This is a workaround to make sure that the selected option is visible when opening the dropdown see: https://github.com/Altinn/app-frontend-react/issues/2637
- * The ref attribute will call this function with the option element, and this will try to scroll it into view once.
- * When it succeeds, we set a 'data-scroll' attribute to make sure it does not keep trying so the user can scroll as they please.
- */
-function scrollToIfSelected(selected: boolean) {
-  return selected
-    ? (el: HTMLButtonElement | null) => {
-        if (
-          el &&
-          el.parentElement &&
-          // The option list seems to first render with unbounded height and later rendering with scroll-bars, we need to check again when the height changes
-          el.getAttribute('data-scroll-element-height') !== `${el.parentElement.clientHeight}`
-        ) {
-          el.parentElement.scrollTop = el.offsetTop;
-          if (
-            el.offsetTop == 0 || // no scrolling necessary
-            el.parentElement.scrollHeight - el.parentElement.clientHeight == 0 || // container does not have scroll-bars
-            (el.offsetTop > 0 && el.parentElement.scrollTop > 0) // check that we have actually scrolled
-          ) {
-            el.setAttribute('data-scroll-element-height', `${el.parentElement.clientHeight}`);
-          }
-        }
-      }
-    : undefined;
-}
diff --git a/yarn.lock b/yarn.lock
index b5de0049af..06b2772675 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2043,16 +2043,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@digdir/designsystemet-css@npm:1.0.0"
-  checksum: 10c0/99659c2b9165e18d7c43e30742ce6ca6f5999833788af884523175ae37c67ee3ee277177d8845dae0e142aa8826996c367e8a90297c02b51e5fddd01a08ee996
+"@digdir/designsystemet-css@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@digdir/designsystemet-css@npm:1.0.2"
+  checksum: 10c0/5563b3e1034462ff65754b2e42cdc0bae294e71065b04b3ae814cfad15821c82140316b5e163086ca53582a0f15351e1c23a5a5dccd77017607e96e76f3d2d5d
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@digdir/designsystemet-react@npm:1.0.0"
+"@digdir/designsystemet-react@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@digdir/designsystemet-react@npm:1.0.2"
   dependencies:
     "@floating-ui/dom": "npm:^1.6.10"
     "@floating-ui/react": "npm:0.26.23"
@@ -2066,7 +2066,7 @@ __metadata:
   peerDependencies:
     react: ">=18.3.1 || ^19.0.0"
     react-dom: ">=18.3.1 || ^19.0.0"
-  checksum: 10c0/6af540acc2c63e717b0382ae032d973d20d054d562947c98bfc26229580789acaf8890bad20cb755e00c7df3db4fa93ab4f6d7fb00b6713f23a88a6a834cf329
+  checksum: 10c0/aff11321387b04d1da5e8a0c9db1fafe19d6be1d2d4a530b31e7cf0c52c88c30ec2b2ff56cff7f0a9f7b133d049a3df7cf1b42af0e39f7bac36235c4d61cb371
   languageName: node
   linkType: hard
 
@@ -2077,10 +2077,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@digdir/designsystemet-theme@npm:1.0.0"
-  checksum: 10c0/c9e14abbb8c870a1586c50593a652e54f542bf6341afeca7013c7963935ad545606c43ca95460f80d5009078d5310bb7a8b0616036edd5b26eb9d8077e5b6375
+"@digdir/designsystemet-theme@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@digdir/designsystemet-theme@npm:1.0.2"
+  checksum: 10c0/fc02d60ce8a9b0f3ca6115a5c0b04201e049c80b7af1887660bafed898ac4220820d62b8ca5801130bd1137f7f3ad6ac6b60bfefeb0670f53354934fb0dbf331
   languageName: node
   linkType: hard
 
@@ -5459,9 +5459,9 @@ __metadata:
     "@babel/runtime-corejs3": "npm:7.26.9"
     "@date-fns/tz": "npm:1.2.0"
     "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:1.0.0"
-    "@digdir/designsystemet-react": "npm:1.0.0"
-    "@digdir/designsystemet-theme": "npm:1.0.0"
+    "@digdir/designsystemet-css": "npm:1.0.2"
+    "@digdir/designsystemet-react": "npm:1.0.2"
+    "@digdir/designsystemet-theme": "npm:1.0.2"
     "@eslint/compat": "npm:1.2.7"
     "@faker-js/faker": "npm:9.5.0"
     "@material-ui/core": "npm:4.12.4"

From 99924160fb42148f3aa348cd127f6a345d8d7c15 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 10:27:40 +0100
Subject: [PATCH 040/170] fix eadio tests

---
 src/components/form/RadioButton.test.tsx              | 5 ++++-
 src/layout/RadioButtons/ControlledRadioGroup.test.tsx | 6 ------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/form/RadioButton.test.tsx b/src/components/form/RadioButton.test.tsx
index e80feba423..79febb1f2f 100644
--- a/src/components/form/RadioButton.test.tsx
+++ b/src/components/form/RadioButton.test.tsx
@@ -52,7 +52,10 @@ describe('RadioButton', () => {
     const helpTextButton = screen.getByRole('button', { name: /Hjelpetekst: trykk på knappen/i });
     expect(helpTextButton).toBeVisible();
     await userEvent.click(helpTextButton);
-    expect(await screen.findByRole('dialog')).toHaveTextContent('Hjelpetekst: trykk på knappen');
+    expect(screen.getByRole('button', { name: 'Hjelpetekst: trykk på knappen' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
   });
   it('should render with hidden label', async () => {
     await render({ label: 'Dette er en knapp', hideLabel: true });
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
index 465222c835..efb2c9bdda 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
@@ -188,9 +188,6 @@ describe('RadioButtonsContainerComponent', () => {
     expect(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for first' }),
     ).toHaveAttribute('aria-expanded', 'true');
-    expect((await screen.findAllByRole('dialog')).at(0)).toHaveTextContent(
-      'Help Text: The value from the group is: Label for first',
-    );
 
     await userEvent.click(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
@@ -198,9 +195,6 @@ describe('RadioButtonsContainerComponent', () => {
     expect(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
     ).toHaveAttribute('aria-expanded', 'true');
-    expect((await screen.findAllByRole('dialog')).at(1)).toHaveTextContent(
-      'Help Text: The value from the group is: Label for second',
-    );
 
     expect(formDataMethods.setLeafValue).not.toHaveBeenCalled();
     await userEvent.click(getRadio({ name: /The value from the group is: Label for first/ }));

From 4b3d29c7c55dcff1907d0460fba16553bce8770c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 13:24:30 +0100
Subject: [PATCH 041/170] fix confirmpage test

---
 src/features/processEnd/confirm/containers/ConfirmPage.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx b/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
index 6c93da93ec..1ab9d6d76d 100644
--- a/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
+++ b/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
@@ -95,7 +95,7 @@ describe('ConfirmPage', () => {
     expect(screen.getByRole('button', { name: submitBtnText })).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByText(loadingText)).toBeInTheDocument();
+      expect(screen.getByLabelText(loadingText)).toBeInTheDocument();
     });
   });
 });

From 80e7653a61e5dc8798f9db3f55acc0be6be43f33 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 14:33:30 +0100
Subject: [PATCH 042/170] fix address and checkbox tests

---
 src/app-components/Label/Label.tsx             |  3 +++
 src/layout/Address/AddressComponent.tsx        | 15 ++++++++++-----
 .../CheckboxesContainerComponent.test.tsx      | 18 ++++++++++--------
 .../CheckboxesContainerComponent.tsx           | 10 ++++++++--
 .../integration/frontend-test/components.ts    |  2 +-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
index 7d373c3988..65c076f011 100644
--- a/src/app-components/Label/Label.tsx
+++ b/src/app-components/Label/Label.tsx
@@ -10,6 +10,7 @@ import classes from 'src/app-components/Label/Label.module.css';
 import type { IGridStyling } from 'src/layout/common.generated';
 
 type LabelProps = {
+  id?: string;
   label: string | ReactElement | undefined;
   htmlFor?: DesignsystemetLabelProps['htmlFor'];
   required?: boolean;
@@ -23,6 +24,7 @@ type LabelProps = {
 };
 
 export function Label({
+  id,
   label,
   htmlFor,
   required,
@@ -52,6 +54,7 @@ export function Label({
         <span className={classes.labelAndDescWrapper}>
           <span className={classes.labelAndHelpWrapper}>
             <DesignsystemetLabel
+              id={id}
               weight='medium'
               data-size='md'
               htmlFor={htmlFor}
diff --git a/src/layout/Address/AddressComponent.tsx b/src/layout/Address/AddressComponent.tsx
index d2903d30f5..3e33284231 100644
--- a/src/layout/Address/AddressComponent.tsx
+++ b/src/layout/Address/AddressComponent.tsx
@@ -68,6 +68,7 @@ export function AddressComponent({ node }: IAddressProps) {
     >
       <div>
         <Label
+          id={`address_address_label_${id}`}
           htmlFor={`address_address_${id}`}
           label={langAsString(textResourceBindings?.title ?? 'address_component.address')}
           required={required}
@@ -88,7 +89,7 @@ export function AddressComponent({ node }: IAddressProps) {
             <Input
               id={`address_address_${id}`}
               data-bindingkey={bindingKeys.address}
-              aria-label={langAsString(textResourceBindings?.title ?? 'address_component.address')}
+              aria-labelledby={`address_address_label_${id}`}
               error={hasValidationErrors(bindingValidations?.address)}
               value={address}
               onChange={(ev) => setValue('address', ev.target.value)}
@@ -105,6 +106,7 @@ export function AddressComponent({ node }: IAddressProps) {
       {!simplified && (
         <div>
           <Label
+            id={`address_care_of_label_${id}`}
             htmlFor={`address_care_of_${id}`}
             label={langAsString(textResourceBindings?.careOfTitle ?? 'address_component.care_of')}
             required={required}
@@ -125,7 +127,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_care_of_${id}`}
                 data-bindingkey={bindingKeys.careOf}
-                aria-label={langAsString(textResourceBindings?.careOfTitle ?? 'address_component.care_of')}
+                aria-labelledby={`address_care_of_label_${id}`}
                 error={hasValidationErrors(bindingValidations?.careOf)}
                 value={careOf}
                 onChange={(ev) => setValue('careOf', ev.target.value)}
@@ -148,6 +150,7 @@ export function AddressComponent({ node }: IAddressProps) {
           className={`${classes.addressComponentZipCode} ${classes.addressComponentSmallInputs}`}
         >
           <Label
+            id={`address_zip_code_label_${id}`}
             htmlFor={`address_zip_code_${id}`}
             label={langAsString(textResourceBindings?.zipCodeTitle ?? 'address_component.zip_code')}
             required={required}
@@ -168,7 +171,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_zip_code_${id}`}
                 data-bindingkey={bindingKeys.zipCode}
-                aria-label={langAsString(textResourceBindings?.zipCodeTitle ?? 'address_component.zip_code')}
+                aria-labelledby={`address_zip_code_label_${id}`}
                 error={hasValidationErrors(bindingValidations?.zipCode)}
                 value={zipCode}
                 onChange={(ev) => setValue('zipCode', ev.target.value)}
@@ -187,6 +190,7 @@ export function AddressComponent({ node }: IAddressProps) {
           className={classes.addressComponentPostplace}
         >
           <Label
+            id={`address_post_place_label_${id}`}
             htmlFor={`address_post_place_${id}`}
             label={langAsString(textResourceBindings?.postPlaceTitle ?? 'address_component.post_place')}
             required={required}
@@ -207,7 +211,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_post_place_${id}`}
                 data-bindingkey={bindingKeys.postPlace}
-                aria-label={langAsString(textResourceBindings?.postPlaceTitle ?? 'address_component.post_place')}
+                aria-labelledby={`address_post_place_label_${id}`}
                 value={postPlace}
                 readOnly={true}
                 required={required}
@@ -221,6 +225,7 @@ export function AddressComponent({ node }: IAddressProps) {
       {!simplified && (
         <div>
           <Label
+            id={`address_house_number_label_${id}`}
             htmlFor={`address_house_number_${id}`}
             required={required}
             label={langAsString(textResourceBindings?.houseNumberTitle ?? 'address_component.house_number')}
@@ -249,7 +254,7 @@ export function AddressComponent({ node }: IAddressProps) {
                 <Input
                   id={`address_house_number_${id}`}
                   data-bindingkey={bindingKeys.houseNumber}
-                  aria-label={langAsString(textResourceBindings?.houseNumberTitle ?? 'address_component.house_number')}
+                  aria-labelledby={`address_house_number_label_${id}`}
                   error={hasValidationErrors(bindingValidations?.houseNumber)}
                   value={houseNumber}
                   onChange={(ev) => setValue('houseNumber', ev.target.value)}
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
index 33aaa4180b..bc7996cae6 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
@@ -216,7 +216,7 @@ describe('CheckboxesContainerComponent', () => {
       options: threeOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).toBeInTheDocument();
   });
 
   it('should show items in a row when layout is not defined, and options count is 2', async () => {
@@ -229,7 +229,7 @@ describe('CheckboxesContainerComponent', () => {
       options: twoOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).toBeInTheDocument();
   });
 
   it('should show items in a column when layout is "column" and options count is 2 ', async () => {
@@ -242,7 +242,7 @@ describe('CheckboxesContainerComponent', () => {
       options: twoOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).not.toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).not.toBeInTheDocument();
   });
 
   it('should show items in a columns when layout is not defined, and options count is 3', async () => {
@@ -253,7 +253,7 @@ describe('CheckboxesContainerComponent', () => {
       options: threeOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).not.toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).not.toBeInTheDocument();
   });
 
   it('should present replaced label if using data model source and trigger setLeafValue with replaced values', async () => {
@@ -276,17 +276,19 @@ describe('CheckboxesContainerComponent', () => {
     expect(screen.getByText(/Description: The value from the group is: Label for first/)).toBeInTheDocument();
     expect(screen.getByText(/Description: The value from the group is: Label for second/)).toBeInTheDocument();
 
-    expect(screen.getByText(/Help Text: The value from the group is: Label for first/)).toBeInTheDocument();
     await userEvent.click(
       screen.getByRole('button', { name: /Help Text: The value from the group is: Label for first/ }),
     );
-    expect(screen.getAllByText(/Help Text: The value from the group is: Label for first/)).toHaveLength(2);
+    expect(
+      screen.getByRole('button', { name: /Help Text: The value from the group is: Label for first/ }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
-    expect(screen.getByText(/Help Text: The value from the group is: Label for second/)).toBeInTheDocument();
     await userEvent.click(
       screen.getByRole('button', { name: /Help Text: The value from the group is: Label for second/ }),
     );
-    expect(screen.getAllByText(/Help Text: The value from the group is: Label for second/)).toHaveLength(2);
+    expect(
+      screen.getByRole('button', { name: /Help Text: The value from the group is: Label for second/ }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
     expect(formDataMethods.setLeafValue).not.toHaveBeenCalled();
     await userEvent.click(getCheckbox({ name: /The value from the group is: Label for second/ }));
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index 283025af9d..29cb1e9f2f 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -63,7 +63,6 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
           <Fieldset
             className={classes.checkboxGroup}
             aria-label={ariaLabel}
-            data-testid='checkboxes-fieldset'
           >
             {overrideDisplay?.renderLegend !== false && <Fieldset.Legend>{labelTextGroup}</Fieldset.Legend>}
             {textResourceBindings?.description && (
@@ -73,7 +72,14 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
             )}
             <ConditionalWrapper
               condition={horizontal}
-              wrapper={(children) => <div className={classes.horizontal}>{children}</div>}
+              wrapper={(children) => (
+                <div
+                  data-testid='horizontalWrapper'
+                  className={classes.horizontal}
+                >
+                  {children}
+                </div>
+              )}
             >
               {calculatedOptions.map((option) => (
                 <WrappedCheckbox
diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index bab1b7a7ae..568df7fec2 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -514,7 +514,7 @@ describe('UI Components', () => {
     cy.goto('changename');
     cy.gotoNavPage('grid');
     // dialog pops up when unchecking a checkbox
-    cy.get('[data-testid="checkboxes-fieldset"]').find('label').contains('Ja').dblclick();
+    cy.findByRole('checkbox', { name: /Ja/ }).dblclick();
     //Make sure that the alert popover for only one checkbox is displayed, if several dialogs are displayed, the test will fail
     cy.findByRole('dialog');
   });

From 2318365dce4b1ee44c34d130b796c3cc76b340e2 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 14:58:28 +0100
Subject: [PATCH 043/170] fix headercomponent test

---
 src/layout/Header/HeaderComponent.test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/layout/Header/HeaderComponent.test.tsx b/src/layout/Header/HeaderComponent.test.tsx
index 8109bd0b23..d25d2a49e0 100644
--- a/src/layout/Header/HeaderComponent.test.tsx
+++ b/src/layout/Header/HeaderComponent.test.tsx
@@ -104,11 +104,12 @@ describe('HeaderComponent', () => {
     });
 
     const helpButton = screen.getByRole('button', { name: /Hjelp/i });
-    expect(screen.queryByText(helpText)).not.toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'false');
     fireEvent.click(helpButton);
     expect(screen.getByText(helpText)).toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'true');
     fireEvent.click(helpButton);
 
-    expect(screen.queryByText(helpText)).not.toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'false');
   });
 });

From 3fa96ba3b682db6661ac959a022214de6586d196 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 15:24:03 +0100
Subject: [PATCH 044/170] fix headermenu dropdown styling

---
 src/index.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index b1e0bcd38b..6465e2b328 100644
--- a/src/index.css
+++ b/src/index.css
@@ -135,10 +135,7 @@ dl {
 }
 
 /* Workaround: The above style affects DropdownMenu from the design system */
-ul.fds-dropdownmenu {
-  padding: 8px;
-}
-ul.fds-dropdownmenu__section {
+.ds-dropdown ul {
   padding: 0;
 }
 

From 67959a2cc545813a27256917154df1f13bbecb6c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 14 Mar 2025 16:53:36 +0100
Subject: [PATCH 045/170] fix appheader test

---
 src/components/presentation/AppHeader/AppHeader.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/presentation/AppHeader/AppHeader.test.tsx b/src/components/presentation/AppHeader/AppHeader.test.tsx
index d2386a2856..368ae1c141 100644
--- a/src/components/presentation/AppHeader/AppHeader.test.tsx
+++ b/src/components/presentation/AppHeader/AppHeader.test.tsx
@@ -85,7 +85,7 @@ describe('presentation/AppHeader', () => {
       ),
     );
     expect(
-      screen.getByRole('menuitem', {
+      screen.getByRole('link', {
         name: /logg ut/i,
         hidden: true,
       }),

From 543344b1740481ed7e3dd5576ee6e5b2b1d19fe1 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 17 Mar 2025 11:49:52 +0100
Subject: [PATCH 046/170] tab styling

---
 src/layout/Tabs/Tabs.module.css | 2 +-
 src/layout/Tabs/Tabs.tsx        | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 87cde66b1d..92fc6bf1eb 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -1,5 +1,5 @@
 .tabContent {
-  background-color: white;
+  background-color: var(--ds-color-neutral-surface-default);
   display: flex;
   flex-direction: column;
   gap: var(--ds-size-6);
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 01fc8b26ee..9a680391e4 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -115,9 +115,6 @@ function TabHeader({
     <DesignsystemetTabs.Tab
       key={id}
       value={id}
-      style={{
-        backgroundColor: isActive ? 'white' : 'transparent',
-      }}
       tabIndex={0}
     >
       {!!icon && (

From 943b07e47e528655c7f452f2515b9b7e3b1e6dd3 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 17 Mar 2025 11:57:46 +0100
Subject: [PATCH 047/170] fix instatiationbutton test

---
 src/layout/InstantiationButton/InstantiationButton.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/InstantiationButton/InstantiationButton.test.tsx b/src/layout/InstantiationButton/InstantiationButton.test.tsx
index 7018c560f5..828516669e 100644
--- a/src/layout/InstantiationButton/InstantiationButton.test.tsx
+++ b/src/layout/InstantiationButton/InstantiationButton.test.tsx
@@ -56,12 +56,12 @@ describe('InstantiationButton', () => {
     expect(screen.getByText('Instantiate')).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.queryByText('Laster innhold')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Laster innhold')).not.toBeInTheDocument();
     });
 
     await userEvent.click(screen.getByRole('button'));
 
-    expect(screen.getByText('Laster innhold')).toBeInTheDocument();
+    expect(screen.getByLabelText('Laster innhold')).toBeInTheDocument();
 
     expect(mutations.doInstantiateWithPrefill.mock).toHaveBeenCalledTimes(1);
 

From 5b8f880158b68fb574f6d4111b7d299be69f20bf Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 17 Mar 2025 12:04:02 +0100
Subject: [PATCH 048/170] update snapshots

---
 .../Group/__snapshots__/SummaryGroupComponent.test.tsx.snap  | 5 ++++-
 .../__snapshots__/SummaryRepeatingGroup.test.tsx.snap        | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
index af6ba9f391..d5cfa908db 100644
--- a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -23,7 +23,10 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
       </span>
       <button
         aria-label="Change: Mock group"
-        class="fds-btn fds-focus fds-btn--sm fds-btn--tertiary fds-btn--second editButton"
+        class="ds-button editButton"
+        color="second"
+        data-size="sm"
+        data-variant="tertiary"
         type="button"
       >
         Change
diff --git a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
index 0b466f460d..5da4219253 100644
--- a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+++ b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
@@ -23,7 +23,10 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
       </span>
       <button
         aria-label="Change: Mock group"
-        class="fds-btn fds-focus fds-btn--sm fds-btn--tertiary fds-btn--second editButton"
+        class="ds-button editButton"
+        color="second"
+        data-size="sm"
+        data-variant="tertiary"
         type="button"
       >
         Change

From 0b1552df541c8964894c05b4b6926bea36c29573 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 20 Mar 2025 10:23:19 +0100
Subject: [PATCH 049/170] fix warnings

---
 src/components/form/RadioButton.tsx       | 47 ++++++++++++++---------
 src/layout/Checkboxes/WrappedCheckbox.tsx | 19 ++++-----
 src/layout/Datepicker/DropdownCaption.tsx |  5 +--
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index fd4c4a6d5a..cf5f0ebf06 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 
 import { Radio } from '@digdir/designsystemet-react';
 import cn from 'classnames';
@@ -21,19 +21,21 @@ export interface IRadioButtonProps extends Omit<RadioProps, 'children' | 'aria-l
   confirmChangeText?: string;
 }
 
-export const RadioButton = ({
-  showAsCard = false,
-  helpText,
-  label,
-  hideLabel,
-  onChange,
-  alertOnChange,
-  alertText,
-  confirmChangeText,
-  className,
-  ...rest
-}: IRadioButtonProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+export const RadioButton = forwardRef<HTMLInputElement, IRadioButtonProps>(function RadioButton(
+  {
+    showAsCard = false,
+    helpText,
+    label,
+    hideLabel,
+    onChange,
+    alertOnChange,
+    alertText,
+    confirmChangeText,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
   const { elementAsString } = useLanguage();
 
   const { alertOpen, setAlertOpen, handleChange, confirmChange, cancelChange } = useAlertOnChange(
@@ -41,6 +43,8 @@ export const RadioButton = ({
     onChange,
   );
 
+  const internalRef = useRef<HTMLInputElement | null>(null);
+
   const radioButton = (
     <Radio
       {...rest}
@@ -52,7 +56,14 @@ export const RadioButton = ({
       }
       className={cn(classes.radioButton, className)}
       onChange={handleChange}
-      ref={showAsCard ? inputRef : undefined}
+      ref={(elem) => {
+        internalRef.current = elem;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(elem);
+        } else if (forwardedRef) {
+          forwardedRef.current = elem;
+        }
+      }}
     />
   );
   const cardElement = (
@@ -64,9 +75,7 @@ export const RadioButton = ({
       className={classes.card}
       data-testid={`test-id-${label}`}
       onClick={() => {
-        if (inputRef.current) {
-          inputRef.current.click();
-        }
+        internalRef.current?.click();
       }}
     >
       {radioButton}
@@ -92,4 +101,4 @@ export const RadioButton = ({
       {showAsCard ? cardElement : radioButton}
     </ConditionalWrapper>
   );
-};
+});
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index 5381519111..f127b66b2f 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { Checkbox } from '@digdir/designsystemet-react';
 import cn from 'classnames';
@@ -21,16 +21,10 @@ type IWrappedCheckboxProps = {
   setChecked: (checked: boolean) => void;
 } & Omit<CheckboxProps, 'label' | 'aria-label' | 'aria-labelledby'>;
 
-export function WrappedCheckbox({
-  id,
-  option,
-  hideLabel,
-  alertOnChange,
-  checked,
-  setChecked,
-  readOnly,
-  ...rest
-}: IWrappedCheckboxProps) {
+export const WrappedCheckbox = forwardRef<HTMLInputElement, IWrappedCheckboxProps>(function WrappedCheckbox(
+  { id, option, hideLabel, alertOnChange, checked, setChecked, readOnly, ...rest }: IWrappedCheckboxProps,
+  ref,
+) {
   const { langAsString, elementAsString } = useLanguage();
 
   const { alertOpen, setAlertOpen, handleChange, confirmChange, cancelChange } = useAlertOnChange(
@@ -79,7 +73,8 @@ export function WrappedCheckbox({
         checked={checked}
         data-size='sm'
         onChange={(e) => handleChange(e.target.checked)}
+        ref={ref}
       />
     </ConditionalWrapper>
   );
-}
+});
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index 9c0274f582..d9dd2f961d 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -10,7 +10,6 @@ import { Button } from 'src/app-components/Button/Button';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { getMonths, getYears } from 'src/app-components/Datepicker/DatePickerHelpers';
 import { getDateLib } from 'src/app-components/Datepicker/utils/dateHelpers';
-import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
 import comboboxClasses from 'src/styles/combobox.module.css';
@@ -63,7 +62,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
               key={date.getMonth()}
               value={date.getMonth().toString()}
             >
-              <Lang id={formatMonthDropdown(date, dateLib)} />
+              {langAsString(formatMonthDropdown(date, dateLib))}
             </Select.Option>
           ))}
         </Select>
@@ -81,7 +80,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
               key={date.getFullYear().toString()}
               value={date.getFullYear().toString()}
             >
-              <Lang id={date.getFullYear().toString()} />
+              {langAsString(date.getFullYear().toString())}
             </Select.Option>
           ))}
         </Select>

From 7a2c6b2c20049871f6e83cfa213adc5fe80efd32 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 20 Mar 2025 14:18:32 +0100
Subject: [PATCH 050/170] attempt to fix accordion cypress test

---
 test/e2e/integration/frontend-test/accordion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/accordion.ts b/test/e2e/integration/frontend-test/accordion.ts
index cf99681579..57a9c6ffa2 100644
--- a/test/e2e/integration/frontend-test/accordion.ts
+++ b/test/e2e/integration/frontend-test/accordion.ts
@@ -4,7 +4,7 @@ describe('Accordion', () => {
 
     const accordionContent = /in horas tendebat resumptis/i;
 
-    cy.findByText(accordionContent).should('not.be.visible');
+    cy.findByText(accordionContent).should('not.exist');
     cy.findByRole('button', { name: /mer informasjon vedrørende navneendring/i }).click();
     cy.findByText(accordionContent).should('be.visible');
   });

From 544d9dcaa9cd657c940c532f9b197923d2bf98af Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 31 Mar 2025 13:38:54 +0200
Subject: [PATCH 051/170] Use DS ErrorSummary

---
 src/app-components/Panel/Panel.module.css     |  8 +-
 src/components/message/ErrorReport.module.css | 10 +--
 src/components/message/ErrorReport.tsx        | 74 ++++++++-----------
 3 files changed, 39 insertions(+), 53 deletions(-)

diff --git a/src/app-components/Panel/Panel.module.css b/src/app-components/Panel/Panel.module.css
index 2ef70751c6..1a5be27aff 100644
--- a/src/app-components/Panel/Panel.module.css
+++ b/src/app-components/Panel/Panel.module.css
@@ -36,19 +36,19 @@
 }
 
 .panelContentWrapper_info {
-  background-color: var(--ds-color-info-surface-default);
+  background-color: var(--ds-color-info-surface-tinted);
 }
 
 .panelContentWrapper_success {
-  background-color: var(--ds-color-success-surface-default);
+  background-color: var(--ds-color-success-surface-tinted);
 }
 
 .panelContentWrapper_warning {
-  background-color: var(--ds-color-warning-surface-default);
+  background-color: var(--ds-color-warning-surface-tinted);
 }
 
 .panelContentWrapper_error {
-  background-color: var(--ds-color-danger-surface-hover);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .panelIconWrapper {
diff --git a/src/components/message/ErrorReport.module.css b/src/components/message/ErrorReport.module.css
index 45d2272b17..21048b3162 100644
--- a/src/components/message/ErrorReport.module.css
+++ b/src/components/message/ErrorReport.module.css
@@ -1,15 +1,11 @@
-.errorList {
-  list-style-position: outside;
-  margin: 0 0 0 24px;
-  padding: 0;
+.errorSummary {
+  padding: var(--ds-size-4) var(--modal-padding-x);
 }
 
-.errorList li {
-  margin-bottom: 8px;
-}
 .errorList span {
   font-size: 1rem;
 }
+
 .errorList button {
   text-align: left;
   border-bottom: 2px solid transparent;
diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index 4d3f55f0ab..49e7fccee8 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { Flex } from 'src/app-components/Flex/Flex';
-import { PANEL_VARIANT } from 'src/app-components/Panel/constants';
-import { Panel } from 'src/app-components/Panel/Panel';
+import { ErrorSummary } from '@digdir/designsystemet-react';
+
 import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import classes from 'src/components/message/ErrorReport.module.css';
 import { useNavigateToNode } from 'src/features/form/layout/NavigateToNode';
@@ -34,48 +33,39 @@ export const ErrorReport = ({ renderIds, formErrors, taskErrors }: IErrorReportP
   return (
     <div data-testid='ErrorReport'>
       <FullWidthWrapper isOnBottom={true}>
-        <Panel
-          title={<Lang id='form_filler.error_report_header' />}
-          variant={PANEL_VARIANT.Error}
+        <ErrorSummary
+          data-size='lg'
+          className={classes.errorSummary}
         >
-          <Flex
-            container
-            item
-            spacing={6}
-            alignItems='flex-start'
-          >
-            <Flex
-              item
-              size={{ xs: 12 }}
-            >
-              <ul className={classes.errorList}>
-                {taskErrors.map((error) => (
-                  <li
-                    key={getUniqueKeyFromObject(error)}
-                    style={{ listStyleImage: listStyleImg }}
-                  >
-                    <Lang
-                      id={error.message.key}
-                      params={error.message.params}
-                    />
-                  </li>
-                ))}
-                {formErrors.map((error) => (
-                  <Error
-                    key={getUniqueKeyFromObject(error)}
-                    error={error}
-                  />
-                ))}
-              </ul>
-            </Flex>
-            {renderIds.map((id) => (
-              <GenericComponentById
-                key={id}
-                id={id}
+          <ErrorSummary.Heading>
+            <Lang id='form_filler.error_report_header' />
+          </ErrorSummary.Heading>
+          <ErrorSummary.List className={classes.errorList}>
+            {taskErrors.map((error) => (
+              <ErrorSummary.Item
+                key={getUniqueKeyFromObject(error)}
+                style={{ listStyleImage: listStyleImg }}
+              >
+                <Lang
+                  id={error.message.key}
+                  params={error.message.params}
+                />
+              </ErrorSummary.Item>
+            ))}
+            {formErrors.map((error) => (
+              <Error
+                key={getUniqueKeyFromObject(error)}
+                error={error}
               />
             ))}
-          </Flex>
-        </Panel>
+          </ErrorSummary.List>
+          {renderIds.map((id) => (
+            <GenericComponentById
+              key={id}
+              id={id}
+            />
+          ))}
+        </ErrorSummary>
       </FullWidthWrapper>
     </div>
   );

From b8a1b78a7c3d30080ffcc0e2354aa20ecb7e153c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 31 Mar 2025 13:45:44 +0200
Subject: [PATCH 052/170] fiix errorsummary

---
 src/components/message/ErrorReport.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index 49e7fccee8..f3eda198c6 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -90,7 +90,7 @@ function Error({ error }: { error: NodeRefValidation }) {
   };
 
   return (
-    <li style={{ listStyleImage: listStyleImg }}>
+    <ErrorSummary.Item style={{ listStyleImage: listStyleImg }}>
       <button
         className={classes.buttonAsInvisibleLink}
         onClick={handleErrorClick}
@@ -102,6 +102,6 @@ function Error({ error }: { error: NodeRefValidation }) {
           node={node}
         />
       </button>
-    </li>
+    </ErrorSummary.Item>
   );
 }

From ebc173311458cc62e3794fe93fd9264c78449fc1 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 31 Mar 2025 14:12:18 +0200
Subject: [PATCH 053/170] fix div inside span

---
 src/layout/Group/GroupComponent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx
index ca48c2252e..e63c828f36 100644
--- a/src/layout/Group/GroupComponent.tsx
+++ b/src/layout/Group/GroupComponent.tsx
@@ -82,9 +82,9 @@ export function GroupComponent({
           }
           description={
             description && !isSummary ? (
-              <div className={classes.description}>
+              <span className={classes.description}>
                 <Lang id={description} />
-              </div>
+              </span>
             ) : undefined
           }
         >

From b2f775ec7457dda2f45a88bbbaa15ac552320f22 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 2 Apr 2025 16:08:04 +0200
Subject: [PATCH 054/170] use new MultipleSelect

---
 src/layout/Datepicker/DropdownCaption.tsx     |   1 -
 .../MultipleSelectComponent.tsx               | 126 +++++++++---------
 src/utils/options.ts                          |  15 +++
 3 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index d9dd2f961d..822e350634 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -55,7 +55,6 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
           value={calendarMonth.date.getMonth().toString()}
           onChange={(e) => handleMonthChange(e.target.value)}
           aria-label={langAsString('date_picker.aria_label_month_dropdown')}
-          className={comboboxClasses.container}
         >
           {months.map((date) => (
             <Select.Option
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index 2a5310ce61..981c67ff47 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { Combobox } from '@digdir/designsystemet-react';
+import { EXPERIMENTAL_MultiSuggestion, Field } from '@digdir/designsystemet-react';
 
 import { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -14,10 +14,9 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { useGetOptions } from 'src/features/options/useGetOptions';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
-import comboboxClasses from 'src/styles/combobox.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import { optionSearchFilter } from 'src/utils/options';
+import { optionFilter } from 'src/utils/options';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IMultipleSelectProps = PropsFromGenericComponent<'MultipleSelect'>;
@@ -72,63 +71,70 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
         </DeleteWarningPopover>
       )}
     >
-      <Label
-        htmlFor={id}
-        label={labelText}
-        grid={grid?.labelGrid}
-        required={required}
-        requiredIndicator={getRequiredComponent()}
-        optionalIndicator={getOptionalComponent()}
-        help={getHelpTextComponent()}
-        description={getDescriptionComponent()}
-      >
-        <ComponentStructureWrapper node={node}>
-          <Combobox
-            multiple
-            hideLabel
-            id={id}
-            filter={optionSearchFilter}
-            size='sm'
-            value={selectedValues}
-            readOnly={readOnly}
-            onValueChange={handleChange}
-            onBlur={debounce}
-            error={!isValid}
-            clearButtonLabel={langAsString('form_filler.clear_selection')}
-            aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
-            className={comboboxClasses.container}
-            aria-describedby={
-              overrideDisplay?.renderedInTable !== true &&
-              textResourceBindings?.title &&
-              textResourceBindings?.description
-                ? getDescriptionId(id)
-                : undefined
-            }
-            autoComplete={autocomplete}
-            style={{ width: '100%' }}
-          >
-            <Combobox.Empty>
-              <Lang id='form_filler.no_options_found' />
-            </Combobox.Empty>
-            {options.map((option) => (
-              <Combobox.Option
-                key={option.value}
-                value={option.value}
-                description={option.description ? langAsString(option.description) : undefined}
-                displayValue={langAsString(option.label) || '\u200b'} // Workaround to prevent component from crashing due to empty string
-              >
-                <span>
-                  <wbr />
-                  <Lang
-                    id={option.label}
-                    node={node}
-                  />
-                </span>
-              </Combobox.Option>
-            ))}
-          </Combobox>
-        </ComponentStructureWrapper>
-      </Label>
+      <Field style={{ width: '100%' }}>
+        <Label
+          htmlFor={id}
+          label={labelText}
+          grid={grid?.labelGrid}
+          required={required}
+          requiredIndicator={getRequiredComponent()}
+          optionalIndicator={getOptionalComponent()}
+          help={getHelpTextComponent()}
+          description={getDescriptionComponent()}
+        >
+          <ComponentStructureWrapper node={node}>
+            <EXPERIMENTAL_MultiSuggestion
+              id={id}
+              filter={optionFilter}
+              data-size='sm'
+              value={selectedValues}
+              onValueChange={handleChange}
+              onBlur={debounce}
+            >
+              <EXPERIMENTAL_MultiSuggestion.Chips render={(e) => e.text} />
+              <EXPERIMENTAL_MultiSuggestion.Input
+                aria-invalid={!isValid}
+                aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
+                aria-describedby={
+                  overrideDisplay?.renderedInTable !== true &&
+                  textResourceBindings?.title &&
+                  textResourceBindings?.description
+                    ? getDescriptionId(id)
+                    : undefined
+                }
+                readOnly={readOnly}
+                autoComplete={autocomplete}
+              />
+              <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
+              <EXPERIMENTAL_MultiSuggestion.List>
+                <EXPERIMENTAL_MultiSuggestion.Empty>
+                  <Lang id='form_filler.no_options_found' />
+                </EXPERIMENTAL_MultiSuggestion.Empty>
+                {options.map((option) => (
+                  <EXPERIMENTAL_MultiSuggestion.Option
+                    key={option.value}
+                    value={option.value}
+                  >
+                    <span>
+                      <wbr />
+                      <Lang
+                        id={option.label}
+                        node={node}
+                      />
+                      {option.description && (
+                        <Lang
+                          id={option.description}
+                          node={node}
+                        />
+                      )}
+                    </span>
+                  </EXPERIMENTAL_MultiSuggestion.Option>
+                ))}
+              </EXPERIMENTAL_MultiSuggestion.List>
+            </EXPERIMENTAL_MultiSuggestion>
+          </ComponentStructureWrapper>
+        </Label>
+      </Field>
     </ConditionalWrapper>
   );
 }
diff --git a/src/utils/options.ts b/src/utils/options.ts
index 85e355ae8e..7077031400 100644
--- a/src/utils/options.ts
+++ b/src/utils/options.ts
@@ -119,3 +119,18 @@ export function optionSearchFilter(inputValue: string, option: Option): boolean
 
   return label.includes(search) || (!!desc && desc.includes(search));
 }
+
+export function optionFilter(args: {
+  index: number;
+  text: string;
+  value: string;
+  optionElement: HTMLOptionElement;
+  input: HTMLInputElement;
+}): boolean {
+  const { value, optionElement, input } = args;
+  const search = input.value.toLowerCase();
+  const label = value.toLowerCase();
+  const desc = optionElement.getAttribute('aria-description')?.toLowerCase();
+
+  return label.includes(search) || (!!desc && desc.includes(search));
+}

From 714b1ab7400a62321604e468ebe38e7ff0e39a76 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 2 Apr 2025 16:08:22 +0200
Subject: [PATCH 055/170] fix organisationlookup validationmessage

---
 .../OrganisationLookupComponent.tsx           | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
index 44d23d3196..04573d0b0f 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
+import { Field, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import type { PropsFromGenericComponent } from '..';
@@ -45,6 +45,7 @@ export type OrganisationLookupResponse =
   | { success: true; organisationDetails: Organisation };
 
 async function fetchOrg(orgNr: string): Promise<{ org: Organisation; error: null } | { org: null; error: string }> {
+  console.log('fetchOrg', orgNr);
   if (!orgNr) {
     throw new Error('orgNr is required');
   }
@@ -88,11 +89,12 @@ export function OrganisationLookupComponent({
 
   function handleValidateOrgnr(orgNr: string) {
     if (!validateOrgnr({ orgNr })) {
+      console.log('handleValidateOrgnr', orgNr);
       const errors = validateOrgnr.errors
         ?.filter((error) => error.instancePath === '/orgNr')
         .map((error) => error.message)
         .filter((it) => it != null);
-
+      console.log('errors', errors);
       setOrgNrErrors(errors);
       return false;
     }
@@ -122,6 +124,12 @@ export function OrganisationLookupComponent({
 
   const hasSuccessfullyFetched = !!organisation_lookup_orgnr;
 
+  console.log(data);
+
+  const isValid =
+    (orgNrErrors?.length && orgNrErrors?.length > 0) ||
+    hasValidationErrors(bindingValidations?.organisation_lookup_orgnr);
+
   return (
     <Fieldset
       legend={labelText}
@@ -148,26 +156,30 @@ export function OrganisationLookupComponent({
               }
             />
           </div>
-          <NumericInput
-            id={`${id}_orgnr`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_orgnr`) : undefined}
-            aria-label={langAsString('organisation_lookup.orgnr_label')}
-            value={hasSuccessfullyFetched ? organisation_lookup_orgnr : tempOrgNr}
-            className={classes.orgnr}
-            required={required}
-            readOnly={hasSuccessfullyFetched || isFetching}
-            error={
-              (orgNrErrors?.length && <Lang id={orgNrErrors.join(' ')} />) ||
+          <Field className={classes.orgnr}>
+            <NumericInput
+              id={`${id}_orgnr`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_orgnr`) : undefined}
+              aria-label={langAsString('organisation_lookup.orgnr_label')}
+              value={hasSuccessfullyFetched ? organisation_lookup_orgnr : tempOrgNr}
+              required={required}
+              readOnly={hasSuccessfullyFetched || isFetching}
+              error={isValid}
+              onValueChange={(e) => {
+                setTempOrgNr(e.value);
+              }}
+              onBlur={(e) => handleValidateOrgnr(e.target.value)}
+              allowLeadingZeros
+            />
+            {(orgNrErrors?.length && (
+              <ValidationMessage data-size='sm'>
+                <Lang id={orgNrErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.organisation_lookup_orgnr) && (
                 <ComponentValidations validations={bindingValidations?.organisation_lookup_orgnr} />
-              ))
-            }
-            onValueChange={(e) => {
-              setTempOrgNr(e.value);
-            }}
-            onBlur={(e) => handleValidateOrgnr(e.target.value)}
-            allowLeadingZeros
-          />
+              ))}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button

From 13706412bdd9fa9d014dccb4262664c8d22fe39d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 08:59:19 +0200
Subject: [PATCH 056/170] fix multipleselect test

---
 test/e2e/integration/component-library/multiple-select.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index a734ee4ce2..63b777ea7e 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -13,7 +13,7 @@ describe('Multiple select component', () => {
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
 
-    cy.get('div[role="listbox"]').contains('span', checkboxText).click();
+    cy.get('u-datalist').contains('u-option', checkboxText).click();
     cy.get('div[data-componentbaseid="MultipleSelectPage-Header-Summary2-Display-String"]')
       .next()
       .find('span.ds-paragraph') // Targets the span with the summary text

From 02715b0db109632f270a44eb7af29e8531ca8968 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 10:11:28 +0200
Subject: [PATCH 057/170] fix personlookup

---
 src/language/texts/en.ts                      |  2 +-
 src/language/texts/nb.ts                      |  2 +-
 src/language/texts/nn.ts                      |  2 +-
 .../PersonLookup/PersonLookupComponent.tsx    | 92 +++++++++++--------
 4 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/language/texts/en.ts b/src/language/texts/en.ts
index d260333efc..0b98092281 100644
--- a/src/language/texts/en.ts
+++ b/src/language/texts/en.ts
@@ -346,7 +346,7 @@ export function en() {
       validation_error_name_too_short: "The name can't be empty.",
       validation_error_ssn: 'The national ID number/D-number is invalid.',
       validation_error_not_found:
-        'No person is registered with this combination of national ID number/D-number and name. Please check the fields and try again. \n\nNote: After 5 failed attempts, the search functionality will be temporarily locked.',
+        'No person is registered with this combination of national ID number/D-number and name. Please check the fields and try again. <br> Note: After 5 failed attempts, the search functionality will be temporarily locked.',
       validation_error_too_many_requests: 'Too many requests. Please try again later.',
       validation_error_forbidden:
         'You do not have permission to perform this action. A security level of minimum 2 is required.',
diff --git a/src/language/texts/nb.ts b/src/language/texts/nb.ts
index a741b20a7e..9482b7fab6 100644
--- a/src/language/texts/nb.ts
+++ b/src/language/texts/nb.ts
@@ -347,7 +347,7 @@ export function nb(): FixedLanguageList {
       validation_error_name_too_short: 'Etternavn kan ikke være tomt.',
       validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
       validation_error_not_found:
-        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og navn. Vennligst kontroller feltene og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemuligheten midlertidig sperret.',
+        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og navn. Vennligst kontroller feltene og prøv igjen. <br> Merk: Etter 5 feilforsøk blir søkemuligheten midlertidig sperret.',
       validation_error_too_many_requests: 'Du har nådd grensen for antall søk. Vennligst prøv igjen senere.',
       validation_error_forbidden:
         'Du har ikke tilgang til å søke på denne personen. Sikkerhetsnivå 2 eller høyere kreves.',
diff --git a/src/language/texts/nn.ts b/src/language/texts/nn.ts
index 7c25f7633b..53f79129df 100644
--- a/src/language/texts/nn.ts
+++ b/src/language/texts/nn.ts
@@ -347,7 +347,7 @@ export function nn(): FixedLanguageList {
       validation_error_name_too_short: 'Etternamn kan ikkje vere tomt.',
       validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
       validation_error_not_found:
-        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og namn. Ver venleg og kontroller felta og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemoglegheita mellombels sperra.',
+        'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og namn. Ver venleg og kontroller felta og prøv igjen. <br> Merk: Etter 5 feilforsøk blir søkemoglegheita mellombels sperra.',
       validation_error_too_many_requests: 'Du har gjort for mange søk. Ver venleg, prøv igjen seinare.',
       validation_error_forbidden:
         'Du har ikkje tilgang til å gjere dette søket. Sikkerheitsnivå 2 eller høgare er påkravd.',
diff --git a/src/layout/PersonLookup/PersonLookupComponent.tsx b/src/layout/PersonLookup/PersonLookupComponent.tsx
index 292859f2f2..1052e33262 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.tsx
+++ b/src/layout/PersonLookup/PersonLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ValidationMessage } from '@digdir/designsystemet-react';
+import { Field, ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -146,6 +146,11 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
 
   const hasSuccessfullyFetched = !!person_lookup_name && !!person_lookup_ssn;
 
+  const invalidSsn =
+    (ssnErrors?.length && ssnErrors?.length > 0) || hasValidationErrors(bindingValidations?.person_lookup_ssn);
+  const invalidName =
+    (nameErrors?.length && nameErrors?.length > 0) || hasValidationErrors(bindingValidations?.person_lookup_name);
+
   return (
     <Fieldset
       legend={labelText}
@@ -173,26 +178,30 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
               }
             />
           </div>
-          <NumericInput
-            id={`${id}_ssn`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_ssn`) : undefined}
-            aria-label={langAsString('person_lookup.ssn_label')}
-            value={hasSuccessfullyFetched ? person_lookup_ssn : tempSsn}
-            className={classes.ssn}
-            required={required}
-            readOnly={hasSuccessfullyFetched}
-            error={
-              (ssnErrors?.length && <Lang id={ssnErrors.join(' ')} />) ||
+          <Field className={classes.ssn}>
+            <NumericInput
+              id={`${id}_ssn`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_ssn`) : undefined}
+              aria-label={langAsString('person_lookup.ssn_label')}
+              value={hasSuccessfullyFetched ? person_lookup_ssn : tempSsn}
+              required={required}
+              readOnly={hasSuccessfullyFetched}
+              error={invalidSsn}
+              onValueChange={(e) => {
+                setTempSsn(e.value);
+              }}
+              onBlur={(e) => handleValidateSsn(e.target.value)}
+              allowLeadingZeros
+            />
+            {(ssnErrors?.length && (
+              <ValidationMessage>
+                <Lang id={ssnErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_ssn) && (
                 <ComponentValidations validations={bindingValidations?.person_lookup_ssn} />
-              ))
-            }
-            onValueChange={(e) => {
-              setTempSsn(e.value);
-            }}
-            onBlur={(e) => handleValidateSsn(e.target.value)}
-            allowLeadingZeros
-          />
+              ))}
+          </Field>
           <div className={classes.nameLabel}>
             <Label
               htmlFor={`${id}_name`}
@@ -209,29 +218,32 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
               }
             />
           </div>
-          <Input
-            id={`${id}_name`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_name`) : undefined}
-            aria-label={langAsString(
-              hasSuccessfullyFetched ? 'person_lookup.name_label' : 'person_lookup.surname_label',
-            )}
-            value={hasSuccessfullyFetched ? person_lookup_name : tempName}
-            className={classes.name}
-            type='text'
-            required={required}
-            readOnly={hasSuccessfullyFetched}
-            error={
-              (nameErrors?.length && <Lang id={nameErrors.join(' ')} />) ||
+          <Field className={classes.name}>
+            <Input
+              id={`${id}_name`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_name`) : undefined}
+              aria-label={langAsString(
+                hasSuccessfullyFetched ? 'person_lookup.name_label' : 'person_lookup.surname_label',
+              )}
+              value={hasSuccessfullyFetched ? person_lookup_name : tempName}
+              type='text'
+              required={required}
+              readOnly={hasSuccessfullyFetched}
+              error={invalidName}
+              onChange={(e) => {
+                setTempName(e.target.value);
+              }}
+              onBlur={(e) => handleValidateName(e.target.value)}
+            />
+            {(nameErrors?.length && (
+              <ValidationMessage>
+                <Lang id={nameErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_name) && (
                 <ComponentValidations validations={bindingValidations?.person_lookup_name} />
-              ))
-            }
-            onChange={(e) => {
-              setTempName(e.target.value);
-            }}
-            onBlur={(e) => handleValidateName(e.target.value)}
-          />
-
+              ))}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button

From 1da15b88ca28d6eed8981b2c18ae076445241b89 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 10:28:12 +0200
Subject: [PATCH 058/170] fix all-process-steps test

---
 test/e2e/support/formFiller.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/support/formFiller.ts b/test/e2e/support/formFiller.ts
index d104ebb626..2497a5185b 100644
--- a/test/e2e/support/formFiller.ts
+++ b/test/e2e/support/formFiller.ts
@@ -49,7 +49,7 @@ function fillOutChangeName() {
       .check();
     cy.get(appFrontend.changeOfName.reasonRelationship).click();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('test');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: /åpne datovelger/i }).click();
     cy.get('button[aria-label*="Today"]').click();
     cy.get(appFrontend.changeOfName.upload).selectFile('test/e2e/fixtures/test.pdf', { force: true });
 
@@ -126,7 +126,7 @@ function fillOutLikert() {
 
 function fillOutList() {
   cy.get(dataListPage.tableBody).contains('Caroline').closest('tr').click();
-  cy.findByRole('button', { name: 'Neste' }).click();
+  cy.findAllByRole('button', { name: 'Neste' }).last().click();
 }
 
 const functionMap: { [key in FillableFrontendTasks]: () => void } = {

From 19f76255d3cd7ad346183894bb6899f9b48988bb Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 10:38:08 +0200
Subject: [PATCH 059/170] fix button color

---
 src/app-components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 0d0d86125c..66ed9dc9be 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -72,7 +72,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      color={color}
+      data-color={color}
       data-size={size}
       data-fullwidth={fullWidth}
       ref={ref}

From f6c18d94731fbea9bef7fc0d8bfb5d86d209ca2c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 13:01:12 +0200
Subject: [PATCH 060/170] fix cypress use of datepickerbutton and prefill
 checkboxes

---
 .../frontend-test/attachments-in-group.ts     |  4 +-
 .../frontend-test/auto-save-behavior.ts       | 12 ++---
 test/e2e/integration/frontend-test/grid.ts    |  4 +-
 test/e2e/integration/frontend-test/group.ts   | 46 +++++++++----------
 .../frontend-test/hide-row-in-group.ts        |  4 +-
 test/e2e/integration/frontend-test/mobile.ts  | 10 ++--
 .../frontend-test/page-order-with-dynamics.ts |  2 +-
 test/e2e/integration/frontend-test/summary.ts | 10 ++--
 .../integration/frontend-test/validation.ts   | 12 ++---
 test/e2e/pageobjects/app-frontend.ts          | 11 +++--
 test/e2e/support/formFiller.ts                |  2 +-
 11 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index 1cce2c7cfb..24fc560f1d 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -216,7 +216,9 @@ describe('Repeating group attachments', () => {
       }
     });
 
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.findByRole('button', { name: /lagre og lukk/i })
+      .last()
+      .click();
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();
diff --git a/test/e2e/integration/frontend-test/auto-save-behavior.ts b/test/e2e/integration/frontend-test/auto-save-behavior.ts
index bccaa9aa52..a831fb3948 100644
--- a/test/e2e/integration/frontend-test/auto-save-behavior.ts
+++ b/test/e2e/integration/frontend-test/auto-save-behavior.ts
@@ -18,7 +18,7 @@ describe('Auto save behavior', () => {
       }).as('saveFormData');
     });
 
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.wait('@saveFormData');
     cy.get<ReqCounter>('@formDataReq').then(({ count }) => {
       expect(count).to.be.eq(1);
@@ -48,7 +48,7 @@ describe('Auto save behavior', () => {
         formDataReq.count++;
       }).as('saveFormData');
     });
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     // Doing a hard wait to be sure no request is sent to backend
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(1000);
@@ -67,7 +67,7 @@ describe('Auto save behavior', () => {
     cy.findByRole('button', { name: 'Forrige' }).clickAndGone();
 
     cy.navPage('prefill').should('have.attr', 'aria-current', 'page');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
 
     // Go forward again, change something and then observe the back button saves
     cy.findByRole('button', { name: 'Neste' }).clickAndGone();
@@ -82,7 +82,7 @@ describe('Auto save behavior', () => {
     });
 
     // NavigationBar
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.gotoNavPage('repeating');
     cy.get<ReqCounter>('@formDataReq').then(({ count }) => {
       expect(count).to.be.eq(3);
@@ -131,7 +131,7 @@ describe('Auto save behavior', () => {
         .check();
       cy.get(appFrontend.changeOfName.reasonRelationship).click();
       cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-      cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+      cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
       cy.get('button[aria-label*="Today"]').click();
 
       cy.findByRole('button', { name: /Neste/ }).click();
@@ -206,7 +206,7 @@ describe('Auto save behavior', () => {
       cy.get(appFrontend.changeOfName.confirmChangeName).find('input').dsCheck();
       cy.get(appFrontend.changeOfName.reasonRelationship).click();
       cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-      cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+      cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
       cy.get('button[aria-label*="Today"]').click();
 
       cy.findByRole('button', { name: /Neste/ }).click();
diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts
index e29d5e0aee..14c182fa9e 100644
--- a/test/e2e/integration/frontend-test/grid.ts
+++ b/test/e2e/integration/frontend-test/grid.ts
@@ -16,7 +16,7 @@ describe('Grid component', () => {
     cy.get(appFrontend.changeOfName.confirmChangeName).find('input').check();
     cy.get(appFrontend.changeOfName.reasonRelationship).click();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
 
     cy.gotoNavPage('grid');
@@ -137,7 +137,7 @@ describe('Grid component', () => {
     });
 
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).find('input').check();
     cy.findByRole('button', { name: 'Se innhold NOK 1' }).click();
diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index c891b2872c..1b34bd40b8 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -260,9 +260,9 @@ describe('Group', () => {
       cy.findByRole('button', { name: 'Forrige' }).click();
       for (const item of Object.keys(items)) {
         if (items[item] === true) {
-          cy.get(appFrontend.group.prefill[item]).check();
+          cy.findByRole('checkbox', { name: appFrontend.group.prefill[item] }).check();
         } else {
-          cy.get(appFrontend.group.prefill[item]).uncheck();
+          cy.findByRole('checkbox', { name: appFrontend.group.prefill[item] }).uncheck();
         }
       }
       cy.findByRole('button', { name: /Neste/ }).click();
@@ -472,9 +472,9 @@ describe('Group', () => {
     });
 
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).blur();
@@ -612,9 +612,9 @@ describe('Group', () => {
     });
 
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
@@ -655,8 +655,8 @@ describe('Group', () => {
   it('adding group rows should trigger backend calculations + selecting options from source', () => {
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
 
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
@@ -711,7 +711,7 @@ describe('Group', () => {
 
     // Adding a new row to the main group adds a new option
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
     cy.gotoNavPage('repeating');
 
     cy.get(appFrontend.group.secondGroup).find('tbody > tr').should('have.length', 2);
@@ -761,7 +761,7 @@ describe('Group', () => {
     ]) {
       // It is very important that these gets checked in this order, as the rest of the test relies on that.
       // Order is not guaranteed here, so we'll wait for each one to be saved before continuing.
-      cy.get(prefill).check();
+      cy.findByRole('checkbox', { name: prefill }).check();
       cy.waitUntilSaved();
     }
 
@@ -777,7 +777,7 @@ describe('Group', () => {
     // Navigating between pages should clear the state for which group row is editing, so now the
     // first one (that is not hidden) should be open
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
 
     cy.get(appFrontend.group.editContainer).find('input').first().should('have.value', 'NOK 120');
@@ -790,7 +790,7 @@ describe('Group', () => {
     // value using C# default values in the strict model.
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Ja' }).should('be.checked');
 
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 1);
@@ -798,7 +798,7 @@ describe('Group', () => {
 
     cy.gotoNavPage('prefill');
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Nei' }).click();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.waitUntilSaved();
 
     cy.gotoNavPage('repeating');
@@ -807,7 +807,7 @@ describe('Group', () => {
 
     cy.gotoNavPage('prefill');
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Ja' }).click();
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
 
     // When we temporarily disabled the prefilling functionality, ruleHandler tricked the backend by
     // setting PrefillValuesShadow to the same value as PrefillValues, making the backend think the 'middels' row we
@@ -830,11 +830,11 @@ describe('Group', () => {
       }
     });
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.stor).check();
-    cy.get(appFrontend.group.prefill.svaer).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
@@ -965,9 +965,9 @@ describe('Group', () => {
     // starts as soon as the data is saved, and when you at that point immediately click a new checkbox, that triggers
     // a new node generation process - before the first one has finished.
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.waitUntilSaved();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 2);
diff --git a/test/e2e/integration/frontend-test/hide-row-in-group.ts b/test/e2e/integration/frontend-test/hide-row-in-group.ts
index cfc58d82e9..d2d7a15bda 100644
--- a/test/e2e/integration/frontend-test/hide-row-in-group.ts
+++ b/test/e2e/integration/frontend-test/hide-row-in-group.ts
@@ -5,7 +5,7 @@ const appFrontend = new AppFrontend();
 it('should be possible to hide rows when "Endre fra" is greater or equals to [...]', () => {
   cy.goto('group');
   for (const prefill of Object.values(appFrontend.group.prefill)) {
-    cy.get(prefill).check();
+    cy.findByRole('checkbox', { name: prefill }).check();
     cy.waitUntilSaved();
   }
   const headerRow = 1;
@@ -157,7 +157,7 @@ it('"save and next"-button should open row 3 when row 2 is hidden', () => {
 it('rowsAfter should align with the cells in the table above', () => {
   cy.goto('group');
   for (const prefill of Object.values(appFrontend.group.prefill)) {
-    cy.get(prefill).check();
+    cy.findByRole('checkbox', { name: prefill }).check();
     cy.waitUntilSaved();
   }
   cy.findByRole('button', { name: /Neste/ }).click();
diff --git a/test/e2e/integration/frontend-test/mobile.ts b/test/e2e/integration/frontend-test/mobile.ts
index 7534e30d9c..4b17633af1 100644
--- a/test/e2e/integration/frontend-test/mobile.ts
+++ b/test/e2e/integration/frontend-test/mobile.ts
@@ -40,11 +40,11 @@ function testChangeName() {
 
 function testGroup(mode: Mode) {
   cy.wait('@getLayoutGroup');
-  cy.get(appFrontend.group.prefill.liten).check();
-  cy.get(appFrontend.group.prefill.middels).check();
-  cy.get(appFrontend.group.prefill.stor).check();
-  cy.get(appFrontend.group.prefill.svaer).check();
-  cy.get(appFrontend.group.prefill.enorm).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
 
   cy.navPage('repeating').click();
   cy.get(appFrontend.group.showGroupToContinue).find('input').check();
diff --git a/test/e2e/integration/frontend-test/page-order-with-dynamics.ts b/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
index 1619630358..fa3e031b3f 100644
--- a/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
+++ b/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
@@ -15,7 +15,7 @@ describe('Calculate Page Order', () => {
     cy.goto('group');
     cy.get(appFrontend.navMenuButtons).should('have.length', 5);
 
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
     cy.get(appFrontend.navMenuCurrent).should('have.text', '1. prefill');
 
     // Both pages the 'repeating' and 'hide' pages are now hidden
diff --git a/test/e2e/integration/frontend-test/summary.ts b/test/e2e/integration/frontend-test/summary.ts
index 11f723f0d1..116dcd0fc4 100644
--- a/test/e2e/integration/frontend-test/summary.ts
+++ b/test/e2e/integration/frontend-test/summary.ts
@@ -102,7 +102,7 @@ describe('Summary', () => {
         cy.wrap(summaryDate).contains(texts.dateOfEffect).should('have.css', 'color', 'rgb(213, 32, 59)');
         cy.wrap(summaryDate).contains(common.altinnFlex, texts.requiredFieldDateFrom).should('be.visible');
         cy.wrap(summaryDate).contains('button', texts.goToRightPage).click();
-        cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+        cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
         cy.get('button[aria-label*="Today"]').click();
         cy.get(appFrontend.errorReport).should('not.exist');
         cy.findByRole('button', { name: 'Tilbake til oppsummering' }).click();
@@ -212,9 +212,9 @@ describe('Summary', () => {
     groupElements().eq(5).should('contain.text', `${texts.nestedOption2}, ${texts.nestedOption3}`);
 
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.svaer).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
     cy.gotoNavPage('summary');
 
     function assertSummaryItem(groupRow: number, items: { [key: string]: boolean }) {
@@ -329,7 +329,7 @@ describe('Summary', () => {
     });
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill['liten']).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).find('input').check();
     // Add data
diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index 60d88e9fd5..9fc5e3d88a 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -38,7 +38,7 @@ describe('Validation', () => {
 
     cy.findByRole('checkbox', { name: /Ja[a-z, ]*/ }).check();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('test');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
     cy.findByRole('button', { name: /Neste/ }).click();
 
@@ -345,9 +345,9 @@ describe('Validation', () => {
     });
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.stor).check();
-    cy.get(appFrontend.group.prefill.stor).blur();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).blur();
     cy.findByRole('button', { name: /Neste/ }).clickAndGone();
     cy.navPage('repeating').should('have.attr', 'aria-current', 'page');
 
@@ -391,7 +391,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.saveSubGroup).click();
     cy.get(appFrontend.errorReport).should('contain.text', texts.requiredComment);
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
     cy.findByRole('button', { name: 'Se innhold NOK 1 233' }).click();
     cy.get(appFrontend.errorReport).findByText(texts.requiredComment).click();
@@ -946,7 +946,7 @@ describe('Validation', () => {
 
     // Forcing us away from the 'repeating' page should reset the open-state in the repeating group, but not the errors
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.row(1).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).editBtn).click();
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index 2e2637ec09..8e96f66443 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -159,6 +159,7 @@ export class AppFrontend {
     reference: '#reference',
     reference2: '#reference2',
     dateOfEffect: '#dateOfEffect',
+    datePickerButton: /åpne datovelger/i,
     municipalityMetadata: '#kommuner-metadata',
     municipality: '#kommune',
     upload: '#fileUpload-changename',
@@ -188,11 +189,11 @@ export class AppFrontend {
   //group - task 3
   public group = {
     prefill: {
-      liten: 'input[name=liten]',
-      middels: 'input[name=middels]',
-      stor: 'input[name=stor]',
-      svaer: 'input[name=svaer]',
-      enorm: 'input[name=enorm]',
+      liten: /En liten endring/i,
+      middels: /En middels endring/i,
+      stor: /En stor endring/i,
+      svaer: /En svær endring/i,
+      enorm: /En enorm endring/i,
     },
     showGroupToContinue: '#showGroupToContinue',
     mainGroup: '#group-mainGroup',
diff --git a/test/e2e/support/formFiller.ts b/test/e2e/support/formFiller.ts
index 2497a5185b..723a049eef 100644
--- a/test/e2e/support/formFiller.ts
+++ b/test/e2e/support/formFiller.ts
@@ -49,7 +49,7 @@ function fillOutChangeName() {
       .check();
     cy.get(appFrontend.changeOfName.reasonRelationship).click();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('test');
-    cy.findByRole('button', { name: /åpne datovelger/i }).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
     cy.get(appFrontend.changeOfName.upload).selectFile('test/e2e/fixtures/test.pdf', { force: true });
 

From 1fe4f175f1d74f556e61134398890f8cc3039024 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 13:10:30 +0200
Subject: [PATCH 061/170] fix css import path

---
 src/features/validation/ComponentValidations.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index d2c51039d5..c6296fe084 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Alert as AlertDesignSystem, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
-import classes from 'src/features/Validation/ComponentValidations.module.css';
+import classes from 'src/features/validation/ComponentValidations.module.css';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
 import { validationsOfSeverity } from 'src/features/validation/utils';
 import { useCurrentNode } from 'src/layout/FormComponentContext';

From 56723526976a52f28ad2770c8e5eadb7484fd03b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 14:30:18 +0200
Subject: [PATCH 062/170] remove som of old ds dependency

---
 src/features/dataLists/useDataListQuery.tsx           | 3 ++-
 src/layout/MultipleSelect/MultipleSelectComponent.tsx | 2 +-
 src/utils/urls/appUrlHelper.ts                        | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/features/dataLists/useDataListQuery.tsx b/src/features/dataLists/useDataListQuery.tsx
index e7635734ad..8d03f8128d 100644
--- a/src/features/dataLists/useDataListQuery.tsx
+++ b/src/features/dataLists/useDataListQuery.tsx
@@ -1,7 +1,6 @@
 import type { AriaAttributes } from 'react';
 
 import { useQuery } from '@tanstack/react-query';
-import type { SortDirection } from '@digdir/design-system-react/dist/types/components/legacy/LegacyTable/utils';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import { useAppQueries } from 'src/core/contexts/AppQueriesProvider';
@@ -13,6 +12,8 @@ import { getDataListsUrl } from 'src/utils/urls/appUrlHelper';
 import type { IDataList } from 'src/features/dataLists/index';
 import type { IMapping } from 'src/layout/common.generated';
 
+type SortDirection = 'asc' | 'desc' | 'notSortable' | 'notActive';
+
 export type Filter = {
   pageSize: number;
   pageNumber: number;
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index 981c67ff47..c57e8117ec 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -103,7 +103,7 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
                     : undefined
                 }
                 readOnly={readOnly}
-                autoComplete={autocomplete}
+                autoComplete='name'
               />
               <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
               <EXPERIMENTAL_MultiSuggestion.List>
diff --git a/src/utils/urls/appUrlHelper.ts b/src/utils/urls/appUrlHelper.ts
index 08d61be108..f3016a2eb1 100644
--- a/src/utils/urls/appUrlHelper.ts
+++ b/src/utils/urls/appUrlHelper.ts
@@ -1,5 +1,3 @@
-import type { SortDirection } from '@digdir/design-system-react/dist/types/components/legacy/LegacyTable/utils';
-
 import { getQueryStringFromObject } from 'src/utils/urls/urlHelper';
 
 const { org, app } = window;
@@ -219,6 +217,9 @@ export const getOptionsUrl = ({ optionsId, queryParameters, language, secure, in
 
   return url.toString();
 };
+
+type SortDirection = 'asc' | 'desc' | 'notSortable' | 'notActive';
+
 export interface IGetDataListsUrlParams {
   dataListId: string;
   queryParameters?: Record<string, ParamValue>;

From b63a284380b50c9b510e565d507e039ed15938a6 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 3 Apr 2025 15:10:58 +0200
Subject: [PATCH 063/170] remove old design-sysmtem-react

---
 package.json                                  |  1 -
 src/app-components/Number/DisplayNumber.tsx   |  3 +-
 src/layout/Input/index.tsx                    |  3 +-
 .../MultipleSelectComponent.tsx               |  2 +-
 src/layout/Number/index.tsx                   |  3 +-
 ...Utils.test.ts => formattingUtils.test.tsx} | 49 +++++++++++-
 src/utils/formattingUtils.ts                  | 21 +++++
 yarn.lock                                     | 77 +------------------
 8 files changed, 76 insertions(+), 83 deletions(-)
 rename src/utils/{formattingUtils.test.ts => formattingUtils.test.tsx} (61%)

diff --git a/package.json b/package.json
index 84ea9ff1f9..3a59e8a1ea 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,6 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
-    "@digdir/design-system-react": "0.54.0",
     "@digdir/designsystemet-css": "1.0.2",
     "@digdir/designsystemet-react": "1.0.2",
     "@digdir/designsystemet-theme": "1.0.2",
diff --git a/src/app-components/Number/DisplayNumber.tsx b/src/app-components/Number/DisplayNumber.tsx
index a7fd03f28b..367206a83b 100644
--- a/src/app-components/Number/DisplayNumber.tsx
+++ b/src/app-components/Number/DisplayNumber.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import classes from 'src/app-components/Number/Number.module.css';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import type { CompInternal } from 'src/layout/layout';
 
 type Formatting = Exclude<CompInternal<'Input'>['formatting'], undefined>;
diff --git a/src/layout/Input/index.tsx b/src/layout/Input/index.tsx
index dba73e47bf..f62a234668 100644
--- a/src/layout/Input/index.tsx
+++ b/src/layout/Input/index.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import { useDisplayData } from 'src/features/displayData/useDisplayData';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
@@ -11,6 +9,7 @@ import { evalFormatting } from 'src/layout/Input/formatting';
 import { InputComponent } from 'src/layout/Input/InputComponent';
 import { InputSummary } from 'src/layout/Input/InputSummary';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import { useNodeFormDataWhenType } from 'src/utils/layout/useNodeItem';
 import type { LayoutValidationCtx } from 'src/features/devtools/layoutValidation/types';
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index c57e8117ec..981c67ff47 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -103,7 +103,7 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
                     : undefined
                 }
                 readOnly={readOnly}
-                autoComplete='name'
+                autoComplete={autocomplete}
               />
               <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
               <EXPERIMENTAL_MultiSuggestion.List>
diff --git a/src/layout/Number/index.tsx b/src/layout/Number/index.tsx
index f7990a343e..3ad91cb720 100644
--- a/src/layout/Number/index.tsx
+++ b/src/layout/Number/index.tsx
@@ -1,14 +1,13 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
 import { evalFormatting } from 'src/layout/Input/formatting';
 import { NumberDef } from 'src/layout/Number/config.def.generated';
 import { NumberComponent } from 'src/layout/Number/NumberComponent';
 import { NumberSummary } from 'src/layout/Number/NumberSummary';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import type { DisplayData } from 'src/features/displayData';
 import type { PropsFromGenericComponent } from 'src/layout';
diff --git a/src/utils/formattingUtils.test.ts b/src/utils/formattingUtils.test.tsx
similarity index 61%
rename from src/utils/formattingUtils.test.ts
rename to src/utils/formattingUtils.test.tsx
index cd5228c257..ba2f3c8305 100644
--- a/src/utils/formattingUtils.test.ts
+++ b/src/utils/formattingUtils.test.tsx
@@ -1,4 +1,9 @@
-import { formatNumber } from 'src/utils/formattingUtils';
+import React from 'react';
+import type { NumericFormatProps, PatternFormatProps } from 'react-number-format';
+
+import { render as renderRtl, screen } from '@testing-library/react';
+
+import { formatNumber, formatNumericText } from 'src/utils/formattingUtils';
 import type { CurrencyFormattingOptions, UnitFormattingOptions } from 'src/utils/formattingUtils';
 
 const value = '12000.20';
@@ -41,3 +46,45 @@ describe('dynamic number formatting', () => {
     expect(' kr').toEqual(formatNumber(value, language, currencyOptions, position).suffix);
   });
 });
+
+describe('numberFormat', () => {
+  it('should render as NumericFormat if format is of type NumericFormatProps', () => {
+    render({
+      text: '12345.6789',
+      format: {
+        prefix: 'NOK ',
+        thousandSeparator: ' ',
+        decimalSeparator: ',',
+        decimalScale: 2,
+      },
+    });
+
+    expect(screen.getByText('NOK 12 345,67')).toBeInTheDocument();
+  });
+
+  it('should render as PatternFormat if format is of type PatternFormatProps', () => {
+    render({
+      text: '98765432',
+      format: {
+        format: '+47 ### ## ###',
+      },
+    });
+
+    expect(screen.getByText('+47 987 65 432')).toBeInTheDocument();
+  });
+
+  it('should render as plain text if format is undefined', () => {
+    render({
+      text: '12345.6789',
+    });
+
+    expect(screen.getByText('12345.6789')).toBeInTheDocument();
+  });
+});
+
+interface FormatNumericTextProps {
+  text: string;
+  format?: NumericFormatProps | PatternFormatProps;
+}
+
+const render = (props: FormatNumericTextProps) => renderRtl(<span>{formatNumericText(props.text, props.format)}</span>);
diff --git a/src/utils/formattingUtils.ts b/src/utils/formattingUtils.ts
index 6890386f3b..b13b600fdd 100644
--- a/src/utils/formattingUtils.ts
+++ b/src/utils/formattingUtils.ts
@@ -1,3 +1,6 @@
+import { numericFormatter, patternFormatter } from 'react-number-format';
+import type { NumericFormatProps, PatternFormatProps } from 'react-number-format';
+
 type FormattingResult = {
   thousandSeparator: string | undefined;
   decimalSeparator: string | undefined;
@@ -56,3 +59,21 @@ export const formatNumber = (
   });
   return intlResult;
 };
+
+export const isPatternFormat = (
+  numberFormat: NumericFormatProps | PatternFormatProps,
+): numberFormat is PatternFormatProps => (numberFormat as PatternFormatProps).format !== undefined;
+
+export const isNumericFormat = (
+  numberFormat: NumericFormatProps | PatternFormatProps,
+): numberFormat is NumericFormatProps => (numberFormat as PatternFormatProps).format === undefined;
+
+export const formatNumericText = (text: string, format?: NumericFormatProps | PatternFormatProps) => {
+  if (format && isNumericFormat(format)) {
+    return numericFormatter(text, format);
+  } else if (format && isPatternFormat(format)) {
+    return patternFormatter(text, format);
+  } else {
+    return text;
+  }
+};
diff --git a/yarn.lock b/yarn.lock
index 3256865dba..ebc80e81d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,13 +19,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@altinn/figma-design-tokens@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@altinn/figma-design-tokens@npm:6.0.1"
-  checksum: 10c0/9db16449a6f6d65a6302339ddd57858ed98cdabff4e853fe5283aca56ac2793e43a9ba5754dfbdd22be203551f91d075cc7fe7bc31e5100730db7a3e72c2bcba
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -2018,22 +2011,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/design-system-react@npm:0.54.0":
-  version: 0.54.0
-  resolution: "@digdir/design-system-react@npm:0.54.0"
-  dependencies:
-    "@altinn/figma-design-tokens": "npm:^6.0.1"
-    "@digdir/designsystemet-theme": "npm:0.15.3"
-    "@floating-ui/react": "npm:0.26.4"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    react-number-format: "npm:5.3.1"
-  peerDependencies:
-    react: ">=18.3.1"
-    react-dom: ">=18.3.1"
-  checksum: 10c0/4e528ed980d764fbfab266c1025d0bb2f7921dd14cbea52ced543f31d0b57e3e8adcf6c2d635ade347f3c7fb1edc7d204f81aa5033e7f3c98c30ddc45eabf0e6
-  languageName: node
-  linkType: hard
-
 "@digdir/designsystemet-css@npm:1.0.2":
   version: 1.0.2
   resolution: "@digdir/designsystemet-css@npm:1.0.2"
@@ -2061,13 +2038,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:0.15.3":
-  version: 0.15.3
-  resolution: "@digdir/designsystemet-theme@npm:0.15.3"
-  checksum: 10c0/1aab6ad54c3442aaf0fab9b5585e640c596a6d3a45cb8bbb3ca959f15d592321e7c9db01bca0bb778aaeb04fb04901e56b2b01bbd6aa0b8a9b2b6ad54d8a6e72
-  languageName: node
-  linkType: hard
-
 "@digdir/designsystemet-theme@npm:1.0.2":
   version: 1.0.2
   resolution: "@digdir/designsystemet-theme@npm:1.0.2"
@@ -2398,7 +2368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.3, @floating-ui/react-dom@npm:^2.1.1":
+"@floating-ui/react-dom@npm:^2.1.1":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
@@ -2424,27 +2394,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:0.26.4":
-  version: 0.26.4
-  resolution: "@floating-ui/react@npm:0.26.4"
-  dependencies:
-    "@floating-ui/react-dom": "npm:^2.0.3"
-    "@floating-ui/utils": "npm:^0.1.5"
-    tabbable: "npm:^6.0.1"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/116e8d39cf1460b547ad763c66c1168e104fb9b1b6003f7c5f766bc58108dfb2e70f2a2f736f7e80537b996b52bc258982309cfaf90fce6f640261eb364ded94
-  languageName: node
-  linkType: hard
-
-"@floating-ui/utils@npm:^0.1.5":
-  version: 0.1.6
-  resolution: "@floating-ui/utils@npm:0.1.6"
-  checksum: 10c0/0a089db0e0526b89e83cb0a773a903517db5c9067cd473febfd8fa91a3a2ccbc3a835234796c1bb528def21dbb67be50e28d9c473cb58a6d90679d7e549b9c0c
-  languageName: node
-  linkType: hard
-
 "@floating-ui/utils@npm:^0.2.7, @floating-ui/utils@npm:^0.2.9":
   version: 0.2.9
   resolution: "@floating-ui/utils@npm:0.2.9"
@@ -2862,13 +2811,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^5.12.2":
-  version: 5.18.3
-  resolution: "@navikt/aksel-icons@npm:5.18.3"
-  checksum: 10c0/1a1bb143f0353fea6d383a4b1be2a9c34826b9e4b7f64c1decf85cf660db60fb9ed1e468e8423af6ebe8b0e399fc1621d8a9cab0ef9949a3582ae9adb916bc0d
-  languageName: node
-  linkType: hard
-
 "@navikt/aksel-icons@npm:^7.0.0":
   version: 7.15.0
   resolution: "@navikt/aksel-icons@npm:7.15.0"
@@ -4910,7 +4852,6 @@ __metadata:
     "@babel/runtime": "npm:7.27.0"
     "@babel/runtime-corejs3": "npm:7.27.0"
     "@date-fns/tz": "npm:1.2.0"
-    "@digdir/design-system-react": "npm:0.54.0"
     "@digdir/designsystemet-css": "npm:1.0.2"
     "@digdir/designsystemet-react": "npm:1.0.2"
     "@digdir/designsystemet-theme": "npm:1.0.2"
@@ -13904,7 +13845,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -14237,18 +14178,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-number-format@npm:5.3.1":
-  version: 5.3.1
-  resolution: "react-number-format@npm:5.3.1"
-  dependencies:
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/9e37698ab3d8224fd6cf5a69845c0308720d04de8459757031de0304379cfd2c0c897834cc9f62869933c4702a97888ba51abeb6490b7282e237a4c19a5fab04
-  languageName: node
-  linkType: hard
-
 "react-number-format@npm:5.4.3":
   version: 5.4.3
   resolution: "react-number-format@npm:5.4.3"
@@ -15994,7 +15923,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tabbable@npm:^6.0.0, tabbable@npm:^6.0.1":
+"tabbable@npm:^6.0.0":
   version: 6.2.0
   resolution: "tabbable@npm:6.2.0"
   checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898

From 2e88407ae16f071ea8dd14246ed9bd696ca97ec7 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 8 Apr 2025 13:17:15 +0200
Subject: [PATCH 064/170] fix logout styling

---
 src/components/presentation/AppHeader/AppHeaderMenu.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/presentation/AppHeader/AppHeaderMenu.tsx b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
index 588bab7ec2..926f1b1713 100644
--- a/src/components/presentation/AppHeader/AppHeaderMenu.tsx
+++ b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
@@ -66,7 +66,10 @@ export function AppHeaderMenu({ logoColor }: AppHeaderMenuProps) {
           {isMobile && <Dropdown.Heading>{displayName}</Dropdown.Heading>}
           <Dropdown.List>
             <Dropdown.Item>
-              <Button asChild>
+              <Button
+                variant='tertiary'
+                asChild
+              >
                 <a href={logoutUrlAltinn(window.location.host)}>
                   <Lang id='general.log_out' />
                 </a>

From 63c9424504e870d61e38ab47bbd0829e52e4827f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 11 Apr 2025 09:49:37 +0200
Subject: [PATCH 065/170] resolve dropdowntest

---
 src/layout/Dropdown/DropdownComponent.test.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/layout/Dropdown/DropdownComponent.test.tsx b/src/layout/Dropdown/DropdownComponent.test.tsx
index 35aae052f8..bd133531a6 100644
--- a/src/layout/Dropdown/DropdownComponent.test.tsx
+++ b/src/layout/Dropdown/DropdownComponent.test.tsx
@@ -211,17 +211,6 @@ describe('DropdownComponent', () => {
         newValue: 'Value for first',
       }),
     );
-
-    await userEvent.click(screen.getByRole('combobox'));
-    await userEvent.click(screen.getByText('The value from the group is: Label for second'));
-
-    await waitFor(() => expect(formDataMethods.setLeafValue).toHaveBeenCalledTimes(2));
-    await waitFor(() =>
-      expect(formDataMethods.setLeafValue).toHaveBeenCalledWith({
-        reference: { field: 'myDropdown', dataType: defaultDataTypeMock },
-        newValue: 'Value for second',
-      }),
-    );
   });
 
   it('should present the options list in the order it is provided when sortOrder is not specified', async () => {

From ecebf6c8f6727e72d9c2cddc25acf07455f9bbd1 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 22 Apr 2025 15:00:40 +0200
Subject: [PATCH 066/170] move some multipleselect tests to cypres

---
 .../MultipleSelectComponent.test.tsx          | 31 +------------------
 .../MultipleSelectComponent.tsx               |  1 +
 .../component-library/multiple-select.ts      | 27 ++++++++++++++--
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
index a2260996d2..502582722e 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
 import { defaultDataTypeMock } from 'src/__mocks__/getLayoutSetsMock';
 import { MultipleSelectComponent } from 'src/layout/MultipleSelect/MultipleSelectComponent';
@@ -37,34 +36,6 @@ const render = async ({ component, ...rest }: Partial<RenderGenericComponentTest
   });
 
 describe('MultipleSelect', () => {
-  it('should display correct options as selected when supplied with a comma separated form data', async () => {
-    await render({
-      queries: {
-        fetchFormData: async () => ({ someField: 'value1,value3' }),
-      },
-    });
-    expect(screen.getByText('label1')).toBeInTheDocument();
-    expect(screen.queryByText('label2')).not.toBeInTheDocument();
-    expect(screen.getByText('label3')).toBeInTheDocument();
-  });
-
-  it('should remove item from comma separated form data on delete', async () => {
-    const { formDataMethods } = await render({
-      queries: {
-        fetchFormData: async () => ({ someField: 'value1,value2,value3' }),
-      },
-    });
-
-    await userEvent.click(screen.getByRole('button', { name: /Slett label2/i }));
-
-    await waitFor(() =>
-      expect(formDataMethods.setLeafValue).toHaveBeenCalledWith({
-        reference: { field: 'someField', dataType: defaultDataTypeMock },
-        newValue: 'value1,value3',
-      }),
-    );
-  });
-
   it('required validation should only show for simpleBinding', async () => {
     await render({
       component: {
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index 1ac3c28344..548e5ca5c4 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -85,6 +85,7 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
           <ComponentStructureWrapper node={node}>
             <EXPERIMENTAL_MultiSuggestion
               id={id}
+              data-testid='multiple-select-component'
               filter={optionFilter}
               data-size='sm'
               value={selectedValues}
diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index 63b777ea7e..e182a448e2 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -3,12 +3,11 @@ import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
 const appFrontend = new AppFrontend();
 
 describe('Multiple select component', () => {
-  it('Renders the summary2 component with correct text for MultipleSelext', () => {
+  it('Renders the summary2 component with correct text for MultipleSelect', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
     // Define the text for the last three checkboxes
-
     const checkboxText = 'Korte strekninger med bykjøring, eller annen moro';
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
@@ -19,4 +18,28 @@ describe('Multiple select component', () => {
       .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', checkboxText);
   });
+  it('displays the values of the currently selected options', () => {
+    cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
+    cy.gotoNavPage('Flervalg');
+
+    cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
+
+    cy.findByRole('option', { name: /Korte strekninger med bykjøring, eller annen moro/i }).click();
+    cy.findByRole('option', { name: /Kjøring i skogen/i }).click();
+    cy.findByRole('option', { name: /Kjøre til hytta på fjellet/i }).click();
+
+    cy.findByRole('button', {
+      name: /Korte strekninger med bykjøring, eller annen moro, Press to remove, 1 of 3/i,
+    }).should('exist');
+    cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).should('exist');
+    cy.findByRole('button', { name: /Kjøre til hytta på fjellet, Press to remove, 3 of 3/i }).should('exist');
+
+    // the clickable element is a psuedo-element within the button
+    cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).click('right', { force: true });
+
+    cy.findByRole('button', {
+      name: /Korte strekninger med bykjøring, eller annen moro, Press to remove, 1 of 2/i,
+    }).should('exist');
+    cy.findByRole('button', { name: /Kjøre til hytta på fjellet, Press to remove, 2 of 2/i }).should('exist');
+  });
 });

From 4701153d167ea47295ba1f7db987da99f33b8ec3 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 22 Apr 2025 15:04:28 +0200
Subject: [PATCH 067/170] update snapshots

---
 .../Group/__snapshots__/SummaryGroupComponent.test.tsx.snap     | 2 +-
 .../Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
index ce6443cddd..d548fc2766 100644
--- a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
       <button
         aria-label="Change: Mock group"
         class="ds-button editButton"
-        color="second"
+        data-color="second"
         data-size="sm"
         data-variant="tertiary"
         type="button"
diff --git a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
index 48f2891ade..8f213ea5ab 100644
--- a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+++ b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`SummaryRepeatingGroup SummaryRepeatingGroup -- should match snapshot 1`
       <button
         aria-label="Change: Mock group"
         class="ds-button editButton"
-        color="second"
+        data-color="second"
         data-size="sm"
         data-variant="tertiary"
         type="button"

From 2ae53f53ec7f2fc9a02ef82bd2d27ee38ab815a2 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 22 Apr 2025 15:35:12 +0200
Subject: [PATCH 068/170] remove unused props

---
 src/layout/AddToList/AddToList.tsx |  1 -
 src/layout/Tabs/Tabs.tsx           | 12 +-----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/layout/AddToList/AddToList.tsx b/src/layout/AddToList/AddToList.tsx
index b20290be24..989c270ea8 100644
--- a/src/layout/AddToList/AddToList.tsx
+++ b/src/layout/AddToList/AddToList.tsx
@@ -50,7 +50,6 @@ export function AddToListModal({
   onChange,
   initialData,
   dataModelReference,
-  backdropClose,
   onClose,
   modalRef,
   DropdownCaption,
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index c1f698a315..2fe9a5ede0 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -85,17 +85,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
   );
 };
 
-function TabHeader({
-  id,
-  title,
-  icon,
-  isActive,
-}: {
-  id: string;
-  title: string;
-  icon: string | undefined;
-  isActive?: boolean;
-}) {
+function TabHeader({ id, title, icon }: { id: string; title: string; icon: string | undefined; isActive?: boolean }) {
   const { langAsString } = useLanguage();
   const translatedTitle = langAsString(title);
 

From 16ce72034a88ed06072e192577eb0f45bff0c66a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 23 Apr 2025 12:25:40 +0200
Subject: [PATCH 069/170] fix helptext cypress tests

---
 .../integration/frontend-test/components.ts   | 20 +++++++++++--------
 test/e2e/pageobjects/app-frontend.ts          |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index 73ff7e1161..4a2b54390a 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -25,9 +25,11 @@ describe('UI Components', () => {
       cy.wrap(image).find('img').should('have.attr', 'alt', 'Altinn logo').should('exist');
     });
     cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
-    cy.get(appFrontend.helpText.alert).should('contain.text', 'Altinn logo');
-    cy.get(appFrontend.helpText.alert).trigger('keydown', { keyCode: 27 }); // Press ESC key
-    cy.get(appFrontend.helpText.alert).should('not.exist');
+    cy.get(appFrontend.helpText.alert).eq(1).should('be.visible');
+    cy.get(appFrontend.helpText.alert).eq(1).should('contain.text', 'Altinn logo');
+    cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
+    cy.get('body').type('{esc}'); // Press ESC key
+    cy.get(appFrontend.helpText.alert).eq(1).should('not.be.visible');
     cy.get('body').should('have.css', 'background-color', 'rgb(239, 239, 239)');
   });
 
@@ -35,11 +37,13 @@ describe('UI Components', () => {
     cy.goto('message');
     cy.findByRole('button', { name: /Hjelpetekst for Appen for test av app frontend/i }).click();
     // check that the markdown is rendered correctly with a list, bold text and a link
-    cy.get(appFrontend.helpText.alert).then((alert) => {
-      cy.wrap(alert).find('li').should('have.length', 5);
-      cy.wrap(alert).find('b').should('have.length', 1);
-      cy.wrap(alert).find('a').should('have.length', 1);
-    });
+    cy.get(appFrontend.helpText.alert)
+      .eq(2)
+      .then((alert) => {
+        cy.wrap(alert).find('li').should('have.length', 5);
+        cy.wrap(alert).find('b').should('have.length', 1);
+        cy.wrap(alert).find('a').should('have.length', 1);
+      });
     cy.snapshot('helptext');
   });
 
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index e96fdce623..2895f0449c 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -55,7 +55,7 @@ export class AppFrontend {
 
   public helpText = {
     button: 'button[class^="ds-helptext"]',
-    alert: 'div[role="dialog"]',
+    alert: 'div[popover="manual"]',
   };
 
   public navMenu = '#navigation-menu';

From 7cf092e8dc9b457cd02df053f307cd2fc649708a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 25 Apr 2025 14:44:11 +0200
Subject: [PATCH 070/170] fix radiobutton test

---
 .../RadioButtons/ControlledRadioGroup.tsx     | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 7adc985e01..97eebc83e5 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -37,6 +37,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
     ? lang('form_filler.radiobutton_alert_label', [`<strong>${selectedLabelTranslated}</strong>`])
     : null;
   const confirmChangeText = langAsString('form_filler.alert_confirm');
+
   const { getRadioProps } = useRadioGroup({
     name: id,
     value: selectedValues[0],
@@ -95,24 +96,28 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
             condition={shouldDisplayHorizontally}
             wrapper={(children) => <div className={classes.inlineRadioGroup}>{children}</div>}
           >
-            {calculatedOptions.map((option) => (
-              <RadioButton
-                key={option.value}
-                label={langAsString(option.label)}
-                description={option.description && <Lang id={option.description} />}
-                helpText={option.helpText && <Lang id={option.helpText} />}
-                {...getRadioProps({ value: option.value })}
-                checked={option.value === selectedValues[0]}
-                showAsCard={showAsCard}
-                readOnly={readOnly}
-                onChange={handleChange}
-                hideLabel={hideLabel}
-                data-size='sm'
-                alertOnChange={alertOnChange}
-                alertText={alertText}
-                confirmChangeText={confirmChangeText}
-              />
-            ))}
+            {calculatedOptions.map((option) => {
+              const radioProps = getRadioProps({ value: option.value });
+              return (
+                <RadioButton
+                  key={option.value}
+                  label={langAsString(option.label)}
+                  description={option.description && <Lang id={option.description} />}
+                  helpText={option.helpText && <Lang id={option.helpText} />}
+                  value={radioProps.value}
+                  name={id}
+                  checked={option.value === selectedValues[0]}
+                  showAsCard={showAsCard}
+                  readOnly={readOnly}
+                  onChange={handleChange}
+                  hideLabel={hideLabel}
+                  data-size='sm'
+                  alertOnChange={alertOnChange}
+                  alertText={alertText}
+                  confirmChangeText={confirmChangeText}
+                />
+              );
+            })}
           </ConditionalWrapper>
         </Fieldset>
       </div>

From e3a44d9c722918f45ca13c9e201cc6028ad08d9f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 28 Apr 2025 12:13:47 +0200
Subject: [PATCH 071/170] fix dropdown readonly styling

---
 package.json                                  |   6 +-
 .../Dropdown/DropdownComponent.module.css     |   5 +
 src/layout/Dropdown/DropdownComponent.tsx     |   4 +-
 yarn.lock                                     | 108 +++++++++---------
 4 files changed, 65 insertions(+), 58 deletions(-)
 create mode 100644 src/layout/Dropdown/DropdownComponent.module.css

diff --git a/package.json b/package.json
index 843f2fb232..372af50900 100644
--- a/package.json
+++ b/package.json
@@ -132,9 +132,9 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
-    "@digdir/designsystemet-css": "1.0.2",
-    "@digdir/designsystemet-react": "1.0.2",
-    "@digdir/designsystemet-theme": "1.0.2",
+    "@digdir/designsystemet-css": "1.0.4",
+    "@digdir/designsystemet-react": "1.0.4",
+    "@digdir/designsystemet-theme": "1.0.4",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.74.4",
     "ajv": "8.17.1",
diff --git a/src/layout/Dropdown/DropdownComponent.module.css b/src/layout/Dropdown/DropdownComponent.module.css
new file mode 100644
index 0000000000..65940c4a38
--- /dev/null
+++ b/src/layout/Dropdown/DropdownComponent.module.css
@@ -0,0 +1,5 @@
+.readOnly > div {
+  background: var(--ds-color-neutral-surface-tinted);
+  border-color: var(--ds-color-neutral-border-subtle);
+  color: var(--ds-color-neutral-text-default);
+}
diff --git a/src/layout/Dropdown/DropdownComponent.tsx b/src/layout/Dropdown/DropdownComponent.tsx
index 5f0566fcef..28c335684f 100644
--- a/src/layout/Dropdown/DropdownComponent.tsx
+++ b/src/layout/Dropdown/DropdownComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { Combobox } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
 import { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -13,6 +14,7 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { useGetOptions } from 'src/features/options/useGetOptions';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/Dropdown/DropdownComponent.module.css';
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -95,7 +97,7 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
             error={!isValid}
             label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
             aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
-            className={comboboxClasses.container}
+            className={cn(comboboxClasses.container, { [classes.readOnly]: readOnly })}
             style={{ width: '100%' }}
           >
             <Combobox.Empty>
diff --git a/yarn.lock b/yarn.lock
index ef97f3a2fb..cfb580567a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2011,37 +2011,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@digdir/designsystemet-css@npm:1.0.2"
-  checksum: 10c0/5563b3e1034462ff65754b2e42cdc0bae294e71065b04b3ae814cfad15821c82140316b5e163086ca53582a0f15351e1c23a5a5dccd77017607e96e76f3d2d5d
+"@digdir/designsystemet-css@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-css@npm:1.0.4"
+  checksum: 10c0/3b6d541afa4d858dd48b18b4964b7ce3129e2241aaa46ab76abe967c721d7ab8a1b323701f1b5d84b3f9a4a4e358046abc74bfd3dd6966abc5e2ae9a380221ce
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@digdir/designsystemet-react@npm:1.0.2"
+"@digdir/designsystemet-react@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-react@npm:1.0.4"
   dependencies:
-    "@floating-ui/dom": "npm:^1.6.10"
+    "@floating-ui/dom": "npm:^1.6.13"
     "@floating-ui/react": "npm:0.26.23"
-    "@navikt/aksel-icons": "npm:^7.0.0"
-    "@radix-ui/react-slot": "npm:^1.1.1"
-    "@tanstack/react-virtual": "npm:^3.11.2"
-    "@u-elements/u-datalist": "npm:^0.1.3"
-    "@u-elements/u-details": "npm:^0.1.0"
-    "@u-elements/u-tags": "npm:^0.1.2"
+    "@navikt/aksel-icons": "npm:^7.18.0"
+    "@radix-ui/react-slot": "npm:^1.1.2"
+    "@tanstack/react-virtual": "npm:^3.13.6"
+    "@u-elements/u-datalist": "npm:^0.1.5"
+    "@u-elements/u-details": "npm:^0.1.1"
+    "@u-elements/u-tags": "npm:^0.1.4"
     clsx: "npm:^2.1.1"
   peerDependencies:
     react: ">=18.3.1 || ^19.0.0"
     react-dom: ">=18.3.1 || ^19.0.0"
-  checksum: 10c0/aff11321387b04d1da5e8a0c9db1fafe19d6be1d2d4a530b31e7cf0c52c88c30ec2b2ff56cff7f0a9f7b133d049a3df7cf1b42af0e39f7bac36235c4d61cb371
+  checksum: 10c0/bc8215fa18440c2340e34af86f24cc30f5ac84925e7b2a5a10085aa5693f514e42d0cd3bb430362a1adbfb960cb77fe2ebca379737d3d03d125edd21e0560b18
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@digdir/designsystemet-theme@npm:1.0.2"
-  checksum: 10c0/fc02d60ce8a9b0f3ca6115a5c0b04201e049c80b7af1887660bafed898ac4220820d62b8ca5801130bd1137f7f3ad6ac6b60bfefeb0670f53354934fb0dbf331
+"@digdir/designsystemet-theme@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-theme@npm:1.0.4"
+  checksum: 10c0/ac8c9ec0419278e7aa74d12ed61c0c80cbeea3b3411f638840fa41b4c927b6e8a6a4fa381e555a17d1d776c0d35a4275e09b926afef0fa3ba6465ffa86db630a
   languageName: node
   linkType: hard
 
@@ -2358,7 +2358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.6.10":
+"@floating-ui/dom@npm:^1.6.13":
   version: 1.6.13
   resolution: "@floating-ui/dom@npm:1.6.13"
   dependencies:
@@ -2811,13 +2811,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.0.0":
-  version: 7.15.0
-  resolution: "@navikt/aksel-icons@npm:7.15.0"
-  checksum: 10c0/b9ff99fcfd0ac651da13fd67693e644f410f458553fa1fa1fda6830995fc241aeb1b1321c3553f9e391a5e8aba2b4757bbd00ab4f2801809d7a8956572e5e529
-  languageName: node
-  linkType: hard
-
 "@navikt/aksel-icons@npm:^7.17.4":
   version: 7.18.0
   resolution: "@navikt/aksel-icons@npm:7.18.0"
@@ -2825,6 +2818,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/aksel-icons@npm:^7.18.0":
+  version: 7.20.0
+  resolution: "@navikt/aksel-icons@npm:7.20.0"
+  checksum: 10c0/af35281a207a73bd1d14dd1703d1db8cc794435bc775bda0da39ed4ecc7cfb7218cebfc3052c26a69c8d3b5c25761e010a7f623fc7a595b80f0e55b113551b39
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -3144,31 +3144,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@radix-ui/react-compose-refs@npm:1.1.1"
+"@radix-ui/react-compose-refs@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/3e84580024e66e3cc5b9ae79355e787815c1d2a3c7d46e7f47900a29c33751ca24cf4ac8903314957ab1f7788aebe1687e2258641c188cf94653f7ddf8f70627
+  checksum: 10c0/d36a9c589eb75d634b9b139c80f916aadaf8a68a7c1c4b8c6c6b88755af1a92f2e343457042089f04cc3f23073619d08bb65419ced1402e9d4e299576d970771
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@radix-ui/react-slot@npm:1.1.2"
+"@radix-ui/react-slot@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "@radix-ui/react-slot@npm:1.2.0"
   dependencies:
-    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/81d45091806c52b507cec80b4477e4f31189d76ffcd7845b382eb3a034e6cf1faef71b881612028d5893f7580bf9ab59daa18fbf2792042dccd755c99a18df67
+  checksum: 10c0/f1455f36479e87a0a2254fc2e2b2aba6740d1fbcada949071210bf2a009a031ad508ac01b544bce96337bcca82f49531b46c71615141a5985aaa11ae69b967b1
   languageName: node
   linkType: hard
 
@@ -3429,22 +3429,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.11.2":
-  version: 3.13.0
-  resolution: "@tanstack/react-virtual@npm:3.13.0"
+"@tanstack/react-virtual@npm:^3.13.6":
+  version: 3.13.6
+  resolution: "@tanstack/react-virtual@npm:3.13.6"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.13.0"
+    "@tanstack/virtual-core": "npm:3.13.6"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/89eaf76294be3cfe294304859db2b0f7364a9bf8934849e42cb8ef08435dfb28f5504d57b08b30426a811f127f8f6320ec6c14aa7fcd304bde4fbfeaef04bc36
+  checksum: 10c0/3d2fdf024cb9189981cc015518a34a771a57cd698ca775022ad481431e6f26e596309f57d2238ef15f3b53b805879edaed6394e4cad1bb550ee92259e4d52633
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.13.0":
-  version: 3.13.0
-  resolution: "@tanstack/virtual-core@npm:3.13.0"
-  checksum: 10c0/88ff5fbd59b449e2ec2cafa9cac1ea6f449d84a593fb869ad9e8a467813e9060d4065517c5657c2de765c165453bb336751641cf670cb27143d51791bbfedc3a
+"@tanstack/virtual-core@npm:3.13.6":
+  version: 3.13.6
+  resolution: "@tanstack/virtual-core@npm:3.13.6"
+  checksum: 10c0/9c40af4deccf0fadc5c371f4e659f1aff221db0ede9664ee7cf3642a2d05f6f1c9494605f3606f70d7c8948dc22e50c48519a8435d0e845f1b1f34c9353722c8
   languageName: node
   linkType: hard
 
@@ -4303,21 +4303,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@u-elements/u-datalist@npm:^0.1.3":
-  version: 0.1.4
-  resolution: "@u-elements/u-datalist@npm:0.1.4"
-  checksum: 10c0/1dace1cc5e2385816523773d48b25cde61d59c38cc90b79cde2cc716be275f1adcadd9bd13c661bd517a9bfd2bac66a6ee02f5db1fc3bb411ecd5061905f9860
+"@u-elements/u-datalist@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@u-elements/u-datalist@npm:0.1.5"
+  checksum: 10c0/b3d45e57537ddf9c9decbb6b3bc6778839f37ffaeb61f8a535dc0f647cc8846385763bc4523de45877df64dcf30b1d7190dde0690eb6a850ef070e0b351fc4eb
   languageName: node
   linkType: hard
 
-"@u-elements/u-details@npm:^0.1.0":
+"@u-elements/u-details@npm:^0.1.1":
   version: 0.1.1
   resolution: "@u-elements/u-details@npm:0.1.1"
   checksum: 10c0/df382b61dc31f44d6b093193afe0e5ba795d27009158a71440e0a53cb47a7aa0c6ebba03ce44186a77e18c3cbdb7e8f4c312018a837f7e5ee41cf5bb1f349c2d
   languageName: node
   linkType: hard
 
-"@u-elements/u-tags@npm:^0.1.2":
+"@u-elements/u-tags@npm:^0.1.4":
   version: 0.1.4
   resolution: "@u-elements/u-tags@npm:0.1.4"
   checksum: 10c0/36359c2031777a6cbfff8bdee6374a7557999a9c77a3cb22e7569f2052643f028789e9530c76980b3b396a131bc7d6431eec08f30afade214d7b8d833b8d208c
@@ -4852,9 +4852,9 @@ __metadata:
     "@babel/runtime": "npm:7.27.0"
     "@babel/runtime-corejs3": "npm:7.27.0"
     "@date-fns/tz": "npm:1.2.0"
-    "@digdir/designsystemet-css": "npm:1.0.2"
-    "@digdir/designsystemet-react": "npm:1.0.2"
-    "@digdir/designsystemet-theme": "npm:1.0.2"
+    "@digdir/designsystemet-css": "npm:1.0.4"
+    "@digdir/designsystemet-react": "npm:1.0.4"
+    "@digdir/designsystemet-theme": "npm:1.0.4"
     "@eslint/compat": "npm:1.2.8"
     "@faker-js/faker": "npm:9.7.0"
     "@navikt/aksel-icons": "npm:^7.17.4"

From 2a486f4fe7dfbc8506af15917c94d65d730bd916 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 30 Apr 2025 09:19:54 +0200
Subject: [PATCH 072/170] fix charactercounter for inputcomponent

---
 src/app-components/Input/Input.tsx  |   7 +-
 src/layout/Input/InputComponent.tsx | 131 ++++++++++++----------------
 2 files changed, 60 insertions(+), 78 deletions(-)

diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index b8790b749e..32049f0e9e 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -4,6 +4,7 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 import { Paragraph, Textfield } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Input/Input.module.css';
+import { useCharacterLimit } from 'src/utils/inputUtils';
 import type { InputType } from 'src/app-components/Input/constants';
 
 type LabelRequired =
@@ -21,6 +22,7 @@ export type InputProps = {
   readOnly?: boolean;
   type?: InputType;
   textonly?: boolean;
+  maxLength?: number;
 } & Pick<
   InputHTMLAttributes<HTMLInputElement>,
   | 'value'
@@ -38,7 +40,9 @@ export type InputProps = {
   LabelRequired;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', readOnly, error, textonly, ...rest } = props;
+  const { size = 'sm', readOnly, error, textonly, maxLength, ...rest } = props;
+
+  const characterLimit = useCharacterLimit(maxLength);
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     if (readOnly) {
@@ -70,6 +74,7 @@ export function Input(props: InputProps) {
       onPaste={handlePaste}
       aria-invalid={!!error}
       readOnly={readOnly}
+      counter={characterLimit}
       {...rest}
     />
   );
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 0807ebb033..5f46757bf3 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Field } from '@digdir/designsystemet-react';
-
 import { FormattedInput } from 'src/app-components/Input/FormattedInput';
 import { Input } from 'src/app-components/Input/Input';
 import { NumericInput } from 'src/app-components/Input/NumericInput';
@@ -103,87 +101,66 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     case 'search':
     case 'text':
       return (
-        <Field>
-          <Input
-            {...inputProps}
-            value={formValue}
-            type={variant.type}
-            onChange={(event) => {
-              setValue('simpleBinding', event.target.value);
-            }}
-          />
-          {characterLimit && !readOnly && (
-            <Field.Counter
-              {...characterLimit}
-              data-size='sm'
-            />
-          )}
-        </Field>
+        <Input
+          {...inputProps}
+          value={formValue}
+          type={variant.type}
+          onChange={(event) => {
+            setValue('simpleBinding', event.target.value);
+          }}
+          maxLength={maxLength}
+        />
       );
     case 'pattern':
       return (
-        <Field>
-          <FormattedInput
-            {...inputProps}
-            {...variant.format}
-            value={formValue}
-            type='text'
-            onValueChange={(values, sourceInfo) => {
-              if (sourceInfo.source === 'prop') {
-                return;
-              }
-              setValue('simpleBinding', values.value);
-            }}
-          />
-          {characterLimit && !readOnly && (
-            <Field.Counter
-              {...characterLimit}
-              data-size='sm'
-            />
-          )}
-        </Field>
+        <FormattedInput
+          {...inputProps}
+          {...variant.format}
+          value={formValue}
+          type='text'
+          onValueChange={(values, sourceInfo) => {
+            if (sourceInfo.source === 'prop') {
+              return;
+            }
+            setValue('simpleBinding', values.value);
+          }}
+          maxLength={maxLength}
+        />
       );
     case 'number':
       return (
-        <Field>
-          <NumericInput
-            {...inputProps}
-            {...variant.format}
-            value={formValue}
-            type='text'
-            onValueChange={(values, sourceInfo) => {
-              if (sourceInfo.source === 'prop') {
-                // Do not update the value if the change is from props (i.e. let's not send form data updates when
-                // visual-only decimalScale changes)
-                return;
-              }
-              setValue('simpleBinding', values.value);
-            }}
-            onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
-              /* This is a workaround for a react-number-format bug that
-               * removes the decimal on paste.
-               * We should be able to remove it when this issue gets fixed:
-               * https://github.com/s-yadav/react-number-format/issues/349
-               *  */
-              event.preventDefault();
-              if (inputProps.readOnly) {
-                return;
-              }
-              const pastedText = event.clipboardData.getData('Text');
-              if (pastedText.indexOf(',') !== -1) {
-                setValue('simpleBinding', pastedText.replace(',', '.'));
-              } else {
-                setValue('simpleBinding', pastedText);
-              }
-            }}
-          />
-          {characterLimit && !readOnly && (
-            <Field.Counter
-              {...characterLimit}
-              data-size='sm'
-            />
-          )}
-        </Field>
+        <NumericInput
+          {...inputProps}
+          {...variant.format}
+          value={formValue}
+          type='text'
+          onValueChange={(values, sourceInfo) => {
+            if (sourceInfo.source === 'prop') {
+              // Do not update the value if the change is from props (i.e. let's not send form data updates when
+              // visual-only decimalScale changes)
+              return;
+            }
+            setValue('simpleBinding', values.value);
+          }}
+          onPaste={(event: React.ClipboardEvent<HTMLInputElement>) => {
+            /* This is a workaround for a react-number-format bug that
+             * removes the decimal on paste.
+             * We should be able to remove it when this issue gets fixed:
+             * https://github.com/s-yadav/react-number-format/issues/349
+             *  */
+            event.preventDefault();
+            if (inputProps.readOnly) {
+              return;
+            }
+            const pastedText = event.clipboardData.getData('Text');
+            if (pastedText.indexOf(',') !== -1) {
+              setValue('simpleBinding', pastedText.replace(',', '.'));
+            } else {
+              setValue('simpleBinding', pastedText);
+            }
+          }}
+          maxLength={maxLength}
+        />
       );
   }
 };

From f4ee67571ab8cdf4f7beb3f44781b11dca6fe132 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 30 Apr 2025 10:32:44 +0200
Subject: [PATCH 073/170] fix helptext cypress tests

---
 src/app-components/HelpText/HelpText.tsx         |  1 +
 test/e2e/integration/frontend-test/components.ts | 15 +++++++--------
 test/e2e/pageobjects/app-frontend.ts             |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index 5e6ea3bd98..bd5d9a400c 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -79,6 +79,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
         </button>
       </Popover.Trigger>
       <Popover
+        data-testid='helptext'
         className={classes.helpTextContent}
         data-color='info'
         placement={placement}
diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index 4a2b54390a..cbab527660 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -25,11 +25,11 @@ describe('UI Components', () => {
       cy.wrap(image).find('img').should('have.attr', 'alt', 'Altinn logo').should('exist');
     });
     cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
-    cy.get(appFrontend.helpText.alert).eq(1).should('be.visible');
-    cy.get(appFrontend.helpText.alert).eq(1).should('contain.text', 'Altinn logo');
+    cy.get(appFrontend.helpText.alert).eq(0).should('be.visible');
+    cy.get(appFrontend.helpText.alert).eq(0).should('contain.text', 'Altinn logo');
     cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
     cy.get('body').type('{esc}'); // Press ESC key
-    cy.get(appFrontend.helpText.alert).eq(1).should('not.be.visible');
+    cy.get(appFrontend.helpText.alert).eq(0).should('not.be.visible');
     cy.get('body').should('have.css', 'background-color', 'rgb(239, 239, 239)');
   });
 
@@ -38,7 +38,7 @@ describe('UI Components', () => {
     cy.findByRole('button', { name: /Hjelpetekst for Appen for test av app frontend/i }).click();
     // check that the markdown is rendered correctly with a list, bold text and a link
     cy.get(appFrontend.helpText.alert)
-      .eq(2)
+      .eq(1)
       .then((alert) => {
         cy.wrap(alert).find('li').should('have.length', 5);
         cy.wrap(alert).find('b').should('have.length', 1);
@@ -379,17 +379,16 @@ describe('UI Components', () => {
     cy.get(appFrontend.changeOfName.newLastName).blur();
 
     cy.get(appFrontend.changeOfName.confirmChangeName).findByText('Dette er en beskrivelse.').should('be.visible');
+    cy.get(appFrontend.helpText.alert).eq(1).should('not.be.visible');
     cy.get(appFrontend.changeOfName.confirmChangeName).findByRole('button').click();
-    cy.get(appFrontend.changeOfName.confirmChangeName)
-      .findByRole('dialog')
-      .should('contain.text', 'Dette er en hjelpetekst.');
+    cy.get(appFrontend.helpText.alert).eq(1).should('be.visible');
 
     cy.get(appFrontend.changeOfName.confirmChangeName).find('label').click();
     cy.get(appFrontend.changeOfName.reasons).should('be.visible');
 
     cy.get(appFrontend.changeOfName.reasons).findByText('Dette er en beskrivelse.').should('be.visible');
     cy.get(appFrontend.changeOfName.reasons).findByRole('button').click();
-    cy.get(appFrontend.changeOfName.reasons).findByRole('dialog').should('contain.text', 'Dette er en hjelpetekst.');
+    cy.get(appFrontend.helpText.alert).eq(2).should('be.visible');
   });
 
   it('should display alert on changing radio button', () => {
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index 2895f0449c..7683a104d1 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -55,7 +55,7 @@ export class AppFrontend {
 
   public helpText = {
     button: 'button[class^="ds-helptext"]',
-    alert: 'div[popover="manual"]',
+    alert: 'div[data-testid="helptext"]',
   };
 
   public navMenu = '#navigation-menu';

From 11075d95ae313f83ab987e2c5a7b096e39aa7ece Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 12 May 2025 10:01:57 +0200
Subject: [PATCH 074/170] fix errorsummaryItem

---
 src/components/message/ErrorReport.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index baf083b383..6374bd950d 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -39,20 +39,23 @@ export const ErrorReport = ({ children, errors, show }: IErrorReportProps) => {
   return (
     <ErrorReportContext.Provider value={true}>
       <FullWidthWrapper isOnBottom={true}>
-        <ErrorSummary data-testid='ErrorReport'>
+        <ErrorSummary
+          data-testid='ErrorReport'
+          className={classes.errorSummary}
+        >
           <Flex
             container
             item
             spacing={6}
             alignItems='flex-start'
           >
-            <ErrorSummary.Heading>
-              <Lang id='form_filler.error_report_header' />
-            </ErrorSummary.Heading>
             <Flex
               item
               size={{ xs: 12 }}
             >
+              <ErrorSummary.Heading>
+                <Lang id='form_filler.error_report_header' />
+              </ErrorSummary.Heading>
               <ErrorSummary.List className={classes.errorList}>{errors}</ErrorSummary.List>
             </Flex>
             {children}

From 49efa329e1dfea514086e361ee9d47972d41730d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 12 May 2025 10:03:08 +0200
Subject: [PATCH 075/170] clean up input component

---
 src/layout/Input/InputComponent.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 249d526487..caf1705d00 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -13,7 +13,6 @@ import { useMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import classes from 'src/layout/Input/InputComponent.module.css';
 import { isNumberFormat, isPatternFormat } from 'src/layout/Input/number-format-helpers';
-import { useCharacterLimit } from 'src/utils/inputUtils';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { InputProps } from 'src/app-components/Input/Input';
@@ -76,7 +75,6 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     setValue,
   } = useDataModelBindings(dataModelBindings, saveWhileTyping);
   const { langAsString } = useLanguage();
-  const characterLimit = useCharacterLimit(maxLength);
 
   const [localValue, setLocalValue] = React.useState<string | undefined>(undefined);
   const formValue = localValue ?? realFormValue;

From 935f9f9c8e22107482bbcb6096760e8b5301bac1 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 12 May 2025 10:17:44 +0200
Subject: [PATCH 076/170] workaround for mulitpleselect alert on delete

---
 .../MultipleSelectComponent.tsx               | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index f5511aee5d..a6454f4bac 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -63,39 +63,48 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
     changeMessageGenerator,
   );
 
+  const [componentKey, setComponentKey] = React.useState(0);
+
+  // This is a workaround to force the component to update its internal state, when the user cancels the alert on change
+  const onCancelClick = () => {
+    cancelChange();
+    setComponentKey((prevKey) => prevKey + 1);
+  };
+
   if (isFetching) {
     return <AltinnSpinner />;
   }
 
   return (
-    <ConditionalWrapper
-      condition={Boolean(alertOnChange)}
-      wrapper={(children) => (
-        <DeleteWarningPopover
-          deleteButtonText={langAsString('form_filler.alert_confirm')}
-          messageText={alertMessage}
-          onCancelClick={cancelChange}
-          onPopoverDeleteClick={confirmChange}
-          open={alertOpen}
-          setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
-      )}
-    >
-      <Field style={{ width: '100%' }}>
-        <Label
-          htmlFor={id}
-          label={labelText}
-          grid={grid?.labelGrid}
-          required={required}
-          requiredIndicator={getRequiredComponent()}
-          optionalIndicator={getOptionalComponent()}
-          help={getHelpTextComponent()}
-          description={getDescriptionComponent()}
+    <Field style={{ width: '100%' }}>
+      <Label
+        htmlFor={id}
+        label={labelText}
+        grid={grid?.labelGrid}
+        required={required}
+        requiredIndicator={getRequiredComponent()}
+        optionalIndicator={getOptionalComponent()}
+        help={getHelpTextComponent()}
+        description={getDescriptionComponent()}
+      >
+        <ConditionalWrapper
+          condition={Boolean(alertOnChange)}
+          wrapper={(children) => (
+            <DeleteWarningPopover
+              deleteButtonText={langAsString('form_filler.alert_confirm')}
+              messageText={alertMessage}
+              onCancelClick={onCancelClick}
+              onPopoverDeleteClick={confirmChange}
+              open={alertOpen}
+              setOpen={setAlertOpen}
+            >
+              {children}
+            </DeleteWarningPopover>
+          )}
         >
           <ComponentStructureWrapper node={node}>
             <EXPERIMENTAL_MultiSuggestion
+              key={componentKey}
               id={id}
               data-testid='multiple-select-component'
               filter={optionFilter}
@@ -145,8 +154,8 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
               </EXPERIMENTAL_MultiSuggestion.List>
             </EXPERIMENTAL_MultiSuggestion>
           </ComponentStructureWrapper>
-        </Label>
-      </Field>
-    </ConditionalWrapper>
+        </ConditionalWrapper>
+      </Label>
+    </Field>
   );
 }

From b46b1db46196e5db450bd74814aa7bb2881126a5 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 12 May 2025 10:29:14 +0200
Subject: [PATCH 077/170] fix multipleselect test

---
 .../alertOnChange/DeleteWarningPopover.tsx    |  1 +
 .../integration/frontend-test/components.ts   | 52 +++++++++----------
 test/e2e/pageobjects/app-frontend.ts          |  2 +
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index fefc5b64ed..0b6233f14f 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -36,6 +36,7 @@ export function DeleteWarningPopover({
         {children}
       </Popover.Trigger>
       <Popover
+        data-testid='delete-warning-popover'
         open={open}
         placement={placement}
         data-color='warning'
diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index 8c362b0119..e9e9ed4170 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -410,7 +410,7 @@ describe('UI Components', () => {
 
     cy.findByRole('radio', { name: /Gårdsbruk/ }).check();
     //makes sure that textresources from active radiobutton are displayed in the alert dialog
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre fra Slektskap?');
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil endre fra Slektskap?');
     cy.findByRole('button', { name: /Avbryt/ }).click();
     cy.findByRole('radio', { name: /Slektskap/ }).should('be.checked');
 
@@ -432,13 +432,19 @@ describe('UI Components', () => {
 
     cy.get(appFrontend.changeOfName.sources).click();
     cy.findByRole('option', { name: /digitaliseringsdirektoratet/i }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?');
+    cy.get(appFrontend.deleteWarningPopover).should(
+      'contain.text',
+      'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?',
+    );
     cy.findByRole('button', { name: /Avbryt/ }).click();
     cy.get(appFrontend.changeOfName.sources).should('have.value', 'Altinn');
 
     cy.get(appFrontend.changeOfName.sources).click();
     cy.findByRole('option', { name: /digitaliseringsdirektoratet/i }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?');
+    cy.get(appFrontend.deleteWarningPopover).should(
+      'contain.text',
+      'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?',
+    );
     cy.findByRole('button', { name: /Bekreft/ }).click();
     cy.get(appFrontend.changeOfName.sources).should('have.value', 'Digitaliseringsdirektoratet');
   });
@@ -454,7 +460,7 @@ describe('UI Components', () => {
 
     cy.gotoHiddenPage('label-data-bindings');
 
-    cy.findByRole('combobox', { name: /velg noen farger/i }).click();
+    cy.get('#form-content-colorsCheckboxes').click();
     cy.findByRole('option', { name: /blå/i }).click();
     cy.findByRole('option', { name: /blå/i }).should('have.attr', 'aria-selected', 'true');
     cy.findByRole('option', { name: /cyan/i }).click();
@@ -464,29 +470,23 @@ describe('UI Components', () => {
     cy.findByRole('option', { name: /gul/i }).click();
     cy.findByRole('option', { name: /gul/i }).should('have.attr', 'aria-selected', 'true');
 
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Grønn?');
+    cy.findByRole('button', {
+      name: /Grønn, Press to remove, 2 of 4/i,
+    }).click('right', { force: true });
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil slette Grønn?');
     cy.findByRole('button', { name: /Avbryt/ }).click();
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('be.visible');
-
-    cy.findByRole('button', { name: /slett gul/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Gul?');
-    cy.findByRole('button', { name: /Bekreft/ }).click();
-    cy.findByRole('button', { name: /slett gul/i, hidden: true }).should('not.exist');
-
-    cy.findByRole('button', { name: /fjern alle valgte/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Blå, Cyan, Grønn?');
-    cy.findByRole('button', { name: /Avbryt/ }).click();
-    cy.findByRole('button', { name: /slett blå/i, hidden: true }).should('be.visible');
-    cy.findByRole('button', { name: /slett cyan/i, hidden: true }).should('be.visible');
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('be.visible');
-
-    cy.findByRole('button', { name: /fjern alle valgte/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Blå, Cyan, Grønn?');
+    cy.findByRole('button', {
+      name: /Grønn, Press to remove, 2 of 4/i,
+    }).should('exist');
+
+    cy.findByRole('button', {
+      name: /Gul, Press to remove, 3 of 4/i,
+    }).click('right', { force: true });
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil slette Gul?');
     cy.findByRole('button', { name: /Bekreft/ }).click();
-    cy.findByRole('button', { name: /slett blå/i, hidden: true }).should('not.exist');
-    cy.findByRole('button', { name: /slett cyan/i, hidden: true }).should('not.exist');
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('not.exist');
+    cy.findByRole('button', {
+      name: /Gul, Press to remove, 3 of 4/i,
+    }).should('not.exist');
   });
 
   it('should display alert when unchecking checkbox', () => {
@@ -519,7 +519,7 @@ describe('UI Components', () => {
     // dialog pops up when unchecking a checkbox
     cy.findByRole('checkbox', { name: /Ja/ }).dblclick();
     //Make sure that the alert popover for only one checkbox is displayed, if several dialogs are displayed, the test will fail
-    cy.findByRole('dialog');
+    cy.get(appFrontend.deleteWarningPopover);
   });
 
   it('should render components as summary', () => {
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index 7683a104d1..76e22565b8 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -58,6 +58,8 @@ export class AppFrontend {
     alert: 'div[data-testid="helptext"]',
   };
 
+  public deleteWarningPopover = 'div[data-testid="delete-warning-popover"]';
+
   public navMenu = '#navigation-menu';
   public navMenuButtons = '#navigation-menu li > button';
   public navMenuCurrent = '#navigation-menu li > button[aria-current=page]';

From 4a9f72e840f23e8f0d4f85fd5d1f5bdc95631cba Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 14 May 2025 15:59:14 +0200
Subject: [PATCH 078/170] improve position of alert on delete for
 multipleselect

---
 .../MultipleSelectComponent.tsx               | 133 +++++++++---------
 1 file changed, 67 insertions(+), 66 deletions(-)

diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index a6454f4bac..caa4306cc7 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -4,7 +4,6 @@ import { EXPERIMENTAL_MultiSuggestion, Field } from '@digdir/designsystemet-reac
 
 import { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { getDescriptionId } from 'src/components/label/Label';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
@@ -15,6 +14,7 @@ import { useGetOptions } from 'src/features/options/useGetOptions';
 import { useSaveValueToGroup } from 'src/features/saveToGroup/useSaveToGroup';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import utilclasses from 'src/styles/utils.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { optionFilter } from 'src/utils/options';
@@ -87,74 +87,75 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
         help={getHelpTextComponent()}
         description={getDescriptionComponent()}
       >
-        <ConditionalWrapper
-          condition={Boolean(alertOnChange)}
-          wrapper={(children) => (
-            <DeleteWarningPopover
-              deleteButtonText={langAsString('form_filler.alert_confirm')}
-              messageText={alertMessage}
-              onCancelClick={onCancelClick}
-              onPopoverDeleteClick={confirmChange}
-              open={alertOpen}
-              setOpen={setAlertOpen}
-            >
-              {children}
-            </DeleteWarningPopover>
-          )}
-        >
-          <ComponentStructureWrapper node={node}>
-            <EXPERIMENTAL_MultiSuggestion
-              key={componentKey}
-              id={id}
-              data-testid='multiple-select-component'
-              filter={optionFilter}
-              data-size='sm'
-              value={selectedValues}
-              onValueChange={handleChange}
-              onBlur={debounce}
-            >
-              <EXPERIMENTAL_MultiSuggestion.Chips render={(e) => e.text} />
-              <EXPERIMENTAL_MultiSuggestion.Input
-                aria-invalid={!isValid}
-                aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
-                aria-describedby={
-                  overrideDisplay?.renderedInTable !== true &&
-                  textResourceBindings?.title &&
-                  textResourceBindings?.description
-                    ? getDescriptionId(id)
-                    : undefined
-                }
-                readOnly={readOnly}
-              />
-              <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
-              <EXPERIMENTAL_MultiSuggestion.List>
-                <EXPERIMENTAL_MultiSuggestion.Empty>
-                  <Lang id='form_filler.no_options_found' />
-                </EXPERIMENTAL_MultiSuggestion.Empty>
-                {options.map((option) => (
-                  <EXPERIMENTAL_MultiSuggestion.Option
-                    key={option.value}
-                    value={option.value}
-                  >
-                    <span>
-                      <wbr />
+        <ComponentStructureWrapper node={node}>
+          <EXPERIMENTAL_MultiSuggestion
+            key={componentKey}
+            id={id}
+            data-testid='multiple-select-component'
+            filter={optionFilter}
+            data-size='sm'
+            value={selectedValues}
+            onValueChange={handleChange}
+            onBlur={debounce}
+          >
+            <EXPERIMENTAL_MultiSuggestion.Chips render={(e) => e.text} />
+            {alertOnChange && (
+              <DeleteWarningPopover
+                deleteButtonText={langAsString('form_filler.alert_confirm')}
+                messageText={alertMessage}
+                onCancelClick={onCancelClick}
+                onPopoverDeleteClick={confirmChange}
+                open={alertOpen}
+                setOpen={setAlertOpen}
+              >
+                <span
+                  className={utilclasses.visuallyHidden}
+                  aria-hidden='true'
+                >
+                  Trigger
+                </span>
+              </DeleteWarningPopover>
+            )}
+            <EXPERIMENTAL_MultiSuggestion.Input
+              aria-invalid={!isValid}
+              aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
+              aria-describedby={
+                overrideDisplay?.renderedInTable !== true &&
+                textResourceBindings?.title &&
+                textResourceBindings?.description
+                  ? getDescriptionId(id)
+                  : undefined
+              }
+              readOnly={readOnly}
+            />
+            <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
+            <EXPERIMENTAL_MultiSuggestion.List>
+              <EXPERIMENTAL_MultiSuggestion.Empty>
+                <Lang id='form_filler.no_options_found' />
+              </EXPERIMENTAL_MultiSuggestion.Empty>
+              {options.map((option) => (
+                <EXPERIMENTAL_MultiSuggestion.Option
+                  key={option.value}
+                  value={option.value}
+                >
+                  <span>
+                    <wbr />
+                    <Lang
+                      id={option.label}
+                      node={node}
+                    />
+                    {option.description && (
                       <Lang
-                        id={option.label}
+                        id={option.description}
                         node={node}
                       />
-                      {option.description && (
-                        <Lang
-                          id={option.description}
-                          node={node}
-                        />
-                      )}
-                    </span>
-                  </EXPERIMENTAL_MultiSuggestion.Option>
-                ))}
-              </EXPERIMENTAL_MultiSuggestion.List>
-            </EXPERIMENTAL_MultiSuggestion>
-          </ComponentStructureWrapper>
-        </ConditionalWrapper>
+                    )}
+                  </span>
+                </EXPERIMENTAL_MultiSuggestion.Option>
+              ))}
+            </EXPERIMENTAL_MultiSuggestion.List>
+          </EXPERIMENTAL_MultiSuggestion>
+        </ComponentStructureWrapper>
       </Label>
     </Field>
   );

From 4f3d38366ca5717516720e2a27498356797664d8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 15 May 2025 09:59:35 +0200
Subject: [PATCH 079/170] fix placement of alertonchange for dropdown

---
 src/layout/Dropdown/DropdownComponent.tsx | 56 +++++++++++------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/layout/Dropdown/DropdownComponent.tsx b/src/layout/Dropdown/DropdownComponent.tsx
index 28c335684f..09904748d2 100644
--- a/src/layout/Dropdown/DropdownComponent.tsx
+++ b/src/layout/Dropdown/DropdownComponent.tsx
@@ -59,32 +59,32 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
   }
 
   return (
-    <ConditionalWrapper
-      condition={Boolean(alertOnChange)}
-      wrapper={(children) => (
-        <DeleteWarningPopover
-          onPopoverDeleteClick={confirmChange}
-          onCancelClick={cancelChange}
-          deleteButtonText={langAsString('form_filler.alert_confirm')}
-          messageText={alertMessage}
-          open={alertOpen}
-          setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
-      )}
+    <Label
+      htmlFor={id}
+      label={labelText}
+      grid={grid?.labelGrid}
+      required={required}
+      requiredIndicator={getRequiredComponent()}
+      optionalIndicator={getOptionalComponent()}
+      help={getHelpTextComponent()}
+      description={getDescriptionComponent()}
     >
-      <Label
-        htmlFor={id}
-        label={labelText}
-        grid={grid?.labelGrid}
-        required={required}
-        requiredIndicator={getRequiredComponent()}
-        optionalIndicator={getOptionalComponent()}
-        help={getHelpTextComponent()}
-        description={getDescriptionComponent()}
-      >
-        <ComponentStructureWrapper node={node}>
+      <ComponentStructureWrapper node={node}>
+        <ConditionalWrapper
+          condition={Boolean(alertOnChange)}
+          wrapper={(children) => (
+            <DeleteWarningPopover
+              onPopoverDeleteClick={confirmChange}
+              onCancelClick={cancelChange}
+              deleteButtonText={langAsString('form_filler.alert_confirm')}
+              messageText={alertMessage}
+              open={alertOpen}
+              setOpen={setAlertOpen}
+            >
+              {children}
+            </DeleteWarningPopover>
+          )}
+        >
           <Combobox
             id={id}
             filter={optionSearchFilter}
@@ -120,8 +120,8 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
               </Combobox.Option>
             ))}
           </Combobox>
-        </ComponentStructureWrapper>
-      </Label>
-    </ConditionalWrapper>
+        </ConditionalWrapper>
+      </ComponentStructureWrapper>
+    </Label>
   );
 }

From b85814426920f2ea7f5af7f15c26868a7f94cac2 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 19 May 2025 10:39:58 +0200
Subject: [PATCH 080/170] update signing to new ds

---
 src/app-components/Label/Label.tsx            |  2 +-
 src/features/navigation/AppNavigation.tsx     |  2 +-
 src/layout/Cards/Cards.tsx                    |  2 +-
 .../CheckboxesContainerComponent.tsx          |  2 +-
 .../RadioButtons/ControlledRadioGroup.tsx     |  2 +-
 src/layout/SigneeList/SigneeListComponent.tsx |  2 +-
 src/layout/SigneeList/SigneeStateTag.tsx      |  2 +-
 .../SigningActions/OnBehalfOfChooser.tsx      |  6 +--
 .../PanelAwaitingCurrentUserSignature.tsx     | 15 ++++----
 src/layout/SigningActions/PanelSigning.tsx    | 37 +++++++++++--------
 .../SigningActionsComponent.tsx               |  2 +-
 .../SigningDocumentListComponent.tsx          |  2 +-
 12 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
index cd2ccf91bc..36713f95a5 100644
--- a/src/app-components/Label/Label.tsx
+++ b/src/app-components/Label/Label.tsx
@@ -20,7 +20,7 @@ type LabelProps = {
   description?: ReactElement;
   className?: string;
   grid?: IGridStyling;
-  size?: DesignsystemetLabelProps['size'];
+  size?: DesignsystemetLabelProps['data-size'];
   style?: DesignsystemetLabelProps['style'];
 };
 
diff --git a/src/features/navigation/AppNavigation.tsx b/src/features/navigation/AppNavigation.tsx
index 17b7da952b..e327ffce8f 100644
--- a/src/features/navigation/AppNavigation.tsx
+++ b/src/features/navigation/AppNavigation.tsx
@@ -104,7 +104,7 @@ export function AppNavigationHeading({
         <Button
           variant='tertiary'
           color='second'
-          data-size='sm'
+          size='sm'
           icon={true}
           onClick={onClose}
           aria-label={langAsString('general.close')}
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 6ff1df945f..8cccc72594 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { CSSProperties } from 'react';
 
 import { AppCard } from 'src/app-components/Card/Card';
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index 6bcfbfec1f..cd43665f91 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
 
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 97eebc83e5..278be97e68 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { Fieldset, useRadioGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
diff --git a/src/layout/SigneeList/SigneeListComponent.tsx b/src/layout/SigneeList/SigneeListComponent.tsx
index 0e53e069d2..2ed0baa76d 100644
--- a/src/layout/SigneeList/SigneeListComponent.tsx
+++ b/src/layout/SigneeList/SigneeListComponent.tsx
@@ -38,7 +38,7 @@ export function SigneeListComponent({ node }: PropsFromGenericComponent<'SigneeL
             title={<Lang id={textResourceBindings?.title} />}
             description={<Lang id={textResourceBindings?.description} />}
             helpText={textResourceBindings?.help ? { text: textResourceBindings?.help } : undefined}
-            designSystemLabelProps={{ size: 'lg' }}
+            designSystemLabelProps={{ 'data-size': 'lg' }}
           />
         ) : undefined
       }
diff --git a/src/layout/SigneeList/SigneeStateTag.tsx b/src/layout/SigneeList/SigneeStateTag.tsx
index b56b65661c..03df6aff20 100644
--- a/src/layout/SigneeList/SigneeStateTag.tsx
+++ b/src/layout/SigneeList/SigneeStateTag.tsx
@@ -52,7 +52,7 @@ export function SigneeStateTag({ state }: { state: SigneeState }) {
   return (
     <Tag
       color={color}
-      size='sm'
+      data-size='sm'
     >
       <Lang id={SIGNEE_STATUS[status]} />
     </Tag>
diff --git a/src/layout/SigningActions/OnBehalfOfChooser.tsx b/src/layout/SigningActions/OnBehalfOfChooser.tsx
index 07d33d264c..f8ae3d81e2 100644
--- a/src/layout/SigningActions/OnBehalfOfChooser.tsx
+++ b/src/layout/SigningActions/OnBehalfOfChooser.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ChangeEvent } from 'react';
 
-import { ErrorMessage } from '@digdir/designsystemet-react';
+import { ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { RadioButton } from 'src/components/form/RadioButton';
@@ -57,9 +57,9 @@ export const OnBehalfOfChooser = ({
         />
       ))}
       {error && (
-        <ErrorMessage size='small'>
+        <ValidationMessage data-size='sm'>
           <Lang id='signing.error_signing_no_on_behalf_of' />
-        </ErrorMessage>
+        </ValidationMessage>
       )}
     </Fieldset>
   );
diff --git a/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx b/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
index f49ce4c08a..ece39aaae2 100644
--- a/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
+++ b/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Checkbox, ErrorMessage, Heading, Spinner } from '@digdir/designsystemet-react';
+import { Checkbox, Heading, Spinner, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Button } from 'src/app-components/Button/Button';
 import { Panel } from 'src/app-components/Panel/Panel';
@@ -112,7 +112,7 @@ export function AwaitingCurrentUserSignaturePanel({
         isOnBottom
       >
         <div className={classes.loadingContainer}>
-          <Spinner title={langAsString('signing.loading')} />
+          <Spinner aria-label={langAsString('signing.loading')} />
         </div>
       </Panel>
     );
@@ -154,7 +154,7 @@ export function AwaitingCurrentUserSignaturePanel({
       {unsignedUserSigneeParties.length === 1 && unsignedUserSigneeParties.at(0)?.organization && (
         <Heading
           level={1}
-          size='2xs'
+          data-size='2xs'
         >
           <Lang
             id='signing.submit_panel_single_org_choice'
@@ -177,13 +177,12 @@ export function AwaitingCurrentUserSignaturePanel({
             }
           }}
           className={classes.checkbox}
-        >
-          <Lang id={checkboxLabel} />
-        </Checkbox>
+          label={<Lang id={checkboxLabel} />}
+        />
         {confirmReadDocumentsError && (
-          <ErrorMessage size='small'>
+          <ValidationMessage data-size='sm'>
             <Lang id='signing.error_signing_not_confirmed_documents' />
-          </ErrorMessage>
+          </ValidationMessage>
         )}
       </div>
     </SigningPanel>
diff --git a/src/layout/SigningActions/PanelSigning.tsx b/src/layout/SigningActions/PanelSigning.tsx
index c33818fc8f..27a03f5525 100644
--- a/src/layout/SigningActions/PanelSigning.tsx
+++ b/src/layout/SigningActions/PanelSigning.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import type { PropsWithChildren, ReactElement } from 'react';
 
-import { ErrorMessage, Heading, Modal, Paragraph } from '@digdir/designsystemet-react';
+import { Dialog, Heading, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import { useIsMutating, useMutation } from '@tanstack/react-query';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -43,7 +43,7 @@ export function SigningPanel({
       <div className={classes.contentContainer}>
         <Heading
           level={4}
-          size='xs'
+          data-size='xs'
         >
           {heading}
         </Heading>
@@ -55,7 +55,7 @@ export function SigningPanel({
             {actionButton}
             {canReject && <RejectButton node={node} />}
           </div>
-          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+          {errorMessage && <ValidationMessage>{errorMessage}</ValidationMessage>}
         </div>
       </div>
     </Panel>
@@ -94,8 +94,8 @@ function RejectButton({ node }: RejectTextProps) {
   });
 
   return (
-    <Modal.Root>
-      <Modal.Trigger asChild>
+    <Dialog.TriggerContext>
+      <Dialog.Trigger asChild>
         <Button
           color='danger'
           variant='secondary'
@@ -103,17 +103,22 @@ function RejectButton({ node }: RejectTextProps) {
         >
           <Lang id={modalTriggerButton} />
         </Button>
-      </Modal.Trigger>
-      <Modal.Dialog ref={modalRef}>
-        <Modal.Header>
-          <Lang id={modalTitle} />
-        </Modal.Header>
-        <Modal.Content>
+      </Dialog.Trigger>
+      <Dialog
+        modal
+        ref={modalRef}
+      >
+        <Dialog.Block>
+          <Heading>
+            <Lang id={modalTitle} />
+          </Heading>
+        </Dialog.Block>
+        <Dialog.Block>
           <Paragraph>
             <Lang id={modalDescription} />
           </Paragraph>
-        </Modal.Content>
-        <Modal.Footer>
+        </Dialog.Block>
+        <Dialog.Block>
           <Button
             color='danger'
             disabled={isAnyProcessing}
@@ -131,8 +136,8 @@ function RejectButton({ node }: RejectTextProps) {
           >
             <Lang id='general.close' />
           </Button>
-        </Modal.Footer>
-      </Modal.Dialog>
-    </Modal.Root>
+        </Dialog.Block>
+      </Dialog>
+    </Dialog.TriggerContext>
   );
 }
diff --git a/src/layout/SigningActions/SigningActionsComponent.tsx b/src/layout/SigningActions/SigningActionsComponent.tsx
index 854e0189ba..ee7b272d0f 100644
--- a/src/layout/SigningActions/SigningActionsComponent.tsx
+++ b/src/layout/SigningActions/SigningActionsComponent.tsx
@@ -50,7 +50,7 @@ export function SigningActionsComponent({ node }: PropsFromGenericComponent<'Sig
         isOnBottom
       >
         <div className={classes.loadingContainer}>
-          <Spinner title={langAsString('signing.loading')} />
+          <Spinner aria-label={langAsString('signing.loading')} />
         </div>
       </Panel>
     );
diff --git a/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx b/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
index adf44d0018..82a2de74fa 100644
--- a/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
+++ b/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
@@ -43,7 +43,7 @@ export function SigningDocumentListComponent({
             title={<Lang id={textResourceBindings?.title} />}
             description={textResourceBindings?.description && <Lang id={textResourceBindings?.description} />}
             helpText={textResourceBindings?.help ? { text: textResourceBindings?.help } : undefined}
-            designSystemLabelProps={{ size: 'lg' }}
+            designSystemLabelProps={{ 'data-size': 'lg' }}
           />
         ) : undefined
       }

From 1921c3d4518df73f276ece013e09caec76b2c578 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 19 May 2025 13:48:00 +0200
Subject: [PATCH 081/170] fix listcomponent group bug

---
 src/layout/List/ListComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index a2855409e3..4531e4b5b8 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -125,7 +125,7 @@ export const ListComponent = ({ node }: IListProps) => {
   if (isMobile) {
     return (
       <ComponentStructureWrapper node={node}>
-        {groupBinding ? (
+        {groupBinding.enabled ? (
           <Fieldset>
             <Fieldset.Legend>
               {description && (

From 7fd5bb58a3746879f1be2e7cfc3b3300990bca82 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 19 May 2025 14:02:09 +0200
Subject: [PATCH 082/170] fix signing loading test

---
 src/layout/SigningActions/SigningActionsComponent.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/SigningActions/SigningActionsComponent.test.tsx b/src/layout/SigningActions/SigningActionsComponent.test.tsx
index 645fb70f92..35ce1e8a17 100644
--- a/src/layout/SigningActions/SigningActionsComponent.test.tsx
+++ b/src/layout/SigningActions/SigningActionsComponent.test.tsx
@@ -153,7 +153,7 @@ describe('SigningActionsComponent', () => {
       />,
     );
 
-    expect(screen.getByText('signing.loading')).toBeInTheDocument();
+    expect(screen.getByLabelText('signing.loading')).toBeInTheDocument();
   });
 
   it('should render ErrorPanel on API error', () => {

From f30877b0929031b212b21b7f12fcd7277de7078b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 19 May 2025 14:24:22 +0200
Subject: [PATCH 083/170] update input char countdown test

---
 test/e2e/integration/frontend-test/components.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index e9e9ed4170..f5c413ba4e 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -581,11 +581,11 @@ describe('UI Components', () => {
       });
 
       cy.goto('changename');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('Per');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 3} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 3} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('r');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 4} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 4} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('rrr');
       cy.get('#form-content-newFirstName').contains(`Du har overskredet maks antall tegn med ${7 - maxLength}`);
 

From 958134be9c611bc4890394694b2e77a813de318f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 20 May 2025 13:54:04 +0200
Subject: [PATCH 084/170] start updating component-lib multiselect test

---
 .../component-library/multiple-select.ts      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index 4bb28627d4..674cbe8cae 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -47,7 +47,7 @@ describe('Multiple select component', () => {
     cy.gotoNavPage('Flervalg');
 
     const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
+    const multiselectList = 'u-datalist[role="listbox"]';
     const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
     //const summary1 = '[data-componentid=ListPage-Summary-Component2]';
 
@@ -72,11 +72,21 @@ describe('Multiple select component', () => {
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
     //Check that checkboxes is correct
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', {
+      name: `${checkboxText1}, Press to remove, 1 of 3`,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: `${checkboxText2}, Press to remove, 2 of 3`,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: `${checkboxText3}, Press to remove, 3 of 3`,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: `${checkboxText4}, Press to remove, 4 of 5`,
+    }).should('not.exist');
+    cy.findByRole('button', {
+      name: `${checkboxText5}, Press to remove, 5 of 5`,
+    }).should('not.exist');
 
     //Clicking on the repeating group to close the popover from the multiselect
     cy.get(repGroup).click({ force: true });
@@ -126,7 +136,7 @@ describe('Multiple select component', () => {
     cy.gotoNavPage('Flervalg');
 
     const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
+    const multiselectList = 'u-datalist[role="listbox"]';
     const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
 
     const checkboxText1 = 'Karoline';

From 0d3a7f7027c048198064ccf21d0c8897dddbd108 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 20 May 2025 14:09:22 +0200
Subject: [PATCH 085/170] multiselect cypress test wip

---
 .../component-library/multiple-select.ts      | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index f5ca2a615f..d6f57f1120 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -7,7 +7,6 @@ describe('Multiple select component', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    // Define the text for the last three checkboxes
     const checkboxText = 'Korte strekninger med bykjøring, eller annen moro';
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
@@ -35,7 +34,7 @@ describe('Multiple select component', () => {
     cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).should('exist');
     cy.findByRole('button', { name: /Kjøre til hytta på fjellet, Press to remove, 3 of 3/i }).should('exist');
 
-    // the clickable element is a psuedo-element within the button
+    // The clickable element is a psuedo-element within the button
     cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).click('right', { force: true });
 
     cy.findByRole('button', {
@@ -51,9 +50,8 @@ describe('Multiple select component', () => {
     const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
     const multiselectList = 'u-datalist[role="listbox"]';
     const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-    //const summary1 = '[data-componentid=ListPage-Summary-Component2]';
 
-    // Define the text for the last three checkboxes
+    // Define the text for the multiple select options
     const checkboxText1 = 'Karoline';
     const checkboxText2 = 'Kåre';
     const checkboxText3 = 'Johanne';
@@ -62,18 +60,18 @@ describe('Multiple select component', () => {
 
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
     cy.get(multiselectList).contains('span', checkboxText3).click();
     cy.get(multiselectList).contains('span', checkboxText4).click();
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
-    //Uncheck
+    // Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
-    //Check that checkboxes is correct
+    // Check that multiple select is correct
     cy.findByRole('button', {
       name: `${checkboxText1}, Press to remove, 1 of 3`,
     }).should('exist');
@@ -90,10 +88,10 @@ describe('Multiple select component', () => {
       name: `${checkboxText5}, Press to remove, 5 of 5`,
     }).should('not.exist');
 
-    //Clicking on the repeating group to close the popover from the multiselect
+    // Clicking on the repeating group to close the popover from the multiselect
     cy.get(repGroup).click({ force: true });
 
-    //Validate that the corresponding options in checkboxes is avaliable in repeating group
+    // Validate that the corresponding options in multiple select is avaliable in repeating group
     cy.get(repGroup).findByRole('cell', { name: checkboxText1 }).should('exist');
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).should('exist');
     cy.get(repGroup).findByRole('cell', { name: checkboxText3 }).should('exist');
@@ -108,7 +106,7 @@ describe('Multiple select component', () => {
       .click();
     cy.get(multiselect).contains('span', checkboxText1).should('not.exist');
 
-    // Unchecking from Checkboxes should remove from RepeatingGroup (observe that data is preserved)
+    // Unchecking from multiple select should remove from RepeatingGroup (observe that data is preserved)
     cy.get(multiselect).contains('span', checkboxText2).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 row
     cy.get(repGroup)
@@ -150,18 +148,18 @@ describe('Multiple select component', () => {
 
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
     cy.get(multiselectList).contains('span', checkboxText3).click();
     cy.get(multiselectList).contains('span', checkboxText4).click();
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
-    //Uncheck
+    // Unselect
     cy.get(multiselectList).contains('span', checkboxText4).click();
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
-    //Check that checkboxes is correct
+    // Check that multiple select is correct
     cy.get(multiselect).contains('span', checkboxText1).should('exist');
     cy.get(multiselect).contains('span', checkboxText2).should('exist');
     cy.get(multiselect).contains('span', checkboxText3).should('exist');

From 4c97b98ac2bb88cf78ffacc8825b83beea0862d5 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 12:18:10 +0200
Subject: [PATCH 086/170] fix multiple-select tests

---
 .../component-library/multiple-select.ts      | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index d6f57f1120..079d511dea 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -73,23 +73,23 @@ describe('Multiple select component', () => {
 
     // Check that multiple select is correct
     cy.findByRole('button', {
-      name: `${checkboxText1}, Press to remove, 1 of 3`,
+      name: /Karoline, Press to remove, 1 of 3/i,
     }).should('exist');
     cy.findByRole('button', {
-      name: `${checkboxText2}, Press to remove, 2 of 3`,
+      name: /Kåre, Press to remove, 2 of 3/i,
     }).should('exist');
     cy.findByRole('button', {
-      name: `${checkboxText3}, Press to remove, 3 of 3`,
+      name: /Johanne, Press to remove, 3 of 3/i,
     }).should('exist');
     cy.findByRole('button', {
-      name: `${checkboxText4}, Press to remove, 4 of 5`,
+      name: /Kari, Press to remove, 4 of 5/i,
     }).should('not.exist');
     cy.findByRole('button', {
-      name: `${checkboxText5}, Press to remove, 5 of 5`,
+      name: /Petter, Press to remove, 5 of 5/i,
     }).should('not.exist');
 
-    // Clicking on the repeating group to close the popover from the multiselect
-    cy.get(repGroup).click({ force: true });
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     // Validate that the corresponding options in multiple select is avaliable in repeating group
     cy.get(repGroup).findByRole('cell', { name: checkboxText1 }).should('exist');
@@ -104,7 +104,9 @@ describe('Multiple select component', () => {
       .findAllByRole('button', { name: /^Slett/ })
       .first()
       .click();
-    cy.get(multiselect).contains('span', checkboxText1).should('not.exist');
+    cy.findByRole('button', {
+      name: /Karoline, Press to remove, 1 of 3/i,
+    }).should('not.exist');
 
     // Unchecking from multiple select should remove from RepeatingGroup (observe that data is preserved)
     cy.get(multiselect).contains('span', checkboxText2).should('exist');
@@ -132,7 +134,7 @@ describe('Multiple select component', () => {
     cy.get(repGroup).findAllByRole('cell', { name: '20' }).should('not.exist');
   });
 
-  it('Renders the summary2 component with correct text for MultipleSelext with group and soft deletion', () => {
+  it('Renders the summary2 component with correct text for MultipleSelect with group and soft deletion', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
@@ -156,21 +158,35 @@ describe('Multiple select component', () => {
     cy.get(multiselectList).contains('span', checkboxText5).click();
 
     // Unselect
-    cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselectList).contains('span', checkboxText5).click();
+    cy.findByRole('button', {
+      name: /Kari, Press to remove, 4 of 5/i,
+    }).click('right', { force: true });
+    cy.findByRole('button', {
+      name: /Petter, Press to remove, 4 of 4/i,
+    }).click('right', { force: true });
 
     // Check that multiple select is correct
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', {
+      name: /Karoline, Press to remove, 1 of 3/i,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: /Kåre, Press to remove, 2 of 3/i,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: /Johanne, Press to remove, 3 of 3/i,
+    }).should('exist');
+    cy.findByRole('button', {
+      name: /Kari, Press to remove, 4 of 5/i,
+    }).should('not.exist');
+    cy.findByRole('button', {
+      name: /Petter, Press to remove, 4 of 4/i,
+    }).should('not.exist');
 
     const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 });

From c515a952325252dff8656d89dca3f6fa96c49dc9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 12:44:03 +0200
Subject: [PATCH 087/170] clean up comments

---
 .../OrganisationLookup/OrganisationLookupComponent.tsx       | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
index 04573d0b0f..17c71c489c 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
@@ -45,7 +45,6 @@ export type OrganisationLookupResponse =
   | { success: true; organisationDetails: Organisation };
 
 async function fetchOrg(orgNr: string): Promise<{ org: Organisation; error: null } | { org: null; error: string }> {
-  console.log('fetchOrg', orgNr);
   if (!orgNr) {
     throw new Error('orgNr is required');
   }
@@ -89,12 +88,10 @@ export function OrganisationLookupComponent({
 
   function handleValidateOrgnr(orgNr: string) {
     if (!validateOrgnr({ orgNr })) {
-      console.log('handleValidateOrgnr', orgNr);
       const errors = validateOrgnr.errors
         ?.filter((error) => error.instancePath === '/orgNr')
         .map((error) => error.message)
         .filter((it) => it != null);
-      console.log('errors', errors);
       setOrgNrErrors(errors);
       return false;
     }
@@ -124,8 +121,6 @@ export function OrganisationLookupComponent({
 
   const hasSuccessfullyFetched = !!organisation_lookup_orgnr;
 
-  console.log(data);
-
   const isValid =
     (orgNrErrors?.length && orgNrErrors?.length > 0) ||
     hasValidationErrors(bindingValidations?.organisation_lookup_orgnr);

From b41ea0671962c3ecab68c2b2f40ea93bded71bd9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 12:50:09 +0200
Subject: [PATCH 088/170] update lockfile

---
 yarn.lock | 3397 +++++++++++++++++------------------------------------
 1 file changed, 1099 insertions(+), 2298 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c2750179f8..81084b354d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6,9 +6,9 @@ __metadata:
   cacheKey: 10c0
 
 "@adobe/css-tools@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "@adobe/css-tools@npm:4.4.0"
-  checksum: 10c0/d65ddc719389bf469097df80fb16a8af48a973dea4b57565789d70ac8e7ab4987e6dc0095da3ed5dc16c1b6f8960214a7590312eeda8abd543d91fd0f59e6c94
+  version: 4.4.2
+  resolution: "@adobe/css-tools@npm:4.4.2"
+  checksum: 10c0/19433666ad18536b0ed05d4b53fbb3dd6ede266996796462023ec77a90b484890ad28a3e528cdf3ab8a65cb2fcdff5d8feb04db6bc6eed6ca307c40974239c94
   languageName: node
   linkType: hard
 
@@ -29,30 +29,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@asamuzakjp/css-color@npm:^2.8.2":
-  version: 2.8.3
-  resolution: "@asamuzakjp/css-color@npm:2.8.3"
+"@asamuzakjp/css-color@npm:^3.1.2":
+  version: 3.1.7
+  resolution: "@asamuzakjp/css-color@npm:3.1.7"
   dependencies:
-    "@csstools/css-calc": "npm:^2.1.1"
-    "@csstools/css-color-parser": "npm:^3.0.7"
+    "@csstools/css-calc": "npm:^2.1.3"
+    "@csstools/css-color-parser": "npm:^3.0.9"
     "@csstools/css-parser-algorithms": "npm:^3.0.4"
     "@csstools/css-tokenizer": "npm:^3.0.3"
     lru-cache: "npm:^10.4.3"
-  checksum: 10c0/e108c92ee5de6d8510c9aaca8375c0aeab730dc9b6d4bd287aea2a0379cfbaa09f0814dcacb3e2ddc5c79d7deedf3f82ec8d1ce0effd4a8fac8415b1fe553798
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/code-frame@npm:7.25.7"
-  dependencies:
-    "@babel/highlight": "npm:^7.25.7"
-    picocolors: "npm:^1.0.0"
-  checksum: 10c0/14825c298bdec914caf3d24d1383b6d4cd6b030714686004992f4fc251831ecf432236652896f99d5d341f17170ae9a07b58d8d7b15aa0df8cfa1c5a7d5474bc
+  checksum: 10c0/ac70af38c9b9d972941fe9dbed5221118077bc8f217617edbd534d9c7c281fd2c4023d0f0daa349d57b895cb73430d67d509b722226294bad2910a81d9439e91
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.27.1":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/code-frame@npm:7.27.1"
   dependencies:
@@ -63,21 +53,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.7":
-  version: 7.25.8
-  resolution: "@babel/compat-data@npm:7.25.8"
-  checksum: 10c0/8b81c17580e5fb4cbb6a3c52079f8c283fc59c0c6bd2fe14cfcf9c44b32d2eaab71b02c5633e2c679f5896f73f8ac4036ba2e67a4c806e8f428e4b11f526d7f4
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/compat-data@npm:7.27.1"
+  checksum: 10c0/03e3a01b6772858dc5064f332ad4dc16fbbc0353f2180fd663a2651e8305058e35b6db57114e345d925def9b73cd7a322e95a45913428b8db705a098fd3dd289
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.27.1, @babel/compat-data@npm:^7.27.2":
+"@babel/compat-data@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/compat-data@npm:7.27.2"
   checksum: 10c0/077c9e01af3b90decee384a6a44dcf353898e980cee22ec7941f9074655dbbe97ec317345536cdc7ef7391521e1497930c522a3816af473076dd524be7fccd32
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.27.1":
+"@babel/core@npm:7.27.1, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.19.6, @babel/core@npm:^7.23.9":
   version: 7.27.1
   resolution: "@babel/core@npm:7.27.1"
   dependencies:
@@ -100,42 +90,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.19.6, @babel/core@npm:^7.23.9":
-  version: 7.25.8
-  resolution: "@babel/core@npm:7.25.8"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.25.7"
-    "@babel/generator": "npm:^7.25.7"
-    "@babel/helper-compilation-targets": "npm:^7.25.7"
-    "@babel/helper-module-transforms": "npm:^7.25.7"
-    "@babel/helpers": "npm:^7.25.7"
-    "@babel/parser": "npm:^7.25.8"
-    "@babel/template": "npm:^7.25.7"
-    "@babel/traverse": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.8"
-    convert-source-map: "npm:^2.0.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.3"
-    semver: "npm:^6.3.1"
-  checksum: 10c0/8411ea506e6f7c8a39ab5c1524b00589fa3b087edb47389708f7fe07170929192171734666e3ea10b95a951643a531a6d09eedfe071572c9ea28516646265086
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/generator@npm:7.25.7"
-  dependencies:
-    "@babel/types": "npm:^7.25.7"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^3.0.2"
-  checksum: 10c0/c03a26c79864d60d04ce36b649c3fa0d6fd7b2bf6a22e22854a0457aa09206508392dd73ee40e7bc8d50b3602f9ff068afa47770cda091d332e7db1ca382ee96
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.27.1":
+"@babel/generator@npm:^7.27.1, @babel/generator@npm:^7.7.2":
   version: 7.27.1
   resolution: "@babel/generator@npm:7.27.1"
   dependencies:
@@ -148,27 +103,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.7.2":
-  version: 7.25.0
-  resolution: "@babel/generator@npm:7.25.0"
-  dependencies:
-    "@babel/types": "npm:^7.25.0"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^2.5.1"
-  checksum: 10c0/d0e2dfcdc8bdbb5dded34b705ceebf2e0bc1b06795a1530e64fb6a3ccf313c189db7f60c1616effae48114e1a25adc75855bc4496f3779a396b3377bae718ce7
-  languageName: node
-  linkType: hard
-
-"@babel/helper-annotate-as-pure@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-annotate-as-pure@npm:7.25.7"
-  dependencies:
-    "@babel/types": "npm:^7.25.7"
-  checksum: 10c0/2f020b0fa9d336b5778485cc2de3141561ec436a7591b685457a5bcdae4ce41d9ddee68169c95504e0789e5a4327e73b8b7e72e5b60e82e96d730c4d19255248
-  languageName: node
-  linkType: hard
-
 "@babel/helper-annotate-as-pure@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-annotate-as-pure@npm:7.27.1"
@@ -178,20 +112,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-compilation-targets@npm:7.25.7"
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-compilation-targets@npm:7.27.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.25.7"
-    "@babel/helper-validator-option": "npm:^7.25.7"
+    "@babel/compat-data": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
     browserslist: "npm:^4.24.0"
     lru-cache: "npm:^5.1.1"
     semver: "npm:^6.3.1"
-  checksum: 10c0/705be7e5274a3fdade68e3e2cf42e2b600316ab52794e13b91299a16f16c926f15886b6e9d6df20eb943ccc1cdba5a363d4766f8d01e47b8e6f4e01175f5e66c
+  checksum: 10c0/1cfd3760a1bf1e367ea4a91214c041be7076197ba7a4f3c0710cab00fb5734eb010a2946efe6ecfb1ca9dc63e6c69644a1afa399db4082f374b9311e129f6f0b
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
+"@babel/helper-compilation-targets@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/helper-compilation-targets@npm:7.27.2"
   dependencies:
@@ -221,20 +155,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6":
-  version: 7.25.7
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.25.7"
-  dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.7"
-    regexpu-core: "npm:^6.1.1"
-    semver: "npm:^6.3.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10c0/75919fd5a67cd7be8497b56f7b9ed6b4843cb401956ba8d403aa9ae5b005bc28e35c7f27e704d820edbd1154394ed7a7984d4719916795d89d716f6980fe8bd4
-  languageName: node
-  linkType: hard
-
-"@babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
   dependencies:
@@ -247,24 +168,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
-  dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.6"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    debug: "npm:^4.1.1"
-    lodash.debounce: "npm:^4.0.8"
-    resolve: "npm:^1.14.2"
-  peerDependencies:
-    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/f777fe0ee1e467fdaaac059c39ed203bdc94ef2465fb873316e9e1acfc511a276263724b061e3b0af2f6d7ad3ff174f2bb368fde236a860e0f650fda43d7e022
-  languageName: node
-  linkType: hard
-
-"@babel/helper-define-polyfill-provider@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.3"
+"@babel/helper-define-polyfill-provider@npm:^0.6.3, @babel/helper-define-polyfill-provider@npm:^0.6.4":
+  version: 0.6.4
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.4"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -273,7 +179,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/4320e3527645e98b6a0d5626fef815680e3b2b03ec36045de5e909b0f01546ab3674e96f50bf3bc8413f8c9037e5ee1a5f560ebdf8210426dad1c2c03c96184a
+  checksum: 10c0/b74f2b46e233a178618d19432bdae16e0137d0a603497ee901155e083c4a61f26fe01d79fb95d5f4c22131ade9d958d8f587088d412cca1302633587f070919d
   languageName: node
   linkType: hard
 
@@ -287,16 +193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-module-imports@npm:7.25.7"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.7"
-  checksum: 10c0/0fd0c3673835e5bf75558e184bcadc47c1f6dd2fe2016d53ebe1e5a6ae931a44e093015c2f9a6651c1a89f25c76d9246710c2b0b460b95ee069c464f2837fa2c
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-imports@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-imports@npm:7.27.1"
@@ -307,20 +203,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-module-transforms@npm:7.25.7"
-  dependencies:
-    "@babel/helper-module-imports": "npm:^7.25.7"
-    "@babel/helper-simple-access": "npm:^7.25.7"
-    "@babel/helper-validator-identifier": "npm:^7.25.7"
-    "@babel/traverse": "npm:^7.25.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10c0/f37fa7d1d4df21690535b278468cbd5faf0133a3080f282000cfa4f3ffc9462a1458f866b04b6a2f2d1eec4691236cba9a867da61270dab3ab19846e62f05090
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-transforms@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-transforms@npm:7.27.1"
@@ -343,21 +225,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0":
-  version: 7.24.8
-  resolution: "@babel/helper-plugin-utils@npm:7.24.8"
-  checksum: 10c0/0376037f94a3bfe6b820a39f81220ac04f243eaee7193774b983e956c1750883ff236b30785795abbcda43fac3ece74750566830c2daa4d6e3870bb0dff34c2d
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-plugin-utils@npm:7.25.7"
-  checksum: 10c0/241f8cf3c5b7700e91cab7cfe5b432a3c710ae3cd5bb96dc554da536a6d25f5b9f000cc0c0917501ceb4f76ba92599ee3beb25e10adaf96be59f8df89a842faf
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.27.1":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.27.1, @babel/helper-plugin-utils@npm:^7.8.0":
   version: 7.27.1
   resolution: "@babel/helper-plugin-utils@npm:7.27.1"
   checksum: 10c0/94cf22c81a0c11a09b197b41ab488d416ff62254ce13c57e62912c85700dc2e99e555225787a4099ff6bae7a1812d622c80fbaeda824b79baa10a6c5ac4cf69b
@@ -390,16 +258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-simple-access@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-simple-access@npm:7.25.7"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.7"
-  checksum: 10c0/eed1b499bfb4f613c18debd61517e3de77b6da2727ca025aa05ac81599e0269f1dddb5237db04e8bb598115d015874752e0a7f11ff38672d74a4976097417059
-  languageName: node
-  linkType: hard
-
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.27.1"
@@ -410,20 +268,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.8":
-  version: 7.24.8
-  resolution: "@babel/helper-string-parser@npm:7.24.8"
-  checksum: 10c0/6361f72076c17fabf305e252bf6d580106429014b3ab3c1f5c4eb3e6d465536ea6b670cc0e9a637a77a9ad40454d3e41361a2909e70e305116a23d68ce094c08
-  languageName: node
-  linkType: hard
-
-"@babel/helper-string-parser@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-string-parser@npm:7.25.7"
-  checksum: 10c0/73ef2ceb81f8294678a0afe8ab0103729c0370cac2e830e0d5128b03be5f6a2635838af31d391d763e3c5a4460ed96f42fd7c9b552130670d525be665913bc4c
-  languageName: node
-  linkType: hard
-
 "@babel/helper-string-parser@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-string-parser@npm:7.27.1"
@@ -431,20 +275,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
-  checksum: 10c0/87ad608694c9477814093ed5b5c080c2e06d44cb1924ae8320474a74415241223cc2a725eea2640dd783ff1e3390e5f95eede978bc540e870053152e58f1d651
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-identifier@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-validator-identifier@npm:7.25.7"
-  checksum: 10c0/07438e5bf01ab2882a15027fdf39ac3b0ba1b251774a5130917907014684e2f70fef8fd620137ca062c4c4eedc388508d2ea7a3a7d9936a32785f4fe116c68c0
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-identifier@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-identifier@npm:7.27.1"
@@ -452,13 +282,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helper-validator-option@npm:7.25.7"
-  checksum: 10c0/12ed418c8e3ed9ed44c8c80d823f4e42d399b5eb2e423adccb975e31a31a008cd3b5d8eab688b31f740caff4a1bb28fe06ea2fa7d635aee34cc0ad6995d50f0a
-  languageName: node
-  linkType: hard
-
 "@babel/helper-validator-option@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-option@npm:7.27.1"
@@ -477,16 +300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/helpers@npm:7.25.7"
-  dependencies:
-    "@babel/template": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.7"
-  checksum: 10c0/3b3ae9e373bd785414195ef8f59976a69d5a6ebe0ef2165fdcc5165e5c3ee09e0fcee94bb457df2ddb8c0532e4146d0a9b7a96b3497399a4bff4ffe196b30228
-  languageName: node
-  linkType: hard
-
 "@babel/helpers@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helpers@npm:7.27.1"
@@ -497,37 +310,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/highlight@npm:7.25.7"
-  dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.25.7"
-    chalk: "npm:^2.4.2"
-    js-tokens: "npm:^4.0.0"
-    picocolors: "npm:^1.0.0"
-  checksum: 10c0/1f5894fdb0a0af6101fb2822369b2eeeae32cbeae2ef73ff73fc6a0a4a20471565cd9cfa589f54ed69df66adeca7c57266031ca9134b7bd244d023a488d419aa
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.7, @babel/parser@npm:^7.25.8":
-  version: 7.25.8
-  resolution: "@babel/parser@npm:7.25.8"
-  dependencies:
-    "@babel/types": "npm:^7.25.8"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/a1a13845b7e8dda4c970791814a4bbf60004969882f18f470e260ad822d2e1f8941948f851e9335895563610f240fa6c98481ce8019865e469502bbf21daafa4
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.27.1, @babel/parser@npm:^7.27.2":
-  version: 7.27.2
-  resolution: "@babel/parser@npm:7.27.2"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/parser@npm:7.27.1"
   dependencies:
     "@babel/types": "npm:^7.27.1"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/3c06692768885c2f58207fc8c2cbdb4a44df46b7d93135a083f6eaa49310f7ced490ce76043a2a7606cdcc13f27e3d835e141b692f2f6337a2e7f43c1dbb04b4
+  checksum: 10c0/ae4a5eda3ada3fd54c9942d9f14385df7a18e71b386cf2652505bb9a40a32250dfde3bdda71fb08af00b1e154f0a6213e6cdaaa88e9941229ec0003f7fead759
   languageName: node
   linkType: hard
 
@@ -654,18 +444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.24.7":
-  version: 7.25.7
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.25.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/fe00cdb96fd289ab126830a98e1dcf5ab7b529a6ef1c01a72506b5e7b1197d6e46c3c4d029cd90d1d61eb9a15ef77c282d156d0c02c7e32f168bb09d84150db4
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-import-attributes@npm:^7.27.1":
+"@babel/plugin-syntax-import-attributes@npm:^7.24.7, @babel/plugin-syntax-import-attributes@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.27.1"
   dependencies:
@@ -698,7 +477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.27.1":
+"@babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
   dependencies:
@@ -709,17 +488,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.7.2":
-  version: 7.25.7
-  resolution: "@babel/plugin-syntax-jsx@npm:7.25.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/17db499c31fcfaa94d5408726d943955d51d478353d1e2dd84eda6024f7e3d104b9456a77f8aabfae0db7f4dc32f810d08357112f7fcbe305e7c9fcf5b3cac13
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -809,13 +577,13 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-syntax-typescript@npm:^7.7.2":
-  version: 7.25.7
-  resolution: "@babel/plugin-syntax-typescript@npm:7.25.7"
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.7"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/ed51fd81a5cf571a89fc4cf4c0e3b0b91285c367237374c133d2e5e718f3963cfa61b81997df39220a8837dc99f9e9a8ab7701d259c09fae379e4843d9db60c2
+  checksum: 10c0/11589b4c89c66ef02d57bf56c6246267851ec0c361f58929327dc3e070b0dab644be625bbe7fb4c4df30c3634bfdfe31244e1f517be397d2def1487dbbe3c37d
   languageName: node
   linkType: hard
 
@@ -1610,56 +1378,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.27.1":
+"@babel/runtime@npm:7.27.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6":
   version: 7.27.1
   resolution: "@babel/runtime@npm:7.27.1"
   checksum: 10c0/530a7332f86ac5a7442250456823a930906911d895c0b743bf1852efc88a20a016ed4cd26d442d0ca40ae6d5448111e02a08dd638a4f1064b47d080e2875dc05
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6":
-  version: 7.26.0
-  resolution: "@babel/runtime@npm:7.26.0"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.25.7, @babel/template@npm:^7.3.3":
-  version: 7.25.7
-  resolution: "@babel/template@npm:7.25.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.25.7"
-    "@babel/parser": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.7"
-  checksum: 10c0/8ae9e36e4330ee83d4832531d1d9bec7dc2ef6a2a8afa1ef1229506fd60667abcb17f306d1c3d7e582251270597022990c845d5d69e7add70a5aea66720decb9
-  languageName: node
-  linkType: hard
-
-"@babel/template@npm:^7.27.1":
-  version: 7.27.2
-  resolution: "@babel/template@npm:7.27.2"
+"@babel/template@npm:^7.27.1, @babel/template@npm:^7.3.3":
+  version: 7.27.1
+  resolution: "@babel/template@npm:7.27.1"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
-    "@babel/parser": "npm:^7.27.2"
+    "@babel/parser": "npm:^7.27.1"
     "@babel/types": "npm:^7.27.1"
-  checksum: 10c0/ed9e9022651e463cc5f2cc21942f0e74544f1754d231add6348ff1b472985a3b3502041c0be62dc99ed2d12cfae0c51394bf827452b98a2f8769c03b87aadc81
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.25.7":
-  version: 7.25.7
-  resolution: "@babel/traverse@npm:7.25.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.25.7"
-    "@babel/generator": "npm:^7.25.7"
-    "@babel/parser": "npm:^7.25.7"
-    "@babel/template": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.7"
-    debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10c0/75d73e52c507a7a7a4c7971d6bf4f8f26fdd094e0d3a0193d77edf6a5efa36fc3db91ec5cc48e8b94e6eb5d5ad21af0a1040e71309172851209415fd105efb1a
+  checksum: 10c0/155a8e056e82f1f1e2413b7bf9d96890e371d617c7f77f25621fb0ddb32128958d86bc5c3356f00be266e9f8c121d886de5b4143dbb72eac362377f53aba72a2
   languageName: node
   linkType: hard
 
@@ -1678,29 +1411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.7, @babel/types@npm:^7.25.8, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.25.8
-  resolution: "@babel/types@npm:7.25.8"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.25.7"
-    "@babel/helper-validator-identifier": "npm:^7.25.7"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10c0/55ca2d6df6426c98db2769ce884ce5e9de83a512ea2dd7bcf56c811984dc14351cacf42932a723630c5afcff2455809323decd645820762182f10b7b5252b59f
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.25.0":
-  version: 7.25.2
-  resolution: "@babel/types@npm:7.25.2"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.24.8"
-    "@babel/helper-validator-identifier": "npm:^7.24.7"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10c0/e489435856be239f8cc1120c90a197e4c2865385121908e5edb7223cfdff3768cba18f489adfe0c26955d9e7bbb1fb10625bc2517505908ceb0af848989bd864
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.27.1":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.27.1, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.27.1
   resolution: "@babel/types@npm:7.27.1"
   dependencies:
@@ -1740,33 +1451,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/color-helpers@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "@csstools/color-helpers@npm:5.0.1"
-  checksum: 10c0/77fa3b7236eaa3f36dea24708ac0d5e53168903624ac5aed54615752a0730cd20773fda50e742ce868012eca8c000cc39688e05869e79f34714230ab6968d1e6
+"@csstools/color-helpers@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@csstools/color-helpers@npm:5.0.2"
+  checksum: 10c0/bebaddb28b9eb58b0449edd5d0c0318fa88f3cb079602ee27e88c9118070d666dcc4e09a5aa936aba2fde6ba419922ade07b7b506af97dd7051abd08dfb2959b
   languageName: node
   linkType: hard
 
-"@csstools/css-calc@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "@csstools/css-calc@npm:2.1.1"
+"@csstools/css-calc@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@csstools/css-calc@npm:2.1.3"
   peerDependencies:
     "@csstools/css-parser-algorithms": ^3.0.4
     "@csstools/css-tokenizer": ^3.0.3
-  checksum: 10c0/857c8dac40eb6ba8810408dad141bbcad060b28bce69dfd3bcf095a060fcaa23d5c4dbf52be88fcb57e12ce32c666e855dc68de1d8020851f6b432e3f9b29950
+  checksum: 10c0/85f5b4f96d60f395d5f0108056b0ddee037b22d6deba448d74324b50f1c554de284f84715ebfac7b2888b78e09d20d02a7cd213ee7bdaa71011ea9b4eee3a251
   languageName: node
   linkType: hard
 
-"@csstools/css-color-parser@npm:^3.0.7":
-  version: 3.0.7
-  resolution: "@csstools/css-color-parser@npm:3.0.7"
+"@csstools/css-color-parser@npm:^3.0.9":
+  version: 3.0.9
+  resolution: "@csstools/css-color-parser@npm:3.0.9"
   dependencies:
-    "@csstools/color-helpers": "npm:^5.0.1"
-    "@csstools/css-calc": "npm:^2.1.1"
+    "@csstools/color-helpers": "npm:^5.0.2"
+    "@csstools/css-calc": "npm:^2.1.3"
   peerDependencies:
     "@csstools/css-parser-algorithms": ^3.0.4
     "@csstools/css-tokenizer": ^3.0.3
-  checksum: 10c0/b81780e6c50f0b0605776bd39bbd6203780231a561601853a9835cc70788560e7a281d0fbfe47ebe8affcb07dd64b0b1dcd4b67552520cfbe0e5088df158f12c
+  checksum: 10c0/acc026a6bd6d8c4c641fa5f9b4d77cd5dfa54c57c3278ae52329d96b5837723428dcb93c34db4062bbea2f45a98451119df06eaf39fd196aaf6368c59d799f20
   languageName: node
   linkType: hard
 
@@ -1870,206 +1581,199 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/aix-ppc64@npm:0.25.0"
+"@esbuild/aix-ppc64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/aix-ppc64@npm:0.25.3"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/android-arm64@npm:0.25.0"
+"@esbuild/android-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/android-arm64@npm:0.25.3"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/android-arm@npm:0.25.0"
+"@esbuild/android-arm@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/android-arm@npm:0.25.3"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/android-x64@npm:0.25.0"
+"@esbuild/android-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/android-x64@npm:0.25.3"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/darwin-arm64@npm:0.25.0"
+"@esbuild/darwin-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/darwin-arm64@npm:0.25.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/darwin-x64@npm:0.25.0"
+"@esbuild/darwin-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/darwin-x64@npm:0.25.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/freebsd-arm64@npm:0.25.0"
+"@esbuild/freebsd-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.3"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/freebsd-x64@npm:0.25.0"
+"@esbuild/freebsd-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/freebsd-x64@npm:0.25.3"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-arm64@npm:0.25.0"
+"@esbuild/linux-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-arm64@npm:0.25.3"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-arm@npm:0.25.0"
+"@esbuild/linux-arm@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-arm@npm:0.25.3"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-ia32@npm:0.25.0"
+"@esbuild/linux-ia32@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-ia32@npm:0.25.3"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-loong64@npm:0.25.0"
+"@esbuild/linux-loong64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-loong64@npm:0.25.3"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-mips64el@npm:0.25.0"
+"@esbuild/linux-mips64el@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-mips64el@npm:0.25.3"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-ppc64@npm:0.25.0"
+"@esbuild/linux-ppc64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-ppc64@npm:0.25.3"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-riscv64@npm:0.25.0"
+"@esbuild/linux-riscv64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-riscv64@npm:0.25.3"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-s390x@npm:0.25.0"
+"@esbuild/linux-s390x@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-s390x@npm:0.25.3"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/linux-x64@npm:0.25.0"
+"@esbuild/linux-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/linux-x64@npm:0.25.3"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/netbsd-arm64@npm:0.25.0"
+"@esbuild/netbsd-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.3"
   conditions: os=netbsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/netbsd-x64@npm:0.25.0"
+"@esbuild/netbsd-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/netbsd-x64@npm:0.25.3"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/openbsd-arm64@npm:0.25.0"
+"@esbuild/openbsd-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.3"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/openbsd-x64@npm:0.25.0"
+"@esbuild/openbsd-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/openbsd-x64@npm:0.25.3"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/sunos-x64@npm:0.25.0"
+"@esbuild/sunos-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/sunos-x64@npm:0.25.3"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/win32-arm64@npm:0.25.0"
+"@esbuild/win32-arm64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/win32-arm64@npm:0.25.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/win32-ia32@npm:0.25.0"
+"@esbuild/win32-ia32@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/win32-ia32@npm:0.25.3"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.25.0":
-  version: 0.25.0
-  resolution: "@esbuild/win32-x64@npm:0.25.0"
+"@esbuild/win32-x64@npm:0.25.3":
+  version: 0.25.3
+  resolution: "@esbuild/win32-x64@npm:0.25.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
+  version: 4.7.0
+  resolution: "@eslint-community/eslint-utils@npm:4.7.0"
   dependencies:
-    eslint-visitor-keys: "npm:^3.3.0"
+    eslint-visitor-keys: "npm:^3.4.3"
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-  checksum: 10c0/7e559c4ce59cd3a06b1b5a517b593912e680a7f981ae7affab0d01d709e99cd5647019be8fafa38c350305bc32f1f7d42c7073edde2ab536c745e365f37b607e
+  checksum: 10c0/c0f4f2bd73b7b7a9de74b716a664873d08ab71ab439e51befe77d61915af41a81ecec93b408778b3a7856185244c34c2c8ee28912072ec14def84ba2dec70adf
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:4.12.1, @eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/regexpp@npm:4.12.1, @eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1, @eslint-community/regexpp@npm:^4.8.0":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
   checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.8.0":
-  version: 4.11.0
-  resolution: "@eslint-community/regexpp@npm:4.11.0"
-  checksum: 10c0/0f6328869b2741e2794da4ad80beac55cba7de2d3b44f796a60955b0586212ec75e6b0253291fd4aad2100ad471d1480d8895f2b54f1605439ba4c875e05e523
-  languageName: node
-  linkType: hard
-
 "@eslint/compat@npm:1.2.9":
   version: 1.2.9
   resolution: "@eslint/compat@npm:1.2.9"
@@ -2094,9 +1798,9 @@ __metadata:
   linkType: hard
 
 "@eslint/config-helpers@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "@eslint/config-helpers@npm:0.2.1"
-  checksum: 10c0/3e829a78b0bb4f7c44384ba1df3986e5de24b7f440ad5c6bb3cfc366ded773a869ca9ee8d212b5a563ae94596c5940dea6fd2ea1ee53a84c6241ac953dcb8bb7
+  version: 0.2.2
+  resolution: "@eslint/config-helpers@npm:0.2.2"
+  checksum: 10c0/98f7cefe484bb754674585d9e73cf1414a3ab4fd0783c385465288d13eb1a8d8e7d7b0611259fc52b76b396c11a13517be5036d1f48eeb877f6f0a6b9c4f03ad
   languageName: node
   linkType: hard
 
@@ -2157,32 +1861,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.6.0":
-  version: 1.6.8
-  resolution: "@floating-ui/core@npm:1.6.8"
-  dependencies:
-    "@floating-ui/utils": "npm:^0.2.8"
-  checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9
-  languageName: node
-  linkType: hard
-
-"@floating-ui/dom@npm:^1.0.0":
-  version: 1.6.11
-  resolution: "@floating-ui/dom@npm:1.6.11"
+"@floating-ui/core@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "@floating-ui/core@npm:1.7.0"
   dependencies:
-    "@floating-ui/core": "npm:^1.6.0"
-    "@floating-ui/utils": "npm:^0.2.8"
-  checksum: 10c0/02ef34a75a515543c772880338eea7b66724997bd5ec7cd58d26b50325709d46d480a306b84e7d5509d734434411a4bcf23af5680c2e461e6e6a8bf45d751df8
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/f7e66a650ad8c73765edb39a7530d81fa990c08c172f03b6129030234d32bccd4401c29ded9c8a4e4135e9beac349c5608d94962fa08c2a2ae2dab7a6530550c
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.6.13":
-  version: 1.6.13
-  resolution: "@floating-ui/dom@npm:1.6.13"
+"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.6.13":
+  version: 1.7.0
+  resolution: "@floating-ui/dom@npm:1.7.0"
   dependencies:
-    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/core": "npm:^1.7.0"
     "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+  checksum: 10c0/49a7f0fbef82ba2c2f0bde7bb4812b276ae431b59e6a81427283a55cfb36c0af9cc459cbeb0bb1a5cc3efca1a332f584e123e7b1a8f0a9c94a21989b09b8c060
   languageName: node
   linkType: hard
 
@@ -2219,13 +1913,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.8":
-  version: 0.2.8
-  resolution: "@floating-ui/utils@npm:0.2.8"
-  checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
-  languageName: node
-  linkType: hard
-
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -2278,6 +1965,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@isaacs/fs-minipass@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "@isaacs/fs-minipass@npm:4.0.1"
+  dependencies:
+    minipass: "npm:^7.0.4"
+  checksum: 10c0/c25b6dc1598790d5b55c0947a9b7d111cfa92594db5296c3b907e2f533c033666f692a3939eadac17b1c7c40d362d0b0635dc874cbfe3e70db7c2b07cc97a5d2
+  languageName: node
+  linkType: hard
+
 "@istanbuljs/load-nyc-config@npm:^1.0.0":
   version: 1.1.0
   resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
@@ -2529,13 +2225,13 @@ __metadata:
   linkType: hard
 
 "@jridgewell/gen-mapping@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  version: 0.3.8
+  resolution: "@jridgewell/gen-mapping@npm:0.3.8"
   dependencies:
     "@jridgewell/set-array": "npm:^1.2.1"
     "@jridgewell/sourcemap-codec": "npm:^1.4.10"
     "@jridgewell/trace-mapping": "npm:^0.3.24"
-  checksum: 10c0/1be4fd4a6b0f41337c4f5fdf4afc3bd19e39c3691924817108b82ffcb9c9e609c273f936932b9fba4b3a298ce2eb06d9bff4eb1cc3bd81c4f4ee1b4917e25feb
+  checksum: 10c0/c668feaf86c501d7c804904a61c23c67447b2137b813b9ce03eca82cb9d65ac7006d766c218685d76e3d72828279b6ee26c347aa1119dab23fbaf36aed51585a
   languageName: node
   linkType: hard
 
@@ -2600,8 +2296,8 @@ __metadata:
   linkType: hard
 
 "@jsonjoy.com/json-pack@npm:^1.0.3":
-  version: 1.1.0
-  resolution: "@jsonjoy.com/json-pack@npm:1.1.0"
+  version: 1.2.0
+  resolution: "@jsonjoy.com/json-pack@npm:1.2.0"
   dependencies:
     "@jsonjoy.com/base64": "npm:^1.1.1"
     "@jsonjoy.com/util": "npm:^1.1.2"
@@ -2609,16 +2305,16 @@ __metadata:
     thingies: "npm:^1.20.0"
   peerDependencies:
     tslib: 2
-  checksum: 10c0/cdf5cb567a7f2e703d4966a3e3a5f7f7b54ee40a2102aa0ede5c79bcf2060c8465d82f39de8583db4cf1d8415bec8e57dfb1156ef663567b846cdea45813d9d1
+  checksum: 10c0/0744cfe2f54d896003ad240f0f069b41a152feb53b6134c5e65961126b9e5fdfc74a46f63b1dfa280e80a3d176c57e06de072bf03d749ec1982e41677a1ce5d5
   languageName: node
   linkType: hard
 
 "@jsonjoy.com/util@npm:^1.1.2, @jsonjoy.com/util@npm:^1.3.0":
-  version: 1.5.0
-  resolution: "@jsonjoy.com/util@npm:1.5.0"
+  version: 1.6.0
+  resolution: "@jsonjoy.com/util@npm:1.6.0"
   peerDependencies:
     tslib: 2
-  checksum: 10c0/0065ae12c4108d8aede01a479c8d2b5a39bce99e9a449d235befc753f57e8385d9c1115720529f26597840b7398d512898155423d9859fd638319fb0c827365d
+  checksum: 10c0/98182d8a5a0f5e04cdf755dacb523ba5e3e6a81e4941cbfeb157f8954c0e90e2e972fc7237c2378995fc3fa9f2b2649d28b197f556da3b5a80e56c6966c559e3
   languageName: node
   linkType: hard
 
@@ -2630,8 +2326,8 @@ __metadata:
   linkType: hard
 
 "@modelcontextprotocol/sdk@npm:^1.8.0":
-  version: 1.11.0
-  resolution: "@modelcontextprotocol/sdk@npm:1.11.0"
+  version: 1.11.1
+  resolution: "@modelcontextprotocol/sdk@npm:1.11.1"
   dependencies:
     content-type: "npm:^1.0.5"
     cors: "npm:^2.8.5"
@@ -2643,14 +2339,21 @@ __metadata:
     raw-body: "npm:^3.0.0"
     zod: "npm:^3.23.8"
     zod-to-json-schema: "npm:^3.24.1"
-  checksum: 10c0/10ce5ebe54b238df614051e0f2ef8f037fee6ceda7a870f5892c84efe21cbdcdb7e932d9be25e91982e0eb40e4c8ed33da9b0b2ca01df6baa76eb0cd5cb89ce6
+  checksum: 10c0/43ae2c8ebcc55a0f050f94fa325dfcb038325fd3b11d7c0ca2bc005d41a007f0039e90632f12ebf316e17d7a002233bc6e62f4d4626bf84edb24bd580c47671f
+  languageName: node
+  linkType: hard
+
+"@navikt/aksel-icons@npm:^7.17.4":
+  version: 7.21.0
+  resolution: "@navikt/aksel-icons@npm:7.21.0"
+  checksum: 10c0/33a9b4e4769e3ae2c13fbb62ff8097fd1c6f55297a4d456b2e462826b0072b83909f54496825c9ad8a049ab67008efccfbb385230d5d71115b92e2312fe0d10c
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.17.4, @navikt/aksel-icons@npm:^7.18.0":
-  version: 7.21.1
-  resolution: "@navikt/aksel-icons@npm:7.21.1"
-  checksum: 10c0/a9df7b13d8f5c4569547935215ccc9a2300b185c21e1f8abc4bc4c2f8389d6ddd9a76d675c9769920d6c74c5e3a04c6eb316195177cc42d7eae3d4d37994758c
+"@navikt/aksel-icons@npm:^7.18.0":
+  version: 7.22.0
+  resolution: "@navikt/aksel-icons@npm:7.22.0"
+  checksum: 10c0/a644ad2a3920729d7bbbfcd6a309fba7121063a78d1dc485efb3d385e6987ab68d3e61554dfcab6f026227d219a09ba473d500ea989e8bbb7752507964455540
   languageName: node
   linkType: hard
 
@@ -2681,25 +2384,169 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.2
-  resolution: "@npmcli/agent@npm:2.2.2"
+"@npmcli/agent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@npmcli/agent@npm:3.0.0"
   dependencies:
     agent-base: "npm:^7.1.0"
     http-proxy-agent: "npm:^7.0.0"
     https-proxy-agent: "npm:^7.0.1"
     lru-cache: "npm:^10.0.1"
     socks-proxy-agent: "npm:^8.0.3"
-  checksum: 10c0/325e0db7b287d4154ecd164c0815c08007abfb07653cc57bceded17bb7fd240998a3cbdbe87d700e30bef494885eccc725ab73b668020811d56623d145b524ae
+  checksum: 10c0/efe37b982f30740ee77696a80c196912c274ecd2cb243bc6ae7053a50c733ce0f6c09fda085145f33ecf453be19654acca74b69e81eaad4c90f00ccffe2f9271
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "@npmcli/fs@npm:3.1.1"
+"@npmcli/fs@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@npmcli/fs@npm:4.0.0"
   dependencies:
     semver: "npm:^7.3.5"
-  checksum: 10c0/c37a5b4842bfdece3d14dfdb054f73fe15ed2d3da61b34ff76629fb5b1731647c49166fd2a8bf8b56fcfa51200382385ea8909a3cbecdad612310c114d3f6c99
+  checksum: 10c0/c90935d5ce670c87b6b14fab04a965a3b8137e585f8b2a6257263bd7f97756dd736cb165bb470e5156a9e718ecd99413dccc54b1138c1a46d6ec7cf325982fe5
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-android-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-x64@npm:2.5.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-freebsd-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-arm64@npm:2.5.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-ia32@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-ia32@npm:2.5.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-x64@npm:2.5.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher@npm:^2.4.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher@npm:2.5.1"
+  dependencies:
+    "@parcel/watcher-android-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-x64": "npm:2.5.1"
+    "@parcel/watcher-freebsd-x64": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-musl": "npm:2.5.1"
+    "@parcel/watcher-win32-arm64": "npm:2.5.1"
+    "@parcel/watcher-win32-ia32": "npm:2.5.1"
+    "@parcel/watcher-win32-x64": "npm:2.5.1"
+    detect-libc: "npm:^1.0.3"
+    is-glob: "npm:^4.0.3"
+    micromatch: "npm:^4.0.5"
+    node-addon-api: "npm:^7.0.0"
+    node-gyp: "npm:latest"
+  dependenciesMeta:
+    "@parcel/watcher-android-arm64":
+      optional: true
+    "@parcel/watcher-darwin-arm64":
+      optional: true
+    "@parcel/watcher-darwin-x64":
+      optional: true
+    "@parcel/watcher-freebsd-x64":
+      optional: true
+    "@parcel/watcher-linux-arm-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm-musl":
+      optional: true
+    "@parcel/watcher-linux-arm64-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm64-musl":
+      optional: true
+    "@parcel/watcher-linux-x64-glibc":
+      optional: true
+    "@parcel/watcher-linux-x64-musl":
+      optional: true
+    "@parcel/watcher-win32-arm64":
+      optional: true
+    "@parcel/watcher-win32-ia32":
+      optional: true
+    "@parcel/watcher-win32-x64":
+      optional: true
+  checksum: 10c0/8f35073d0c0b34a63d4c8d2213482f0ebc6a25de7b2cdd415d19cb929964a793cb285b68d1d50bfb732b070b3c82a2fdb4eb9c250eab709a1cd9d63345455a82
   languageName: node
   linkType: hard
 
@@ -2922,10 +2769,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pkgr/core@npm:^0.2.1":
-  version: 0.2.2
-  resolution: "@pkgr/core@npm:0.2.2"
-  checksum: 10c0/86a0507731f2c5172e2225abb42d947b3908d06f0330e7050b5e6ad0c29dab4d586358f2d984aa00fd32bf421ed3405fa97878b352f16c3c23d20398b5fd14e4
+"@pkgr/core@npm:^0.2.3":
+  version: 0.2.4
+  resolution: "@pkgr/core@npm:0.2.4"
+  checksum: 10c0/2528a443bbbef5d4686614e1d73f834f19ccbc975f62b2a64974a6b97bcdf677b9c5e8948e04808ac4f0d853e2f422adfaae2a06e9e9f4f5cf8af76f1adf8dc1
   languageName: node
   linkType: hard
 
@@ -2966,9 +2813,9 @@ __metadata:
   linkType: hard
 
 "@polka/url@npm:^1.0.0-next.24":
-  version: 1.0.0-next.28
-  resolution: "@polka/url@npm:1.0.0-next.28"
-  checksum: 10c0/acc5ea62597e4da2fb42dbee02749d07f102ae7d6d2c966bf7e423c79cd65d1621da305af567e6e7c232f3b565e242d1ec932cbb3dcc0db1508d02e9a2cafa2e
+  version: 1.0.0-next.29
+  resolution: "@polka/url@npm:1.0.0-next.29"
+  checksum: 10c0/0d58e081844095cb029d3c19a659bfefd09d5d51a2f791bc61eba7ea826f13d6ee204a8a448c2f5a855c17df07b37517373ff916dd05801063c0568ae9937684
   languageName: node
   linkType: hard
 
@@ -2986,8 +2833,8 @@ __metadata:
   linkType: hard
 
 "@radix-ui/react-slot@npm:^1.1.2":
-  version: 1.2.0
-  resolution: "@radix-ui/react-slot@npm:1.2.0"
+  version: 1.2.3
+  resolution: "@radix-ui/react-slot@npm:1.2.3"
   dependencies:
     "@radix-ui/react-compose-refs": "npm:1.1.2"
   peerDependencies:
@@ -2996,7 +2843,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/f1455f36479e87a0a2254fc2e2b2aba6740d1fbcada949071210bf2a009a031ad508ac01b544bce96337bcca82f49531b46c71615141a5985aaa11ae69b967b1
+  checksum: 10c0/5913aa0d760f505905779515e4b1f0f71a422350f077cc8d26d1aafe53c97f177fec0e6d7fbbb50d8b5e498aa9df9f707ca75ae3801540c283b26b0136138eef
   languageName: node
   linkType: hard
 
@@ -3258,21 +3105,21 @@ __metadata:
   linkType: hard
 
 "@tanstack/react-virtual@npm:^3.13.6":
-  version: 3.13.6
-  resolution: "@tanstack/react-virtual@npm:3.13.6"
+  version: 3.13.9
+  resolution: "@tanstack/react-virtual@npm:3.13.9"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.13.6"
+    "@tanstack/virtual-core": "npm:3.13.9"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/3d2fdf024cb9189981cc015518a34a771a57cd698ca775022ad481431e6f26e596309f57d2238ef15f3b53b805879edaed6394e4cad1bb550ee92259e4d52633
+  checksum: 10c0/aa05fb24e30686516e74ccdec94a83d195615a4f29bc866a53ee6b0107e466c6d6e3e947b3fb0613b907b0f982d74b00367868cf6b1ac956562d0e7c24d6764b
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.13.6":
-  version: 3.13.6
-  resolution: "@tanstack/virtual-core@npm:3.13.6"
-  checksum: 10c0/9c40af4deccf0fadc5c371f4e659f1aff221db0ede9664ee7cf3642a2d05f6f1c9494605f3606f70d7c8948dc22e50c48519a8435d0e845f1b1f34c9353722c8
+"@tanstack/virtual-core@npm:3.13.9":
+  version: 3.13.9
+  resolution: "@tanstack/virtual-core@npm:3.13.9"
+  checksum: 10c0/6e9526a9d52f8ddc54af8a1dc7380814b10ab38d8a4265e362a5b69c3132097ace51496d4206fe8aa90e33129aaf1a177c93d7ed018b5564b78e057fc9cdb48d
   languageName: node
   linkType: hard
 
@@ -3411,11 +3258,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__generator@npm:*":
-  version: 7.6.8
-  resolution: "@types/babel__generator@npm:7.6.8"
+  version: 7.27.0
+  resolution: "@types/babel__generator@npm:7.27.0"
   dependencies:
     "@babel/types": "npm:^7.0.0"
-  checksum: 10c0/f0ba105e7d2296bf367d6e055bb22996886c114261e2cb70bf9359556d0076c7a57239d019dee42bb063f565bade5ccb46009bce2044b2952d964bf9a454d6d2
+  checksum: 10c0/9f9e959a8792df208a9d048092fda7e1858bddc95c6314857a8211a99e20e6830bdeb572e3587ae8be5429e37f2a96fcf222a9f53ad232f5537764c9e13a2bbd
   languageName: node
   linkType: hard
 
@@ -3430,11 +3277,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
-  version: 7.20.6
-  resolution: "@types/babel__traverse@npm:7.20.6"
+  version: 7.20.7
+  resolution: "@types/babel__traverse@npm:7.20.7"
   dependencies:
     "@babel/types": "npm:^7.20.7"
-  checksum: 10c0/7ba7db61a53e28cac955aa99af280d2600f15a8c056619c05b6fc911cbe02c61aa4f2823299221b23ce0cce00b294c0e5f618ec772aa3f247523c2e48cf7b888
+  checksum: 10c0/5386f0af44f8746b063b87418f06129a814e16bb2686965a575e9d7376b360b088b89177778d8c426012abc43dd1a2d8ec3218bfc382280c898682746ce2ffbd
   languageName: node
   linkType: hard
 
@@ -3504,21 +3351,21 @@ __metadata:
   linkType: hard
 
 "@types/estree@npm:*, @types/estree@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@types/estree@npm:1.0.6"
-  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
+  version: 1.0.7
+  resolution: "@types/estree@npm:1.0.7"
+  checksum: 10c0/be815254316882f7c40847336cd484c3bc1c3e34f710d197160d455dc9d6d050ffbf4c3bc76585dba86f737f020ab20bdb137ebe0e9116b0c86c7c0342221b8c
   languageName: node
   linkType: hard
 
-"@types/express-serve-static-core@npm:*":
-  version: 5.0.0
-  resolution: "@types/express-serve-static-core@npm:5.0.0"
+"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^5.0.0":
+  version: 5.0.6
+  resolution: "@types/express-serve-static-core@npm:5.0.6"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
     "@types/send": "npm:*"
-  checksum: 10c0/671a67a5b367e19aa634dcd515364212490f10efb938fc1097082085a883ccb11c81ec96a3c2b5cc67d5756e5cb1ccbf1de192806f8193bb7de341994beb4ea6
+  checksum: 10c0/aced8cc88c1718adbbd1fc488756b0f22d763368d9eff2ae21b350698fab4a77d8d13c3699056dc662a887e43a8b67a3e8f6289ff76102ecc6bad4a7710d31a6
   languageName: node
   linkType: hard
 
@@ -3534,7 +3381,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express@npm:*, @types/express@npm:^4.17.21":
+"@types/express@npm:*":
+  version: 5.0.1
+  resolution: "@types/express@npm:5.0.1"
+  dependencies:
+    "@types/body-parser": "npm:*"
+    "@types/express-serve-static-core": "npm:^5.0.0"
+    "@types/serve-static": "npm:*"
+  checksum: 10c0/e1385028c7251360ce916aab0e304187b613ca18cb9aa3fa90794a337e5b2e0c76330d467f41d3b3e936ce5336c4f3e63e323dc01192cf20f9686905daa6d00a
+  languageName: node
+  linkType: hard
+
+"@types/express@npm:^4.17.21":
   version: 4.17.21
   resolution: "@types/express@npm:4.17.21"
   dependencies:
@@ -3547,9 +3405,9 @@ __metadata:
   linkType: hard
 
 "@types/geojson@npm:*, @types/geojson@npm:^7946.0.0 || ^1.0.0":
-  version: 7946.0.14
-  resolution: "@types/geojson@npm:7946.0.14"
-  checksum: 10c0/54f3997708fa2970c03eeb31f7e4540a0eb6387b15e9f8a60513a1409c23cafec8d618525404573468b59c6fecbfd053724b3327f7fca416729c26271d799f55
+  version: 7946.0.16
+  resolution: "@types/geojson@npm:7946.0.16"
+  checksum: 10c0/1ff24a288bd5860b766b073ead337d31d73bdc715e5b50a2cee5cb0af57a1ed02cc04ef295f5fa68dc40fe3e4f104dd31282b2b818a5ba3231bc1001ba084e3c
   languageName: node
   linkType: hard
 
@@ -3584,11 +3442,11 @@ __metadata:
   linkType: hard
 
 "@types/http-proxy@npm:^1.17.8":
-  version: 1.17.15
-  resolution: "@types/http-proxy@npm:1.17.15"
+  version: 1.17.16
+  resolution: "@types/http-proxy@npm:1.17.16"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10c0/e2bf2fcdf23c88141b8d2c85ed5e5418b62ef78285884a2b5a717af55f4d9062136aa475489d10292093343df58fb81975f34bebd6b9df322288fd9821cbee07
+  checksum: 10c0/b71bbb7233b17604f1158bbbe33ebf8bb870179d2b6e15dc9483aa2a785ce0d19ffb6c2237225b558addf24211d1853c95e337ee496df058eb175b433418a941
   languageName: node
   linkType: hard
 
@@ -3711,16 +3569,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*":
-  version: 22.10.1
-  resolution: "@types/node@npm:22.10.1"
-  dependencies:
-    undici-types: "npm:~6.20.0"
-  checksum: 10c0/0fbb6d29fa35d807f0223a4db709c598ac08d66820240a2cd6a8a69b8f0bc921d65b339d850a666b43b4e779f967e6ed6cf6f0fca3575e08241e6b900364c234
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:22.15.3":
+"@types/node@npm:*, @types/node@npm:22.15.3":
   version: 22.15.3
   resolution: "@types/node@npm:22.15.3"
   dependencies:
@@ -3755,16 +3604,16 @@ __metadata:
   linkType: hard
 
 "@types/prop-types@npm:*":
-  version: 15.7.13
-  resolution: "@types/prop-types@npm:15.7.13"
-  checksum: 10c0/1b20fc67281902c6743379960247bc161f3f0406ffc0df8e7058745a85ea1538612109db0406290512947f9632fe9e10e7337bf0ce6338a91d6c948df16a7c61
+  version: 15.7.14
+  resolution: "@types/prop-types@npm:15.7.14"
+  checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
   languageName: node
   linkType: hard
 
 "@types/qs@npm:*":
-  version: 6.9.16
-  resolution: "@types/qs@npm:6.9.16"
-  checksum: 10c0/a4e871b80fff623755e356fd1f225aea45ff7a29da30f99fddee1a05f4f5f33485b314ab5758145144ed45708f97e44595aa9a8368e9bbc083932f931b12dbb6
+  version: 6.9.18
+  resolution: "@types/qs@npm:6.9.18"
+  checksum: 10c0/790b9091348e06dde2c8e4118b5771ab386a8c22a952139a2eb0675360a2070d0b155663bf6f75b23f258fd0a1f7ffc0ba0f059d99a719332c03c40d9e9cd63b
   languageName: node
   linkType: hard
 
@@ -3806,12 +3655,11 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:*":
-  version: 18.3.11
-  resolution: "@types/react@npm:18.3.11"
+  version: 19.1.2
+  resolution: "@types/react@npm:19.1.2"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/ce80512246ca5bda69db85b9f4f1835189334acfb6b2c4f3eda8cabff1ff1a3ea9ce4f3b895bdbc18c94140aa45592331aa3fdeb557f525c1b048de7ce84fc0e
+  checksum: 10c0/76ffe71395c713d4adc3c759465012d3c956db00af35ab7c6d0d91bd07b274b7ce69caa0478c0760311587bd1e38c78ffc9688ebc629f2b266682a19d8750947
   languageName: node
   linkType: hard
 
@@ -3879,9 +3727,9 @@ __metadata:
   linkType: hard
 
 "@types/sizzle@npm:^2.3.2":
-  version: 2.3.8
-  resolution: "@types/sizzle@npm:2.3.8"
-  checksum: 10c0/ab5460147ae6680cc20c2223a8f17d9f7c97144b70f00a222a1c32d68b5207696d48177ab9784dda88c74d93ed5a78dd31f74d271b15382520b423c81b4aac89
+  version: 2.3.9
+  resolution: "@types/sizzle@npm:2.3.9"
+  checksum: 10c0/db0277ff62e8ebe6cdae2020fd045fd7fd19f29a3a2ce13c555b14fb00e105e79004883732118b9f2e8b943cb302645e9eddb4e7bdeef1a171da679cd4c32b72
   languageName: node
   linkType: hard
 
@@ -3923,11 +3771,11 @@ __metadata:
   linkType: hard
 
 "@types/ws@npm:^8.5.10":
-  version: 8.5.12
-  resolution: "@types/ws@npm:8.5.12"
+  version: 8.18.1
+  resolution: "@types/ws@npm:8.18.1"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10c0/3fd77c9e4e05c24ce42bfc7647f7506b08c40a40fe2aea236ef6d4e96fc7cb4006a81ed1b28ec9c457e177a74a72924f4768b7b4652680b42dfd52bc380e15f9
+  checksum: 10c0/61aff1129143fcc4312f083bc9e9e168aa3026b7dd6e70796276dcfb2c8211c4292603f9c4864fae702f2ed86e4abd4d38aa421831c2fd7f856c931a481afbab
   languageName: node
   linkType: hard
 
@@ -3993,17 +3841,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.17.0, @typescript-eslint/scope-manager@npm:^8.15.0":
-  version: 8.17.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.17.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:8.17.0"
-    "@typescript-eslint/visitor-keys": "npm:8.17.0"
-  checksum: 10c0/0c08d14240bad4b3f6874f08ba80b29db1a6657437089a6f109db458c544d835bcdc06ba9140bb4f835233ba4326d9a86e6cf6bdb5209960d2f7025aa3191f4f
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/scope-manager@npm:8.31.1":
+"@typescript-eslint/scope-manager@npm:8.31.1, @typescript-eslint/scope-manager@npm:^8.15.0":
   version: 8.31.1
   resolution: "@typescript-eslint/scope-manager@npm:8.31.1"
   dependencies:
@@ -4028,13 +3866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.17.0":
-  version: 8.17.0
-  resolution: "@typescript-eslint/types@npm:8.17.0"
-  checksum: 10c0/26b1bf9dfc3ee783c85c6f354b84c28706d5689d777f3ff2de2cb496e45f9d0189c0d561c03ccbc8b24712438be17cf63dd0871ff3ca2083e7f48749770d1893
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:8.31.1":
   version: 8.31.1
   resolution: "@typescript-eslint/types@npm:8.31.1"
@@ -4042,25 +3873,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.17.0":
-  version: 8.17.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.17.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:8.17.0"
-    "@typescript-eslint/visitor-keys": "npm:8.17.0"
-    debug: "npm:^4.3.4"
-    fast-glob: "npm:^3.3.2"
-    is-glob: "npm:^4.0.3"
-    minimatch: "npm:^9.0.4"
-    semver: "npm:^7.6.0"
-    ts-api-utils: "npm:^1.3.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/523013f9b5cf2c58c566868e4c3b0b9ac1b4807223a6d64e2a7c58e01e53b6587ba61f1a8241eade361f3f426d6057657515473176141ef8aebb352bc0d223ce
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:8.31.1":
   version: 8.31.1
   resolution: "@typescript-eslint/typescript-estree@npm:8.31.1"
@@ -4079,7 +3891,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.31.1":
+"@typescript-eslint/utils@npm:8.31.1, @typescript-eslint/utils@npm:^8.15.0":
   version: 8.31.1
   resolution: "@typescript-eslint/utils@npm:8.31.1"
   dependencies:
@@ -4094,33 +3906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^8.15.0":
-  version: 8.17.0
-  resolution: "@typescript-eslint/utils@npm:8.17.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:8.17.0"
-    "@typescript-eslint/types": "npm:8.17.0"
-    "@typescript-eslint/typescript-estree": "npm:8.17.0"
-  peerDependencies:
-    eslint: ^8.57.0 || ^9.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/a9785ae5f7e7b51d521dc3f48b15093948e4fcd03352c0b60f39bae366cbc935947d215f91e2ae3182d52fa6affb5ccbb50feff487bd1209011f3e0da02cdf07
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/visitor-keys@npm:8.17.0":
-  version: 8.17.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.17.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:8.17.0"
-    eslint-visitor-keys: "npm:^4.2.0"
-  checksum: 10c0/9144c4e4a63034fb2031a0ee1fc77e80594f30cab3faafa9a1f7f83782695774dd32fac8986f260698b4e150b4dd52444f2611c07e4c101501f08353eb47c82c
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:8.31.1":
   version: 8.31.1
   resolution: "@typescript-eslint/visitor-keys@npm:8.31.1"
@@ -4357,10 +4142,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "abbrev@npm:2.0.0"
-  checksum: 10c0/f742a5a107473946f426c691c08daba61a1d15942616f300b5d32fd735be88fef5cba24201757b6c407fd564555fb48c751cfa33519b2605c8a7aadd22baf372
+"abbrev@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "abbrev@npm:3.0.1"
+  checksum: 10c0/21ba8f574ea57a3106d6d35623f2c4a9111d9ee3e9a5be47baed46ec2457d2eac46e07a5c4a60186f88cb98abbe3e24f2d4cca70bc2b12f1692523e2209a9ccf
   languageName: node
   linkType: hard
 
@@ -4374,7 +4159,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
+"accepts@npm:~1.3.4, accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -4412,21 +4197,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.12.0, acorn@npm:^8.4.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2":
-  version: 8.12.1
-  resolution: "acorn@npm:8.12.1"
-  bin:
-    acorn: bin/acorn
-  checksum: 10c0/51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.14.0":
-  version: 8.14.0
-  resolution: "acorn@npm:8.14.0"
+"acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.4.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2":
+  version: 8.14.1
+  resolution: "acorn@npm:8.14.1"
   bin:
     acorn: bin/acorn
-  checksum: 10c0/6d4ee461a7734b2f48836ee0fbb752903606e576cc100eb49340295129ca0b452f3ba91ddd4424a1d4406a98adfb2ebb6bd0ff4c49d7a0930c10e462719bbfd7
+  checksum: 10c0/dbd36c1ed1d2fa3550140000371fcf721578095b18777b85a79df231ca093b08edc6858d75d6e48c73e431c174dcf9214edbd7e6fa5911b93bd8abfa54e47123
   languageName: node
   linkType: hard
 
@@ -4439,16 +4215,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0, agent-base@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "agent-base@npm:7.1.1"
-  dependencies:
-    debug: "npm:^4.3.4"
-  checksum: 10c0/e59ce7bed9c63bf071a30cc471f2933862044c97fd9958967bfe22521d7a0f601ce4ed5a8c011799d0c726ca70312142ae193bbebb60f576b52be19d4a363b50
-  languageName: node
-  linkType: hard
-
-"agent-base@npm:^7.1.2":
+"agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
   version: 7.1.3
   resolution: "agent-base@npm:7.1.3"
   checksum: 10c0/6192b580c5b1d8fb399b9c62bf8343d76654c2dd62afcb9a52b2cf44a8b6ace1e3b704d3fe3547d91555c857d3df02603341ff2cb961b9cfe2b12f9f3c38ee11
@@ -4586,7 +4353,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-colors@npm:^4.1.1, ansi-colors@npm:^4.1.3":
+"ansi-colors@npm:^4.1.1":
   version: 4.1.3
   resolution: "ansi-colors@npm:4.1.3"
   checksum: 10c0/ec87a2f59902f74e61eada7f6e6fe20094a628dab765cfdbd03c3477599368768cffccdb5d3bb19a1b6c99126783a143b1fee31aab729b31ffe5836c7e5e28b9
@@ -4634,15 +4401,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "ansi-styles@npm:3.2.1"
-  dependencies:
-    color-convert: "npm:^1.9.0"
-  checksum: 10c0/ece5a8ef069fcc5298f67e3f4771a663129abd174ea2dfa87923a2be2abf6cd367ef72ac87942da00ce85bd1d651d4cd8595aebdb1b385889b89b205860e977b
-  languageName: node
-  linkType: hard
-
 "ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
   version: 4.3.0
   resolution: "ansi-styles@npm:4.3.0"
@@ -4870,17 +4628,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "array-buffer-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    is-array-buffer: "npm:^3.0.4"
-  checksum: 10c0/f5cdf54527cd18a3d2852ddf73df79efec03829e7373a8322ef5df2b4ef546fb365c19c71d6b42d641cb6bfe0f1a2f19bc0ece5b533295f86d7c3d522f228917
-  languageName: node
-  linkType: hard
-
-"array-buffer-byte-length@npm:^1.0.2":
+"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-buffer-byte-length@npm:1.0.2"
   dependencies:
@@ -4926,44 +4674,33 @@ __metadata:
   linkType: hard
 
 "array.prototype.findlastindex@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "array.prototype.findlastindex@npm:1.2.5"
+  version: 1.2.6
+  resolution: "array.prototype.findlastindex@npm:1.2.6"
   dependencies:
-    call-bind: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
     define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
+    es-abstract: "npm:^1.23.9"
     es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    es-shim-unscopables: "npm:^1.0.2"
-  checksum: 10c0/962189487728b034f3134802b421b5f39e42ee2356d13b42d2ddb0e52057ffdcc170b9524867f4f0611a6f638f4c19b31e14606e8bcbda67799e26685b195aa3
+    es-object-atoms: "npm:^1.1.1"
+    es-shim-unscopables: "npm:^1.1.0"
+  checksum: 10c0/82559310d2e57ec5f8fc53d7df420e3abf0ba497935de0a5570586035478ba7d07618cb18e2d4ada2da514c8fb98a034aaf5c06caa0a57e2f7f4c4adedef5956
   languageName: node
   linkType: hard
 
 "array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "array.prototype.flat@npm:1.3.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    es-shim-unscopables: "npm:^1.0.0"
-  checksum: 10c0/a578ed836a786efbb6c2db0899ae80781b476200617f65a44846cb1ed8bd8b24c8821b83703375d8af639c689497b7b07277060024b9919db94ac3e10dc8a49b
-  languageName: node
-  linkType: hard
-
-"array.prototype.flatmap@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "array.prototype.flatmap@npm:1.3.2"
+  version: 1.3.3
+  resolution: "array.prototype.flat@npm:1.3.3"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    es-shim-unscopables: "npm:^1.0.0"
-  checksum: 10c0/67b3f1d602bb73713265145853128b1ad77cc0f9b833c7e1e056b323fbeac41a4ff1c9c99c7b9445903caea924d9ca2450578d9011913191aa88cc3c3a4b54f4
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/d90e04dfbc43bb96b3d2248576753d1fb2298d2d972e29ca7ad5ec621f0d9e16ff8074dae647eac4f31f4fb7d3f561a7ac005fb01a71f51705a13b5af06a7d8a
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.3.3":
+"array.prototype.flatmap@npm:^1.3.2, array.prototype.flatmap@npm:^1.3.3":
   version: 1.3.3
   resolution: "array.prototype.flatmap@npm:1.3.3"
   dependencies:
@@ -4988,22 +4725,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arraybuffer.prototype.slice@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "arraybuffer.prototype.slice@npm:1.0.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.1"
-    call-bind: "npm:^1.0.5"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.22.3"
-    es-errors: "npm:^1.2.1"
-    get-intrinsic: "npm:^1.2.3"
-    is-array-buffer: "npm:^3.0.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-  checksum: 10c0/d32754045bcb2294ade881d45140a5e52bda2321b9e98fa514797b7f0d252c4c5ab0d1edb34112652c62fa6a9398def568da63a4d7544672229afea283358c36
-  languageName: node
-  linkType: hard
-
 "arraybuffer.prototype.slice@npm:^1.0.4":
   version: 1.0.4
   resolution: "arraybuffer.prototype.slice@npm:1.0.4"
@@ -5089,16 +4810,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^2.6.4":
-  version: 2.6.4
-  resolution: "async@npm:2.6.4"
-  dependencies:
-    lodash: "npm:^4.17.14"
-  checksum: 10c0/0ebb3273ef96513389520adc88e0d3c45e523d03653cc9b66f5c46f4239444294899bfd13d2b569e7dbfde7da2235c35cf5fd3ece9524f935d41bbe4efccdad0
+"async-function@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "async-function@npm:1.0.0"
+  checksum: 10c0/669a32c2cb7e45091330c680e92eaeb791bc1d4132d827591e499cd1f776ff5a873e77e5f92d0ce795a8d60f10761dec9ddfe7225a5de680f5d357f67b1aac73
   languageName: node
   linkType: hard
 
-"async@npm:^3.2.0, async@npm:^3.2.3":
+"async@npm:^3.2.0, async@npm:^3.2.3, async@npm:^3.2.6":
   version: 3.2.6
   resolution: "async@npm:3.2.6"
   checksum: 10c0/36484bb15ceddf07078688d95e27076379cc2f87b10c03b6dd8a83e89475a3c8df5848859dd06a4c95af1e4c16fc973de0171a77f18ea00be899aca2a4f85e70
@@ -5149,20 +4868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:4.10.3":
+"axe-core@npm:4.10.3, axe-core@npm:^4.10.0":
   version: 4.10.3
   resolution: "axe-core@npm:4.10.3"
   checksum: 10c0/1b1c24f435b2ffe89d76eca0001cbfff42dbf012ad9bd37398b70b11f0d614281a38a28bc3069e8972e3c90ec929a8937994bd24b0ebcbaab87b8d1e241ab0c7
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.10.0":
-  version: 4.10.0
-  resolution: "axe-core@npm:4.10.0"
-  checksum: 10c0/732c171d48caaace5e784895c4dacb8ca6155e9d98045138ebe3952f78457dd05b92c57d05b41ce2a570aff87dbd0471e8398d2c0f6ebe79617b746c8f658998
-  languageName: node
-  linkType: hard
-
 "axios@npm:1.9.0":
   version: 1.9.0
   resolution: "axios@npm:1.9.0"
@@ -5236,15 +4948,15 @@ __metadata:
   linkType: hard
 
 "babel-plugin-polyfill-corejs2@npm:^0.4.10":
-  version: 0.4.11
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
+  version: 0.4.13
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.13"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.4"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/b2217bc8d5976cf8142453ed44daabf0b2e0e75518f24eac83b54a8892e87a88f1bd9089daa92fd25df979ecd0acfd29b6bc28c4182c1c46344cee15ef9bce84
+  checksum: 10c0/b4a54561606d388e6f9499f39f03171af4be7f9ce2355e737135e40afa7086cf6790fdd706c2e59f488c8fa1f76123d28783708e07ddc84647dca8ed8fb98e06
   languageName: node
   linkType: hard
 
@@ -5261,13 +4973,13 @@ __metadata:
   linkType: hard
 
 "babel-plugin-polyfill-regenerator@npm:^0.6.1":
-  version: 0.6.2
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
+  version: 0.6.4
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.4"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.4"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/bc541037cf7620bc84ddb75a1c0ce3288f90e7d2799c070a53f8a495c8c8ae0316447becb06f958dd25dcce2a2fce855d318ecfa48036a1ddb218d55aa38a744
+  checksum: 10c0/ebaaf9e4e53201c02f496d3f686d815e94177b3e55b35f11223b99c60d197a29f907a2e87bbcccced8b7aff22a807fccc1adaf04722864a8e1862c8845ab830a
   languageName: node
   linkType: hard
 
@@ -5383,16 +5095,16 @@ __metadata:
   linkType: hard
 
 "bn.js@npm:^4.0.0, bn.js@npm:^4.1.0, bn.js@npm:^4.11.9":
-  version: 4.12.0
-  resolution: "bn.js@npm:4.12.0"
-  checksum: 10c0/9736aaa317421b6b3ed038ff3d4491935a01419ac2d83ddcfebc5717385295fcfcf0c57311d90fe49926d0abbd7a9dbefdd8861e6129939177f7e67ebc645b21
+  version: 4.12.2
+  resolution: "bn.js@npm:4.12.2"
+  checksum: 10c0/09a249faa416a9a1ce68b5f5ec8bbca87fe54e5dd4ef8b1cc8a4969147b80035592bddcb1e9cc814c3ba79e573503d5c5178664b722b509fb36d93620dba9b57
   languageName: node
   linkType: hard
 
 "bn.js@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "bn.js@npm:5.2.1"
-  checksum: 10c0/bed3d8bd34ec89dbcf9f20f88bd7d4a49c160fda3b561c7bb227501f974d3e435a48fb9b61bc3de304acab9215a3bda0803f7017ffb4d0016a0c3a740a283caa
+  version: 5.2.2
+  resolution: "bn.js@npm:5.2.2"
+  checksum: 10c0/cb97827d476aab1a0194df33cd84624952480d92da46e6b4a19c32964aa01553a4a613502396712704da2ec8f831cf98d02e74ca03398404bd78a037ba93f2ab
   languageName: node
   linkType: hard
 
@@ -5434,12 +5146,12 @@ __metadata:
   linkType: hard
 
 "bonjour-service@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "bonjour-service@npm:1.2.1"
+  version: 1.3.0
+  resolution: "bonjour-service@npm:1.3.0"
   dependencies:
     fast-deep-equal: "npm:^3.1.3"
     multicast-dns: "npm:^7.2.5"
-  checksum: 10c0/953cbfc27fc9e36e6f988012993ab2244817d82426603e0390d4715639031396c932b6657b1aa4ec30dbb5fa903d6b2c7f1be3af7a8ba24165c93e987c849730
+  checksum: 10c0/5721fd9f9bb968e9cc16c1e8116d770863dd2329cb1f753231de1515870648c225142b7eefa71f14a5c22bc7b37ddd7fdeb018700f28a8c936d50d4162d433c7
   languageName: node
   linkType: hard
 
@@ -5585,31 +5297,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.24.0":
-  version: 4.24.0
-  resolution: "browserslist@npm:4.24.0"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001663"
-    electron-to-chromium: "npm:^1.5.28"
-    node-releases: "npm:^2.0.18"
-    update-browserslist-db: "npm:^1.1.0"
-  bin:
-    browserslist: cli.js
-  checksum: 10c0/95e76ad522753c4c470427f6e3c8a4bb5478ff448841e22b3d3e53f89ecaf17b6984666d6c7e715c370f1e7fa0cf684f42e34e554236a8b2fab38ea76b9e4c52
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.24.3":
-  version: 4.24.4
-  resolution: "browserslist@npm:4.24.4"
+"browserslist@npm:^4.24.0, browserslist@npm:^4.24.4":
+  version: 4.24.5
+  resolution: "browserslist@npm:4.24.5"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001688"
-    electron-to-chromium: "npm:^1.5.73"
+    caniuse-lite: "npm:^1.0.30001716"
+    electron-to-chromium: "npm:^1.5.149"
     node-releases: "npm:^2.0.19"
-    update-browserslist-db: "npm:^1.1.1"
+    update-browserslist-db: "npm:^1.1.3"
   bin:
     browserslist: cli.js
-  checksum: 10c0/db7ebc1733cf471e0b490b4f47e3e2ea2947ce417192c9246644e92c667dd56a71406cc58f62ca7587caf828364892e9952904a02b7aead752bc65b62a37cfe9
+  checksum: 10c0/f4c1ce1a7d8fdfab5e5b88bb6e93d09e8a883c393f86801537a252da0362dbdcde4dbd97b318246c5d84c6607b2f6b47af732c1b000d6a8a881ee024bad29204
   languageName: node
   linkType: hard
 
@@ -5685,13 +5383,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.0.0":
-  version: 3.0.0
-  resolution: "bytes@npm:3.0.0"
-  checksum: 10c0/91d42c38601c76460519ffef88371caacaea483a354c8e4b8808e7b027574436a5713337c003ea3de63ee4991c2a9a637884fdfe7f761760d746929d9e8fec60
-  languageName: node
-  linkType: hard
-
 "bytes@npm:3.1.2, bytes@npm:^3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
@@ -5699,11 +5390,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^18.0.0":
-  version: 18.0.4
-  resolution: "cacache@npm:18.0.4"
+"cacache@npm:^19.0.1":
+  version: 19.0.1
+  resolution: "cacache@npm:19.0.1"
   dependencies:
-    "@npmcli/fs": "npm:^3.1.0"
+    "@npmcli/fs": "npm:^4.0.0"
     fs-minipass: "npm:^3.0.0"
     glob: "npm:^10.2.2"
     lru-cache: "npm:^10.0.1"
@@ -5711,11 +5402,11 @@ __metadata:
     minipass-collect: "npm:^2.0.1"
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
-    p-map: "npm:^4.0.0"
-    ssri: "npm:^10.0.0"
-    tar: "npm:^6.1.11"
-    unique-filename: "npm:^3.0.0"
-  checksum: 10c0/6c055bafed9de4f3dcc64ac3dc7dd24e863210902b7c470eb9ce55a806309b3efff78033e3d8b4f7dcc5d467f2db43c6a2857aaaf26f0094b8a351d44c42179f
+    p-map: "npm:^7.0.2"
+    ssri: "npm:^12.0.0"
+    tar: "npm:^7.4.3"
+    unique-filename: "npm:^4.0.0"
+  checksum: 10c0/01f2134e1bd7d3ab68be851df96c8d63b492b1853b67f2eecb2c37bb682d37cb70bb858a16f2f0554d3c0071be6dfe21456a1ff6fa4b7eed996570d6a25ffe9c
   languageName: node
   linkType: hard
 
@@ -5741,17 +5432,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "call-bind-apply-helpers@npm:1.0.1"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-  checksum: 10c0/acb2ab68bf2718e68a3e895f0d0b73ccc9e45b9b6f210f163512ba76f91dab409eb8792f6dae188356f9095747512a3101646b3dea9d37fb8c7c6bf37796d18c
-  languageName: node
-  linkType: hard
-
-"call-bind-apply-helpers@npm:^1.0.2":
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind-apply-helpers@npm:1.0.2"
   dependencies:
@@ -5761,20 +5442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "call-bind@npm:1.0.7"
-  dependencies:
-    es-define-property: "npm:^1.0.0"
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.4"
-    set-function-length: "npm:^1.2.1"
-  checksum: 10c0/a3ded2e423b8e2a265983dba81c27e125b48eefb2655e7dfab6be597088da3d47c47976c24bc51b8fd9af1061f8f87b4ab78a314f3c77784b2ae2ba535ad8b8d
-  languageName: node
-  linkType: hard
-
-"call-bind@npm:^1.0.8":
+"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.7, call-bind@npm:^1.0.8":
   version: 1.0.8
   resolution: "call-bind@npm:1.0.8"
   dependencies:
@@ -5786,17 +5454,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "call-bound@npm:1.0.3"
-  dependencies:
-    call-bind-apply-helpers: "npm:^1.0.1"
-    get-intrinsic: "npm:^1.2.6"
-  checksum: 10c0/45257b8e7621067304b30dbd638e856cac913d31e8e00a80d6cf172911acd057846572d0b256b45e652d515db6601e2974a1b1a040e91b4fc36fb3dd86fa69cf
-  languageName: node
-  linkType: hard
-
-"call-bound@npm:^1.0.4":
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
   version: 1.0.4
   resolution: "call-bound@npm:1.0.4"
   dependencies:
@@ -5827,27 +5485,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:1.0.30001717":
+"caniuse-lite@npm:1.0.30001717, caniuse-lite@npm:^1.0.30001716":
   version: 1.0.30001717
   resolution: "caniuse-lite@npm:1.0.30001717"
   checksum: 10c0/6c0bb1e5182fd578ebe97ee2203250849754a4e17d985839fab527ad27e125a4c4ffce3ece5505217fedf30ea0bbc17ac9f93e9ac525c0389ccba61c6e8345dc
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001663":
-  version: 1.0.30001684
-  resolution: "caniuse-lite@npm:1.0.30001684"
-  checksum: 10c0/446485ca3d9caf408a339a44636a86a2b119ec247492393ae661cd93dccd6668401dd2dfec1e149be4e44563cd1e23351b44453a52fa2c2f19e2bf3287c865f6
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001688":
-  version: 1.0.30001699
-  resolution: "caniuse-lite@npm:1.0.30001699"
-  checksum: 10c0/e87b3a0602c3124131f6a21f1eb262378e17a2ee3089e3c472ac8b9caa85cf7d6a219655379302c29c6f10a74051f2a712639d7f98ee0444c73fefcbaf25d519
-  languageName: node
-  linkType: hard
-
 "caseless@npm:~0.12.0":
   version: 0.12.0
   resolution: "caseless@npm:0.12.0"
@@ -5870,17 +5514,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "chalk@npm:2.4.2"
-  dependencies:
-    ansi-styles: "npm:^3.2.1"
-    escape-string-regexp: "npm:^1.0.5"
-    supports-color: "npm:^5.3.0"
-  checksum: 10c0/e6543f02ec877732e3a2d1c3c3323ddb4d39fbab687c23f526e25bd4c6a9bf3b83a696e8c769d078e04e5754921648f7821b2a2acfd16c550435fd630026e073
-  languageName: node
-  linkType: hard
-
 "chalk@npm:^3.0.0":
   version: 3.0.0
   resolution: "chalk@npm:3.0.0"
@@ -5950,16 +5583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "chokidar@npm:4.0.1"
-  dependencies:
-    readdirp: "npm:^4.0.1"
-  checksum: 10c0/4bb7a3adc304059810bb6c420c43261a15bb44f610d77c35547addc84faa0374265c3adc67f25d06f363d9a4571962b02679268c40de07676d260de1986efea9
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^4.0.1":
+"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1":
   version: 4.0.3
   resolution: "chokidar@npm:4.0.3"
   dependencies:
@@ -5968,10 +5592,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chownr@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "chownr@npm:2.0.0"
-  checksum: 10c0/594754e1303672171cc04e50f6c398ae16128eb134a88f801bf5354fd96f205320f23536a045d9abd8b51024a149696e51231565891d4efdab8846021ecf88e6
+"chownr@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chownr@npm:3.0.0"
+  checksum: 10c0/43925b87700f7e3893296c8e9c56cc58f926411cce3a6e5898136daaf08f08b9a8eb76d37d3267e707d0dcc17aed2e2ebdf5848c0c3ce95cf910a919935c1b10
   languageName: node
   linkType: hard
 
@@ -6004,19 +5628,19 @@ __metadata:
   linkType: hard
 
 "cipher-base@npm:^1.0.0, cipher-base@npm:^1.0.1, cipher-base@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "cipher-base@npm:1.0.4"
+  version: 1.0.6
+  resolution: "cipher-base@npm:1.0.6"
   dependencies:
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10c0/d8d005f8b64d8a77b3d3ce531301ae7b45902c9cab4ec8b66bdbd2bf2a1d9fceb9a2133c293eb3c060b2d964da0f14c47fb740366081338aa3795dd1faa8984b
+    inherits: "npm:^2.0.4"
+    safe-buffer: "npm:^5.2.1"
+  checksum: 10c0/f73268e0ee6585800875d9748f2a2377ae7c2c3375cba346f75598ac6f6bc3a25dec56e984a168ced1a862529ffffe615363f750c40349039d96bd30fba0fca8
   languageName: node
   linkType: hard
 
 "cjs-module-lexer@npm:^1.0.0":
-  version: 1.4.1
-  resolution: "cjs-module-lexer@npm:1.4.1"
-  checksum: 10c0/5a7d8279629c9ba8ccf38078c2fed75b7737973ced22b9b5a54180efa57fb2fe2bb7bec6aec55e3b8f3f5044f5d7b240347ad9bd285e7c3d0ee5b0a1d0504dfc
+  version: 1.4.3
+  resolution: "cjs-module-lexer@npm:1.4.3"
+  checksum: 10c0/076b3af85adc4d65dbdab1b5b240fe5b45d44fcf0ef9d429044dd94d19be5589376805c44fb2d4b3e684e5fe6a9b7cf3e426476a6507c45283c5fc6ff95240be
   languageName: node
   linkType: hard
 
@@ -6155,15 +5779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-convert@npm:^1.9.0":
-  version: 1.9.3
-  resolution: "color-convert@npm:1.9.3"
-  dependencies:
-    color-name: "npm:1.1.3"
-  checksum: 10c0/5ad3c534949a8c68fca8fbc6f09068f435f0ad290ab8b2f76841b9e6af7e0bb57b98cb05b0e19fe33f5d91e5a8611ad457e5f69e0a484caad1f7487fd0e8253c
-  languageName: node
-  linkType: hard
-
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -6173,13 +5788,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:1.1.3":
-  version: 1.1.3
-  resolution: "color-name@npm:1.1.3"
-  checksum: 10c0/566a3d42cca25b9b3cd5528cd7754b8e89c0eb646b7f214e8e2eaddb69994ac5f0557d9c175eb5d8f0ad73531140d9c47525085ee752a91a2ab15ab459caf6d6
-  languageName: node
-  linkType: hard
-
 "color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
@@ -6245,7 +5853,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compressible@npm:~2.0.16":
+"compressible@npm:~2.0.18":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
   dependencies:
@@ -6255,17 +5863,17 @@ __metadata:
   linkType: hard
 
 "compression@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "compression@npm:1.7.4"
+  version: 1.8.0
+  resolution: "compression@npm:1.8.0"
   dependencies:
-    accepts: "npm:~1.3.5"
-    bytes: "npm:3.0.0"
-    compressible: "npm:~2.0.16"
+    bytes: "npm:3.1.2"
+    compressible: "npm:~2.0.18"
     debug: "npm:2.6.9"
+    negotiator: "npm:~0.6.4"
     on-headers: "npm:~1.0.2"
-    safe-buffer: "npm:5.1.2"
+    safe-buffer: "npm:5.2.1"
     vary: "npm:~1.1.2"
-  checksum: 10c0/138db836202a406d8a14156a5564fb1700632a76b6e7d1546939472895a5304f2b23c80d7a22bf44c767e87a26e070dbc342ea63bb45ee9c863354fa5556bbbc
+  checksum: 10c0/804d3c8430939f4fd88e5128333f311b4035f6425a7f2959d74cfb5c98ef3a3e3e18143208f3f9d0fcae4cd3bcf3d2fbe525e0fcb955e6e146e070936f025a24
   languageName: node
   linkType: hard
 
@@ -6393,18 +6001,18 @@ __metadata:
   linkType: hard
 
 "core-js-compat@npm:^3.40.0":
-  version: 3.40.0
-  resolution: "core-js-compat@npm:3.40.0"
+  version: 3.42.0
+  resolution: "core-js-compat@npm:3.42.0"
   dependencies:
-    browserslist: "npm:^4.24.3"
-  checksum: 10c0/44f6e88726fe266a5be9581a79766800478a8d5c492885f2d4c2a4e2babd9b06bc1689d5340d3a61ae7332f990aff2e83b6203ff8773137a627cfedfbeefabeb
+    browserslist: "npm:^4.24.4"
+  checksum: 10c0/0138ce005c13ce642fc38e18e54a52a1c78ca8315ee6e4faad748d2a1b0ad2462ea615285ad4e6cf77afe48e47a868d898e64c70606c1eb1c9e6a9f19ee2b186
   languageName: node
   linkType: hard
 
 "core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2":
-  version: 3.38.1
-  resolution: "core-js-pure@npm:3.38.1"
-  checksum: 10c0/466adbc0468b8c2a95b9bc49829492dece2cc6584d757c5b38555a26ed3d71f8364ac1ea3128a0a949e004e0e60206cc535ed84320982c3efb9a40c1785ddcc6
+  version: 3.42.0
+  resolution: "core-js-pure@npm:3.42.0"
+  checksum: 10c0/e61b097bc83ec01839e7b04cad2e1d0dd8822275ea5a08a23dc7c907d13d2522aa2b09061cec68f0625fe40abb8b888be3b65a37c817eb53a695cf02c24217bf
   languageName: node
   linkType: hard
 
@@ -6556,18 +6164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.3":
-  version: 7.0.3
-  resolution: "cross-spawn@npm:7.0.3"
-  dependencies:
-    path-key: "npm:^3.1.0"
-    shebang-command: "npm:^2.0.0"
-    which: "npm:^2.0.1"
-  checksum: 10c0/5738c312387081c98d69c98e105b6327b069197f864a60593245d64c8089c8a0a744e16349281210d56835bb9274130d825a78b2ad6853ca13cfbeffc0c31750
-  languageName: node
-  linkType: hard
-
-"cross-spawn@npm:^7.0.6":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -6578,7 +6175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"crypto-browserify@npm:^3.11.0":
+"crypto-browserify@npm:^3.12.1":
   version: 3.12.1
   resolution: "crypto-browserify@npm:3.12.1"
   dependencies:
@@ -6669,12 +6266,12 @@ __metadata:
   linkType: hard
 
 "cssstyle@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "cssstyle@npm:4.2.1"
+  version: 4.3.1
+  resolution: "cssstyle@npm:4.3.1"
   dependencies:
-    "@asamuzakjp/css-color": "npm:^2.8.2"
+    "@asamuzakjp/css-color": "npm:^3.1.2"
     rrweb-cssom: "npm:^0.8.0"
-  checksum: 10c0/02ba8c47c0caaab57acadacb3eb6c0f5f009000f55d61f6563670e07d389b26edefeed497e6c1847fcd2e6bbe0b6974c2d4291f97fa0c6ec6add13a7fa926d84
+  checksum: 10c0/89d73252d5f9930cf67f5c576de8030a9d960aae4c8bdd42d60464b2f67c8d809601fb7e620b43d4c84e03472016da77528df9a21a21393387ed256610ca0ab4
   languageName: node
   linkType: hard
 
@@ -6871,17 +6468,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-buffer@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "data-view-buffer@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10c0/8984119e59dbed906a11fcfb417d7d861936f16697a0e7216fe2c6c810f6b5e8f4a5281e73f2c28e8e9259027190ac4a33e2a65fdd7fa86ac06b76e838918583
-  languageName: node
-  linkType: hard
-
 "data-view-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-buffer@npm:1.0.2"
@@ -6893,17 +6479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "data-view-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10c0/b7d9e48a0cf5aefed9ab7d123559917b2d7e0d65531f43b2fd95b9d3a6b46042dd3fca597c42bba384e66b70d7ad66ff23932f8367b241f53d93af42cfe04ec2
-  languageName: node
-  linkType: hard
-
 "data-view-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-byte-length@npm:1.0.2"
@@ -6915,17 +6490,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-byte-offset@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "data-view-byte-offset@npm:1.0.0"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10c0/21b0d2e53fd6e20cc4257c873bf6d36d77bd6185624b84076c0a1ddaa757b49aaf076254006341d35568e89f52eecd1ccb1a502cfb620f2beca04f48a6a62a8f
-  languageName: node
-  linkType: hard
-
 "data-view-byte-offset@npm:^1.0.1":
   version: 1.0.1
   resolution: "data-view-byte-offset@npm:1.0.1"
@@ -6967,36 +6531,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4":
-  version: 4.3.7
-  resolution: "debug@npm:4.3.7"
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "debug@npm:4.4.0"
   dependencies:
     ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
+  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
   languageName: node
   linkType: hard
 
 "debug@npm:^3.1.0, debug@npm:^3.2.7":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
-  dependencies:
-    ms: "npm:^2.1.1"
-  checksum: 10c0/37d96ae42cbc71c14844d2ae3ba55adf462ec89fd3a999459dec3833944cd999af6007ff29c780f1c61153bcaaf2c842d1e4ce1ec621e4fc4923244942e4a02a
-  languageName: node
-  linkType: hard
-
-"debug@npm:^4.3.5, debug@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "debug@npm:4.4.0"
-  dependencies:
-    ms: "npm:^2.1.3"
-  peerDependenciesMeta:
-    supports-color:
-      optional: true
-  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
+  dependencies:
+    ms: "npm:^2.1.1"
+  checksum: 10c0/37d96ae42cbc71c14844d2ae3ba55adf462ec89fd3a999459dec3833944cd999af6007ff29c780f1c61153bcaaf2c842d1e4ce1ec621e4fc4923244942e4a02a
   languageName: node
   linkType: hard
 
@@ -7014,14 +6566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decimal.js@npm:^10.4.2":
-  version: 10.4.3
-  resolution: "decimal.js@npm:10.4.3"
-  checksum: 10c0/6d60206689ff0911f0ce968d40f163304a6c1bc739927758e6efc7921cfa630130388966f16bf6ef6b838cb33679fbe8e7a78a2f3c478afce841fd55ac8fb8ee
-  languageName: node
-  linkType: hard
-
-"decimal.js@npm:^10.5.0":
+"decimal.js@npm:^10.4.2, decimal.js@npm:^10.5.0":
   version: 10.5.0
   resolution: "decimal.js@npm:10.5.0"
   checksum: 10c0/785c35279df32762143914668df35948920b6c1c259b933e0519a69b7003fc0a5ed2a766b1e1dda02574450c566b21738a45f15e274b47c2ac02072c0d1f3ac3
@@ -7038,14 +6583,14 @@ __metadata:
   linkType: hard
 
 "dedent@npm:^1.0.0":
-  version: 1.5.3
-  resolution: "dedent@npm:1.5.3"
+  version: 1.6.0
+  resolution: "dedent@npm:1.6.0"
   peerDependencies:
     babel-plugin-macros: ^3.1.0
   peerDependenciesMeta:
     babel-plugin-macros:
       optional: true
-  checksum: 10c0/d94bde6e6f780be4da4fd760288fcf755ec368872f4ac5218197200d86430aeb8d90a003a840bff1c20221188e3f23adced0119cb811c6873c70d0ac66d12832
+  checksum: 10c0/671b8f5e390dd2a560862c4511dd6d2638e71911486f78cb32116551f8f2aa6fcaf50579ffffb2f866d46b5b80fd72470659ca5760ede8f967619ef7df79e8a5
   languageName: node
   linkType: hard
 
@@ -7128,7 +6673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.1.3, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -7202,6 +6747,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10c0/4da0deae9f69e13bc37a0902d78bf7169480004b1fed3c19722d56cff578d16f0e11633b7fbf5fb6249181236c72e90024cbd68f0b9558ae06e281f47326d50d
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -7343,13 +6897,13 @@ __metadata:
   linkType: hard
 
 "domutils@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "domutils@npm:3.2.1"
+  version: 3.2.2
+  resolution: "domutils@npm:3.2.2"
   dependencies:
     dom-serializer: "npm:^2.0.0"
     domelementtype: "npm:^2.3.0"
     domhandler: "npm:^5.0.3"
-  checksum: 10c0/af2a8e28fe51137307d2400c4b6483a3294ac8f784b14fc74b67f3aca3aa53a63144bd9e2bb96f23174c0c1aa680544bf2d77b4cc94e6f90f33314ed65c12a4f
+  checksum: 10c0/47938f473b987ea71cd59e59626eb8666d3aa8feba5266e45527f3b636c7883cca7e582d901531961f742c519d7514636b7973353b648762b2e3bedbf235fada
   languageName: node
   linkType: hard
 
@@ -7374,20 +6928,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:16.5.0":
+"dotenv@npm:16.5.0, dotenv@npm:^16.4.2":
   version: 16.5.0
   resolution: "dotenv@npm:16.5.0"
   checksum: 10c0/5bc94c919fbd955bf0ba44d33922a1e93d1078e64a1db5c30faeded1d996e7a83c55332cb8ea4fae5a9ca4d0be44cbceb95c5811e70f9f095298df09d1997dd9
   languageName: node
   linkType: hard
 
-"dotenv@npm:^16.4.2":
-  version: 16.4.5
-  resolution: "dotenv@npm:16.4.5"
-  checksum: 10c0/48d92870076832af0418b13acd6e5a5a3e83bb00df690d9812e94b24aff62b88ade955ac99a05501305b8dc8f1b0ee7638b18493deb6fe93d680e5220936292f
-  languageName: node
-  linkType: hard
-
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -7441,23 +6988,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.5.28":
-  version: 1.5.35
-  resolution: "electron-to-chromium@npm:1.5.35"
-  checksum: 10c0/49f7921dbdee725284898728a0ba4a786ab27a145a871057b7085f5643df51d7be3ece5374a105cc621417abb1bca780365a058a0531083d0252347b75cf0f3f
-  languageName: node
-  linkType: hard
-
-"electron-to-chromium@npm:^1.5.73":
-  version: 1.5.97
-  resolution: "electron-to-chromium@npm:1.5.97"
-  checksum: 10c0/79080e3fea02158d2a05c881d84711d940817782179f08911f42ad10569832f402e7a612024ebf8c195439f713a4d913689b713f06f010f4cadccf9cf63cd3ad
+"electron-to-chromium@npm:^1.5.149":
+  version: 1.5.149
+  resolution: "electron-to-chromium@npm:1.5.149"
+  checksum: 10c0/dc9fe63d1ffb034a5c91133291b09d877b4b200b01b1235090e94aed7f75f4413637c7b4e3a783b03f03c06bee8f45bbd5f44ddb397bc35528ac8a838eb6a66d
   languageName: node
   linkType: hard
 
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.5":
-  version: 6.5.7
-  resolution: "elliptic@npm:6.5.7"
+  version: 6.6.1
+  resolution: "elliptic@npm:6.6.1"
   dependencies:
     bn.js: "npm:^4.11.9"
     brorand: "npm:^1.1.0"
@@ -7466,7 +7006,7 @@ __metadata:
     inherits: "npm:^2.0.4"
     minimalistic-assert: "npm:^1.0.1"
     minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10c0/799959b6c54ea3564e8961f35abdf8c77e37617f3051614b05ab1fb6a04ddb65bd1caa75ed1bae375b15dda312a0f79fed26ebe76ecf05c5a7af244152a601b8
+  checksum: 10c0/8b24ef782eec8b472053793ea1e91ae6bee41afffdfcb78a81c0a53b191e715cbe1292aa07165958a9bbe675bd0955142560b1a007ffce7d6c765bcaf951a867
   languageName: node
   linkType: hard
 
@@ -7538,12 +7078,12 @@ __metadata:
   linkType: hard
 
 "enhanced-resolve@npm:^5.0.0, enhanced-resolve@npm:^5.17.1":
-  version: 5.17.1
-  resolution: "enhanced-resolve@npm:5.17.1"
+  version: 5.18.1
+  resolution: "enhanced-resolve@npm:5.18.1"
   dependencies:
     graceful-fs: "npm:^4.2.4"
     tapable: "npm:^2.2.0"
-  checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370
+  checksum: 10c0/4cffd9b125225184e2abed9fdf0ed3dbd2224c873b165d0838fd066cde32e0918626cba2f1f4bf6860762f13a7e2364fd89a82b99566be2873d813573ac71846
   languageName: node
   linkType: hard
 
@@ -7557,7 +7097,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0":
+"entities@npm:^4.2.0, entities@npm:^4.4.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
@@ -7630,63 +7170,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.17.5, es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3":
-  version: 1.23.3
-  resolution: "es-abstract@npm:1.23.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.1"
-    arraybuffer.prototype.slice: "npm:^1.0.3"
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    data-view-buffer: "npm:^1.0.1"
-    data-view-byte-length: "npm:^1.0.1"
-    data-view-byte-offset: "npm:^1.0.0"
-    es-define-property: "npm:^1.0.0"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    es-set-tostringtag: "npm:^2.0.3"
-    es-to-primitive: "npm:^1.2.1"
-    function.prototype.name: "npm:^1.1.6"
-    get-intrinsic: "npm:^1.2.4"
-    get-symbol-description: "npm:^1.0.2"
-    globalthis: "npm:^1.0.3"
-    gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.2"
-    has-proto: "npm:^1.0.3"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.2"
-    internal-slot: "npm:^1.0.7"
-    is-array-buffer: "npm:^3.0.4"
-    is-callable: "npm:^1.2.7"
-    is-data-view: "npm:^1.0.1"
-    is-negative-zero: "npm:^2.0.3"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.3"
-    is-string: "npm:^1.0.7"
-    is-typed-array: "npm:^1.1.13"
-    is-weakref: "npm:^1.0.2"
-    object-inspect: "npm:^1.13.1"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.5"
-    regexp.prototype.flags: "npm:^1.5.2"
-    safe-array-concat: "npm:^1.1.2"
-    safe-regex-test: "npm:^1.0.3"
-    string.prototype.trim: "npm:^1.2.9"
-    string.prototype.trimend: "npm:^1.0.8"
-    string.prototype.trimstart: "npm:^1.0.8"
-    typed-array-buffer: "npm:^1.0.2"
-    typed-array-byte-length: "npm:^1.0.1"
-    typed-array-byte-offset: "npm:^1.0.2"
-    typed-array-length: "npm:^1.0.6"
-    unbox-primitive: "npm:^1.0.2"
-    which-typed-array: "npm:^1.1.15"
-  checksum: 10c0/d27e9afafb225c6924bee9971a7f25f20c314f2d6cb93a63cada4ac11dcf42040896a6c22e5fb8f2a10767055ed4ddf400be3b1eb12297d281726de470b75666
-  languageName: node
-  linkType: hard
-
-"es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6":
-  version: 1.23.7
-  resolution: "es-abstract@npm:1.23.7"
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
+  version: 1.23.9
+  resolution: "es-abstract@npm:1.23.9"
   dependencies:
     array-buffer-byte-length: "npm:^1.0.2"
     arraybuffer.prototype.slice: "npm:^1.0.4"
@@ -7699,10 +7185,11 @@ __metadata:
     es-define-property: "npm:^1.0.1"
     es-errors: "npm:^1.3.0"
     es-object-atoms: "npm:^1.0.0"
-    es-set-tostringtag: "npm:^2.0.3"
+    es-set-tostringtag: "npm:^2.1.0"
     es-to-primitive: "npm:^1.3.0"
     function.prototype.name: "npm:^1.1.8"
-    get-intrinsic: "npm:^1.2.6"
+    get-intrinsic: "npm:^1.2.7"
+    get-proto: "npm:^1.0.0"
     get-symbol-description: "npm:^1.1.0"
     globalthis: "npm:^1.0.4"
     gopd: "npm:^1.2.0"
@@ -7723,9 +7210,12 @@ __metadata:
     object-inspect: "npm:^1.13.3"
     object-keys: "npm:^1.1.1"
     object.assign: "npm:^4.1.7"
+    own-keys: "npm:^1.0.1"
     regexp.prototype.flags: "npm:^1.5.3"
     safe-array-concat: "npm:^1.1.3"
+    safe-push-apply: "npm:^1.0.0"
     safe-regex-test: "npm:^1.1.0"
+    set-proto: "npm:^1.0.0"
     string.prototype.trim: "npm:^1.2.10"
     string.prototype.trimend: "npm:^1.0.9"
     string.prototype.trimstart: "npm:^1.0.8"
@@ -7735,27 +7225,18 @@ __metadata:
     typed-array-length: "npm:^1.0.7"
     unbox-primitive: "npm:^1.1.0"
     which-typed-array: "npm:^1.1.18"
-  checksum: 10c0/68d24e56f47d773639d49c561366c8d9e775187e0d64f011209261fcb3a63caf764f60c0e66940bbd8815a862f9ca8114f6a5dfdeb776da87436d46bcd82ae48
-  languageName: node
-  linkType: hard
-
-"es-define-property@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-define-property@npm:1.0.0"
-  dependencies:
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/6bf3191feb7ea2ebda48b577f69bdfac7a2b3c9bcf97307f55fd6ef1bbca0b49f0c219a935aca506c993d8c5d8bddd937766cb760cd5e5a1071351f2df9f9aa4
+  checksum: 10c0/1de229c9e08fe13c17fe5abaec8221545dfcd57e51f64909599a6ae896df84b8fd2f7d16c60cb00d7bf495b9298ca3581aded19939d4b7276854a4b066f8422b
   languageName: node
   linkType: hard
 
-"es-define-property@npm:^1.0.1":
+"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
   version: 1.0.1
   resolution: "es-define-property@npm:1.0.1"
   checksum: 10c0/3f54eb49c16c18707949ff25a1456728c883e81259f045003499efba399c08bad00deebf65cccde8c0e07908c1a225c9d472b7107e558f2a48e28d530e34527c
   languageName: node
   linkType: hard
 
-"es-errors@npm:^1.2.1, es-errors@npm:^1.3.0":
+"es-errors@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-errors@npm:1.3.0"
   checksum: 10c0/0a61325670072f98d8ae3b914edab3559b6caa980f08054a3b872052640d91da01d38df55df797fcc916389d77fc92b8d5906cf028f4db46d7e3003abecbca85
@@ -7787,22 +7268,13 @@ __metadata:
   linkType: hard
 
 "es-module-lexer@npm:^1.2.1":
-  version: 1.5.4
-  resolution: "es-module-lexer@npm:1.5.4"
-  checksum: 10c0/300a469488c2f22081df1e4c8398c78db92358496e639b0df7f89ac6455462aaf5d8893939087c1a1cbcbf20eed4610c70e0bcb8f3e4b0d80a5d2611c539408c
-  languageName: node
-  linkType: hard
-
-"es-object-atoms@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-object-atoms@npm:1.0.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-  checksum: 10c0/1fed3d102eb27ab8d983337bb7c8b159dd2a1e63ff833ec54eea1311c96d5b08223b433060ba240541ca8adba9eee6b0a60cdbf2f80634b784febc9cc8b687b4
+  version: 1.7.0
+  resolution: "es-module-lexer@npm:1.7.0"
+  checksum: 10c0/4c935affcbfeba7fb4533e1da10fa8568043df1e3574b869385980de9e2d475ddc36769891936dbb07036edb3c3786a8b78ccf44964cd130dedc1f2c984b6c7b
   languageName: node
   linkType: hard
 
-"es-object-atoms@npm:^1.1.1":
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
   version: 1.1.1
   resolution: "es-object-atoms@npm:1.1.1"
   dependencies:
@@ -7811,34 +7283,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-set-tostringtag@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "es-set-tostringtag@npm:2.0.3"
+"es-set-tostringtag@npm:^2.0.3, es-set-tostringtag@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "es-set-tostringtag@npm:2.1.0"
   dependencies:
-    get-intrinsic: "npm:^1.2.4"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
     has-tostringtag: "npm:^1.0.2"
-    hasown: "npm:^2.0.1"
-  checksum: 10c0/f22aff1585eb33569c326323f0b0d175844a1f11618b86e193b386f8be0ea9474cfbe46df39c45d959f7aa8f6c06985dc51dd6bce5401645ec5a74c4ceaa836a
-  languageName: node
-  linkType: hard
-
-"es-shim-unscopables@npm:^1.0.0, es-shim-unscopables@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "es-shim-unscopables@npm:1.0.2"
-  dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 10c0/f495af7b4b7601a4c0cfb893581c352636e5c08654d129590386a33a0432cf13a7bdc7b6493801cadd990d838e2839b9013d1de3b880440cb537825e834fe783
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/ef2ca9ce49afe3931cb32e35da4dcb6d86ab02592cfc2ce3e49ced199d9d0bb5085fc7e73e06312213765f5efa47cc1df553a6a5154584b21448e9fb8355b1af
   languageName: node
   linkType: hard
 
-"es-to-primitive@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "es-to-primitive@npm:1.2.1"
+"es-shim-unscopables@npm:^1.0.2, es-shim-unscopables@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "es-shim-unscopables@npm:1.1.0"
   dependencies:
-    is-callable: "npm:^1.1.4"
-    is-date-object: "npm:^1.0.1"
-    is-symbol: "npm:^1.0.2"
-  checksum: 10c0/0886572b8dc075cb10e50c0af62a03d03a68e1e69c388bd4f10c0649ee41b1fbb24840a1b7e590b393011b5cdbe0144b776da316762653685432df37d6de60f1
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/1b9702c8a1823fc3ef39035a4e958802cf294dd21e917397c561d0b3e195f383b978359816b1732d02b255ccf63e1e4815da0065b95db8d7c992037be3bbbcdb
   languageName: node
   linkType: hard
 
@@ -7868,34 +7330,34 @@ __metadata:
   linkType: hard
 
 "esbuild@npm:^0.25.0, esbuild@npm:~0.25.0":
-  version: 0.25.0
-  resolution: "esbuild@npm:0.25.0"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.25.0"
-    "@esbuild/android-arm": "npm:0.25.0"
-    "@esbuild/android-arm64": "npm:0.25.0"
-    "@esbuild/android-x64": "npm:0.25.0"
-    "@esbuild/darwin-arm64": "npm:0.25.0"
-    "@esbuild/darwin-x64": "npm:0.25.0"
-    "@esbuild/freebsd-arm64": "npm:0.25.0"
-    "@esbuild/freebsd-x64": "npm:0.25.0"
-    "@esbuild/linux-arm": "npm:0.25.0"
-    "@esbuild/linux-arm64": "npm:0.25.0"
-    "@esbuild/linux-ia32": "npm:0.25.0"
-    "@esbuild/linux-loong64": "npm:0.25.0"
-    "@esbuild/linux-mips64el": "npm:0.25.0"
-    "@esbuild/linux-ppc64": "npm:0.25.0"
-    "@esbuild/linux-riscv64": "npm:0.25.0"
-    "@esbuild/linux-s390x": "npm:0.25.0"
-    "@esbuild/linux-x64": "npm:0.25.0"
-    "@esbuild/netbsd-arm64": "npm:0.25.0"
-    "@esbuild/netbsd-x64": "npm:0.25.0"
-    "@esbuild/openbsd-arm64": "npm:0.25.0"
-    "@esbuild/openbsd-x64": "npm:0.25.0"
-    "@esbuild/sunos-x64": "npm:0.25.0"
-    "@esbuild/win32-arm64": "npm:0.25.0"
-    "@esbuild/win32-ia32": "npm:0.25.0"
-    "@esbuild/win32-x64": "npm:0.25.0"
+  version: 0.25.3
+  resolution: "esbuild@npm:0.25.3"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.3"
+    "@esbuild/android-arm": "npm:0.25.3"
+    "@esbuild/android-arm64": "npm:0.25.3"
+    "@esbuild/android-x64": "npm:0.25.3"
+    "@esbuild/darwin-arm64": "npm:0.25.3"
+    "@esbuild/darwin-x64": "npm:0.25.3"
+    "@esbuild/freebsd-arm64": "npm:0.25.3"
+    "@esbuild/freebsd-x64": "npm:0.25.3"
+    "@esbuild/linux-arm": "npm:0.25.3"
+    "@esbuild/linux-arm64": "npm:0.25.3"
+    "@esbuild/linux-ia32": "npm:0.25.3"
+    "@esbuild/linux-loong64": "npm:0.25.3"
+    "@esbuild/linux-mips64el": "npm:0.25.3"
+    "@esbuild/linux-ppc64": "npm:0.25.3"
+    "@esbuild/linux-riscv64": "npm:0.25.3"
+    "@esbuild/linux-s390x": "npm:0.25.3"
+    "@esbuild/linux-x64": "npm:0.25.3"
+    "@esbuild/netbsd-arm64": "npm:0.25.3"
+    "@esbuild/netbsd-x64": "npm:0.25.3"
+    "@esbuild/openbsd-arm64": "npm:0.25.3"
+    "@esbuild/openbsd-x64": "npm:0.25.3"
+    "@esbuild/sunos-x64": "npm:0.25.3"
+    "@esbuild/win32-arm64": "npm:0.25.3"
+    "@esbuild/win32-ia32": "npm:0.25.3"
+    "@esbuild/win32-x64": "npm:0.25.3"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -7949,7 +7411,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10c0/5767b72da46da3cfec51661647ec850ddbf8a8d0662771139f10ef0692a8831396a0004b2be7966cecdb08264fb16bdc16290dcecd92396fac5f12d722fa013d
+  checksum: 10c0/127aff654310ede4e2eb232a7b1d8823f5b5d69222caf17aa7f172574a5b6b75f71ce78c6d8a40030421d7c75b784dc640de0fb1b87b7ea77ab2a1c832fa8df8
   languageName: node
   linkType: hard
 
@@ -8256,20 +7718,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0":
+"eslint-visitor-keys@npm:^3.4.3":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
   checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "eslint-visitor-keys@npm:4.1.0"
-  checksum: 10c0/5483ef114c93a136aa234140d7aa3bd259488dae866d35cb0d0b52e6a158f614760a57256ac8d549acc590a87042cb40f6951815caa821e55dc4fd6ef4c722eb
-  languageName: node
-  linkType: hard
-
 "eslint-visitor-keys@npm:^4.2.0":
   version: 4.2.0
   resolution: "eslint-visitor-keys@npm:4.2.0"
@@ -8329,18 +7784,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^10.0.1":
-  version: 10.2.0
-  resolution: "espree@npm:10.2.0"
-  dependencies:
-    acorn: "npm:^8.12.0"
-    acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^4.1.0"
-  checksum: 10c0/2b6bfb683e7e5ab2e9513949879140898d80a2d9867ea1db6ff5b0256df81722633b60a7523a7c614f05a39aeea159dd09ad2a0e90c0e218732fc016f9086215
-  languageName: node
-  linkType: hard
-
-"espree@npm:^10.3.0":
+"espree@npm:^10.0.1, espree@npm:^10.3.0":
   version: 10.3.0
   resolution: "espree@npm:10.3.0"
   dependencies:
@@ -8552,9 +7996,9 @@ __metadata:
   linkType: hard
 
 "exponential-backoff@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "exponential-backoff@npm:3.1.1"
-  checksum: 10c0/160456d2d647e6019640bd07111634d8c353038d9fa40176afb7cd49b0548bdae83b56d05e907c2cce2300b81cae35d800ef92fefb9d0208e190fa3b7d6bb579
+  version: 3.1.2
+  resolution: "exponential-backoff@npm:3.1.2"
+  checksum: 10c0/d9d3e1eafa21b78464297df91f1776f7fbaa3d5e3f7f0995648ca5b89c069d17055033817348d9f4a43d1c20b0eab84f75af6991751e839df53e4dfd6f22e844
   languageName: node
   linkType: hard
 
@@ -8701,15 +8145,15 @@ __metadata:
   linkType: hard
 
 "fast-glob@npm:^3.2.11, fast-glob@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "fast-glob@npm:3.3.2"
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
   dependencies:
     "@nodelib/fs.stat": "npm:^2.0.2"
     "@nodelib/fs.walk": "npm:^1.2.3"
     glob-parent: "npm:^5.1.2"
     merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845
+    micromatch: "npm:^4.0.8"
+  checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe
   languageName: node
   linkType: hard
 
@@ -8735,9 +8179,9 @@ __metadata:
   linkType: hard
 
 "fast-uri@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "fast-uri@npm:3.0.2"
-  checksum: 10c0/8cdd3da7b4022a037d348d587d55caff74b7e4f862bbdd2cc35c1e6e3f97d0aedb567894d44c57ee8798d3192cceb97dcf41dbdabfa07dd2842a0474a6c6eeef
+  version: 3.0.6
+  resolution: "fast-uri@npm:3.0.6"
+  checksum: 10c0/74a513c2af0584448aee71ce56005185f81239eab7a2343110e5bad50c39ad4fb19c5a6f99783ead1cac7ccaf3461a6034fda89fffa2b30b6d99b9f21c2f9d29
   languageName: node
   linkType: hard
 
@@ -8749,11 +8193,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.17.1
-  resolution: "fastq@npm:1.17.1"
+  version: 1.19.1
+  resolution: "fastq@npm:1.19.1"
   dependencies:
     reusify: "npm:^1.0.4"
-  checksum: 10c0/1095f16cea45fb3beff558bb3afa74ca7a9250f5a670b65db7ed585f92b4b48381445cd328b3d87323da81e43232b5d5978a8201bde84e0cd514310f1ea6da34
+  checksum: 10c0/ebc6e50ac7048daaeb8e64522a1ea7a26e92b3cee5cd1c7f2316cdca81ba543aa40a136b53891446ea5c3a67ec215fbaca87ad405f102dd97012f62916905630
   languageName: node
   linkType: hard
 
@@ -8784,6 +8228,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:^6.4.4":
+  version: 6.4.4
+  resolution: "fdir@npm:6.4.4"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10c0/6ccc33be16945ee7bc841e1b4178c0b4cf18d3804894cb482aa514651c962a162f96da7ffc6ebfaf0df311689fb70091b04dd6caffe28d56b9ebdc0e7ccadfdd
+  languageName: node
+  linkType: hard
+
 "figures@npm:^3.2.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
@@ -8803,11 +8259,11 @@ __metadata:
   linkType: hard
 
 "file-selector@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "file-selector@npm:2.1.0"
+  version: 2.1.2
+  resolution: "file-selector@npm:2.1.2"
   dependencies:
     tslib: "npm:^2.7.0"
-  checksum: 10c0/6eccfba9e0ac9f2d91fd43678ce120661088bc5cee23a679f67101f979afff71171fc10f35d39916ce244edf1e151451091cee1692a8826d3a33eb4c81cdd4b8
+  checksum: 10c0/fe827e0e95410aacfcc3eabc38c29cc36055257f03c1c06b631a2b5af9730c142ad2c52f5d64724d02231709617bda984701f52bd1f4b7aca50fb6585a27c1d2
   languageName: node
   linkType: hard
 
@@ -8935,9 +8391,9 @@ __metadata:
   linkType: hard
 
 "flatted@npm:^3.2.9":
-  version: 3.3.1
-  resolution: "flatted@npm:3.3.1"
-  checksum: 10c0/324166b125ee07d4ca9bcf3a5f98d915d5db4f39d711fba640a3178b959919aae1f7cfd8aabcfef5826ed8aa8a2aa14cc85b2d7d18ff638ddf4ae3df39573eaf
+  version: 3.3.3
+  resolution: "flatted@npm:3.3.3"
+  checksum: 10c0/e957a1c6b0254aa15b8cce8533e24165abd98fadc98575db082b786b5da1b7d72062b81bfdcd1da2f4d46b6ed93bec2434e62333e9b4261d79ef2e75a10dd538
   languageName: node
   linkType: hard
 
@@ -8951,22 +8407,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-each@npm:^0.3.3":
-  version: 0.3.3
-  resolution: "for-each@npm:0.3.3"
+"for-each@npm:^0.3.3, for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
   dependencies:
-    is-callable: "npm:^1.1.3"
-  checksum: 10c0/22330d8a2db728dbf003ec9182c2d421fbcd2969b02b4f97ec288721cda63eb28f2c08585ddccd0f77cb2930af8d958005c9e72f47141dc51816127a118f39aa
+    is-callable: "npm:^1.2.7"
+  checksum: 10c0/0e0b50f6a843a282637d43674d1fb278dda1dd85f4f99b640024cfb10b85058aac0cc781bf689d5fe50b4b7f638e91e548560723a4e76e04fe96ae35ef039cee
   languageName: node
   linkType: hard
 
 "foreground-child@npm:^3.1.0":
-  version: 3.3.0
-  resolution: "foreground-child@npm:3.3.0"
+  version: 3.3.1
+  resolution: "foreground-child@npm:3.3.1"
   dependencies:
-    cross-spawn: "npm:^7.0.0"
+    cross-spawn: "npm:^7.0.6"
     signal-exit: "npm:^4.0.1"
-  checksum: 10c0/028f1d41000553fcfa6c4bb5c372963bf3d9bf0b1f25a87d1a6253014343fb69dfb1b42d9625d7cf44c8ba429940f3d0ff718b62105d4d4a4f6ef8ca0a53faa2
+  checksum: 10c0/8986e4af2430896e65bc2788d6679067294d6aee9545daefc84923a0a4b399ad9c7a3ea7bd8c0b2b80fdf4a92de4c69df3f628233ff3224260e9c1541a9e9ed3
   languageName: node
   linkType: hard
 
@@ -9012,13 +8468,14 @@ __metadata:
   linkType: hard
 
 "form-data@npm:^4.0.0, form-data@npm:~4.0.0":
-  version: 4.0.1
-  resolution: "form-data@npm:4.0.1"
+  version: 4.0.2
+  resolution: "form-data@npm:4.0.2"
   dependencies:
     asynckit: "npm:^0.4.0"
     combined-stream: "npm:^1.0.8"
+    es-set-tostringtag: "npm:^2.1.0"
     mime-types: "npm:^2.1.12"
-  checksum: 10c0/bb102d570be8592c23f4ea72d7df9daa50c7792eb0cf1c5d7e506c1706e7426a4e4ae48a35b109e91c85f1c0ec63774a21ae252b66f4eb981cb8efef7d0463c8
+  checksum: 10c0/e534b0cf025c831a0929bf4b9bbe1a9a6b03e273a8161f9947286b9b13bf8fb279c6944aae0070c4c311100c6d6dbb815cd955dc217728caf73fad8dc5b8ee9c
   languageName: node
   linkType: hard
 
@@ -9066,15 +8523,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-minipass@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "fs-minipass@npm:2.1.0"
-  dependencies:
-    minipass: "npm:^3.0.0"
-  checksum: 10c0/703d16522b8282d7299337539c3ed6edddd1afe82435e4f5b76e34a79cd74e488a8a0e26a636afc2440e1a23b03878e2122e3a2cfe375a5cf63c37d92b86a004
-  languageName: node
-  linkType: hard
-
 "fs-minipass@npm:^3.0.0":
   version: 3.0.3
   resolution: "fs-minipass@npm:3.0.3"
@@ -9124,19 +8572,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "function.prototype.name@npm:1.1.6"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    functions-have-names: "npm:^1.2.3"
-  checksum: 10c0/9eae11294905b62cb16874adb4fc687927cda3162285e0ad9612e6a1d04934005d46907362ea9cdb7428edce05a2f2c3dabc3b2d21e9fd343e9bb278230ad94b
-  languageName: node
-  linkType: hard
-
-"function.prototype.name@npm:^1.1.8":
+"function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
   version: 1.1.8
   resolution: "function.prototype.name@npm:1.1.8"
   dependencies:
@@ -9188,9 +8624,9 @@ __metadata:
   linkType: hard
 
 "get-east-asian-width@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "get-east-asian-width@npm:1.2.0"
-  checksum: 10c0/914b1e217cf38436c24b4c60b4c45289e39a45bf9e65ef9fd343c2815a1a02b8a0215aeec8bf9c07c516089004b6e3826332481f40a09529fcadbf6e579f286b
+  version: 1.3.0
+  resolution: "get-east-asian-width@npm:1.3.0"
+  checksum: 10c0/1a049ba697e0f9a4d5514c4623781c5246982bdb61082da6b5ae6c33d838e52ce6726407df285cdbb27ec1908b333cf2820989bd3e986e37bb20979437fdf34b
   languageName: node
   linkType: hard
 
@@ -9201,38 +8637,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "get-intrinsic@npm:1.2.4"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-  checksum: 10c0/0a9b82c16696ed6da5e39b1267104475c47e3a9bdbe8b509dfe1710946e38a87be70d759f4bb3cda042d76a41ef47fe769660f3b7c0d1f68750299344ffb15b7
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "get-intrinsic@npm:1.2.6"
-  dependencies:
-    call-bind-apply-helpers: "npm:^1.0.1"
-    dunder-proto: "npm:^1.0.0"
-    es-define-property: "npm:^1.0.1"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    function-bind: "npm:^1.1.2"
-    gopd: "npm:^1.2.0"
-    has-symbols: "npm:^1.1.0"
-    hasown: "npm:^2.0.2"
-    math-intrinsics: "npm:^1.0.0"
-  checksum: 10c0/0f1ea6d807d97d074e8a31ac698213a12757fcfa9a8f4778263d2e4702c40fe83198aadd3dba2e99aabc2e4cf8a38345545dbb0518297d3df8b00b56a156c32a
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.3.0":
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
   version: 1.3.0
   resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
@@ -9257,7 +8662,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-proto@npm:^1.0.1":
+"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "get-proto@npm:1.0.1"
   dependencies:
@@ -9299,17 +8704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-symbol-description@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "get-symbol-description@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/867be6d63f5e0eb026cb3b0ef695ec9ecf9310febb041072d2e142f260bd91ced9eeb426b3af98791d1064e324e653424afa6fd1af17dee373bea48ae03162bc
-  languageName: node
-  linkType: hard
-
 "get-symbol-description@npm:^1.1.0":
   version: 1.1.0
   resolution: "get-symbol-description@npm:1.1.0"
@@ -9322,11 +8716,11 @@ __metadata:
   linkType: hard
 
 "get-tsconfig@npm:^4.7.0, get-tsconfig@npm:^4.7.5":
-  version: 4.8.1
-  resolution: "get-tsconfig@npm:4.8.1"
+  version: 4.10.0
+  resolution: "get-tsconfig@npm:4.10.0"
   dependencies:
     resolve-pkg-maps: "npm:^1.0.0"
-  checksum: 10c0/536ee85d202f604f4b5fb6be81bcd6e6d9a96846811e83e9acc6de4a04fb49506edea0e1b8cf1d5ee7af33e469916ec2809d4c5445ab8ae015a7a51fbd1572f9
+  checksum: 10c0/c9b5572c5118923c491c04285c73bd55b19e214992af957c502a3be0fc0043bb421386ffd45ca3433c0a7fba81221ca300479e8393960acf15d0ed4563f38a86
   languageName: node
   linkType: hard
 
@@ -9391,7 +8785,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.4.5":
+"glob@npm:^10.2.2, glob@npm:^10.4.5":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
   dependencies:
@@ -9408,8 +8802,8 @@ __metadata:
   linkType: hard
 
 "glob@npm:^11.0.1":
-  version: 11.0.1
-  resolution: "glob@npm:11.0.1"
+  version: 11.0.2
+  resolution: "glob@npm:11.0.2"
   dependencies:
     foreground-child: "npm:^3.1.0"
     jackspeak: "npm:^4.0.1"
@@ -9419,7 +8813,7 @@ __metadata:
     path-scurry: "npm:^2.0.0"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10c0/2b32588be52e9e90f914c7d8dec32f3144b81b84054b0f70e9adfebf37cd7014570489f2a79d21f7801b9a4bd4cca94f426966bfd00fb64a5b705cfe10da3a03
+  checksum: 10c0/49f91c64ca882d5e3a72397bd45a146ca91fd3ca53dafb5254daf6c0e83fc510d39ea66f136f9ac7ca075cdd11fbe9aaa235b28f743bd477622e472f4fdc0240
   languageName: node
   linkType: hard
 
@@ -9498,7 +8892,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalthis@npm:^1.0.3, globalthis@npm:^1.0.4":
+"globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"
   dependencies:
@@ -9508,16 +8902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "gopd@npm:1.0.1"
-  dependencies:
-    get-intrinsic: "npm:^1.1.3"
-  checksum: 10c0/505c05487f7944c552cee72087bf1567debb470d4355b1335f2c262d218ebbff805cd3715448fe29b4b380bae6912561d0467233e4165830efd28da241418c63
-  languageName: node
-  linkType: hard
-
-"gopd@npm:^1.2.0":
+"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
   version: 1.2.0
   resolution: "gopd@npm:1.2.0"
   checksum: 10c0/50fff1e04ba2b7737c097358534eacadad1e68d24cccee3272e04e007bed008e68d2614f3987788428fd192a5ae3889d08fb2331417e4fc4a9ab366b2043cead
@@ -9578,17 +8963,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "has-bigints@npm:1.0.2"
-  checksum: 10c0/724eb1485bfa3cdff6f18d95130aa190561f00b3fcf9f19dc640baf8176b5917c143b81ec2123f8cddb6c05164a198c94b13e1377c497705ccc8e1a80306e83b
-  languageName: node
-  linkType: hard
-
-"has-flag@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "has-flag@npm:3.0.0"
-  checksum: 10c0/1c6c83b14b8b1b3c25b0727b8ba3e3b647f99e9e6e13eb7322107261de07a4c1be56fc0d45678fc376e09772a3a1642ccdaf8fc69bdf123b6c086598397ce473
+"has-bigints@npm:^1.0.2":
+  version: 1.1.0
+  resolution: "has-bigints@npm:1.1.0"
+  checksum: 10c0/2de0cdc4a1ccf7a1e75ffede1876994525ac03cc6f5ae7392d3415dd475cd9eee5bceec63669ab61aa997ff6cceebb50ef75561c7002bed8988de2b9d1b40788
   languageName: node
   linkType: hard
 
@@ -9608,13 +8986,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-proto@npm:1.0.3"
-  checksum: 10c0/35a6989f81e9f8022c2f4027f8b48a552de714938765d019dbea6bb547bd49ce5010a3c7c32ec6ddac6e48fc546166a3583b128f5a7add8b058a6d8b4afec205
-  languageName: node
-  linkType: hard
-
 "has-proto@npm:^1.2.0":
   version: 1.2.0
   resolution: "has-proto@npm:1.2.0"
@@ -9624,21 +8995,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-symbols@npm:1.0.3"
-  checksum: 10c0/e6922b4345a3f37069cdfe8600febbca791c94988c01af3394d86ca3360b4b93928bbf395859158f88099cb10b19d98e3bbab7c9ff2c1bd09cf665ee90afa2c3
-  languageName: node
-  linkType: hard
-
-"has-symbols@npm:^1.1.0":
+"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
   version: 1.1.0
   resolution: "has-symbols@npm:1.1.0"
   checksum: 10c0/dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e
   languageName: node
   linkType: hard
 
-"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2":
+"has-tostringtag@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-tostringtag@npm:1.0.2"
   dependencies:
@@ -9665,17 +9029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hash-base@npm:~3.0":
-  version: 3.0.4
-  resolution: "hash-base@npm:3.0.4"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10c0/a13357dccb3827f0bb0b56bf928da85c428dc8670f6e4a1c7265e4f1653ce02d69030b40fd01b0f1d218a995a066eea279cded9cec72d207b593bcdfe309c2f0
-  languageName: node
-  linkType: hard
-
-"hash-base@npm:~3.0.4":
+"hash-base@npm:~3.0, hash-base@npm:~3.0.4":
   version: 3.0.5
   resolution: "hash-base@npm:3.0.5"
   dependencies:
@@ -9695,7 +9049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2":
+"hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
   dependencies:
@@ -9774,9 +9128,9 @@ __metadata:
   linkType: hard
 
 "html-entities@npm:^2.1.0":
-  version: 2.5.2
-  resolution: "html-entities@npm:2.5.2"
-  checksum: 10c0/f20ffb4326606245c439c231de40a7c560607f639bf40ffbfb36b4c70729fd95d7964209045f1a4e62fe17f2364cef3d6e49b02ea09016f207fde51c2211e481
+  version: 2.6.0
+  resolution: "html-entities@npm:2.6.0"
+  checksum: 10c0/7c8b15d9ea0cd00dc9279f61bab002ba6ca8a7a0f3c36ed2db3530a67a9621c017830d1d2c1c65beb9b8e3436ea663e9cf8b230472e0e413359399413b27c8b7
   languageName: node
   linkType: hard
 
@@ -9857,9 +9211,9 @@ __metadata:
   linkType: hard
 
 "http-parser-js@npm:>=0.5.1":
-  version: 0.5.8
-  resolution: "http-parser-js@npm:0.5.8"
-  checksum: 10c0/4ed89f812c44f84c4ae5d43dd3a0c47942b875b63be0ed2ccecbe6b0018af867d806495fc6e12474aff868721163699c49246585bddea4f0ecc6d2b02e19faf1
+  version: 0.5.10
+  resolution: "http-parser-js@npm:0.5.10"
+  checksum: 10c0/8bbcf1832a8d70b2bd515270112116333add88738a2cc05bfb94ba6bde3be4b33efee5611584113818d2bcf654fdc335b652503be5a6b4c0b95e46f214187d93
   languageName: node
   linkType: hard
 
@@ -9885,8 +9239,8 @@ __metadata:
   linkType: hard
 
 "http-proxy-middleware@npm:^2.0.7":
-  version: 2.0.7
-  resolution: "http-proxy-middleware@npm:2.0.7"
+  version: 2.0.9
+  resolution: "http-proxy-middleware@npm:2.0.9"
   dependencies:
     "@types/http-proxy": "npm:^1.17.8"
     http-proxy: "npm:^1.18.1"
@@ -9898,7 +9252,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/express":
       optional: true
-  checksum: 10c0/8d00a61eb215b83826460b07489d8bb095368ec16e02a9d63e228dcf7524e7c20d61561e5476de1391aecd4ec32ea093279cdc972115b311f8e0a95a24c9e47e
+  checksum: 10c0/8e9032af625f7c9f2f0d318f6cdb14eb725cc16ffe7b4ccccea25cf591fa819bb7c3bb579e0b543e0ae9c73059b505a6d728290c757bff27bae526a6ed11c05e
   languageName: node
   linkType: hard
 
@@ -9964,17 +9318,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^7.0.1":
-  version: 7.0.5
-  resolution: "https-proxy-agent@npm:7.0.5"
-  dependencies:
-    agent-base: "npm:^7.0.2"
-    debug: "npm:4"
-  checksum: 10c0/2490e3acec397abeb88807db52cac59102d5ed758feee6df6112ab3ccd8325e8a1ce8bce6f4b66e5470eca102d31e425ace904242e4fa28dbe0c59c4bafa7b2c
-  languageName: node
-  linkType: hard
-
-"https-proxy-agent@npm:^7.0.6":
+"https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.6":
   version: 7.0.6
   resolution: "https-proxy-agent@npm:7.0.6"
   dependencies:
@@ -10072,13 +9416,13 @@ __metadata:
   linkType: hard
 
 "image-size@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "image-size@npm:1.1.1"
+  version: 1.2.1
+  resolution: "image-size@npm:1.2.1"
   dependencies:
     queue: "npm:6.0.2"
   bin:
     image-size: bin/image-size.js
-  checksum: 10c0/2660470096d12be82195f7e80fe03274689fbd14184afb78eaf66ade7cd06352518325814f88af4bde4b26647889fe49e573129f6e7ba8f5ff5b85cc7f559000
+  checksum: 10c0/f8b3c19d4476513f1d7e55c3e6db80997b315444743e2040d545cbcaee59be03d2eb40c46be949a8372697b7003fdb0c04925d704390a7f606bc8181e25c0ed4
   languageName: node
   linkType: hard
 
@@ -10098,20 +9442,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immutable@npm:^4.0.0":
-  version: 4.3.7
-  resolution: "immutable@npm:4.3.7"
-  checksum: 10c0/9b099197081b22f6433003e34929da8ecddbbdc1474cdc8aa3b7669dee4adda349c06143de22def36016d1b6de5322b043eccd7a11db1dad2ca85dad4fff5435
+"immutable@npm:^5.0.2":
+  version: 5.1.1
+  resolution: "immutable@npm:5.1.1"
+  checksum: 10c0/5fd129ee9e448884003cc4f9e43bb91bab3b39dfeb3b49ddfb8bd563e0620eb47ae1f5b3ef96615d3ec38b52ab9a966dcacf9e39df00ed1a8ad062ddfba01cdf
   languageName: node
   linkType: hard
 
 "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "import-fresh@npm:3.3.0"
+  version: 3.3.1
+  resolution: "import-fresh@npm:3.3.1"
   dependencies:
     parent-module: "npm:^1.0.0"
     resolve-from: "npm:^4.0.0"
-  checksum: 10c0/7f882953aa6b740d1f0e384d0547158bc86efbf2eea0f1483b8900a6f65c5a5123c2cf09b0d542cc419d0b98a759ecaeb394237e97ea427f2da221dc3cd80cc3
+  checksum: 10c0/bf8cc494872fef783249709385ae883b447e3eb09db0ebd15dcead7d9afe7224dad7bd7591c6b73b0b19b3c0f9640eb8ee884f01cfaf2887ab995b0b36a0cbec
   languageName: node
   linkType: hard
 
@@ -10193,17 +9537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "internal-slot@npm:1.0.7"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    hasown: "npm:^2.0.0"
-    side-channel: "npm:^1.0.4"
-  checksum: 10c0/f8b294a4e6ea3855fc59551bbf35f2b832cf01fd5e6e2a97f5c201a071cc09b49048f856e484b67a6c721da5e55736c5b6ddafaf19e2dbeb4a3ff1821680de6c
-  languageName: node
-  linkType: hard
-
 "internal-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "internal-slot@npm:1.1.0"
@@ -10256,26 +9589,16 @@ __metadata:
   linkType: hard
 
 "is-arguments@npm:^1.0.4":
-  version: 1.1.1
-  resolution: "is-arguments@npm:1.1.1"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/5ff1f341ee4475350adfc14b2328b38962564b7c2076be2f5bac7bd9b61779efba99b9f844a7b82ba7654adccf8e8eb19d1bb0cc6d1c1a085e498f6793d4328f
-  languageName: node
-  linkType: hard
-
-"is-array-buffer@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "is-array-buffer@npm:3.0.4"
+  version: 1.2.0
+  resolution: "is-arguments@npm:1.2.0"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 10c0/42a49d006cc6130bc5424eae113e948c146f31f9d24460fc0958f855d9d810e6fd2e4519bf19aab75179af9c298ea6092459d8cafdec523cd19e529b26eab860
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10c0/6377344b31e9fcb707c6751ee89b11f132f32338e6a782ec2eac9393b0cbd32235dad93052998cda778ee058754860738341d8114910d50ada5615912bb929fc
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.5":
+"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
   dependencies:
@@ -10294,20 +9617,15 @@ __metadata:
   linkType: hard
 
 "is-async-function@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-async-function@npm:2.0.0"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/787bc931576aad525d751fc5ce211960fe91e49ac84a5c22d6ae0bc9541945fbc3f686dc590c3175722ce4f6d7b798a93f6f8ff4847fdb2199aea6f4baf5d668
-  languageName: node
-  linkType: hard
-
-"is-bigint@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "is-bigint@npm:1.0.4"
+  version: 2.1.1
+  resolution: "is-async-function@npm:2.1.1"
   dependencies:
-    has-bigints: "npm:^1.0.1"
-  checksum: 10c0/eb9c88e418a0d195ca545aff2b715c9903d9b0a5033bc5922fec600eb0c3d7b1ee7f882dbf2e0d5a6e694e42391be3683e4368737bd3c4a77f8ac293e7773696
+    async-function: "npm:^1.0.0"
+    call-bound: "npm:^1.0.3"
+    get-proto: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10c0/d70c236a5e82de6fc4d44368ffd0c2fee2b088b893511ce21e679da275a5ecc6015ff59a7d7e1bdd7ca39f71a8dbdd253cf8cce5c6b3c91cdd5b42b5ce677298
   languageName: node
   linkType: hard
 
@@ -10329,27 +9647,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-boolean-object@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "is-boolean-object@npm:1.1.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/6090587f8a8a8534c0f816da868bc94f32810f08807aa72fa7e79f7e11c466d281486ffe7a788178809c2aa71fe3e700b167fe80dd96dad68026bfff8ebf39f7
-  languageName: node
-  linkType: hard
-
 "is-boolean-object@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "is-boolean-object@npm:1.2.1"
+  version: 1.2.2
+  resolution: "is-boolean-object@npm:1.2.2"
   dependencies:
-    call-bound: "npm:^1.0.2"
+    call-bound: "npm:^1.0.3"
     has-tostringtag: "npm:^1.0.2"
-  checksum: 10c0/2ef601d255a39fdbde79cfe6be80c27b47430ed6712407f29b17d002e20f64c1e3d6692f1d842ba16bf1e9d8ddf1c4f13cac3ed7d9a4a21290f44879ebb4e8f5
+  checksum: 10c0/36ff6baf6bd18b3130186990026f5a95c709345c39cd368468e6c1b6ab52201e9fd26d8e1f4c066357b4938b0f0401e1a5000e08257787c1a02f3a719457001e
   languageName: node
   linkType: hard
 
-"is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.7":
+"is-callable@npm:^1.2.7":
   version: 1.2.7
   resolution: "is-callable@npm:1.2.7"
   checksum: 10c0/ceebaeb9d92e8adee604076971dd6000d38d6afc40bb843ea8e45c5579b57671c3f3b50d7f04869618242c6cee08d1b67806a8cb8edaaaf7c0748b3720d6066f
@@ -10367,34 +9675,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1":
-  version: 2.15.1
-  resolution: "is-core-module@npm:2.15.1"
-  dependencies:
-    hasown: "npm:^2.0.2"
-  checksum: 10c0/53432f10c69c40bfd2fa8914133a68709ff9498c86c3bf5fca3cdf3145a56fd2168cbf4a43b29843a6202a120a5f9c5ffba0a4322e1e3441739bc0b641682612
-  languageName: node
-  linkType: hard
-
-"is-core-module@npm:^2.16.0":
-  version: 2.16.0
-  resolution: "is-core-module@npm:2.16.0"
+"is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0":
+  version: 2.16.1
+  resolution: "is-core-module@npm:2.16.1"
   dependencies:
     hasown: "npm:^2.0.2"
-  checksum: 10c0/57e3b4bf3503a5ace3e61ef030a2eefa03d27827647b22968456e3e4befffed7c7aa849eea2e029f4f74a119a2d53cc391d5bad59c9352ecc9b79be3fd2acf79
-  languageName: node
-  linkType: hard
-
-"is-data-view@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-data-view@npm:1.0.1"
-  dependencies:
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10c0/a3e6ec84efe303da859107aed9b970e018e2bee7ffcb48e2f8096921a493608134240e672a2072577e5f23a729846241d9634806e8a0e51d9129c56d5f65442d
+  checksum: 10c0/898443c14780a577e807618aaae2b6f745c8538eca5c7bc11388a3f2dc6de82b9902bcc7eb74f07be672b11bbe82dd6a6edded44a00cb3d8f933d0459905eedd
   languageName: node
   linkType: hard
 
-"is-data-view@npm:^1.0.2":
+"is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-data-view@npm:1.0.2"
   dependencies:
@@ -10405,16 +9695,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "is-date-object@npm:1.0.5"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/eed21e5dcc619c48ccef804dfc83a739dbb2abee6ca202838ee1bd5f760fe8d8a93444f0d49012ad19bb7c006186e2884a1b92f6e1c056da7fd23d0a9ad5992e
-  languageName: node
-  linkType: hard
-
-"is-date-object@npm:^1.1.0":
+"is-date-object@npm:^1.0.5, is-date-object@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-date-object@npm:1.1.0"
   dependencies:
@@ -10489,11 +9770,14 @@ __metadata:
   linkType: hard
 
 "is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
-  version: 1.0.10
-  resolution: "is-generator-function@npm:1.0.10"
+  version: 1.1.0
+  resolution: "is-generator-function@npm:1.1.0"
   dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/df03514df01a6098945b5a0cfa1abff715807c8e72f57c49a0686ad54b3b74d394e2d8714e6f709a71eb00c9630d48e73ca1796c1ccc84ac95092c1fecc0d98b
+    call-bound: "npm:^1.0.3"
+    get-proto: "npm:^1.0.0"
+    has-tostringtag: "npm:^1.0.2"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10c0/fdfa96c8087bf36fc4cd514b474ba2ff404219a4dd4cfa6cf5426404a1eed259bdcdb98f082a71029a48d01f27733e3436ecc6690129a7ec09cb0434bee03a2a
   languageName: node
   linkType: hard
 
@@ -10527,13 +9811,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-lambda@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-lambda@npm:1.0.1"
-  checksum: 10c0/85fee098ae62ba6f1e24cf22678805473c7afd0fb3978a3aa260e354cb7bcb3a5806cf0a98403188465efedec41ab4348e8e4e79305d409601323855b3839d4d
-  languageName: node
-  linkType: hard
-
 "is-map@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-map@npm:2.0.3"
@@ -10551,13 +9828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-negative-zero@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-negative-zero@npm:2.0.3"
-  checksum: 10c0/bcdcf6b8b9714063ffcfa9929c575ac69bfdabb8f4574ff557dfc086df2836cf07e3906f5bbc4f2a5c12f8f3ba56af640c843cdfc74da8caed86c7c7d66fd08e
-  languageName: node
-  linkType: hard
-
 "is-network-error@npm:^1.0.0":
   version: 1.1.0
   resolution: "is-network-error@npm:1.1.0"
@@ -10572,15 +9842,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-number-object@npm:^1.0.4":
-  version: 1.0.7
-  resolution: "is-number-object@npm:1.0.7"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/aad266da1e530f1804a2b7bd2e874b4869f71c98590b3964f9d06cc9869b18f8d1f4778f838ecd2a11011bce20aeecb53cb269ba916209b79c24580416b74b1b
-  languageName: node
-  linkType: hard
-
 "is-number-object@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-number-object@npm:1.1.1"
@@ -10649,16 +9910,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "is-regex@npm:1.1.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/bb72aae604a69eafd4a82a93002058c416ace8cde95873589a97fc5dac96a6c6c78a9977d487b7b95426a8f5073969124dd228f043f9f604f041f32fcc465fc1
-  languageName: node
-  linkType: hard
-
 "is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -10678,15 +9929,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "is-shared-array-buffer@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-  checksum: 10c0/adc11ab0acbc934a7b9e5e9d6c588d4ec6682f6fea8cda5180721704fa32927582ede5b123349e32517fdadd07958973d24716c80e7ab198970c47acc09e59c7
-  languageName: node
-  linkType: hard
-
 "is-shared-array-buffer@npm:^1.0.4":
   version: 1.0.4
   resolution: "is-shared-array-buffer@npm:1.0.4"
@@ -10710,16 +9952,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-string@npm:^1.0.5, is-string@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "is-string@npm:1.0.7"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/905f805cbc6eedfa678aaa103ab7f626aac9ebbdc8737abb5243acaa61d9820f8edc5819106b8fcd1839e33db21de9f0116ae20de380c8382d16dc2a601921f6
-  languageName: node
-  linkType: hard
-
-"is-string@npm:^1.1.1":
+"is-string@npm:^1.0.7, is-string@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-string@npm:1.1.1"
   dependencies:
@@ -10729,15 +9962,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-symbol@npm:^1.0.2, is-symbol@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "is-symbol@npm:1.0.4"
-  dependencies:
-    has-symbols: "npm:^1.0.2"
-  checksum: 10c0/9381dd015f7c8906154dbcbf93fad769de16b4b961edc94f88d26eb8c555935caa23af88bda0c93a18e65560f6d7cca0fd5a3f8a8e1df6f1abbb9bead4502ef7
-  languageName: node
-  linkType: hard
-
 "is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-symbol@npm:1.1.1"
@@ -10749,16 +9973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.3":
-  version: 1.1.13
-  resolution: "is-typed-array@npm:1.1.13"
-  dependencies:
-    which-typed-array: "npm:^1.1.14"
-  checksum: 10c0/fa5cb97d4a80e52c2cc8ed3778e39f175a1a2ae4ddf3adae3187d69586a1fd57cfa0b095db31f66aa90331e9e3da79184cea9c6abdcd1abc722dc3c3edd51cca
-  languageName: node
-  linkType: hard
-
-"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15, is-typed-array@npm:^1.1.3":
   version: 1.1.15
   resolution: "is-typed-array@npm:1.1.15"
   dependencies:
@@ -10788,31 +10003,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakref@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-weakref@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-  checksum: 10c0/1545c5d172cb690c392f2136c23eec07d8d78a7f57d0e41f10078aa4f5daf5d7f57b6513a67514ab4f073275ad00c9822fc8935e00229d0a2089e1c02685d4b1
-  languageName: node
-  linkType: hard
-
-"is-weakref@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "is-weakref@npm:1.1.0"
+"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "is-weakref@npm:1.1.1"
   dependencies:
-    call-bound: "npm:^1.0.2"
-  checksum: 10c0/aa835f62e29cb60132ecb3ec7d11bd0f39ec7322325abe8412b805aef47153ec2daefdb21759b049711c674f49b13202a31d8d126bcdff7d8671c78babd4ae5b
+    call-bound: "npm:^1.0.3"
+  checksum: 10c0/8e0a9c07b0c780949a100e2cab2b5560a48ecd4c61726923c1a9b77b6ab0aa0046c9e7fb2206042296817045376dee2c8ab1dabe08c7c3dfbf195b01275a085b
   languageName: node
   linkType: hard
 
 "is-weakset@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-weakset@npm:2.0.3"
+  version: 2.0.4
+  resolution: "is-weakset@npm:2.0.4"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10c0/6491eba08acb8dc9532da23cb226b7d0192ede0b88f16199e592e4769db0a077119c1f5d2283d1e0d16d739115f70046e887e477eb0e66cd90e1bb29f28ba647
   languageName: node
   linkType: hard
 
@@ -10970,16 +10176,16 @@ __metadata:
   linkType: hard
 
 "iterator.prototype@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "iterator.prototype@npm:1.1.4"
+  version: 1.1.5
+  resolution: "iterator.prototype@npm:1.1.5"
   dependencies:
     define-data-property: "npm:^1.1.4"
     es-object-atoms: "npm:^1.0.0"
     get-intrinsic: "npm:^1.2.6"
+    get-proto: "npm:^1.0.0"
     has-symbols: "npm:^1.1.0"
-    reflect.getprototypeof: "npm:^1.0.8"
     set-function-name: "npm:^2.0.2"
-  checksum: 10c0/e63fcb5c1094192f43795b836fae9149a7dc2d445425958045e8e193df428407f909efca21bfdf0d885668ae8204681984afac7dd75478118e62f3cd3959c538
+  checksum: 10c0/f7a262808e1b41049ab55f1e9c29af7ec1025a000d243b83edf34ce2416eedd56079b117fa59376bb4a724110690f13aa8427f2ee29a09eec63a7e72367626d0
   languageName: node
   linkType: hard
 
@@ -11661,16 +10867,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:^2.5.1":
-  version: 2.5.2
-  resolution: "jsesc@npm:2.5.2"
+"jsesc@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "jsesc@npm:3.1.0"
   bin:
     jsesc: bin/jsesc
-  checksum: 10c0/dbf59312e0ebf2b4405ef413ec2b25abb5f8f4d9bc5fb8d9f90381622ebca5f2af6a6aa9a8578f65903f9e33990a6dc798edd0ce5586894bf0e9e31803a1de88
+  checksum: 10c0/531779df5ec94f47e462da26b4cbf05eb88a83d9f08aac2ba04206508fc598527a153d08bd462bae82fc78b3eaa1a908e1a4a79f886e9238641c4cdefaf118b1
   languageName: node
   linkType: hard
 
-"jsesc@npm:^3.0.2, jsesc@npm:~3.0.2":
+"jsesc@npm:~3.0.2":
   version: 3.0.2
   resolution: "jsesc@npm:3.0.2"
   bin:
@@ -11864,12 +11070,12 @@ __metadata:
   linkType: hard
 
 "launch-editor@npm:^2.6.1":
-  version: 2.9.1
-  resolution: "launch-editor@npm:2.9.1"
+  version: 2.10.0
+  resolution: "launch-editor@npm:2.10.0"
   dependencies:
     picocolors: "npm:^1.0.0"
     shell-quote: "npm:^1.8.1"
-  checksum: 10c0/891f1d136ed8e4ea12e16c196a0d2e07f23c7b983e3ab532b2be1775fb244909581507cce97c50f9d5ca92680b53e4a75c72ddcf20184aa6c4da6ebbe87703f5
+  checksum: 10c0/8b5a26be6b0da1da039ed2254b837dea0651a6406ea4dc4c9a5b28ea72862f1b12880135c495baf9d8a08997473b44034172506781744cf82e155451a40b7d51
   languageName: node
   linkType: hard
 
@@ -11888,8 +11094,8 @@ __metadata:
   linkType: hard
 
 "less@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "less@npm:4.2.0"
+  version: 4.3.0
+  resolution: "less@npm:4.3.0"
   dependencies:
     copy-anything: "npm:^2.0.1"
     errno: "npm:^0.1.1"
@@ -11918,7 +11124,7 @@ __metadata:
       optional: true
   bin:
     lessc: bin/lessc
-  checksum: 10c0/8593d547a3e7651555a2c51bac8b148b37ec14e75e6e28ee4ddf27eb49cbcb4b558e50cdefa97d6942a8120fc744ace0d61c43d4c246e098c8828269b14cf5fb
+  checksum: 10c0/69a9260d4613387fd1f2da3b0904005423272c59f304b27475c145a62f6890be5d38729fd78ef2a65cba3d1d9b02760f309074cad0be4764252934ad04efb2ae
   languageName: node
   linkType: hard
 
@@ -11946,14 +11152,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^3.0.0":
-  version: 3.1.2
-  resolution: "lilconfig@npm:3.1.2"
-  checksum: 10c0/f059630b1a9bddaeba83059db00c672b64dc14074e9f232adce32b38ca1b5686ab737eb665c5ba3c32f147f0002b4bee7311ad0386a9b98547b5623e87071fbe
-  languageName: node
-  linkType: hard
-
-"lilconfig@npm:^3.1.3":
+"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.3":
   version: 3.1.3
   resolution: "lilconfig@npm:3.1.3"
   checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc
@@ -12009,8 +11208,8 @@ __metadata:
   linkType: hard
 
 "listr2@npm:^8.2.5":
-  version: 8.2.5
-  resolution: "listr2@npm:8.2.5"
+  version: 8.3.2
+  resolution: "listr2@npm:8.3.2"
   dependencies:
     cli-truncate: "npm:^4.0.0"
     colorette: "npm:^2.0.20"
@@ -12018,7 +11217,7 @@ __metadata:
     log-update: "npm:^6.1.0"
     rfdc: "npm:^1.4.1"
     wrap-ansi: "npm:^9.0.0"
-  checksum: 10c0/f5a9599514b00c27d7eb32d1117c83c61394b2a985ec20e542c798bf91cf42b19340215701522736f5b7b42f557e544afeadec47866e35e5d4f268f552729671
+  checksum: 10c0/6b6378e28debda863d31f03ffe880a76b45c07388c74e8e0676fc957de7f2aff24fdea7f48b17d12808440f64680215c36df388c79d2b367c7866dd66f75fb09
   languageName: node
   linkType: hard
 
@@ -12107,7 +11306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.14, lodash@npm:^4.17.21":
+"lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -12250,23 +11449,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^13.0.0":
-  version: 13.0.1
-  resolution: "make-fetch-happen@npm:13.0.1"
+"make-fetch-happen@npm:^14.0.3":
+  version: 14.0.3
+  resolution: "make-fetch-happen@npm:14.0.3"
   dependencies:
-    "@npmcli/agent": "npm:^2.0.0"
-    cacache: "npm:^18.0.0"
+    "@npmcli/agent": "npm:^3.0.0"
+    cacache: "npm:^19.0.1"
     http-cache-semantics: "npm:^4.1.1"
-    is-lambda: "npm:^1.0.1"
     minipass: "npm:^7.0.2"
-    minipass-fetch: "npm:^3.0.0"
+    minipass-fetch: "npm:^4.0.0"
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
-    negotiator: "npm:^0.6.3"
-    proc-log: "npm:^4.2.0"
+    negotiator: "npm:^1.0.0"
+    proc-log: "npm:^5.0.0"
     promise-retry: "npm:^2.0.1"
-    ssri: "npm:^10.0.0"
-  checksum: 10c0/df5f4dbb6d98153b751bccf4dc4cc500de85a96a9331db9805596c46aa9f99d9555983954e6c1266d9f981ae37a9e4647f42b9a4bb5466f867f4012e582c9e7e
+    ssri: "npm:^12.0.0"
+  checksum: 10c0/c40efb5e5296e7feb8e37155bde8eb70bc57d731b1f7d90e35a092fde403d7697c56fb49334d92d330d6f1ca29a98142036d6480a12681133a0a1453164cb2f0
   languageName: node
   linkType: hard
 
@@ -12288,16 +11486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:*":
-  version: 14.1.2
-  resolution: "marked@npm:14.1.2"
-  bin:
-    marked: bin/marked.js
-  checksum: 10c0/fb636a97a2f11acf4cca092836020281ff3bc573f3295b4f4639135a6188e4815b910ec8572eb5686e25580c9c383daf605b4a00fcb5e5626e5c65914755e4bd
-  languageName: node
-  linkType: hard
-
-"marked@npm:15.0.11":
+"marked@npm:*, marked@npm:15.0.11":
   version: 15.0.11
   resolution: "marked@npm:15.0.11"
   bin:
@@ -12306,7 +11495,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"math-intrinsics@npm:^1.0.0, math-intrinsics@npm:^1.1.0":
+"math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
   checksum: 10c0/7579ff94e899e2f76ab64491d76cf606274c874d8f2af4a442c016bd85688927fcfca157ba6bf74b08e9439dc010b248ce05b96cc7c126a354c3bae7fcb48b7f
@@ -12348,14 +11537,14 @@ __metadata:
   linkType: hard
 
 "memfs@npm:^4.6.0":
-  version: 4.13.0
-  resolution: "memfs@npm:4.13.0"
+  version: 4.17.1
+  resolution: "memfs@npm:4.17.1"
   dependencies:
     "@jsonjoy.com/json-pack": "npm:^1.0.3"
     "@jsonjoy.com/util": "npm:^1.3.0"
     tree-dump: "npm:^1.0.1"
     tslib: "npm:^2.0.0"
-  checksum: 10c0/b0cb47cefdafc8e84ced864a24654dc83d57b4019a2cef3fe8f0cb0f841da95d5f46bf5149d88fa41b8af05841c392776def801e1d293ecc4cbaf087244cbd12
+  checksum: 10c0/f3e7931697e268b24506abe56ef5729cebddf8568cac76c7bd1b07e9964a26f16e6281c52a22333b9a42f1275f80b8c7f6d61b9f7a92e24401066ca2a0809100
   languageName: node
   linkType: hard
 
@@ -12401,7 +11590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -12430,14 +11619,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-db@npm:>= 1.43.0 < 2":
-  version: 1.53.0
-  resolution: "mime-db@npm:1.53.0"
-  checksum: 10c0/1dcc37ba8ed5d1c179f5c6f0837e8db19371d5f2ea3690c3c2f3fa8c3858f976851d3460b172b4dee78ebd606762cbb407aa398545fbacd539e519f858cd7bf4
-  languageName: node
-  linkType: hard
-
-"mime-db@npm:^1.54.0":
+"mime-db@npm:>= 1.43.0 < 2, mime-db@npm:^1.54.0":
   version: 1.54.0
   resolution: "mime-db@npm:1.54.0"
   checksum: 10c0/8d907917bc2a90fa2df842cdf5dfeaf509adc15fe0531e07bb2f6ab15992416479015828d6a74200041c492e42cce3ebf78e5ce714388a0a538ea9c53eece284
@@ -12462,12 +11644,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:*":
-  version: 4.0.4
-  resolution: "mime@npm:4.0.4"
+"mime@npm:*, mime@npm:4.0.7":
+  version: 4.0.7
+  resolution: "mime@npm:4.0.7"
   bin:
     mime: bin/cli.js
-  checksum: 10c0/3046e425ed616613af8c7f4b268ff33ab564baeb24a117ef00475cbb23fbae91369ff2d9918cc6408162b0016bde34ea8cc4041b830fc2c45a8ecaf5b7e3e26f
+  checksum: 10c0/2fd22ee2012a3f1dcac7dd06b7dc314dd677ebcefb14355b7c9453f0092af6eabbe9d754d9849d2a1f346ddd53d716a851379be05386f7a6ccb40af4bd61f32b
   languageName: node
   linkType: hard
 
@@ -12480,15 +11662,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:4.0.7":
-  version: 4.0.7
-  resolution: "mime@npm:4.0.7"
-  bin:
-    mime: bin/cli.js
-  checksum: 10c0/2fd22ee2012a3f1dcac7dd06b7dc314dd677ebcefb14355b7c9453f0092af6eabbe9d754d9849d2a1f346ddd53d716a851379be05386f7a6ccb40af4bd61f32b
-  languageName: node
-  linkType: hard
-
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -12602,18 +11775,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-fetch@npm:^3.0.0":
-  version: 3.0.5
-  resolution: "minipass-fetch@npm:3.0.5"
+"minipass-fetch@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "minipass-fetch@npm:4.0.1"
   dependencies:
     encoding: "npm:^0.1.13"
     minipass: "npm:^7.0.3"
     minipass-sized: "npm:^1.0.3"
-    minizlib: "npm:^2.1.2"
+    minizlib: "npm:^3.0.1"
   dependenciesMeta:
     encoding:
       optional: true
-  checksum: 10c0/9d702d57f556274286fdd97e406fc38a2f5c8d15e158b498d7393b1105974b21249289ec571fa2b51e038a4872bfc82710111cf75fae98c662f3d6f95e72152b
+  checksum: 10c0/a3147b2efe8e078c9bf9d024a0059339c5a09c5b1dded6900a219c218cc8b1b78510b62dae556b507304af226b18c3f1aeb1d48660283602d5b6586c399eed5c
   languageName: node
   linkType: hard
 
@@ -12653,57 +11826,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "minipass@npm:5.0.0"
-  checksum: 10c0/a91d8043f691796a8ac88df039da19933ef0f633e3d7f0d35dcd5373af49131cf2399bfc355f41515dc495e3990369c3858cd319e5c2722b4753c90bf3152462
-  languageName: node
-  linkType: hard
-
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.1.2":
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
   version: 7.1.2
   resolution: "minipass@npm:7.1.2"
   checksum: 10c0/b0fd20bb9fb56e5fa9a8bfac539e8915ae07430a619e4b86ff71f5fc757ef3924b23b2c4230393af1eda647ed3d75739e4e0acb250a6b1eb277cf7f8fe449557
   languageName: node
   linkType: hard
 
-"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "minizlib@npm:2.1.2"
+"minizlib@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "minizlib@npm:3.0.2"
   dependencies:
-    minipass: "npm:^3.0.0"
-    yallist: "npm:^4.0.0"
-  checksum: 10c0/64fae024e1a7d0346a1102bb670085b17b7f95bf6cfdf5b128772ec8faf9ea211464ea4add406a3a6384a7d87a0cd1a96263692134323477b4fb43659a6cab78
+    minipass: "npm:^7.1.2"
+  checksum: 10c0/9f3bd35e41d40d02469cb30470c55ccc21cae0db40e08d1d0b1dff01cc8cc89a6f78e9c5d2b7c844e485ec0a8abc2238111213fdc5b2038e6d1012eacf316f78
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^0.5.6":
-  version: 0.5.6
-  resolution: "mkdirp@npm:0.5.6"
-  dependencies:
-    minimist: "npm:^1.2.6"
+"mkdirp@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "mkdirp@npm:1.0.4"
   bin:
     mkdirp: bin/cmd.js
-  checksum: 10c0/e2e2be789218807b58abced04e7b49851d9e46e88a2f9539242cc8a92c9b5c3a0b9bab360bd3014e02a140fc4fbc58e31176c408b493f8a2a6f4986bd7527b01
+  checksum: 10c0/46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "mkdirp@npm:1.0.4"
+"mkdirp@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mkdirp@npm:3.0.1"
   bin:
-    mkdirp: bin/cmd.js
-  checksum: 10c0/46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
+    mkdirp: dist/cjs/src/bin.js
+  checksum: 10c0/9f2b975e9246351f5e3a40dcfac99fcd0baa31fbfab615fe059fb11e51f10e4803c63de1f384c54d656e4db31d000e4767e9ef076a22e12a641357602e31d57d
   languageName: node
   linkType: hard
 
 "mocha@npm:^11.1.0":
-  version: 11.2.0
-  resolution: "mocha@npm:11.2.0"
+  version: 11.2.2
+  resolution: "mocha@npm:11.2.2"
   dependencies:
-    ansi-colors: "npm:^4.1.3"
     browser-stdout: "npm:^1.3.1"
-    chokidar: "npm:^3.5.3"
+    chokidar: "npm:^4.0.1"
     debug: "npm:^4.3.5"
     diff: "npm:^5.2.0"
     escape-string-regexp: "npm:^4.0.0"
@@ -12714,6 +11876,7 @@ __metadata:
     log-symbols: "npm:^4.1.0"
     minimatch: "npm:^5.1.6"
     ms: "npm:^2.1.3"
+    picocolors: "npm:^1.1.1"
     serialize-javascript: "npm:^6.0.2"
     strip-json-comments: "npm:^3.1.1"
     supports-color: "npm:^8.1.1"
@@ -12724,7 +11887,7 @@ __metadata:
   bin:
     _mocha: bin/_mocha
     mocha: bin/mocha.js
-  checksum: 10c0/81b80aa45a43c715c0761872a863b31a03232d1e01266ac3b344cadc2f959903d6aee63e53291a5007e35794b41670856f0e0945885e1d578eb011ea3c4341a3
+  checksum: 10c0/96897530585fbf4544adf218fa26fb3784c394a4b2e47c5710351907a8357283d42d52322c157d62b57a568e3d87594451de88d6f6e3008fbc51d23ec3dfabe3
   languageName: node
   linkType: hard
 
@@ -12736,9 +11899,9 @@ __metadata:
   linkType: hard
 
 "mrmime@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "mrmime@npm:2.0.0"
-  checksum: 10c0/312b35ed288986aec90955410b21ed7427fd1e4ee318cb5fc18765c8d029eeded9444faa46589e5b1ed6b35fb2054a802ac8dcb917ddf6b3e189cb3bf11a965c
+  version: 2.0.1
+  resolution: "mrmime@npm:2.0.1"
+  checksum: 10c0/af05afd95af202fdd620422f976ad67dc18e6ee29beb03dd1ce950ea6ef664de378e44197246df4c7cdd73d47f2e7143a6e26e473084b9e4aa2095c0ad1e1761
   languageName: node
   linkType: hard
 
@@ -12768,12 +11931,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.7":
-  version: 3.3.7
-  resolution: "nanoid@npm:3.3.7"
+"nanoid@npm:^3.3.8":
+  version: 3.3.11
+  resolution: "nanoid@npm:3.3.11"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10c0/e3fb661aa083454f40500473bb69eedb85dc160e763150b9a2c567c7e9ff560ce028a9f833123b618a6ea742e311138b591910e795614a629029e86e180660f3
+  checksum: 10c0/40e7f70b3d15f725ca072dfc4f74e81fcf1fbb02e491cf58ac0c79093adc9b0a73b152bcde57df4b79cd097e13023d7504acb38404a4da7bc1cd8e887b82fe0b
   languageName: node
   linkType: hard
 
@@ -12813,7 +11976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: 10c0/3ec9fd413e7bf071c937ae60d572bc67155262068ed522cf4b3be5edbe6ddf67d095ec03a3a14ebf8fc8e95f8e1d61be4869db0dbb0de696f6b837358bd43fc2
@@ -12827,6 +11990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"negotiator@npm:~0.6.4":
+  version: 0.6.4
+  resolution: "negotiator@npm:0.6.4"
+  checksum: 10c0/3e677139c7fb7628a6f36335bf11a885a62c21d5390204590a1a214a5631fcbe5ea74ef6a610b60afe84b4d975cbe0566a23f20ee17c77c73e74b80032108dea
+  languageName: node
+  linkType: hard
+
 "neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
@@ -12861,6 +12031,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "node-addon-api@npm:7.1.1"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10c0/fb32a206276d608037fa1bcd7e9921e177fe992fc610d098aa3128baca3c0050fc1e014fa007e9b3874cf865ddb4f5bd9f43ccb7cbbbe4efaff6a83e920b17e9
+  languageName: node
+  linkType: hard
+
 "node-forge@npm:^1":
   version: 1.3.1
   resolution: "node-forge@npm:1.3.1"
@@ -12869,22 +12048,22 @@ __metadata:
   linkType: hard
 
 "node-gyp@npm:latest":
-  version: 10.2.0
-  resolution: "node-gyp@npm:10.2.0"
+  version: 11.2.0
+  resolution: "node-gyp@npm:11.2.0"
   dependencies:
     env-paths: "npm:^2.2.0"
     exponential-backoff: "npm:^3.1.1"
-    glob: "npm:^10.3.10"
     graceful-fs: "npm:^4.2.6"
-    make-fetch-happen: "npm:^13.0.0"
-    nopt: "npm:^7.0.0"
-    proc-log: "npm:^4.1.0"
+    make-fetch-happen: "npm:^14.0.3"
+    nopt: "npm:^8.0.0"
+    proc-log: "npm:^5.0.0"
     semver: "npm:^7.3.5"
-    tar: "npm:^6.2.1"
-    which: "npm:^4.0.0"
+    tar: "npm:^7.4.3"
+    tinyglobby: "npm:^0.2.12"
+    which: "npm:^5.0.0"
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: 10c0/00630d67dbd09a45aee0a5d55c05e3916ca9e6d427ee4f7bc392d2d3dc5fad7449b21fc098dd38260a53d9dcc9c879b36704a1994235d4707e7271af7e9a835b
+  checksum: 10c0/bd8d8c76b06be761239b0c8680f655f6a6e90b48e44d43415b11c16f7e8c15be346fba0cbf71588c7cdfb52c419d928a7d3db353afc1d952d19756237d8f10b9
   languageName: node
   linkType: hard
 
@@ -12921,13 +12100,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.18":
-  version: 2.0.18
-  resolution: "node-releases@npm:2.0.18"
-  checksum: 10c0/786ac9db9d7226339e1dc84bbb42007cb054a346bd9257e6aa154d294f01bc6a6cddb1348fa099f079be6580acbb470e3c048effd5f719325abd0179e566fd27
-  languageName: node
-  linkType: hard
-
 "node-releases@npm:^2.0.19":
   version: 2.0.19
   resolution: "node-releases@npm:2.0.19"
@@ -12936,8 +12108,8 @@ __metadata:
   linkType: hard
 
 "node-stdlib-browser@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "node-stdlib-browser@npm:1.3.0"
+  version: 1.3.1
+  resolution: "node-stdlib-browser@npm:1.3.1"
   dependencies:
     assert: "npm:^2.0.0"
     browser-resolve: "npm:^2.0.0"
@@ -12946,7 +12118,7 @@ __metadata:
     console-browserify: "npm:^1.1.0"
     constants-browserify: "npm:^1.0.0"
     create-require: "npm:^1.1.1"
-    crypto-browserify: "npm:^3.11.0"
+    crypto-browserify: "npm:^3.12.1"
     domain-browser: "npm:4.22.0"
     events: "npm:^3.0.0"
     https-browserify: "npm:^1.0.0"
@@ -12966,18 +12138,18 @@ __metadata:
     url: "npm:^0.11.4"
     util: "npm:^0.12.4"
     vm-browserify: "npm:^1.0.1"
-  checksum: 10c0/e617f92f6af5a031fb9e670a04e1cf5d74e09ac46e182c784c5d5fff44c36d47f208ac01f267ec75d83c125a30e2c006090f676cd71d35e99a4c8a196a90cfff
+  checksum: 10c0/5b0cb5d4499b1b1c73f54db3e9e69b2a3a8aebe2ead2e356b0a03c1dfca6b5c5d2f6516e24301e76dc7b68999b9d0ae3da6c3f1dec421eed80ad6cb9eec0f356
   languageName: node
   linkType: hard
 
-"nopt@npm:^7.0.0":
-  version: 7.2.1
-  resolution: "nopt@npm:7.2.1"
+"nopt@npm:^8.0.0":
+  version: 8.1.0
+  resolution: "nopt@npm:8.1.0"
   dependencies:
-    abbrev: "npm:^2.0.0"
+    abbrev: "npm:^3.0.0"
   bin:
     nopt: bin/nopt.js
-  checksum: 10c0/a069c7c736767121242037a22a788863accfa932ab285a1eb569eb8cd534b09d17206f68c37f096ae785647435e0c5a5a0a67b42ec743e481a455e5ae6a6df81
+  checksum: 10c0/62e9ea70c7a3eb91d162d2c706b6606c041e4e7b547cbbb48f8b3695af457dd6479904d7ace600856bf923dd8d1ed0696f06195c8c20f02ac87c1da0e1d315ef
   languageName: node
   linkType: hard
 
@@ -13013,17 +12185,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nwsapi@npm:^2.2.16":
-  version: 2.2.16
-  resolution: "nwsapi@npm:2.2.16"
-  checksum: 10c0/0aa0637f4d51043d0183d994e08336bae996b03b42984381bf09ebdf3ff4909c018eda6b2a8aba0a08f3ea8303db8a0dad0608b38dc0bff15fd87017286ae21a
-  languageName: node
-  linkType: hard
-
-"nwsapi@npm:^2.2.2":
-  version: 2.2.13
-  resolution: "nwsapi@npm:2.2.13"
-  checksum: 10c0/9dbd1071bba3570ef0b046c43c03d0584c461063f27539ba39f4185188e9d5c10cb06fd4426cdb300bb83020c3daa2c8f4fa9e8a070299539ac4007433357ac0
+"nwsapi@npm:^2.2.16, nwsapi@npm:^2.2.2":
+  version: 2.2.20
+  resolution: "nwsapi@npm:2.2.20"
+  checksum: 10c0/07f4dafa3186aef7c007863e90acd4342a34ba9d44b22f14f644fdb311f6086887e21c2fc15efaa826c2bc39ab2bc841364a1a630e7c87e0cb723ba59d729297
   languageName: node
   linkType: hard
 
@@ -13034,17 +12199,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.1":
-  version: 1.13.2
-  resolution: "object-inspect@npm:1.13.2"
-  checksum: 10c0/b97835b4c91ec37b5fd71add84f21c3f1047d1d155d00c0fcd6699516c256d4fcc6ff17a1aced873197fe447f91a3964178fd2a67a1ee2120cdaf60e81a050b4
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.3":
-  version: 1.13.3
-  resolution: "object-inspect@npm:1.13.3"
-  checksum: 10c0/cc3f15213406be89ffdc54b525e115156086796a515410a8d390215915db9f23c8eab485a06f1297402f440a33715fe8f71a528c1dcbad6e1a3bcaf5a46921d4
+  version: 1.13.4
+  resolution: "object-inspect@npm:1.13.4"
+  checksum: 10c0/d7f8711e803b96ea3191c745d6f8056ce1f2496e530e6a19a0e92d89b0fa3c76d910c31f0aa270432db6bd3b2f85500a376a83aaba849a8d518c8845b3211692
   languageName: node
   linkType: hard
 
@@ -13065,19 +12223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "object.assign@npm:4.1.5"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    define-properties: "npm:^1.2.1"
-    has-symbols: "npm:^1.0.3"
-    object-keys: "npm:^1.1.1"
-  checksum: 10c0/60108e1fa2706f22554a4648299b0955236c62b3685c52abf4988d14fffb0e7731e00aa8c6448397e3eb63d087dcc124a9f21e1980f36d0b2667f3c18bacd469
-  languageName: node
-  linkType: hard
-
-"object.assign@npm:^4.1.7":
+"object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
   version: 4.1.7
   resolution: "object.assign@npm:4.1.7"
   dependencies:
@@ -13126,18 +12272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.6, object.values@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "object.values@npm:1.2.0"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/15809dc40fd6c5529501324fec5ff08570b7d70fb5ebbe8e2b3901afec35cf2b3dc484d1210c6c642cd3e7e0a5e18dd1d6850115337fef46bdae14ab0cb18ac3
-  languageName: node
-  linkType: hard
-
-"object.values@npm:^1.2.1":
+"object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1":
   version: 1.2.1
   resolution: "object.values@npm:1.2.1"
   dependencies:
@@ -13218,14 +12353,14 @@ __metadata:
   linkType: hard
 
 "open@npm:^10.0.3":
-  version: 10.1.0
-  resolution: "open@npm:10.1.0"
+  version: 10.1.2
+  resolution: "open@npm:10.1.2"
   dependencies:
     default-browser: "npm:^5.2.1"
     define-lazy-prop: "npm:^3.0.0"
     is-inside-container: "npm:^1.0.0"
     is-wsl: "npm:^3.1.0"
-  checksum: 10c0/c86d0b94503d5f735f674158d5c5d339c25ec2927562f00ee74590727292ed23e1b8d9336cb41ffa7e1fa4d3641d29b199b4ea37c78cb557d72b511743e90ebb
+  checksum: 10c0/1bee796f06e549ce764f693272100323fbc04da8fa3c5b0402d6c2d11b3d76fa0aac0be7535e710015ff035326638e3b9a563f3b0e7ac3266473ed5663caae6d
   languageName: node
   linkType: hard
 
@@ -13277,6 +12412,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"own-keys@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "own-keys@npm:1.0.1"
+  dependencies:
+    get-intrinsic: "npm:^1.2.6"
+    object-keys: "npm:^1.1.1"
+    safe-push-apply: "npm:^1.0.0"
+  checksum: 10c0/6dfeb3455bff92ec3f16a982d4e3e65676345f6902d9f5ded1d8265a6318d0200ce461956d6d1c70053c7fe9f9fe65e552faac03f8140d37ef0fdd108e67013a
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^1.0.0":
   version: 1.1.0
   resolution: "p-cancelable@npm:1.1.0"
@@ -13329,14 +12475,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-map@npm:^7.0.2":
+  version: 7.0.3
+  resolution: "p-map@npm:7.0.3"
+  checksum: 10c0/46091610da2b38ce47bcd1d8b4835a6fa4e832848a6682cf1652bc93915770f4617afc844c10a77d1b3e56d2472bb2d5622353fa3ead01a7f42b04fc8e744a5c
+  languageName: node
+  linkType: hard
+
 "p-retry@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "p-retry@npm:6.2.0"
+  version: 6.2.1
+  resolution: "p-retry@npm:6.2.1"
   dependencies:
     "@types/retry": "npm:0.12.2"
     is-network-error: "npm:^1.0.0"
     retry: "npm:^0.13.1"
-  checksum: 10c0/3277f2a8450fb1429c29c432d24c5965b32f187228f1beea56f5d49209717588a7dc0415def1c653f60e0d15ed72c56dacaa2d5fdfa71b0f860592b0aa6ce823
+  checksum: 10c0/10d014900107da2c7071ad60fffe4951675f09930b7a91681643ea224ae05649c05001d9e78436d902fe8b116d520dd1f60e72e091de097e2640979d56f3fb60
   languageName: node
   linkType: hard
 
@@ -13348,8 +12501,8 @@ __metadata:
   linkType: hard
 
 "pac-proxy-agent@npm:^7.0.2":
-  version: 7.1.0
-  resolution: "pac-proxy-agent@npm:7.1.0"
+  version: 7.2.0
+  resolution: "pac-proxy-agent@npm:7.2.0"
   dependencies:
     "@tootallnate/quickjs-emscripten": "npm:^0.23.0"
     agent-base: "npm:^7.1.2"
@@ -13359,7 +12512,7 @@ __metadata:
     https-proxy-agent: "npm:^7.0.6"
     pac-resolver: "npm:^7.0.1"
     socks-proxy-agent: "npm:^8.0.5"
-  checksum: 10c0/072528e3e7a0bb1187d5c09687a112ae230f6fa0d974e7460eaa0c1406666930ed53ffadfbfadfe8e1c7a8cc8d6ae26a4db96e27723d40a918c8454f0f1a012a
+  checksum: 10c0/0265c17c9401c2ea735697931a6553a0c6d8b20c4d7d4e3b3a0506080ba69a8d5ad656e2a6be875411212e2b6ed7a4d9526dd3997e08581fdfb1cbcad454c296
   languageName: node
   linkType: hard
 
@@ -13455,21 +12608,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^7.0.0, parse5@npm:^7.1.1":
-  version: 7.1.2
-  resolution: "parse5@npm:7.1.2"
-  dependencies:
-    entities: "npm:^4.4.0"
-  checksum: 10c0/297d7af8224f4b5cb7f6617ecdae98eeaed7f8cbd78956c42785e230505d5a4f07cef352af10d3006fa5c1544b76b57784d3a22d861ae071bbc460c649482bf4
-  languageName: node
-  linkType: hard
-
-"parse5@npm:^7.2.1":
-  version: 7.2.1
-  resolution: "parse5@npm:7.2.1"
+"parse5@npm:^7.0.0, parse5@npm:^7.1.1, parse5@npm:^7.2.1":
+  version: 7.3.0
+  resolution: "parse5@npm:7.3.0"
   dependencies:
-    entities: "npm:^4.5.0"
-  checksum: 10c0/829d37a0c709215a887e410a7118d754f8e1afd7edb529db95bc7bbf8045fb0266a7b67801331d8e8d9d073ea75793624ec27ce9ff3b96862c3b9008f4d68e80
+    entities: "npm:^6.0.0"
+  checksum: 10c0/7fd2e4e247e85241d6f2a464d0085eed599a26d7b0a5233790c49f53473232eb85350e8133344d9b3fd58b89339e7ad7270fe1f89d28abe50674ec97b87f80b5
   languageName: node
   linkType: hard
 
@@ -13604,14 +12748,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "picocolors@npm:1.1.0"
-  checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023
-  languageName: node
-  linkType: hard
-
-"picocolors@npm:^1.1.1":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
@@ -13625,6 +12762,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
 "pidtree@npm:^0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
@@ -13649,9 +12793,9 @@ __metadata:
   linkType: hard
 
 "pirates@npm:^4.0.4":
-  version: 4.0.6
-  resolution: "pirates@npm:4.0.6"
-  checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
+  version: 4.0.7
+  resolution: "pirates@npm:4.0.7"
+  checksum: 10c0/a51f108dd811beb779d58a76864bbd49e239fa40c7984cd11596c75a121a8cc789f1c8971d8bb15f0dbf9d48b76c05bb62fcbce840f89b688c0fa64b37e8478a
   languageName: node
   linkType: hard
 
@@ -13688,20 +12832,19 @@ __metadata:
   linkType: hard
 
 "portfinder@npm:^1.0.28":
-  version: 1.0.32
-  resolution: "portfinder@npm:1.0.32"
+  version: 1.0.37
+  resolution: "portfinder@npm:1.0.37"
   dependencies:
-    async: "npm:^2.6.4"
-    debug: "npm:^3.2.7"
-    mkdirp: "npm:^0.5.6"
-  checksum: 10c0/cef8b567b78aabccc59fe8e103bac8b394bb45a6a69be626608f099f454124c775aaf47b274c006332c07ab3f501cde55e49aaeb9d49d78d90362d776a565cbf
+    async: "npm:^3.2.6"
+    debug: "npm:^4.3.6"
+  checksum: 10c0/eabd2764ced7bb0e6da7a1382bb77f9531309f7782fb6169021d05eecff0c0a17958bcf87573047a164dd0bb23f294d5d74b08ffe58c47005c28ed92eea9a6a7
   languageName: node
   linkType: hard
 
 "possible-typed-array-names@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "possible-typed-array-names@npm:1.0.0"
-  checksum: 10c0/d9aa22d31f4f7680e20269db76791b41c3a32c01a373e25f8a4813b4d45f7456bfc2b6d68f752dc4aab0e0bb0721cb3d76fb678c9101cb7a16316664bc2c73fd
+  version: 1.1.0
+  resolution: "possible-typed-array-names@npm:1.1.0"
+  checksum: 10c0/c810983414142071da1d644662ce4caebce890203eb2bc7bf119f37f3fe5796226e117e6cca146b521921fa6531072674174a3325066ac66fce089a53e1e5196
   languageName: node
   linkType: hard
 
@@ -13764,26 +12907,26 @@ __metadata:
   linkType: hard
 
 "postcss-modules-local-by-default@npm:^4.0.4, postcss-modules-local-by-default@npm:^4.0.5":
-  version: 4.0.5
-  resolution: "postcss-modules-local-by-default@npm:4.0.5"
+  version: 4.2.0
+  resolution: "postcss-modules-local-by-default@npm:4.2.0"
   dependencies:
     icss-utils: "npm:^5.0.0"
-    postcss-selector-parser: "npm:^6.0.2"
+    postcss-selector-parser: "npm:^7.0.0"
     postcss-value-parser: "npm:^4.1.0"
   peerDependencies:
     postcss: ^8.1.0
-  checksum: 10c0/f4ad35abeb685ecb25f80c93d9fe23c8b89ee45ac4185f3560e701b4d7372f9b798577e79c5ed03b6d9c80bc923b001210c127c04ced781f43cda9e32b202a5b
+  checksum: 10c0/b0b83feb2a4b61f5383979d37f23116c99bc146eba1741ca3cf1acca0e4d0dbf293ac1810a6ab4eccbe1ee76440dd0a9eb2db5b3bba4f99fc1b3ded16baa6358
   languageName: node
   linkType: hard
 
 "postcss-modules-scope@npm:^3.1.1, postcss-modules-scope@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "postcss-modules-scope@npm:3.2.0"
+  version: 3.2.1
+  resolution: "postcss-modules-scope@npm:3.2.1"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.4"
+    postcss-selector-parser: "npm:^7.0.0"
   peerDependencies:
     postcss: ^8.1.0
-  checksum: 10c0/a2f5ffe372169b3feb8628cd785eb748bf12e344cfa57bce9e5cdc4fa5adcdb40d36daa86bb35dad53427703b185772aad08825b5783f745fcb1b6039454a84b
+  checksum: 10c0/bd2d81f79e3da0ef6365b8e2c78cc91469d05b58046b4601592cdeef6c4050ed8fe1478ae000a1608042fc7e692cb51fecbd2d9bce3f4eace4d32e883ffca10b
   languageName: node
   linkType: hard
 
@@ -13816,13 +12959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
-  version: 6.1.2
-  resolution: "postcss-selector-parser@npm:6.1.2"
+"postcss-selector-parser@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "postcss-selector-parser@npm:7.1.0"
   dependencies:
     cssesc: "npm:^3.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e
+  checksum: 10c0/0fef257cfd1c0fe93c18a3f8a6e739b4438b527054fd77e9a62730a89b2d0ded1b59314a7e4aaa55bc256204f40830fecd2eb50f20f8cb7ab3a10b52aa06c8aa
   languageName: node
   linkType: hard
 
@@ -13834,13 +12977,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.0.0, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
-  version: 8.4.47
-  resolution: "postcss@npm:8.4.47"
+  version: 8.5.3
+  resolution: "postcss@npm:8.5.3"
   dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.1.0"
+    nanoid: "npm:^3.3.8"
+    picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/929f68b5081b7202709456532cee2a145c1843d391508c5a09de2517e8c4791638f71dd63b1898dba6712f8839d7a6da046c72a5e44c162e908f5911f57b5f44
+  checksum: 10c0/b75510d7b28c3ab728c8733dd01538314a18c52af426f199a3c9177e63eb08602a3938bfb66b62dc01350b9aed62087eabbf229af97a1659eb8d3513cec823b3
   languageName: node
   linkType: hard
 
@@ -13905,10 +13048,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "proc-log@npm:4.2.0"
-  checksum: 10c0/17db4757c2a5c44c1e545170e6c70a26f7de58feb985091fb1763f5081cab3d01b181fb2dd240c9f4a4255a1d9227d163d5771b7e69c9e49a561692db865efb9
+"proc-log@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "proc-log@npm:5.0.0"
+  checksum: 10c0/bbe5edb944b0ad63387a1d5b1911ae93e05ce8d0f60de1035b218cdcceedfe39dbd2c697853355b70f1a090f8f58fe90da487c85216bf9671f9499d1a897e9e3
   languageName: node
   linkType: hard
 
@@ -13989,9 +13132,11 @@ __metadata:
   linkType: hard
 
 "psl@npm:^1.1.33":
-  version: 1.9.0
-  resolution: "psl@npm:1.9.0"
-  checksum: 10c0/6a3f805fdab9442f44de4ba23880c4eba26b20c8e8e0830eff1cb31007f6825dace61d17203c58bfe36946842140c97a1ba7f67bc63ca2d88a7ee052b65d97ab
+  version: 1.15.0
+  resolution: "psl@npm:1.15.0"
+  dependencies:
+    punycode: "npm:^2.3.1"
+  checksum: 10c0/d8d45a99e4ca62ca12ac3c373e63d80d2368d38892daa40cfddaa1eb908be98cd549ac059783ef3a56cfd96d57ae8e2fd9ae53d1378d90d42bc661ff924e102a
   languageName: node
   linkType: hard
 
@@ -14049,7 +13194,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.13.0, qs@npm:^6.12.3, qs@npm:^6.4.0":
+"qs@npm:6.13.0":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
   dependencies:
@@ -14058,7 +13203,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.14.0, qs@npm:^6.14.0":
+"qs@npm:6.14.0, qs@npm:^6.12.3, qs@npm:^6.14.0, qs@npm:^6.4.0":
   version: 6.14.0
   resolution: "qs@npm:6.14.0"
   dependencies:
@@ -14396,9 +13541,9 @@ __metadata:
   linkType: hard
 
 "readdirp@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "readdirp@npm:4.0.2"
-  checksum: 10c0/a16ecd8ef3286dcd90648c3b103e3826db2b766cdb4a988752c43a83f683d01c7059158d623cbcd8bdfb39e65d302d285be2d208e7d9f34d022d912b929217dd
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 10c0/60a14f7619dec48c9c850255cd523e2717001b0e179dc7037cfa0895da7b9e9ab07532d324bfb118d73a710887d1e35f79c495fa91582784493e085d18c72c62
   languageName: node
   linkType: hard
 
@@ -14439,19 +13584,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.8, reflect.getprototypeof@npm:^1.0.9":
-  version: 1.0.9
-  resolution: "reflect.getprototypeof@npm:1.0.9"
+"reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
+  version: 1.0.10
+  resolution: "reflect.getprototypeof@npm:1.0.10"
   dependencies:
     call-bind: "npm:^1.0.8"
     define-properties: "npm:^1.2.1"
-    dunder-proto: "npm:^1.0.1"
-    es-abstract: "npm:^1.23.6"
+    es-abstract: "npm:^1.23.9"
     es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.6"
-    gopd: "npm:^1.2.0"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.7"
+    get-proto: "npm:^1.0.1"
     which-builtin-type: "npm:^1.2.1"
-  checksum: 10c0/db42118a8699fa8b5856e6aa06eac32498a7bbc3c22832729049501733d060662bf16f204c546db87df8bb78b36491ecd6b3b0478c0a27be6c8302cc0770a42e
+  checksum: 10c0/7facec28c8008876f8ab98e80b7b9cb4b1e9224353fd4756dda5f2a4ab0d30fa0a5074777c6df24e1e0af463a2697513b0a11e548d99cf52f21f7bc6ba48d3ac
   languageName: node
   linkType: hard
 
@@ -14478,13 +13623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.14.0":
-  version: 0.14.1
-  resolution: "regenerator-runtime@npm:0.14.1"
-  checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4
-  languageName: node
-  linkType: hard
-
 "regexp-ast-analysis@npm:^0.7.0":
   version: 0.7.1
   resolution: "regexp-ast-analysis@npm:0.7.1"
@@ -14495,29 +13633,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.2, regexp.prototype.flags@npm:^1.5.3":
-  version: 1.5.3
-  resolution: "regexp.prototype.flags@npm:1.5.3"
+"regexp.prototype.flags@npm:^1.5.3":
+  version: 1.5.4
+  resolution: "regexp.prototype.flags@npm:1.5.4"
   dependencies:
-    call-bind: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
     define-properties: "npm:^1.2.1"
     es-errors: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
     set-function-name: "npm:^2.0.2"
-  checksum: 10c0/e1a7c7dc42cc91abf73e47a269c4b3a8f225321b7f617baa25821f6a123a91d23a73b5152f21872c566e699207e1135d075d2251cd3e84cc96d82a910adf6020
-  languageName: node
-  linkType: hard
-
-"regexpu-core@npm:^6.1.1":
-  version: 6.1.1
-  resolution: "regexpu-core@npm:6.1.1"
-  dependencies:
-    regenerate: "npm:^1.4.2"
-    regenerate-unicode-properties: "npm:^10.2.0"
-    regjsgen: "npm:^0.8.0"
-    regjsparser: "npm:^0.11.0"
-    unicode-match-property-ecmascript: "npm:^2.0.0"
-    unicode-match-property-value-ecmascript: "npm:^2.1.0"
-  checksum: 10c0/07d49697e20f9b65977535abba4858b7f5171c13f7c366be53ec1886d3d5f69f1b98cc6a6e63cf271adda077c3366a4c851c7473c28bbd69cf5a6b6b008efc3e
+  checksum: 10c0/83b88e6115b4af1c537f8dabf5c3744032cb875d63bc05c288b1b8c0ef37cbe55353f95d8ca817e8843806e3e150b118bc624e4279b24b4776b4198232735a77
   languageName: node
   linkType: hard
 
@@ -14560,17 +13686,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regjsparser@npm:^0.11.0":
-  version: 0.11.1
-  resolution: "regjsparser@npm:0.11.1"
-  dependencies:
-    jsesc: "npm:~3.0.2"
-  bin:
-    regjsparser: bin/parser
-  checksum: 10c0/be4b40981a596b31eacd84ee12cfa474f1d33a6c05f7e995e8ec9d5ad8f1c3fbf7a5b690a05c443e1f312a1c0b16d4ea0b3384596a61d4fda97aa322879bb3cd
-  languageName: node
-  linkType: hard
-
 "regjsparser@npm:^0.12.0":
   version: 0.12.0
   resolution: "regjsparser@npm:0.12.0"
@@ -14674,74 +13789,48 @@ __metadata:
   linkType: hard
 
 "resolve.exports@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "resolve.exports@npm:2.0.2"
-  checksum: 10c0/cc4cffdc25447cf34730f388dca5021156ba9302a3bad3d7f168e790dc74b2827dff603f1bc6ad3d299bac269828dca96dd77e036dc9fba6a2a1807c47ab5c98
-  languageName: node
-  linkType: hard
-
-"resolve@npm:^1.1.7, resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.4":
-  version: 1.22.8
-  resolution: "resolve@npm:1.22.8"
-  dependencies:
-    is-core-module: "npm:^2.13.0"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10c0/07e179f4375e1fd072cfb72ad66d78547f86e6196c4014b31cb0b8bb1db5f7ca871f922d08da0fbc05b94e9fd42206f819648fa3b5b873ebbc8e1dc68fec433a
+  version: 2.0.3
+  resolution: "resolve.exports@npm:2.0.3"
+  checksum: 10c0/1ade1493f4642a6267d0a5e68faeac20b3d220f18c28b140343feb83694d8fed7a286852aef43689d16042c61e2ddb270be6578ad4a13990769e12065191200d
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.17.0":
-  version: 1.22.9
-  resolution: "resolve@npm:1.22.9"
+"resolve@npm:^1.1.7, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.20.0, resolve@npm:^1.22.4":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
   dependencies:
     is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/314cea2c47f956743f106256854203bd43a60a3ec6fb85ee6894e75cf4b16004952e4280319bfeb4c6fb1246e3ecd27f2699abb2e2b316b7c5727ec6491505c9
+  checksum: 10c0/8967e1f4e2cc40f79b7e080b4582b9a8c5ee36ffb46041dccb20e6461161adf69f843b43067b4a375de926a2cd669157e29a29578191def399dd5ef89a1b5203
   languageName: node
   linkType: hard
 
 "resolve@npm:^2.0.0-next.5":
   version: 2.0.0-next.5
-  resolution: "resolve@npm:2.0.0-next.5"
-  dependencies:
-    is-core-module: "npm:^2.13.0"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10c0/a6c33555e3482ea2ec4c6e3d3bf0d78128abf69dca99ae468e64f1e30acaa318fd267fb66c8836b04d558d3e2d6ed875fe388067e7d8e0de647d3c21af21c43a
-  languageName: node
-  linkType: hard
-
-"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
-  version: 1.22.8
-  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
+  resolution: "resolve@npm:2.0.0-next.5"
   dependencies:
     is-core-module: "npm:^2.13.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729
+  checksum: 10c0/a6c33555e3482ea2ec4c6e3d3bf0d78128abf69dca99ae468e64f1e30acaa318fd267fb66c8836b04d558d3e2d6ed875fe388067e7d8e0de647d3c21af21c43a
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>":
-  version: 1.22.9
-  resolution: "resolve@patch:resolve@npm%3A1.22.9#optional!builtin<compat/resolve>::version=1.22.9&hash=c3c19d"
+"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+  version: 1.22.10
+  resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
     is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/dadd8c85040784fdc18d6edc0cc27f7f35776c5d904b030ea67485ab9a5607568187afcfaf157e6fa9db9274481d155356bc42ca578c5578be25965b880d1e80
+  checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939
   languageName: node
   linkType: hard
 
@@ -14809,9 +13898,9 @@ __metadata:
   linkType: hard
 
 "reusify@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "reusify@npm:1.0.4"
-  checksum: 10c0/c19ef26e4e188f408922c46f7ff480d38e8dfc55d448310dfb518736b23ed2c4f547fb64a6ed5bdba92cd7e7ddc889d36ff78f794816d5e71498d645ef476107
+  version: 1.1.0
+  resolution: "reusify@npm:1.1.0"
+  checksum: 10c0/4eff0d4a5f9383566c7d7ec437b671cc51b25963bd61bf127c3f3d3f68e44a026d99b8d2f1ad344afff8d278a8fe70a8ea092650a716d22287e8bef7126bb2fa
   languageName: node
   linkType: hard
 
@@ -14880,23 +13969,11 @@ __metadata:
   linkType: hard
 
 "rxjs@npm:^7.5.1":
-  version: 7.8.1
-  resolution: "rxjs@npm:7.8.1"
+  version: 7.8.2
+  resolution: "rxjs@npm:7.8.2"
   dependencies:
     tslib: "npm:^2.1.0"
-  checksum: 10c0/3c49c1ecd66170b175c9cacf5cef67f8914dcbc7cd0162855538d365c83fea631167cacb644b3ce533b2ea0e9a4d0b12175186985f89d75abe73dbd8f7f06f68
-  languageName: node
-  linkType: hard
-
-"safe-array-concat@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "safe-array-concat@npm:1.1.2"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-    has-symbols: "npm:^1.0.3"
-    isarray: "npm:^2.0.5"
-  checksum: 10c0/12f9fdb01c8585e199a347eacc3bae7b5164ae805cdc8c6707199dbad5b9e30001a50a43c4ee24dc9ea32dbb7279397850e9208a7e217f4d8b1cf5d90129dec9
+  checksum: 10c0/1fcd33d2066ada98ba8f21fcbbcaee9f0b271de1d38dc7f4e256bfbc6ffcdde68c8bfb69093de7eeb46f24b1fb820620bf0223706cff26b4ab99a7ff7b2e2c45
   languageName: node
   linkType: hard
 
@@ -14927,18 +14004,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-regex-test@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "safe-regex-test@npm:1.0.3"
+"safe-push-apply@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "safe-push-apply@npm:1.0.0"
   dependencies:
-    call-bind: "npm:^1.0.6"
     es-errors: "npm:^1.3.0"
-    is-regex: "npm:^1.1.4"
-  checksum: 10c0/900bf7c98dc58f08d8523b7012b468e4eb757afa624f198902c0643d7008ba777b0bdc35810ba0b758671ce887617295fb742b3f3968991b178ceca54cb07603
+    isarray: "npm:^2.0.5"
+  checksum: 10c0/831f1c9aae7436429e7862c7e46f847dfe490afac20d0ee61bae06108dbf5c745a0de3568ada30ccdd3eeb0864ca8331b2eef703abd69bfea0745b21fd320750
   languageName: node
   linkType: hard
 
-"safe-regex-test@npm:^1.1.0":
+"safe-regex-test@npm:^1.0.3, safe-regex-test@npm:^1.1.0":
   version: 1.1.0
   resolution: "safe-regex-test@npm:1.1.0"
   dependencies:
@@ -14957,15 +14033,19 @@ __metadata:
   linkType: hard
 
 "sass@npm:^1.70.0":
-  version: 1.79.4
-  resolution: "sass@npm:1.79.4"
+  version: 1.87.0
+  resolution: "sass@npm:1.87.0"
   dependencies:
+    "@parcel/watcher": "npm:^2.4.1"
     chokidar: "npm:^4.0.0"
-    immutable: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
     source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
   bin:
     sass: sass.js
-  checksum: 10c0/505ff0d9267d0fb990971e617acfeabf7c060c55d4cef68fe8a4bc693e7ea88ae7d7caeca3975e4b453459ba4a707b6e5b6979fc9395a7e08f0a43ca6aed06b8
+  checksum: 10c0/bd245faf14e4783dc547765350cf05817edaac0d6d6f6e4da8ab751f3eb3cc3873afd563c0ce416a24aa6c9c4e9023b05096447fc006660a01f76adffb54fbc6
   languageName: node
   linkType: hard
 
@@ -15012,31 +14092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "schema-utils@npm:4.2.0"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.9"
-    ajv: "npm:^8.9.0"
-    ajv-formats: "npm:^2.1.1"
-    ajv-keywords: "npm:^5.1.0"
-  checksum: 10c0/8dab7e7800316387fd8569870b4b668cfcecf95ac551e369ea799bbcbfb63fb0365366d4b59f64822c9f7904d8c5afcfaf5a6124a4b08783e558cd25f299a6b4
-  languageName: node
-  linkType: hard
-
-"schema-utils@npm:^4.3.0":
-  version: 4.3.0
-  resolution: "schema-utils@npm:4.3.0"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.9"
-    ajv: "npm:^8.9.0"
-    ajv-formats: "npm:^2.1.1"
-    ajv-keywords: "npm:^5.1.0"
-  checksum: 10c0/c23f0fa73ef71a01d4a2bb7af4c91e0d356ec640e071aa2d06ea5e67f042962bb7ac7c29a60a295bb0125878801bc3209197a2b8a833dd25bd38e37c3ed21427
-  languageName: node
-  linkType: hard
-
-"schema-utils@npm:^4.3.2":
+"schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0, schema-utils@npm:^4.3.0, schema-utils@npm:^4.3.2":
   version: 4.3.2
   resolution: "schema-utils@npm:4.3.2"
   dependencies:
@@ -15101,7 +14157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.7.1, semver@npm:^7.7.1":
+"semver@npm:7.7.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3, semver@npm:^7.7.1":
   version: 7.7.1
   resolution: "semver@npm:7.7.1"
   bin:
@@ -15128,15 +14184,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3":
-  version: 7.6.3
-  resolution: "semver@npm:7.6.3"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
-  languageName: node
-  linkType: hard
-
 "send@npm:0.19.0":
   version: 0.19.0
   resolution: "send@npm:0.19.0"
@@ -15232,7 +14279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
+"set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
   dependencies:
@@ -15258,6 +14305,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-proto@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "set-proto@npm:1.0.0"
+  dependencies:
+    dunder-proto: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10c0/ca5c3ccbba479d07c30460e367e66337cec825560b11e8ba9c5ebe13a2a0d6021ae34eddf94ff3dfe17a3104dc1f191519cb6c48378b503e5c3f36393938776a
+  languageName: node
+  linkType: hard
+
 "setimmediate@npm:^1.0.4":
   version: 1.0.5
   resolution: "setimmediate@npm:1.0.5"
@@ -15324,9 +14382,9 @@ __metadata:
   linkType: hard
 
 "shell-quote@npm:^1.8.1":
-  version: 1.8.1
-  resolution: "shell-quote@npm:1.8.1"
-  checksum: 10c0/8cec6fd827bad74d0a49347057d40dfea1e01f12a6123bf82c4649f3ef152fc2bc6d6176e6376bffcd205d9d0ccb4f1f9acae889384d20baff92186f01ea455a
+  version: 1.8.2
+  resolution: "shell-quote@npm:1.8.2"
+  checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1
   languageName: node
   linkType: hard
 
@@ -15372,19 +14430,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "side-channel@npm:1.0.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.4"
-    object-inspect: "npm:^1.13.1"
-  checksum: 10c0/d2afd163dc733cc0a39aa6f7e39bf0c436293510dbccbff446733daeaf295857dbccf94297092ec8c53e2503acac30f0b78830876f0485991d62a90e9cad305f
-  languageName: node
-  linkType: hard
-
-"side-channel@npm:^1.1.0":
+"side-channel@npm:^1.0.6, side-channel@npm:^1.1.0":
   version: 1.1.0
   resolution: "side-channel@npm:1.1.0"
   dependencies:
@@ -15529,18 +14575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socks-proxy-agent@npm:^8.0.3":
-  version: 8.0.4
-  resolution: "socks-proxy-agent@npm:8.0.4"
-  dependencies:
-    agent-base: "npm:^7.1.1"
-    debug: "npm:^4.3.4"
-    socks: "npm:^2.8.3"
-  checksum: 10c0/345593bb21b95b0508e63e703c84da11549f0a2657d6b4e3ee3612c312cb3a907eac10e53b23ede3557c6601d63252103494caa306b66560f43af7b98f53957a
-  languageName: node
-  linkType: hard
-
-"socks-proxy-agent@npm:^8.0.5":
+"socks-proxy-agent@npm:^8.0.3, socks-proxy-agent@npm:^8.0.5":
   version: 8.0.5
   resolution: "socks-proxy-agent@npm:8.0.5"
   dependencies:
@@ -15552,12 +14587,12 @@ __metadata:
   linkType: hard
 
 "socks@npm:^2.8.3":
-  version: 2.8.3
-  resolution: "socks@npm:2.8.3"
+  version: 2.8.4
+  resolution: "socks@npm:2.8.4"
   dependencies:
     ip-address: "npm:^9.0.5"
     smart-buffer: "npm:^4.2.0"
-  checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7
+  checksum: 10c0/00c3271e233ccf1fb83a3dd2060b94cc37817e0f797a93c560b9a7a86c4a0ec2961fb31263bdd24a3c28945e24868b5f063cd98744171d9e942c513454b50ae5
   languageName: node
   linkType: hard
 
@@ -15683,12 +14718,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ssri@npm:^10.0.0":
-  version: 10.0.6
-  resolution: "ssri@npm:10.0.6"
+"ssri@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "ssri@npm:12.0.0"
   dependencies:
     minipass: "npm:^7.0.3"
-  checksum: 10c0/e5a1e23a4057a86a97971465418f22ea89bd439ac36ade88812dd920e4e61873e8abd6a9b72a03a67ef50faa00a2daf1ab745c5a15b46d03e0544a0296354227
+  checksum: 10c0/caddd5f544b2006e88fa6b0124d8d7b28208b83c72d7672d5ade44d794525d23b540f3396108c4eb9280dcb7c01f0bef50682f5b4b2c34291f7c5e211fd1417d
   languageName: node
   linkType: hard
 
@@ -15858,30 +14893,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trim@npm:^1.2.9":
-  version: 1.2.9
-  resolution: "string.prototype.trim@npm:1.2.9"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.0"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/dcef1a0fb61d255778155006b372dff8cc6c4394bc39869117e4241f41a2c52899c0d263ffc7738a1f9e61488c490b05c0427faa15151efad721e1a9fb2663c2
-  languageName: node
-  linkType: hard
-
-"string.prototype.trimend@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "string.prototype.trimend@npm:1.0.8"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/0a0b54c17c070551b38e756ae271865ac6cc5f60dabf2e7e343cceae7d9b02e1a1120a824e090e79da1b041a74464e8477e2da43e2775c85392be30a6f60963c
-  languageName: node
-  linkType: hard
-
-"string.prototype.trimend@npm:^1.0.9":
+"string.prototype.trimend@npm:^1.0.8, string.prototype.trimend@npm:^1.0.9":
   version: 1.0.9
   resolution: "string.prototype.trimend@npm:1.0.9"
   dependencies:
@@ -16033,15 +15045,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0":
-  version: 5.5.0
-  resolution: "supports-color@npm:5.5.0"
-  dependencies:
-    has-flag: "npm:^3.0.0"
-  checksum: 10c0/6ae5ff319bfbb021f8a86da8ea1f8db52fac8bd4d499492e30ec17095b58af11f0c55f8577390a749b1c4dde691b6a0315dab78f5f54c9b3d83f8fb5905c1c05
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^7.1.0, supports-color@npm:^7.2.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -16089,12 +15092,12 @@ __metadata:
   linkType: hard
 
 "synckit@npm:^0.11.0":
-  version: 0.11.3
-  resolution: "synckit@npm:0.11.3"
+  version: 0.11.4
+  resolution: "synckit@npm:0.11.4"
   dependencies:
-    "@pkgr/core": "npm:^0.2.1"
+    "@pkgr/core": "npm:^0.2.3"
     tslib: "npm:^2.8.1"
-  checksum: 10c0/7b08187eb13047314ddb71d4868fb7c1f75b15f3a60ce7881bc2adf1d1353c478c1643e3d5e27525b23a09f04f87630fdbe4581af67f90d57741856658c1fb95
+  checksum: 10c0/dd2965a37c93c0b652bf07b1fd8d1639a803b65cf34c0cb1b827b8403044fc3b09ec87f681d922a324825127ee95b2e0394e7caccb502f407892d63e903c5276
   languageName: node
   linkType: hard
 
@@ -16122,17 +15125,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:^6.1.11, tar@npm:^6.2.1":
-  version: 6.2.1
-  resolution: "tar@npm:6.2.1"
+"tar@npm:^7.4.3":
+  version: 7.4.3
+  resolution: "tar@npm:7.4.3"
   dependencies:
-    chownr: "npm:^2.0.0"
-    fs-minipass: "npm:^2.0.0"
-    minipass: "npm:^5.0.0"
-    minizlib: "npm:^2.1.1"
-    mkdirp: "npm:^1.0.3"
-    yallist: "npm:^4.0.0"
-  checksum: 10c0/a5eca3eb50bc11552d453488344e6507156b9193efd7635e98e867fab275d527af53d8866e2370cd09dfe74378a18111622ace35af6a608e5223a7d27fe99537
+    "@isaacs/fs-minipass": "npm:^4.0.0"
+    chownr: "npm:^3.0.0"
+    minipass: "npm:^7.1.2"
+    minizlib: "npm:^3.0.1"
+    mkdirp: "npm:^3.0.1"
+    yallist: "npm:^5.0.0"
+  checksum: 10c0/d4679609bb2a9b48eeaf84632b6d844128d2412b95b6de07d53d8ee8baf4ca0857c9331dfa510390a0727b550fd543d4d1a10995ad86cdf078423fbb8d99831d
   languageName: node
   linkType: hard
 
@@ -16158,7 +15161,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:5.3.14":
+"terser-webpack-plugin@npm:5.3.14, terser-webpack-plugin@npm:^5.3.11":
   version: 5.3.14
   resolution: "terser-webpack-plugin@npm:5.3.14"
   dependencies:
@@ -16180,31 +15183,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.11":
-  version: 5.3.11
-  resolution: "terser-webpack-plugin@npm:5.3.11"
-  dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jest-worker: "npm:^27.4.5"
-    schema-utils: "npm:^4.3.0"
-    serialize-javascript: "npm:^6.0.2"
-    terser: "npm:^5.31.1"
-  peerDependencies:
-    webpack: ^5.1.0
-  peerDependenciesMeta:
-    "@swc/core":
-      optional: true
-    esbuild:
-      optional: true
-    uglify-js:
-      optional: true
-  checksum: 10c0/4794274f445dc589f4c113c75a55ce51364ccf09bfe8a545cdb462e3f752bf300ea91f072fa28bbed291bbae03274da06fe4eca180e784fb8a43646aa7dbcaef
-  languageName: node
-  linkType: hard
-
 "terser@npm:^5.31.1":
-  version: 5.37.0
-  resolution: "terser@npm:5.37.0"
+  version: 5.39.0
+  resolution: "terser@npm:5.39.0"
   dependencies:
     "@jridgewell/source-map": "npm:^0.3.3"
     acorn: "npm:^8.8.2"
@@ -16212,7 +15193,7 @@ __metadata:
     source-map-support: "npm:~0.5.20"
   bin:
     terser: bin/terser
-  checksum: 10c0/ff0dc79b0a0da821e7f5bf7a047eab6d04e70e88b62339a0f1d71117db3310e255f5c00738fa3b391f56c3571f800a00047720261ba04ced0241c1f9922199f4
+  checksum: 10c0/83326545ea1aecd6261030568b6191ccfa4cb6aa61d9ea41746a52479f50017a78b77e4725fbbc207c5df841ffa66a773c5ac33636e95c7ab94fe7e0379ae5c7
   languageName: node
   linkType: hard
 
@@ -16273,21 +15254,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tldts-core@npm:^6.1.50":
-  version: 6.1.50
-  resolution: "tldts-core@npm:6.1.50"
-  checksum: 10c0/600077f92eb4d622b73574fd1d9f89d0f95ac51b71812e7afd9c7a05bbaa3d7e52585fb8694b26b5ebbfc6a4a344fc8d8f5bfcd4e40d4dd4fa5564d60b422c65
+"tinyglobby@npm:^0.2.12":
+  version: 0.2.13
+  resolution: "tinyglobby@npm:0.2.13"
+  dependencies:
+    fdir: "npm:^6.4.4"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/ef07dfaa7b26936601d3f6d999f7928a4d1c6234c5eb36896bb88681947c0d459b7ebe797022400e555fe4b894db06e922b95d0ce60cb05fd827a0a66326b18c
+  languageName: node
+  linkType: hard
+
+"tldts-core@npm:^6.1.86":
+  version: 6.1.86
+  resolution: "tldts-core@npm:6.1.86"
+  checksum: 10c0/8133c29375f3f99f88fce5f4d62f6ecb9532b106f31e5423b27c1eb1b6e711bd41875184a456819ceaed5c8b94f43911b1ad57e25c6eb86e1fc201228ff7e2af
   languageName: node
   linkType: hard
 
 "tldts@npm:^6.1.32":
-  version: 6.1.50
-  resolution: "tldts@npm:6.1.50"
+  version: 6.1.86
+  resolution: "tldts@npm:6.1.86"
   dependencies:
-    tldts-core: "npm:^6.1.50"
+    tldts-core: "npm:^6.1.86"
   bin:
     tldts: bin/cli.js
-  checksum: 10c0/24c74149777452f45291f415caf74f86279f045302b76b5fd5dd6a2b3cd586761b866982211e2634765e7a61437cd9f6092d5a5db3c8acd58a331842085a320c
+  checksum: 10c0/27ae7526d9d78cb97b2de3f4d102e0b4321d1ccff0648a7bb0e039ed54acbce86bacdcd9cd3c14310e519b457854e7bafbef1f529f58a1e217a737ced63f0940
   languageName: node
   linkType: hard
 
@@ -16305,13 +15296,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-fast-properties@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "to-fast-properties@npm:2.0.0"
-  checksum: 10c0/b214d21dbfb4bce3452b6244b336806ffea9c05297148d32ebb428d5c43ce7545bdfc65a1ceb58c9ef4376a65c0cb2854d645f33961658b3e3b4f84910ddcdd7
-  languageName: node
-  linkType: hard
-
 "to-readable-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "to-readable-stream@npm:1.0.0"
@@ -16354,16 +15338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "tough-cookie@npm:5.0.0"
-  dependencies:
-    tldts: "npm:^6.1.32"
-  checksum: 10c0/4a69c885bf6f45c5a64e60262af99e8c0d58a33bd3d0ce5da62121eeb9c00996d0128a72df8fc4614cbde59cc8b70aa3e21e4c3c98c2bbde137d7aba7fa00124
-  languageName: node
-  linkType: hard
-
-"tough-cookie@npm:^5.1.1":
+"tough-cookie@npm:^5.0.0, tough-cookie@npm:^5.1.1":
   version: 5.1.2
   resolution: "tough-cookie@npm:5.1.2"
   dependencies:
@@ -16381,15 +15356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "tr46@npm:5.0.0"
-  dependencies:
-    punycode: "npm:^2.3.1"
-  checksum: 10c0/1521b6e7bbc8adc825c4561480f9fe48eb2276c81335eed9fa610aa4c44a48a3221f78b10e5f18b875769eb3413e30efbf209ed556a17a42aa8d690df44b7bee
-  languageName: node
-  linkType: hard
-
 "tr46@npm:^5.1.0":
   version: 5.1.1
   resolution: "tr46@npm:5.1.1"
@@ -16417,21 +15383,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-api-utils@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "ts-api-utils@npm:1.3.0"
-  peerDependencies:
-    typescript: ">=4.2.0"
-  checksum: 10c0/f54a0ba9ed56ce66baea90a3fa087a484002e807f28a8ccb2d070c75e76bde64bd0f6dce98b3802834156306050871b67eec325cb4e918015a360a3f0868c77c
-  languageName: node
-  linkType: hard
-
 "ts-api-utils@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "ts-api-utils@npm:2.0.1"
+  version: 2.1.0
+  resolution: "ts-api-utils@npm:2.1.0"
   peerDependencies:
     typescript: ">=4.8.4"
-  checksum: 10c0/23fd56a958b332cac00150a652e4c84730df30571bd2faa1ba6d7b511356d1a61656621492bb6c7f15dd6e18847a1408357a0e406671d358115369a17f5bfedd
+  checksum: 10c0/9806a38adea2db0f6aa217ccc6bc9c391ddba338a9fe3080676d0d50ed806d305bb90e8cef0276e793d28c8a929f400abb184ddd7ff83a416959c0f4d2ce754f
   languageName: node
   linkType: hard
 
@@ -16550,14 +15507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.0":
-  version: 2.7.0
-  resolution: "tslib@npm:2.7.0"
-  checksum: 10c0/469e1d5bf1af585742128827000711efa61010b699cb040ab1800bcd3ccdd37f63ec30642c9e07c4439c1db6e46345582614275daca3e0f4abae29b0083f04a6
-  languageName: node
-  linkType: hard
-
-"tslib@npm:^2.0.1, tslib@npm:^2.7.0, tslib@npm:^2.8.1":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.7.0, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -16640,17 +15590,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^4.27.0":
-  version: 4.30.1
-  resolution: "type-fest@npm:4.30.1"
-  checksum: 10c0/7ee8084aa764c9703f92e4c3546e0943909a1b508c93a02f1e528b877803b4af2cd68982d1d36578738a14026d5f5a3049d840aa11fca1d690d13a1612222da1
-  languageName: node
-  linkType: hard
-
-"type-fest@npm:^4.39.1":
-  version: 4.40.0
-  resolution: "type-fest@npm:4.40.0"
-  checksum: 10c0/b39d4da6f9a154e3db7e714cd05ccf56b53f4f0bbf74dd294cb6be4921b16ecca5cb00cb81b53ab621a31c8e8509c74b5101895ada47af9de368a317d24538a3
+"type-fest@npm:^4.27.0, type-fest@npm:^4.39.1":
+  version: 4.40.1
+  resolution: "type-fest@npm:4.40.1"
+  checksum: 10c0/590cb7d4dcd3da83efe49b5b52cd041661f6fa29f18cb76650fe1fdeb4090688e92955656e9d981e606abb13d25c0418be8c6c6504d80e87fe18dc9ca0888392
   languageName: node
   linkType: hard
 
@@ -16675,17 +15618,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-buffer@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "typed-array-buffer@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10c0/9e043eb38e1b4df4ddf9dde1aa64919ae8bb909571c1cc4490ba777d55d23a0c74c7d73afcdd29ec98616d91bb3ae0f705fad4421ea147e1daf9528200b562da
-  languageName: node
-  linkType: hard
-
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -16697,19 +15629,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "typed-array-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10c0/fcebeffb2436c9f355e91bd19e2368273b88c11d1acc0948a2a306792f1ab672bce4cfe524ab9f51a0505c9d7cd1c98eff4235c4f6bfef6a198f6cfc4ff3d4f3
-  languageName: node
-  linkType: hard
-
 "typed-array-byte-length@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-byte-length@npm:1.0.3"
@@ -16723,20 +15642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-byte-offset@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "typed-array-byte-offset@npm:1.0.2"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10c0/d2628bc739732072e39269389a758025f75339de2ed40c4f91357023c5512d237f255b633e3106c461ced41907c1bf9a533c7e8578066b0163690ca8bc61b22f
-  languageName: node
-  linkType: hard
-
 "typed-array-byte-offset@npm:^1.0.4":
   version: 1.0.4
   resolution: "typed-array-byte-offset@npm:1.0.4"
@@ -16752,20 +15657,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-length@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "typed-array-length@npm:1.0.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-    possible-typed-array-names: "npm:^1.0.0"
-  checksum: 10c0/74253d7dc488eb28b6b2711cf31f5a9dcefc9c41b0681fd1c178ed0a1681b4468581a3626d39cd4df7aee3d3927ab62be06aa9ca74e5baf81827f61641445b77
-  languageName: node
-  linkType: hard
-
 "typed-array-length@npm:^1.0.7":
   version: 1.0.7
   resolution: "typed-array-length@npm:1.0.7"
@@ -16829,7 +15720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:5.8.3":
+"typescript@npm:5.8.3, typescript@npm:^5":
   version: 5.8.3
   resolution: "typescript@npm:5.8.3"
   bin:
@@ -16839,17 +15730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5":
-  version: 5.7.2
-  resolution: "typescript@npm:5.7.2"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10c0/a873118b5201b2ef332127ef5c63fb9d9c155e6fdbe211cbd9d8e65877283797cca76546bad742eea36ed7efbe3424a30376818f79c7318512064e8625d61622
-  languageName: node
-  linkType: hard
-
-"typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5#optional!builtin<compat/typescript>":
   version: 5.8.3
   resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
   bin:
@@ -16859,34 +15740,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5#optional!builtin<compat/typescript>":
-  version: 5.7.2
-  resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=5786d5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10c0/f3b8082c9d1d1629a215245c9087df56cb784f9fb6f27b5d55577a20e68afe2a889c040aacff6d27e35be165ecf9dca66e694c42eb9a50b3b2c451b36b5675cb
-  languageName: node
-  linkType: hard
-
 "ua-parser-js@npm:^1.0.33":
-  version: 1.0.39
-  resolution: "ua-parser-js@npm:1.0.39"
+  version: 1.0.40
+  resolution: "ua-parser-js@npm:1.0.40"
   bin:
     ua-parser-js: script/cli.js
-  checksum: 10c0/c6452b0c683000f10975cb0a7e74cb1119ea95d4522ae85f396fa53b0b17884358a24ffdd86a66030c6b2981bdc502109a618c79fdaa217ee9032c9e46fcc78a
-  languageName: node
-  linkType: hard
-
-"unbox-primitive@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "unbox-primitive@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-bigints: "npm:^1.0.2"
-    has-symbols: "npm:^1.0.3"
-    which-boxed-primitive: "npm:^1.0.2"
-  checksum: 10c0/81ca2e81134167cc8f75fa79fbcc8a94379d6c61de67090986a2273850989dd3bae8440c163121b77434b68263e34787a675cbdcb34bb2f764c6b9c843a11b66
+  checksum: 10c0/2b6ac642c74323957dae142c31f72287f2420c12dced9603d989b96c132b80232779c429b296d7de4012ef8b64e0d8fadc53c639ef06633ce13d785a78b5be6c
   languageName: node
   linkType: hard
 
@@ -16902,13 +15761,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici-types@npm:~6.20.0":
-  version: 6.20.0
-  resolution: "undici-types@npm:6.20.0"
-  checksum: 10c0/68e659a98898d6a836a9a59e6adf14a5d799707f5ea629433e025ac90d239f75e408e2e5ff086afc3cace26f8b26ee52155293564593fbb4a2f666af57fc59bf
-  languageName: node
-  linkType: hard
-
 "undici-types@npm:~6.21.0":
   version: 6.21.0
   resolution: "undici-types@npm:6.21.0"
@@ -16956,21 +15808,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-filename@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "unique-filename@npm:3.0.0"
+"unique-filename@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unique-filename@npm:4.0.0"
   dependencies:
-    unique-slug: "npm:^4.0.0"
-  checksum: 10c0/6363e40b2fa758eb5ec5e21b3c7fb83e5da8dcfbd866cc0c199d5534c42f03b9ea9ab069769cc388e1d7ab93b4eeef28ef506ab5f18d910ef29617715101884f
+    unique-slug: "npm:^5.0.0"
+  checksum: 10c0/38ae681cceb1408ea0587b6b01e29b00eee3c84baee1e41fd5c16b9ed443b80fba90c40e0ba69627e30855570a34ba8b06702d4a35035d4b5e198bf5a64c9ddc
   languageName: node
   linkType: hard
 
-"unique-slug@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "unique-slug@npm:4.0.0"
+"unique-slug@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unique-slug@npm:5.0.0"
   dependencies:
     imurmurhash: "npm:^0.1.4"
-  checksum: 10c0/cb811d9d54eb5821b81b18205750be84cb015c20a4a44280794e915f5a0a70223ce39066781a354e872df3572e8155c228f43ff0cce94c7cbf4da2cc7cbdd635
+  checksum: 10c0/d324c5a44887bd7e105ce800fcf7533d43f29c48757ac410afd42975de82cc38ea2035c0483f4de82d186691bf3208ef35c644f73aa2b1b20b8e651be5afd293
   languageName: node
   linkType: hard
 
@@ -17011,23 +15863,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "update-browserslist-db@npm:1.1.1"
-  dependencies:
-    escalade: "npm:^3.2.0"
-    picocolors: "npm:^1.1.0"
-  peerDependencies:
-    browserslist: ">= 4.21.0"
-  bin:
-    update-browserslist-db: cli.js
-  checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80
-  languageName: node
-  linkType: hard
-
-"update-browserslist-db@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "update-browserslist-db@npm:1.1.2"
+"update-browserslist-db@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "update-browserslist-db@npm:1.1.3"
   dependencies:
     escalade: "npm:^3.2.0"
     picocolors: "npm:^1.1.1"
@@ -17035,7 +15873,7 @@ __metadata:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10c0/9cb353998d6d7d6ba1e46b8fa3db888822dd972212da4eda609d185eb5c3557a93fd59780ceb757afd4d84240518df08542736969e6a5d6d6ce2d58e9363aac6
+  checksum: 10c0/682e8ecbf9de474a626f6462aa85927936cdd256fe584c6df2508b0df9f7362c44c957e9970df55dfe44d3623807d26316ea2c7d26b80bb76a16c56c37233c32
   languageName: node
   linkType: hard
 
@@ -17483,17 +16321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "whatwg-url@npm:14.0.0"
-  dependencies:
-    tr46: "npm:^5.0.0"
-    webidl-conversions: "npm:^7.0.0"
-  checksum: 10c0/ac32e9ba9d08744605519bbe9e1371174d36229689ecc099157b6ba102d4251a95e81d81f3d80271eb8da182eccfa65653f07f0ab43ea66a6934e643fd091ba9
-  languageName: node
-  linkType: hard
-
-"whatwg-url@npm:^14.1.1":
+"whatwg-url@npm:^14.0.0, whatwg-url@npm:^14.1.1":
   version: 14.2.0
   resolution: "whatwg-url@npm:14.2.0"
   dependencies:
@@ -17503,19 +16331,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-boxed-primitive@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "which-boxed-primitive@npm:1.0.2"
-  dependencies:
-    is-bigint: "npm:^1.0.1"
-    is-boolean-object: "npm:^1.1.0"
-    is-number-object: "npm:^1.0.4"
-    is-string: "npm:^1.0.5"
-    is-symbol: "npm:^1.0.3"
-  checksum: 10c0/0a62a03c00c91dd4fb1035b2f0733c341d805753b027eebd3a304b9cb70e8ce33e25317add2fe9b5fea6f53a175c0633ae701ff812e604410ddd049777cd435e
-  languageName: node
-  linkType: hard
-
 "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"
@@ -17569,30 +16384,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
-  version: 1.1.15
-  resolution: "which-typed-array@npm:1.1.15"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10c0/4465d5348c044032032251be54d8988270e69c6b7154f8fcb2a47ff706fe36f7624b3a24246b8d9089435a8f4ec48c1c1025c5d6b499456b9e5eff4f48212983
-  languageName: node
-  linkType: hard
-
-"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
-  version: 1.1.18
-  resolution: "which-typed-array@npm:1.1.18"
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18, which-typed-array@npm:^1.1.2":
+  version: 1.1.19
+  resolution: "which-typed-array@npm:1.1.19"
   dependencies:
     available-typed-arrays: "npm:^1.0.7"
     call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    for-each: "npm:^0.3.3"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
     gopd: "npm:^1.2.0"
     has-tostringtag: "npm:^1.0.2"
-  checksum: 10c0/0412f4a91880ca1a2a63056187c2e3de6b129b2b5b6c17bc3729f0f7041047ae48fb7424813e51506addb2c97320003ee18b8c57469d2cde37983ef62126143c
+  checksum: 10c0/702b5dc878addafe6c6300c3d0af5983b175c75fcb4f2a72dfc3dd38d93cf9e89581e4b29c854b16ea37e50a7d7fca5ae42ece5c273d8060dcd603b2404bbb3f
   languageName: node
   linkType: hard
 
@@ -17618,14 +16421,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "which@npm:4.0.0"
+"which@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "which@npm:5.0.0"
   dependencies:
     isexe: "npm:^3.1.1"
   bin:
     node-which: bin/which.js
-  checksum: 10c0/449fa5c44ed120ccecfe18c433296a4978a7583bf2391c50abce13f76878d2476defde04d0f79db8165bdf432853c1f8389d0485ca6e8ebce3bbcded513d5e6a
+  checksum: 10c0/e556e4cd8b7dbf5df52408c9a9dd5ac6518c8c5267c8953f5b0564073c66ed5bf9503b14d876d0e9c7844d4db9725fb0dcf45d6e911e17e26ab363dc3965ae7b
   languageName: node
   linkType: hard
 
@@ -17733,8 +16536,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.11.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.5.0":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
+  version: 8.18.2
+  resolution: "ws@npm:8.18.2"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -17743,7 +16546,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 10c0/25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
+  checksum: 10c0/4b50f67931b8c6943c893f59c524f0e4905bbd183016cfb0f2b8653aa7f28dad4e456b9d99d285bbb67cca4fedd9ce90dfdfaa82b898a11414ebd66ee99141e4
   languageName: node
   linkType: hard
 
@@ -17817,6 +16620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yallist@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "yallist@npm:5.0.0"
+  checksum: 10c0/a499c81ce6d4a1d260d4ea0f6d49ab4da09681e32c3f0472dee16667ed69d01dae63a3b81745a24bd78476ec4fcf856114cb4896ace738e01da34b2c42235416
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^1.10.0, yaml@npm:^1.10.2":
   version: 1.10.2
   resolution: "yaml@npm:1.10.2"
@@ -17824,21 +16634,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.0.0, yaml@npm:^2.3.4, yaml@npm:^2.4.1":
-  version: 2.5.1
-  resolution: "yaml@npm:2.5.1"
-  bin:
-    yaml: bin.mjs
-  checksum: 10c0/40fba5682898dbeeb3319e358a968fe886509fab6f58725732a15f8dda3abac509f91e76817c708c9959a15f786f38ff863c1b88062d7c1162c5334a7d09cb4a
-  languageName: node
-  linkType: hard
-
-"yaml@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "yaml@npm:2.7.0"
+"yaml@npm:^2.0.0, yaml@npm:^2.3.4, yaml@npm:^2.4.1, yaml@npm:^2.7.0":
+  version: 2.7.1
+  resolution: "yaml@npm:2.7.1"
   bin:
     yaml: bin.mjs
-  checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9
+  checksum: 10c0/ee2126398ab7d1fdde566b4013b68e36930b9e6d8e68b6db356875c99614c10d678b6f45597a145ff6d63814961221fc305bf9242af8bf7450177f8a68537590
   languageName: node
   linkType: hard
 

From 90eafe1c845a23978f7c58c1f72f0725a074e2dc Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 13:33:13 +0200
Subject: [PATCH 089/170] test fix for reuire

---
 webpack.common.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webpack.common.js b/webpack.common.js
index d4ff397373..0697a64900 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,6 +9,9 @@ module.exports = {
   output: {
     filename: 'altinn-app-frontend.js',
   },
+  optimizeDeps: {
+    include: ['@digdir/designsystemet-react'], // explicitly include ESM deps
+  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
     alias: {

From f6c110859f1e934a4759a7fad55f56e6791486c9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 13:38:01 +0200
Subject: [PATCH 090/170] revert attempted fix

---
 webpack.common.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/webpack.common.js b/webpack.common.js
index 0697a64900..d4ff397373 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,9 +9,6 @@ module.exports = {
   output: {
     filename: 'altinn-app-frontend.js',
   },
-  optimizeDeps: {
-    include: ['@digdir/designsystemet-react'], // explicitly include ESM deps
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
     alias: {

From 8b7d9597c12c9e68b5e35d110d40647dfab34cc7 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 13:56:47 +0200
Subject: [PATCH 091/170] test

---
 webpack.common.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webpack.common.js b/webpack.common.js
index d4ff397373..007ecd70ce 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -15,11 +15,13 @@ module.exports = {
       src: path.resolve(__dirname, './src'),
       axios: require.resolve('./node_modules/axios/dist/browser/axios.cjs'),
     },
+    fullySpecified: false,
   },
   module: {
     rules: [
       {
         test: /\.jsx?/,
+        exclude: /node_modules\/(?!(?:@digdir)\/)/,
         use: {
           loader: 'babel-loader',
         },

From aa9b0791f2376a4fd8fa6589e4ce3328ad0d968b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 14:29:16 +0200
Subject: [PATCH 092/170] revert test

---
 webpack.common.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webpack.common.js b/webpack.common.js
index 007ecd70ce..d4ff397373 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -15,13 +15,11 @@ module.exports = {
       src: path.resolve(__dirname, './src'),
       axios: require.resolve('./node_modules/axios/dist/browser/axios.cjs'),
     },
-    fullySpecified: false,
   },
   module: {
     rules: [
       {
         test: /\.jsx?/,
-        exclude: /node_modules\/(?!(?:@digdir)\/)/,
         use: {
           loader: 'babel-loader',
         },

From c0eeb250d603d4feccff5cda3ef726ff2b68567f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 21 May 2025 14:56:59 +0200
Subject: [PATCH 093/170] update to 1.0.6

---
 package.json |  6 +++---
 yarn.lock    | 42 +++++++++++++++++++++---------------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 0bfb8efd0d..39044799eb 100644
--- a/package.json
+++ b/package.json
@@ -132,9 +132,9 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
-    "@digdir/designsystemet-css": "1.0.4",
-    "@digdir/designsystemet-react": "1.0.4",
-    "@digdir/designsystemet-theme": "1.0.4",
+    "@digdir/designsystemet-css": "1.0.6",
+    "@digdir/designsystemet-react": "1.0.6",
+    "@digdir/designsystemet-theme": "1.0.6",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.75.2",
     "ajv": "8.17.1",
diff --git a/yarn.lock b/yarn.lock
index 81084b354d..f5ae8b04f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1540,21 +1540,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@digdir/designsystemet-css@npm:1.0.4"
-  checksum: 10c0/3b6d541afa4d858dd48b18b4964b7ce3129e2241aaa46ab76abe967c721d7ab8a1b323701f1b5d84b3f9a4a4e358046abc74bfd3dd6966abc5e2ae9a380221ce
+"@digdir/designsystemet-css@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-css@npm:1.0.6"
+  checksum: 10c0/aa380bac76075ca3869b303d954e1651bf421837f8aad6c5800840bec0269c3edd9037e3fac79ec2abda8605c1fbd08a21ef1af389bbcdfeb66da80f46bf342b
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@digdir/designsystemet-react@npm:1.0.4"
+"@digdir/designsystemet-react@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-react@npm:1.0.6"
   dependencies:
-    "@floating-ui/dom": "npm:^1.6.13"
+    "@floating-ui/dom": "npm:^1.7.0"
     "@floating-ui/react": "npm:0.26.23"
-    "@navikt/aksel-icons": "npm:^7.18.0"
-    "@radix-ui/react-slot": "npm:^1.1.2"
+    "@navikt/aksel-icons": "npm:^7.21.0"
+    "@radix-ui/react-slot": "npm:^1.2.0"
     "@tanstack/react-virtual": "npm:^3.13.6"
     "@u-elements/u-datalist": "npm:^0.1.5"
     "@u-elements/u-details": "npm:^0.1.1"
@@ -1563,14 +1563,14 @@ __metadata:
   peerDependencies:
     react: ">=18.3.1 || ^19.0.0"
     react-dom: ">=18.3.1 || ^19.0.0"
-  checksum: 10c0/bc8215fa18440c2340e34af86f24cc30f5ac84925e7b2a5a10085aa5693f514e42d0cd3bb430362a1adbfb960cb77fe2ebca379737d3d03d125edd21e0560b18
+  checksum: 10c0/c17653aa13d7a1b15c07203e23756cfe6449d9957c11ce905bf9f800e5b05536365b3a886a2c23b996469b1d873d844402da808077e643d7b54b52cc14641a81
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@digdir/designsystemet-theme@npm:1.0.4"
-  checksum: 10c0/ac8c9ec0419278e7aa74d12ed61c0c80cbeea3b3411f638840fa41b4c927b6e8a6a4fa381e555a17d1d776c0d35a4275e09b926afef0fa3ba6465ffa86db630a
+"@digdir/designsystemet-theme@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-theme@npm:1.0.6"
+  checksum: 10c0/dba369ec98921f092bb0122a4bf032dc3a1dd1e01f2cc1d5c63193592419aa726e22b5653e8d3fd95d5c66ce176926f27a6e00daa3b6cf2576d45c27489d98fd
   languageName: node
   linkType: hard
 
@@ -1870,7 +1870,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.6.13":
+"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.7.0":
   version: 1.7.0
   resolution: "@floating-ui/dom@npm:1.7.0"
   dependencies:
@@ -2350,7 +2350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.18.0":
+"@navikt/aksel-icons@npm:^7.21.0":
   version: 7.22.0
   resolution: "@navikt/aksel-icons@npm:7.22.0"
   checksum: 10c0/a644ad2a3920729d7bbbfcd6a309fba7121063a78d1dc485efb3d385e6987ab68d3e61554dfcab6f026227d219a09ba473d500ea989e8bbb7752507964455540
@@ -2832,7 +2832,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.1.2":
+"@radix-ui/react-slot@npm:^1.2.0":
   version: 1.2.3
   resolution: "@radix-ui/react-slot@npm:1.2.3"
   dependencies:
@@ -4446,9 +4446,9 @@ __metadata:
     "@babel/runtime": "npm:7.27.1"
     "@babel/runtime-corejs3": "npm:7.27.1"
     "@date-fns/tz": "npm:1.2.0"
-    "@digdir/designsystemet-css": "npm:1.0.4"
-    "@digdir/designsystemet-react": "npm:1.0.4"
-    "@digdir/designsystemet-theme": "npm:1.0.4"
+    "@digdir/designsystemet-css": "npm:1.0.6"
+    "@digdir/designsystemet-react": "npm:1.0.6"
+    "@digdir/designsystemet-theme": "npm:1.0.6"
     "@eslint/compat": "npm:1.2.9"
     "@faker-js/faker": "npm:9.7.0"
     "@navikt/aksel-icons": "npm:^7.17.4"

From 931d6a4f41aed87d61d0b5a6762da2e8917b1e4b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 22 May 2025 10:28:52 +0200
Subject: [PATCH 094/170] update production webpack to support new DS

---
 webpack.config.production.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/webpack.config.production.js b/webpack.config.production.js
index 4c2552355c..14b4f10110 100644
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -1,4 +1,4 @@
-const TerserPlugin = require('terser-webpack-plugin');
+const { EsbuildPlugin } = require('esbuild-loader'); // Add this if not already present
 
 const common = require('./webpack.common');
 
@@ -11,19 +11,22 @@ module.exports = {
   },
   optimization: {
     minimize: true,
-    minimizer: [new TerserPlugin()],
+        minimizer: [
+      new EsbuildPlugin({
+        target: 'es2020',
+        css: true,
+      }),
+    ],
   },
   module: {
     rules: [
       ...common.module.rules,
       {
-        test: /\.tsx?/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: { transpileOnly: true },
-          },
-        ],
+        test: /\.tsx?$/,
+        loader: 'esbuild-loader',
+        options: {
+          target: 'es2020',
+        },
       },
     ],
   },

From 050736387d49a5b81b24862d937d13dac8efd8f6 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 22 May 2025 10:29:25 +0200
Subject: [PATCH 095/170] remove comment

---
 webpack.config.production.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.production.js b/webpack.config.production.js
index 14b4f10110..96ed7d0f3a 100644
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -1,4 +1,4 @@
-const { EsbuildPlugin } = require('esbuild-loader'); // Add this if not already present
+const { EsbuildPlugin } = require('esbuild-loader');
 
 const common = require('./webpack.common');
 

From e2683102b48b06e3c45a67e87ac6d3741571b8de Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 22 May 2025 14:01:10 +0200
Subject: [PATCH 096/170] fix multiple-select tests

---
 .../component-library/multiple-select.ts      | 148 +++++++-----------
 1 file changed, 59 insertions(+), 89 deletions(-)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index 05fc4e7b60..f927782cda 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -3,43 +3,42 @@ import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
 const appFrontend = new AppFrontend();
 
 describe('Multiple select component', () => {
+  const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
+  const multiselectList = 'u-datalist[role="listbox"]';
+  const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
+  const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
+
+  const checkboxText1 = 'Karoline';
+  const checkboxText2 = 'Kåre';
+  const checkboxText3 = 'Johanne';
+  const checkboxText4 = 'Kari';
+  const checkboxText5 = 'Petter';
+
   it('Adds and removes data properly when using group and soft deletion', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-
-    // Define the text for the multiple select options
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
 
-    //Clicking on the repeating group to close the popover from the multiselect
-    cy.get(repGroup).click({ force: true });
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     //Validate that the corresponding options in checkboxes is available in RepeatingGroup
     cy.get(repGroup).findByRole('cell', { name: checkboxText1 }).should('exist');
@@ -54,10 +53,10 @@ describe('Multiple select component', () => {
       .findAllByRole('button', { name: /^Slett/ })
       .first()
       .click();
-    cy.get(multiselect).contains('span', checkboxText1).should('not.exist');
+    cy.findByRole('button', { name: /^Karoline/i }).should('not.exist');
 
     // Unchecking from Checkboxes should remove from RepeatingGroup (observe that data is preserved)
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 1 of 2/i }).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 row
     cy.get(repGroup)
       .findAllByRole('button', { name: /^Rediger/ })
@@ -70,13 +69,13 @@ describe('Multiple select component', () => {
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).parent().contains('td', '20');
     cy.get(multiselect).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(repGroup).click({ force: true }); //closing the multiselect popover
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup).findAllByRole('row').should('have.length', 2);
 
     // Checking 'Kåre' again should not bring back the age
     cy.get(multiselect).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(repGroup).click({ force: true }); //closing the multiselect popover
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 1 row
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).should('exist');
     cy.get(repGroup).findAllByRole('cell', { name: '20' }).should('exist');
@@ -117,37 +116,25 @@ describe('Multiple select component', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'u-datalist[role="listbox"]';
-    const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-
-    // Define the text for the multiple select options
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
     // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
-    // Uncheck
+    //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
 
     // Close the multiple select component
     cy.get(multiselect).type('{esc}');
@@ -204,46 +191,38 @@ describe('Multiple select component', () => {
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
 
-    cy.get('div[role="listbox"]').contains('span', checkboxText).click();
+    cy.get('u-datalist[role="listbox"]').contains('span', checkboxText).click();
     cy.get('div[data-componentbaseid="MultipleSelectPage-Header-Summary2-Display-String"]')
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', checkboxText);
   });
   it('Renders the summary2 component with correct text for MultipleSelect with group and soft deletion', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'u-datalist[role="listbox"]';
-    const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
-
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
     // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
+
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
 
@@ -262,42 +241,34 @@ describe('Multiple select component', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
-
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
+
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 
@@ -316,7 +287,7 @@ describe('Multiple select component', () => {
     cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('exist');
     const checkboxText1 = 'Korte strekninger med bykjøring, eller annen moro';
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
     cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('not.exist');
   });
   it('Required validation shows when MultipleSelect is selected with group and soft delete', () => {
@@ -336,7 +307,7 @@ describe('Multiple select component', () => {
 
     const checkboxText1 = 'Karoline';
     cy.get('#form-content-MultipleSelectPage-Checkboxes2').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('not.exist');
   });
@@ -357,9 +328,8 @@ describe('Multiple select component', () => {
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('exist');
 
-    const checkboxText1 = 'Karoline';
     cy.get('#form-content-MultipleSelectPage-Checkboxes2').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('not.exist');
   });

From 279bee7e685be6daf1275605b23e3efa4d3274cc Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 09:39:54 +0200
Subject: [PATCH 097/170] fix navigation

---
 .../navigation/AppNavigation.module.css       |   5 +
 src/features/navigation/AppNavigation.tsx     |   5 +-
 .../navigation/PopoverNavigation.module.css   |  34 +----
 src/features/navigation/PopoverNavigation.tsx |  58 ++++----
 .../integration/navigation-test/navigation.ts | 139 +++++++++++-------
 test/e2e/support/custom.ts                    |  43 ++++--
 test/e2e/support/global.ts                    |  12 +-
 7 files changed, 169 insertions(+), 127 deletions(-)

diff --git a/src/features/navigation/AppNavigation.module.css b/src/features/navigation/AppNavigation.module.css
index 04b5219250..9a6291ff66 100644
--- a/src/features/navigation/AppNavigation.module.css
+++ b/src/features/navigation/AppNavigation.module.css
@@ -16,3 +16,8 @@
 .group-list > li:not(:last-child) {
   margin-bottom: 28px;
 }
+
+.closeButton {
+  margin-left: auto;
+  width: min-content;
+}
diff --git a/src/features/navigation/AppNavigation.tsx b/src/features/navigation/AppNavigation.tsx
index e327ffce8f..ce749bf2ae 100644
--- a/src/features/navigation/AppNavigation.tsx
+++ b/src/features/navigation/AppNavigation.tsx
@@ -89,7 +89,7 @@ export function AppNavigation({ onNavigate }: { onNavigate?: () => void }) {
 export function AppNavigationHeading({
   showClose,
   onClose,
-}: { showClose?: undefined; onClose?: undefined } | { showClose: true; onClose: () => void }) {
+}: { showClose?: undefined; onClose?: undefined } | { showClose: boolean; onClose: () => void }) {
   const { langAsString } = useLanguage();
   return (
     <div className={classes.navigationHeading}>
@@ -105,9 +105,10 @@ export function AppNavigationHeading({
           variant='tertiary'
           color='second'
           size='sm'
-          icon={true}
+          icon
           onClick={onClose}
           aria-label={langAsString('general.close')}
+          className={classes.closeButton}
         >
           <XMarkIcon aria-hidden />
         </Button>
diff --git a/src/features/navigation/PopoverNavigation.module.css b/src/features/navigation/PopoverNavigation.module.css
index 275ec3b4d5..c88d625318 100644
--- a/src/features/navigation/PopoverNavigation.module.css
+++ b/src/features/navigation/PopoverNavigation.module.css
@@ -1,39 +1,13 @@
-.popover-wrapper {
-  position: relative;
-}
-
-.popover-container {
-  border: none;
-  border-radius: 0;
-  box-shadow: 1px 1px 4px 0 rgb(137 137 137 / 50%);
-  width: 320px;
-  box-sizing: border-box;
-  padding: 16px;
-
-  /* Override positioning */
-  max-width: unset !important;
-  transform: unset !important;
-  will-change: unset !important;
-  top: calc(100% + 8px) !important;
-  left: 0 !important;
-  bottom: unset !important;
-  right: unset !important;
-}
-
-.popover-container :global(.fds-popover__arrow) {
-  display: none;
-}
-
-.popover-button-active {
+.popoverButtonActive {
   background-color: var(--fds-semantic-surface-action-first-no_fill-active);
   border-color: var(--fds-semantic-border-action-first-active);
   color: var(--fds-semantic-text-action-first-active);
 }
 
-.popover-button-icon {
+.popoverButtonIcon {
   font-size: 1.2rem;
 }
-.popover-button-icon-margin {
+.popoverButtonIconMargin {
   margin-right: 4px;
 }
 
@@ -43,7 +17,7 @@
   height: 90vh;
 }
 
-.modal-container {
+.modalContainer {
   box-sizing: border-box;
   padding: 16px;
   max-height: unset;
diff --git a/src/features/navigation/PopoverNavigation.tsx b/src/features/navigation/PopoverNavigation.tsx
index 249d5188aa..eb2f996b44 100644
--- a/src/features/navigation/PopoverNavigation.tsx
+++ b/src/features/navigation/PopoverNavigation.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Dialog, Popover } from '@digdir/designsystemet-react';
+import { Dialog, Dropdown } from '@digdir/designsystemet-react';
 import { BulletListIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 import type { Button } from '@digdir/designsystemet-react';
@@ -39,36 +39,41 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
 
   if (!isMobile) {
     return (
-      <div className={classes.popoverWrapper}>
-        <Popover.TriggerContext>
-          <Popover.Trigger
+      <div>
+        <Dropdown.TriggerContext>
+          <Dropdown.Trigger
             data-testid='page-navigation-trigger'
-            onClick={toggleDialog}
             variant='secondary'
             data-color='accent'
+            onClick={() => toggleDialog()}
             data-size='sm'
             {...props}
             className={cn({ [classes.popoverButtonActive]: isDialogOpen }, props.className)}
           >
-            <PopoverNavigationButtonContent />
-          </Popover.Trigger>
-          <Popover
+            <BulletListIcon
+              className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
+              aria-hidden
+            />
+            <Lang id='navigation.form_pages' />
+          </Dropdown.Trigger>
+          <Dropdown
             data-testid='page-navigation-dialog'
-            className={classes.popoverContainer}
-            aria-modal
+            placement='bottom-start'
             autoFocus={true}
             open={isDialogOpen}
             onClose={closeDialog}
           >
-            <AppNavigationHeading
-              showClose={true}
-              onClose={closeDialog}
-            />
+            <Dropdown.Heading asChild>
+              <AppNavigationHeading
+                showClose={true}
+                onClose={closeDialog}
+              />
+            </Dropdown.Heading>
             <div style={{ paddingRight: 12 }}>
               <AppNavigation onNavigate={closeDialog} />
             </div>
-          </Popover>
-        </Popover.TriggerContext>
+          </Dropdown>
+        </Dropdown.TriggerContext>
       </div>
     );
   }
@@ -84,18 +89,23 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
         {...props}
         className={cn({ [classes.popoverButtonActive]: isDialogOpen }, props.className)}
       >
-        <PopoverNavigationButtonContent />
+        <BulletListIcon
+          className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
+          aria-hidden
+        />
+        <Lang id='navigation.form_pages' />
       </Dialog.Trigger>
       <Dialog
         aria-labelledby='app-navigation-heading'
         ref={modalRef}
         closedby='any'
         modal={true}
+        onClose={() => closeDialog()}
         className={cn(classes.modal, classes.modalContainer)}
         data-testid='page-navigation-dialog'
       >
         <AppNavigationHeading
-          showClose={true}
+          showClose={false}
           onClose={closeDialog}
         />
         <div style={{ paddingRight: 12 }}>
@@ -105,15 +115,3 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
     </Dialog.TriggerContext>
   );
 }
-
-function PopoverNavigationButtonContent() {
-  return (
-    <>
-      <BulletListIcon
-        className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
-        aria-hidden
-      />
-      <Lang id='navigation.form_pages' />
-    </>
-  );
-}
diff --git a/test/e2e/integration/navigation-test/navigation.ts b/test/e2e/integration/navigation-test/navigation.ts
index 9100829de1..d97f096ccf 100644
--- a/test/e2e/integration/navigation-test/navigation.ts
+++ b/test/e2e/integration/navigation-test/navigation.ts
@@ -17,13 +17,15 @@ describe('navigation', () => {
   ['desktop', 'tablet', 'mobile'].forEach((device: keyof typeof viewportSizes) =>
     it(`navigation component on ${device}`, () => {
       const { width, height } = viewportSizes[device];
-      const isUsingDialog = device === 'mobile' || device === 'tablet';
+      const isUsingMobile = device === 'mobile';
+      const isUsingTablet = device === 'tablet';
       cy.viewport(width, height);
       cy.startAppInstance(appFrontend.apps.navigationTest);
       cy.waitForLoad();
 
       // Check initial conditions
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('have.attr', 'aria-current', 'page');
@@ -43,20 +45,24 @@ describe('navigation', () => {
 
       cy.navGroup('Kvittering').should('be.disabled');
       cy.navGroup('Kvittering').should('not.have.attr', 'aria-current');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('not.have.attr', 'aria-current');
       cy.navGroup(/^Informasjon/, 'Litt mer info').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'false');
       cy.navGroup(/^Informasjon/).should('not.have.attr', 'aria-current');
 
@@ -67,32 +73,38 @@ describe('navigation', () => {
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Fornavn/ }).type('Donald');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Etternavn/ }).type('Duck');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'true');
       cy.navGroup('Utfylling').should('have.attr', 'aria-current', 'step');
       cy.navGroup('Utfylling', 'Fornavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Alder/ }).type('123');
       cy.get(appFrontend.errorReport).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Fødselsdag').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('be.visible');
@@ -100,35 +112,40 @@ describe('navigation', () => {
         cy.testWcag();
         cy.percySnapshot(`navigation:page-states (${device})`, { percyCSS, widths: [width] });
       });
-      cy.gotoNavGroup(/^Informasjon/, 'Generell info');
+      cy.gotoNavGroup(/^Informasjon/, device, 'Generell info');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'false');
       cy.navGroup('Utfylling').should('not.have.attr', 'aria-current');
       cy.navGroup('Utfylling').find(ICON_ERROR).should('be.visible');
-      cy.gotoNavGroup('Utfylling', 'Alder');
+      cy.gotoNavGroup('Utfylling', device, 'Alder');
 
       cy.findByRole('textbox', { name: /Alder/ }).clear();
       cy.findByRole('textbox', { name: /Alder/ }).type('42');
       cy.get(appFrontend.errorReport).should('not.exist');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_ERROR).should('not.exist');
-      cy.gotoNavGroup('Utfylling', 'Kjøretøy');
+      cy.gotoNavGroup('Utfylling', device, 'Kjøretøy');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      cy.gotoNavGroup('Utfylling', 'Fødselsdag');
+      cy.gotoNavGroup('Utfylling', device, 'Fødselsdag');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Fødselsdag/ }).type('09061934');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
@@ -143,7 +160,8 @@ describe('navigation', () => {
       cy.waitForLoad();
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Registreringsnummer').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Registreringsnummer').should('not.have.attr', 'aria-expanded');
       cy.navGroup('Informasjon').should('have.attr', 'aria-expanded', 'false');
@@ -153,7 +171,8 @@ describe('navigation', () => {
       cy.navGroup('Informasjon', 'Årsmodell').should('not.have.attr', 'aria-current');
       cy.navGroup('Bekreftelse').should('not.exist');
       cy.navGroup('Kvittering').should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
       cy.waitForLoad();
@@ -162,26 +181,31 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'false');
       cy.navGroup('Utfylling').should('not.have.attr', 'aria-current');
       cy.navGroup('Utfylling').find(ICON_COMPLETE).should('be.visible');
       cy.openNavGroup('Innsending');
       cy.navGroup('Innsending', 'Tilbakemelding').should('be.visible');
       cy.navGroup('Innsending', 'Oppsummering').should('be.visible');
-      cy.gotoNavGroup('Utfylling', 'Ekstra');
+      cy.gotoNavGroup('Utfylling', device, 'Ekstra');
 
       cy.findByRole('checkbox', { name: 'Skjul tilbakemelding' }).dsCheck();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Innsending');
       cy.navGroup('Innsending', 'Tilbakemelding').should('not.exist');
       cy.navGroup('Innsending', 'Oppsummering').should('be.visible');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('checkbox', { name: 'Skjul oppsummering' }).dsCheck();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Innsending').should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('heading', { name: 'Viktig informasjon' }).should('be.visible');
@@ -194,14 +218,16 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
       cy.findByRole('heading', { name: 'Se over svarene dine før du sender inn' }).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Personopplysninger').should('be.disabled');
       cy.navGroup('Personopplysninger').should('not.have.attr', 'aria-current');
       cy.navGroup('Bekreftelse').should('be.disabled');
       cy.navGroup('Bekreftelse').should('have.attr', 'aria-current', 'step');
       cy.navGroup('Kvittering').should('be.disabled');
       cy.navGroup('Kvittering').should('not.have.attr', 'aria-current');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
 
@@ -214,13 +240,15 @@ describe('navigation', () => {
   ['desktop', 'tablet', 'mobile'].forEach((device: keyof typeof viewportSizes) =>
     it(`navigation with subform on ${device}`, () => {
       const { width, height } = viewportSizes[device];
-      const isUsingDialog = device === 'mobile' || device === 'tablet';
+      const isUsingMobile = device === 'mobile';
+      const isUsingTablet = device === 'tablet';
       cy.viewport(width, height);
       cy.startAppInstance(appFrontend.apps.navigationTest);
       cy.waitForLoad();
 
-      isUsingDialog && cy.showNavGroups();
-      cy.gotoNavGroup('Utfylling', 'Fornavn');
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
+      cy.gotoNavGroup('Utfylling', device, 'Fornavn');
       cy.findByRole('textbox', { name: /Fornavn/ }).type('Skrue');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Etternavn/ }).type('McDuck');
@@ -237,13 +265,15 @@ describe('navigation', () => {
         .type('skrue.mcduck@digdir.no');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Fornavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Fødselsdag').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'E-post').find(ICON_COMPLETE).should('be.visible');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Legg til bil' }).clickAndGone();
       cy.waitForLoad();
@@ -253,15 +283,17 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Årsmodell/ }).type('1998');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Registreringsnummer').find(ICON_COMPLETE).should('be.visible');
-      cy.gotoNavGroup('Registreringsnummer');
-      isUsingDialog && cy.showNavGroups();
+      cy.gotoNavGroup('Registreringsnummer', device);
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Informasjon').find(ICON_COMPLETE).should('be.visible');
       cy.openNavGroup('Informasjon');
       cy.navGroup('Informasjon', 'Merke').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Informasjon', 'Årsmodell').find(ICON_COMPLETE).should('be.visible');
-      cy.gotoNavGroup('Informasjon', 'Årsmodell');
+      cy.gotoNavGroup('Informasjon', device, 'Årsmodell');
       cy.findByRole('button', { name: /Ferdig/ }).clickAndGone();
       cy.waitForLoad();
 
@@ -291,7 +323,8 @@ describe('navigation', () => {
           cy.get('td').eq(2).should('have.text', '2010');
         });
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Utfylling', 'Kjøretøy', /Biler/);
       cy.navGroup('Utfylling', 'Kjøretøy', /Biler/)
         .parent()
@@ -300,8 +333,9 @@ describe('navigation', () => {
           cy.findByRole('button', { name: 'En fet Lamborghini fra 2010', container }).should('be.visible');
         });
 
-      cy.gotoNavGroup(/Informasjon/, 'Generell info');
-      isUsingDialog && cy.showNavGroups();
+      cy.gotoNavGroup(/Informasjon/, device, 'Generell info');
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Utfylling', 'Kjøretøy', /Biler/);
 
       cy.readFile('test/percy.css').then((percyCSS) => {
@@ -318,9 +352,10 @@ describe('navigation', () => {
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('have.value', 'XY98765');
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
       cy.waitForLoad();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      cy.gotoNavGroup('Innsending', 'Oppsummering');
+      cy.gotoNavGroup('Innsending', device, 'Oppsummering');
 
       cy.findByRole('heading', { name: 'En fet Toyota fra 1998' }).should('be.visible');
       cy.findByRole('heading', { name: 'En fet Lamborghini fra 2010' }).should('be.visible');
@@ -350,9 +385,11 @@ describe('navigation', () => {
       cy.findByTestId('summary-Summary-subform')
         .then((container) => cy.findByRole('button', { name: /Endre/, container }))
         .clickAndGone();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('button', { name: 'Tilbake til oppsummering' }).clickAndGone();
 
       cy.get('#subform-subform-table tbody tr')
@@ -364,9 +401,11 @@ describe('navigation', () => {
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('have.value', 'AB12345');
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
       cy.waitForLoad();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('button', { name: 'Tilbake til oppsummering' }).clickAndGone();
 
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
@@ -379,7 +418,7 @@ describe('navigation', () => {
   it('navigation processing state should not stay pending if a useWaitForState unmounts before resolving', () => {
     cy.startAppInstance(appFrontend.apps.navigationTest);
     cy.waitForLoad();
-    cy.gotoNavGroup('Utfylling', 'Fødselsdag');
+    cy.gotoNavGroup('Utfylling', 'desktop', 'Fødselsdag');
     // Typing invalid data into the date-picker and immediately clicking next
     // causes us to first wait for saving, then when the validation fails
     // the error report causes the next-button to unmount before
diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 8262fd5abc..7dfa3fdc2a 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -862,15 +862,28 @@ Cypress.Commands.add('getCurrentViewportSize', function () {
   }));
 });
 
-Cypress.Commands.add('showNavGroups', () => {
-  cy.findByRole('button', { name: 'Skjemasider' }).click();
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('be.visible');
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('have.css', 'opacity', '1');
+Cypress.Commands.add('showNavGroupsTablet', () => {
+  cy.findByRole('button', { name: /Skjemasider/i }).click();
+  cy.get('div[data-testid="page-navigation-dialog"]').should('be.visible');
+  cy.get('div[data-testid="page-navigation-dialog"]').should('have.css', 'opacity', '1');
 });
 
-Cypress.Commands.add('hideNavGroups', () => {
-  cy.findByRole('dialog', { name: 'Skjemasider' }).within(() => cy.findByRole('button', { name: 'Lukk' }).click());
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+Cypress.Commands.add('showNavGroupsMobile', () => {
+  cy.findByRole('button', { name: /Skjemasider/i }).click();
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('be.visible');
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('have.css', 'opacity', '1');
+});
+
+Cypress.Commands.add('hideNavGroupsTablet', () => {
+  cy.get('div[data-testid="page-navigation-dialog"]').within(() => cy.findByRole('button', { name: 'Lukk' }).click());
+  cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
+});
+
+Cypress.Commands.add('hideNavGroupsMobile', () => {
+  cy.get('dialog[data-testid="page-navigation-dialog"]').within(() =>
+    cy.findByRole('button', { name: /Lukk dialogvindu/i }).click(),
+  );
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('not.be.visible');
 });
 
 Cypress.Commands.add('navGroup', (groupName, pageName, subformName) => {
@@ -897,9 +910,11 @@ Cypress.Commands.add('navGroup', (groupName, pageName, subformName) => {
   }
 });
 
-Cypress.Commands.add('gotoNavGroup', (groupName, pageName) => {
+Cypress.Commands.add('gotoNavGroup', (groupName, device, pageName) => {
   cy.get('body').then((body) => {
     const isUsingDialog = !!body.find('[data-testid=page-navigation-trigger]').length;
+    const isMobile = device === 'mobile';
+    const isTablet = device === 'tablet';
     if (pageName) {
       cy.navGroup(groupName).then((group) => {
         if (group[0].getAttribute('aria-expanded') === 'false') {
@@ -908,16 +923,20 @@ Cypress.Commands.add('gotoNavGroup', (groupName, pageName) => {
       });
       cy.navGroup(groupName).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(groupName, pageName).click();
-      if (isUsingDialog) {
-        cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+      if (isUsingDialog && isMobile) {
+        cy.findByRole('dialog', { name: /Skjemasider/i }).should('not.exist');
+      } else if (isUsingDialog && isTablet) {
+        cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
       } else {
         cy.navGroup(groupName, pageName).should('have.attr', 'aria-current', 'page');
       }
     } else {
       cy.navGroup(groupName).should('not.have.attr', 'aria-expanded');
       cy.navGroup(groupName).click();
-      if (isUsingDialog) {
-        cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+      if (isUsingDialog && isMobile) {
+        cy.findByRole('dialog', { name: /Skjemasider/i }).should('not.exist');
+      } else if (isUsingDialog && isTablet) {
+        cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
       } else {
         cy.navGroup(groupName).should('have.attr', 'aria-current', 'page');
       }
diff --git a/test/e2e/support/global.ts b/test/e2e/support/global.ts
index a0f83ae79d..723c044b5e 100644
--- a/test/e2e/support/global.ts
+++ b/test/e2e/support/global.ts
@@ -298,8 +298,10 @@ declare global {
 
       getCurrentViewportSize(): Chainable<Size>;
 
-      showNavGroups(): Chainable<null>;
-      hideNavGroups(): Chainable<null>;
+      showNavGroupsTablet(): Chainable<null>;
+      hideNavGroupsTablet(): Chainable<null>;
+      showNavGroupsMobile(): Chainable<null>;
+      hideNavGroupsMobile(): Chainable<null>;
 
       navGroup(
         groupName: string | RegExp,
@@ -307,7 +309,11 @@ declare global {
         subformName?: string | RegExp,
       ): Chainable<JQuery<Element>>;
 
-      gotoNavGroup(groupName: string | RegExp, pageName?: string | RegExp): Chainable<null>;
+      gotoNavGroup(
+        groupName: string | RegExp,
+        device: 'mobile' | 'tablet' | 'desktop',
+        pageName?: string | RegExp,
+      ): Chainable<null>;
 
       openNavGroup(
         groupName: string | RegExp,

From a7799dbd331f8b9b016a8742d97ef079ac328920 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 10:02:47 +0200
Subject: [PATCH 098/170] fix subform tests

---
 test/e2e/integration/subform-test/subform.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/test/e2e/integration/subform-test/subform.ts b/test/e2e/integration/subform-test/subform.ts
index a100b6641a..94eb5dab49 100644
--- a/test/e2e/integration/subform-test/subform.ts
+++ b/test/e2e/integration/subform-test/subform.ts
@@ -20,8 +20,7 @@ describe('Subform test', () => {
     cy.get('#Input-Name').should('be.visible').type(name);
 
     // Test process next when required subform is missing
-    cy.get('[data-testid="NavigationButtons"] button.ds-btn--primary').contains('Neste').scrollIntoView();
-    cy.get('[data-testid="NavigationButtons"] button.ds-btn--primary').should('be.visible').click();
+    cy.findByRole('button', { name: /Neste/i }).click();
     cy.get('[data-testid="ErrorReport"]').should('be.visible');
 
     // Navigate to the subform page
@@ -107,7 +106,7 @@ describe('Subform test', () => {
     cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 2);
     cy.get('#subform-subform-mopeder-table tbody tr').eq(1).findByText('Slett').clickAndGone();
     cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 1);
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').clickAndGone();
+    cy.findByRole('button', { name: /Neste/i }).clickAndGone();
 
     // Verify summary fields
     cy.get('[data-testid=summary-single-value-component]').eq(0).should('contain.text', name);
@@ -127,7 +126,7 @@ describe('Subform test', () => {
 
     cy.findByRole('button', { name: 'Vis Summary2 for hele steget' }).clickAndGone();
 
-    cy.get('.fds-paragraph')
+    cy.get('.ds-paragraph')
       .eq(0)
       .should(
         'contain.text',

From 6a9a85ef5ece852304d1e905009e624ef01a20f8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 10:08:34 +0200
Subject: [PATCH 099/170] fix stateless tests

---
 src/components/presentation/AppHeader/AppHeaderMenu.tsx | 1 +
 test/e2e/integration/stateless-app/stateless.ts         | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/presentation/AppHeader/AppHeaderMenu.tsx b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
index f9392eb9c1..e4f880210d 100644
--- a/src/components/presentation/AppHeader/AppHeaderMenu.tsx
+++ b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
@@ -59,6 +59,7 @@ export function AppHeaderMenu({ logoColor }: AppHeaderMenuProps) {
           </CircleIcon>
         </Dropdown.Trigger>
         <Dropdown
+          data-testid='app-header-menu'
           data-size='sm'
           open={isOpen}
           onClose={() => setIsOpen(false)}
diff --git a/test/e2e/integration/stateless-app/stateless.ts b/test/e2e/integration/stateless-app/stateless.ts
index 9ab33aa12f..b93bbd5ce5 100644
--- a/test/e2e/integration/stateless-app/stateless.ts
+++ b/test/e2e/integration/stateless-app/stateless.ts
@@ -37,8 +37,8 @@ describe('Stateless', () => {
 
   it('Logout from appfrontend', () => {
     cy.findByRole('button', { name: 'Profil ikon knapp' }).click();
-    cy.findByRole('dialog').should('be.visible');
-    cy.findByRole('menuitem', { name: 'Logg ut' }).should('be.visible');
+    cy.get('div[data-testid="app-header-menu"]').should('be.visible');
+    cy.findByRole('link', { name: 'Logg ut' }).should('be.visible');
   });
 
   it('is possible to start app instance from stateless app', () => {

From 1ce547cd873a28e7c84c7ac68b5f2dc15c7fd3cc Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 10:13:16 +0200
Subject: [PATCH 100/170] fix payment test

---
 test/e2e/integration/payment-test/payment.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/payment-test/payment.ts b/test/e2e/integration/payment-test/payment.ts
index 05829788f9..68dc3740e4 100644
--- a/test/e2e/integration/payment-test/payment.ts
+++ b/test/e2e/integration/payment-test/payment.ts
@@ -67,7 +67,7 @@ describe('Payment', () => {
         },
       ).as('paymentInfoRequest');
       cy.wait('@paymentInfoRequest').then((_) => {
-        cy.get('div.ds-alert--warning')
+        cy.get('div.ds-alert')
           .should('exist')
           .and('be.visible')
           .within(() => {

From db6a8a75c5ec744470c02507288ae837b445c9cf Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 11:57:42 +0200
Subject: [PATCH 101/170] fix mobile tests

---
 test/e2e/integration/frontend-test/mobile.ts                  | 4 ++--
 .../groupCheckboxMultiSelectListAndVerify.ts                  | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/test/e2e/integration/frontend-test/mobile.ts b/test/e2e/integration/frontend-test/mobile.ts
index 4b17633af1..493dfcd230 100644
--- a/test/e2e/integration/frontend-test/mobile.ts
+++ b/test/e2e/integration/frontend-test/mobile.ts
@@ -106,7 +106,7 @@ function testLikert() {
 }
 
 function testListMobile() {
-  cy.findByRole('radiogroup').within(() => {
+  cy.findByRole('group', { name: /Hvem gjelder saken? */ }).within(() => {
     cy.findByRole('radio', { name: /caroline/i }).check();
     cy.findByRole('radio', { name: /caroline/i }).should('be.checked');
   });
@@ -119,7 +119,7 @@ function testListTablet() {
     cy.findByRole('row', { name: /caroline/i }).click();
     cy.findByRole('radio', { name: /caroline/i }).should('be.checked');
   });
-  cy.findByRole('button', { name: 'Neste' }).click();
+  cy.findAllByRole('button', { name: 'Neste' }).eq(1).click();
   sendIn();
 }
 
diff --git a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
index 87a293fd36..1599b75855 100644
--- a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
+++ b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
@@ -7,10 +7,11 @@ export const groupCheckboxMultiSelectListAndVerify = (checkboxText = '', multiSe
   cy.gotoNavPage('Flervalg');
   const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
   const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-  const multiselectList = 'div[role="listbox"]';
+  const multiselectList = 'u-datalist[role="listbox"]';
   cy.get(multiselect).click();
   cy.get(multiselectList).contains('span', multiSelectText).click();
   cy.get(multiselect).contains('span', multiSelectText).should('exist');
+  cy.findByRole('button', { name: /${multiSelectText}, Press to remove, 1 of 1/ }).should('exist');
   cy.get(repGroup).click({ force: true });
 
   cy.gotoNavPage('Liste (tabell)');

From 751a08832a526b82321eac423053ee3e5a5bfed2 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 12:06:57 +0200
Subject: [PATCH 102/170] fix helptext screen reader

---
 src/app-components/HelpText/HelpText.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index bd5d9a400c..03abcbd47e 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -75,7 +75,6 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
             className={cl(classes['helpText-icon'])}
             openState={open}
           />
-          <span className={classes.screenReaderOnly}>{title}</span>
         </button>
       </Popover.Trigger>
       <Popover

From 7b62d36450d908514d3ffea7d698dc7289aa0e1f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 12:51:01 +0200
Subject: [PATCH 103/170] fix sorting and list component tests

---
 src/layout/List/ListComponent.tsx             | 34 ++++++++++++++-----
 .../frontend-test/list-component.ts           | 23 +++++++------
 test/e2e/pageobjects/datalist.ts              |  2 +-
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index d2ce1197c5..99e18a0726 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -101,6 +101,16 @@ export const ListComponent = ({ node }: IListProps) => {
     }
   };
 
+  const handleSort = (key: string) => {
+    if (sortColumn === key && sortDirection === 'ascending') {
+      setSortColumn(undefined);
+      setSortDirection(undefined);
+    } else {
+      setSortColumn(key);
+      setSortDirection(sortColumn === key && sortDirection === 'descending' ? 'ascending' : 'descending');
+    }
+  };
+
   const renderListItems = (row: Row, tableHeaders: { [x: string]: string | undefined }) =>
     tableHeadersToShowInMobile.map((key) => (
       <div key={key}>
@@ -217,14 +227,22 @@ export const ListComponent = ({ node }: IListProps) => {
         <Table.Head>
           <Table.Row>
             <Table.HeaderCell />
-            {Object.entries(tableHeaders).map(([key, value]) => (
-              <Table.HeaderCell
-                key={key}
-                sort={sortableColumns?.includes(key) && sortColumn === key ? sortDirection : undefined}
-              >
-                <Lang id={value} />
-              </Table.HeaderCell>
-            ))}
+            {Object.entries(tableHeaders).map(([key, value]) => {
+              const isSortable = sortableColumns?.includes(key);
+              let sort: AriaAttributes['aria-sort'] = undefined;
+              if (isSortable) {
+                sort = sortColumn === key ? sortDirection : 'none';
+              }
+              return (
+                <Table.HeaderCell
+                  key={key}
+                  sort={sort}
+                  onClick={isSortable ? () => handleSort(key) : undefined}
+                >
+                  <Lang id={value} />
+                </Table.HeaderCell>
+              );
+            })}
           </Table.Row>
         </Table.Head>
         <Table.Body>
diff --git a/test/e2e/integration/frontend-test/list-component.ts b/test/e2e/integration/frontend-test/list-component.ts
index 60ac613d33..5df59940b6 100644
--- a/test/e2e/integration/frontend-test/list-component.ts
+++ b/test/e2e/integration/frontend-test/list-component.ts
@@ -61,12 +61,10 @@ describe('List component', () => {
 
     cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).should('have.value', '5');
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 5);
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '10' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('10');
     cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).should('have.value', 10);
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 10);
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '5' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('5');
   });
 
   it('Sorting should work as expected', () => {
@@ -81,19 +79,22 @@ describe('List component', () => {
   it('Navigation in pagination should work as expected', () => {
     cy.goto('datalist');
 
-    cy.get(dataListPage.navigateNextButton).should('not.be.disabled');
+    cy.findAllByRole('button', { name: /neste/i }).first().should('not.be.disabled');
     cy.get(dataListPage.tableBody).first().first().contains('Caroline');
-    cy.get(dataListPage.navigateNextButton).click();
-    cy.get(dataListPage.navigateNextButton).get(dataListPage.tableBody).first().first().contains('Hans');
-    cy.get(dataListPage.navigatePreviousButton).click();
-    cy.get(dataListPage.navigatePreviousButton).get(dataListPage.tableBody).first().first().contains('Caroline');
+    cy.findAllByRole('button', { name: /neste/i }).first().click();
+    cy.findAllByRole('button', { name: /neste/i }).first().get(dataListPage.tableBody).first().first().contains('Hans');
+    cy.findByRole('button', { name: /forrige/i }).click();
+    cy.findByRole('button', { name: /forrige/i })
+      .get(dataListPage.tableBody)
+      .first()
+      .first()
+      .contains('Caroline');
   });
 
   it('Should expand to 10 rows and take a snapshot', () => {
     cy.goto('datalist');
 
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '10' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('10');
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 10);
 
     cy.snapshot('list-component');
diff --git a/test/e2e/pageobjects/datalist.ts b/test/e2e/pageobjects/datalist.ts
index abe3613db6..85ee269655 100644
--- a/test/e2e/pageobjects/datalist.ts
+++ b/test/e2e/pageobjects/datalist.ts
@@ -1,6 +1,6 @@
 export class Datalist {
   public listComponent = '#form-content-listComponent';
-  public selectComponent = '[data-testid^="paginationRowsPerPageDropdown"]';
+  public selectComponent = '#paginationRowsPerPageDropdown';
   public tableBody = '#form-content-listComponent table tbody';
   public navigateNextButton = '[data-testid=paginationNextButton]';
   public navigatePreviousButton = '[data-testid=paginationPreviousButton]';

From 60d92a28db30aa4cb24f771ee0754b7417a95402 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 26 May 2025 13:46:16 +0200
Subject: [PATCH 104/170] conditionally add description radio group

---
 src/layout/RadioButtons/ControlledRadioGroup.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 278be97e68..ff988dde6f 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -89,9 +89,11 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
           <Fieldset.Legend className={cn({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}>
             {labelText}
           </Fieldset.Legend>
-          <Fieldset.Description>
-            <Lang id={textResourceBindings?.description} />
-          </Fieldset.Description>
+          {textResourceBindings?.description && (
+            <Fieldset.Description>
+              <Lang id={textResourceBindings?.description} />
+            </Fieldset.Description>
+          )}
           <ConditionalWrapper
             condition={shouldDisplayHorizontally}
             wrapper={(children) => <div className={classes.inlineRadioGroup}>{children}</div>}

From 86b36e3ff1267a22291b8efee56e0e68f7c09588 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 09:26:53 +0200
Subject: [PATCH 105/170] attempt to fix regex in test

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 .../component-library/groupCheckboxMultiSelectListAndVerify.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
index 1599b75855..e09629510c 100644
--- a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
+++ b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
@@ -11,7 +11,7 @@ export const groupCheckboxMultiSelectListAndVerify = (checkboxText = '', multiSe
   cy.get(multiselect).click();
   cy.get(multiselectList).contains('span', multiSelectText).click();
   cy.get(multiselect).contains('span', multiSelectText).should('exist');
-  cy.findByRole('button', { name: /${multiSelectText}, Press to remove, 1 of 1/ }).should('exist');
+  cy.findByRole('button', { name: new RegExp(`${multiSelectText}, Press to remove, 1 of 1`) }).should('exist');
   cy.get(repGroup).click({ force: true });
 
   cy.gotoNavPage('Liste (tabell)');

From d35fb23993131a89d994cda69e0670c5836b2aec Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 09:54:11 +0200
Subject: [PATCH 106/170] add known wcag violation

---
 test/e2e/support/custom.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 7dfa3fdc2a..45b9233075 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -180,9 +180,15 @@ const knownWcagViolations: KnownViolation[] = [
   {
     spec: 'frontend-test/hide-row-in-group.ts',
     test: 'should be possible to hide rows when "Endre fra" is greater or equals to [...]',
-    id: 'heading-order',
+    id: 'page-has-heading-one',
     nodeLength: 1,
   },
+  {
+    spec: 'frontend-test/hide-row-in-group.ts',
+    test: 'should be possible to hide rows when "Endre fra" is greater or equals to [...]',
+    id: 'aria-hidden-focus', // floating-ui marks everything else as aria-hidden, when dropdown from DS is open, swap to suggestion component when it is no longer experimental
+    nodeLength: 18,
+  },
   {
     spec: 'frontend-test/likert.ts',
     test: 'Should show validation message for required likert',

From 7beca62c986250bce59121ca65be6c9a1c92021a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 10:20:35 +0200
Subject: [PATCH 107/170] fix group test

---
 test/e2e/integration/frontend-test/group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index 1b34bd40b8..47a44743ff 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -311,7 +311,7 @@ describe('Group', () => {
 
     cy.get(appFrontend.fieldValidation('currentValue-0')).should('have.text', texts.requiredFieldFromValue);
 
-    cy.findByRole('textbox', { name: '1. Endre fra*' }).type('123');
+    cy.findByRole('textbox', { name: '1. Endre fra' }).type('123');
     cy.get(appFrontend.group.saveMainGroup).click();
 
     cy.get(appFrontend.fieldValidation('newValue-0')).should('have.text', texts.requiredFieldToValue);

From 3f76519fbeb47253daf926d59d3d04462f52e133 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 10:31:40 +0200
Subject: [PATCH 108/170] fix group test

---
 test/e2e/integration/frontend-test/group.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index 47a44743ff..24252e69bc 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -661,10 +661,8 @@ describe('Group', () => {
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
-    // The title and description is set to the same text resource binding, and duplicates the text we need to
-    // put in `name` for this to work
     const selectedOption = 'Endre fra: 120, Endre til: 350';
-    const longSelectedText = `${selectedOption} Fungerer kalkulatoren din? ${selectedOption} Fungerer kalkulatoren din?`;
+    const longSelectedText = `${selectedOption} Fungerer kalkulatoren din?`;
 
     // First make sure to check the second item in the bottom-most radio group. This should also change the items
     // in the two dropdowns above.

From 921c6ed7bcae86474e88a8b3b29410f8d08e11da Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 14:37:23 +0200
Subject: [PATCH 109/170] cant focus paragraph elements

---
 src/layout/GenericComponent.tsx                  | 2 +-
 test/e2e/integration/frontend-test/validation.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layout/GenericComponent.tsx b/src/layout/GenericComponent.tsx
index 55e029eec3..c5f422bec5 100644
--- a/src/layout/GenericComponent.tsx
+++ b/src/layout/GenericComponent.tsx
@@ -145,7 +145,7 @@ function ActualGenericComponent<Type extends CompTypes = CompTypes>({
       return NavigationResult.SuccessfulNoFocus;
     }
 
-    const targetHtmlNodes = containerDivRef.current?.querySelectorAll('input,textarea,select,p');
+    const targetHtmlNodes = containerDivRef.current?.querySelectorAll('input,textarea,select');
 
     if (targetHtmlNodes) {
       if (targetHtmlNodes.length === 1) {
diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index 9fc5e3d88a..1405643ad3 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -320,7 +320,7 @@ describe('Validation', () => {
   it('List component: validation messages should only show up once', () => {
     cy.goto('datalist');
     cy.get(dataListPage.tableBody).first().first().contains('Caroline');
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: /neste/i }).eq(1).click();
     cy.get(appFrontend.errorReport)
       .should('be.inViewport')
       .should('contain.text', texts.errorReport)
@@ -769,7 +769,7 @@ describe('Validation', () => {
     });
     cy.goto('message');
 
-    cy.findByRole('textbox', { name: 'Input with falsy value*' }).type('0');
+    cy.findByRole('textbox', { name: 'Input with falsy value' }).type('0');
     cy.findByRole('button', { name: 'Send inn' }).click();
 
     // Content from next page

From 50deb280eba825400aca73a8f7691f22634aecf8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 28 May 2025 15:17:01 +0200
Subject: [PATCH 110/170] make validationmessages spans

---
 .../validation/ComponentValidations.tsx         | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index c6296fe084..0b03069ac1 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -100,12 +100,17 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
     <ul className={classes.errorList}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
-          <ValidationMessage data-size='sm'>
-            <Lang
-              id={validation.message.key}
-              params={validation.message.params}
-              node={node}
-            />
+          <ValidationMessage
+            data-size='sm'
+            asChild
+          >
+            <span>
+              <Lang
+                id={validation.message.key}
+                params={validation.message.params}
+                node={node}
+              />
+            </span>
           </ValidationMessage>
         </li>
       ))}

From c0e30f04a2081b8a23499b37659a389ad7d59119 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 30 May 2025 13:30:48 +0200
Subject: [PATCH 111/170] fix checkboxes test

---
 test/e2e/integration/component-library/checkboxes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/component-library/checkboxes.ts b/test/e2e/integration/component-library/checkboxes.ts
index 3620f7a35d..510a48765b 100644
--- a/test/e2e/integration/component-library/checkboxes.ts
+++ b/test/e2e/integration/component-library/checkboxes.ts
@@ -375,7 +375,7 @@ describe('Checkboxes component', () => {
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 

From ae74be5299b6c80193e162e6f8b6760375894c3c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 30 May 2025 14:59:21 +0200
Subject: [PATCH 112/170] fix some tests in components.ts

---
 test/e2e/integration/frontend-test/components.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index f5c413ba4e..a0955c34cf 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -14,7 +14,7 @@ describe('UI Components', () => {
   const newFirstNameNb = /nytt fornavn/i;
   const newMiddleNameNb = /nytt mellomnavn/i;
   const newLastNameNb = /nytt etternavn/i;
-  const confirmChangeOfName = /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det dette er en hjelpetekst\./i;
+  const confirmChangeOfName = /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det/i;
 
   it('Image component with help text', () => {
     cy.goto('message');
@@ -363,7 +363,7 @@ describe('UI Components', () => {
     cy.findByRole('textbox', { name: newMiddleNameNb }).clear();
     cy.findByRole('textbox', { name: newMiddleNameNb }).type('all_readOnly');
     cy.findByRole('checkbox', {
-      name: /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det dette er en hjelpetekst\./i,
+      name: /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det/i,
     }).should('have.attr', 'readonly');
     cy.get(appFrontend.changeOfName.reasons).find('input').should('have.attr', 'readonly');
     cy.snapshot('components:read-only');

From 1f833dee6a01d009bba4289395e15b10039a2cde Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 2 Jun 2025 09:35:41 +0200
Subject: [PATCH 113/170] fix grid tests

---
 test/e2e/integration/frontend-test/grid.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts
index 14c182fa9e..d3fa00793c 100644
--- a/test/e2e/integration/frontend-test/grid.ts
+++ b/test/e2e/integration/frontend-test/grid.ts
@@ -23,13 +23,13 @@ describe('Grid component', () => {
 
     // Dynamics hiding the entire grid table
     cy.get(appFrontend.grid.gridWithAll).should('be.visible');
-    cy.get(appFrontend.grid.showGridWithAll).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(1).check();
     cy.get(appFrontend.grid.gridWithAll).should('not.exist');
 
     // Dynamics hiding an entire row
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(0).check();
     cy.get(appFrontend.grid.grid).find('tr').should('have.length', 6);
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Ja")').dsCheck();
+    cy.findAllByRole('radio', { name: /ja/i }).eq(0).check();
     cy.get(appFrontend.grid.grid).find('tr').should('have.length', 7);
 
     // Filling out the form without ending up at 100% total. We reference these fields in their respective rows
@@ -118,7 +118,7 @@ describe('Grid component', () => {
       'contain.text',
       'Er fordelingen av kredittkortgjeld verifisert?',
     );
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(0).check();
     cy.get(appFrontend.grid.kredittkort.percent).should('not.exist');
     cy.get(appFrontend.grid.kredittkort.percentComponent).should('not.exist');
     cy.get(appFrontend.grid.kredittkort.verifiedComponent).should('not.exist');
@@ -174,10 +174,10 @@ describe('Grid component', () => {
     cy.get(appFrontend.helpText.alert).should('contain.text', 'Help text');
 
     cy.findByRole('cell', {
-      name: /prosentandel av gjeld i studielån hjelpetekst for prosentandel av gjeld i studielån dette er en beskrivende tekst/i,
+      name: /prosentandel av gjeld i studielån dette er en beskrivende tekst/i,
     }).should('exist');
     cy.findByRole('button', { name: /Hjelpetekst for Prosentandel av gjeld i studielån/i }).click();
-    cy.focused().should('have.attr', 'id', 'fordeling-studie-helptext');
+    cy.focused().should('have.attr', 'aria-label', 'Hjelpetekst for Prosentandel av gjeld i studielån');
     cy.get(appFrontend.helpText.alert).should('contain.text', 'Dette er en hjelpetekst');
   });
 });

From a1fa27262c81df3adc942315623c9e77284141c4 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 2 Jun 2025 09:59:52 +0200
Subject: [PATCH 114/170] fix group test

---
 test/e2e/support/custom.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 41fe89e3f6..8b57127444 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -444,9 +444,9 @@ Cypress.Commands.add(
     cy.get(appFrontend.group.mainGroup).find(appFrontend.group.editContainer).find(appFrontend.group.next).click();
 
     if (openByDefault || typeof openByDefault === 'undefined') {
-      cy.get(appFrontend.group.addNewItemSubGroup).should('not.exist');
+      cy.findByRole('button', { name: 'Legg til ny' }).should('not.exist');
     } else {
-      cy.get(appFrontend.group.addNewItemSubGroup).click();
+      cy.findByRole('button', { name: 'Legg til ny' }).click();
     }
 
     cy.get(appFrontend.group.comments).type(comment);

From eb415af3ee793f72502b1b0e0b730a4a5915349c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 2 Jun 2025 15:41:57 +0200
Subject: [PATCH 115/170] fix alertOnChange for checkboxes

---
 src/layout/Checkboxes/CheckboxesContainerComponent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index cd43665f91..9d088f5729 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -111,7 +111,8 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
             >
               {calculatedOptions.map((option) => (
                 <WrappedCheckbox
-                  key={option.value}
+                  // Force remount to ensure checkbox reflects correct checked state
+                  key={`checkbox-${option.value}-${selectedValues.includes(option.value)}`}
                   id={id}
                   option={option}
                   hideLabel={hideLabel}

From 87f09d055b6e457782f44d33a0bbaa9f315fcf74 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 3 Jun 2025 14:29:31 +0200
Subject: [PATCH 116/170] fix validation tests

---
 src/layout/GenericComponent.tsx                  | 2 +-
 test/e2e/integration/frontend-test/validation.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layout/GenericComponent.tsx b/src/layout/GenericComponent.tsx
index c5f422bec5..55e029eec3 100644
--- a/src/layout/GenericComponent.tsx
+++ b/src/layout/GenericComponent.tsx
@@ -145,7 +145,7 @@ function ActualGenericComponent<Type extends CompTypes = CompTypes>({
       return NavigationResult.SuccessfulNoFocus;
     }
 
-    const targetHtmlNodes = containerDivRef.current?.querySelectorAll('input,textarea,select');
+    const targetHtmlNodes = containerDivRef.current?.querySelectorAll('input,textarea,select,p');
 
     if (targetHtmlNodes) {
       if (targetHtmlNodes.length === 1) {
diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index 1405643ad3..e175555790 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -347,7 +347,6 @@ describe('Validation', () => {
 
     cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
-    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).blur();
     cy.findByRole('button', { name: /Neste/ }).clickAndGone();
     cy.navPage('repeating').should('have.attr', 'aria-current', 'page');
 

From b66ca23ca124d036122a063dd4f94223796a6c4e Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 3 Jun 2025 14:34:11 +0200
Subject: [PATCH 117/170] fix attachments in group test

---
 test/e2e/integration/frontend-test/attachments-in-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index 8a0e29645c..34fdca512a 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -216,7 +216,7 @@ describe('Repeating group attachments', () => {
       }
     });
 
-    cy.findByRole('button', { name: /lagre og lukk/i })
+    cy.findAllByRole('button', { name: /lagre og lukk/i })
       .last()
       .click();
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');

From 308e7352b2e7e8cc8947f7ed9a2bdc6144d47143 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 3 Jun 2025 14:37:47 +0200
Subject: [PATCH 118/170] fix custom-confirm test

---
 test/e2e/integration/frontend-test/custom-confirm.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/integration/frontend-test/custom-confirm.ts b/test/e2e/integration/frontend-test/custom-confirm.ts
index 3209cc4209..b6786f49e7 100644
--- a/test/e2e/integration/frontend-test/custom-confirm.ts
+++ b/test/e2e/integration/frontend-test/custom-confirm.ts
@@ -9,13 +9,13 @@ describe('Custom confirm page', () => {
     cy.goto('datalist');
 
     cy.get(dataListPage.tableBody).contains('Johanne').closest('tr').click();
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: 'Neste' }).last().click();
     cy.get('[data-componentid="useCustomConfirm"]').findByText('Ja, bruk egendefinert').click();
     cy.findByRole('button', { name: 'Forrige' }).click();
 
     for (const name of ['Caroline', 'Kåre', 'Petter']) {
       cy.get(dataListPage.tableBody).contains(name).closest('tr').click();
-      cy.findByRole('button', { name: 'Neste' }).click();
+      cy.findAllByRole('button', { name: 'Neste' }).last().click();
       cy.get(appFrontend.sendinButton).click();
 
       cy.get('[data-componentid="confirmBody"]').should('contain.text', 'Dette er en egendefinert bekreftelsesside');
@@ -25,7 +25,7 @@ describe('Custom confirm page', () => {
       cy.get(dataListPage.tableBody).contains(name).closest('tr').find('input').should('be.checked');
     }
 
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: 'Neste' }).last().click();
     cy.get(appFrontend.sendinButton).click();
     cy.get('[data-componentid="confirmBody"]').should('contain.text', 'Dette er en egendefinert bekreftelsesside');
     cy.get('[data-componentid="confirmBody"]').should('contain.text', `på forrige side valgte du Petter.`);

From bcadf9f05b7d6eb9258c305a92e486213eb01035 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 09:41:30 +0200
Subject: [PATCH 119/170] fix attachment in group test

---
 test/e2e/integration/frontend-test/attachments-in-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index 34fdca512a..a911955229 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -218,7 +218,7 @@ describe('Repeating group attachments', () => {
 
     cy.findAllByRole('button', { name: /lagre og lukk/i })
       .last()
-      .click();
+      .click('center');
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();

From 1254f125b8a55cf3a81dd64e7814b575cf311a8e Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 09:49:51 +0200
Subject: [PATCH 120/170] fix on-entry test

---
 test/e2e/integration/frontend-test/on-entry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/on-entry.ts b/test/e2e/integration/frontend-test/on-entry.ts
index d3cf7e211a..6bce0bde15 100644
--- a/test/e2e/integration/frontend-test/on-entry.ts
+++ b/test/e2e/integration/frontend-test/on-entry.ts
@@ -106,7 +106,7 @@ describe('On Entry', () => {
       .eq(1)
       .should('have.text', 'Ola Nordmann');
 
-    cy.get(appFrontend.selectInstance.nexPageButton).click();
+    cy.findByRole('button', { name: /neste/i }).click();
 
     cy.get(appFrontend.selectInstance.tableBody)
       .find('tr')

From a9f9c980551783413150b8681d1cd0cb650020e8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 10:00:08 +0200
Subject: [PATCH 121/170] fix group test

---
 test/e2e/integration/frontend-test/group.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index 24252e69bc..d6e107326e 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -477,7 +477,6 @@ describe('Group', () => {
     cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
-    cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).blur();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 3);
     cy.snapshot('group:edit-in-table');
 

From ed9f53f600257a3641b25e944bca66e34b4ae173 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 10:03:46 +0200
Subject: [PATCH 122/170] fix checkbox alrte on change test

---
 test/e2e/integration/frontend-test/components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index a0955c34cf..2b2fc93aa8 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -517,7 +517,7 @@ describe('UI Components', () => {
     cy.goto('changename');
     cy.gotoNavPage('grid');
     // dialog pops up when unchecking a checkbox
-    cy.findByRole('checkbox', { name: /Ja/ }).dblclick();
+    cy.findAllByRole('checkbox', { name: /Ja/ }).first().dblclick();
     //Make sure that the alert popover for only one checkbox is displayed, if several dialogs are displayed, the test will fail
     cy.get(appFrontend.deleteWarningPopover);
   });

From 7f3f46336ae38f6e64d5077f0155d8f66ed691d3 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 10:27:18 +0200
Subject: [PATCH 123/170] cleanup

---
 src/app-components/Label/Fieldset.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
index 206678d4e6..b329758c1e 100644
--- a/src/app-components/Label/Fieldset.tsx
+++ b/src/app-components/Label/Fieldset.tsx
@@ -70,7 +70,6 @@ export function Fieldset({
         <DesignsystemetFieldset
           className={cn(className)}
           data-size={size}
-          // FIXME: find a way to use classnames for setting font size. Not working currently
         >
           <DesignsystemetFieldset.Legend>
             <span className={cn(labelClasses.labelAndHelpWrapper)}>

From f27a7c937cc84e52882cc2d82af8f4039ae4d9be Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 10:30:32 +0200
Subject: [PATCH 124/170] fix attachments in group test

---
 test/e2e/integration/frontend-test/attachments-in-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index b8c0bce1c5..32977f9111 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -228,7 +228,7 @@ describe('Repeating group attachments', () => {
 
     cy.findAllByRole('button', { name: /lagre og lukk/i })
       .last()
-      .click('center');
+      .click('top');
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();

From 85aea6bc39edacbe1ecf1c8aefdbbb98d62148d9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 13:01:08 +0200
Subject: [PATCH 125/170] fix group test

---
 test/e2e/support/custom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 8b57127444..d7dcbef492 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -446,7 +446,7 @@ Cypress.Commands.add(
     if (openByDefault || typeof openByDefault === 'undefined') {
       cy.findByRole('button', { name: 'Legg til ny' }).should('not.exist');
     } else {
-      cy.findByRole('button', { name: 'Legg til ny' }).click();
+      cy.findByRole('button', { name: 'Legg til ny' }).click({ force: true });
     }
 
     cy.get(appFrontend.group.comments).type(comment);

From 2b19090a36634bc0a2d14c86962369203bb891cc Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 13:09:04 +0200
Subject: [PATCH 126/170] fix validation test

---
 test/e2e/integration/frontend-test/validation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index e175555790..91f9a4bc9d 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -363,7 +363,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.addNewItem).click();
     cy.get(appFrontend.group.editContainer).find(appFrontend.group.next).click();
     cy.get(appFrontend.group.row(2).nestedGroup.row(0).comments).should('be.visible');
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.editContainer).should('be.visible');
     cy.get(appFrontend.errorReport).findAllByRole('listitem').should('have.length', 3);
     cy.get(appFrontend.errorReport).findByText('Du må fylle ut 1. endre fra').click();

From 29985835f1a78b1f11aa7d6f5c3c1d78a4d035c6 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 13:52:59 +0200
Subject: [PATCH 127/170] fix group test and attachment in group test

---
 test/e2e/integration/frontend-test/attachments-in-group.ts | 2 +-
 test/e2e/integration/frontend-test/validation.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index 32977f9111..dff0d4b87a 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -228,7 +228,7 @@ describe('Repeating group attachments', () => {
 
     cy.findAllByRole('button', { name: /lagre og lukk/i })
       .last()
-      .click('top');
+      .click({ force: true });
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();
diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index 91f9a4bc9d..b2d2784561 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -937,7 +937,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.comments).should('be.visible'); // Required field in the nested group
     cy.get(appFrontend.group.row(1).nestedGroup.row(0).tableRow).should('not.contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).tableRow).should('not.contain.text', 'Rett feil her');
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.row(1).nestedGroup.row(0).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.errorReport).findAllByRole('listitem').should('have.length', 1);

From dffaecfbeb1832690e885fb392cb2e838d7b332b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 14:28:58 +0200
Subject: [PATCH 128/170] fix multipleselect test

---
 test/e2e/integration/component-library/multiple-select.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index cd5ffbd26f..43646d692b 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -56,6 +56,7 @@ describe('Multiple select component', () => {
     cy.findByRole('button', { name: /^Karoline/i }).should('not.exist');
 
     // Unchecking from Checkboxes should remove from RepeatingGroup (observe that data is preserved)
+    cy.get(multiselect).type('{esc}'); // Make sure the multiselect is closed
     cy.findByRole('button', { name: /Kåre, Press to remove, 1 of 2/i }).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 row
     cy.get(repGroup)

From 3392aa1d003be8b34188da357795779ea6abb436 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 14:30:53 +0200
Subject: [PATCH 129/170] fix attachemnt in group test

---
 test/e2e/integration/frontend-test/attachments-in-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index dff0d4b87a..b6b5de0cd9 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -254,7 +254,7 @@ describe('Repeating group attachments', () => {
         cy.get(appFrontend.group.row(1).uploadMulti.addMoreBtn).click();
       }
     });
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
 
     [0, 1].forEach((row) => {

From 9e81775d5812c759f2e40029fe1ec309670a6403 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 4 Jun 2025 16:02:40 +0200
Subject: [PATCH 130/170] update css tokens from later PRs

---
 .../Datepicker/Calendar.module.css            | 14 +++----
 src/components/form/MessageBanner.module.css  |  4 +-
 src/components/form/MessageBanner.test.tsx    |  4 +-
 .../form/caption/Caption.module.css           |  2 +-
 .../AppHeader/AppHeaderMenu.module.css        |  4 +-
 .../presentation/LanguageSelector.module.css  |  4 +-
 .../InstantiateHeader.module.css              |  4 +-
 .../navigation/PopoverNavigation.module.css   |  6 +--
 .../navigation/components/Page.module.css     | 26 ++++++-------
 .../components/PageGroup.module.css           | 38 +++++++++----------
 .../components/SubformsForPage.module.css     | 10 ++---
 .../components/TaskGroup.module.css           | 16 ++++----
 src/index.css                                 |  8 ++--
 src/layout/List/ListComponent.module.css      |  2 +-
 .../SigneeList/SigneeListComponent.module.css |  4 +-
 .../SigneeList/SigneeListSummary.module.css   |  6 +--
 .../SigningActions/SigningActions.module.css  | 10 ++---
 17 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index f109b98827..c023493f75 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -8,8 +8,8 @@
   text-align: center;
 }
 .calendarDay:hover {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-global-blue-2);
 }
 
 .calendarDayButton {
@@ -20,12 +20,12 @@
 }
 
 .focusedDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-global-blue-2);
 }
 .today {
-  border-radius: var(--fds-border_radius-medium);
-  border: var(--fds-border_width-default) solid var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-global-blue-2);
 }
 
 .selectedDate {
@@ -35,7 +35,7 @@
   border-radius: var(--ds-border-radius-md);
 }
 .selectedDate:hover {
-  background: var(--fds-colors-blue-800);
+  background: var(--ds-global-blue-8);
 }
 .selectedDate button {
   color: white;
diff --git a/src/components/form/MessageBanner.module.css b/src/components/form/MessageBanner.module.css
index 27dd04c7d3..0036535e02 100644
--- a/src/components/form/MessageBanner.module.css
+++ b/src/components/form/MessageBanner.module.css
@@ -7,9 +7,9 @@
 }
 
 .default {
-  background-color: var(--fds-colors-grey-200);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .error {
-  background-color: var(--fds-colors-red-200);
+  background-color: var(--ds-color-danger-surface-active);
 }
diff --git a/src/components/form/MessageBanner.test.tsx b/src/components/form/MessageBanner.test.tsx
index 231fefd9fd..b5cc3f03b8 100644
--- a/src/components/form/MessageBanner.test.tsx
+++ b/src/components/form/MessageBanner.test.tsx
@@ -18,7 +18,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('default');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--fds-colors-grey-200');
+    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-neutral-2');
     expect(backgroundColor).toEqual(regularColor);
   });
 
@@ -36,7 +36,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('error');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--fds-colors-red-200');
+    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--ds-global-red-2');
     expect(backgroundColor).toEqual(errorColor);
   });
 });
diff --git a/src/components/form/caption/Caption.module.css b/src/components/form/caption/Caption.module.css
index 5b033f6778..37292ce015 100644
--- a/src/components/form/caption/Caption.module.css
+++ b/src/components/form/caption/Caption.module.css
@@ -15,6 +15,6 @@
 
 .titleAndHelpWrapper {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
diff --git a/src/components/presentation/AppHeader/AppHeaderMenu.module.css b/src/components/presentation/AppHeader/AppHeaderMenu.module.css
index 2f2ff87d65..48b75cd96a 100644
--- a/src/components/presentation/AppHeader/AppHeaderMenu.module.css
+++ b/src/components/presentation/AppHeader/AppHeaderMenu.module.css
@@ -10,6 +10,6 @@
 }
 
 .button-active {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  color: var(--fds-semantic-text-action-first-active);
+  background-color: var(--ds-color-accent-surface-hover);
+  color: var(--ds-color-accent-base-active);
 }
diff --git a/src/components/presentation/LanguageSelector.module.css b/src/components/presentation/LanguageSelector.module.css
index 0035e989d1..7d8be457fd 100644
--- a/src/components/presentation/LanguageSelector.module.css
+++ b/src/components/presentation/LanguageSelector.module.css
@@ -15,6 +15,6 @@
 }
 
 .button-active {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  color: var(--fds-semantic-text-action-first-active);
+  background-color: var(--ds-color-accent-surface-hover);
+  color: var(--ds-color-accent-base-active);
 }
diff --git a/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css b/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
index 79b92596a7..8600fb2835 100644
--- a/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
+++ b/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
@@ -17,11 +17,11 @@
 }
 
 .header-link a {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-color-accent-base-default);
   border-bottom: 0;
 }
 .header-link a:hover {
-  border-bottom: 3px solid var(--fds-semantic-surface-action-default);
+  border-bottom: 3px solid var(--ds-color-accent-base-default);
 }
 
 .header-link-list {
diff --git a/src/features/navigation/PopoverNavigation.module.css b/src/features/navigation/PopoverNavigation.module.css
index c88d625318..8a9be9b7f8 100644
--- a/src/features/navigation/PopoverNavigation.module.css
+++ b/src/features/navigation/PopoverNavigation.module.css
@@ -1,7 +1,7 @@
 .popoverButtonActive {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  border-color: var(--fds-semantic-border-action-first-active);
-  color: var(--fds-semantic-text-action-first-active);
+  background-color: var(--ds-color-accent-surface-hover);
+  border-color: var(--ds-color-accent-base-active);
+  color: var(--ds-color-accent-base-active);
 }
 
 .popoverButtonIcon {
diff --git a/src/features/navigation/components/Page.module.css b/src/features/navigation/components/Page.module.css
index 824ebb857f..ef1b915d76 100644
--- a/src/features/navigation/components/Page.module.css
+++ b/src/features/navigation/components/Page.module.css
@@ -15,7 +15,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--fds-colors-grey-700);
+  border-left: 2px solid var(--ds-color-neutral-7);
   height: calc(100% - 8px);
   top: 25px;
   left: 13px;
@@ -25,7 +25,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-global-blue-7);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -35,7 +35,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
@@ -67,28 +67,28 @@
 
 .page-symbol-error {
   font-size: 14px;
-  color: var(--fds-colors-red-700);
-  border-color: var(--fds-colors-red-500);
-  background-color: var(--fds-colors-red-100);
+  color: var(--ds-global-red-7);
+  border-color: var(--ds-global-red-5);
+  background-color: var(--ds-global-red-1);
 }
 
 .page-symbol-complete {
   font-size: 14px;
   color: white;
-  border-color: var(--fds-colors-blue-700);
-  background-color: var(--fds-colors-blue-700);
+  border-color: var(--ds-global-blue-7);
+  background-color: var(--ds-global-blue-7);
 }
 
 .page-symbol-default {
-  border-color: var(--fds-colors-blue-400);
-  background-color: var(--fds-colors-grey-100);
+  border-color: var(--ds-global-blue-4);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .page-symbol-active {
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  border-color: var(--ds-global-blue-9);
+  background-color: var(--ds-global-blue-9);
 
-  outline: 2px solid var(--fds-colors-grey-100);
+  outline: 2px solid var(--ds-color-neutral-1);
   outline-offset: -4px;
 }
 
diff --git a/src/features/navigation/components/PageGroup.module.css b/src/features/navigation/components/PageGroup.module.css
index 0f235d9136..7ef7ea7d34 100644
--- a/src/features/navigation/components/PageGroup.module.css
+++ b/src/features/navigation/components/PageGroup.module.css
@@ -16,7 +16,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-grey-800);
+  color: var(--ds-color-neutral-8);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -26,7 +26,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px 2px 2px;
   margin: -2px -6px -2px -2px;
@@ -47,14 +47,14 @@
 }
 
 .group-button-single {
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-global-blue-7);
   grid-template-columns: auto auto;
 }
 
 .group-chevron {
   margin-top: 6px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-7);
   font-size: 16px;
 }
 
@@ -69,7 +69,7 @@
   font-size: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -84,32 +84,32 @@
 }
 
 .group-symbol-error {
-  color: var(--fds-colors-red-700);
-  border-color: var(--fds-colors-red-500);
-  background-color: var(--fds-colors-red-100);
+  color: var(--ds-global-red-7);
+  border-color: var(--ds-global-red-5);
+  background-color: var(--ds-global-red-1);
 }
 
 .group-symbol-complete {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-700);
-  background-color: var(--fds-colors-blue-700);
+  color: var(--ds-color-neutral-1);
+  border-color: var(--ds-global-blue-7);
+  background-color: var(--ds-global-blue-7);
 }
 
 .group-symbol-active {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  color: var(--ds-color-neutral-1);
+  border-color: var(--ds-global-blue-9);
+  background-color: var(--ds-global-blue-9);
 }
 
 .group-symbol-active.group-symbol-single:not(.group-symbol-info) {
-  outline: 2px solid var(--fds-colors-grey-100);
+  outline: 2px solid var(--ds-color-neutral-1);
   outline-offset: -4px;
 }
 
 .group-symbol-default {
-  color: var(--fds-colors-blue-900);
-  border-color: var(--fds-colors-blue-400);
-  background-color: var(--fds-colors-grey-100);
+  color: var(--ds-global-blue-9);
+  border-color: var(--ds-global-blue-4);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .page-list {
@@ -123,7 +123,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--fds-colors-grey-700);
+  border-left: 2px solid var(--ds-color-neutral-7);
   height: calc(100% - 21px);
   top: 33px;
   left: 15px;
diff --git a/src/features/navigation/components/SubformsForPage.module.css b/src/features/navigation/components/SubformsForPage.module.css
index 873d30709d..77231234e2 100644
--- a/src/features/navigation/components/SubformsForPage.module.css
+++ b/src/features/navigation/components/SubformsForPage.module.css
@@ -7,7 +7,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-7);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -17,7 +17,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
@@ -33,7 +33,7 @@
 .subform-expand-chevron {
   margin-top: 1px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-7);
   font-size: 16px;
 }
 
@@ -59,13 +59,13 @@
   font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-global-blue-7);
   background-color: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
diff --git a/src/features/navigation/components/TaskGroup.module.css b/src/features/navigation/components/TaskGroup.module.css
index c9b054d220..4927179f87 100644
--- a/src/features/navigation/components/TaskGroup.module.css
+++ b/src/features/navigation/components/TaskGroup.module.css
@@ -10,7 +10,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px 2px 2px;
   margin: -2px -6px -2px -2px;
@@ -37,20 +37,20 @@
   font-size: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .task-symbol-locked {
-  color: var(--fds-colors-grey-800);
-  border-color: var(--fds-colors-grey-600);
-  background-color: var(--fds-colors-grey-100);
+  color: var(--ds-color-neutral-8);
+  border-color: var(--ds-color-neutral-6);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .task-symbol-active {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  color: var(--ds-color-neutral-1);
+  border-color: var(--ds-global-blue-9);
+  background-color: var(--ds-global-blue-9);
 }
diff --git a/src/index.css b/src/index.css
index 3cd7a0dc4e..0e1735ffe9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,7 @@
   font-weight: normal;
   line-height: 1.5;
   text-align: left;
-  color: var(--fds-semantic-text-neutral-default);
+  color: var(--ds-color-neutral-text-default);
 }
 
 /* Global variables */
@@ -40,9 +40,9 @@
   --table-input-margin: 15px; /* From design-system, move to figma-tokens? */
 
   --repeating-group-edit-surface-color: #f1fbff;
-  --repeating-group-edit-border-color: var(--fds-colors-blue-400);
-  --repeating-group-edit-divider-color: var(--fds-colors-blue-200);
-  --repeating-group-error-color: var(--fds-colors-red-200);
+  --repeating-group-edit-border-color: var(--ds-global-blue-4);
+  --repeating-group-edit-divider-color: var(--ds-global-blue-2);
+  --repeating-group-error-color: var(--ds-global-red-2);
 
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index 3290375254..bcdb42ce62 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -84,7 +84,7 @@
 .listContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .headerContainer {
diff --git a/src/layout/SigneeList/SigneeListComponent.module.css b/src/layout/SigneeList/SigneeListComponent.module.css
index ede9f3e389..08fe79b0c1 100644
--- a/src/layout/SigneeList/SigneeListComponent.module.css
+++ b/src/layout/SigneeList/SigneeListComponent.module.css
@@ -1,7 +1,7 @@
 .header {
-  background-color: var(--fds-semantic-surface-action-subtle);
+  background-color: var(--ds-color-accent-surface-default);
   font-weight: 400;
-  border-bottom-color: var(--fds-semantic-border-action-hover);
+  border-bottom-color: var(--ds-color-accent-base-hover);
 }
 
 .table tr td:last-child {
diff --git a/src/layout/SigneeList/SigneeListSummary.module.css b/src/layout/SigneeList/SigneeListSummary.module.css
index 2a6e782740..7c0d73b0fc 100644
--- a/src/layout/SigneeList/SigneeListSummary.module.css
+++ b/src/layout/SigneeList/SigneeListSummary.module.css
@@ -14,12 +14,12 @@
 
 .divider {
   width: 100%;
-  border-top: 1px dashed var(--fds-semantic-border-divider-default);
+  border-top: 1px dashed var(--ds-color-neutral-border-subtle);
   margin-top: 0;
-  margin-bottom: var(--fds-spacing-1);
+  margin-bottom: var(--ds-size-1);
 }
 
 .signeeDescription {
-  color: var(--fds-colors-grey-600);
+  color: var(--ds-color-neutral-6);
   font-style: italic;
 }
diff --git a/src/layout/SigningActions/SigningActions.module.css b/src/layout/SigningActions/SigningActions.module.css
index e6a437c5f7..38fa302d87 100644
--- a/src/layout/SigningActions/SigningActions.module.css
+++ b/src/layout/SigningActions/SigningActions.module.css
@@ -10,23 +10,23 @@
 }
 
 .signingPanel {
-  padding-top: var(--fds-spacing-8);
+  padding-top: var(--ds-size-8);
   display: flex;
   flex-direction: column;
 
   .contentContainer {
-    padding: var(--fds-spacing-2);
+    padding: var(--ds-size-2);
     display: flex;
     flex-direction: column;
-    gap: var(--fds-spacing-4);
+    gap: var(--ds-size-4);
   }
 
   .buttonContainer {
-    padding: var(--fds-spacing-4) 0;
+    padding: var(--ds-size-4) 0;
     display: flex;
     flex-direction: row-reverse; /* reversed for correct tab order */
     justify-content: start;
-    gap: var(--fds-spacing-4);
+    gap: var(--ds-size-4);
     flex-wrap: wrap;
   }
 }

From 5748ffb8c9aa1489549e418a23eaa33a28d5107e Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 5 Jun 2025 16:31:16 +0200
Subject: [PATCH 131/170] update css tokens and some cleanup

---
 .../Datepicker/Calendar.module.css            | 33 +++---------------
 src/components/form/MessageBanner.test.tsx    |  2 +-
 .../presentation/Progress.module.css          |  4 +--
 src/features/devtools/DevTools.module.css     |  4 +--
 .../navigation/components/Page.module.css     | 24 ++++++-------
 .../components/PageGroup.module.css           | 34 +++++++++----------
 .../components/SubformsForPage.module.css     |  4 +--
 .../components/TaskGroup.module.css           |  8 ++---
 src/index.css                                 |  6 ++--
 src/layout/List/ListComponent.module.css      |  2 +-
 10 files changed, 48 insertions(+), 73 deletions(-)

diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index c023493f75..df8dafaeb4 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -2,30 +2,13 @@
   margin-bottom: 0;
 }
 
-.calendarDay {
-  width: 48px;
-  height: 48px;
-  text-align: center;
-}
-.calendarDay:hover {
-  border-radius: var(--ds-border-radius-md);
-  background: var(--ds-global-blue-2);
-}
-
-.calendarDayButton {
-  height: 46px;
-  width: 46px;
-  background: transparent;
-  border: none;
-}
-
 .focusedDate {
   border-radius: var(--ds-border-radius-md);
-  background: var(--ds-global-blue-2);
+  background: var(--ds-color-accent-surface-active);
 }
 .today {
   border-radius: var(--ds-border-radius-md);
-  border: var(--ds-border-width-default) solid var(--ds-global-blue-2);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
 }
 
 .selectedDate {
@@ -35,7 +18,7 @@
   border-radius: var(--ds-border-radius-md);
 }
 .selectedDate:hover {
-  background: var(--ds-global-blue-8);
+  background: var(--ds-color-accent-base-active);
 }
 .selectedDate button {
   color: white;
@@ -43,20 +26,12 @@
 
 .disabledDate {
   border-radius: var(--ds-border-radius-md);
-  background: var(--ds-color-neutral-1);
+  background: var(--ds-color-neutral-surface-tinted);
   cursor: not-allowed;
 }
 .disabledDate button {
   text-decoration: line-through;
 }
-.focusedDate {
-  border-radius: var(--ds-border-radius-md);
-  background: var(--ds-blue-2);
-}
-.today {
-  border-radius: var(--ds-border-radius-md);
-  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
-}
 .disabledDate:hover button {
   cursor: not-allowed;
 }
diff --git a/src/components/form/MessageBanner.test.tsx b/src/components/form/MessageBanner.test.tsx
index b5cc3f03b8..e6410ec0a9 100644
--- a/src/components/form/MessageBanner.test.tsx
+++ b/src/components/form/MessageBanner.test.tsx
@@ -36,7 +36,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('error');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--ds-global-red-2');
+    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-danger-surface-active');
     expect(backgroundColor).toEqual(errorColor);
   });
 });
diff --git a/src/components/presentation/Progress.module.css b/src/components/presentation/Progress.module.css
index e5634e73e1..b58f7f75e7 100644
--- a/src/components/presentation/Progress.module.css
+++ b/src/components/presentation/Progress.module.css
@@ -6,12 +6,12 @@
 }
 
 .circleBackground {
-  stroke: var(--ds-global-blue-2);
+  stroke: var(--ds-color-accent-border-subtle);
 }
 
 .circleTransition {
   transition: stroke-dashoffset 1s ease-in-out;
-  stroke: var(--ds-global-blue-9);
+  stroke: var(--ds-color-accent-base-active);
   stroke-dasharray: 100 100;
 }
 
diff --git a/src/features/devtools/DevTools.module.css b/src/features/devtools/DevTools.module.css
index 5560704bde..7b6f03d052 100644
--- a/src/features/devtools/DevTools.module.css
+++ b/src/features/devtools/DevTools.module.css
@@ -18,8 +18,8 @@
   justify-content: center;
   height: 100%;
   text-align: center;
-  color: var(--ds-global-red-6);
-  border: 3px solid var(--ds-global-red-6);
+  color: var(--ds-color-danger-text-subtle);
+  border: 3px solid var(--ds-color-danger-border-strong);
 }
 
 .panel {
diff --git a/src/features/navigation/components/Page.module.css b/src/features/navigation/components/Page.module.css
index ef1b915d76..238f29bc8c 100644
--- a/src/features/navigation/components/Page.module.css
+++ b/src/features/navigation/components/Page.module.css
@@ -15,7 +15,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--ds-color-neutral-7);
+  border-left: 2px solid var(--ds-color-neutral-base-default);
   height: calc(100% - 8px);
   top: 25px;
   left: 13px;
@@ -25,7 +25,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--ds-global-blue-7);
+  color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -67,28 +67,28 @@
 
 .page-symbol-error {
   font-size: 14px;
-  color: var(--ds-global-red-7);
-  border-color: var(--ds-global-red-5);
-  background-color: var(--ds-global-red-1);
+  color: var(--ds-color-danger-text-default);
+  border-color: var(--ds-color-danger-border-default);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .page-symbol-complete {
   font-size: 14px;
   color: white;
-  border-color: var(--ds-global-blue-7);
-  background-color: var(--ds-global-blue-7);
+  border-color: var(--ds-color-accent-base-default);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .page-symbol-default {
-  border-color: var(--ds-global-blue-4);
-  background-color: var(--ds-color-neutral-1);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .page-symbol-active {
-  border-color: var(--ds-global-blue-9);
-  background-color: var(--ds-global-blue-9);
+  border-color: var(--ds-color-accent-base-active);
+  background-color: var(--ds-color-accent-base-active);
 
-  outline: 2px solid var(--ds-color-neutral-1);
+  outline: 2px solid var(--ds-color-neutral-background-tinted);
   outline-offset: -4px;
 }
 
diff --git a/src/features/navigation/components/PageGroup.module.css b/src/features/navigation/components/PageGroup.module.css
index 7ef7ea7d34..3feda5bce5 100644
--- a/src/features/navigation/components/PageGroup.module.css
+++ b/src/features/navigation/components/PageGroup.module.css
@@ -16,7 +16,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--ds-color-neutral-8);
+  color: var(--ds-color-neutral-text-default);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -47,14 +47,14 @@
 }
 
 .group-button-single {
-  color: var(--ds-global-blue-7);
+  color: var(--ds-color-accent-text-subtle);
   grid-template-columns: auto auto;
 }
 
 .group-chevron {
   margin-top: 6px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--ds-color-neutral-7);
+  color: var(--ds-color-neutral-text-default);
   font-size: 16px;
 }
 
@@ -84,32 +84,32 @@
 }
 
 .group-symbol-error {
-  color: var(--ds-global-red-7);
-  border-color: var(--ds-global-red-5);
-  background-color: var(--ds-global-red-1);
+  color: var(--ds-color-danger-text-default);
+  border-color: var(--ds-color-danger-border-default);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .group-symbol-complete {
-  color: var(--ds-color-neutral-1);
-  border-color: var(--ds-global-blue-7);
-  background-color: var(--ds-global-blue-7);
+  color: var(--ds-color-neutral-background-tinted);
+  border-color: var(--ds-color-accent-base-default);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .group-symbol-active {
-  color: var(--ds-color-neutral-1);
-  border-color: var(--ds-global-blue-9);
-  background-color: var(--ds-global-blue-9);
+  color: var(--ds-color-neutral-background-tinted);
+  border-color: var(--ds-color-accent-base-active);
+  background-color: var(--ds-color-accent-base-active);
 }
 
 .group-symbol-active.group-symbol-single:not(.group-symbol-info) {
-  outline: 2px solid var(--ds-color-neutral-1);
+  outline: 2px solid var(--ds-color-neutral-background-tinted);
   outline-offset: -4px;
 }
 
 .group-symbol-default {
-  color: var(--ds-global-blue-9);
-  border-color: var(--ds-global-blue-4);
-  background-color: var(--ds-color-neutral-1);
+  color: var(--ds-color-accent-text-default);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .page-list {
@@ -123,7 +123,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--ds-color-neutral-7);
+  border-left: 2px solid var(--ds-color-neutral-base-default);
   height: calc(100% - 21px);
   top: 33px;
   left: 15px;
diff --git a/src/features/navigation/components/SubformsForPage.module.css b/src/features/navigation/components/SubformsForPage.module.css
index 77231234e2..63e28df11c 100644
--- a/src/features/navigation/components/SubformsForPage.module.css
+++ b/src/features/navigation/components/SubformsForPage.module.css
@@ -7,7 +7,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--ds-color-neutral-7);
+  color: var(--ds-color-neutral-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -59,7 +59,7 @@
   font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
-  color: var(--ds-global-blue-7);
+  color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
diff --git a/src/features/navigation/components/TaskGroup.module.css b/src/features/navigation/components/TaskGroup.module.css
index 4927179f87..9c49fe5958 100644
--- a/src/features/navigation/components/TaskGroup.module.css
+++ b/src/features/navigation/components/TaskGroup.module.css
@@ -46,11 +46,11 @@
 .task-symbol-locked {
   color: var(--ds-color-neutral-8);
   border-color: var(--ds-color-neutral-6);
-  background-color: var(--ds-color-neutral-1);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .task-symbol-active {
-  color: var(--ds-color-neutral-1);
-  border-color: var(--ds-global-blue-9);
-  background-color: var(--ds-global-blue-9);
+  color: var(--ds-color-accent-text-default);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
diff --git a/src/index.css b/src/index.css
index 0e1735ffe9..20ae2eab45 100644
--- a/src/index.css
+++ b/src/index.css
@@ -40,9 +40,9 @@
   --table-input-margin: 15px; /* From design-system, move to figma-tokens? */
 
   --repeating-group-edit-surface-color: #f1fbff;
-  --repeating-group-edit-border-color: var(--ds-global-blue-4);
-  --repeating-group-edit-divider-color: var(--ds-global-blue-2);
-  --repeating-group-error-color: var(--ds-global-red-2);
+  --repeating-group-edit-border-color: var(--ds-color-accent-border-default);
+  --repeating-group-edit-divider-color: var(--ds-color-accent-border-subtle);
+  --repeating-group-error-color: var(--ds-color-danger-surface-active);
 
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index bcdb42ce62..a789b4e73f 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -31,7 +31,7 @@
 
 .selectedRow,
 .selectedRowCell {
-  background-color: var(--ds-global-blue-1);
+  background-color: var(--ds-color-accent-surface-tinted);
 }
 
 .pagination {

From 73b467c579c9ff80f9f0bd0a1d1d7c2f722b6119 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 6 Jun 2025 09:39:46 +0200
Subject: [PATCH 132/170] fix color contrast

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 20ae2eab45..30c338830b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,7 +42,7 @@
   --repeating-group-edit-surface-color: #f1fbff;
   --repeating-group-edit-border-color: var(--ds-color-accent-border-default);
   --repeating-group-edit-divider-color: var(--ds-color-accent-border-subtle);
-  --repeating-group-error-color: var(--ds-color-danger-surface-active);
+  --repeating-group-error-color: var(--ds-color-danger-surface-tinted);
 
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);

From c136802c602646b59b8d6461263859be13958f9b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 6 Jun 2025 10:25:17 +0200
Subject: [PATCH 133/170] fix fullwidth fro button

---
 src/app-components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 43a0a38728..24cf77505d 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -78,7 +78,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       variant={variant}
       data-color={color}
       data-size={size}
-      data-fullwidth={fullWidth}
+      data-fullwidth={fullWidth ? true : undefined}
       ref={ref}
       className={className}
       title={title}

From dd210dd54a306c0314172e14f85fe88b7d722121 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 6 Jun 2025 10:33:24 +0200
Subject: [PATCH 134/170] update css tokens

---
 src/components/form/MessageBanner.test.tsx                | 2 +-
 .../navigation/components/SubformsForPage.module.css      | 2 +-
 src/features/navigation/components/TaskGroup.module.css   | 4 ++--
 src/layout/Likert/LikertComponent.module.css              | 2 +-
 src/layout/List/ListComponent.module.css                  | 8 ++++----
 src/layout/SigneeList/SigneeListSummary.module.css        | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/form/MessageBanner.test.tsx b/src/components/form/MessageBanner.test.tsx
index e6410ec0a9..8290436f17 100644
--- a/src/components/form/MessageBanner.test.tsx
+++ b/src/components/form/MessageBanner.test.tsx
@@ -18,7 +18,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('default');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-neutral-2');
+    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-neutral-border-subtle');
     expect(backgroundColor).toEqual(regularColor);
   });
 
diff --git a/src/features/navigation/components/SubformsForPage.module.css b/src/features/navigation/components/SubformsForPage.module.css
index 63e28df11c..bc752ea810 100644
--- a/src/features/navigation/components/SubformsForPage.module.css
+++ b/src/features/navigation/components/SubformsForPage.module.css
@@ -33,7 +33,7 @@
 .subform-expand-chevron {
   margin-top: 1px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--ds-color-neutral-7);
+  color: var(--ds-color-neutral-text-subtle);
   font-size: 16px;
 }
 
diff --git a/src/features/navigation/components/TaskGroup.module.css b/src/features/navigation/components/TaskGroup.module.css
index 9c49fe5958..165446edd3 100644
--- a/src/features/navigation/components/TaskGroup.module.css
+++ b/src/features/navigation/components/TaskGroup.module.css
@@ -44,8 +44,8 @@
 }
 
 .task-symbol-locked {
-  color: var(--ds-color-neutral-8);
-  border-color: var(--ds-color-neutral-6);
+  color: var(--ds-color-neutral-text-default);
+  border-color: var(--ds-color-neutral-border-default);
   background-color: var(--ds-color-neutral-surface-tinted);
 }
 
diff --git a/src/layout/Likert/LikertComponent.module.css b/src/layout/Likert/LikertComponent.module.css
index d939dbe40c..8602a8e2a7 100644
--- a/src/layout/Likert/LikertComponent.module.css
+++ b/src/layout/Likert/LikertComponent.module.css
@@ -18,7 +18,7 @@ Altinn, and making sure they are consistent. */
 }
 
 .likertTable thead th {
-  background-color: var(--ds-color-neutral-1);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .likertTable tr td {
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index a789b4e73f..5f98d78eba 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -12,7 +12,7 @@
 }
 
 .listTable th {
-  background-color: var(--ds-color-neutral-1);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .listTable tr {
@@ -39,7 +39,7 @@
   display: flex;
   justify-content: right;
   align-items: center;
-  background-color: var(--ds-color-neutral-1);
+  background-color: var(--ds-color-neutral-background-tinted);
   width: 100%;
 }
 .paginationMobile {
@@ -52,11 +52,11 @@
 }
 
 .mobileGroup > div :hover {
-  background-color: var(--ds-color-neutral-1);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .mobile {
-  border-top: 1px solid var(--ds-color-neutral-2);
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
   padding: var(--ds-size-4);
   gap: var(--ds-size-8);
 }
diff --git a/src/layout/SigneeList/SigneeListSummary.module.css b/src/layout/SigneeList/SigneeListSummary.module.css
index 7c0d73b0fc..3329ca893f 100644
--- a/src/layout/SigneeList/SigneeListSummary.module.css
+++ b/src/layout/SigneeList/SigneeListSummary.module.css
@@ -20,6 +20,6 @@
 }
 
 .signeeDescription {
-  color: var(--ds-color-neutral-6);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }

From ea8b1a1a1c14e66ce6324e5f2f33a41e97386b37 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 6 Jun 2025 15:52:23 +0200
Subject: [PATCH 135/170] update app button

---
 src/app-components/Button/Button.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 24cf77505d..617edf9020 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -39,6 +39,19 @@ export type ButtonProps = {
   | 'asChild'
 >;
 
+type DSButtonColor = 'accent' | 'neutral' | 'success' | 'danger' | 'brand1' | 'brand2' | 'brand3' | undefined;
+
+function mapColorNames(color: ButtonColor): DSButtonColor {
+  switch (color) {
+    case 'first':
+      return 'accent';
+    case 'second':
+      return 'neutral';
+    default:
+      return color ?? 'accent';
+  }
+}
+
 export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
   {
     id,
@@ -76,7 +89,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      data-color={color}
+      data-color={mapColorNames(color)}
       data-size={size}
       data-fullwidth={fullWidth ? true : undefined}
       ref={ref}

From 98248eaf4c36651a7ea2d5afa105920098d9d2bb Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 10 Jun 2025 10:10:43 +0200
Subject: [PATCH 136/170] fix card styling

---
 src/app-components/Card/Card.module.css |  3 ++
 src/app-components/Card/Card.tsx        | 40 +++++++++++++------------
 src/layout/Cards/Cards.tsx              |  8 ++++-
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/app-components/Card/Card.module.css b/src/app-components/Card/Card.module.css
index 860a4fbfbf..f157517e97 100644
--- a/src/app-components/Card/Card.module.css
+++ b/src/app-components/Card/Card.module.css
@@ -2,3 +2,6 @@
   padding: 0;
   margin-bottom: -7px;
 }
+.mediaCard img {
+  object-fit: cover;
+}
diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
index d84d268c82..858499d512 100644
--- a/src/app-components/Card/Card.tsx
+++ b/src/app-components/Card/Card.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Card/Card.module.css';
-import { Flex } from 'src/app-components/Flex/Flex';
 
 type AppCardProps = {
   title?: React.ReactNode;
@@ -13,28 +12,31 @@ type AppCardProps = {
   mediaPosition?: 'top' | 'bottom';
   color?: Parameters<typeof Card>[0]['color'];
   children?: React.ReactNode;
+  variant?: 'tinted' | 'default';
 };
 
-export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) {
+export function AppCard({
+  title,
+  description,
+  footer,
+  media,
+  color = 'neutral',
+  mediaPosition = 'top',
+  children,
+  variant = 'tinted',
+}: AppCardProps) {
   return (
-    <Card color={color}>
+    <Card
+      data-color={color}
+      variant={variant}
+    >
       {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
-      {(title || description) && (
-        <Card.Block>
-          {title && <Heading data-size='md'>{title}</Heading>}
-          {description && <Paragraph>{description}</Paragraph>}
-        </Card.Block>
-      )}
-      {children && (
-        <Card.Block>
-          <Flex
-            container
-            spacing={6}
-          >
-            {children}
-          </Flex>
-        </Card.Block>
-      )}
+      <Card.Block>
+        {title && <Heading data-size='md'>{title}</Heading>}
+        {description && <Paragraph>{description}</Paragraph>}
+
+        {children}
+      </Card.Block>
       {footer && (
         <Card.Block>
           <Paragraph data-size='sm'>{footer}</Paragraph>
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 8cccc72594..0f2cb0355f 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -18,6 +18,12 @@ type ICardsProps = PropsFromGenericComponent<'Cards'>;
 function parseSize(size: string | undefined, defaultValue: string): string {
   return size && /^[0-9]+$/.test(size) ? `${size}px` : (size ?? defaultValue);
 }
+
+const colorVariantMap: Record<string, 'tinted' | 'default'> = {
+  neutral: 'default',
+  subtle: 'tinted',
+};
+
 export const Cards = ({ node }: ICardsProps) => {
   const { cardsInternal, minMediaHeight, minWidth, color, mediaPosition: _mediaPosition } = useNodeItem(node);
   const processedMinWidth = parseSize(minWidth, '250px');
@@ -37,7 +43,7 @@ export const Cards = ({ node }: ICardsProps) => {
             title={card.title && <Lang id={card.title} />}
             description={card.description && <Lang id={card.description} />}
             footer={card.footer && <Lang id={card.footer} />}
-            color={color}
+            variant={colorVariantMap[color]}
             mediaPosition={mediaPosition}
             media={
               card.mediaId && (

From de752f782dbb746e87de3c4861f5b9008ed1fb18 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 10 Jun 2025 10:15:13 +0200
Subject: [PATCH 137/170] update lockfile

---
 yarn.lock | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 3c33f900e8..fc8d00ce2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2343,14 +2343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.17.4":
-  version: 7.22.0
-  resolution: "@navikt/aksel-icons@npm:7.22.0"
-  checksum: 10c0/a644ad2a3920729d7bbbfcd6a309fba7121063a78d1dc485efb3d385e6987ab68d3e61554dfcab6f026227d219a09ba473d500ea989e8bbb7752507964455540
-  languageName: node
-  linkType: hard
-
-"@navikt/aksel-icons@npm:^7.21.0":
+"@navikt/aksel-icons@npm:^7.17.4, @navikt/aksel-icons@npm:^7.21.0":
   version: 7.22.0
   resolution: "@navikt/aksel-icons@npm:7.22.0"
   checksum: 10c0/a644ad2a3920729d7bbbfcd6a309fba7121063a78d1dc485efb3d385e6987ab68d3e61554dfcab6f026227d219a09ba473d500ea989e8bbb7752507964455540

From 344883a5a7360cda80695195a5e56981b9109d79 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 10 Jun 2025 10:43:06 +0200
Subject: [PATCH 138/170] update snapshots

---
 .../Group/__snapshots__/SummaryGroupComponent.test.tsx.snap     | 2 +-
 .../Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
index d548fc2766..a0bfa32f87 100644
--- a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
       <button
         aria-label="Change: Mock group"
         class="ds-button editButton"
-        data-color="second"
+        data-color="neutral"
         data-size="sm"
         data-variant="tertiary"
         type="button"
diff --git a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
index 8f213ea5ab..eedaa7ed6b 100644
--- a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+++ b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`SummaryRepeatingGroup SummaryRepeatingGroup -- should match snapshot 1`
       <button
         aria-label="Change: Mock group"
         class="ds-button editButton"
-        data-color="second"
+        data-color="neutral"
         data-size="sm"
         data-variant="tertiary"
         type="button"

From 0c7c23665abbf5440cbd3197d4b4c625c3843859 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 10:04:32 +0200
Subject: [PATCH 139/170] remove char counter for readonly state

---
 src/app-components/Input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index af03c036bf..ca5349e521 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -76,7 +76,7 @@ export function Input(props: InputProps) {
       onPaste={handlePaste}
       aria-invalid={!!error}
       readOnly={readOnly}
-      counter={characterLimit}
+      counter={!readOnly ? characterLimit : undefined}
       {...rest}
     />
   );

From 4659ad026332542273e0f035f2691ef173adb86a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 12:13:20 +0200
Subject: [PATCH 140/170] fix accordion style

---
 src/layout/Accordion/Accordion.tsx           | 11 +++--------
 src/layout/AccordionGroup/AccordionGroup.tsx | 16 ++++++++++------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/layout/Accordion/Accordion.tsx b/src/layout/Accordion/Accordion.tsx
index c592394cbf..e5a1df7189 100644
--- a/src/layout/Accordion/Accordion.tsx
+++ b/src/layout/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card, Details } from '@digdir/designsystemet-react';
+import { Card } from '@digdir/designsystemet-react';
 
 import { Flex } from 'src/app-components/Flex/Flex';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -48,13 +48,8 @@ export const Accordion = ({ node }: IAccordionProps) => {
       {renderAsAccordionItem ? (
         <AccordionItem className={classes.container} />
       ) : (
-        <Card>
-          <Details
-            data-color='subtle'
-            className={classes.container}
-          >
-            <AccordionItem />
-          </Details>
+        <Card data-color='neutral'>
+          <AccordionItem className={classes.container} />
         </Card>
       )}
     </ComponentStructureWrapper>
diff --git a/src/layout/AccordionGroup/AccordionGroup.tsx b/src/layout/AccordionGroup/AccordionGroup.tsx
index e94c039808..f613f9bbbd 100644
--- a/src/layout/AccordionGroup/AccordionGroup.tsx
+++ b/src/layout/AccordionGroup/AccordionGroup.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Card } from '@digdir/designsystemet-react';
+
 import { AccordionGroupProvider } from 'src/layout/AccordionGroup/AccordionGroupContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponentById } from 'src/layout/GenericComponent';
@@ -14,12 +16,14 @@ export const AccordionGroup = ({ node }: IAccordionGroupProps) => {
   return (
     <AccordionGroupProvider>
       <ComponentStructureWrapper node={node}>
-        {childComponents.map((id) => (
-          <GenericComponentById
-            key={id}
-            id={id}
-          />
-        ))}
+        <Card data-color='neutral'>
+          {childComponents.map((id) => (
+            <GenericComponentById
+              key={id}
+              id={id}
+            />
+          ))}
+        </Card>
       </ComponentStructureWrapper>
     </AccordionGroupProvider>
   );

From 86a0535d0578b8a620455687ae5786710dbe7a34 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 12:15:50 +0200
Subject: [PATCH 141/170] update css token variable

---
 src/layout/Accordion/SummaryAccordion.module.css              | 4 ++--
 src/layout/Grid/Grid.module.css                               | 2 +-
 src/layout/Grid/GridSummary.module.css                        | 2 +-
 .../Pagination/RepeatingGroupPagination.module.css            | 2 +-
 src/layout/RepeatingGroup/RepeatingGroup.module.css           | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/layout/Accordion/SummaryAccordion.module.css b/src/layout/Accordion/SummaryAccordion.module.css
index 2d72d25709..026a609f5c 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -1,12 +1,12 @@
 .container {
   border-radius: 3px;
   border: 1px solid var(--ds-color-neutral-border-subtle);
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .header {
   border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .padding {
diff --git a/src/layout/Grid/Grid.module.css b/src/layout/Grid/Grid.module.css
index 4794422b10..532db491d9 100644
--- a/src/layout/Grid/Grid.module.css
+++ b/src/layout/Grid/Grid.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index 02dbda52bf..2a4690dc52 100644
--- a/src/layout/Grid/GridSummary.module.css
+++ b/src/layout/Grid/GridSummary.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
index 7f755a107c..92aa9fc6ec 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
@@ -9,7 +9,7 @@
 
 .row,
 .row td {
-  background-color: var(--ds-color-neutral-background-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .hidden {
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index 52424f1da0..cf83ee2289 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -61,7 +61,7 @@ Altinn, and making sure they are consistent. */
 }
 
 .nestedTable > thead > tr > th {
-  /*background-color: var(--ds-color-neutral-background-subtle);*/
+  /*background-color: var(--ds-color-neutral-background-tinted);*/
   background-color: #f5f5f5;
 }
 

From b95dc4db9748a15e4e6cb622164abf11e94a74c1 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 12:53:21 +0200
Subject: [PATCH 142/170] fix alertondelete rep group

---
 src/app-components/Button/Button.tsx              |  3 +++
 .../alertOnChange/DeleteWarningPopover.tsx        |  5 ++++-
 .../Table/RepeatingGroupTableRow.tsx              | 15 ++++++---------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 617edf9020..a0146c851f 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -37,6 +37,7 @@ export type ButtonProps = {
   | 'aria-describedby'
   | 'onKeyUp'
   | 'asChild'
+  | 'popovertarget'
 >;
 
 type DSButtonColor = 'accent' | 'neutral' | 'success' | 'danger' | 'brand1' | 'brand2' | 'brand3' | undefined;
@@ -72,6 +73,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     onKeyUp,
     asChild,
     textAlign,
+    popovertarget,
     'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-controls': ariaControls,
@@ -102,6 +104,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       onMouseDown={onMouseDown}
       onKeyUp={onKeyUp}
       asChild={asChild}
+      popovertarget={popovertarget}
       aria-label={ariaLabel}
       aria-busy={ariaBusy}
       aria-controls={ariaControls}
diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index 0b6233f14f..75e3cad9a4 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -7,12 +7,13 @@ import classes from 'src/features/alertOnChange/DeleteWarningPopover.module.css'
 import { Lang } from 'src/features/language/Lang';
 
 export interface IDeleteWarningPopover {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   onPopoverDeleteClick: () => void;
   onCancelClick: () => void;
   deleteButtonText: string;
   messageText: React.ReactNode;
   open: boolean;
+  popoverId?: string;
   setOpen: (open: boolean) => void;
   placement?: 'bottom' | 'left' | 'right' | 'top';
 }
@@ -24,6 +25,7 @@ export function DeleteWarningPopover({
   deleteButtonText,
   messageText,
   placement = 'bottom',
+  popoverId,
   open,
   setOpen,
 }: IDeleteWarningPopover) {
@@ -37,6 +39,7 @@ export function DeleteWarningPopover({
       </Popover.Trigger>
       <Popover
         data-testid='delete-warning-popover'
+        id={popoverId}
         open={open}
         placement={placement}
         data-color='warning'
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
index 05ceaafed6..8b765e2eaf 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
@@ -6,7 +6,6 @@ import { PencilIcon, TrashIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons
 import cn from 'classnames';
 
 import { Button } from 'src/app-components/Button/Button';
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
@@ -402,9 +401,8 @@ function DeleteElement({
   children: React.ReactNode;
 }) {
   return (
-    <ConditionalWrapper
-      condition={Boolean(editForRow?.alertOnDelete)}
-      wrapper={(children) => (
+    <>
+      {editForRow?.alertOnDelete && (
         <DeleteWarningPopover
           placement='left'
           deleteButtonText={langAsString('group.row_popover_delete_button_confirm')}
@@ -412,15 +410,14 @@ function DeleteElement({
           onCancelClick={cancelChange}
           onPopoverDeleteClick={confirmChange}
           open={alertOpen}
+          popoverId='delete-warning-popover'
           setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
+        />
       )}
-    >
       <Button
         variant='tertiary'
         color='danger'
+        popovertarget='delete-warning-popover'
         disabled={isDeletingRow || disabled}
         onClick={() => handleDelete({ index, uuid })}
         aria-label={`${deleteButtonText}-${firstCellData}`}
@@ -433,7 +430,7 @@ function DeleteElement({
           aria-hidden='true'
         />
       </Button>
-    </ConditionalWrapper>
+    </>
   );
 }
 

From 0cd1fc2aa53db5eed16b48ada0a56530c1382b30 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 12:56:00 +0200
Subject: [PATCH 143/170] fix validation styling radiobuttons

---
 src/layout/RadioButtons/ControlledRadioGroup.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index ff988dde6f..2f9a423a12 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -114,6 +114,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
                   onChange={handleChange}
                   hideLabel={hideLabel}
                   data-size='sm'
+                  aria-invalid={!isValid}
                   alertOnChange={alertOnChange}
                   alertText={alertText}
                   confirmChangeText={confirmChangeText}

From 6ef6fa74700db6a285d91ba209156b19ade35ce9 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 13:47:10 +0200
Subject: [PATCH 144/170] fix tab header linewrapping

---
 src/layout/Tabs/Tabs.module.css | 3 +++
 src/layout/Tabs/Tabs.tsx        | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 92fc6bf1eb..044399a869 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -7,3 +7,6 @@
 .icon {
   width: var(--ds-size-6);
 }
+.tabHeader {
+  white-space: unset;
+}
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 2fe9a5ede0..9bb259757a 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -105,6 +105,7 @@ function TabHeader({ id, title, icon }: { id: string; title: string; icon: strin
       key={id}
       value={id}
       tabIndex={0}
+      className={classes.tabHeader}
     >
       {!!icon && (
         <img

From ba8abc5137903e4b116de788ab09bbb1b383d95c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 14:58:15 +0200
Subject: [PATCH 145/170] fix styling of readonly legends

---
 src/app-components/Label/Fieldset.tsx                         | 2 +-
 src/app-components/Label/Label.module.css                     | 4 ++++
 src/layout/Checkboxes/CheckboxesContainerComponent.module.css | 4 ++++
 src/layout/Checkboxes/CheckboxesContainerComponent.tsx        | 4 +++-
 src/layout/RadioButtons/ControlledRadioGroup.module.css       | 4 ++++
 src/layout/RadioButtons/ControlledRadioGroup.tsx              | 4 +++-
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
index b329758c1e..da0c9fda34 100644
--- a/src/app-components/Label/Fieldset.tsx
+++ b/src/app-components/Label/Fieldset.tsx
@@ -71,7 +71,7 @@ export function Fieldset({
           className={cn(className)}
           data-size={size}
         >
-          <DesignsystemetFieldset.Legend>
+          <DesignsystemetFieldset.Legend className={labelClasses.legend}>
             <span className={cn(labelClasses.labelAndHelpWrapper)}>
               <DesignsystemetLabel
                 weight='medium'
diff --git a/src/app-components/Label/Label.module.css b/src/app-components/Label/Label.module.css
index d6a56eec5f..32ffedb53a 100644
--- a/src/app-components/Label/Label.module.css
+++ b/src/app-components/Label/Label.module.css
@@ -4,6 +4,10 @@
   align-items: center;
 }
 
+.legend {
+  display: inline-flex;
+}
+
 .labelAndDescWrapper {
   display: flex;
   flex-direction: column;
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index 917c802ba5..fd97bc5ff8 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
@@ -19,3 +19,7 @@
   font-size: 1rem;
   word-break: break-word;
 }
+
+.legend {
+  display: inline-flex;
+}
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index 9d088f5729..9fb2e96862 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -92,7 +92,9 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
             className={classes.checkboxGroup}
             aria-label={ariaLabel}
           >
-            {overrideDisplay?.renderLegend !== false && <Fieldset.Legend>{labelTextGroup}</Fieldset.Legend>}
+            {overrideDisplay?.renderLegend !== false && (
+              <Fieldset.Legend className={classes.legend}>{labelTextGroup}</Fieldset.Legend>
+            )}
             {textResourceBindings?.description && (
               <Fieldset.Description>
                 <Lang id={textResourceBindings?.description} />
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.module.css b/src/layout/RadioButtons/ControlledRadioGroup.module.css
index 68c3d39f5e..46d997d315 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.module.css
+++ b/src/layout/RadioButtons/ControlledRadioGroup.module.css
@@ -3,3 +3,7 @@
   flex-wrap: wrap;
   gap: var(--ds-size-6);
 }
+
+.legend {
+  display: inline-flex;
+}
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 2f9a423a12..949ff25960 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -86,7 +86,9 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
     <ComponentStructureWrapper node={node}>
       <div id={id}>
         <Fieldset role='radiogroup'>
-          <Fieldset.Legend className={cn({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}>
+          <Fieldset.Legend
+            className={cn(classes.legend, { [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}
+          >
             {labelText}
           </Fieldset.Legend>
           {textResourceBindings?.description && (

From e78fa986086fba2d2fb7a28303adc420585a1b6c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 15:03:50 +0200
Subject: [PATCH 146/170] fix mobile listcomponnet styling

---
 src/layout/List/ListComponent.module.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index 5f98d78eba..ab33046807 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -46,16 +46,14 @@
   justify-content: center;
 }
 
-.mobileGroup > div {
-  display: flex;
-  flex-direction: column;
-}
-
 .mobileGroup > div :hover {
   background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .mobile {
+  display: flex;
+  align-items: center;
+  width: auto;
   border-top: 1px solid var(--ds-color-neutral-border-subtle);
   padding: var(--ds-size-4);
   gap: var(--ds-size-8);

From 456a02703d4ef05c05443a747990ef14b2202107 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 11 Jun 2025 15:23:34 +0200
Subject: [PATCH 147/170] fix flaky test

---
 test/e2e/integration/component-library/multiple-select.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index 43646d692b..ec0243d1e3 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -160,6 +160,7 @@ describe('Multiple select component', () => {
     // Unchecking from multiple select should remove from RepeatingGroup (observe that data is preserved)
     cy.get(multiselect).contains('span', checkboxText2).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 rows
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup)
       .findAllByRole('button', { name: /^Rediger/ })
       .first()

From 67999554ef78d1be319b71deca72f4acb956c994 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 12 Jun 2025 10:19:24 +0200
Subject: [PATCH 148/170] fix navigation modal height

---
 src/features/navigation/PopoverNavigation.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/navigation/PopoverNavigation.module.css b/src/features/navigation/PopoverNavigation.module.css
index 8a9be9b7f8..77943233dc 100644
--- a/src/features/navigation/PopoverNavigation.module.css
+++ b/src/features/navigation/PopoverNavigation.module.css
@@ -20,6 +20,5 @@
 .modalContainer {
   box-sizing: border-box;
   padding: 16px;
-  max-height: unset;
   height: 100%;
 }

From 25335d3ea86ff0bb66a5bddea7ac7f86ed603f09 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 12 Jun 2025 13:03:23 +0200
Subject: [PATCH 149/170] fix accordion summary

---
 .../Accordion/SummaryAccordion.module.css     |  2 +-
 src/layout/Accordion/SummaryAccordion.tsx     |  2 +-
 .../SummaryAccordionGroupComponent.tsx        | 20 +++++++------------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/layout/Accordion/SummaryAccordion.module.css b/src/layout/Accordion/SummaryAccordion.module.css
index 026a609f5c..fa2f66a05f 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -10,7 +10,7 @@
 }
 
 .padding {
-  padding: var(--ds-spacing-5);
+  padding: var(--ds-size-5);
 }
 
 .paddingSmall {
diff --git a/src/layout/Accordion/SummaryAccordion.tsx b/src/layout/Accordion/SummaryAccordion.tsx
index fde10f8c5b..16a127aee3 100644
--- a/src/layout/Accordion/SummaryAccordion.tsx
+++ b/src/layout/Accordion/SummaryAccordion.tsx
@@ -34,7 +34,7 @@ export function SummaryAccordionComponent({ targetNode }: SummaryRendererProps<'
 
   return (
     <div className={cn(classes.container)}>
-      <div className={classes.header}>
+      <div className={cn(classes.header, classes.padding)}>
         <Heading className={classes.paddingSmall}>{title}</Heading>
       </div>
       <div className={classes.padding}>
diff --git a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
index feff1e6bb3..5423ede171 100644
--- a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
+++ b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Details as DesignSystemAccordion } from '@digdir/designsystemet-react';
-
 import { SummaryAccordionComponent } from 'src/layout/Accordion/SummaryAccordion';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -10,17 +8,13 @@ import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export const SummaryAccordionGroupComponent = ({ targetNode, ...rest }: SummaryRendererProps<'AccordionGroup'>) => {
   const { childComponents } = useNodeItem(targetNode);
-  return (
-    <DesignSystemAccordion>
-      {childComponents.map((childId) => (
-        <Child
-          key={childId}
-          id={childId}
-          {...rest}
-        />
-      ))}
-    </DesignSystemAccordion>
-  );
+  return childComponents.map((childId) => (
+    <Child
+      key={childId}
+      id={childId}
+      {...rest}
+    />
+  ));
 };
 
 function Child({ id, ...rest }: { id: string } & Omit<SummaryRendererProps<'AccordionGroup'>, 'targetNode'>) {

From 0b140508050649843ea631ff3ab714fefa6cdb47 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 13 Jun 2025 12:28:59 +0200
Subject: [PATCH 150/170] fix signing test

---
 test/e2e/integration/signering-brukerstyrt/signing.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/integration/signering-brukerstyrt/signing.ts b/test/e2e/integration/signering-brukerstyrt/signing.ts
index 24e5cadb89..e4050a8eef 100644
--- a/test/e2e/integration/signering-brukerstyrt/signing.ts
+++ b/test/e2e/integration/signering-brukerstyrt/signing.ts
@@ -107,7 +107,7 @@ describe('Signing', () => {
 
       // Signing step
       cy.findByRole('table', {
-        name: /personer som skal signere hjelp personer som skal signere beskrivelse/i,
+        name: /personer som skal signere personer som skal signere beskrivelse/i,
       }).within(() => {
         cy.findByRole('row', {
           name: new RegExp(`${sivilisertAvansertIsbjoernSA.name} (venter på signering|varsling mislyktes)`, 'i'),
@@ -140,7 +140,7 @@ describe('Signing', () => {
       cy.findByRole('button', { name: 'Signer' }).click();
 
       cy.findByRole('table', {
-        name: /personer som skal signere hjelp personer som skal signere beskrivelse/i,
+        name: /personer som skal signere personer som skal signere beskrivelse/i,
       }).within(() => {
         cy.findByRole('row', {
           name: new RegExp(

From a6da4db01dd14677b8e378f8abc0a069d94461ea Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 13 Jun 2025 12:35:31 +0200
Subject: [PATCH 151/170] fix accordion summary2 styling

---
 src/layout/Accordion/SummaryAccordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/Accordion/SummaryAccordion.tsx b/src/layout/Accordion/SummaryAccordion.tsx
index 739526dde6..c1b83f6822 100644
--- a/src/layout/Accordion/SummaryAccordion.tsx
+++ b/src/layout/Accordion/SummaryAccordion.tsx
@@ -67,7 +67,7 @@ export function SummaryAccordionComponent2({ target }: Summary2Props<'Accordion'
       target={target}
     >
       <div className={cn(classes.container, classes.summary2width)}>
-        <div className={classes.header}>
+        <div className={cn(classes.header, classes.padding)}>
           <Heading className={classes.paddingSmall}>{title}</Heading>
         </div>
         <div className={classes.padding}>

From 000c15543e1c028c975a9e1482df66c70d2ecdde Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 10:47:31 +0200
Subject: [PATCH 152/170] fix grid in cards

---
 src/layout/Cards/Cards.tsx | 69 ++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 0f2cb0355f..bca341687e 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { CSSProperties } from 'react';
 
 import { AppCard } from 'src/app-components/Card/Card';
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
+import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
@@ -57,16 +57,30 @@ export const Cards = ({ node }: ICardsProps) => {
               )
             }
           >
-            {card?.childIds &&
-              card.childIds?.length > 0 &&
-              card.childIds?.filter(typedBoolean).map((childId, idx) => (
-                <CardItem
-                  key={idx}
-                  nodeId={childId}
-                  parentNode={node}
-                  isMedia={false}
-                />
-              ))}
+            <Flex
+              container
+              direction='row'
+              spacing={6}
+              item
+            >
+              <Flex
+                container
+                alignItems='flex-start'
+                spacing={6}
+                item
+              >
+                {card?.childIds &&
+                  card.childIds?.length > 0 &&
+                  card.childIds?.filter(typedBoolean).map((childId, idx) => (
+                    <CardItem
+                      key={idx}
+                      nodeId={childId}
+                      parentNode={node}
+                      isMedia={false}
+                    />
+                  ))}
+              </Flex>
+            </Flex>
           </AppCard>
         ))}
       </div>
@@ -93,24 +107,21 @@ function CardItem({ nodeId, parentNode, isMedia, minMediaHeight }: CardItemProps
       renderedInMedia={isMedia}
       minMediaHeight={minMediaHeight}
     >
-      <ConditionalWrapper
-        condition={isMedia}
-        wrapper={(children) => (
-          <div
-            data-componentid={nodeId}
-            data-componentbaseid={itemNode.baseId}
-          >
-            {children}
-          </div>
-        )}
-      >
-        <GenericComponent
-          node={itemNode}
-          overrideDisplay={{
-            directRender: true,
-          }}
-        />
-      </ConditionalWrapper>
+      {isMedia ? (
+        <div
+          data-componentid={nodeId}
+          data-componentbaseid={itemNode.baseId}
+        >
+          <GenericComponent
+            node={itemNode}
+            overrideDisplay={{
+              directRender: true,
+            }}
+          />
+        </div>
+      ) : (
+        <GenericComponent node={itemNode} />
+      )}
     </CardProvider>
   );
 }

From 87564567853b467c6ee905d3148bc7252c090d05 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 12:10:14 +0200
Subject: [PATCH 153/170] turn off auto placement navigation popover

---
 src/features/navigation/PopoverNavigation.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/navigation/PopoverNavigation.tsx b/src/features/navigation/PopoverNavigation.tsx
index eb2f996b44..6536c69ca8 100644
--- a/src/features/navigation/PopoverNavigation.tsx
+++ b/src/features/navigation/PopoverNavigation.tsx
@@ -60,6 +60,7 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
             data-testid='page-navigation-dialog'
             placement='bottom-start'
             autoFocus={true}
+            autoPlacement={false}
             open={isDialogOpen}
             onClose={closeDialog}
           >

From 7ab1068b911d8ddb888c823e96e4663c3bdef921 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 13:00:01 +0200
Subject: [PATCH 154/170] test using chromium for cypress

---
 .github/workflows/cypress.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index aa29410b64..9c1b4ee6fa 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -102,7 +102,7 @@ jobs:
           parallel: true
           group: altinn-app-frontend
           tag: altinn-app-frontend
-          browser: chrome
+          browser: chromium
           ci-build-id: ${{ github.run_id }}-${{ github.run_attempt }}
           spec: test/e2e/integration
           env: environment=tt02
@@ -138,7 +138,7 @@ jobs:
         uses: cypress-io/github-action@v6
         with:
           start: 'npx http-server dist --cors="*" -p 8080'
-          browser: chrome
+          browser: chromium
           spec: test/e2e/integration
           env: environment=tt02
 

From 5ada442fddfb49d49d19d5a3e16481558147c558 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 13:40:47 +0200
Subject: [PATCH 155/170] test using chromium for cypress

---
 .github/workflows/cypress.yml | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index 9c1b4ee6fa..e1248429d7 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -42,6 +42,9 @@ jobs:
           runTests: false
           build: yarn run build
 
+      - name: Install chromium
+        run: apk add --no-cache chromium
+
       - name: Save build folder
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
@@ -73,7 +76,8 @@ jobs:
         with:
           name: dist
           path: dist
-
+      - name: Install chromium
+        run: apk add --no-cache chromium
       - name: Set Percy command based on PR draft status or main branch
         shell: bash
         run: |
@@ -133,7 +137,8 @@ jobs:
         with:
           name: dist
           path: dist
-
+      - name: Install chromium
+        run: apk add --no-cache chromium
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

From 76be434469dde9017b51b518bde9a7846fbe1df7 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 13:45:08 +0200
Subject: [PATCH 156/170] revert chromium test

---
 .github/workflows/cypress.yml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index e1248429d7..646ee373ce 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -76,8 +76,6 @@ jobs:
         with:
           name: dist
           path: dist
-      - name: Install chromium
-        run: apk add --no-cache chromium
       - name: Set Percy command based on PR draft status or main branch
         shell: bash
         run: |
@@ -106,7 +104,7 @@ jobs:
           parallel: true
           group: altinn-app-frontend
           tag: altinn-app-frontend
-          browser: chromium
+          browser: chrome
           ci-build-id: ${{ github.run_id }}-${{ github.run_attempt }}
           spec: test/e2e/integration
           env: environment=tt02
@@ -137,13 +135,11 @@ jobs:
         with:
           name: dist
           path: dist
-      - name: Install chromium
-        run: apk add --no-cache chromium
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           start: 'npx http-server dist --cors="*" -p 8080'
-          browser: chromium
+          browser: chrome
           spec: test/e2e/integration
           env: environment=tt02
 

From 2020d9d88beffa5cf030178127466ef03936a189 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 13:50:25 +0200
Subject: [PATCH 157/170] revert chromium test

---
 .github/workflows/cypress.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index 646ee373ce..bcd391577d 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -42,8 +42,6 @@ jobs:
           runTests: false
           build: yarn run build
 
-      - name: Install chromium
-        run: apk add --no-cache chromium
 
       - name: Save build folder
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
@@ -76,6 +74,7 @@ jobs:
         with:
           name: dist
           path: dist
+
       - name: Set Percy command based on PR draft status or main branch
         shell: bash
         run: |
@@ -135,6 +134,7 @@ jobs:
         with:
           name: dist
           path: dist
+
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

From 41ac7f041f9b1d3c69f3c0b8b169a90b67d11d1c Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 14:31:28 +0200
Subject: [PATCH 158/170] test waiting for snapshots

---
 test/e2e/support/custom.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index d7dcbef492..0e7dcc6697 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -239,6 +239,9 @@ Cypress.Commands.add('clearSelectionAndWait', (viewport) => {
     }
   });
 
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(1000); // Wait a bit to ensure that the blur has taken effect
+
   cy.focused().should('not.exist');
 
   // Wait for elements marked as loading are not loading anymore

From 23dbf367f8e5542847a37b4283f38c1f5b4b3fca Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 14:50:19 +0200
Subject: [PATCH 159/170] revert waiting before snapshot

---
 test/e2e/support/custom.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 0e7dcc6697..d7dcbef492 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -239,9 +239,6 @@ Cypress.Commands.add('clearSelectionAndWait', (viewport) => {
     }
   });
 
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.wait(1000); // Wait a bit to ensure that the blur has taken effect
-
   cy.focused().should('not.exist');
 
   // Wait for elements marked as loading are not loading anymore

From 5d85c78b3265aa6c852373312c766aeed5de5e1d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 16 Jun 2025 16:38:38 +0200
Subject: [PATCH 160/170] fix accordiongroup summary2

---
 .../SummaryAccordionGroupComponent.tsx        | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
index 7f2fac2db0..8b7f9ae14a 100644
--- a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
+++ b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Details } from '@digdir/designsystemet-react';
-
 import { SummaryAccordionComponent, SummaryAccordionComponent2 } from 'src/layout/Accordion/SummaryAccordion';
 import { EmptyChildrenBoundary } from 'src/layout/Summary2/isEmpty/EmptyChildrenContext';
 import { SummaryFlexForContainer } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
@@ -31,16 +29,14 @@ export const SummaryAccordionGroupComponent2 = ({ target, ...rest }: Summary2Pro
       hideWhen={hideEmptyFields}
       target={target}
     >
-      <Details style={{ width: '100%' }}>
-        {childComponents.map((childId) => (
-          <Child2
-            target={target}
-            key={childId}
-            id={childId}
-            {...rest}
-          />
-        ))}
-      </Details>
+      {childComponents.map((childId) => (
+        <Child2
+          target={target}
+          key={childId}
+          id={childId}
+          {...rest}
+        />
+      ))}
     </SummaryFlexForContainer>
   );
 };

From 5533e03ba5afead4549ed96fd387783c3ebed961 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 17 Jun 2025 10:29:37 +0200
Subject: [PATCH 161/170] fix languageselector

---
 src/components/presentation/LanguageSelector.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/presentation/LanguageSelector.tsx b/src/components/presentation/LanguageSelector.tsx
index 8d37a8f538..824afa07cd 100644
--- a/src/components/presentation/LanguageSelector.tsx
+++ b/src/components/presentation/LanguageSelector.tsx
@@ -68,17 +68,18 @@ export const LanguageSelector = () => {
 
             return (
               <Dropdown.Item
-                role='menuitemradio'
                 aria-checked={selected}
                 key={lang}
                 onClick={() => updateLanguage(lang)}
               >
-                <CheckmarkIcon
-                  style={{ opacity: selected ? 1 : 0 }}
-                  className={cn(classes.icon, classes.checkmark)}
-                  aria-hidden
-                />
-                <Lang id={`language.full_name.${lang}`} />
+                <Dropdown.Button role='menuitemradio'>
+                  <CheckmarkIcon
+                    style={{ opacity: selected ? 1 : 0 }}
+                    className={cn(classes.icon, classes.checkmark)}
+                    aria-hidden
+                  />
+                  <Lang id={`language.full_name.${lang}`} />
+                </Dropdown.Button>
               </Dropdown.Item>
             );
           })}

From b885f4c1a9dae605f977f85ac416f467bdc5ba59 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 17 Jun 2025 10:32:13 +0200
Subject: [PATCH 162/170] update language selector

---
 src/components/presentation/LanguageSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/presentation/LanguageSelector.tsx b/src/components/presentation/LanguageSelector.tsx
index 824afa07cd..be1855d504 100644
--- a/src/components/presentation/LanguageSelector.tsx
+++ b/src/components/presentation/LanguageSelector.tsx
@@ -69,10 +69,10 @@ export const LanguageSelector = () => {
             return (
               <Dropdown.Item
                 aria-checked={selected}
+                role='menuitemradio'
                 key={lang}
-                onClick={() => updateLanguage(lang)}
               >
-                <Dropdown.Button role='menuitemradio'>
+                <Dropdown.Button onClick={() => updateLanguage(lang)}>
                   <CheckmarkIcon
                     style={{ opacity: selected ? 1 : 0 }}
                     className={cn(classes.icon, classes.checkmark)}

From 35c1c3a77f3a3fa12a087ee851c16a5136953150 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 17 Jun 2025 10:54:51 +0200
Subject: [PATCH 163/170] fix languageselector test

---
 src/components/presentation/LanguageSelector.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/presentation/LanguageSelector.tsx b/src/components/presentation/LanguageSelector.tsx
index be1855d504..9264b23091 100644
--- a/src/components/presentation/LanguageSelector.tsx
+++ b/src/components/presentation/LanguageSelector.tsx
@@ -69,10 +69,12 @@ export const LanguageSelector = () => {
             return (
               <Dropdown.Item
                 aria-checked={selected}
-                role='menuitemradio'
                 key={lang}
               >
-                <Dropdown.Button onClick={() => updateLanguage(lang)}>
+                <Dropdown.Button
+                  onClick={() => updateLanguage(lang)}
+                  role='menuitemradio'
+                >
                   <CheckmarkIcon
                     style={{ opacity: selected ? 1 : 0 }}
                     className={cn(classes.icon, classes.checkmark)}

From 784ba93718743d79927c55167415a3332510e84f Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 17 Jun 2025 11:08:52 +0200
Subject: [PATCH 164/170] fix languageselection test

---
 src/components/presentation/LanguageSelector.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/presentation/LanguageSelector.tsx b/src/components/presentation/LanguageSelector.tsx
index 9264b23091..e9eda04650 100644
--- a/src/components/presentation/LanguageSelector.tsx
+++ b/src/components/presentation/LanguageSelector.tsx
@@ -67,12 +67,10 @@ export const LanguageSelector = () => {
             const selected = currentLanguage === lang;
 
             return (
-              <Dropdown.Item
-                aria-checked={selected}
-                key={lang}
-              >
+              <Dropdown.Item key={lang}>
                 <Dropdown.Button
                   onClick={() => updateLanguage(lang)}
+                  aria-checked={selected}
                   role='menuitemradio'
                 >
                   <CheckmarkIcon

From 40ce64d6626e93ac08ef1abf16cb56923dcf2648 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 18 Jun 2025 12:28:35 +0200
Subject: [PATCH 165/170] cleanup

---
 .github/workflows/cypress.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index bcd391577d..aa29410b64 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -42,7 +42,6 @@ jobs:
           runTests: false
           build: yarn run build
 
-
       - name: Save build folder
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:

From 93746dc249f883dfd8add963d5fb435e7e85fb00 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 20 Jun 2025 08:31:24 +0200
Subject: [PATCH 166/170] PR template formatting

---
 .github/pull_request_template.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index f9c076ab7d..7d5251c334 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -40,7 +40,6 @@
   - [ ] The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
   - [ ] I don't have permissions to do that, please help me out
 - Labels
-
   - [ ] I have added a `kind/*` and `backport*` label to this PR for proper release notes grouping
   - [ ] I don't have permissions to add labels, please help me out
   <!---

From 8c30f4c35a0e79cc641d033893d05866983d1625 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 20 Jun 2025 10:52:16 +0200
Subject: [PATCH 167/170] fix size prop for attachment

---
 src/components/molecules/AltinnCollapsibleAttachments.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/AltinnCollapsibleAttachments.tsx b/src/components/molecules/AltinnCollapsibleAttachments.tsx
index 62f31c4582..f70f203566 100644
--- a/src/components/molecules/AltinnCollapsibleAttachments.tsx
+++ b/src/components/molecules/AltinnCollapsibleAttachments.tsx
@@ -40,7 +40,7 @@ export function AltinnCollapsibleAttachments({ attachments, title, hideCount }:
             fontSize='1.5rem'
             className={cn({ [classes.transformArrowRight]: !open }, classes.transition)}
           />
-          <Heading size='xs'>
+          <Heading data-size='xs'>
             {title} {attachmentCount}
           </Heading>
         </div>

From 2335f259be6711ddf7163433b21021ffdfd206e6 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 20 Jun 2025 12:43:04 +0200
Subject: [PATCH 168/170] remove snapshots of popovers

---
 test/e2e/integration/frontend-test/components.ts   | 1 -
 test/e2e/integration/frontend-test/group.ts        | 1 -
 test/e2e/integration/navigation-test/navigation.ts | 4 +++-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index 2b2fc93aa8..bc239c72c3 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -44,7 +44,6 @@ describe('UI Components', () => {
         cy.wrap(alert).find('b').should('have.length', 1);
         cy.wrap(alert).find('a').should('have.length', 1);
       });
-    cy.snapshot('helptext');
   });
 
   it('while file upload is in progress, the animation should be visible', () => {
diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index fb5a37f60c..ace612d2d0 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -441,7 +441,6 @@ describe('Group', () => {
 
     cy.get(appFrontend.group.subGroup).find('tbody > tr > td').first().should('have.text', 'automation');
     cy.get(appFrontend.group.subGroup).findByRole('button', { name: 'Slett-automation' }).click();
-    cy.snapshot('group: delete-warning-popup');
 
     cy.findByRole('button', { name: 'Avbryt' }).click({ force: true });
     cy.get(appFrontend.group.subGroup).findByRole('button', { name: 'Slett-automation' }).click();
diff --git a/test/e2e/integration/navigation-test/navigation.ts b/test/e2e/integration/navigation-test/navigation.ts
index 77209d6195..3ab4bcae21 100644
--- a/test/e2e/integration/navigation-test/navigation.ts
+++ b/test/e2e/integration/navigation-test/navigation.ts
@@ -110,7 +110,9 @@ describe('navigation', () => {
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('be.visible');
       cy.readFile('test/percy.css').then((percyCSS) => {
         cy.testWcag();
-        cy.percySnapshot(`navigation:page-states (${device})`, { percyCSS, widths: [width] });
+        if (device === 'mobile') {
+          cy.percySnapshot(`navigation:page-states (${device})`, { percyCSS, widths: [width] });
+        }
       });
       cy.gotoNavGroup(/^Informasjon/, device, 'Generell info');
 

From 21311f55cb7387cd72c472f09629dfce50f1460b Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 20 Jun 2025 15:30:06 +0200
Subject: [PATCH 169/170] make heading on error summary large

---
 src/components/message/ErrorReport.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index f7e5e0f32e..d43f3da0c7 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -9,6 +9,7 @@ import classes from 'src/components/message/ErrorReport.module.css';
 import { useNavigateToNode } from 'src/features/form/layout/NavigateToNode';
 import { Lang } from 'src/features/language/Lang';
 import { useSelectedParty } from 'src/features/party/PartiesProvider';
+import { useIsMobile } from 'src/hooks/useDeviceWidths';
 import { isAxiosError } from 'src/utils/isAxiosError';
 import { DataModelLocationProviderFromNode } from 'src/utils/layout/DataModelLocation';
 import { Hidden, useNode } from 'src/utils/layout/NodesContext';
@@ -33,6 +34,7 @@ const ErrorReportContext = createContext(false);
 
 export const ErrorReport = ({ children, errors, show }: IErrorReportProps) => {
   const hasErrorReport = useContext(ErrorReportContext);
+  const isMobile = useIsMobile();
   if (errors === undefined || hasErrorReport || !show) {
     return children;
   }
@@ -43,6 +45,7 @@ export const ErrorReport = ({ children, errors, show }: IErrorReportProps) => {
         <ErrorSummary
           data-testid='ErrorReport'
           className={classes.errorSummary}
+          data-size={isMobile ? 'md' : 'lg'}
         >
           <Flex
             container

From e7832af143fbbf3ccc00365b166e525c643a331d Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 24 Jun 2025 13:26:39 +0200
Subject: [PATCH 170/170] remove unused compact pagination, update
 infectedfilealert

---
 src/layout/FileUpload/Error/InfectedFileAlert.tsx             | 4 ++--
 .../RepeatingGroup/Pagination/RepeatingGroupPagination.tsx    | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/layout/FileUpload/Error/InfectedFileAlert.tsx b/src/layout/FileUpload/Error/InfectedFileAlert.tsx
index d4ea75ef02..5024ce5dfd 100644
--- a/src/layout/FileUpload/Error/InfectedFileAlert.tsx
+++ b/src/layout/FileUpload/Error/InfectedFileAlert.tsx
@@ -44,8 +44,8 @@ function InfectedFileMessage({ filename }: { filename: string }) {
 
   return (
     <Alert
-      size='sm'
-      severity='warning'
+      data-size='sm'
+      data-color='warning'
       role='alert'
       aria-live='assertive'
       aria-label={langAsString('form_filler.file_uploader_infected_file_alert', [filename])}
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 0b0980fdd3..7481d5b13f 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -85,7 +85,6 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
         pagesWithErrors={pagesWithErrors}
         onChange={() => onChange}
         setCurrentPage={setCurrentPage}
-        compact={isTablet}
         hideLabels={isMobile}
         size={isMini ? 'sm' : 'md'}
       />
@@ -96,7 +95,6 @@ type PaginationComponentProps = {
   nextTextKey: string;
   backTextKey: string;
   size: NonNullable<Parameters<typeof Pagination>[0]['data-size']>;
-  compact: boolean;
   hideLabels: boolean;
   currentPage: number;
   totalPages: number;
@@ -109,7 +107,6 @@ function PaginationComponent({
   nextTextKey,
   backTextKey,
   size,
-  compact,
   hideLabels,
   currentPage,
   totalPages,