@norges-domstoler/dds-components 2.5.1 → 3.0.0

package/dist/index.es.js

@@ -12893,17 +12893,16 @@ function IconWrapper$1(_a) {
       color = _a.color,
       className = _a.className,
       style = _a.style,
-      rest = __rest(_a, ["Icon", "iconSize", "color", "className", "style"]);
-
+      svgProps = _a.svgProps;
   var PropIcon = Icon;
   var size = getSize(iconSize);
-  return jsxRuntime.exports.jsx(PropIcon, __assign({
+  return jsxRuntime.exports.jsx(PropIcon, __assign({}, svgProps, {
     className: className,
     style: __assign(__assign({}, style), {
       color: color ? color : 'inherit',
       fontSize: size
     })
-  }, rest));
+  }));
 }
 
 var LaunchOutlined = {};
@@ -20127,7 +20126,7 @@ default_1$k = LaunchOutlined.default = _default$k;
 var getElementType = function getElementType(element) {
   switch (element) {
     case 'a':
-      return element;
+      return 'a';
 
     case 'headingSans01':
       return 'h6';
@@ -20226,31 +20225,47 @@ var StyledTypography = styled$3.p.withConfig({
   var underline = _a.underline;
   return underline && Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), typographyTokens.style.underline.base);
 });
-var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.typographyType,
+
+var isAnchorProps$1 = function isAnchorProps(props) {
+  return props.typographyType === 'a';
+};
+
+var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a;
+
+  var _b = props.typographyType,
       typographyType = _b === void 0 ? 'bodySans02' : _b,
-      propAs = _a.as,
-      externalLink = _a.externalLink,
-      target = _a.target,
-      children = _a.children,
-      rest = __rest(_a, ["typographyType", "as", "externalLink", "target", "children"]);
+      propAs = props.as,
+      children = props.children,
+      rest = __rest(props, ["typographyType", "as", "children"]);
 
   var as = propAs ? propAs : getElementType(typographyType);
+  var relProp;
+  var targetProp;
+  var renderWrapper = false;
 
-  var typographyProps = __assign({
+  if (isAnchorProps$1(props)) {
+    var externalLink = props.externalLink,
+        target = props.target;
+    renderWrapper = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
+    relProp = as === 'a' ? 'noopener noreferer' : undefined;
+    targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
+  }
+
+  var typographyProps = __assign(__assign({}, rest), {
     typographyType: typographyType,
     as: as,
-    rel: as === 'a' ? 'noopener noreferer' : undefined,
-    target: as !== 'a' ? undefined : externalLink ? '_blank' : target
-  }, rest);
+    rel: relProp,
+    target: targetProp
+  });
 
   return jsxRuntime.exports.jsxs(StyledTypography, __assign({
     ref: ref
   }, typographyProps, {
-    children: [children, ' ', as === 'a' && externalLink ? jsxRuntime.exports.jsx(LinkIconWrapper, {
+    children: [children, renderWrapper && jsxRuntime.exports.jsx(LinkIconWrapper, {
       Icon: default_1$k,
       iconSize: "inline"
-    }) : '']
+    })]
   }));
 });
 var templateObject_1$Z, templateObject_2$J, templateObject_3$v, templateObject_4$p, templateObject_5$g, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$2;
@@ -20387,6 +20402,39 @@ var Container$j = styled$3.label.withConfig({
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
 var templateObject_1$Y, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$f, templateObject_6$d;
 
+/**
+ * Slår sammen htmlProps, id, og unknownProps til ett objekt som
+ * kan spreades som baseprops for en komponent. `unknownProps` er
+ * med for å sikre at aria- og data- attributter blir spreadet, alle
+ * komponenter må derfor ta hensyn til `...rest` når de leser props.
+ *
+ * Typisk bruk:
+ * ```
+ * const Props = BaseComponentProps<HTMLElement, {
+ *   propA: string,
+ *   propB: string,
+ * }>
+ *
+ * const MyComponent = (props: Props) => {
+ *   const { propA, propB, id, htmlProps, ...rest } = props;
+ *
+ *   const wrapperProps = getBaseHTMLProps(id, htmlProps, rest)
+ *
+ *   return <div {...wrapperProps}>innhold</div>
+ * }
+ * ```
+ * @param id id fra props til komponenten.
+ * @param htmlProps htmlProps fra komponenten.
+ * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
+ * @returns Objekt med alle argumentene som kan spreades.
+ */
+
+var getBaseHTMLProps = function getBaseHTMLProps(id, htmlProps, unknownProps) {
+  return __assign(__assign(__assign({}, unknownProps), htmlProps), {
+    id: id
+  });
+};
+
 var nextUniqueId$h = 0;
 
 var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
@@ -20401,22 +20449,26 @@ var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(v
   return !!value;
 };
 
-var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var id = _a.id,
-      name = _a.name,
-      label = _a.label,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      error = _a.error,
-      style = _a.style,
-      checked = _a.checked,
-      value = _a.value,
-      className = _a.className,
-      children = _a.children,
-      required = _a.required,
-      onChange = _a.onChange,
-      ariaDescribedby = _a["aria-describedby"],
-      rest = __rest(_a, ["id", "name", "label", "disabled", "readOnly", "error", "style", "checked", "value", "className", "children", "required", "onChange", 'aria-describedby']);
+var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      error = props.error,
+      checked = props.checked,
+      value = props.value,
+      children = props.children,
+      required = props.required,
+      onChange = props.onChange,
+      ariaDescribedby = props["aria-describedby"],
+      _a = props.htmlProps,
+      htmlProps = _a === void 0 ? {} : _a,
+      rest = __rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "htmlProps"]);
+
+  var className = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["className", "style"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "radioButton-".concat(nextUniqueId$h++))[0];
   var radioButtonGroup = useRadioButtonGroup();
@@ -20430,7 +20482,7 @@ var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
   if (ariaDescribedby) describedByIds.push(ariaDescribedby);
 
-  var inputProps = __assign({
+  var inputProps = __assign(__assign({}, getBaseHTMLProps(id, restHtmlProps, rest)), {
     id: uniqueId,
     name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
     disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
@@ -20440,7 +20492,7 @@ var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     value: value,
     'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
     'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
-  }, rest);
+  });
 
   var containerProps = {
     error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
@@ -20769,15 +20821,17 @@ var InputMessageWrapper = styled$3.div.withConfig({
   var messageType = _a.messageType;
   return messageType && Ae(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), inputMessageTokens[messageType].base);
 }, inputMessageTokens.icon.spaceRight);
-var InputMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var message = _a.message,
-      messageType = _a.messageType,
-      rest = __rest(_a, ["message", "messageType"]);
-
-  var wrapperProps = __assign({
+var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      messageType = props.messageType,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "messageType", "id", "htmlProps"]);
+
+  var wrapperProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     messageType: messageType
-  }, rest);
+  });
 
   var isError = messageType === 'error';
   return jsxRuntime.exports.jsxs(InputMessageWrapper, __assign({}, wrapperProps, {
@@ -20886,9 +20940,9 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
       children = _a.children,
       required = _a.required,
       onChange = _a.onChange,
-      className = _a.className,
-      style = _a.style,
-      rest = __rest(_a, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "className", "style"]);
+      id = _a.id,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "htmlProps"]);
 
   var _c = useState(value),
       groupValue = _c[0],
@@ -20904,12 +20958,6 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   var hasTip = !!tip;
   var tipId = hasTip ? "".concat(uniqueGroupId, "-tip") : undefined;
   var errorMessageId = hasErrorMessage ? "".concat(uniqueGroupId, "-errorMessage") : undefined;
-
-  var containerProps = __assign({
-    className: className,
-    style: style
-  }, rest);
-
   var contextProps = {
     name: name,
     disabled: disabled,
@@ -20920,7 +20968,7 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
     value: groupValue,
     onChange: handleChange
   };
