@norges-domstoler/dds-components 13.10.1 → 13.10.2

package/dist/index.mjs

@@ -294,7 +294,9 @@ var fontPackage = (small) => {
   }
   return navTokens2.logoAndVersion.logo;
 };
-var NavigationLogo = styled3.a`
+var NavigationLogo = styled3.a.withConfig({
+  shouldForwardProp: (prop) => prop !== "small"
+})`
   font-size: ${({ small }) => fontPackage(small).fontSize};
   font-style: ${({ small }) => fontPackage(small).fontStyle};
   font-family: ${({ small }) => fontPackage(small).fontFamily};
@@ -662,11 +664,11 @@ import {
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var StyledSpinner = styled4.svg`
   display: block;
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
   stroke-dasharray: 90, 150;
   animation: rotate 1.5s linear infinite;
-  animation-delay: ${({ outerAnimationDelay }) => outerAnimationDelay}ms;
+  animation-delay: ${({ $outerAnimationDelay }) => $outerAnimationDelay}ms;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: rotate 2s linear infinite;
@@ -679,12 +681,12 @@ var StyledSpinner = styled4.svg`
   }
 `;
 var Circle = styled4.circle`
-  stroke: ${({ color }) => color && getTextColor(color)};
+  stroke: ${({ $color }) => $color && getTextColor($color)};
   stroke-linecap: round;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: dash 1.5s ease-in-out infinite;
