npm - @norges-domstoler/dds-components - Versions diffs - 13.10.1 → 13.10.2 - Mend

@norges-domstoler/dds-components 13.10.1 → 13.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -390,7 +390,9 @@ var fontPackage = (small) => {
   }
   return navTokens2.logoAndVersion.logo;
 };
-var NavigationLogo = import_styled_components3.default.a`
+var NavigationLogo = import_styled_components3.default.a.withConfig({
+  shouldForwardProp: (prop) => prop !== "small"
+})`
   font-size: ${({ small }) => fontPackage(small).fontSize};
   font-style: ${({ small }) => fontPackage(small).fontStyle};
   font-family: ${({ small }) => fontPackage(small).fontFamily};
@@ -756,11 +758,11 @@ var import_dds_core4 = require("@norges-domstoler/dds-core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var StyledSpinner = import_styled_components4.default.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;
@@ -773,12 +775,12 @@ var StyledSpinner = import_styled_components4.default.svg`
   }
 `;
 var Circle = import_styled_components4.default.circle`
-  stroke: ${({ color }) => color && (0, import_dds_core3.getTextColor)(color)};
+  stroke: ${({ $color }) => $color && (0, import_dds_core3.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% {
@@ -813,12 +815,8 @@ function Spinner(props) {
   const uniqueId = `${generatedId}-spinnerTitle`;
   const spinnerProps = {
     ...(0, import_dds_core4.getBaseHTMLProps)(id, className, htmlProps, rest),
-    outerAnimationDelay,
-    size
-  };
-  const circleProps = {
-    innerAnimationDelay,
-    color
+    $outerAnimationDelay: outerAnimationDelay,
+    $size: size
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     StyledSpinner,
@@ -832,7 +830,8 @@ function Spinner(props) {
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Circle,
           {
-            ...circleProps,
+            $innerAnimationDelay: innerAnimationDelay,
+            $color: color,
             cx: "25",
             cy: "25",
             r: "20",
@@ -902,7 +901,21 @@ var getAppearanceAndPurposeStyling = (appearance, purpose) => {
       `;
   }
 };
-var ButtonWrapper = import_styled_components5.default.button`
+var ButtonWrapper = import_styled_components5.default.button.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "appearance",
+      "purpose",
+      "size",
+      "fullWidth",
+      "hasIcon",
+      "hasLabel",
+      "isLoading",
+      "iconPosition"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   ${import_dds_core5.normalizeButton}
   border: ${base.border};
   user-select: text;
@@ -957,10 +970,10 @@ var ButtonWrapper = import_styled_components5.default.button`
   ${({ fullWidth, hasIcon, hasLabel, isLoading, iconPosition }) => fullWidth && (!hasIcon || !hasLabel || isLoading ? import_styled_components5.css`
           justify-content: center;
         ` : hasIcon && hasLabel && iconPosition === "left" ? import_styled_components5.css`
-          justify-content: left;
-        ` : import_styled_components5.css`
-          justify-content: space-between;
-        `)}
+            justify-content: left;
+          ` : import_styled_components5.css`
+            justify-content: space-between;
+          `)}
   &:focus-visible, &.focus-visible {
     ${import_dds_form.focusVisible}
@@ -970,7 +983,18 @@ var ButtonWrapper = import_styled_components5.default.button`
     ${import_dds_core5.selection}
   }
 `;
-var StyledIconWrapperSpan = import_styled_components5.default.span`
+var StyledIconWrapperSpan = import_styled_components5.default.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;
@@ -985,7 +1009,9 @@ var StyledIconWrapperSpan = import_styled_components5.default.span`
       width: ${sizes2[size].justIcon.wrapper.width};
     `}
 `;
-var Label = import_styled_components5.default.span`
+var Label = import_styled_components5.default.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "isHidden"
+})`
   ${({ isHidden }) => isHidden && import_styled_components5.css`
       visibility: hidden;
     `}
@@ -1301,7 +1327,7 @@ var StyledScrollableContainer = import_styled_components7.default.div`
   padding: ${outerContainer2.padding};
 `;
 var Content = import_styled_components7.default.div`
-  height: ${({ height }) => height};
+  height: ${({ $height }) => $height};
   overflow: auto;
   scrollbar-width: none;
   ::-webkit-scrollbar {
@@ -1332,7 +1358,7 @@ var ScrollableContainer = (props) => {
     {
       ...(0, import_dds_core8.getBaseHTMLProps)(id, className, htmlProps, rest),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Content, { height: contentHeight, ref, tabIndex: 0, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Content, { $height: contentHeight, ref, tabIndex: 0, children }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Scrollbar, { contentRef: ref })
       ]
     }
@@ -1572,7 +1598,7 @@ var Container = import_styled_components9.default.div`
   overflow-y: auto;
   min-width: 180px;
   max-width: 300px;
-  ${({ isOpen }) => (0, import_dds_core13.visibilityTransition)(isOpen)}
+  ${({ $isOpen }) => (0, import_dds_core13.visibilityTransition)($isOpen)}
   border: ${container2.border};
   background-color: ${container2.backgroundColor};
   border-radius: ${container2.borderRadius};
@@ -1696,7 +1722,7 @@ var OverflowMenu = (0, import_react8.forwardRef)(
       ...(0, import_dds_core15.getBaseHTMLProps)(id, className, restHTMLProps, rest),
       ref: combinedRef,
       id: id != null ? id : `${generatedId}-overflowMenu`,
-      isOpen,
+      $isOpen: isOpen,
       style: { ...style, ...styles.floating },
       "aria-hidden": !isOpen,
       role: "menu"
@@ -1792,7 +1818,9 @@ var IconButtonText = import_styled_components10.default.span`
   display: none; // Ikke vis tekst på mobil
   width: 0;
 `;
-var Bar = import_styled_components10.default.div`
+var Bar = import_styled_components10.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "environmentBannerActive"
+})`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1877,7 +1905,9 @@ var TopBar = ({
 var import_development_utils2 = require("@norges-domstoler/development-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var { navigation: navTokens4 } = appShellTokens;
-var Sidebar = import_styled_components11.default.div`
+var Sidebar = import_styled_components11.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "environmentBannerActive"
+})`
   display: flex;
   flex-direction: column;
   height: calc(100vh - ${navTokens4.topBar.height});
@@ -2020,7 +2050,9 @@ var AppShellContainer = import_styled_components12.default.div`
     flex-direction: row;
   }
 `;
-var MainContent = import_styled_components12.default.main`
+var MainContent = import_styled_components12.default.main.withConfig({
+  shouldForwardProp: (prop) => prop !== "environmentBannerActive"
+})`
   min-height: calc(100vh - ${appShellTokens.navigation.topBar.height});
   margin-top: ${({ environmentBannerActive }) => environmentBannerActive ? `calc(${import_development_utils3.ENVIRONMENT_BANNER_HEIGHT} + ${appShellTokens.navigation.topBar.height})` : appShellTokens.navigation.topBar.height};
   @media (min-width: ${appShellTokens.navigation.mobile.breakpoint}) {
@@ -2203,7 +2235,7 @@ var CustomSelectionControl = import_styled_components13.default.span`
   border-radius: ${selectionControl2.base.borderRadius};
   height: ${selectionControl2.base.height};
   width: ${selectionControl2.base.width};