-  return jsxRuntime.exports.jsxs(Container$i, __assign({}, containerProps, {
+  return jsxRuntime.exports.jsxs(Container$i, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     children: [jsxRuntime.exports.jsxs(Label$4, __assign({
       forwardedAs: "span",
       typographyType: "supportingStyleLabel01",
@@ -21130,21 +21178,26 @@ var useCheckboxGroup = function useCheckboxGroup() {
 };
 
 var nextUniqueId$g = 0;
-var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var id = _a.id,
-      name = _a.name,
-      label = _a.label,
-      error = _a.error,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      indeterminate = _a.indeterminate,
-      ariaDescribedby = _a["aria-describedby"],
-      className = _a.className,
-      style = _a.style,
-      rest = __rest(_a, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "style"]);
+var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      error = props.error,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      indeterminate = props.indeterminate,
+      ariaDescribedby = props["aria-describedby"],
+      _a = props.htmlProps,
+      htmlProps = _a === void 0 ? {} : _a,
+      rest = __rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "htmlProps"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "checkbox-".concat(nextUniqueId$g++))[0];
   var checkboxGroup = useCheckboxGroup();
+
+  var className = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["className", "style"]);
+
   var containerProps = {
     error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
     disabled: disabled,
@@ -21156,7 +21209,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: style
   };
 
-  var inputProps = __assign({
+  var inputProps = __assign(__assign({}, getBaseHTMLProps(id, restHtmlProps, rest)), {
     ref: ref,
     id: uniqueId,
     name: name,
@@ -21167,7 +21220,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     'aria-labelledby': checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.uniqueGroupId,
     'aria-checked': indeterminate ? 'mixed' : undefined,
     'aria-readonly': readOnly
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsxs(Container$h, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsx(Input$4, __assign({}, inputProps, {
@@ -21805,22 +21858,24 @@ var Circle = styled$3.circle.withConfig({
   return innerAnimationDelay;
 });
 var nextUniqueId$f = 0;
-function Spinner(_a) {
-  var _b = _a.size,
-      size = _b === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _b,
-      _c = _a.color,
-      color = _c === void 0 ? 'interactive' : _c,
-      rest = __rest(_a, ["size", "color"]);
+function Spinner(props) {
+  var _a = props.size,
+      size = _a === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _a,
+      _b = props.color,
+      color = _b === void 0 ? 'interactive' : _b,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["size", "color", "id", "htmlProps"]);
 
   var mountTime = React__default.useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
   var uniqueId = useState("spinnerTitle-".concat(nextUniqueId$f++))[0];
 
-  var spinnerProps = __assign({
+  var spinnerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     outerAnimationDelay: outerAnimationDelay,
     size: size
-  }, rest);
+  });
 
   var circleProps = {
     innerAnimationDelay: innerAnimationDelay,
@@ -21897,33 +21952,35 @@ var Label$2 = styled$3.span.withConfig({
 });
 var templateObject_1$N, templateObject_2$A, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 
-var Button$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var label = _a.label,
-      disabled = _a.disabled,
-      _b = _a.purpose,
-      purpose = _b === void 0 ? 'primary' : _b,
-      _c = _a.size,
-      size = _c === void 0 ? 'medium' : _c,
-      _d = _a.iconPosition,
-      iconPosition = _d === void 0 ? 'left' : _d,
-      _e = _a.appearance,
-      appearance = _e === void 0 ? 'filled' : _e,
-      href = _a.href,
-      target = _a.target,
-      _f = _a.loading,
-      loading = _f === void 0 ? false : _f,
-      _g = _a.fullWidth,
-      fullWidth = _g === void 0 ? false : _g,
-      className = _a.className,
-      style = _a.style,
-      Icon = _a.Icon,
-      rest = __rest(_a, ["label", "disabled", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "className", "style", "Icon"]);
+var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+      _a = props.purpose,
+      purpose = _a === void 0 ? 'primary' : _a,
+      _b = props.size,
+      size = _b === void 0 ? 'medium' : _b,
+      _c = props.iconPosition,
+      iconPosition = _c === void 0 ? 'left' : _c,
+      _d = props.appearance,
+      appearance = _d === void 0 ? 'filled' : _d,
+      href = props.href,
+      target = props.target,
+      _e = props.loading,
+      loading = _e === void 0 ? false : _e,
+      _f = props.fullWidth,
+      fullWidth = _f === void 0 ? false : _f,
+      Icon = props.Icon,
+      onClick = props.onClick,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "Icon", "onClick", "onFocus", "onBlur", "id", "htmlProps"]);
 
   var as = href ? 'a' : 'button';
   var hasLabel = !!label;
   var hasIcon = !!Icon;
 
-  var wrapperProps = __assign({
+  var wrapperProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     href: href,
     label: label,
     as: as,
@@ -21937,11 +21994,11 @@ var Button$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     hasLabel: hasLabel,
     hasIcon: hasIcon,
     isLoading: loading,
-    disabled: disabled,
     size: size,
-    className: className,
-    style: style
-  }, rest);
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
 
   var isIconButton = !hasLabel && hasIcon;
 
@@ -22036,19 +22093,20 @@ var Wrapper$7 = styled$3(Typography).withConfig({
 })(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  margin-left: auto;\n  ", "\n"], ["\n  margin-left: auto;\n  ", "\n"])), charCounterTokens.base);
 var nextUniqueId$e = 0;
 
-function CharCounter(_a) {
-  var current = _a.current,
-      max = _a.max,
-      id = _a.id,
-      rest = __rest(_a, ["current", "max", "id"]);
+function CharCounter(props) {
+  var current = props.current,
+      max = props.max,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["current", "max", "id", "htmlProps"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId$e++))[0];
-  return jsxRuntime.exports.jsxs(Wrapper$7, __assign({
+  return jsxRuntime.exports.jsxs(Wrapper$7, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     id: uniqueId,
     "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
-  }, rest, {
+  }, {
     children: [current, "/", max]
   }));
 }
@@ -27570,25 +27628,27 @@ var ContentContainer$4 = styled$3.div.withConfig({
   var closable = _a.closable;
   return closable && Ae(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), globalMessageTokens.contentContainer.withClosable.base);
 });
-var GlobalMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var message = _a.message,
-      _b = _a.purpose,
-      purpose = _b === void 0 ? 'info' : _b,
-      closable = _a.closable,
-      onClose = _a.onClose,
-      children = _a.children,
-      rest = __rest(_a, ["message", "purpose", "closable", "onClose", "children"]);
+var GlobalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      _a = props.purpose,
+      purpose = _a === void 0 ? 'info' : _a,
+      closable = props.closable,
+      onClose = props.onClose,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "purpose", "closable", "onClose", "children", "id", "htmlProps"]);
 
-  var _c = useState(false),
-      isClosed = _c[0],
-      setClosed = _c[1];
+  var _b = useState(false),
+      isClosed = _b[0],
+      setClosed = _b[1];
 
   var buttonPurpose = globalMessageTokens.button[purpose].purpose;
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     purpose: purpose
-  }, rest);
+  });
 
   return !isClosed ? jsxRuntime.exports.jsxs(Container$e, __assign({}, containerProps, {
     children: [jsxRuntime.exports.jsxs(ContentContainer$4, __assign({
@@ -27845,31 +27905,33 @@ var TopContainer = styled$3.div.withConfig({
   var closable = _a.closable;
   return closable && Ae(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), localMessageTokens.topContainer.withClosable.base);
 });
-var LocalMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var message = _a.message,
-      _b = _a.purpose,
-      purpose = _b === void 0 ? 'info' : _b,
-      closable = _a.closable,
-      onClose = _a.onClose,
-      _c = _a.width,
-      width = _c === void 0 ? localMessageTokens.container.defaultWidth : _c,
-      _d = _a.layout,
-      layout = _d === void 0 ? 'horisontal' : _d,
-      children = _a.children,
-      rest = __rest(_a, ["message", "purpose", "closable", "onClose", "width", "layout", "children"]);
+var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      _a = props.purpose,
+      purpose = _a === void 0 ? 'info' : _a,
+      closable = props.closable,
+      onClose = props.onClose,
+      _b = props.width,
+      width = _b === void 0 ? localMessageTokens.container.defaultWidth : _b,
+      _c = props.layout,
+      layout = _c === void 0 ? 'horisontal' : _c,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "purpose", "closable", "onClose", "width", "layout", "children", "id", "htmlProps"]);
 
-  var _e = useState(false),
-      isClosed = _e[0],
-      setClosed = _e[1];
+  var _d = useState(false),
+      isClosed = _d[0],
+      setClosed = _d[1];
 
   var buttonPurpose = localMessageTokens.button[purpose].purpose;
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     purpose: purpose,
     width: width,
     layout: layout,
     ref: ref
-  }, rest);
+  });
 
   var contentContainerProps = {
     layout: layout,
@@ -28548,16 +28610,16 @@ var Breadcrumb = /*#__PURE__*/forwardRef(function (_a, ref) {
       href = _a.href,
       rest = __rest(_a, ["children", "href"]);
 
-  return href ? jsxRuntime.exports.jsx(Typography, __assign({
+  return href ? jsxRuntime.exports.jsx(Typography, __assign({}, rest, {
     ref: ref,
     href: href,
     typographyType: "a"
-  }, rest, {
+  }, {
     children: children
-  })) : jsxRuntime.exports.jsx(Typography, __assign({
+  })) : jsxRuntime.exports.jsx(Typography, __assign({}, rest, {
     ref: ref,
     color: "interactive"
-  }, rest, {
+  }, {
     children: children
   }));
 });
@@ -28637,10 +28699,12 @@ var BackIcon = styled$3(default_1$7).withConfig({
   displayName: "Breadcrumbs__BackIcon",
   componentId: "sc-xdj21o-3"
 })(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), breadcrumbTokens.icon.base);
-var Breadcrumbs = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var smallScreen = _a.smallScreen,
-      children = _a.children,
-      rest = __rest(_a, ["smallScreen", "children"]);
+var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var smallScreen = props.smallScreen,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["smallScreen", "children", "id", "htmlProps"]);
 
   var breadcrumbIconSize = breadcrumbTokens.icon.size;
   var childrenArray = Children.toArray(children);
@@ -28659,10 +28723,10 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (_a, ref) {
       }) : '', item]
     }, "breadcrumb-".concat(index));
   });
-  return jsxRuntime.exports.jsx("nav", __assign({
+  return jsxRuntime.exports.jsx("nav", __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     ref: ref,
     "aria-label": "br\xF8dsmulesti"
-  }, rest, {
+  }, {
     children: jsxRuntime.exports.jsx(List$2, {
       children: breadcrumbChildren
     })
@@ -28831,18 +28895,18 @@ var IndicatorsContainer = styled$3.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
   componentId: "sc-5ltegq-4"
 })(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: ", ";\n"])), paginationTokens.indicatorsContainer.spacing);
-var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var itemsAmount = _a.itemsAmount,
-      _b = _a.defaultItemsPerPage,
-      defaultItemsPerPage = _b === void 0 ? 10 : _b,
-      _c = _a.defaultActivePage,
-      defaultActivePage = _c === void 0 ? 1 : _c,
-      _d = _a.withPagination,
-      withPagination = _d === void 0 ? true : _d,
-      withCounter = _a.withCounter,
-      withSelect = _a.withSelect,
-      _e = _a.selectOptions,
-      selectOptions = _e === void 0 ? [{
+var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
+  var itemsAmount = props.itemsAmount,
+      _a = props.defaultItemsPerPage,
+      defaultItemsPerPage = _a === void 0 ? 10 : _a,
+      _b = props.defaultActivePage,
+      defaultActivePage = _b === void 0 ? 1 : _b,
+      _c = props.withPagination,
+      withPagination = _c === void 0 ? true : _c,
+      withCounter = props.withCounter,
+      withSelect = props.withSelect,
+      _d = props.selectOptions,
+      selectOptions = _d === void 0 ? [{
     label: '10',
     value: 10
   }, {
@@ -28854,19 +28918,21 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, {
     label: 'Alle',
     value: itemsAmount
-  }] : _e,
-      smallScreen = _a.smallScreen,
-      onChange = _a.onChange,
-      onSelectOptionChange = _a.onSelectOptionChange,
-      rest = __rest(_a, ["itemsAmount", "defaultItemsPerPage", "defaultActivePage", "withPagination", "withCounter", "withSelect", "selectOptions", "smallScreen", "onChange", "onSelectOptionChange"]);
-
-  var _f = useState(defaultActivePage),
-      activePage = _f[0],
-      setActivePage = _f[1];
-
-  var _g = useState(defaultItemsPerPage),
-      itemsPerPage = _g[0],
-      setItemsPerPage = _g[1];
+  }] : _d,
+      smallScreen = props.smallScreen,
+      onChange = props.onChange,
+      onSelectOptionChange = props.onSelectOptionChange,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["itemsAmount", "defaultItemsPerPage", "defaultActivePage", "withPagination", "withCounter", "withSelect", "selectOptions", "smallScreen", "onChange", "onSelectOptionChange", "id", "htmlProps"]);
+
+  var _e = useState(defaultActivePage),
+      activePage = _e[0],
+      setActivePage = _e[1];
+
+  var _f = useState(defaultItemsPerPage),
+      itemsPerPage = _f[0],
+      setItemsPerPage = _f[1];
 
   var pagesLength = Math.ceil(itemsAmount / itemsPerPage);
   var items = PaginationGenerator(pagesLength, activePage);
@@ -28927,11 +28993,11 @@ var Pagination = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-label": "G\xE5 til neste siden"
   });
 
-  var navProps = !withSelect && !withCounter && __assign({}, rest);
+  var navProps = !withSelect && !withCounter && __assign({}, getBaseHTMLProps(id, htmlProps, rest));
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     smallScreen: smallScreen
-  }, rest);
+  });
 
   var isOnFirstPage = activePage === 1;
   var isOnLastPage = activePage === pagesLength;