-    animation-delay: ${({ innerAnimationDelay }) => innerAnimationDelay}ms;
+    animation-delay: ${({ $innerAnimationDelay }) => $innerAnimationDelay}ms;
 
     @keyframes dash {
       0% {
@@ -719,12 +721,8 @@ function Spinner(props) {
   const uniqueId = `${generatedId}-spinnerTitle`;
   const spinnerProps = {
     ...getBaseHTMLProps2(id, className, htmlProps, rest),
-    outerAnimationDelay,
-    size
-  };
-  const circleProps = {
-    innerAnimationDelay,
-    color
+    $outerAnimationDelay: outerAnimationDelay,
+    $size: size
   };
   return /* @__PURE__ */ jsxs2(
     StyledSpinner,
@@ -738,7 +736,8 @@ function Spinner(props) {
         /* @__PURE__ */ jsx5(
           Circle,
           {
-            ...circleProps,
+            $innerAnimationDelay: innerAnimationDelay,
+            $color: color,
             cx: "25",
             cy: "25",
             r: "20",
@@ -811,7 +810,21 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       `;
   }
 };
-var ButtonWrapper = styled5.button`
+var ButtonWrapper = styled5.button.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "appearance",
+      "purpose",
+      "size",
+      "fullWidth",
+      "hasIcon",
+      "hasLabel",
+      "isLoading",
+      "iconPosition"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   ${normalizeButton}
   border: ${base.border};
   user-select: text;
@@ -866,10 +879,10 @@ var ButtonWrapper = styled5.button`
   ${({ fullWidth, hasIcon, hasLabel, isLoading, iconPosition }) => fullWidth && (!hasIcon || !hasLabel || isLoading ? css2`
           justify-content: center;
         ` : hasIcon && hasLabel && iconPosition === "left" ? css2`
-          justify-content: left;
-        ` : css2`
-          justify-content: space-between;
-        `)}
+            justify-content: left;
+          ` : css2`
+            justify-content: space-between;
+          `)}
 
   &:focus-visible, &.focus-visible {
     ${focusVisible}
@@ -879,7 +892,18 @@ var ButtonWrapper = styled5.button`
     ${selection}
   }
 `;
-var StyledIconWrapperSpan = styled5.span`
+var StyledIconWrapperSpan = styled5.span.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "iconPosition",
+      "size",
+      "absolutePosition",
+      "isHidden",
+      "justIcon"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -894,7 +918,9 @@ var StyledIconWrapperSpan = styled5.span`
       width: ${sizes2[size].justIcon.wrapper.width};
     `}
 `;
-var Label = styled5.span`
+var Label = styled5.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "isHidden"
+})`
   ${({ isHidden }) => isHidden && css2`
       visibility: hidden;
     `}
@@ -1222,7 +1248,7 @@ var StyledScrollableContainer = styled7.div`
   padding: ${outerContainer2.padding};
 `;
 var Content = styled7.div`
-  height: ${({ height }) => height};
+  height: ${({ $height }) => $height};
   overflow: auto;
   scrollbar-width: none;
   ::-webkit-scrollbar {
@@ -1253,7 +1279,7 @@ var ScrollableContainer = (props) => {
     {
       ...getBaseHTMLProps5(id, className, htmlProps, rest),
       children: [
-        /* @__PURE__ */ jsx8(Content, { height: contentHeight, ref, tabIndex: 0, children }),
+        /* @__PURE__ */ jsx8(Content, { $height: contentHeight, ref, tabIndex: 0, children }),
         /* @__PURE__ */ jsx8(Scrollbar, { contentRef: ref })
       ]
     }
@@ -1509,7 +1535,7 @@ var Container = styled9.div`
   overflow-y: auto;
   min-width: 180px;
   max-width: 300px;
-  ${({ isOpen }) => visibilityTransition(isOpen)}
+  ${({ $isOpen }) => visibilityTransition($isOpen)}
   border: ${container2.border};
   background-color: ${container2.backgroundColor};
   border-radius: ${container2.borderRadius};
@@ -1633,7 +1659,7 @@ var OverflowMenu = forwardRef4(
       ...getBaseHTMLProps7(id, className, restHTMLProps, rest),
       ref: combinedRef,
       id: id != null ? id : `${generatedId}-overflowMenu`,
-      isOpen,
+      $isOpen: isOpen,
       style: { ...style, ...styles.floating },
       "aria-hidden": !isOpen,
       role: "menu"
@@ -1736,7 +1762,9 @@ var IconButtonText = styled10.span`
   display: none; // Ikke vis tekst på mobil
   width: 0;
 `;
-var Bar = styled10.div`
+var Bar = styled10.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "environmentBannerActive"
+})`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1821,7 +1849,9 @@ var TopBar = ({
 import { ENVIRONMENT_BANNER_HEIGHT as ENVIRONMENT_BANNER_HEIGHT2 } from "@norges-domstoler/development-utils";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var { navigation: navTokens4 } = appShellTokens;
-var Sidebar = styled11.div`
+var Sidebar = styled11.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "environmentBannerActive"
+})`
   display: flex;
   flex-direction: column;
   height: calc(100vh - ${navTokens4.topBar.height});
@@ -1967,7 +1997,9 @@ var AppShellContainer = styled12.div`
     flex-direction: row;
   }
 `;
-var MainContent = styled12.main`
+var MainContent = styled12.main.withConfig({
+  shouldForwardProp: (prop) => prop !== "environmentBannerActive"
+})`
   min-height: calc(100vh - ${appShellTokens.navigation.topBar.height});
   margin-top: ${({ environmentBannerActive }) => environmentBannerActive ? `calc(${ENVIRONMENT_BANNER_HEIGHT3} + ${appShellTokens.navigation.topBar.height})` : appShellTokens.navigation.topBar.height};
   @media (min-width: ${appShellTokens.navigation.mobile.breakpoint}) {
@@ -2156,7 +2188,7 @@ var CustomSelectionControl = styled13.span`
   border-radius: ${selectionControl2.base.borderRadius};
   height: ${selectionControl2.base.height};
   width: ${selectionControl2.base.width};
-  ${({ controlType }) => controlType === "radio" && css4`
+  ${({ $controlType }) => $controlType === "radio" && css4`
       border-radius: 50%;
     `}
   &:after {
@@ -2173,7 +2205,7 @@ var Container2 = styled13.label`
   user-select: none;
   width: fit-content;
   color: ${container4.color};
-  ${({ hasLabel }) => hasLabel ? css4`
+  ${({ $hasLabel }) => $hasLabel ? css4`
           padding-left: ${container4.withLabel.paddingLeft};
         ` : css4`
           padding: ${container4.noLabel.padding};
@@ -2219,7 +2251,7 @@ var Container2 = styled13.label`
     border-color: ${selectionControl2.checked.hover.borderColor};
   }
 
-  ${({ error }) => error && css4`
+  ${({ $error }) => $error && css4`
       &:hover input:enabled ~ ${CustomSelectionControl} {
         background-color: ${selectionControl2.hover.danger.backgroundColor};
         box-shadow: ${selectionControl2.hover.danger.boxShadow};
@@ -2257,7 +2289,7 @@ var Container2 = styled13.label`
       cursor: not-allowed;
       color: ${container4.disabled.color};
     `}
-  ${({ controlType }) => controlType === "checkbox" ? css4`
+  ${({ $controlType }) => $controlType === "checkbox" ? css4`
           ${CustomSelectionControl}:after {
             border: solid ${checkmark2.checkbox.borderColor};
 
@@ -2294,9 +2326,9 @@ var OuterGroupContainer = styled13.div`
 `;
 var GroupContainer = styled13.div`
   display: flex;
-  ${({ direction }) => css4`
-    flex-direction: ${direction};
-    gap: ${groupContainer2[direction].gap};
+  ${({ $direction }) => css4`
+    flex-direction: ${$direction};
+    gap: ${groupContainer2[$direction].gap};
   `}
 `;
 
@@ -2360,21 +2392,24 @@ var RadioButton = forwardRef5(
       "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
       "aria-invalid": error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error) ? true : void 0
     };
-    const containerProps = {
-      error: error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error),
-      disabled: disabled || (radioButtonGroup == null ? void 0 : radioButtonGroup.disabled),
-      readOnly: readOnly || (radioButtonGroup == null ? void 0 : radioButtonGroup.readOnly),
-      style,
-      className: joinClassNames(className, htmlPropsClassName),
-      htmlFor: uniqueId,
-      controlType: "radio",
-      hasLabel
-    };
-    return /* @__PURE__ */ jsxs11(Container2, { ...containerProps, htmlFor: uniqueId, controlType: "radio", children: [
-      /* @__PURE__ */ jsx15(HiddenInput, { ...inputProps, ref }),
-      /* @__PURE__ */ jsx15(CustomSelectionControl, { controlType: "radio" }),
-      /* @__PURE__ */ jsx15(Typography, { as: "span", children: children != null ? children : label3 })
-    ] });
+    return /* @__PURE__ */ jsxs11(
+      Container2,
+      {
+        $error: error || (radioButtonGroup == null ? void 0 : radioButtonGroup.error),
+        disabled: disabled || (radioButtonGroup == null ? void 0 : radioButtonGroup.disabled),
+        $readOnly: readOnly || (radioButtonGroup == null ? void 0 : radioButtonGroup.readOnly),
+        style,
+        className: joinClassNames(className, htmlPropsClassName),
+        $hasLabel: hasLabel,
+        htmlFor: uniqueId,
+        $controlType: "radio",
+        children: [
+          /* @__PURE__ */ jsx15(HiddenInput, { ...inputProps, ref }),
+          /* @__PURE__ */ jsx15(CustomSelectionControl, { $controlType: "radio" }),
+          /* @__PURE__ */ jsx15(Typography, { as: "span", children: children != null ? children : label3 })
+        ]
+      }
+    );
   }
 );
 RadioButton.displayName = "RadioButton";
@@ -2426,7 +2461,9 @@ import {
 } from "@norges-domstoler/dds-core";
 import { ErrorIcon } from "@norges-domstoler/dds-icons";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var InputMessageWrapper = styled14.div`
+var InputMessageWrapper = styled14.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "messageType"
+})`
   display: flex;
   width: fit-content;
   word-break: break-word;
@@ -2553,7 +2590,7 @@ var RadioButtonGroupInner = (props, ref) => {
           GroupContainer,
           {
             role: "radiogroup",
-            direction,
+            $direction: direction,
             "aria-labelledby": uniqueGroupId,
             "aria-describedby": tipId,
             "aria-errormessage": errorMessageId,
@@ -2611,43 +2648,42 @@ var Checkbox = forwardRef8(
       className: htmlPropsClassName,
       ...restHtmlProps
     } = htmlProps;
-    const containerProps = {
-      error: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
-      disabled,
-      indeterminate,
-      htmlFor: uniqueId,
-      hasLabel,
-      className: joinClassNames2(className, htmlPropsClassName),
-      style
-    };
-    const inputProps = {
-      ...getBaseHTMLProps11(uniqueId, restHtmlProps, rest),
-      ref,
-      name,
-      indeterminate,
-      disabled,
-      "aria-describedby": spaceSeparatedIdListGenerator([
-        checkboxGroup == null ? void 0 : checkboxGroup.tipId,
-        checkboxGroup == null ? void 0 : checkboxGroup.errorMessageId,
-        ariaDescribedby
-      ]),
-      "aria-invalid": error || (checkboxGroup == null ? void 0 : checkboxGroup.error) ? true : void 0,
-      "aria-labelledby": checkboxGroup == null ? void 0 : checkboxGroup.uniqueGroupId,
-      "aria-checked": indeterminate ? "mixed" : void 0,
-      "aria-readonly": readOnly
-    };
-    return /* @__PURE__ */ jsxs15(Container2, { ...containerProps, controlType: "checkbox", children: [
-      /* @__PURE__ */ jsx19(
-        HiddenInput2,
-        {
-          ...inputProps,
-          type: "checkbox",
-          "data-indeterminate": indeterminate
-        }
-      ),
-      /* @__PURE__ */ jsx19(CustomSelectionControl, { controlType: "checkbox" }),
-      hasLabel && /* @__PURE__ */ jsx19(Typography4, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
-    ] });
+    return /* @__PURE__ */ jsxs15(
+      Container2,
+      {
+        $error: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
+        disabled,
+        htmlFor: uniqueId,
+        $hasLabel: hasLabel,
+        $controlType: "checkbox",
+        className: joinClassNames2(className, htmlPropsClassName),
+        style,
+        children: [
+          /* @__PURE__ */ jsx19(
+            HiddenInput2,
+            {
+              ...getBaseHTMLProps11(uniqueId, restHtmlProps, rest),
+              ref,
+              name,
+              disabled,
+              "aria-describedby": spaceSeparatedIdListGenerator([
+                checkboxGroup == null ? void 0 : checkboxGroup.tipId,
+                checkboxGroup == null ? void 0 : checkboxGroup.errorMessageId,
+                ariaDescribedby
+              ]),
+              "aria-invalid": error || (checkboxGroup == null ? void 0 : checkboxGroup.error) ? true : void 0,
+              "aria-labelledby": checkboxGroup == null ? void 0 : checkboxGroup.uniqueGroupId,
+              "aria-checked": indeterminate ? "mixed" : void 0,
+              "aria-readonly": readOnly,
+              type: "checkbox",
+              "data-indeterminate": indeterminate
+            }
+          ),
+          /* @__PURE__ */ jsx19(CustomSelectionControl, { $controlType: "checkbox" }),
+          hasLabel && /* @__PURE__ */ jsx19(Typography4, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -2718,7 +2754,7 @@ var CheckboxGroup = (props) => {
             role: "group",
             "aria-labelledby": uniqueGroupId,
             "aria-describedby": tip ? tipId : void 0,
-            direction,
+            $direction: direction,
             children
           }
         ) }),
@@ -2855,8 +2891,8 @@ var MessageContainer = styled16.div`
 var StyledIcon = styled16(Icon5)`
   position: absolute;
   color: ${icon3.color};
-  ${({ size, iconSize }) => css6`
-    left: ${icon3.sizes[size].left};
+  ${({ $size, iconSize }) => css6`
+    left: ${icon3.sizes[$size].left};
     ${iconSize === "small" ? css6`
           top: ${`calc(50% - ${iconSizes2.DdsIconsizeSmallNumberPx / 2}px)`};
         ` : css6`
@@ -2866,7 +2902,7 @@ var StyledIcon = styled16(Icon5)`
   z-index: 1;
 `;
 var StyledInput = styled16(StatefulInput)`
-  ${({ componentSize, hasIcon }) => hasIcon && componentSize && css6`
+  ${({ componentSize, $hasIcon }) => $hasIcon && componentSize && css6`
       padding-left: ${input2.withIcon[componentSize].paddingLeft};
     `}
 `;
@@ -2980,7 +3016,6 @@ var TextInput = forwardRef9(
     const errorMessageId = derivativeIdGenerator2(uniqueId, "errorMessage");
     const generalInputProps = {
       id: uniqueId,
-      errorMessage,
       hasErrorMessage,
       required,
       disabled,
@@ -3013,7 +3048,7 @@ var TextInput = forwardRef9(
           {
             icon: icon12,
             iconSize: getFormInputIconSize(componentSize),
-            size: componentSize
+            $size: componentSize
           }
         ),
         /* @__PURE__ */ jsx21(
@@ -3023,7 +3058,7 @@ var TextInput = forwardRef9(
             onChange: onChangeHandler,
             type,
             componentSize,
-            hasIcon,
+            $hasIcon: hasIcon,
             ...generalInputProps
           }
         )
@@ -3297,30 +3332,30 @@ function getContainerControlPadding(componentSize, isMulti) {
 }
 var Container3 = styled18.div`
   margin: 0;
-  width: ${({ width }) => width};
+  width: ${({ $width }) => $width};
   position: relative;
 
   *::selection {
     ${selection3}
   }
 
-  ${({ componentSize, isMulti }) => css8`
+  ${({ $componentSize, $isMulti }) => css8`
     .${prefix}__control {
-      padding: ${getContainerControlPadding(componentSize, isMulti)};
-      ${getFontStyling3(typographyTypes2.control[componentSize], true)}
+      padding: ${getContainerControlPadding($componentSize, $isMulti)};
+      ${getFontStyling3(typographyTypes2.control[$componentSize], true)}
     }
     .${prefix}__option {
-      ${getFontStyling3(typographyTypes2.option[componentSize], true)}
+      ${getFontStyling3(typographyTypes2.option[$componentSize], true)}
     }
     .${prefix}__placeholder {
-      ${getFontStyling3(typographyTypes2.placeholder[componentSize])}
+      ${getFontStyling3(typographyTypes2.placeholder[$componentSize])}
     }
     .${prefix}__menu-notice--no-options {
-      ${getFontStyling3(typographyTypes2.noOptionsMessage[componentSize])}
+      ${getFontStyling3(typographyTypes2.noOptionsMessage[$componentSize])}
     }
   `}
 
-  ${({ errorMessage }) => errorMessage && css8`
+  ${({ $errorMessage }) => $errorMessage && css8`
       .${prefix}__control {
         ${dangerInputfield2}
       }
@@ -3339,7 +3374,7 @@ var Container3 = styled18.div`
     color: ${dropdownIndicator2.hover.color};
   }
 
-  ${({ isDisabled, readOnly }) => readOnly ? css8`
+  ${({ $isDisabled, $readOnly }) => $readOnly ? css8`
           .${prefix}__control {
             border-color: ${control2.readOnly.borderColor};
             background-color: ${control2.readOnly.backgroundColor};
@@ -3349,16 +3384,16 @@ var Container3 = styled18.div`
             .${prefix}__dropdown-indicator {
             color: ${dropdownIndicator2.readOnly.color};
           }
-        ` : isDisabled ? css8`
-          cursor: not-allowed;
-          .${prefix}__control {
-            border-color: ${control2.disabled.borderColor};
-            background-color: ${control2.disabled.backgroundColor};
-          }
-          &:hover .${prefix}__dropdown-indicator {
-            color: ${dropdownIndicator2.base.color};
-          }
-        ` : ""}
+        ` : $isDisabled ? css8`
+            cursor: not-allowed;
+            .${prefix}__control {
+              border-color: ${control2.disabled.borderColor};
+              background-color: ${control2.disabled.backgroundColor};
+            }
+            &:hover .${prefix}__dropdown-indicator {
+              color: ${dropdownIndicator2.base.color};
+            }
+          ` : ""}
 `;
 var InnerSingleValue = styled18.div`
   overflow: hidden;
@@ -3597,12 +3632,12 @@ var SelectInner = (props, ref) => {
   const tipId = derivativeIdGenerator3(uniqueId, "tip");
   const errorMessageId = derivativeIdGenerator3(uniqueId, "errorMessage");
   const containerProps = {
-    width,
-    componentSize,
-    errorMessage,
-    isDisabled,
-    readOnly,
-    isMulti,
+    $width: width,
+    $componentSize: componentSize,
+    $errorMessage: errorMessage,
+    $isDisabled: isDisabled,
+    $readOnly: readOnly,
+    $isMulti: isMulti,
     className,
     style
   };
@@ -3739,10 +3774,10 @@ var Container4 = styled19.div`
   padding: ${container6.padding};
   border-bottom: ${container6.borderBottom};
   ${getFontStyling4(typographyType2, true)}
-  ${({ purpose }) => purpose && css9`
-      border-color: ${container6[purpose].borderColor};
-      background-color: ${container6[purpose].backgroundColor};
-    `}
+  ${({ $purpose }) => css9`
+    border-color: ${container6[$purpose].borderColor};
+    background-color: ${container6[$purpose].backgroundColor};
+  `}
 `;
 var MessageIconWrapper = styled19(Icon8)`
   margin-right: ${icon6.marginRight};
@@ -3756,7 +3791,7 @@ var ContentContainer = styled19.div`
   align-items: center;
   padding-top: ${contentContainer2.paddingTop};
   padding-bottom: ${contentContainer2.paddingBottom};
-  padding-right: ${({ closable }) => closable ? contentContainer2.withClosable.paddingRight : contentContainer2.paddingRight};
+  padding-right: ${({ $closable }) => $closable ? contentContainer2.withClosable.paddingRight : contentContainer2.paddingRight};
 `;
 var GlobalMessage = forwardRef10(
   (props, ref) => {
@@ -3772,37 +3807,40 @@ var GlobalMessage = forwardRef10(
       ...rest
     } = props;
     const [isClosed, setClosed] = useState6(false);
-    const containerProps = {
-      ...getBaseHTMLProps14(id, className, htmlProps, rest),
-      ref,
-      purpose
-    };
-    return !isClosed ? /* @__PURE__ */ jsxs20(Container4, { ...containerProps, children: [
-      /* @__PURE__ */ jsxs20(ContentContainer, { closable, children: [
-        /* @__PURE__ */ jsx23(
-          MessageIconWrapper,
-          {
-            icon: purposeVariants[purpose].icon,
-            color: icon6[purpose].color
-          }
-        ),
-        children != null ? children : /* @__PURE__ */ jsx23(Typography7, { as: "span", children: message2 })
-      ] }),
-      /* @__PURE__ */ jsx23(ControlsContainer, { children: closable && /* @__PURE__ */ jsx23(
-        Button,
-        {
-          icon: CloseIcon2,
-          purpose: purposeVariants[purpose].closeButtonPurpose,
-          appearance: "borderless",
-          onClick: () => {
-            setClosed(true);
-            onClose && onClose();
-          },
-          size: "small",
-          "aria-label": "Lukk melding"
-        }
-      ) })
-    ] }) : null;
+    return !isClosed ? /* @__PURE__ */ jsxs20(
+      Container4,
+      {
+        ref,
+        $purpose: purpose,
+        ...getBaseHTMLProps14(id, className, htmlProps, rest),
+        children: [
+          /* @__PURE__ */ jsxs20(ContentContainer, { $closable: closable, children: [
+            /* @__PURE__ */ jsx23(
+              MessageIconWrapper,
+              {
+                icon: purposeVariants[purpose].icon,
+                color: icon6[purpose].color
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ jsx23(Typography7, { as: "span", children: message2 })
+          ] }),
+          /* @__PURE__ */ jsx23(ControlsContainer, { children: closable && /* @__PURE__ */ jsx23(
+            Button,
+            {
+              icon: CloseIcon2,
+              purpose: purposeVariants[purpose].closeButtonPurpose,
+              appearance: "borderless",
+              onClick: () => {
+                setClosed(true);
+                onClose && onClose();
+              },
+              size: "small",
+              "aria-label": "Lukk melding"
+            }
+          ) })
+        ]
+      }
+    ) : null;
   }
 );
 GlobalMessage.displayName = "GlobalMessage";
@@ -3924,7 +3962,17 @@ import { CloseIcon as CloseIcon3 } from "@norges-domstoler/dds-icons";
 import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var defaultWidth3 = "400px";
 var { container: container8, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
-var Container5 = styled20.div`
+var Container5 = styled20.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "layout",
+      "closable",
+      "purpose",
+      "width"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   box-sizing: border-box;
   display: grid;
   grid-template-areas: ${({ layout, closable }) => getGridTemplateAreas(layout, closable)};
@@ -4218,7 +4266,7 @@ import { derivativeIdGenerator as derivativeIdGenerator4 } from "@norges-domstol
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var { suggestionsContainer: suggestionsContainer2, suggestionsHeader: suggestionsHeader2 } = searchTokens;
 var SuggestionsContainer = styled22(Paper)`
-  ${({ isHidden }) => visibilityTransition2(!isHidden)};
+  ${({ $isHidden }) => visibilityTransition2(!$isHidden)};
   position: absolute;
   top: 100%;
   width: 100%;
@@ -4232,7 +4280,7 @@ var SuggestionsContainer = styled22(Paper)`
   ${scrollbarStyling.webkit}
 `;
 var MenuItem = styled22(OverflowMenuItem)`
-  ${({ size }) => size && getFontStyling6(typographyTypes3[size])}
+  ${({ $size }) => $size && getFontStyling6(typographyTypes3[$size])}
 `;
 var SuggestionsList = styled22.ul`
   ${removeListStyling}
@@ -4271,7 +4319,7 @@ var SearchSuggestions = forwardRef12((props, ref) => {
         title: suggestion,
         "aria-setsize": suggestionsToRender.length,
         "aria-posinset": index,
-        size: componentSize
+        $size: componentSize
       }
     ) }, index);
   }) });
@@ -4281,7 +4329,7 @@ var SearchSuggestions = forwardRef12((props, ref) => {
     {
       ...getBaseHTMLProps17(id, className, htmlProps, rest),
       ref,
-      isHidden,
+      $isHidden: isHidden,
       "aria-hidden": isHidden,
       children: [
         /* @__PURE__ */ jsx26(
@@ -4322,19 +4370,19 @@ var Input2 = styled23(BaseInput)`
   }
   padding-right: ${input4.base.paddingRight};
 
-  ${({ componentSize }) => css11`
-    padding-top: ${input4.sizes[componentSize].paddingTop};
-    padding-bottom: ${input4.sizes[componentSize].paddingBottom};
-    padding-left: ${input4.sizes[componentSize].paddingLeft};
-    ${getFontStyling7(typographyTypes3[componentSize])}
+  ${({ $componentSize }) => css11`
+    padding-top: ${input4.sizes[$componentSize].paddingTop};
+    padding-bottom: ${input4.sizes[$componentSize].paddingBottom};
+    padding-left: ${input4.sizes[$componentSize].paddingLeft};
+    ${getFontStyling7(typographyTypes3[$componentSize])}
   `}
 `;
 var StyledSearchIcon = styled23(Icon10)`
   position: absolute;
   left: ${searchIcon2.base.left};
   color: ${searchIcon2.base.color};
-  ${({ size }) => css11`
-    top: ${searchTokens.searchIcon[size].top};
+  ${({ $size }) => css11`
+    top: ${searchTokens.searchIcon[$size].top};
   `}
   z-index: 1;
 `;
@@ -4350,7 +4398,7 @@ var OuterContainer = styled23.div`
   gap: ${outerContainer4.gap};
 `;
 var HorisontalContainer = styled23.div`
-  ${(props) => props.hasSearchButton && css11`
+  ${(props) => props.$hasSearchButton && css11`
       display: grid;
       grid-template-columns: 1fr auto;
       gap: ${horisontalContainer2.gap};
@@ -4397,26 +4445,6 @@ var Search = forwardRef13(
       const emptyChangeEvent = createEmptyChangeEvent(uniqueId);
       handleChange(emptyChangeEvent);
     };
-    const containerProps = {
-      className,
-      style
-    };
-    const inputProps = {
-      ...rest,
-      ref: combinedRef,
-      componentSize,
-      name,
-      type: "search",
-      id: uniqueId,
-      "aria-describedby": spaceSeparatedIdListGenerator4([
-        tip ? tipId : void 0,
-        context.suggestions ? suggestionsDescriptionId : void 0,
-        ariaDescribedby
-      ]),
-      value: (_a = context.inputValue) != null ? _a : value,
-      onChange: handleChange,
-      autoComplete: "off"
-    };
     const {
       label: buttonLabel,
       onClick,
@@ -4430,22 +4458,36 @@ var Search = forwardRef13(
         /* @__PURE__ */ jsxs23(
           HorisontalContainer,
           {
-            hasSearchButton: showSearchButton,
-            ...containerProps,
+            $hasSearchButton: showSearchButton,
+            className,
+            style,
             children: [
               /* @__PURE__ */ jsxs23(InputContainer2, { children: [
                 /* @__PURE__ */ jsx27(
                   StyledSearchIcon,
                   {
                     icon: SearchIcon,
-                    size: componentSize,
+                    $size: componentSize,
                     iconSize: getIconSize(componentSize)
                   }
                 ),
                 /* @__PURE__ */ jsx27(
                   Input2,
                   {
-                    ...inputProps,
+                    ...rest,
+                    ref: combinedRef,
+                    $componentSize: componentSize,
+                    name,
+                    type: "search",
+                    id: uniqueId,
+                    "aria-describedby": spaceSeparatedIdListGenerator4([
+                      tip ? tipId : void 0,
+                      context.suggestions ? suggestionsDescriptionId : void 0,
+                      ariaDescribedby
+                    ]),
+                    value: (_a = context.inputValue) != null ? _a : value,
+                    onChange: handleChange,
+                    autoComplete: "off",
                     "aria-autocomplete": hasSuggestions ? "list" : void 0,
                     "aria-controls": hasSuggestions ? suggestionsId : void 0,
                     "aria-expanded": context.showSuggestions,
@@ -4679,13 +4721,13 @@ var StyledTable = styled24.table`
   }
   ${scrollbarStyling.webkit}
   ${scrollbarStyling.firefox}
-  ${({ density }) => css12`
+  ${({ $density }) => css12`
     td,
     th {
-      padding: ${cell2.density[density].padding};
+      padding: ${cell2.density[$density].padding};
     }
   `}
-  ${({ density }) => density === "extraCompact" && css12`
+  ${({ $density }) => $density === "extraCompact" && css12`
       th {
         background-color: ${row2.head.extraCompact.backgroundColor};
         font-size: ${row2.head.extraCompact.fontSize};
@@ -4699,7 +4741,7 @@ var StyledTable = styled24.table`
         }
       }
     `}
-  ${({ stickyHeader }) => stickyHeader && css12`
+  ${({ $stickyHeader }) => $stickyHeader && css12`
       tr[type='head'] {
         th[type='head'] {
           position: sticky;
@@ -4708,20 +4750,25 @@ var StyledTable = styled24.table`
         }
       }
     `}
-  ${({ withDividers }) => withDividers && css12`
+  ${({ $withDividers }) => $withDividers && css12`
       tr[type='body'] {
         border-bottom: ${row2.body.withDividers.borderBottom};
       }
     `}
 `;
 var Table = forwardRef14(
-  ({ density = "normal", children, ...rest }, ref) => {
-    const tableProps = {
-      ref,
-      density,
-      ...rest
-    };
-    return /* @__PURE__ */ jsx29(StyledTable, { ...tableProps, children });
+  ({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx29(
+      StyledTable,
+      {
+        ...rest,
+        ref,
+        $density: density,
+        $stickyHeader: stickyHeader,
+        $withDividers: withDividers,
+        children
+      }
+    );
   }
 );
 Table.displayName = "Table";
@@ -4757,12 +4804,6 @@ var CollapsibleTable = forwardRef15((props, ref) => {
     definingColumnIndex = [0],
     ...rest
   } = props;
-  const tableProps = {
-    ref,
-    density,
-    isCollapsed,
-    ...rest
-  };
   return /* @__PURE__ */ jsx30(
     CollapsibleTableContext.Provider,
     {
@@ -4771,7 +4812,7 @@ var CollapsibleTable = forwardRef15((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ jsx30(StyledTable2, { ...tableProps, children })
+      children: /* @__PURE__ */ jsx30(StyledTable2, { ref, density, ...rest, children })
     }
   );
 });
@@ -4784,10 +4825,7 @@ import { jsx as jsx31 } from "react/jsx-runtime";
 var StyledHead = styled26.thead``;
 var Head = forwardRef16(
   ({ children, ...rest }, ref) => {
-    const headProps = {
-      ...rest
-    };
-    return /* @__PURE__ */ jsx31(StyledHead, { ref, ...headProps, children });
+    return /* @__PURE__ */ jsx31(StyledHead, { ref, ...rest, children });
   }
 );
 Head.displayName = "Table.Head";
@@ -4814,10 +4852,7 @@ import { jsx as jsx33 } from "react/jsx-runtime";
 var StyledFoot = styled28.tfoot``;
 var Foot = forwardRef18(
   ({ children, ...rest }, ref) => {
-    const footProps = {
-      ...rest
-    };
-    return /* @__PURE__ */ jsx33(StyledFoot, { ref, ...footProps, children });
+    return /* @__PURE__ */ jsx33(StyledFoot, { ref, ...rest, children });
   }
 );
 Foot.displayName = "Table.Foot";
@@ -4860,7 +4895,7 @@ var StyledRow = styled29.tr`
       font-weight: 600;
       text-align: left;
     `}
-  ${({ type, mode, selected, hoverable }) => type === "body" && css14`
+  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && css14`
       &:nth-of-type(even) {
         background-color: ${row3.body.even.backgroundColor};
         ${bodyRowStyles(mode, selected)}
@@ -4885,13 +4920,19 @@ var StyledRow = styled29.tr`
 // src/components/Table/Row.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Row = forwardRef19(
-  ({ type = "body", mode = "normal", children, ...rest }, ref) => {
-    const rowProps = {
-      type,
-      mode,
-      ...rest
-    };
-    return /* @__PURE__ */ jsx34(StyledRow, { ref, ...rowProps, children });
+  ({ type = "body", mode = "normal", hoverable, selected, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx34(
+      StyledRow,
+      {
+        type,
+        $mode: mode,
+        $hoverable: hoverable,
+        $selected: selected,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
 );
 Row.displayName = "Table.Row";
@@ -4974,7 +5015,9 @@ var descriptionListTokens = {
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var { term: term2, desc: desc2, list: list2 } = descriptionListTokens;
-var DList = styled30.dl`
+var DList = styled30.dl.withConfig({
+  shouldForwardProp: (prop) => prop !== "appearance" && prop !== "direction"
+})`
   margin: 0;
   *::selection {
     ${selection6}
@@ -5131,14 +5174,14 @@ var getLayoutStyle = (layout) => {
   }
 };
 var StyledCell = styled34.td`
-  ${({ type }) => type === "head" && css16`
+  ${({ $type: type }) => type === "head" && css16`
       background-color: ${cell3.head.backgroundColor};
     `}
 `;
 var InnerCell = styled34.div`
   display: flex;
   align-items: center;
-  ${({ layout }) => getLayoutStyle(layout)}
+  ${({ $layout: layout }) => getLayoutStyle(layout)}
 `;
 var getTableCellType = (type) => {
   switch (type) {
@@ -5153,15 +5196,7 @@ var Cell = forwardRef24(
   ({ children, type = "data", layout = "left", collapsibleProps, ...rest }, ref) => {
     const as = getTableCellType(type);
     const { isCollapsibleChild } = collapsibleProps != null ? collapsibleProps : {};
-    const cellProps = {
-      as,
-      type,
-      ...rest
-    };
-    const innerCellProps = {
-      layout
-    };
-    return isCollapsibleChild ? /* @__PURE__ */ jsx39(DescriptionListDesc, { children }) : /* @__PURE__ */ jsx39(StyledCell, { ref, ...cellProps, children: /* @__PURE__ */ jsx39(InnerCell, { ...innerCellProps, children }) });
+    return isCollapsibleChild ? /* @__PURE__ */ jsx39(DescriptionListDesc, { children }) : /* @__PURE__ */ jsx39(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ jsx39(InnerCell, { $layout: layout, children }) });
   }
 );
 Cell.displayName = "Table.Cell";
@@ -5190,10 +5225,12 @@ var DescriptionListCell = styled35(Cell)`
   }
 `;
 var CollapsibleRow = forwardRef25(
-  ({ type = "body", mode = "normal", children, ...rest }, ref) => {
+  ({ type = "body", mode = "normal", selected, hoverable, children, ...rest }, ref) => {
     const rowProps = {
-      type,
-      mode,
+      $type: type,
+      $mode: mode,
+      $selected: selected,
+      $hoverable: hoverable,
       ...rest
     };
     const { isCollapsed, headerValues, definingColumnIndex } = useCollapsibleTableContext();
@@ -5220,14 +5257,14 @@ var CollapsibleRow = forwardRef25(
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx40(StyledRow, { type: "body", children: /* @__PURE__ */ jsx40(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx40(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ jsx40(StyledRow, { type, children: /* @__PURE__ */ jsx40(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ jsx40(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
     const definingColumnCells = childrenArray.slice().filter((column, index) => definingColumnIndex.indexOf(index) > -1).sort((a, b) => {
       return definingColumnIndex.indexOf(childrenArray.indexOf(a)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
     });
     const headerRow = () => {
       if (type !== "head" || !isCollapsed)
         return null;
-      return /* @__PURE__ */ jsx40(StyledRow, { ref, ...rowProps, children: /* @__PURE__ */ jsxs25(Fragment8, { children: [
+      return /* @__PURE__ */ jsx40(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ jsxs25(Fragment8, { children: [
         definingColumnCells,
         /* @__PURE__ */ jsxs25(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
@@ -5243,6 +5280,7 @@ var CollapsibleRow = forwardRef25(
         StyledRow,
         {
           ref,
+          type,
           ...rowProps,
           "data-isopencollapsibleheader": !childrenCollapsed && true,
           children: [
@@ -5273,7 +5311,7 @@ var CollapsibleRow = forwardRef25(
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ jsx40(StyledRow, { ref, ...rowProps, children });
+    ] }) : /* @__PURE__ */ jsx40(StyledRow, { ref, type, ...rowProps, children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
@@ -5341,7 +5379,7 @@ import { useEffect as useEffect7, useRef as useRef7, useState as useState11 } fr
 import styled37, { css as css17 } from "styled-components";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var Wrapper3 = styled37.div`
-  ${({ overflowX }) => overflowX && css17`
+  ${({ $overflowX }) => $overflowX && css17`
       overflow-x: auto;
     `}
   ${scrollbarStyling.webkit}
@@ -5368,12 +5406,7 @@ var TableWrapper = ({ children, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  const wrapperProps = {
-    ref: wrapperRef,
-    overflowX,
-    ...rest
-  };
-  return /* @__PURE__ */ jsx42(Wrapper3, { ...wrapperProps, children });
+  return /* @__PURE__ */ jsx42(Wrapper3, { $overflowX: overflowX, ref: wrapperRef, ...rest, children });
 };
 TableWrapper.displayName = "Table.Wrapper";
 
@@ -5570,14 +5603,14 @@ var List2 = styled39.ol`
 var ListItem2 = styled39.li`
   display: inline-grid;
   align-content: center;
-  ${({ isHidden }) => isHidden && css18`
+  ${({ $isHidden }) => $isHidden && css18`
       visibility: hidden;
     `}
 `;
 var OuterContainer2 = styled39.div`
   display: flex;
   gap: ${outerContainer6.gap};
-  ${({ smallScreen }) => smallScreen ? css18`
+  ${({ $smallScreen }) => $smallScreen ? css18`
           flex-direction: column;
           align-items: center;
         ` : css18`
@@ -5685,17 +5718,17 @@ var Pagination = forwardRef29(
     };
     const containerProps = {
       ...getBaseHTMLProps22(id, className, htmlProps, rest),
-      smallScreen
+      $smallScreen: smallScreen
     };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
     const navigation4 = withPagination ? /* @__PURE__ */ jsx45(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs28(List2, { children: [
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       listItems,
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
     ] }) }) : null;
     const smallScreenNavigation = withPagination ? /* @__PURE__ */ jsx45(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ jsxs28(List2, { children: [
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ jsx45(
         Button,
         {
           purpose: "secondary",
@@ -5708,7 +5741,7 @@ var Pagination = forwardRef29(
           "aria-label": "G\xE5 til f\xF8rste siden"
         }
       ) }),
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       /* @__PURE__ */ jsx45(ListItem2, { children: /* @__PURE__ */ jsx45(
         Button,
         {
@@ -5719,8 +5752,8 @@ var Pagination = forwardRef29(
           children: activePage
         }
       ) }),
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
-      /* @__PURE__ */ jsx45(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
+      /* @__PURE__ */ jsx45(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ jsx45(
         Button,
         {
           purpose: "secondary",
@@ -5842,13 +5875,13 @@ var StyledList = styled40.ul`
     ${selection7}
   }
 
-  ${({ typographyType: typographyType7 }) => typographyType7 === "inherit" ? css19`
+  ${({ $typographyType }) => $typographyType === "inherit" ? css19`
           font: inherit;
         ` : css19`
-          ${getFontStyling10(typographyType7)}
+          ${getFontStyling10($typographyType)}
         `}
 
-  ${({ listType }) => listType === "unordered" ? css19`
+  ${({ $listType }) => $listType === "unordered" ? css19`
           padding-left: ${list8.ul.paddingLeft};
           list-style: none;
           li {
@@ -5895,14 +5928,17 @@ var List3 = forwardRef30(
       ...rest
     } = props;
     const as = listType === "ordered" ? "ol" : "ul";
-    const listProps = {
-      ...getBaseHTMLProps23(id, className, htmlProps, rest),
-      listType,
-      typographyType: typographyType7,
-      as,
-      ref
-    };
-    return /* @__PURE__ */ jsx46(StyledList, { ...listProps, children });
+    return /* @__PURE__ */ jsx46(
+      StyledList,
+      {
+        ...getBaseHTMLProps23(id, className, htmlProps, rest),
+        as,
+        ref,
+        $listType: listType,
+        $typographyType: typographyType7,
+        children
+      }
+    );
   }
 );
 List3.displayName = "List";
@@ -5975,7 +6011,9 @@ import {
   focusVisibleWithBorder
 } from "@norges-domstoler/dds-form";
 import { jsx as jsx48 } from "react/jsx-runtime";
-var Container6 = styled42.div`
+var Container6 = styled42.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "color" && prop !== "cardType"
+})`
   border: ${cardTokens.base.border};
   ${getFontStyling11(defaultTypographyType3)};
   &::selection,
@@ -6001,12 +6039,12 @@ var Container6 = styled42.div`
             ${focusVisibleWithBorder}
           }
         ` : cardType === "expandable" ? css20`
-          width: 100%;
-          box-sizing: border-box;
-          &:not(:first-of-type) {
-            border-top: none;
-          }
-        ` : ""}
+            width: 100%;
+            box-sizing: border-box;
+            &:not(:first-of-type) {
+              border-top: none;
+            }
+          ` : ""}
 `;
 var Card = (props) => {
   const {
@@ -6170,7 +6208,9 @@ function getTypographyType(props) {
   const { typographyType: typographyType7 } = props;
   return typographyType7 != null ? typographyType7 : typographyTypes4.header;
 }
-var HeaderContainer = styled44.div`
+var HeaderContainer = styled44.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "padding" && prop !== "typographyType" && prop !== "bold"
+})`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -6300,7 +6340,11 @@ function getPadding(props) {
   const { padding } = props;
   return padding != null ? padding : cardAccordionTokens.body.padding;
 }
-var Body2 = styled45.div`
+var Body2 = styled45.div.withConfig({
+  shouldForwardProp: (prop) => {
+    return prop !== "animate" && prop !== "height" && prop !== "isExpanded";
+  }
+})`
   @media (prefers-reduced-motion: no-preference) {
     ${({ animate }) => animate && expandingAnimation}
   }
@@ -6308,7 +6352,18 @@ var Body2 = styled45.div`
   height: ${({ height, isExpanded }) => isExpanded ? height : 0}px;
   overflow: hidden;
 `;
-var BodyContainer = styled45.div`
+var BodyContainer = styled45.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "isExpanded",
+      "maxHeight",
+      "animate",
+      "paddingTop",
+      "padding"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   padding: ${getPadding};
 
   ${({ paddingTop }) => paddingTop && css22`
@@ -6457,7 +6512,7 @@ var BannerWrapper = styled46.div`
   align-items: center;
   border-bottom: ${banner2.borderBottom};
   padding-right: ${banner2.paddingRight};
-  ${({ hasContextMenu }) => hasContextMenu && css23`
+  ${({ $hasContextMenu }) => $hasContextMenu && css23`
       padding-right: ${banner2.hasContextMenu.paddingRight};
     `}
 `;
@@ -6502,7 +6557,9 @@ import { getFontStyling as getFontStyling14 } from "@norges-domstoler/dds-typogr
 import { focusVisible as focusVisible6 } from "@norges-domstoler/dds-form";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var { navLink: navLink2 } = internalHeaderTokens;
-var Link2 = styled47.a`
+var Link2 = styled47.a.withConfig({
+  shouldForwardProp: (prop) => prop !== "isCurrent"
+})`
   display: flex;
   align-items: center;
   height: 100%;
@@ -6607,7 +6664,7 @@ var InternalHeader = (props) => {
   }) }) }) : null;
   const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
   return /* @__PURE__ */ jsxs30(OuterContainer3, { ...getBaseHTMLProps28(id, className, htmlProps, rest), children: [
-    /* @__PURE__ */ jsx54(BannerWrapper, { hasContextMenu, children: /* @__PURE__ */ jsxs30(BannerLeftWrapper, { children: [
+    /* @__PURE__ */ jsx54(BannerWrapper, { $hasContextMenu: hasContextMenu, children: /* @__PURE__ */ jsxs30(BannerLeftWrapper, { children: [
       /* @__PURE__ */ jsx54(LovisaWrapper, { children: /* @__PURE__ */ jsx54(Typography12, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }) }),
       /* @__PURE__ */ jsx54(ApplicationNameWrapper, { children: /* @__PURE__ */ jsx54(Typography12, { typographyType: "bodySans02", as: "span", children: applicationDesc }) })
     ] }) }),
@@ -6869,7 +6926,7 @@ var { wrapper: wrapper2, link: link4 } = skipToContentTokens;
 var Wrapper5 = styled50.div`
   box-sizing: border-box;
   position: absolute;
-  top: ${({ top }) => top};
+  top: ${({ $top: top }) => top};
   text-align: center;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
@@ -6923,12 +6980,15 @@ var SkipToContent = forwardRef38(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const wrapperProps = {
-      top,
-      className: joinClassNames3(className, htmlPropsClassName),
-      style
-    };
-    return /* @__PURE__ */ jsx56(Wrapper5, { ...wrapperProps, children: /* @__PURE__ */ jsx56(Link3, { ...getBaseHTMLProps29(id, restHtmlProps, rest), ref, children: text }) });
+    return /* @__PURE__ */ jsx56(
+      Wrapper5,
+      {
+        $top: top,
+        className: joinClassNames3(className, htmlPropsClassName),
+        style,
+        children: /* @__PURE__ */ jsx56(Link3, { ...getBaseHTMLProps29(id, restHtmlProps, rest), ref, children: text })
+      }
+    );
   }
 );
 SkipToContent.displayName = "SkipToContent";
@@ -7180,7 +7240,9 @@ import { focusVisible as focusVisible7 } from "@norges-domstoler/dds-form";
 import styled52 from "styled-components";
 import { ddsBaseTokens as ddsBaseTokens27 } from "@norges-domstoler/dds-design-tokens";
 import { changeRGBAAlpha } from "@norges-domstoler/dds-core";
-var Backdrop = styled52.div`
+var Backdrop = styled52.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "isOpen"
+})`
   position: fixed;
   display: flex;
   align-items: center;
@@ -7212,10 +7274,13 @@ function handleElementWithBackdropMount(container16) {
   }
 }
 function handleElementWithBackdropUnmount(container16) {
-  const scrollY = parseInt(document.body.style.top) || 0;
+  const scrollY = parseInt(document.body.style.top);
   container16.style.removeProperty("overflow-y");
   container16.style.removeProperty("position");
   container16.style.removeProperty("top");
+  if (isNaN(scrollY)) {
+    return;
+  }
   window.scrollTo(0, scrollY * -1);
 }
 
@@ -7281,40 +7346,38 @@ var Modal = forwardRef40((props, ref) => {
   useOnClickOutside3(modalRef.current, () => handleClose());
   useOnKeyDown4(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = useMountTransition(isOpen, 200);
-  const backdropProps = {
-    isOpen: hasTransitionedIn && isOpen
-  };
-  const containerProps = {
-    ...getBaseHTMLProps31(id, className, htmlProps, rest),
-    ref: combinedRef,
-    role: "dialog",
-    "aria-modal": true,
-    "aria-hidden": !isOpen,
-    tabIndex: -1,
-    "aria-labelledby": headerId,
-    id: modalId
-  };
-  const headerContainerProps = {
-    id: headerId
-  };
   return isOpen || hasTransitionedIn ? createPortal(
-    /* @__PURE__ */ jsx58(Backdrop, { ...backdropProps, children: /* @__PURE__ */ jsxs33(Container8, { ...containerProps, elevation: 4, children: [
-      /* @__PURE__ */ jsxs33(ContentContainer2, { children: [
-        header3 && /* @__PURE__ */ jsx58(HeaderContainer2, { ...headerContainerProps, children: typeof header3 === "string" ? /* @__PURE__ */ jsx58(Typography13, { typographyType: "headingSans03", children: header3 }) : header3 }),
-        children
-      ] }),
-      onClose && /* @__PURE__ */ jsx58(
-        StyledButton2,
-        {
-          size: "small",
-          appearance: "borderless",
-          purpose: "secondary",
-          icon: CloseIcon4,
-          onClick: handleClose,
-          "aria-label": "Lukk dialog"
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ jsx58(Backdrop, { isOpen: hasTransitionedIn && isOpen, children: /* @__PURE__ */ jsxs33(
+      Container8,
+      {
+        ...getBaseHTMLProps31(id, className, htmlProps, rest),
+        ref: combinedRef,
+        role: "dialog",
+        "aria-modal": true,
+        "aria-hidden": !isOpen,
+        tabIndex: -1,
+        "aria-labelledby": headerId,
+        id: modalId,
+        elevation: 4,
+        children: [
+          /* @__PURE__ */ jsxs33(ContentContainer2, { children: [
+            header3 && /* @__PURE__ */ jsx58(HeaderContainer2, { id: headerId, children: typeof header3 === "string" ? /* @__PURE__ */ jsx58(Typography13, { typographyType: "headingSans03", children: header3 }) : header3 }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ jsx58(
+            StyledButton2,
+            {
+              size: "small",
+              appearance: "borderless",
+              purpose: "secondary",
+              icon: CloseIcon4,
+              onClick: handleClose,
+              "aria-label": "Lukk dialog"
+            }
+          )
+        ]
+      }
+    ) }),
     parentElement
   ) : null;
 });
@@ -7405,7 +7468,17 @@ var getMaxWidth = (size) => {
   else
     return "400px";
 };
-var Container11 = styled56(Paper4)`
+var Container11 = styled56(Paper4).withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "placement",
+      "isOpen",
+      "widthProps",
+      "size"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   position: fixed;
   top: 0;
   height: 100%;
@@ -7430,9 +7503,9 @@ var Container11 = styled56(Paper4)`
           left: 0;
           transform: ${isOpen ? "translate(0px)" : "translateX(-100%)"};
         ` : placement === "right" ? css26`
-          right: 0;
-          transform: ${isOpen ? "translate(0px)" : "translateX(100%)"};
-        ` : ""}
+            right: 0;
+            transform: ${isOpen ? "translate(0px)" : "translateX(100%)"};
+          ` : ""}
 
   @media (prefers-reduced-motion: no-preference) {
     transition: transform 0.5s;
@@ -7626,7 +7699,7 @@ var { spacing: Spacing } = ddsBaseTokens30;
 var { wrapper: wrapper6, content: content4, closeButton: closeButton2, title: title2 } = popoverTokens;
 var Wrapper6 = styled57(Paper5)`
   opacity: 0;
-  ${({ hasTransitionedIn, isOpen }) => hasTransitionedIn && visibilityTransition4(hasTransitionedIn && isOpen)}
+  ${({ $hasTransitionedIn, $isOpen }) => $hasTransitionedIn && visibilityTransition4($hasTransitionedIn && $isOpen)}
   position: absolute;
   width: fit-content;
   z-index: 100;
@@ -7635,20 +7708,20 @@ var Wrapper6 = styled57(Paper5)`
   &:focus-visible {
     ${focusVisible9}
   }
-  ${({ sizeProps }) => sizeProps && css27`
-      width: ${sizeProps.width};
-      height: ${sizeProps.height};
-      min-width: ${sizeProps.minWidth};
-      min-height: ${sizeProps.minHeight};
-      max-width: ${sizeProps.maxWidth};
-      max-height: ${sizeProps.maxHeight};
+  ${({ $sizeProps }) => $sizeProps && css27`
+      width: ${$sizeProps.width};
+      height: ${$sizeProps.height};
+      min-width: ${$sizeProps.minWidth};
+      min-height: ${$sizeProps.minHeight};
+      max-width: ${$sizeProps.maxWidth};
+      max-height: ${$sizeProps.maxHeight};
     `}
 `;
 var TitleContainer = styled57.div`
   margin-right: ${title2.marginRight};
 `;
 var ContentContainer4 = styled57.div`
-  ${({ withCloseButton, hasTitle }) => withCloseButton && !hasTitle && css27`
+  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && css27`
       margin-top: ${content4.noTitle.marginTop};
     `}
 `;
@@ -7699,30 +7772,42 @@ var Popover = forwardRef44(
         onClose && onClose();
     });
     const hasTransitionedIn = useMountTransition3(isOpen, 400);
-    const wrapperProps = {
-      ...getBaseHTMLProps34(id, className, htmlProps, rest),
-      ref: multiRef,
-      isOpen,
-      hasTransitionedIn,
-      tabIndex: -1,
-      style: { ...htmlProps.style, ...styles.floating },
-      role: "dialog"
-    };
-    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs36(Wrapper6, { ...wrapperProps, elevation: 3, border: "light", children: [
-      title3 && /* @__PURE__ */ jsx62(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ jsx62(Typography15, { typographyType: "headingSans02", children: title3 }) : title3 }),
-      /* @__PURE__ */ jsx62(ContentContainer4, { hasTitle: !!title3, withCloseButton, children }),
-      withCloseButton && /* @__PURE__ */ jsx62(
-        StyledButton4,
-        {
-          icon: CloseIcon6,
-          appearance: "borderless",
-          purpose: "secondary",
-          size: "small",
-          onClick: onCloseButtonClick,
-          "aria-label": "Lukk"
-        }
-      )
-    ] }) : null;
+    return isOpen || hasTransitionedIn ? /* @__PURE__ */ jsxs36(
+      Wrapper6,
+      {
+        ...getBaseHTMLProps34(id, className, htmlProps, rest),
+        ref: multiRef,
+        $isOpen: isOpen,
+        $hasTransitionedIn: hasTransitionedIn,
+        tabIndex: -1,
+        style: { ...htmlProps.style, ...styles.floating },
+        role: "dialog",
+        elevation: 3,
+        border: "light",
+        children: [
+          title3 && /* @__PURE__ */ jsx62(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ jsx62(Typography15, { typographyType: "headingSans02", children: title3 }) : title3 }),
+          /* @__PURE__ */ jsx62(
+            ContentContainer4,
+            {
+              $hasTitle: !!title3,
+              $withCloseButton: withCloseButton,
+              children
+            }
+          ),
+          withCloseButton && /* @__PURE__ */ jsx62(
+            StyledButton4,
+            {
+              icon: CloseIcon6,
+              appearance: "borderless",
+              purpose: "secondary",
+              size: "small",
+              onClick: onCloseButtonClick,
+              "aria-label": "Lukk"
+            }
+          )
+        ]
+      }
+    ) : null;
   }
 );
 Popover.displayName = "Popover";
@@ -7856,7 +7941,7 @@ var Content2 = styled58.span`
       ${focusVisibleTransitionValue6};
   }
 
-  ${({ hasIcon }) => hasIcon && css28`
+  ${({ $hasIcon }) => $hasIcon && css28`
       gap: ${toggleButton2.gap};
     `}
 
@@ -7890,17 +7975,16 @@ var ToggleButton = forwardRef45(
   ({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
     const generatedId = useId19();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
-    const inputProps = {
-      ...getBaseHTMLProps35(uniqueId, className, htmlProps, rest),
-      ref,
-      type: "checkbox"
-    };
-    const containerProps = {
-      htmlFor: uniqueId
-    };
-    return /* @__PURE__ */ jsxs37(Container12, { ...containerProps, children: [
-      /* @__PURE__ */ jsx64(HiddenInput3, { ...inputProps }),
-      /* @__PURE__ */ jsxs37(Content2, { hasIcon: !!icon12, children: [
+    return /* @__PURE__ */ jsxs37(Container12, { htmlFor: uniqueId, children: [
+      /* @__PURE__ */ jsx64(
+        HiddenInput3,
+        {
+          ...getBaseHTMLProps35(uniqueId, className, htmlProps, rest),
+          ref,
+          type: "checkbox"
+        }
+      ),
+      /* @__PURE__ */ jsxs37(Content2, { $hasIcon: !!icon12, children: [
         icon12 && /* @__PURE__ */ jsx64(Icon15, { icon: icon12, iconSize: "inherit" }),
         " ",
         label3
@@ -7997,8 +8081,8 @@ var useTabsContext = () => useContext6(TabsContext);
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx66 } from "react/jsx-runtime";
 var Container14 = styled60.div`
-  ${({ width }) => width && css30`
-      width: ${width};
+  ${({ $width }) => $width && css30`
+      width: ${$width};
     `};
 `;
 var Tabs = forwardRef46((props, ref) => {
@@ -8045,7 +8129,7 @@ var Tabs = forwardRef46((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ jsx66(Container14, { ...containerProps, width, children })
+      children: /* @__PURE__ */ jsx66(Container14, { ...containerProps, $width: width, children })
     }
   );
 });
@@ -8138,12 +8222,12 @@ var Button2 = styled61.button`
       ${focusVisibleTransitionValue7};
   }
 
-  ${({ direction }) => css31`
-    flex-direction: ${direction};
-    gap: ${tab2[direction].gap};
+  ${({ $direction }) => css31`
+    flex-direction: ${$direction};
+    gap: ${tab2[$direction].gap};
   `};
 
-  ${({ active }) => active && css31`
+  ${({ $active }) => $active && css31`
       background-color: ${tab2.active.backgroundColor};
       border-color: ${tab2.active.borderColor};
       color: ${tab2.active.color};
@@ -8204,21 +8288,24 @@ var Tab = forwardRef47((props, ref) => {
     handleSelect();
     onKeyDown && onKeyDown(e);
   };
-  const buttonProps = {
-    ...getBaseHTMLProps38(id, className, htmlProps, rest),
-    ref: combinedRef,
-    "aria-selected": active,
-    role: "tab",
-    active,
-    direction: tabContentDirection,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
-    tabIndex: focus ? 0 : -1
-  };
-  return /* @__PURE__ */ jsxs39(Button2, { ...buttonProps, children: [
-    icon12 && /* @__PURE__ */ jsx67(Icon16, { icon: icon12, iconSize: "inherit" }),
-    /* @__PURE__ */ jsx67("span", { children })
-  ] });
+  return /* @__PURE__ */ jsxs39(
+    Button2,
+    {
+      ...getBaseHTMLProps38(id, className, htmlProps, rest),
+      ref: combinedRef,
+      "aria-selected": active,
+      role: "tab",
+      $active: active,
+      $direction: tabContentDirection,
+      onClick: handleOnClick,
+      onKeyDown: handleOnKeyDown,
+      tabIndex: focus ? 0 : -1,
+      children: [
+        icon12 && /* @__PURE__ */ jsx67(Icon16, { icon: icon12, iconSize: "inherit" }),
+        /* @__PURE__ */ jsx67("span", { children })
+      ]
+    }
+  );
 });
 Tab.displayName = "Tab";
 
@@ -8332,7 +8419,7 @@ var Panel = styled63.div`
     transition: ${focusVisibleTransitionValue9};
   }
 
-  ${({ active }) => !active && css32`
+  ${({ $active }) => !$active && css32`
       display: none;
     `}
   &:focus-visible {
@@ -8341,14 +8428,17 @@ var Panel = styled63.div`
 `;
 var TabPanel = forwardRef49(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    const panelProps = {
-      ...getBaseHTMLProps39(id, className, htmlProps, rest),
-      ref,
-      tabIndex: 0,
-      role: "tabpanel",
-      active
-    };
-    return /* @__PURE__ */ jsx69(Panel, { ...panelProps, children });
+    return /* @__PURE__ */ jsx69(
+      Panel,
+      {
+        ...getBaseHTMLProps39(id, className, htmlProps, rest),
+        ref,
+        tabIndex: 0,
+        role: "tabpanel",
+        $active: active,
+        children
+      }
+    );
   }
 );
 TabPanel.displayName = "TabPanel";
@@ -8425,9 +8515,9 @@ var Wrapper7 = styled64(TextOverflowEllipsisWrapper)`
   border-radius: ${wrapper8.borderRadius};
   padding: ${wrapper8.padding};
   ${getFontStyling19(typographyType5)}
-  ${({ purpose }) => css33`
-    background-color: ${wrapper8.purpose[purpose].backgroundColor};
-    border-color: ${wrapper8.purpose[purpose].borderColor};
+  ${({ $purpose }) => css33`
+    background-color: ${wrapper8.purpose[$purpose].backgroundColor};
+    border-color: ${wrapper8.purpose[$purpose].borderColor};
   `}
 `;
 var Tag = forwardRef51((props, ref) => {
@@ -8444,7 +8534,7 @@ var Tag = forwardRef51((props, ref) => {
     {
       ...getBaseHTMLProps40(id, className, htmlProps, rest),
       ref,
-      purpose,
+      $purpose: purpose,
       children: /* @__PURE__ */ jsx71(TextOverflowEllipsisInner, { children: text })
     }
   );
@@ -8681,8 +8771,8 @@ var OuterContainer4 = styled67.div`
   *::selection {
     ${selection13}
   }
-  ${({ width }) => width && css34`
-      width: ${width};
+  ${({ $width }) => $width && css34`
+      width: ${$width};
     `}
 `;
 var Bar2 = styled67.div`
@@ -8727,7 +8817,7 @@ var ToggleBar = (props) => {
           ...getBaseHTMLProps42(id, className, htmlProps, rest),
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
-          width,
+          $width: width,
           children: [
             label3 && /* @__PURE__ */ jsx74(Typography17, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
             /* @__PURE__ */ jsx74(Bar2, { children })
@@ -8773,14 +8863,14 @@ var Content3 = styled68.span`
   }
   background-color: ${content6.base.backgroundColor};
 
-  ${({ size, justIcon }) => css35`
-    ${justIcon ? css35`
-          font-size: ${content6.size[size].justIcon.fontSize};
-          padding: ${content6.size[size].justIcon.padding};
+  ${({ $size, $justIcon }) => css35`
+    ${$justIcon ? css35`
+          font-size: ${content6.size[$size].justIcon.fontSize};
+          padding: ${content6.size[$size].justIcon.padding};
         ` : css35`
-          gap: ${content6.size[size].withText.gap};
-          padding: ${content6.size[size].withText.padding};
-          ${getFontStyling21(typographyTypes6[size])}
+          gap: ${content6.size[$size].withText.gap};
+          padding: ${content6.size[$size].withText.padding};
+          ${getFontStyling21(typographyTypes6[$size])}
         `}
   `}
 `;
@@ -8869,7 +8959,7 @@ var ToggleRadio = forwardRef54(
           checked: calculateChecked(value, group4, checked)
         }
       ),
-      /* @__PURE__ */ jsxs42(Content3, { size: group4.size, justIcon: !!icon12 && !label3, children: [
+      /* @__PURE__ */ jsxs42(Content3, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
         icon12 && /* @__PURE__ */ jsx75(Icon17, { icon: icon12, iconSize: "inherit" }),
         label3 && /* @__PURE__ */ jsx75("span", { children: label3 })
       ] })
@@ -9006,7 +9096,16 @@ var getHooksGridStyling = (screenSize, maxWidth, rowGap) => {
     maxWidth: maxWidth && maxWidth[getLiteralScreenSize(screenSize)] && maxWidth[getLiteralScreenSize(screenSize)]
   };
 };
-var StyledGrid = styled69.div`
+var StyledGrid = styled69.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "maxWidth",
+      "rowGap",
+      "screenSize"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   display: grid;
   ${({ maxWidth }) => css36`
     max-width: ${maxWidth};
@@ -9050,7 +9149,17 @@ var isRelativeGridColumn = (type) => {
 var isGridColumn = (type) => {
   return type.xs !== void 0 || type.sm !== void 0 || type.md !== void 0 || type.lg !== void 0 || type.xl !== void 0;
 };
-var StyledGridChild = styled70.div`
+var StyledGridChild = styled70.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "columnsOccupied",
+      "justifySelf",
+      "gridRow",
+      "screenSize"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   grid-column: ${({ screenSize, columnsOccupied }) => columnsOccupied === "all" ? "1 / -1" : isGridColumn(columnsOccupied) ? columnsOccupied[getLiteralScreenSize2(screenSize)] : isRelativeGridColumn(columnsOccupied) ? gridTokens[screenSize].columns[columnsOccupied].gridColumn : ""};
 
   justify-self: ${({ justifySelf }) => justifySelf && justifySelf};
@@ -9218,7 +9327,7 @@ var ItemNumber = styled71.div`
   ${getFontStyling22(typographyTypes7.number)}
   font-weight: 600;
 
-  ${({ state }) => {
+  ${({ $state: state }) => {
   switch (state) {
     case "activeIncomplete":
       return css37`
@@ -9259,7 +9368,7 @@ var ItemText = styled71.div`
   text-decoration: ${itemText2.textDecoration};
   transition: text-decoration-color 0.2s;
 
-  ${({ state }) => {
+  ${({ $state: state }) => {
   switch (state) {
     case "activeCompleted":
     case "activeIncomplete":
@@ -9298,7 +9407,7 @@ var ItemContentWrapper = styled71.button`
     ${focusVisible15}
   }
 
-  ${({ state }) => state !== "disabled" && css37`
+  ${({ $state: state }) => state !== "disabled" && css37`
       cursor: pointer;
     `}
 `;
@@ -9314,7 +9423,7 @@ var ProgressTrackerItem = (props) => {
   const { activeStep, handleStepChange } = useProgressTrackerContext();
   const active = activeStep === index;
   const styleProps = {
-    state: toItemState(active, completed, disabled)
+    $state: toItemState(active, completed, disabled)
   };
   const stepNumberContent = useMemo(() => {
     if (completed) {
@@ -9541,7 +9650,9 @@ var inlineEditTokens = {
 import { StatefulInput as StatefulInput4 } from "@norges-domstoler/dds-form";
 var { inlineEdit: inlineEdit2, iconWrapper: iconWrapper2 } = inlineEditTokens;
 var defaultWidth4 = "140px";
-var StyledInlineInput = styled73(StatefulInput4)`
+var StyledInlineInput = styled73(StatefulInput4).withConfig({
+  shouldForwardProp: (prop) => prop !== "isEditing" && prop !== "hideIcon"
+})`
   border-color: transparent;
   background-color: ${inlineEdit2.backgroundColor};
   padding: ${inlineEdit2.padding};
@@ -10000,7 +10111,18 @@ import {
   getBaseHTMLProps as getBaseHTMLProps47
 } from "@norges-domstoler/dds-core";
 import { jsx as jsx87 } from "react/jsx-runtime";
-var Stack = styled76.div`
+var Stack = styled76.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "align",
+      "direction",
+      "gap",
+      "justify",
+      "padding"
+    ];
+    return !styleOnlyProps.some((p) => p === prop);
+  }
+})`
   display: flex;
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
   align-items: ${(props) => props.align};
@@ -10450,14 +10572,14 @@ var Wrapper8 = styled79.div`
 `;
 var Root = styled79.div`
   box-sizing: border-box;
-  border-width: ${({ hasRootErrors }) => hasRootErrors ? "2px" : "1px"};
+  border-width: ${({ $hasRootErrors: hasRootErrors }) => hasRootErrors ? "2px" : "1px"};
   border-style: dashed;
-  border-color: ${({ isDragActive, hasRootErrors }) => isDragActive ? rootTokens.dragActive.borderColor : hasRootErrors ? rootTokens.borderColorError : rootTokens.borderColor};
-  padding: ${({ hasRootErrors }) => hasRootErrors ? `calc(${rootTokens.paddingLeftRightTop} - 1px) calc(${rootTokens.paddingLeftRightTop} - 1px) ${rootTokens.paddingBottom}` : `${rootTokens.paddingLeftRightTop} ${rootTokens.paddingLeftRightTop} ${rootTokens.paddingBottom}`};
+  border-color: ${({ $isDragActive, $hasRootErrors }) => $isDragActive ? rootTokens.dragActive.borderColor : $hasRootErrors ? rootTokens.borderColorError : rootTokens.borderColor};
+  padding: ${({ $hasRootErrors }) => $hasRootErrors ? `calc(${rootTokens.paddingLeftRightTop} - 1px) calc(${rootTokens.paddingLeftRightTop} - 1px) ${rootTokens.paddingBottom}` : `${rootTokens.paddingLeftRightTop} ${rootTokens.paddingLeftRightTop} ${rootTokens.paddingBottom}`};
   display: flex;
   flex-direction: column;
   gap: ${rootTokens.gap};
-  background-color: ${({ isDragActive }) => isDragActive ? rootTokens.dragActive.backgroundColor : rootTokens.backgroundColor};
+  background-color: ${({ $isDragActive }) => $isDragActive ? rootTokens.dragActive.backgroundColor : rootTokens.backgroundColor};
 `;
 var FileUploaderInput = styled79.input``;
 var FileListElement = styled79.ul`
@@ -10525,8 +10647,8 @@ var FileUploader = (props) => {
       Root,
       {
         ...getRootProps(),
-        isDragActive,
-        hasRootErrors,
+        $isDragActive: isDragActive,
+        $hasRootErrors: hasRootErrors,
         children: [
           /* @__PURE__ */ jsx90(FileUploaderInput, { ...getInputProps() }),
           "Dra og slipp filer her eller",
@@ -10635,35 +10757,22 @@ import { useEffect as useEffect19, useState as useState27 } from "react";
 import { Paragraph as Paragraph2 } from "@norges-domstoler/dds-typography";
 
 // src/components/Feedback/RatingComponent.tsx
-import styled83, { css as css41 } from "styled-components";
-import { ddsBaseTokens as ddsBaseTokens46 } from "@norges-domstoler/dds-design-tokens";
-import { Thumbup, Thumbdown } from "@norges-domstoler/dds-icons";
-import { Label as Label9 } from "@norges-domstoler/dds-typography";
-
-// src/components/Feedback/FlexContainer.tsx
 import styled82, { css as css40 } from "styled-components";
 import { ddsBaseTokens as ddsBaseTokens45 } from "@norges-domstoler/dds-design-tokens";
-var FlexContainer = styled82.div`
-  display: flex;
-  ${({ flexDirection }) => css40`
-    flex-direction: ${flexDirection};
-    gap: ${ddsBaseTokens45.spacing.SizesDdsSpacingLocalX1};
-  `};
-`;
-
-// src/components/Feedback/RatingComponent.tsx
+import { Thumbup, Thumbdown } from "@norges-domstoler/dds-icons";
+import { Label as Label9 } from "@norges-domstoler/dds-typography";
 import { jsx as jsx93, jsxs as jsxs54 } from "react/jsx-runtime";
-var RatingContainer = styled83.div`
+var RatingContainer = styled82.div`
   display: flex;
-  gap: ${ddsBaseTokens46.spacing.SizesDdsSpacingLocalX1};
-  ${({ layout }) => css41`
-    flex-direction: ${layout === "horizontal" ? "row" : "column"};
-    align-items: ${layout === "horizontal" ? "center" : "start"};
+  gap: ${ddsBaseTokens45.spacing.SizesDdsSpacingLocalX1};
+  ${({ $layout }) => css40`
+    flex-direction: ${$layout === "horizontal" ? "row" : "column"};
+    align-items: ${$layout === "horizontal" ? "center" : "start"};
   `}
 `;
-var RatingButton = styled83(Button)`
+var RatingButton = styled82(Button)`
   padding: 0px;
-  color: ${ddsBaseTokens46.colors.DdsColorNeutralsGray7};
+  color: ${ddsBaseTokens45.colors.DdsColorNeutralsGray7};
 `;
 var RatingComponent = ({
   layout,
@@ -10673,9 +10782,9 @@ var RatingComponent = ({
   thumbDownTooltip,
   handleRatingChange
 }) => {
-  return /* @__PURE__ */ jsxs54(RatingContainer, { layout, children: [
+  return /* @__PURE__ */ jsxs54(RatingContainer, { $layout: layout, children: [
     /* @__PURE__ */ jsx93(Label9, { children: ratingLabel }),
-    loading ? /* @__PURE__ */ jsx93(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs54(FlexContainer, { flexDirection: "row", children: [
+    loading ? /* @__PURE__ */ jsx93(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs54(HStack, { gap: "layout-x1", children: [
       /* @__PURE__ */ jsx93(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ jsx93(
         RatingButton,
         {
@@ -10701,8 +10810,8 @@ var RatingComponent = ({
 };
 
 // src/components/Feedback/CommentComponent.tsx
-import styled84 from "styled-components";
-import { ddsBaseTokens as ddsBaseTokens47 } from "@norges-domstoler/dds-design-tokens";
+import styled83 from "styled-components";
+import { ddsBaseTokens as ddsBaseTokens46 } from "@norges-domstoler/dds-design-tokens";
 import {
   ThumbupFilled,
   ThumbdownFilled,
@@ -10710,10 +10819,10 @@ import {
 } from "@norges-domstoler/dds-icons";
 import { Paragraph } from "@norges-domstoler/dds-typography";
 import { jsx as jsx94, jsxs as jsxs55 } from "react/jsx-runtime";
-var IconLabelSpan = styled84.span`
+var IconLabelSpan = styled83.span`
   display: inline-flex;
   align-items: center;
-  gap: ${ddsBaseTokens47.spacing.SizesDdsSpacingLocalX05};
+  gap: ${ddsBaseTokens46.spacing.SizesDdsSpacingLocalX05};
 `;
 var CommentComponent = ({
   rating,
@@ -10725,13 +10834,13 @@ var CommentComponent = ({
   handleSubmit,
   handleFeedbackTextChange
 }) => {
-  return /* @__PURE__ */ jsxs55(FlexContainer, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs55(VStack, { gap: "layout-x1", children: [
     /* @__PURE__ */ jsxs55(IconLabelSpan, { children: [
       /* @__PURE__ */ jsx94(
         Icon22,
         {
           icon: rating === "positive" ? ThumbupFilled : ThumbdownFilled,
-          color: ddsBaseTokens47.colors.DdsColorInteractiveBase
+          color: ddsBaseTokens46.colors.DdsColorInteractiveBase
         }
       ),
       /* @__PURE__ */ jsxs55(Paragraph, { children: [