-  ${({ controlType }) => controlType === "radio" && import_styled_components13.css`
+  ${({ $controlType }) => $controlType === "radio" && import_styled_components13.css`
       border-radius: 50%;
     `}
   &:after {
@@ -2220,7 +2252,7 @@ var Container2 = import_styled_components13.default.label`
   user-select: none;
   width: fit-content;
   color: ${container4.color};
-  ${({ hasLabel }) => hasLabel ? import_styled_components13.css`
+  ${({ $hasLabel }) => $hasLabel ? import_styled_components13.css`
           padding-left: ${container4.withLabel.paddingLeft};
         ` : import_styled_components13.css`
           padding: ${container4.noLabel.padding};
@@ -2266,7 +2298,7 @@ var Container2 = import_styled_components13.default.label`
     border-color: ${selectionControl2.checked.hover.borderColor};
   }
-  ${({ error }) => error && import_styled_components13.css`
+  ${({ $error }) => $error && import_styled_components13.css`
       &:hover input:enabled ~ ${CustomSelectionControl} {
         background-color: ${selectionControl2.hover.danger.backgroundColor};
         box-shadow: ${selectionControl2.hover.danger.boxShadow};
@@ -2304,7 +2336,7 @@ var Container2 = import_styled_components13.default.label`
       cursor: not-allowed;
       color: ${container4.disabled.color};
     `}
-  ${({ controlType }) => controlType === "checkbox" ? import_styled_components13.css`
+  ${({ $controlType }) => $controlType === "checkbox" ? import_styled_components13.css`
           ${CustomSelectionControl}:after {
             border: solid ${checkmark2.checkbox.borderColor};
@@ -2341,9 +2373,9 @@ var OuterGroupContainer = import_styled_components13.default.div`
 `;
 var GroupContainer = import_styled_components13.default.div`
   display: flex;
-  ${({ direction }) => import_styled_components13.css`
-    flex-direction: ${direction};
-    gap: ${groupContainer2[direction].gap};
+  ${({ $direction }) => import_styled_components13.css`
+    flex-direction: ${$direction};
+    gap: ${groupContainer2[$direction].gap};
   `}
 `;
@@ -2407,21 +2439,24 @@ var RadioButton = (0, import_react12.forwardRef)(
       "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: (0, import_dds_core16.joinClassNames)(className, htmlPropsClassName),
-      htmlFor: uniqueId,
-      controlType: "radio",
-      hasLabel
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Container2, { ...containerProps, htmlFor: uniqueId, controlType: "radio", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_dds_form5.HiddenInput, { ...inputProps, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomSelectionControl, { controlType: "radio" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_dds_typography3.Typography, { as: "span", children: children != null ? children : label3 })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      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: (0, import_dds_core16.joinClassNames)(className, htmlPropsClassName),
+        $hasLabel: hasLabel,
+        htmlFor: uniqueId,
+        $controlType: "radio",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_dds_form5.HiddenInput, { ...inputProps, ref }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomSelectionControl, { $controlType: "radio" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_dds_typography3.Typography, { as: "span", children: children != null ? children : label3 })
+        ]
+      }
+    );
   }
 );
 RadioButton.displayName = "RadioButton";
@@ -2463,7 +2498,9 @@ var import_react13 = require("react");
 var import_dds_core17 = require("@norges-domstoler/dds-core");
 var import_dds_icons8 = require("@norges-domstoler/dds-icons");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var InputMessageWrapper = import_styled_components14.default.div`
+var InputMessageWrapper = import_styled_components14.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "messageType"
+})`
   display: flex;
   width: fit-content;
   word-break: break-word;
@@ -2590,7 +2627,7 @@ var RadioButtonGroupInner = (props, ref) => {
           GroupContainer,
           {
             role: "radiogroup",
-            direction,
+            $direction: direction,
             "aria-labelledby": uniqueGroupId,
             "aria-describedby": tipId,
             "aria-errormessage": errorMessageId,
@@ -2644,43 +2681,42 @@ var Checkbox = (0, import_react16.forwardRef)(
       className: htmlPropsClassName,
       ...restHtmlProps
     } = htmlProps;
-    const containerProps = {
-      error: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
-      disabled,
-      indeterminate,
-      htmlFor: uniqueId,
-      hasLabel,
-      className: (0, import_dds_core19.joinClassNames)(className, htmlPropsClassName),
-      style
-    };
-    const inputProps = {
-      ...(0, import_dds_core19.getBaseHTMLProps)(uniqueId, restHtmlProps, rest),
-      ref,
-      name,
-      indeterminate,
-      disabled,
-      "aria-describedby": (0, import_dds_core19.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__ */ (0, import_jsx_runtime19.jsxs)(Container2, { ...containerProps, controlType: "checkbox", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_dds_form6.HiddenInput,
-        {
-          ...inputProps,
-          type: "checkbox",
-          "data-indeterminate": indeterminate
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CustomSelectionControl, { controlType: "checkbox" }),
-      hasLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_dds_typography6.Typography, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      Container2,
+      {
+        $error: error || (checkboxGroup == null ? void 0 : checkboxGroup.error),
+        disabled,
+        htmlFor: uniqueId,
+        $hasLabel: hasLabel,
+        $controlType: "checkbox",
+        className: (0, import_dds_core19.joinClassNames)(className, htmlPropsClassName),
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_dds_form6.HiddenInput,
+            {
+              ...(0, import_dds_core19.getBaseHTMLProps)(uniqueId, restHtmlProps, rest),
+              ref,
+              name,
+              disabled,
+              "aria-describedby": (0, import_dds_core19.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__ */ (0, import_jsx_runtime19.jsx)(CustomSelectionControl, { $controlType: "checkbox" }),
+          hasLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_dds_typography6.Typography, { color: "inherit", as: "span", typographyType: "bodySans02", children: label3 })
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -2747,7 +2783,7 @@ var CheckboxGroup = (props) => {
             role: "group",
             "aria-labelledby": uniqueGroupId,
             "aria-describedby": tip ? tipId : void 0,
-            direction,
+            $direction: direction,
             children
           }
         ) }),
@@ -2865,8 +2901,8 @@ var MessageContainer = import_styled_components16.default.div`
 var StyledIcon = (0, import_styled_components16.default)(import_dds_icons9.Icon)`
   position: absolute;
   color: ${icon3.color};
-  ${({ size, iconSize }) => import_styled_components16.css`
-    left: ${icon3.sizes[size].left};
+  ${({ $size, iconSize }) => import_styled_components16.css`
+    left: ${icon3.sizes[$size].left};
     ${iconSize === "small" ? import_styled_components16.css`
           top: ${`calc(50% - ${iconSizes2.DdsIconsizeSmallNumberPx / 2}px)`};
         ` : import_styled_components16.css`
@@ -2876,7 +2912,7 @@ var StyledIcon = (0, import_styled_components16.default)(import_dds_icons9.Icon)
   z-index: 1;
 `;
 var StyledInput = (0, import_styled_components16.default)(import_dds_form7.StatefulInput)`
-  ${({ componentSize, hasIcon }) => hasIcon && componentSize && import_styled_components16.css`
+  ${({ componentSize, $hasIcon }) => $hasIcon && componentSize && import_styled_components16.css`
       padding-left: ${input2.withIcon[componentSize].paddingLeft};
     `}
 `;
@@ -2990,7 +3026,6 @@ var TextInput = (0, import_react19.forwardRef)(
     const errorMessageId = (0, import_dds_core22.derivativeIdGenerator)(uniqueId, "errorMessage");
     const generalInputProps = {
       id: uniqueId,
-      errorMessage,
       hasErrorMessage,
       required,
       disabled,
@@ -3023,7 +3058,7 @@ var TextInput = (0, import_react19.forwardRef)(
           {
             icon: icon12,
             iconSize: getFormInputIconSize(componentSize),
-            size: componentSize
+            $size: componentSize
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -3033,7 +3068,7 @@ var TextInput = (0, import_react19.forwardRef)(
             onChange: onChangeHandler,
             type,
             componentSize,
-            hasIcon,
+            $hasIcon: hasIcon,
             ...generalInputProps
           }
         )
@@ -3286,30 +3321,30 @@ function getContainerControlPadding(componentSize, isMulti) {
 }
 var Container3 = import_styled_components18.default.div`
   margin: 0;
-  width: ${({ width }) => width};
+  width: ${({ $width }) => $width};
   position: relative;
   *::selection {
     ${import_dds_core23.selection}
   }
-  ${({ componentSize, isMulti }) => import_styled_components18.css`
+  ${({ $componentSize, $isMulti }) => import_styled_components18.css`
     .${prefix}__control {
-      padding: ${getContainerControlPadding(componentSize, isMulti)};
-      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.control[componentSize], true)}
+      padding: ${getContainerControlPadding($componentSize, $isMulti)};
+      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.control[$componentSize], true)}
     }
     .${prefix}__option {
-      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.option[componentSize], true)}
+      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.option[$componentSize], true)}
     }
     .${prefix}__placeholder {
-      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.placeholder[componentSize])}
+      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.placeholder[$componentSize])}
     }
     .${prefix}__menu-notice--no-options {
-      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.noOptionsMessage[componentSize])}
+      ${(0, import_dds_typography10.getFontStyling)(typographyTypes2.noOptionsMessage[$componentSize])}
     }
   `}
-  ${({ errorMessage }) => errorMessage && import_styled_components18.css`
+  ${({ $errorMessage }) => $errorMessage && import_styled_components18.css`
       .${prefix}__control {
         ${import_dds_form10.dangerInputfield}
       }
@@ -3328,7 +3363,7 @@ var Container3 = import_styled_components18.default.div`
     color: ${dropdownIndicator2.hover.color};
   }