@@ -29058,14 +29124,16 @@ var DividerLine = styled$3.hr.withConfig({
   var color = _a.color;
   return color && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      border-color: ", ";\n    "], ["\n      border-color: ", ";\n    "])), dividerColors[color]);
 });
-var Divider = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.color,
-      color = _b === void 0 ? 'primary' : _b,
-      rest = __rest(_a, ["color"]);
-
-  var lineProps = __assign({
+var Divider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.color,
+      color = _a === void 0 ? 'primary' : _a,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["color", "id", "htmlProps"]);
+
+  var lineProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     color: color
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(DividerLine, __assign({
     ref: ref
@@ -29143,22 +29211,24 @@ var StyledList = styled$3.ul.withConfig({
   var listType = _a.listType;
   return listType === 'unordered' ? Ae(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "], ["\n          padding-left: ", ";\n          list-style: none;\n          li {\n            position: relative;\n            padding-left: ", ";\n            &:before {\n              content: '';\n              display: inline-block;\n              height: 1em;\n              width: 1em;\n              position: absolute;\n              top: ", ";\n              left: 0;\n              background-size: contain;\n              background-repeat: no-repeat;\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n            ul > li > ul > li:before {\n              // disable eslint to ensure double quotes in url due to svg data URI in image bundle that requires them, as the attributes use single quotes\n              // eslint-disable-next-line\n              // prettier-ignore\n              background-image: url(\"", "\");\n            }\n          }\n        "])), "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), img$3, img$2, img$1) : Ae(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "], ["\n          padding-left: ", ";\n          & > li > ol {\n            list-style-type: lower-alpha;\n          }\n          & > li > ol > li > ol {\n            list-style-type: lower-roman;\n          }\n        "])), listTokens.spaceLeft);
 });
-var List = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.listType,
-      listType = _b === void 0 ? 'unordered' : _b,
-      _c = _a.typographyType,
-      typographyType = _c === void 0 ? 'inherit' : _c,
-      children = _a.children,
-      rest = __rest(_a, ["listType", "typographyType", "children"]);
+var List = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.listType,
+      listType = _a === void 0 ? 'unordered' : _a,
+      _b = props.typographyType,
+      typographyType = _b === void 0 ? 'inherit' : _b,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["listType", "typographyType", "children", "id", "htmlProps"]);
 
   var as = listType === 'ordered' ? 'ol' : 'ul';
 
-  var listProps = __assign({
+  var listProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     listType: listType,
     typographyType: typographyType,
     as: as,
     ref: ref
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(StyledList, __assign({}, listProps, {
     children: children
@@ -29215,16 +29285,18 @@ var DList = styled$3.dl.withConfig({
   var appearance = _a.appearance;
   return appearance && Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n      dt {\n        ", "\n      }\n    "], ["\n      dt {\n        ", "\n      }\n    "])), descriptionListTermTokens.appearance[appearance].base);
 }, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
-var DescriptionList = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.appearance,
-      appearance = _b === void 0 ? 'bold' : _b,
-      children = _a.children,
-      rest = __rest(_a, ["appearance", "children"]);
-
-  var dListProps = __assign({
+var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.appearance,
+      appearance = _a === void 0 ? 'bold' : _a,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["appearance", "children", "id", "htmlProps"]);
+
+  var dListProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     appearance: appearance,
     ref: ref
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(DList, __assign({}, dListProps, {
     children: children
@@ -29276,15 +29348,17 @@ var StyledIconWrapper$1 = styled$3(IconWrapper$1).withConfig({
   displayName: "DescriptionListDesc__StyledIconWrapper",
   componentId: "sc-1djcf0s-1"
 })(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), descriptionListDescTokens.icon.base);
-var DescriptionListDesc = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      Icon = _a.Icon,
-      rest = __rest(_a, ["children", "Icon"]);
+var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      Icon = props.Icon,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "Icon", "id", "htmlProps"]);
 
-  var dListDescProps = __assign({
+  var dListDescProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     children: children,
     ref: ref
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsxs(DListDesc, __assign({}, dListDescProps, {
     children: [Icon && jsxRuntime.exports.jsx(StyledIconWrapper$1, {
@@ -29309,14 +29383,18 @@ var DListGroup = styled$3.div.withConfig({
   var margin = _a.margin;
   return margin && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), margin);
 });
-var DescriptionListGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      rest = __rest(_a, ["children"]);
+var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      margin = props.margin,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "margin", "id", "htmlProps"]);
 
-  var dListGroupProps = __assign({
+  var dListGroupProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     children: children,
-    ref: ref
-  }, rest);
+    ref: ref,
+    margin: margin
+  });
 
   return jsxRuntime.exports.jsx(DListGroup, __assign({}, dListGroupProps, {
     children: children
@@ -29394,28 +29472,37 @@ var Container$a = styled$3.div.withConfig({
   return cardType === 'navigation' ? Ae(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "], ["\n          text-decoration: none;\n          &:hover {\n            ", "\n          }\n          &:focus {\n            outline: none;\n            ", "\n          }\n        "])), cardTokens.navigation.hover.base, cardTokens.navigation.focus.base) : cardType === 'expandable' ? Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n          width: 100%;\n          box-sizing: border-box;\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "], ["\n          width: 100%;\n          box-sizing: border-box;\n          &:not(:first-of-type) {\n            border-top: none;\n          }\n        "]))) : '';
 });
 var Card = function Card(props) {
-  var _a;
-
-  var color = (_a = props.color) !== null && _a !== void 0 ? _a : 'filledLight';
-
-  if (props.cardType === 'navigation') {
-    return jsxRuntime.exports.jsx(Container$a, __assign({}, props, {
-      cardType: props.cardType,
+  var _a = props.color,
+      color = _a === void 0 ? 'filledLight' : _a,
+      cardType = props.cardType,
+      cardRef = props.cardRef,
+      children = props.children,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["color", "cardType", "cardRef", "children", "id", "htmlProps"]);
+
+  if (cardType === 'navigation') {
+    var href = props.href,
+        target = props.target;
+    return jsxRuntime.exports.jsx(Container$a, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
+      cardType: cardType,
       color: color,
       as: "a",
-      ref: props.cardRef
+      ref: cardRef,
+      href: href,
+      target: target
     }, {
-      children: props.children
+      children: children
     }));
   }
 
-  return jsxRuntime.exports.jsx(Container$a, __assign({}, props, {
-    cardType: props.cardType,
+  return jsxRuntime.exports.jsx(Container$a, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
+    cardType: cardType,
     color: color,
     as: "div",
-    ref: props.cardRef
+    ref: cardRef
   }, {
-    children: props.children
+    children: children
   }));
 };
 var templateObject_1$p, templateObject_2$i, templateObject_3$c, templateObject_4$7;
@@ -29425,16 +29512,17 @@ var Wrapper$4 = styled$3.div.withConfig({
   componentId: "sc-1ctxrby-0"
 })(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
 var nextUniqueId$a = 0;
-var CardAccordion = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.isExpanded,
-      isExpanded = _b === void 0 ? false : _b,
-      id = _a.id,
-      children = _a.children,
-      rest = __rest(_a, ["isExpanded", "id", "children"]);
-
-  var _c = useState(isExpanded),
-      expanded = _c[0],
-      setExpanded = _c[1];
+var CardAccordion = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.isExpanded,
+      isExpanded = _a === void 0 ? false : _a,
+      id = props.id,
+      children = props.children,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["isExpanded", "id", "children", "htmlProps"]);
+
+  var _b = useState(isExpanded),
+      expanded = _b[0],
+      setExpanded = _b[1];
 
   var uniqueId = nextUniqueId$a++;
   var accordionId = useState(id !== null && id !== void 0 ? id : "cardAccordion-".concat(uniqueId))[0];
@@ -29461,11 +29549,11 @@ var CardAccordion = /*#__PURE__*/forwardRef(function (_a, ref) {
     }));
   });
 
-  var props = __assign({
+  var wrapperProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref
-  }, rest);
+  });
 
-  return jsxRuntime.exports.jsx(Wrapper$4, __assign({}, props, {
+  return jsxRuntime.exports.jsx(Wrapper$4, __assign({}, wrapperProps, {
     children: Children$1
   }));
 });
@@ -29524,13 +29612,15 @@ var ChevronWrapper = styled$3.span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"
 })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), cardAccordionHeaderTokens.chevronWrapper.base);
-var CardAccordionHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      _b = _a.isExpanded,
-      isExpanded = _b === void 0 ? false : _b,
-      toggleExpanded = _a.toggleExpanded,
-      bodyId = _a.bodyId,
-      rest = __rest(_a, ["children", "isExpanded", "toggleExpanded", "bodyId"]);
+var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      _a = props.isExpanded,
+      isExpanded = _a === void 0 ? false : _a,
+      toggleExpanded = props.toggleExpanded,
+      bodyId = props.bodyId,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "htmlProps"]);
 
   var handleClick = function handleClick() {
     if (toggleExpanded) {
@@ -29538,12 +29628,12 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
 
-  var headerWrapperProps = __assign({
+  var headerWrapperProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     'aria-expanded': isExpanded,
     'aria-controls': bodyId,
     ref: ref,
     onClick: handleClick
-  }, rest);
+  });
 
   var chevronProps = {
     isUp: isExpanded,
@@ -29594,17 +29684,19 @@ var BodyContainer = styled$3.div.withConfig({
   var maxHeight = _a.maxHeight;
   return maxHeight ? maxHeight : 0;
 });
-var CardAccordionBody = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      isExpanded = _a.isExpanded,
-      headerId = _a.headerId,
-      rest = __rest(_a, ["children", "isExpanded", "headerId"]);
+var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      isExpanded = props.isExpanded,
+      headerId = props.headerId,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "isExpanded", "headerId", "id", "htmlProps"]);
 
   var bodyRef = useRef(null);
 
-  var _b = useState(0),
-      maxHeight = _b[0],
-      setMaxHeight = _b[1];
+  var _a = useState(0),
+      maxHeight = _a[0],
+      setMaxHeight = _a[1];
 
   useEffect(function () {
     if (!isExpanded) {
@@ -29614,21 +29706,21 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }, [isExpanded]);
 
-  var bodyProps = __assign({
+  var bodyProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     isExpanded: isExpanded,
     role: 'region'
-  }, rest);
+  });
 
   var bodyContainerProps = {
     ref: bodyRef,
     maxHeight: maxHeight,
     isExpanded: isExpanded
   };
-  return jsxRuntime.exports.jsx(Body, __assign({
+  return jsxRuntime.exports.jsx(Body, __assign({}, bodyProps, {
     "aria-labelledby": headerId,
     "aria-hidden": !isExpanded
-  }, bodyProps, {
+  }, {
     children: jsxRuntime.exports.jsxs(BodyContainer, __assign({}, bodyContainerProps, {
       children: [" ", children, " "]
     }))
@@ -31544,16 +31636,35 @@ var StyledIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "OverflowMenuItem__StyledIconWrapper",
   componentId: "sc-1ka2asi-2"
 })(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject([""], [""])));
-var OverflowMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var title = _a.title,
-      href = _a.href,
-      onClick = _a.onClick,
-      onKeyDown = _a.onKeyDown,
-      Icon = _a.Icon,
-      focus = _a.focus,
-      setFocus = _a.setFocus,
-      index = _a.index,
-      rest = __rest(_a, ["title", "href", "onClick", "onKeyDown", "Icon", "focus", "setFocus", "index"]);
+
+var isAnchorProps = function isAnchorProps(props) {
+  return props.href !== undefined;
+};
+
+var isButtonProps = function isButtonProps(props) {
+  return props.href === undefined && props.onClick !== undefined;
+};
+
+var OverflowMenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+      Icon = props.Icon,
+      focus = props.focus,
+      setFocus = props.setFocus,
+      index = props.index,
+      id = props.id,
+      _a = props.htmlProps,
+      htmlProps = _a === void 0 ? {} : _a,
+      rest = __rest(props, ["title", "Icon", "focus", "setFocus", "index", "id", "htmlProps"]);
+
+  var onKeyDown = htmlProps.onKeyDown;
+  var href;
+  var onClick;
+
+  if (isAnchorProps(props)) {
+    href = props.href;
+  } else if (isButtonProps(props)) {
+    onClick = props.onClick;
+  }
 
   var itemRef = useRef(null);
   var combinedRef = useCombinedRef(ref, itemRef);
@@ -31580,10 +31691,6 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     onKeyDown && onKeyDown(e);
   };
 
-  var elementProps = __assign({
-    ref: ref
-  }, rest);
-
   var linkProps = {
     href: href,
     onClick: handleOnClick,
@@ -31598,24 +31705,24 @@ var OverflowMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
 
   if (!href && !onClick) {
-    return jsxRuntime.exports.jsxs(Span, __assign({}, elementProps, {
+    return jsxRuntime.exports.jsxs(Span, __assign({}, __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
+      ref: ref
+    }), {
       children: [icon, title]
     }));
   }
 
   if (!href) {
-    return jsxRuntime.exports.jsxs(Link$2, __assign({
-      as: "button"
-    }, linkProps, rest, {
+    return jsxRuntime.exports.jsxs(Link$2, __assign({}, getBaseHTMLProps(id, htmlProps, rest), linkProps, {
+      as: "button",
       ref: combinedRef
     }, {
       children: [icon, title]
     }));
   }
 
-  return jsxRuntime.exports.jsxs(Link$2, __assign({
-    as: "a"
-  }, linkProps, rest, {
+  return jsxRuntime.exports.jsxs(Link$2, __assign({}, getBaseHTMLProps(id, htmlProps, rest), linkProps, {
+    as: "a",
     ref: combinedRef
   }, {
     children: [icon, title]
@@ -31657,35 +31764,39 @@ var StyledDivider = styled$3(Divider).withConfig({
   displayName: "OverflowMenu__StyledDivider",
   componentId: "sc-kh744b-2"
 })(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), overflowMenuTokens.divider.base);
-var OverflowMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b, _c;
-
-  var anchorRef = _a.anchorRef,
-      onClose = _a.onClose,
-      _d = _a.isOpen,
-      isOpen = _d === void 0 ? false : _d,
-      _e = _a.placement,
-      placement = _e === void 0 ? 'bottom-end' : _e,
-      items = _a.items,
-      navItems = _a.navItems,
-      userProps = _a.userProps,
-      id = _a.id,
-      _f = _a.offset,
-      offset = _f === void 0 ? overflowMenuTokens.offset : _f,
-      style = _a.style,
-      rest = __rest(_a, ["anchorRef", "onClose", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "style"]);
-
-  var _g = useFloatPosition(null, placement, offset),
-      reference = _g.reference,
-      floating = _g.floating,
-      refs = _g.refs,
-      styles = _g.styles;
+var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a, _b;
+
+  var anchorRef = props.anchorRef,
+      onClose = props.onClose,
+      _c = props.isOpen,
+      isOpen = _c === void 0 ? false : _c,
+      _d = props.placement,
+      placement = _d === void 0 ? 'bottom-end' : _d,
+      items = props.items,
+      navItems = props.navItems,
+      userProps = props.userProps,
+      id = props.id,
+      _e = props.offset,
+      offset = _e === void 0 ? overflowMenuTokens.offset : _e,
+      _f = props.htmlProps,
+      htmlProps = _f === void 0 ? {} : _f,
+      rest = __rest(props, ["anchorRef", "onClose", "isOpen", "placement", "items", "navItems", "userProps", "id", "offset", "htmlProps"]);
+
+  var _g = htmlProps.style,
+      style = _g === void 0 ? {} : _g;
+
+  var _h = useFloatPosition(null, placement, offset),
+      reference = _h.reference,
+      floating = _h.floating,
+      refs = _h.refs,
+      styles = _h.styles;
 
   var combinedRef = useCombinedRef(ref, floating);
   useEffect(function () {
     anchorRef ? reference(anchorRef.current) : reference(null);
   }, [anchorRef]);
-  useOnClickOutside([(_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current, (_c = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _c === void 0 ? void 0 : _c.current], function () {
+  useOnClickOutside([(_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current, (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current], function () {
     if (isOpen) onClose && onClose();
   });
   useOnKeyDown(['Esc', 'Escape'], function () {
@@ -31703,9 +31814,9 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasContextItems = !!items && items.length > 0;
   var hasNavItems = !!navItems && navItems.length > 0;
 
-  var _h = userProps || {},
-      username = _h.name,
-      userPropsRest = __rest(_h, ["name"]);
+  var _j = userProps || {},
+      username = _j.name,
+      userPropsRest = __rest(_j, ["name"]);
 
   var hasStaticUser = username && userProps && !userProps.href && !userProps.onClick;
   var hasInteractiveUser = username && userProps && (!!userProps.href || !!userProps.onClick);
@@ -31716,9 +31827,9 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
   hasContextItems && interactiveItems.push.apply(interactiveItems, items);
   var hasInteractiveItems = interactiveItems.length > 0;
 
-  var _j = useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
-      focus = _j[0],
-      setFocus = _j[1];
+  var _k = useRoveFocus(interactiveItems && interactiveItems.length, !isOpen),
+      focus = _k[0],
+      setFocus = _k[1];
 
   var interactiveItemsList = hasInteractiveItems ? interactiveItems.map(function (item, index) {
     return jsxRuntime.exports.jsx("li", {
@@ -31760,12 +31871,11 @@ var OverflowMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
 
-  var containerProps = __assign(__assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: combinedRef,
     id: id !== null && id !== void 0 ? id : useId('overflowMenu'),
     isOpen: isOpen,
-    style: __assign(__assign({}, style), styles.floating)
-  }, rest), {
+    style: __assign(__assign({}, style), styles.floating),
     'aria-hidden': !isOpen,
     role: 'menu'
   });
@@ -31831,8 +31941,8 @@ var OverflowMenuGroup = function OverflowMenuGroup(_a) {
       anchorRef: buttonRef
     }));
   });
-  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
-    children: [" ", Children$1, " "]
+  return jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, {
+    children: Children$1
   });
 };
 
@@ -31923,23 +32033,25 @@ var InternalHeaderListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 var templateObject_1$h;
 
-var InternalHeader = function InternalHeader(_a) {
-  var applicationName = _a.applicationName,
-      smallScreen = _a.smallScreen,
-      navigationElements = _a.navigationElements,
-      contextMenuElements = _a.contextMenuElements,
-      currentPageHref = _a.currentPageHref,
-      userProps = _a.userProps,
-      onCurrentPageChange = _a.onCurrentPageChange,
-      rest = __rest(_a, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange"]);
-
-  var _b = useState(true),
-      contextMenuIsClosed = _b[0],
-      setContextMenuIsClosed = _b[1];
-
-  var _c = useState(currentPageHref),
-      currentPage = _c[0],
-      setCurrentPage = _c[1];
+var InternalHeader = function InternalHeader(props) {
+  var applicationName = props.applicationName,
+      smallScreen = props.smallScreen,
+      navigationElements = props.navigationElements,
+      contextMenuElements = props.contextMenuElements,
+      currentPageHref = props.currentPageHref,
+      userProps = props.userProps,
+      onCurrentPageChange = props.onCurrentPageChange,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["applicationName", "smallScreen", "navigationElements", "contextMenuElements", "currentPageHref", "userProps", "onCurrentPageChange", "id", "htmlProps"]);
+
+  var _a = useState(true),
+      contextMenuIsClosed = _a[0],
+      setContextMenuIsClosed = _a[1];
+
+  var _b = useState(currentPageHref),
+      currentPage = _b[0],
+      setCurrentPage = _b[1];
 
   var buttonRef = useRef(null);
 
@@ -31982,7 +32094,7 @@ var InternalHeader = function InternalHeader(_a) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxRuntime.exports.jsxs(Wrapper$3, __assign({}, rest, {
+  return jsxRuntime.exports.jsxs(Wrapper$3, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     children: [jsxRuntime.exports.jsx(BannerWrapper, __assign({
       hasContextMenu: hasContextMenu
     }, {
@@ -32178,14 +32290,19 @@ var Link = styled$3.a.withConfig({
   displayName: "SkipToContent__Link",
   componentId: "sc-57o1qv-1"
 })(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
-var SkipToContent = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.text,
-      text = _b === void 0 ? 'Til hovedinnhold' : _b,
-      _c = _a.top,
-      top = _c === void 0 ? 0 : _c,
-      style = _a.style,
-      className = _a.className,
-      rest = __rest(_a, ["text", "top", "style", "className"]);
+var SkipToContent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.text,
+      text = _a === void 0 ? 'Til hovedinnhold' : _a,
+      _b = props.top,
+      top = _b === void 0 ? 0 : _b,
+      id = props.id,
+      _c = props.htmlProps,
+      htmlProps = _c === void 0 ? {} : _c,
+      rest = __rest(props, ["text", "top", "id", "htmlProps"]);
+
+  var className = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["className", "style"]);
 
   var wrapperProps = {
     top: top,
@@ -32193,9 +32310,9 @@ var SkipToContent = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: style
   };
   return jsxRuntime.exports.jsx(Wrapper$2, __assign({}, wrapperProps, {
-    children: jsxRuntime.exports.jsx(Link, __assign({
+    children: jsxRuntime.exports.jsx(Link, __assign({}, getBaseHTMLProps(id, restHtmlProps, rest), {
       ref: ref
-    }, rest, {
+    }, {
       children: text
     }))
   }));
@@ -32254,35 +32371,37 @@ var TooltipWrapper = styled$3.div.withConfig({
 var templateObject_1$e, templateObject_2$a, templateObject_3$6, templateObject_4$3;
 
 var nextUniqueId$7 = 0;
-var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var text = _a.text,
-      _b = _a.placement,
-      placement = _b === void 0 ? 'bottom' : _b,
-      children = _a.children,
-      tooltipId = _a.tooltipId,
-      _c = _a.delay,
-      delay = _c === void 0 ? 100 : _c,
-      style = _a.style,
-      onMouseLeave = _a.onMouseLeave,
-      onMouseOver = _a.onMouseOver,
-      className = _a.className,
-      rest = __rest(_a, ["text", "placement", "children", "tooltipId", "delay", "style", "onMouseLeave", "onMouseOver", "className"]);
+var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
+  var text = props.text,
+      _a = props.placement,
+      placement = _a === void 0 ? 'bottom' : _a,
+      children = props.children,
+      tooltipId = props.tooltipId,
+      _b = props.delay,
+      delay = _b === void 0 ? 100 : _b,
+      style = props.style,
+      onMouseLeave = props.onMouseLeave,
+      onMouseOver = props.onMouseOver,
+      className = props.className,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["text", "placement", "children", "tooltipId", "delay", "style", "onMouseLeave", "onMouseOver", "className", "id", "htmlProps"]);
 
   var uniqueId = nextUniqueId$7++;
   var uniqueTooltipId = useState(tooltipId !== null && tooltipId !== void 0 ? tooltipId : "tooltip-".concat(uniqueId))[0];
 
-  var _d = useState(false),
-      open = _d[0],
-      setOpen = _d[1];
+  var _c = useState(false),
+      open = _c[0],
+      setOpen = _c[1];
 
-  var _e = useState(null),
-      arrowElement = _e[0],
-      setArrowElement = _e[1];
+  var _d = useState(null),
+      arrowElement = _d[0],
+      setArrowElement = _d[1];
 
-  var _f = useFloatPosition(arrowElement, placement),
-      reference = _f.reference,
-      floating = _f.floating,
-      styles = _f.styles;
+  var _e = useFloatPosition(arrowElement, placement),
+      reference = _e.reference,
+      floating = _e.floating,
+      styles = _e.styles;
 
   var combinedRef = useCombinedRef(ref, floating);
   var timer;
@@ -32316,6 +32435,14 @@ var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
     onBlur: combineHandlers(closeTooltip, anchorProps.onBlur),
     'aria-describedby': uniqueTooltipId
   }));
+
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
+    style: style,
+    className: className,
+    onMouseLeave: combineHandlers(closeTooltip, onMouseLeave),
+    onMouseOver: combineHandlers(openTooltip, onMouseOver)
+  });
+
   var wrapperProps = {
     id: uniqueTooltipId,
     ref: combinedRef,
@@ -32324,14 +32451,6 @@ var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
     open: open,
     style: __assign({}, styles.floating)
   };
-
-  var containerProps = __assign({
-    style: style,
-    className: className,
-    onMouseLeave: combineHandlers(closeTooltip, onMouseLeave),
-    onMouseOver: combineHandlers(openTooltip, onMouseOver)
-  }, rest);
-
   var arrowWrapperProps = {
     ref: setArrowElement,
     style: styles.arrow
@@ -32415,17 +32534,18 @@ var StyledButton$2 = styled$3(Button$1).withConfig({
   componentId: "sc-12c14zx-3"
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  align-self: flex-end;\n"], ["\n  align-self: flex-end;\n"])));
 var nextUniqueId$6 = 0;
-var Modal = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.isOpen,
-      isOpen = _b === void 0 ? false : _b,
-      _c = _a.parentElement,
-      parentElement = _c === void 0 ? document.body : _c,
-      children = _a.children,
-      header = _a.header,
-      onClose = _a.onClose,
-      id = _a.id,
-      triggerRef = _a.triggerRef,
-      rest = __rest(_a, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef"]);
+var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.isOpen,
+      isOpen = _a === void 0 ? false : _a,
+      _b = props.parentElement,
+      parentElement = _b === void 0 ? document.body : _b,
+      children = props.children,
+      header = props.header,
+      onClose = props.onClose,
+      id = props.id,
+      triggerRef = props.triggerRef,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef", "htmlProps"]);
 
   var uniqueId = nextUniqueId$6++;
   var modalId = useState(id !== null && id !== void 0 ? id : "modal-".concat(uniqueId))[0];
@@ -32460,7 +32580,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_a, ref) {
     isOpen: hasTransitionedIn && isOpen
   };
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: combinedRef,
     role: 'dialog',
     'aria-modal': true,
@@ -32468,7 +32588,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_a, ref) {
     tabIndex: -1,
     'aria-labelledby': headerId,
     id: modalId
-  }, rest);
+  });
 
   var headerContainerProps = {
     id: headerId
@@ -32503,16 +32623,18 @@ var Container$6 = styled$3.div.withConfig({
   var scrollable = _a.scrollable;
   return scrollable && Ae(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "], ["\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n    "])), modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
 });
-var ModalBody = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      scrollable = _a.scrollable,
-      rest = __rest(_a, ["children", "scrollable"]);
+var ModalBody = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      scrollable = props.scrollable,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "scrollable", "id", "htmlProps"]);
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     tabIndex: scrollable ? 0 : undefined,
     scrollable: scrollable
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(Container$6, __assign({}, containerProps, {
     children: children
@@ -32596,21 +32718,22 @@ var StyledButton$1 = styled$3(Button$1).withConfig({
   componentId: "sc-i9luw3-3"
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: flex-end;\n"], ["\n  align-self: flex-end;\n"])));
 var nextUniqueId$5 = 0;
-var Drawer = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      onClose = _a.onClose,
-      header = _a.header,
-      _b = _a.isOpen,
-      isOpen = _b === void 0 ? false : _b,
-      _c = _a.placement,
-      placement = _c === void 0 ? 'right' : _c,
-      _d = _a.parentElement,
-      parentElement = _d === void 0 ? document.body : _d,
-      _e = _a.size,
-      size = _e === void 0 ? 'small' : _e,
-      triggerRef = _a.triggerRef,
-      id = _a.id,
-      rest = __rest(_a, ["children", "onClose", "header", "isOpen", "placement", "parentElement", "size", "triggerRef", "id"]);
+var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      onClose = props.onClose,
+      header = props.header,
+      _a = props.isOpen,
+      isOpen = _a === void 0 ? false : _a,
+      _b = props.placement,
+      placement = _b === void 0 ? 'right' : _b,
+      _c = props.parentElement,
+      parentElement = _c === void 0 ? document.body : _c,
+      _d = props.size,
+      size = _d === void 0 ? 'small' : _d,
+      triggerRef = props.triggerRef,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "onClose", "header", "isOpen", "placement", "parentElement", "size", "triggerRef", "id", "htmlProps"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "drawer-".concat(nextUniqueId$5++))[0];
   var hasHeader = !!header;
@@ -32632,7 +32755,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
   var hasTransitionedIn = useMountTransition(isOpen, 500);
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     placement: placement,
     ref: combinedRef,
     isOpen: hasTransitionedIn && isOpen,
@@ -32641,7 +32764,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_a, ref) {
     id: uniqueId,
     'aria-labelledby': headerId,
     size: size
-  }, rest);
+  });
 
   var headerContainerProps = {
     id: headerId
@@ -32781,22 +32904,24 @@ var StyledButton = styled$3(Button$1).withConfig({
   displayName: "Popover__StyledButton",
   componentId: "sc-1fecd7e-3"
 })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), popoverTokens.button.base);
-var Popover = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var title = _a.title,
-      _b = _a.isOpen,
-      isOpen = _b === void 0 ? false : _b,
-      _c = _a.withCloseButton,
-      withCloseButton = _c === void 0 ? true : _c,
-      onCloseButtonClick = _a.onCloseButtonClick,
-      onCloseButtonBlur = _a.onCloseButtonBlur,
-      anchorElement = _a.anchorElement,
-      children = _a.children,
-      _d = _a.placement,
-      placement = _d === void 0 ? 'bottom' : _d,
-      _e = _a.offset,
-      offset = _e === void 0 ? Spacing$2.SizesDdsSpacingLocalX05NumberPx : _e,
-      style = _a.style,
-      rest = __rest(_a, ["title", "isOpen", "withCloseButton", "onCloseButtonClick", "onCloseButtonBlur", "anchorElement", "children", "placement", "offset", "style"]);
+var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+      _a = props.isOpen,
+      isOpen = _a === void 0 ? false : _a,
+      _b = props.withCloseButton,
+      withCloseButton = _b === void 0 ? true : _b,
+      onCloseButtonClick = props.onCloseButtonClick,
+      onCloseButtonBlur = props.onCloseButtonBlur,
+      anchorElement = props.anchorElement,
+      children = props.children,
+      _c = props.placement,
+      placement = _c === void 0 ? 'bottom' : _c,
+      _d = props.offset,
+      offset = _d === void 0 ? Spacing$2.SizesDdsSpacingLocalX05NumberPx : _d,
+      id = props.id,
+      _e = props.htmlProps,
+      htmlProps = _e === void 0 ? {} : _e,
+      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onCloseButtonClick", "onCloseButtonBlur", "anchorElement", "children", "placement", "offset", "id", "htmlProps"]);
 
   var _f = useFloatPosition(null, placement, offset),
       reference = _f.reference,
@@ -32811,11 +32936,10 @@ var Popover = /*#__PURE__*/forwardRef(function (_a, ref) {
     };
   }, [anchorElement, isOpen]);
 
-  var wrapperProps = __assign(__assign({
+  var wrapperProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: multiRef,
     isOpen: isOpen,
-    style: __assign(__assign({}, style), styles.floating)
-  }, rest), {
+    style: __assign(__assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
 
@@ -32988,15 +33112,16 @@ var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
       Icon = _a.Icon,
-      rest = __rest(_a, ["id", "label", "Icon"]);
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["id", "label", "Icon", "htmlProps"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "toggleButton-".concat(nextUniqueId$2++))[0];
 
-  var inputProps = __assign({
+  var inputProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     id: uniqueId,
     type: 'checkbox'
-  }, rest);
+  });
 
   var containerProps = {
     htmlFor: uniqueId
@@ -33024,23 +33149,25 @@ var Container$2 = styled$3.div.withConfig({
   componentId: "sc-14ijdag-1"
 })(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleButtonTokens.container.base);
 var nextUniqueId$1 = 0;
-var ToggleButtonGroup = function ToggleButtonGroup(_a) {
-  var children = _a.children,
-      _b = _a.direction,
-      direction = _b === void 0 ? 'row' : _b,
-      label = _a.label,
-      labelId = _a.labelId,
-      props = __rest(_a, ["children", "direction", "label", "labelId"]);
+var ToggleButtonGroup = function ToggleButtonGroup(props) {
+  var children = props.children,
+      _a = props.direction,
+      direction = _a === void 0 ? 'row' : _a,
+      label = props.label,
+      labelId = props.labelId,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "direction", "label", "labelId", "id", "htmlProps"]);
 
   var uniqueLabelId = useState(labelId !== null && labelId !== void 0 ? labelId : "ToggleButtonGroupLabel-".concat(nextUniqueId$1++))[0];
   var groupProps = {
     direction: direction
   };
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     role: 'group',
     'aria-labelledby': label ? uniqueLabelId : undefined
-  }, props);
+  });
 
   return jsxRuntime.exports.jsxs(Container$2, __assign({}, containerProps, {
     children: [!!label && jsxRuntime.exports.jsx(Typography, __assign({
@@ -33080,26 +33207,28 @@ var Container$1 = styled$3.div.withConfig({
   componentId: "sc-7ta5g2-0"
 })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
 var nextUniqueId = 0;
-var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var id = _a.id,
-      _b = _a.activeTab,
-      activeTab = _b === void 0 ? 0 : _b,
-      onChange = _a.onChange,
-      _c = _a.tabContentDirection,
-      tabContentDirection = _c === void 0 ? 'row' : _c,
-      _d = _a.tabWidth,
-      tabWidth = _d === void 0 ? '150px' : _d,
-      rest = __rest(_a, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth"]);
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      _a = props.activeTab,
+      activeTab = _a === void 0 ? 0 : _a,
+      onChange = props.onChange,
+      _b = props.tabContentDirection,
+      tabContentDirection = _b === void 0 ? 'row' : _b,
+      _c = props.tabWidth,
+      tabWidth = _c === void 0 ? '150px' : _c,
+      children = props.children,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth", "children", "htmlProps"]);
 
   var uniqueId = useState(id !== null && id !== void 0 ? id : "tabs-".concat(nextUniqueId++))[0];
 
-  var _e = useState(activeTab),
-      thisActiveTab = _e[0],
-      setActiveTab = _e[1];
+  var _d = useState(activeTab),
+      thisActiveTab = _d[0],
+      setActiveTab = _d[1];
 
-  var _f = useState(false),
-      hasTabFocus = _f[0],
-      setHasTabFocus = _f[1];
+  var _e = useState(false),
+      hasTabFocus = _e[0],
+      setHasTabFocus = _e[1];
 
   var tabListRef = useRef(null);
   var tabPanelsRef = useRef(null);
@@ -33109,10 +33238,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     onChange && onChange(index);
   };
 
-  var containerProps = __assign({
+  var containerProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     id: uniqueId
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(TabsContext.Provider, __assign({
     value: {
@@ -33127,7 +33256,9 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
       tabWidth: tabWidth
     }
   }, {
-    children: jsxRuntime.exports.jsx(Container$1, __assign({}, containerProps))
+    children: jsxRuntime.exports.jsx(Container$1, __assign({}, containerProps, {
+      children: children
+    }))
   }));
 });
 var templateObject_1$6;
@@ -33241,28 +33372,30 @@ var Button = styled$3.button.withConfig({
   var active = _a.active;
   return active && Ae(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), tabsTokens.tab.active.base);
 }, tabsTokens.tab.focus.base, tabsTokens.tab.hover.base);
-var Tab = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.active,
-      active = _b === void 0 ? false : _b,
-      width = _a.width,
-      Icon = _a.Icon,
-      children = _a.children,
-      focus = _a.focus,
-      setFocus = _a.setFocus,
-      index = _a.index,
-      onClick = _a.onClick,
-      onKeyDown = _a.onKeyDown,
-      rest = __rest(_a, ["active", "width", "Icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown"]);
+var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a = props.active,
+      active = _a === void 0 ? false : _a,
+      width = props.width,
+      Icon = props.Icon,
+      children = props.children,
+      focus = props.focus,
+      setFocus = props.setFocus,
+      index = props.index,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["active", "width", "Icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "htmlProps"]);
 
   var itemRef = useRef(null);
   var combinedRef = useCombinedRef(ref, itemRef);
 
-  var _c = useTabsContext(),
-      tabPanelsRef = _c.tabPanelsRef,
-      hasTabFocus = _c.hasTabFocus,
-      setHasTabFocus = _c.setHasTabFocus,
-      tabContentDirection = _c.tabContentDirection,
-      tabWidth = _c.tabWidth;
+  var _b = useTabsContext(),
+      tabPanelsRef = _b.tabPanelsRef,
+      hasTabFocus = _b.hasTabFocus,
+      setHasTabFocus = _b.setHasTabFocus,
+      tabContentDirection = _b.tabContentDirection,
+      tabWidth = _b.tabWidth;
 
   useEffect(function () {
     var _a;
@@ -33295,7 +33428,7 @@ var Tab = /*#__PURE__*/forwardRef(function (_a, ref) {
     onKeyDown && onKeyDown(e);
   };
 
-  var buttonProps = __assign({
+  var buttonProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: combinedRef,
     'aria-selected': active,
     role: 'tab',
@@ -33305,7 +33438,7 @@ var Tab = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClick: handleOnClick,
     onKeyDown: handleOnKeyDown,
     tabIndex: focus ? 0 : -1
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsxs(Button, __assign({}, buttonProps, {
     children: [Icon && jsxRuntime.exports.jsx(IconWrapper$1, {
@@ -33373,14 +33506,14 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     onFocus && onFocus(event);
   };
 
-  var tabListProps = __assign({
+  var tabListProps = __assign(__assign({}, rest), {
     ref: combinedRef,
     role: 'tablist',
     'aria-label': 'Bruk venste og høyre piltast for å bla',
     id: uniqueId,
     tabIndex: 0,
     onFocus: handleOnFocus
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(TabRow, __assign({}, tabListProps, {
     children: tabListChildren
@@ -33399,14 +33532,16 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.active,
       active = _b === void 0 ? false : _b,
       children = _a.children,
-      rest = __rest(_a, ["active", "children"]);
+      id = _a.id,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["active", "children", "id", "htmlProps"]);
 
-  var panelProps = __assign({
+  var panelProps = __assign(__assign({}, getBaseHTMLProps(id, htmlProps, rest)), {
     ref: ref,
     tabIndex: 0,
     role: 'tabpanel',
     active: active
-  }, rest);
+  });
 
   return jsxRuntime.exports.jsx(Panel, __assign({}, panelProps, {
     children: children
@@ -33506,18 +33641,20 @@ var Inner = styled$3.span.withConfig({
   displayName: "Tag__Inner",
   componentId: "sc-rdxtch-1"
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), tagTokens.inner.base);
-var Tag = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var text = _a.text,
-      _b = _a.purpose,
-      purpose = _b === void 0 ? 'default' : _b,
-      rest = __rest(_a, ["text", "purpose"]);
-
-  return jsxRuntime.exports.jsx(Wrapper, __assign({
+var Tag = /*#__PURE__*/forwardRef(function (props, ref) {
+  var text = props.text,
+      _a = props.purpose,
+      purpose = _a === void 0 ? 'default' : _a,
+      id = props.id,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["text", "purpose", "id", "htmlProps"]);
+
+  return jsxRuntime.exports.jsx(Wrapper, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     forwardedAs: "span",
     typographyType: "bodySans01",
     ref: ref,
     purpose: purpose
-  }, rest, {
+  }, {
     children: jsxRuntime.exports.jsx(Inner, {
       children: text
     })
@@ -33571,11 +33708,15 @@ var TextWrapper = styled$3.span.withConfig({
   displayName: "Chip__TextWrapper",
   componentId: "sc-1l242zs-1"
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), chipTokens.text.base);
-var Chip = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var text = _a.text,
-      onClose = _a.onClose,
-      ariaLabel = _a["aria-label"],
-      rest = __rest(_a, ["text", "onClose", 'aria-label']);
+var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
+  var text = props.text,
+      onClose = props.onClose,
+      id = props.id,
+      _a = props.htmlProps,
+      htmlProps = _a === void 0 ? {} : _a,
+      rest = __rest(props, ["text", "onClose", "id", "htmlProps"]);
+
+  var ariaLabel = htmlProps["aria-label"];
 
   var _b = useState(true),
       isOpen = _b[0],
@@ -33586,7 +33727,7 @@ var Chip = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose && onClose();
   };
 
-  return isOpen ? jsxRuntime.exports.jsxs(Container, __assign({}, rest, {
+  return isOpen ? jsxRuntime.exports.jsxs(Container, __assign({}, getBaseHTMLProps(id, htmlProps, rest), {
     ref: ref
   }, {
     children: [jsxRuntime.exports.jsx(TextWrapper, {