@norges-domstoler/dds-components 12.1.3 → 13.0.1

package/dist/cjs/index.js

@@ -903,12 +903,12 @@ var message = {
     gap: spacing$A.SizesDdsSpacingLocalX05
   }
 };
-var icon$b = {
+var icon$a = {
   marginTop: spacing$A.SizesDdsSpacingLocalX0125
 };
 var inputMessageTokens = {
   message: message,
-  icon: icon$b
+  icon: icon$a
 };
 
 var size = 24;
@@ -4016,10 +4016,12 @@ function Spinner(props) {
     size = _props$size === void 0 ? ddsDesignTokens.ddsBaseTokens.iconSizes.DdsIconsizeMedium : _props$size,
     _props$color = props.color,
     color = _props$color === void 0 ? 'interactive' : _props$color,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? 'Innlasting pågår' : _props$tooltip,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["size", "color", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["size", "color", "tooltip", "id", "className", "htmlProps"]);
   var mountTime = React__default.default.useRef(Date.now());
   var outerAnimationDelay = -(mountTime.current % 2000);
   var innerAnimationDelay = -(mountTime.current % 1500);
@@ -4038,10 +4040,10 @@ function Spinner(props) {
     role: "img",
     "aria-labelledby": uniqueId
   }, spinnerProps, {
-    children: [jsxRuntime.jsx("title", Object.assign({
+    children: [tooltip && jsxRuntime.jsx("title", Object.assign({
       id: uniqueId
     }, {
-      children: "innlastning p\xE5g\xE5r"
+      children: tooltip
     })), jsxRuntime.jsx(Circle, Object.assign({}, circleProps, {
       cx: "25",
       cy: "25",
@@ -4142,6 +4144,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     target = props.target,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
+    _props$loadingTooltip = props.loadingTooltip,
+    loadingTooltip = _props$loadingTooltip === void 0 ? 'Lagring pågår' : _props$loadingTooltip,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     icon = props.icon,
@@ -4151,7 +4155,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "loadingTooltip", "fullWidth", "icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
   var as = href ? 'a' : 'button';
   var hasLabel = !!label;
   var hasIcon = !!icon;
@@ -4205,7 +4209,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, {
       children: jsxRuntime.jsx(Spinner, {
         color: appearances[appearance].purpose[purpose].base.color,
-        size: sizes[size].justIcon.icon.fontSize
+        size: sizes[size].justIcon.icon.fontSize,
+        tooltip: loadingTooltip
       })
     }))]
   }));
@@ -4249,7 +4254,7 @@ var input$3 = {
     }
   }
 };
-var icon$a = {
+var icon$9 = {
   color: colors$o.DdsColorNeutralsGray9,
   sizes: {
     medium: {
@@ -4268,23 +4273,23 @@ var icon$a = {
 };
 var textInputTokens = {
   input: input$3,
-  icon: icon$a
+  icon: icon$9
 };
 
 var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var input$2 = textInputTokens.input,
-  icon$9 = textInputTokens.icon;
+  icon$8 = textInputTokens.icon;
 var MessageContainer$1 = styled__default.default.div.withConfig({
   displayName: "TextInputstyles__MessageContainer",
   componentId: "sc-165zflr-0"
 })(["display:flex;justify-content:space-between;"]);
-var StyledIcon$4 = styled__default.default(Icon).withConfig({
+var StyledIcon$3 = styled__default.default(Icon).withConfig({
   displayName: "TextInputstyles__StyledIcon",
   componentId: "sc-165zflr-1"
-})(["position:absolute;color:", ";", " z-index:1;"], icon$9.color, function (_ref) {
+})(["position:absolute;color:", ";", " z-index:1;"], icon$8.color, function (_ref) {
   var size = _ref.size,
     iconSize = _ref.iconSize;
-  return styled.css(["left:", ";", ""], icon$9.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeMediumNumberPx / 2, "px)")));
+  return styled.css(["left:", ";", ""], icon$8.sizes[size].left, iconSize === 'small' ? styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeSmallNumberPx / 2, "px)")) : styled.css(["top:", ";"], "calc(50% - ".concat(iconSizes$4.DdsIconsizeMediumNumberPx / 2, "px)")));
 });
 var StyledInput$1 = styled__default.default(StatefulInput).withConfig({
   displayName: "TextInputstyles__StyledInput",
@@ -4377,7 +4382,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, {
       children: label
     })), hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
-      children: [jsxRuntime.jsx(StyledIcon$4, {
+      children: [jsxRuntime.jsx(StyledIcon$3, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
         size: componentSize
@@ -4809,7 +4814,7 @@ var inputContainer$1 = {
     minHeight: inputContainerMinHeightMulti
   }
 };
-var icon$8 = {
+var icon$7 = {
   marginRight: spacing$v.SizesDdsSpacingLocalX05
 };
 var selectTokens = {
@@ -4827,7 +4832,7 @@ var selectTokens = {
   noOptionsMessage: noOptionsMessage,
   clearIndicator: clearIndicator,
   loadingIndicator: loadingIndicator,
-  icon: icon$8
+  icon: icon$7
 };
 
 var _control = selectTokens.control,
@@ -4842,7 +4847,7 @@ var _control = selectTokens.control,
   _multiValueRemove = selectTokens.multiValueRemove,
   _noOptionsMessage = selectTokens.noOptionsMessage,
   _placeholder = selectTokens.placeholder,
-  icon$7 = selectTokens.icon,
+  icon$6 = selectTokens.icon,
   _valueContainer = selectTokens.valueContainer,
   inputContainer = selectTokens.inputContainer;
 var prefix = 'dds-select';
@@ -4868,10 +4873,10 @@ var InnerSingleValue = styled__default.default.div.withConfig({
   displayName: "Selectstyles__InnerSingleValue",
   componentId: "sc-19jkd5s-1"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
-var StyledIcon$3 = styled__default.default(Icon).withConfig({
+var StyledIcon$2 = styled__default.default(Icon).withConfig({
   displayName: "Selectstyles__StyledIcon",
   componentId: "sc-19jkd5s-2"
-})(["margin-right:", ";"], icon$7.marginRight);
+})(["margin-right:", ";"], icon$6.marginRight);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -5127,7 +5132,7 @@ var DDSInput = function DDSInput(props, ariaInvalid, ariaDescribedby) {
 };
 var DDSControl = function DDSControl(props, componentSize, icon) {
   return jsxRuntime.jsxs(Control, Object.assign({}, props, {
-    children: [icon && jsxRuntime.jsx(StyledIcon$3, {
+    children: [icon && jsxRuntime.jsx(StyledIcon$2, {
       icon: icon,
       iconSize: getFormInputIconSize(componentSize)
     }), props.children]
@@ -5260,7 +5265,7 @@ var container$c = {
     backgroundColor: colors$l.DdsColorWarningLightest
   }
 };
-var contentContainer$7 = {
+var contentContainer$5 = {
   paddingRight: spacing$u.SizesDdsSpacingLocalX15,
   paddingTop: spacing$u.SizesDdsSpacingLocalX075,
   paddingBottom: spacing$u.SizesDdsSpacingLocalX075,
@@ -5269,7 +5274,7 @@ var contentContainer$7 = {
     paddingRight: spacing$u.SizesDdsSpacingLocalX075
   }
 };
-var purposeVariants$1 = {
+var purposeVariants$2 = {
   info: {
     icon: InfoIcon,
     closeButtonPurpose: 'secondary'
@@ -5285,7 +5290,7 @@ var purposeVariants$1 = {
 };
 var globalMessageTokens = {
   container: container$c,
-  contentContainer: contentContainer$7,
+  contentContainer: contentContainer$5,
   icon: {
     marginRight: "".concat(spacing$u.SizesDdsSpacingLocalX075),
     info: {
@@ -5301,8 +5306,8 @@ var globalMessageTokens = {
 };
 
 var container$b = globalMessageTokens.container,
-  contentContainer$6 = globalMessageTokens.contentContainer,
-  icon$6 = globalMessageTokens.icon;
+  contentContainer$4 = globalMessageTokens.contentContainer,
+  icon$5 = globalMessageTokens.icon;
 var Container$d = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__Container",
   componentId: "sc-bf2l65-0"
@@ -5313,17 +5318,17 @@ var Container$d = styled__default.default.div.withConfig({
 var MessageIconWrapper$1 = styled__default.default(Icon).withConfig({
   displayName: "GlobalMessage__MessageIconWrapper",
   componentId: "sc-bf2l65-1"
-})(["margin-right:", ";"], icon$6.marginRight);
+})(["margin-right:", ";"], icon$5.marginRight);
 var ControlsContainer = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__ControlsContainer",
   componentId: "sc-bf2l65-2"
 })(["display:flex;align-items:center;"]);
-var ContentContainer$4 = styled__default.default.div.withConfig({
+var ContentContainer$3 = styled__default.default.div.withConfig({
   displayName: "GlobalMessage__ContentContainer",
   componentId: "sc-bf2l65-3"
-})(["display:flex;align-items:center;padding-top:", ";padding-bottom:", ";padding-right:", ";"], contentContainer$6.paddingTop, contentContainer$6.paddingBottom, function (_ref2) {
+})(["display:flex;align-items:center;padding-top:", ";padding-bottom:", ";padding-right:", ";"], contentContainer$4.paddingTop, contentContainer$4.paddingBottom, function (_ref2) {
   var closable = _ref2.closable;
-  return closable ? contentContainer$6.withClosable.paddingRight : contentContainer$6.paddingRight;
+  return closable ? contentContainer$4.withClosable.paddingRight : contentContainer$4.paddingRight;
 });
 var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
@@ -5345,12 +5350,12 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     purpose: purpose
   });
   return !isClosed ? jsxRuntime.jsxs(Container$d, Object.assign({}, containerProps, {
-    children: [jsxRuntime.jsxs(ContentContainer$4, Object.assign({
+    children: [jsxRuntime.jsxs(ContentContainer$3, Object.assign({
       closable: closable
     }, {
       children: [jsxRuntime.jsx(MessageIconWrapper$1, {
-        icon: purposeVariants$1[purpose].icon,
-        color: icon$6[purpose].color
+        icon: purposeVariants$2[purpose].icon,
+        color: icon$5[purpose].color
       }), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Typography, Object.assign({
         as: "span"
       }, {
@@ -5359,7 +5364,7 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })), jsxRuntime.jsx(ControlsContainer, {
       children: closable && jsxRuntime.jsx(Button$1, {
         icon: CloseIcon,
-        purpose: purposeVariants$1[purpose].closeButtonPurpose,
+        purpose: purposeVariants$2[purpose].closeButtonPurpose,
         appearance: "borderless",
         onClick: function onClick() {
           setClosed(true);
@@ -5382,7 +5387,8 @@ var container$a = {
     boxShadow: outerShadow.DdsShadow1Onlight,
     borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
     border: "".concat(border$9.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: "0 ".concat(spacing$t.SizesDdsSpacingLocalX1)
+    padding: spacing$t.SizesDdsSpacingLocalX075,
+    gap: spacing$t.SizesDdsSpacingLocalX05
   },
   purpose: {
     info: {
@@ -5411,7 +5417,7 @@ var container$a = {
     }
   }
 };
-var purposeVariants = {
+var purposeVariants$1 = {
   info: {
     icon: InfoIcon,
     closeButtonPurpose: 'secondary'
@@ -5437,7 +5443,7 @@ var purposeVariants = {
     closeButtonPurpose: 'danger'
   }
 };
-var icon$5 = {
+var icon$4 = {
   marginRight: "".concat(spacing$t.SizesDdsSpacingLocalX075),
   info: {
     color: colors$k.DdsColorInfoDarkest
@@ -5458,71 +5464,65 @@ var icon$5 = {
     color: colors$k.DdsColorDangerDarkest
   }
 };
-var contentContainer$5 = {
-  paddingRight: spacing$t.SizesDdsSpacingLocalX15,
-  paddingTop: spacing$t.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$t.SizesDdsSpacingLocalX075,
-  withClosable: {
-    paddingRight: spacing$t.SizesDdsSpacingLocalX075
-  },
-  vertical: {
-    paddingBottom: spacing$t.SizesDdsSpacingLocalX15
-  }
-};
-var topContainer$1 = {
-  paddingTop: spacing$t.SizesDdsSpacingLocalX15,
-  withClosable: {
-    paddingTop: spacing$t.SizesDdsSpacingLocalX1
-  }
-};
 var localMessageTokens = {
   container: container$a,
-  contentContainer: contentContainer$5,
-  topContainer: topContainer$1,
-  icon: icon$5
+  purposeVariants: purposeVariants$1,
+  icon: icon$4
 };
 
 var defaultWidth$3 = '400px';
 var container$9 = localMessageTokens.container,
-  contentContainer$4 = localMessageTokens.contentContainer,
-  topContainer = localMessageTokens.topContainer;
+  icon$3 = localMessageTokens.icon,
+  purposeVariants = localMessageTokens.purposeVariants;
 var Container$c = styled__default.default.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
-})(["box-sizing:border-box;display:flex;flex-direction:", ";box-shadow:", ";border:", ";padding:", ";border-radius:", ";", " ", ";*::selection{", "}", " width:", ";"], function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'vertical' ? 'column' : 'row';
-}, container$9.base.boxShadow, container$9.base.border, container$9.base.padding, container$9.base.borderRadius, getFontStyling(defaultTypographyType, true), function (_ref2) {
-  var layout = _ref2.layout;
-  return layout === 'horisontal' && styled.css(["align-items:center;justify-content:space-between;"]);
-}, selection, function (_ref3) {
+})(["box-sizing:border-box;display:grid;grid-template-areas:", ";grid-template-columns:", ";box-shadow:", ";border:", ";border-radius:", ";padding:", ";gap:", ";align-items:center;", " *::selection{", "}", " width:", ";"], function (_ref) {
+  var layout = _ref.layout,
+    closable = _ref.closable;
+  return getGridTemplateAreas(layout, closable);
+}, function (_ref2) {
+  var layout = _ref2.layout,
+    closable = _ref2.closable;
+  return getGridTemplateColumns(layout, closable);
+}, container$9.base.boxShadow, container$9.base.border, container$9.base.borderRadius, container$9.base.padding, container$9.base.gap, getFontStyling(defaultTypographyType, true), selection, function (_ref3) {
   var purpose = _ref3.purpose;
   return purpose && styled.css(["border-color:", ";background-color:", ";"], container$9.purpose[purpose].borderColor, container$9.purpose[purpose].backgroundColor);
 }, function (_ref4) {
   var width = _ref4.width;
   return width;
 });
+function getGridTemplateAreas(layout, closeable) {
+  if (closeable) {
+    if (layout === 'horisontal') {
+      return '"icon text closeButton"';
+    }
+    return '"icon closeButton" "text text"';
+  } else {
+    if (layout === 'horisontal') {
+      return '"icon text"';
+    }
+    return '"icon icon" "text text"';
+  }
+}
+function getGridTemplateColumns(layout, closable) {
+  if (closable) {
+    return layout === 'horisontal' ? 'min-content 1fr min-content' : '1fr min-content';
+  }
+  return layout === 'horisontal' ? 'min-content 1fr' : '1fr';
+}
 var MessageIconWrapper = styled__default.default(Icon).withConfig({
   displayName: "LocalMessage__MessageIconWrapper",
   componentId: "sc-kmfp8w-1"
-})(["margin-right:", ";"], localMessageTokens.icon.marginRight);
-var ContentContainer$3 = styled__default.default.div.withConfig({
-  displayName: "LocalMessage__ContentContainer",
+})(["grid-area:icon;"]);
+var TextContainer = styled__default.default.div.withConfig({
+  displayName: "LocalMessage__TextContainer",
   componentId: "sc-kmfp8w-2"
-})(["padding-top:", ";padding-right:", ";", ";"], contentContainer$4.paddingTop, function (_ref5) {
-  var closable = _ref5.closable;
-  return closable ? contentContainer$4.withClosable.paddingRight : contentContainer$4.paddingRight;
-}, function (_ref6) {
-  var layout = _ref6.layout;
-  return layout === 'vertical' ? styled.css(["padding-bottom:", ";"], contentContainer$4.vertical.paddingBottom) : styled.css(["display:flex;align-items:center;padding-bottom:", ";"], contentContainer$4.paddingBottom);
-});
-var TopContainer = styled__default.default.div.withConfig({
-  displayName: "LocalMessage__TopContainer",
+})(["grid-area:text;"]);
+var CloseButton = styled__default.default(Button$1).withConfig({
+  displayName: "LocalMessage__CloseButton",
   componentId: "sc-kmfp8w-3"
-})(["width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:", ";"], function (_ref7) {
-  var closable = _ref7.closable;
-  return closable ? topContainer.withClosable.paddingTop : topContainer.paddingTop;
-});
+})(["grid-area:closeButton;margin:-", " 0;"], container$9.base.padding);
 var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
     _props$purpose = props.purpose,
@@ -5546,49 +5546,64 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
     purpose: purpose,
     width: width,
     layout: layout,
+    closable: closable,
     ref: ref
   });
-  var contentContainerProps = {
-    layout: layout,
-    closable: closable
-  };
-  var messageIconWrapper = jsxRuntime.jsx(MessageIconWrapper, {
-    icon: purposeVariants[purpose].icon,
-    color: localMessageTokens.icon[purpose].color
-  });
-  var content = children !== null && children !== void 0 ? children : jsxRuntime.jsx(Typography, Object.assign({
-    as: "span"
-  }, {
-    children: message
-  }));
-  var closeButton = closable && jsxRuntime.jsx(Button$1, {
-    icon: CloseIcon,
-    purpose: purposeVariants[purpose].closeButtonPurpose,
-    appearance: "borderless",
-    onClick: function onClick() {
-      setClosed(true);
-      onClose && onClose();
-    },
-    size: "small",
-    "aria-label": "Lukk melding"
-  });
-  return !isClosed ? jsxRuntime.jsx(Container$c, Object.assign({}, containerProps, {
-    children: layout === 'horisontal' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsxs(ContentContainer$3, Object.assign({}, contentContainerProps, {
-        children: [messageIconWrapper, " ", content]
-      })), closeButton]
-    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsxs(TopContainer, Object.assign({
-        closable: closable
+  if (isClosed) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return jsxRuntime.jsxs(Container$c, Object.assign({}, containerProps, {
+    children: [jsxRuntime.jsx(MessageIconWrapper, {
+      icon: purposeVariants[purpose].icon,
+      color: icon$3[purpose].color
+    }), jsxRuntime.jsx(TextContainer, {
+      children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(Typography, Object.assign({
+        as: "span"
       }, {
-        children: [messageIconWrapper, " ", closeButton]
-      })), jsxRuntime.jsx(ContentContainer$3, Object.assign({}, contentContainerProps, {
-        children: content
-      }))]
-    })
-  })) : null;
+        children: message
+      }))
+    }), closable && jsxRuntime.jsx(CloseButton, {
+      icon: CloseIcon,
+      purpose: purposeVariants[purpose].closeButtonPurpose,
+      appearance: "borderless",
+      onClick: function onClick() {
+        setClosed(true);
+        onClose && onClose();
+      },
+      size: "small",
+      "aria-label": "Lukk melding"
+    })]
+  }));
 });
 
+var Wrapper$6 = styled__default.default.span.withConfig({
+  displayName: "VisuallyHidden__Wrapper",
+  componentId: "sc-ciubxt-0"
+})(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
+var VisuallyHidden = function VisuallyHidden(props) {
+  var children = props.children,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    as = props.as,
+    rest = tslib.__rest(props, ["children", "id", "className", "htmlProps", "as"]);
+  if (as === 'div') {
+    return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      as: as
+    }, {
+      children: children
+    }));
+  }
+  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: children
+  }));
+};
+
+var AutocompleteSearchContext = /*#__PURE__*/React.createContext({});
+var useAutocompleteSearch = function useAutocompleteSearch() {
+  return React.useContext(AutocompleteSearchContext);
+};
+
 var spacing$s = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$3 = ddsDesignTokens.ddsBaseTokens.iconSizes,
   colors$j = ddsDesignTokens.ddsBaseTokens.colors;
@@ -5603,7 +5618,7 @@ var paddingLeftMedium = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + i
 var paddingLeftLarge = "".concat(spacing$s.SizesDdsSpacingLocalX075NumberPx + iconSizes$3.DdsIconsizeMediumNumberPx + spacing$s.SizesDdsSpacingLocalX05NumberPx, "px");
 var input$1 = {
   base: {
-    paddingRight: spacing$s.SizesDdsSpacingLocalX05,
+    paddingRight: spacing$s.SizesDdsSpacingLocalX25,
     paddingLeft: spacing$s.SizesDdsSpacingLocalX3
   },
   sizes: {
@@ -5630,7 +5645,7 @@ var horisontalContainer$1 = {
 var outerContainer$6 = {
   gap: spacing$s.SizesDdsSpacingLocalX0125
 };
-var icon$4 = {
+var searchIcon$1 = {
   base: {
     left: spacing$s.SizesDdsSpacingLocalX075,
     color: textDefault$2.textColor
@@ -5645,6 +5660,11 @@ var icon$4 = {
     top: "calc(50% - ".concat(iconSizes$3.DdsIconsizeMediumNumberPx / 2, "px)")
   }
 };
+var clearButton$1 = {
+  right: spacing$s.SizesDdsSpacingLocalX075,
+  top: "calc(50% - 14px)",
+  color: textDefault$2.textColor
+};
 var suggestionsContainer$1 = {
   marginTop: spacing$s.SizesDdsSpacingLocalX025,
   border: "1px solid ".concat(colors$j.DdsColorInteractiveBase),
@@ -5655,7 +5675,8 @@ var suggestionsHeader$1 = {
 };
 var searchTokens = {
   input: input$1,
-  icon: icon$4,
+  searchIcon: searchIcon$1,
+  clearButton: clearButton$1,
   horisontalContainer: horisontalContainer$1,
   outerContainer: outerContainer$6,
   suggestionsContainer: suggestionsContainer$1,
@@ -5893,38 +5914,45 @@ var SearchSuggestions = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var AutocompleteSearchContext = /*#__PURE__*/React.createContext({});
-var useAutocompleteSearch = function useAutocompleteSearch() {
-  return React.useContext(AutocompleteSearchContext);
-};
-
-var Wrapper$6 = styled__default.default.span.withConfig({
-  displayName: "VisuallyHidden__Wrapper",
-  componentId: "sc-ciubxt-0"
-})(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
-var VisuallyHidden = function VisuallyHidden(props) {
-  var children = props.children,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    as = props.as,
-    rest = tslib.__rest(props, ["children", "id", "className", "htmlProps", "as"]);
-  if (as === 'div') {
-    return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-      as: as
-    }, {
-      children: children
-    }));
-  }
-  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: children
-  }));
-};
+/**
+ * Lager en change-event som kan resette verdien i et input-felt.
+ * Dette vil resultere i en event som har: event.target.value = ''.
+ *
+ * @param inputElementId Id'en til et gitt input-felt
+ * @returns En change-event som har en tom streng som target value
+ */
+function createEmptyChangeEvent(inputElementId) {
+  var inputElement = document.getElementById(inputElementId);
+  inputElement.value = '';
+  var emptyChangeEvent = {
+    target: inputElement,
+    currentTarget: inputElement,
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    preventDefault: function preventDefault() {},
+    stopPropagation: function stopPropagation() {},
+    nativeEvent: new Event('input'),
+    persist: function persist() {},
+    type: 'change',
+    timeStamp: Date.now(),
+    isDefaultPrevented: function isDefaultPrevented() {
+      return false;
+    },
+    isPropagationStopped: function isPropagationStopped() {
+      return false;
+    }
+  };
+  return emptyChangeEvent;
+}
 
 var input = searchTokens.input,
   outerContainer$5 = searchTokens.outerContainer,
   horisontalContainer = searchTokens.horisontalContainer,
-  icon$3 = searchTokens.icon;
+  searchIcon = searchTokens.searchIcon,
+  clearButton = searchTokens.clearButton;
 var getIconSize = function getIconSize(size) {
   switch (size) {
     case 'large':
@@ -5942,27 +5970,31 @@ var Input = styled__default.default(Input$2).withConfig({
   var componentSize = _ref.componentSize;
   return styled.css(["padding-top:", ";padding-bottom:", ";padding-left:", ";", ""], input.sizes[componentSize].paddingTop, input.sizes[componentSize].paddingBottom, input.sizes[componentSize].paddingLeft, getFontStyling(typographyTypes$4[componentSize]));
 });
-var StyledIcon$2 = styled__default.default(Icon).withConfig({
-  displayName: "Search__StyledIcon",
+var StyledSearchIcon = styled__default.default(Icon).withConfig({
+  displayName: "Search__StyledSearchIcon",
   componentId: "sc-1ax3s9s-1"
-})(["position:absolute;left:", ";color:", ";", " z-index:1;"], icon$3.base.left, icon$3.base.color, function (_ref2) {
+})(["position:absolute;left:", ";color:", ";", " z-index:1;"], searchIcon.base.left, searchIcon.base.color, function (_ref2) {
   var size = _ref2.size;
-  return styled.css(["top:", ";"], searchTokens.icon[size].top);
+  return styled.css(["top:", ";"], searchTokens.searchIcon[size].top);
 });
+var StyledClearButton = styled__default.default(Button$1).withConfig({
+  displayName: "Search__StyledClearButton",
+  componentId: "sc-1ax3s9s-2"
+})(["position:absolute;right:", ";color:", ";top:", ";"], clearButton.right, clearButton.color, clearButton.top);
 var OuterContainer$3 = styled__default.default.div.withConfig({
   displayName: "Search__OuterContainer",
-  componentId: "sc-1ax3s9s-2"
+  componentId: "sc-1ax3s9s-3"
 })(["display:flex;flex-direction:column;gap:", ";"], outerContainer$5.gap);
 var HorisontalContainer = styled__default.default.div.withConfig({
   displayName: "Search__HorisontalContainer",
-  componentId: "sc-1ax3s9s-3"
+  componentId: "sc-1ax3s9s-4"
 })(["", ""], function (props) {
   return props.hasSearchButton && styled.css(["display:grid;grid-template-columns:1fr auto;gap:", ";"], horisontalContainer.gap);
 });
 var InputContainer = styled__default.default.div.withConfig({
   displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-4"
-})(["position:relative;"]);
+  componentId: "sc-1ax3s9s-5"
+})(["position:relative;display:flex;"]);
 var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
     componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
@@ -5983,12 +6015,21 @@ var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var suggestionsId = derivativeIdGenerator(uniqueId, 'suggestions');
   var suggestionsDescriptionId = derivativeIdGenerator(uniqueId, 'suggestions-description');
+  var _useState = React.useState(!!value),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasValue = _useState2[0],
+    setHasValue = _useState2[1];
   var context = useAutocompleteSearch();
   var combinedRef = context.inputRef ? useCombinedRef(context.inputRef, ref) : ref;
   var handleChange = function handleChange(e) {
+    setHasValue(e.target.value !== '');
     context.onValueChange && context.onValueChange(e);
     onChange && onChange(e);
   };
+  var clearInput = function clearInput() {
+    var emptyChangeEvent = createEmptyChangeEvent(uniqueId);
+    handleChange(emptyChangeEvent);
+  };
   var containerProps = {
     className: className,
     style: style
@@ -6020,7 +6061,7 @@ var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         hasSearchButton: showSearchButton
       }, containerProps, {
         children: [jsxRuntime.jsxs(InputContainer, {
-          children: [jsxRuntime.jsx(StyledIcon$2, {
+          children: [jsxRuntime.jsx(StyledSearchIcon, {
             icon: SearchIcon,
             size: componentSize,
             iconSize: getIconSize(componentSize)
@@ -6044,6 +6085,13 @@ var Search$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
             }, {
               children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet."
             }))]
+          }), hasValue && jsxRuntime.jsx(StyledClearButton, {
+            icon: CloseSmallIcon,
+            size: "tiny",
+            purpose: "secondary",
+            appearance: "borderless",
+            "aria-label": "T\xF8m",
+            onClick: clearInput
           })]
         }), showSearchButton && jsxRuntime.jsx(Button$1, Object.assign({
           size: componentSize,
@@ -10077,29 +10125,12 @@ var ItemText = styled__default.default.div.withConfig({
       return styled.css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
   }
 });
-var ItemContentWrapper = styled__default.default.div.withConfig({
+var ItemContentWrapper = styled__default.default.button.withConfig({
   displayName: "ProgressTrackerItem__ItemContentWrapper",
   componentId: "sc-1j9qaj9-3"
-})(["background:none;border:none;margin:0;padding:0;display:grid;grid-template-columns:", " 1fr;justify-content:flex-start;align-items:center;font-family:inherit;gap:", ";transition:", ";:focus-visible{", "}", " ", ""], itemNumber.size, itemContentWrapper.gap, focusVisibleTransitionValue, focusVisible, function (_ref3) {
-  var clickable = _ref3.clickable,
-    state = _ref3.state;
-  if (clickable) {
-    return styled.css([":hover{", "{", "}", "{", "}}"], ItemNumber, function () {
-      if (state === 'inactiveCompleted') {
-        return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.hover.borderColor, itemNumber.completed.hover.color, itemNumber.completed.hover.backgroundColor);
-      } else if (state === 'inactiveIncomplete') {
-        return styled.css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.hover.borderColor, itemNumber.inactive.hover.color, itemNumber.inactive.hover.backgroundColor);
-      }
-    }, ItemText, function () {
-      if (state !== 'disabled') {
-        return styled.css(["text-decoration-color:", ";"], itemText.inactive.hover.textDecorationColor);
-      }
-    });
-  }
-}, function (_ref4) {
-  var clickable = _ref4.clickable,
-    state = _ref4.state;
-  return clickable && state !== 'disabled' && styled.css(["cursor:pointer;"]);
+})(["background:none;border:none;margin:0;padding:0;display:grid;grid-template-columns:", " 1fr;justify-content:flex-start;align-items:center;font-family:inherit;gap:", ";transition:", ";:focus-visible{", "}", ""], itemNumber.size, itemContentWrapper.gap, focusVisibleTransitionValue, focusVisible, function (_ref3) {
+  var state = _ref3.state;
+  return state !== 'disabled' && styled.css(["cursor:pointer;"]);
 });
 var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
   return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
@@ -10118,8 +10149,7 @@ var ProgressTrackerItem = function ProgressTrackerItem(props) {
     handleStepChange = _useProgressTrackerCo.handleStepChange;
   var active = activeStep === index;
   var styleProps = {
-    state: toItemState(active, completed, disabled),
-    clickable: handleStepChange !== undefined
+    state: toItemState(active, completed, disabled)
   };
   var stepNumberContent = React.useMemo(function () {
     if (completed) {
@@ -10175,12 +10205,10 @@ var ProgressTracker = function () {
       _props$activeStep = props.activeStep,
       activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
       onStepChange = props.onStepChange,
-      _props$clickable = props.clickable,
-      clickable = _props$clickable === void 0 ? false : _props$clickable,
       children = props.children,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = tslib.__rest(props, ["id", "activeStep", "onStepChange", "clickable", "children", "className", "htmlProps"]);
+      rest = tslib.__rest(props, ["id", "activeStep", "onStepChange", "children", "className", "htmlProps"]);
     var _useState = React.useState(activeStep),
       _useState2 = _slicedToArray(_useState, 2),
       thisActiveStep = _useState2[0],
@@ -10206,7 +10234,7 @@ var ProgressTracker = function () {
     return jsxRuntime.jsx(ProgressTrackerContext.Provider, Object.assign({
       value: {
         activeStep: thisActiveStep,
-        handleStepChange: clickable ? handleChange : undefined
+        handleStepChange: handleChange
       }
     }, {
       children: jsxRuntime.jsx("div", Object.assign({