-  ${({ isDisabled, readOnly }) => readOnly ? import_styled_components18.css`
+  ${({ $isDisabled, $readOnly }) => $readOnly ? import_styled_components18.css`
           .${prefix}__control {
             border-color: ${control2.readOnly.borderColor};
             background-color: ${control2.readOnly.backgroundColor};
@@ -3338,16 +3373,16 @@ var Container3 = import_styled_components18.default.div`
             .${prefix}__dropdown-indicator {
             color: ${dropdownIndicator2.readOnly.color};
           }
-        ` : isDisabled ? import_styled_components18.css`
-          cursor: not-allowed;
-          .${prefix}__control {
-            border-color: ${control2.disabled.borderColor};
-            background-color: ${control2.disabled.backgroundColor};
-          }
-          &:hover .${prefix}__dropdown-indicator {
-            color: ${dropdownIndicator2.base.color};
-          }
-        ` : ""}
+        ` : $isDisabled ? import_styled_components18.css`
+            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 = import_styled_components18.default.div`
   overflow: hidden;
@@ -3586,12 +3621,12 @@ var SelectInner = (props, ref) => {
   const tipId = (0, import_dds_core24.derivativeIdGenerator)(uniqueId, "tip");
   const errorMessageId = (0, import_dds_core24.derivativeIdGenerator)(uniqueId, "errorMessage");
   const containerProps = {
-    width,
-    componentSize,
-    errorMessage,
-    isDisabled,
-    readOnly,
-    isMulti,
+    $width: width,
+    $componentSize: componentSize,
+    $errorMessage: errorMessage,
+    $isDisabled: isDisabled,
+    $readOnly: readOnly,
+    $isMulti: isMulti,
     className,
     style
   };
@@ -3726,10 +3761,10 @@ var Container4 = import_styled_components19.default.div`
   padding: ${container6.padding};
   border-bottom: ${container6.borderBottom};
   ${(0, import_dds_typography13.getFontStyling)(typographyType2, true)}
-  ${({ purpose }) => purpose && import_styled_components19.css`
-      border-color: ${container6[purpose].borderColor};
-      background-color: ${container6[purpose].backgroundColor};
-    `}
+  ${({ $purpose }) => import_styled_components19.css`
+    border-color: ${container6[$purpose].borderColor};
+    background-color: ${container6[$purpose].backgroundColor};
+  `}
 `;
 var MessageIconWrapper = (0, import_styled_components19.default)(import_dds_icons14.Icon)`
   margin-right: ${icon6.marginRight};
@@ -3743,7 +3778,7 @@ var ContentContainer = import_styled_components19.default.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 = (0, import_react21.forwardRef)(
   (props, ref) => {
@@ -3759,37 +3794,40 @@ var GlobalMessage = (0, import_react21.forwardRef)(
       ...rest
     } = props;
     const [isClosed, setClosed] = (0, import_react21.useState)(false);
-    const containerProps = {
-      ...(0, import_dds_core25.getBaseHTMLProps)(id, className, htmlProps, rest),
-      ref,
-      purpose
-    };
-    return !isClosed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Container4, { ...containerProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ContentContainer, { closable, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          MessageIconWrapper,
-          {
-            icon: purposeVariants[purpose].icon,
-            color: icon6[purpose].color
-          }
-        ),
-        children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dds_typography12.Typography, { as: "span", children: message2 })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ControlsContainer, { children: closable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        Button,
-        {
-          icon: import_dds_icons15.CloseIcon,
-          purpose: purposeVariants[purpose].closeButtonPurpose,
-          appearance: "borderless",
-          onClick: () => {
-            setClosed(true);
-            onClose && onClose();
-          },
-          size: "small",
-          "aria-label": "Lukk melding"
-        }
-      ) })
-    ] }) : null;
+    return !isClosed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      Container4,
+      {
+        ref,
+        $purpose: purpose,
+        ...(0, import_dds_core25.getBaseHTMLProps)(id, className, htmlProps, rest),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ContentContainer, { $closable: closable, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              MessageIconWrapper,
+              {
+                icon: purposeVariants[purpose].icon,
+                color: icon6[purpose].color
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dds_typography12.Typography, { as: "span", children: message2 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ControlsContainer, { children: closable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Button,
+            {
+              icon: import_dds_icons15.CloseIcon,
+              purpose: purposeVariants[purpose].closeButtonPurpose,
+              appearance: "borderless",
+              onClick: () => {
+                setClosed(true);
+                onClose && onClose();
+              },
+              size: "small",
+              "aria-label": "Lukk melding"
+            }
+          ) })
+        ]
+      }
+    ) : null;
   }
 );
 GlobalMessage.displayName = "GlobalMessage";
@@ -3898,7 +3936,17 @@ var import_dds_icons18 = require("@norges-domstoler/dds-icons");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var defaultWidth3 = "400px";
 var { container: container8, icon: icon8, purposeVariants: purposeVariants3 } = localMessageTokens;
-var Container5 = import_styled_components20.default.div`
+var Container5 = import_styled_components20.default.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)};
@@ -4168,7 +4216,7 @@ var import_dds_core33 = require("@norges-domstoler/dds-core");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var { suggestionsContainer: suggestionsContainer2, suggestionsHeader: suggestionsHeader2 } = searchTokens;
 var SuggestionsContainer = (0, import_styled_components22.default)(import_dds_core29.Paper)`
-  ${({ isHidden }) => (0, import_dds_core32.visibilityTransition)(!isHidden)};
+  ${({ $isHidden }) => (0, import_dds_core32.visibilityTransition)(!$isHidden)};
   position: absolute;
   top: 100%;
   width: 100%;
@@ -4182,7 +4230,7 @@ var SuggestionsContainer = (0, import_styled_components22.default)(import_dds_co
   ${scrollbarStyling.webkit}
 `;
 var MenuItem = (0, import_styled_components22.default)(OverflowMenuItem)`
-  ${({ size }) => size && (0, import_dds_typography16.getFontStyling)(typographyTypes3[size])}
+  ${({ $size }) => $size && (0, import_dds_typography16.getFontStyling)(typographyTypes3[$size])}
 `;
 var SuggestionsList = import_styled_components22.default.ul`
   ${import_dds_core28.removeListStyling}
@@ -4221,7 +4269,7 @@ var SearchSuggestions = (0, import_react24.forwardRef)((props, ref) => {
         title: suggestion,
         "aria-setsize": suggestionsToRender.length,
         "aria-posinset": index,
-        size: componentSize
+        $size: componentSize
       }
     ) }, index);
   }) });
@@ -4231,7 +4279,7 @@ var SearchSuggestions = (0, import_react24.forwardRef)((props, ref) => {
     {
       ...(0, import_dds_core30.getBaseHTMLProps)(id, className, htmlProps, rest),
       ref,
-      isHidden,
+      $isHidden: isHidden,
       "aria-hidden": isHidden,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -4272,19 +4320,19 @@ var Input2 = (0, import_styled_components23.default)(import_dds_form11.Input)`
   }
   padding-right: ${input4.base.paddingRight};
-  ${({ componentSize }) => import_styled_components23.css`
-    padding-top: ${input4.sizes[componentSize].paddingTop};
-    padding-bottom: ${input4.sizes[componentSize].paddingBottom};
-    padding-left: ${input4.sizes[componentSize].paddingLeft};
-    ${(0, import_dds_typography17.getFontStyling)(typographyTypes3[componentSize])}
+  ${({ $componentSize }) => import_styled_components23.css`
+    padding-top: ${input4.sizes[$componentSize].paddingTop};
+    padding-bottom: ${input4.sizes[$componentSize].paddingBottom};
+    padding-left: ${input4.sizes[$componentSize].paddingLeft};
+    ${(0, import_dds_typography17.getFontStyling)(typographyTypes3[$componentSize])}
   `}
 `;
 var StyledSearchIcon = (0, import_styled_components23.default)(import_dds_icons19.Icon)`
   position: absolute;
   left: ${searchIcon2.base.left};
   color: ${searchIcon2.base.color};
-  ${({ size }) => import_styled_components23.css`
-    top: ${searchTokens.searchIcon[size].top};
+  ${({ $size }) => import_styled_components23.css`
+    top: ${searchTokens.searchIcon[$size].top};
   `}
   z-index: 1;
 `;
@@ -4300,7 +4348,7 @@ var OuterContainer = import_styled_components23.default.div`
   gap: ${outerContainer4.gap};
 `;
 var HorisontalContainer = import_styled_components23.default.div`
-  ${(props) => props.hasSearchButton && import_styled_components23.css`
+  ${(props) => props.$hasSearchButton && import_styled_components23.css`
       display: grid;
       grid-template-columns: 1fr auto;
       gap: ${horisontalContainer2.gap};
@@ -4347,26 +4395,6 @@ var Search = (0, import_react25.forwardRef)(
       const emptyChangeEvent = createEmptyChangeEvent(uniqueId);
       handleChange(emptyChangeEvent);
     };
-    const containerProps = {
-      className,
-      style
-    };
-    const inputProps = {
-      ...rest,
-      ref: combinedRef,
-      componentSize,
-      name,
-      type: "search",
-      id: uniqueId,
-      "aria-describedby": (0, import_dds_core34.spaceSeparatedIdListGenerator)([
-        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,
@@ -4380,22 +4408,36 @@ var Search = (0, import_react25.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           HorisontalContainer,
           {
-            hasSearchButton: showSearchButton,
-            ...containerProps,
+            $hasSearchButton: showSearchButton,
+            className,
+            style,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(InputContainer2, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   StyledSearchIcon,
                   {
                     icon: import_dds_icons19.SearchIcon,
-                    size: componentSize,
+                    $size: componentSize,
                     iconSize: getIconSize(componentSize)
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Input2,
                   {
-                    ...inputProps,
+                    ...rest,
+                    ref: combinedRef,
+                    $componentSize: componentSize,
+                    name,
+                    type: "search",
+                    id: uniqueId,
+                    "aria-describedby": (0, import_dds_core34.spaceSeparatedIdListGenerator)([
+                      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,
@@ -4625,13 +4667,13 @@ var StyledTable = import_styled_components24.default.table`
   }
   ${scrollbarStyling.webkit}
   ${scrollbarStyling.firefox}
-  ${({ density }) => import_styled_components24.css`
+  ${({ $density }) => import_styled_components24.css`
     td,
     th {
-      padding: ${cell2.density[density].padding};
+      padding: ${cell2.density[$density].padding};
     }
   `}
-  ${({ density }) => density === "extraCompact" && import_styled_components24.css`
+  ${({ $density }) => $density === "extraCompact" && import_styled_components24.css`
       th {
         background-color: ${row2.head.extraCompact.backgroundColor};
         font-size: ${row2.head.extraCompact.fontSize};
@@ -4645,7 +4687,7 @@ var StyledTable = import_styled_components24.default.table`
         }
       }
     `}
-  ${({ stickyHeader }) => stickyHeader && import_styled_components24.css`
+  ${({ $stickyHeader }) => $stickyHeader && import_styled_components24.css`
       tr[type='head'] {
         th[type='head'] {
           position: sticky;
@@ -4654,20 +4696,25 @@ var StyledTable = import_styled_components24.default.table`
         }
       }
     `}
-  ${({ withDividers }) => withDividers && import_styled_components24.css`
+  ${({ $withDividers }) => $withDividers && import_styled_components24.css`
       tr[type='body'] {
         border-bottom: ${row2.body.withDividers.borderBottom};
       }
     `}
 `;
 var Table = (0, import_react27.forwardRef)(
-  ({ density = "normal", children, ...rest }, ref) => {
-    const tableProps = {
-      ref,
-      density,
-      ...rest
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledTable, { ...tableProps, children });
+  ({ density = "normal", stickyHeader, withDividers, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      StyledTable,
+      {
+        ...rest,
+        ref,
+        $density: density,
+        $stickyHeader: stickyHeader,
+        $withDividers: withDividers,
+        children
+      }
+    );
   }
 );
 Table.displayName = "Table";
@@ -4703,12 +4750,6 @@ var CollapsibleTable = (0, import_react29.forwardRef)((props, ref) => {
     definingColumnIndex = [0],
     ...rest
   } = props;
-  const tableProps = {
-    ref,
-    density,
-    isCollapsed,
-    ...rest
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     CollapsibleTableContext.Provider,
     {
@@ -4717,7 +4758,7 @@ var CollapsibleTable = (0, import_react29.forwardRef)((props, ref) => {
         headerValues,
         definingColumnIndex
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTable2, { ...tableProps, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTable2, { ref, density, ...rest, children })
     }
   );
 });
@@ -4730,10 +4771,7 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var StyledHead = import_styled_components26.default.thead``;
 var Head = (0, import_react30.forwardRef)(
   ({ children, ...rest }, ref) => {
-    const headProps = {
-      ...rest
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledHead, { ref, ...headProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledHead, { ref, ...rest, children });
   }
 );
 Head.displayName = "Table.Head";
@@ -4760,10 +4798,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var StyledFoot = import_styled_components28.default.tfoot``;
 var Foot = (0, import_react32.forwardRef)(
   ({ children, ...rest }, ref) => {
-    const footProps = {
-      ...rest
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledFoot, { ref, ...footProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledFoot, { ref, ...rest, children });
   }
 );
 Foot.displayName = "Table.Foot";
@@ -4803,7 +4838,7 @@ var StyledRow = import_styled_components29.default.tr`
       font-weight: 600;
       text-align: left;
     `}
-  ${({ type, mode, selected, hoverable }) => type === "body" && import_styled_components29.css`
+  ${({ type, $mode: mode, $selected: selected, $hoverable: hoverable }) => type === "body" && import_styled_components29.css`
       &:nth-of-type(even) {
         background-color: ${row3.body.even.backgroundColor};
         ${bodyRowStyles(mode, selected)}
@@ -4828,13 +4863,19 @@ var StyledRow = import_styled_components29.default.tr`
 // src/components/Table/Row.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Row = (0, import_react33.forwardRef)(
-  ({ type = "body", mode = "normal", children, ...rest }, ref) => {
-    const rowProps = {
-      type,
-      mode,
-      ...rest
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledRow, { ref, ...rowProps, children });
+  ({ type = "body", mode = "normal", hoverable, selected, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      StyledRow,
+      {
+        type,
+        $mode: mode,
+        $hoverable: hoverable,
+        $selected: selected,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
 );
 Row.displayName = "Table.Row";
@@ -4898,7 +4939,9 @@ var descriptionListTokens = {
 // src/components/DescriptionList/DescriptionList.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var { term: term2, desc: desc2, list: list2 } = descriptionListTokens;
-var DList = import_styled_components30.default.dl`
+var DList = import_styled_components30.default.dl.withConfig({
+  shouldForwardProp: (prop) => prop !== "appearance" && prop !== "direction"
+})`
   margin: 0;
   *::selection {
     ${import_dds_core38.selection}
@@ -5049,14 +5092,14 @@ var getLayoutStyle = (layout) => {
   }
 };
 var StyledCell = import_styled_components34.default.td`
-  ${({ type }) => type === "head" && import_styled_components34.css`
+  ${({ $type: type }) => type === "head" && import_styled_components34.css`
       background-color: ${cell3.head.backgroundColor};
     `}
 `;
 var InnerCell = import_styled_components34.default.div`
   display: flex;
   align-items: center;
-  ${({ layout }) => getLayoutStyle(layout)}
+  ${({ $layout: layout }) => getLayoutStyle(layout)}
 `;
 var getTableCellType = (type) => {
   switch (type) {
@@ -5071,15 +5114,7 @@ var Cell = (0, import_react38.forwardRef)(
   ({ 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__ */ (0, import_jsx_runtime40.jsx)(DescriptionListDesc, { children }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StyledCell, { ref, ...cellProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(InnerCell, { ...innerCellProps, children }) });
+    return isCollapsibleChild ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DescriptionListDesc, { children }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StyledCell, { as, ref, $type: type, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(InnerCell, { $layout: layout, children }) });
   }
 );
 Cell.displayName = "Table.Cell";
@@ -5108,10 +5143,12 @@ var DescriptionListCell = (0, import_styled_components35.default)(Cell)`
   }
 `;
 var CollapsibleRow = (0, import_react39.forwardRef)(
-  ({ 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();
@@ -5138,14 +5175,14 @@ var CollapsibleRow = (0, import_react39.forwardRef)(
         })
       ] }, `DL-${index}`);
     }) : null;
-    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { type: "body", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DescriptionList, { children: collapsedRenderedChildren }) }) }) : null;
+    const collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { type, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DescriptionListCell, { colSpan: definingColumnIndex.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(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__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { ref, ...rowProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { ref, type, ...rowProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
         definingColumnCells,
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
           "Utvid",
@@ -5161,6 +5198,7 @@ var CollapsibleRow = (0, import_react39.forwardRef)(
         StyledRow,
         {
           ref,
+          type,
           ...rowProps,
           "data-isopencollapsibleheader": !childrenCollapsed && true,
           children: [
@@ -5191,7 +5229,7 @@ var CollapsibleRow = (0, import_react39.forwardRef)(
         rowWithChevron(),
         childrenCollapsed ? null : collapsedRows
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { ref, ...rowProps, children });
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledRow, { ref, type, ...rowProps, children });
   }
 );
 CollapsibleRow.displayName = "CollapsibleTable.Row";
@@ -5252,7 +5290,7 @@ var import_react41 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Wrapper3 = import_styled_components37.default.div`
-  ${({ overflowX }) => overflowX && import_styled_components37.css`
+  ${({ $overflowX }) => $overflowX && import_styled_components37.css`
       overflow-x: auto;
     `}
   ${scrollbarStyling.webkit}
@@ -5279,12 +5317,7 @@ var TableWrapper = ({ children, ...rest }) => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  const wrapperProps = {
-    ref: wrapperRef,
-    overflowX,
-    ...rest
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Wrapper3, { ...wrapperProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Wrapper3, { $overflowX: overflowX, ref: wrapperRef, ...rest, children });
 };
 TableWrapper.displayName = "Table.Wrapper";
@@ -5470,14 +5503,14 @@ var List2 = import_styled_components39.default.ol`
 var ListItem2 = import_styled_components39.default.li`
   display: inline-grid;
   align-content: center;
-  ${({ isHidden }) => isHidden && import_styled_components39.css`
+  ${({ $isHidden }) => $isHidden && import_styled_components39.css`
       visibility: hidden;
     `}
 `;
 var OuterContainer2 = import_styled_components39.default.div`
   display: flex;
   gap: ${outerContainer6.gap};
-  ${({ smallScreen }) => smallScreen ? import_styled_components39.css`
+  ${({ $smallScreen }) => $smallScreen ? import_styled_components39.css`
           flex-direction: column;
           align-items: center;
         ` : import_styled_components39.css`
@@ -5585,17 +5618,17 @@ var Pagination = (0, import_react44.forwardRef)(
     };
     const containerProps = {
       ...(0, import_dds_core44.getBaseHTMLProps)(id, className, htmlProps, rest),
-      smallScreen
+      $smallScreen: smallScreen
     };
     const isOnFirstPage = activePage === 1;
     const isOnLastPage = activePage === pagesLength;
     const navigation4 = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(List2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       listItems,
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton })
     ] }) }) : null;
     const smallScreenNavigation = withPagination ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Nav, { ref, "aria-label": "paginering", ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(List2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Button,
         {
           purpose: "secondary",
@@ -5608,7 +5641,7 @@ var Pagination = (0, import_react44.forwardRef)(
           "aria-label": "G\xE5 til f\xF8rste siden"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnFirstPage, "aria-hidden": isOnFirstPage, children: previousPageButton }),
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Button,
         {
@@ -5619,8 +5652,8 @@ var Pagination = (0, import_react44.forwardRef)(
           children: activePage
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: nextPageButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListItem2, { $isHidden: isOnLastPage, "aria-hidden": isOnLastPage, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Button,
         {
           purpose: "secondary",
@@ -5734,13 +5767,13 @@ var StyledList = import_styled_components40.default.ul`
     ${import_dds_core45.selection}
   }
-  ${({ typographyType: typographyType7 }) => typographyType7 === "inherit" ? import_styled_components40.css`
+  ${({ $typographyType }) => $typographyType === "inherit" ? import_styled_components40.css`
           font: inherit;
         ` : import_styled_components40.css`
-          ${(0, import_dds_typography22.getFontStyling)(typographyType7)}
+          ${(0, import_dds_typography22.getFontStyling)($typographyType)}
         `}
-  ${({ listType }) => listType === "unordered" ? import_styled_components40.css`
+  ${({ $listType }) => $listType === "unordered" ? import_styled_components40.css`
           padding-left: ${list8.ul.paddingLeft};
           list-style: none;
           li {
@@ -5787,14 +5820,17 @@ var List3 = (0, import_react45.forwardRef)(
       ...rest
     } = props;
     const as = listType === "ordered" ? "ol" : "ul";
-    const listProps = {
-      ...(0, import_dds_core45.getBaseHTMLProps)(id, className, htmlProps, rest),
-      listType,
-      typographyType: typographyType7,
-      as,
-      ref
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StyledList, { ...listProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      StyledList,
+      {
+        ...(0, import_dds_core45.getBaseHTMLProps)(id, className, htmlProps, rest),
+        as,
+        ref,
+        $listType: listType,
+        $typographyType: typographyType7,
+        children
+      }
+    );
   }
 );
 List3.displayName = "List";
@@ -5855,7 +5891,9 @@ var import_dds_core46 = require("@norges-domstoler/dds-core");
 var import_dds_typography23 = require("@norges-domstoler/dds-typography");
 var import_dds_form15 = require("@norges-domstoler/dds-form");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var Container6 = import_styled_components42.default.div`
+var Container6 = import_styled_components42.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "color" && prop !== "cardType"
+})`
   border: ${cardTokens.base.border};
   ${(0, import_dds_typography23.getFontStyling)(import_dds_typography23.defaultTypographyType)};
   &::selection,
@@ -5881,12 +5919,12 @@ var Container6 = import_styled_components42.default.div`
             ${import_dds_form15.focusVisibleWithBorder}
           }
         ` : cardType === "expandable" ? import_styled_components42.css`
-          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 {
@@ -6032,7 +6070,9 @@ function getTypographyType(props) {
   const { typographyType: typographyType7 } = props;
   return typographyType7 != null ? typographyType7 : typographyTypes4.header;
 }
-var HeaderContainer = import_styled_components44.default.div`
+var HeaderContainer = import_styled_components44.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "padding" && prop !== "typographyType" && prop !== "bold"
+})`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -6153,7 +6193,11 @@ function getPadding(props) {
   const { padding } = props;
   return padding != null ? padding : cardAccordionTokens.body.padding;
 }
-var Body2 = import_styled_components45.default.div`
+var Body2 = import_styled_components45.default.div.withConfig({
+  shouldForwardProp: (prop) => {
+    return prop !== "animate" && prop !== "height" && prop !== "isExpanded";
+  }
+})`
   @media (prefers-reduced-motion: no-preference) {
     ${({ animate }) => animate && expandingAnimation}
   }
@@ -6161,7 +6205,18 @@ var Body2 = import_styled_components45.default.div`
   height: ${({ height, isExpanded }) => isExpanded ? height : 0}px;
   overflow: hidden;
 `;
-var BodyContainer = import_styled_components45.default.div`
+var BodyContainer = import_styled_components45.default.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "isExpanded",
+      "maxHeight",
+      "animate",
+      "paddingTop",
+      "padding"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   padding: ${getPadding};
   ${({ paddingTop }) => paddingTop && import_styled_components45.css`
@@ -6310,7 +6365,7 @@ var BannerWrapper = import_styled_components46.default.div`
   align-items: center;
   border-bottom: ${banner2.borderBottom};
   padding-right: ${banner2.paddingRight};
-  ${({ hasContextMenu }) => hasContextMenu && import_styled_components46.css`
+  ${({ $hasContextMenu }) => $hasContextMenu && import_styled_components46.css`
       padding-right: ${banner2.hasContextMenu.paddingRight};
     `}
 `;
@@ -6355,7 +6410,9 @@ var import_dds_typography26 = require("@norges-domstoler/dds-typography");
 var import_dds_form16 = require("@norges-domstoler/dds-form");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var { navLink: navLink2 } = internalHeaderTokens;
-var Link2 = import_styled_components47.default.a`
+var Link2 = import_styled_components47.default.a.withConfig({
+  shouldForwardProp: (prop) => prop !== "isCurrent"
+})`
   display: flex;
   align-items: center;
   height: 100%;
@@ -6460,7 +6517,7 @@ var InternalHeader = (props) => {
   }) }) }) : null;
   const hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(OuterContainer3, { ...(0, import_dds_core51.getBaseHTMLProps)(id, className, htmlProps, rest), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BannerWrapper, { hasContextMenu, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(BannerLeftWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BannerWrapper, { $hasContextMenu: hasContextMenu, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(BannerLeftWrapper, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LovisaWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_dds_typography27.Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }) }),
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ApplicationNameWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_dds_typography27.Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }) })
     ] }) }),
@@ -6706,7 +6763,7 @@ var { wrapper: wrapper2, link: link4 } = skipToContentTokens;
 var Wrapper5 = import_styled_components50.default.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);
@@ -6760,12 +6817,15 @@ var SkipToContent = (0, import_react55.forwardRef)(
       style,
       ...restHtmlProps
     } = htmlProps;
-    const wrapperProps = {
-      top,
-      className: (0, import_dds_core53.joinClassNames)(className, htmlPropsClassName),
-      style
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Wrapper5, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Link3, { ...(0, import_dds_core53.getBaseHTMLProps)(id, restHtmlProps, rest), ref, children: text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      Wrapper5,
+      {
+        $top: top,
+        className: (0, import_dds_core53.joinClassNames)(className, htmlPropsClassName),
+        style,
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Link3, { ...(0, import_dds_core53.getBaseHTMLProps)(id, restHtmlProps, rest), ref, children: text })
+      }
+    );
   }
 );
 SkipToContent.displayName = "SkipToContent";
@@ -6990,7 +7050,9 @@ var import_dds_form19 = require("@norges-domstoler/dds-form");
 var import_styled_components52 = __toESM(require("styled-components"));
 var import_dds_design_tokens27 = require("@norges-domstoler/dds-design-tokens");
 var import_dds_core59 = require("@norges-domstoler/dds-core");
-var Backdrop = import_styled_components52.default.div`
+var Backdrop = import_styled_components52.default.div.withConfig({
+  shouldForwardProp: (prop) => prop !== "isOpen"
+})`
   position: fixed;
   display: flex;
   align-items: center;
@@ -7022,10 +7084,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);
 }
@@ -7091,40 +7156,38 @@ var Modal = (0, import_react57.forwardRef)((props, ref) => {
   (0, import_dds_core60.useOnClickOutside)(modalRef.current, () => handleClose());
   (0, import_dds_core60.useOnKeyDown)(["Escape", "Esc"], () => handleClose());
   const hasTransitionedIn = (0, import_dds_core60.useMountTransition)(isOpen, 200);
-  const backdropProps = {
-    isOpen: hasTransitionedIn && isOpen
-  };
-  const containerProps = {
-    ...(0, import_dds_core60.getBaseHTMLProps)(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 ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Backdrop, { ...backdropProps, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Container8, { ...containerProps, elevation: 4, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ContentContainer2, { children: [
-        header3 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(HeaderContainer2, { ...headerContainerProps, children: typeof header3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_dds_typography31.Typography, { typographyType: "headingSans03", children: header3 }) : header3 }),
-        children
-      ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        StyledButton2,
-        {
-          size: "small",
-          appearance: "borderless",
-          purpose: "secondary",
-          icon: import_dds_icons27.CloseIcon,
-          onClick: handleClose,
-          "aria-label": "Lukk dialog"
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Backdrop, { isOpen: hasTransitionedIn && isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      Container8,
+      {
+        ...(0, import_dds_core60.getBaseHTMLProps)(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__ */ (0, import_jsx_runtime59.jsxs)(ContentContainer2, { children: [
+            header3 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(HeaderContainer2, { id: headerId, children: typeof header3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_dds_typography31.Typography, { typographyType: "headingSans03", children: header3 }) : header3 }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            StyledButton2,
+            {
+              size: "small",
+              appearance: "borderless",
+              purpose: "secondary",
+              icon: import_dds_icons27.CloseIcon,
+              onClick: handleClose,
+              "aria-label": "Lukk dialog"
+            }
+          )
+        ]
+      }
+    ) }),
     parentElement
   ) : null;
 });
@@ -7205,7 +7268,17 @@ var getMaxWidth = (size) => {
   else
     return "400px";
 };
-var Container11 = (0, import_styled_components56.default)(import_dds_core62.Paper)`
+var Container11 = (0, import_styled_components56.default)(import_dds_core62.Paper).withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "placement",
+      "isOpen",
+      "widthProps",
+      "size"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   position: fixed;
   top: 0;
   height: 100%;
@@ -7230,9 +7303,9 @@ var Container11 = (0, import_styled_components56.default)(import_dds_core62.Pape
           left: 0;
           transform: ${isOpen ? "translate(0px)" : "translateX(-100%)"};
         ` : placement === "right" ? import_styled_components56.css`
-          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;
@@ -7411,7 +7484,7 @@ var { spacing: Spacing } = import_dds_design_tokens30.ddsBaseTokens;
 var { wrapper: wrapper6, content: content4, closeButton: closeButton2, title: title2 } = popoverTokens;
 var Wrapper6 = (0, import_styled_components57.default)(import_dds_core66.Paper)`
   opacity: 0;
-  ${({ hasTransitionedIn, isOpen }) => hasTransitionedIn && (0, import_dds_core63.visibilityTransition)(hasTransitionedIn && isOpen)}
+  ${({ $hasTransitionedIn, $isOpen }) => $hasTransitionedIn && (0, import_dds_core63.visibilityTransition)($hasTransitionedIn && $isOpen)}
   position: absolute;
   width: fit-content;
   z-index: 100;
@@ -7420,20 +7493,20 @@ var Wrapper6 = (0, import_styled_components57.default)(import_dds_core66.Paper)`
   &:focus-visible {
     ${import_dds_form21.focusVisible}
   }
-  ${({ sizeProps }) => sizeProps && import_styled_components57.css`
-      width: ${sizeProps.width};
-      height: ${sizeProps.height};
-      min-width: ${sizeProps.minWidth};
-      min-height: ${sizeProps.minHeight};
-      max-width: ${sizeProps.maxWidth};
-      max-height: ${sizeProps.maxHeight};
+  ${({ $sizeProps }) => $sizeProps && import_styled_components57.css`
+      width: ${$sizeProps.width};
+      height: ${$sizeProps.height};
+      min-width: ${$sizeProps.minWidth};
+      min-height: ${$sizeProps.minHeight};
+      max-width: ${$sizeProps.maxWidth};
+      max-height: ${$sizeProps.maxHeight};
     `}
 `;
 var TitleContainer = import_styled_components57.default.div`
   margin-right: ${title2.marginRight};
 `;
 var ContentContainer4 = import_styled_components57.default.div`
-  ${({ withCloseButton, hasTitle }) => withCloseButton && !hasTitle && import_styled_components57.css`
+  ${({ $withCloseButton, $hasTitle }) => $withCloseButton && !$hasTitle && import_styled_components57.css`
       margin-top: ${content4.noTitle.marginTop};
     `}
 `;
@@ -7484,30 +7557,42 @@ var Popover = (0, import_react62.forwardRef)(
         onClose && onClose();
     });
     const hasTransitionedIn = (0, import_dds_core64.useMountTransition)(isOpen, 400);
-    const wrapperProps = {
-      ...(0, import_dds_core65.getBaseHTMLProps)(id, className, htmlProps, rest),
-      ref: multiRef,
-      isOpen,
-      hasTransitionedIn,
-      tabIndex: -1,
-      style: { ...htmlProps.style, ...styles.floating },
-      role: "dialog"
-    };
-    return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Wrapper6, { ...wrapperProps, elevation: 3, border: "light", children: [
-      title3 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_dds_typography33.Typography, { typographyType: "headingSans02", children: title3 }) : title3 }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ContentContainer4, { hasTitle: !!title3, withCloseButton, children }),
-      withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-        StyledButton4,
-        {
-          icon: import_dds_icons29.CloseIcon,
-          appearance: "borderless",
-          purpose: "secondary",
-          size: "small",
-          onClick: onCloseButtonClick,
-          "aria-label": "Lukk"
-        }
-      )
-    ] }) : null;
+    return isOpen || hasTransitionedIn ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      Wrapper6,
+      {
+        ...(0, import_dds_core65.getBaseHTMLProps)(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__ */ (0, import_jsx_runtime64.jsx)(TitleContainer, { children: typeof title3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_dds_typography33.Typography, { typographyType: "headingSans02", children: title3 }) : title3 }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            ContentContainer4,
+            {
+              $hasTitle: !!title3,
+              $withCloseButton: withCloseButton,
+              children
+            }
+          ),
+          withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            StyledButton4,
+            {
+              icon: import_dds_icons29.CloseIcon,
+              appearance: "borderless",
+              purpose: "secondary",
+              size: "small",
+              onClick: onCloseButtonClick,
+              "aria-label": "Lukk"
+            }
+          )
+        ]
+      }
+    ) : null;
   }
 );
 Popover.displayName = "Popover";
@@ -7630,7 +7715,7 @@ var Content2 = import_styled_components58.default.span`
       ${import_dds_form22.focusVisibleTransitionValue};
   }
-  ${({ hasIcon }) => hasIcon && import_styled_components58.css`
+  ${({ $hasIcon }) => $hasIcon && import_styled_components58.css`
       gap: ${toggleButton2.gap};
     `}
@@ -7664,17 +7749,16 @@ var ToggleButton = (0, import_react64.forwardRef)(
   ({ id, label: label3, icon: icon12, className, htmlProps, ...rest }, ref) => {
     const generatedId = (0, import_react64.useId)();
     const uniqueId = id != null ? id : `${generatedId}-toggleButton`;
-    const inputProps = {
-      ...(0, import_dds_core68.getBaseHTMLProps)(uniqueId, className, htmlProps, rest),
-      ref,
-      type: "checkbox"
-    };
-    const containerProps = {
-      htmlFor: uniqueId
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Container12, { ...containerProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_dds_form22.HiddenInput, { ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Content2, { hasIcon: !!icon12, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Container12, { htmlFor: uniqueId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        import_dds_form22.HiddenInput,
+        {
+          ...(0, import_dds_core68.getBaseHTMLProps)(uniqueId, className, htmlProps, rest),
+          ref,
+          type: "checkbox"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Content2, { $hasIcon: !!icon12, children: [
         icon12 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_dds_icons30.Icon, { icon: icon12, iconSize: "inherit" }),
         " ",
         label3
@@ -7761,8 +7845,8 @@ var useTabsContext = () => (0, import_react66.useContext)(TabsContext);
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var Container14 = import_styled_components60.default.div`
-  ${({ width }) => width && import_styled_components60.css`
-      width: ${width};
+  ${({ $width }) => $width && import_styled_components60.css`
+      width: ${$width};
     `};
 `;
 var Tabs = (0, import_react67.forwardRef)((props, ref) => {
@@ -7809,7 +7893,7 @@ var Tabs = (0, import_react67.forwardRef)((props, ref) => {
         setHasTabFocus,
         tabContentDirection
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Container14, { ...containerProps, width, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Container14, { ...containerProps, $width: width, children })
     }
   );
 });
@@ -7885,12 +7969,12 @@ var Button2 = import_styled_components61.default.button`
       ${import_dds_form23.focusVisibleTransitionValue};
   }
-  ${({ direction }) => import_styled_components61.css`
-    flex-direction: ${direction};
-    gap: ${tab2[direction].gap};
+  ${({ $direction }) => import_styled_components61.css`
+    flex-direction: ${$direction};
+    gap: ${tab2[$direction].gap};
   `};
-  ${({ active }) => active && import_styled_components61.css`
+  ${({ $active }) => $active && import_styled_components61.css`
       background-color: ${tab2.active.backgroundColor};
       border-color: ${tab2.active.borderColor};
       color: ${tab2.active.color};
@@ -7951,21 +8035,24 @@ var Tab = (0, import_react68.forwardRef)((props, ref) => {
     handleSelect();
     onKeyDown && onKeyDown(e);
   };
-  const buttonProps = {
-    ...(0, import_dds_core71.getBaseHTMLProps)(id, className, htmlProps, rest),
-    ref: combinedRef,
-    "aria-selected": active,
-    role: "tab",
-    active,
-    direction: tabContentDirection,
-    onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
-    tabIndex: focus ? 0 : -1
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Button2, { ...buttonProps, children: [
-    icon12 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_dds_icons31.Icon, { icon: icon12, iconSize: "inherit" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    Button2,
+    {
+      ...(0, import_dds_core71.getBaseHTMLProps)(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__ */ (0, import_jsx_runtime69.jsx)(import_dds_icons31.Icon, { icon: icon12, iconSize: "inherit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children })
+      ]
+    }
+  );
 });
 Tab.displayName = "Tab";
@@ -8061,7 +8148,7 @@ var Panel = import_styled_components63.default.div`
     transition: ${import_dds_form25.focusVisibleTransitionValue};
   }
-  ${({ active }) => !active && import_styled_components63.css`
+  ${({ $active }) => !$active && import_styled_components63.css`
       display: none;
     `}
   &:focus-visible {
@@ -8070,14 +8157,17 @@ var Panel = import_styled_components63.default.div`
 `;
 var TabPanel = (0, import_react70.forwardRef)(
   ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
-    const panelProps = {
-      ...(0, import_dds_core73.getBaseHTMLProps)(id, className, htmlProps, rest),
-      ref,
-      tabIndex: 0,
-      role: "tabpanel",
-      active
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Panel, { ...panelProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      Panel,
+      {
+        ...(0, import_dds_core73.getBaseHTMLProps)(id, className, htmlProps, rest),
+        ref,
+        tabIndex: 0,
+        role: "tabpanel",
+        $active: active,
+        children
+      }
+    );
   }
 );
 TabPanel.displayName = "TabPanel";
@@ -8143,9 +8233,9 @@ var Wrapper7 = (0, import_styled_components64.default)(import_dds_typography37.T
   border-radius: ${wrapper8.borderRadius};
   padding: ${wrapper8.padding};
   ${(0, import_dds_typography37.getFontStyling)(typographyType5)}
-  ${({ purpose }) => import_styled_components64.css`
-    background-color: ${wrapper8.purpose[purpose].backgroundColor};
-    border-color: ${wrapper8.purpose[purpose].borderColor};
+  ${({ $purpose }) => import_styled_components64.css`
+    background-color: ${wrapper8.purpose[$purpose].backgroundColor};
+    border-color: ${wrapper8.purpose[$purpose].borderColor};
   `}
 `;
 var Tag = (0, import_react72.forwardRef)((props, ref) => {
@@ -8162,7 +8252,7 @@ var Tag = (0, import_react72.forwardRef)((props, ref) => {
     {
       ...(0, import_dds_core75.getBaseHTMLProps)(id, className, htmlProps, rest),
       ref,
-      purpose,
+      $purpose: purpose,
       children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_dds_typography37.TextOverflowEllipsisInner, { children: text })
     }
   );
@@ -8393,8 +8483,8 @@ var OuterContainer4 = import_styled_components67.default.div`
   *::selection {
     ${import_dds_core79.selection}
   }
-  ${({ width }) => width && import_styled_components67.css`
-      width: ${width};
+  ${({ $width }) => $width && import_styled_components67.css`
+      width: ${$width};
     `}
 `;
 var Bar2 = import_styled_components67.default.div`
@@ -8439,7 +8529,7 @@ var ToggleBar = (props) => {
           ...(0, import_dds_core80.getBaseHTMLProps)(id, className, htmlProps, rest),
           role: "radiogroup",
           "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
-          width,
+          $width: width,
           children: [
             label3 && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_dds_typography39.Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
             /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Bar2, { children })
@@ -8479,14 +8569,14 @@ var Content3 = import_styled_components68.default.span`
   }
   background-color: ${content6.base.backgroundColor};
-  ${({ size, justIcon }) => import_styled_components68.css`
-    ${justIcon ? import_styled_components68.css`
-          font-size: ${content6.size[size].justIcon.fontSize};
-          padding: ${content6.size[size].justIcon.padding};
+  ${({ $size, $justIcon }) => import_styled_components68.css`
+    ${$justIcon ? import_styled_components68.css`
+          font-size: ${content6.size[$size].justIcon.fontSize};
+          padding: ${content6.size[$size].justIcon.padding};
         ` : import_styled_components68.css`
-          gap: ${content6.size[size].withText.gap};
-          padding: ${content6.size[size].withText.padding};
-          ${(0, import_dds_typography40.getFontStyling)(typographyTypes6[size])}
+          gap: ${content6.size[$size].withText.gap};
+          padding: ${content6.size[$size].withText.padding};
+          ${(0, import_dds_typography40.getFontStyling)(typographyTypes6[$size])}
         `}
   `}
 `;
@@ -8575,7 +8665,7 @@ var ToggleRadio = (0, import_react77.forwardRef)(
           checked: calculateChecked(value, group4, checked)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Content3, { size: group4.size, justIcon: !!icon12 && !label3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Content3, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
         icon12 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_dds_icons33.Icon, { icon: icon12, iconSize: "inherit" }),
         label3 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: label3 })
       ] })
@@ -8708,7 +8798,16 @@ var getHooksGridStyling = (screenSize, maxWidth, rowGap) => {
     maxWidth: maxWidth && maxWidth[(0, import_dds_core87.getLiteralScreenSize)(screenSize)] && maxWidth[(0, import_dds_core87.getLiteralScreenSize)(screenSize)]
   };
 };
-var StyledGrid = import_styled_components69.default.div`
+var StyledGrid = import_styled_components69.default.div.withConfig({
+  shouldForwardProp: (prop) => {
+    const styleOnlyProps = [
+      "maxWidth",
+      "rowGap",
+      "screenSize"
+    ];
+    return !styleOnlyProps.some((styleProp) => styleProp === prop);
+  }
+})`
   display: grid;
   ${({ maxWidth }) => import_styled_components69.css`
     max-width: ${maxWidth};
@@ -8748,7 +8847,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 = import_styled_components70.default.div`
+var StyledGridChild = import_styled_components70.default.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[(0, import_dds_core89.getLiteralScreenSize)(screenSize)] : isRelativeGridColumn(columnsOccupied) ? gridTokens[screenSize].columns[columnsOccupied].gridColumn : ""};
   justify-self: ${({ justifySelf }) => justifySelf && justifySelf};
@@ -8902,7 +9011,7 @@ var ItemNumber = import_styled_components71.default.div`
   ${(0, import_dds_typography41.getFontStyling)(typographyTypes7.number)}
   font-weight: 600;
-  ${({ state }) => {
+  ${({ $state: state }) => {
   switch (state) {
     case "activeIncomplete":
       return import_styled_components71.css`
@@ -8943,7 +9052,7 @@ var ItemText = import_styled_components71.default.div`
   text-decoration: ${itemText2.textDecoration};
   transition: text-decoration-color 0.2s;
-  ${({ state }) => {
+  ${({ $state: state }) => {
   switch (state) {
     case "activeCompleted":
     case "activeIncomplete":
@@ -8982,7 +9091,7 @@ var ItemContentWrapper = import_styled_components71.default.button`
     ${import_dds_form28.focusVisible}
   }
-  ${({ state }) => state !== "disabled" && import_styled_components71.css`
+  ${({ $state: state }) => state !== "disabled" && import_styled_components71.css`
       cursor: pointer;
     `}
 `;
@@ -8998,7 +9107,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 = (0, import_react80.useMemo)(() => {
     if (completed) {
@@ -9217,7 +9326,9 @@ var inlineEditTokens = {
 var import_dds_form29 = require("@norges-domstoler/dds-form");
 var { inlineEdit: inlineEdit2, iconWrapper: iconWrapper2 } = inlineEditTokens;
 var defaultWidth4 = "140px";
-var StyledInlineInput = (0, import_styled_components73.default)(import_dds_form29.StatefulInput)`
+var StyledInlineInput = (0, import_styled_components73.default)(import_dds_form29.StatefulInput).withConfig({
+  shouldForwardProp: (prop) => prop !== "isEditing" && prop !== "hideIcon"
+})`
   border-color: transparent;
   background-color: ${inlineEdit2.backgroundColor};
   padding: ${inlineEdit2.padding};
@@ -9656,7 +9767,18 @@ var stackTokens = {
 // src/components/Stack/Stack.tsx
 var import_dds_core99 = require("@norges-domstoler/dds-core");
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var Stack = import_styled_components76.default.div`
+var Stack = import_styled_components76.default.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};
@@ -10094,14 +10216,14 @@ var Wrapper8 = import_styled_components79.default.div`
 `;
 var Root = import_styled_components79.default.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 = import_styled_components79.default.input``;
 var FileListElement = import_styled_components79.default.ul`
@@ -10169,8 +10291,8 @@ var FileUploader = (props) => {
       Root,
       {
         ...getRootProps(),
-        isDragActive,
-        hasRootErrors,
+        $isDragActive: isDragActive,
+        $hasRootErrors: hasRootErrors,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FileUploaderInput, { ...getInputProps() }),
           "Dra og slipp filer her eller",
@@ -10279,35 +10401,22 @@ var import_react93 = require("react");
 var import_dds_typography49 = require("@norges-domstoler/dds-typography");
 // src/components/Feedback/RatingComponent.tsx
-var import_styled_components83 = __toESM(require("styled-components"));
-var import_dds_design_tokens46 = require("@norges-domstoler/dds-design-tokens");
-var import_dds_icons44 = require("@norges-domstoler/dds-icons");
-var import_dds_typography47 = require("@norges-domstoler/dds-typography");
-// src/components/Feedback/FlexContainer.tsx
 var import_styled_components82 = __toESM(require("styled-components"));
 var import_dds_design_tokens45 = require("@norges-domstoler/dds-design-tokens");
-var FlexContainer = import_styled_components82.default.div`
-  display: flex;
-  ${({ flexDirection }) => import_styled_components82.css`
-    flex-direction: ${flexDirection};
-    gap: ${import_dds_design_tokens45.ddsBaseTokens.spacing.SizesDdsSpacingLocalX1};
-  `};
-`;
-// src/components/Feedback/RatingComponent.tsx
+var import_dds_icons44 = require("@norges-domstoler/dds-icons");
+var import_dds_typography47 = require("@norges-domstoler/dds-typography");
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var RatingContainer = import_styled_components83.default.div`
+var RatingContainer = import_styled_components82.default.div`
   display: flex;
-  gap: ${import_dds_design_tokens46.ddsBaseTokens.spacing.SizesDdsSpacingLocalX1};
-  ${({ layout }) => import_styled_components83.css`
-    flex-direction: ${layout === "horizontal" ? "row" : "column"};
-    align-items: ${layout === "horizontal" ? "center" : "start"};
+  gap: ${import_dds_design_tokens45.ddsBaseTokens.spacing.SizesDdsSpacingLocalX1};
+  ${({ $layout }) => import_styled_components82.css`
+    flex-direction: ${$layout === "horizontal" ? "row" : "column"};
+    align-items: ${$layout === "horizontal" ? "center" : "start"};
   `}
 `;
-var RatingButton = (0, import_styled_components83.default)(Button)`
+var RatingButton = (0, import_styled_components82.default)(Button)`
   padding: 0px;
-  color: ${import_dds_design_tokens46.ddsBaseTokens.colors.DdsColorNeutralsGray7};
+  color: ${import_dds_design_tokens45.ddsBaseTokens.colors.DdsColorNeutralsGray7};
 `;
 var RatingComponent = ({
   layout,
@@ -10317,9 +10426,9 @@ var RatingComponent = ({
   thumbDownTooltip,
   handleRatingChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(RatingContainer, { layout, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(RatingContainer, { $layout: layout, children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_dds_typography47.Label, { children: ratingLabel }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(FlexContainer, { flexDirection: "row", children: [
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(HStack, { gap: "layout-x1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         RatingButton,
         {
@@ -10345,15 +10454,15 @@ var RatingComponent = ({
 };
 // src/components/Feedback/CommentComponent.tsx
-var import_styled_components84 = __toESM(require("styled-components"));
-var import_dds_design_tokens47 = require("@norges-domstoler/dds-design-tokens");
+var import_styled_components83 = __toESM(require("styled-components"));
+var import_dds_design_tokens46 = require("@norges-domstoler/dds-design-tokens");
 var import_dds_icons45 = require("@norges-domstoler/dds-icons");
 var import_dds_typography48 = require("@norges-domstoler/dds-typography");
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var IconLabelSpan = import_styled_components84.default.span`
+var IconLabelSpan = import_styled_components83.default.span`
   display: inline-flex;
   align-items: center;
-  gap: ${import_dds_design_tokens47.ddsBaseTokens.spacing.SizesDdsSpacingLocalX05};
+  gap: ${import_dds_design_tokens46.ddsBaseTokens.spacing.SizesDdsSpacingLocalX05};
 `;
 var CommentComponent = ({
   rating,
@@ -10365,13 +10474,13 @@ var CommentComponent = ({
   handleSubmit,
   handleFeedbackTextChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(FlexContainer, { flexDirection: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(VStack, { gap: "layout-x1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(IconLabelSpan, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         import_dds_icons45.Icon,
         {
           icon: rating === "positive" ? import_dds_icons45.ThumbupFilled : import_dds_icons45.ThumbdownFilled,
-          color: import_dds_design_tokens47.ddsBaseTokens.colors.DdsColorInteractiveBase
+          color: import_dds_design_tokens46.ddsBaseTokens.colors.DdsColorInteractiveBase
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_dds_typography48.Paragraph, { children: [