@norges-domstoler/dds-components 12.1.3 → 13.0.1

package/dist/components/Button/Button.d.ts

@@ -6,6 +6,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<Pick<Omit
     iconPosition?: import("./Button.types").IconPosition | undefined;
     appearance?: import("./Button.types").ButtonAppearance | undefined;
     loading?: boolean | undefined;
+    loadingTooltip?: string | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
     fullWidth?: boolean | undefined;
     href?: string | undefined;

package/dist/components/Button/Button.js

@@ -24,6 +24,8 @@ var Button = /*#__PURE__*/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,
@@ -33,7 +35,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
+    rest = __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;
@@ -87,7 +89,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     }, {
       children: jsx(Spinner, {
         color: appearances[appearance].purpose[purpose].base.color,
-        size: sizes[size].justIcon.icon.fontSize
+        size: sizes[size].justIcon.icon.fontSize,
+        tooltip: loadingTooltip
       })
     }))]
   }));

package/dist/components/Button/Button.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
         iconPosition?: import("./Button.types").IconPosition | undefined;
         appearance?: import("./Button.types").ButtonAppearance | undefined;
         loading?: boolean | undefined;
+        loadingTooltip?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
         fullWidth?: boolean | undefined;
         href?: string | undefined;

package/dist/components/Button/Button.types.d.ts

@@ -19,6 +19,8 @@ export type ButtonProps = BaseComponentProps<HTMLButtonElement, {
     appearance?: ButtonAppearance;
     /**Indikerer en loading-knapp. */
     loading?: boolean;
+    /**Tooltip som vises ved loading. */
+    loadingTooltip?: string;
     /**Ikonet som ligger i knappen.  */
     icon?: SvgIcon;
     /**Knapp med full bredde. */

package/dist/components/LocalMessage/LocalMessage.js

@@ -1,10 +1,10 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { Button } from '../Button/Button.js';
 import { forwardRef, useState } from 'react';
-import { localMessageTokens, purposeVariants } from './LocalMessage.tokens.js';
+import { localMessageTokens } from './LocalMessage.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import '../../helpers/Backdrop/Backdrop.js';
@@ -31,45 +31,57 @@ import { getFontStyling, defaultTypographyType } from '../Typography/Typography.
 
 var defaultWidth = '400px';
 var container = localMessageTokens.container,
-  contentContainer = localMessageTokens.contentContainer,
-  topContainer = localMessageTokens.topContainer;
+  icon = localMessageTokens.icon,
+  purposeVariants = localMessageTokens.purposeVariants;
 var Container = styled.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.base.boxShadow, container.base.border, container.base.padding, container.base.borderRadius, getFontStyling(defaultTypographyType, true), function (_ref2) {
-  var layout = _ref2.layout;
-  return layout === 'horisontal' && 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.base.boxShadow, container.base.border, container.base.borderRadius, container.base.padding, container.base.gap, getFontStyling(defaultTypographyType, true), selection, function (_ref3) {
   var purpose = _ref3.purpose;
   return purpose && css(["border-color:", ";background-color:", ";"], container.purpose[purpose].borderColor, container.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(Icon).withConfig({
   displayName: "LocalMessage__MessageIconWrapper",
   componentId: "sc-kmfp8w-1"
-})(["margin-right:", ";"], localMessageTokens.icon.marginRight);
-var ContentContainer = styled.div.withConfig({
-  displayName: "LocalMessage__ContentContainer",
+})(["grid-area:icon;"]);
+var TextContainer = styled.div.withConfig({
+  displayName: "LocalMessage__TextContainer",
   componentId: "sc-kmfp8w-2"
-})(["padding-top:", ";padding-right:", ";", ";"], contentContainer.paddingTop, function (_ref5) {
-  var closable = _ref5.closable;
-  return closable ? contentContainer.withClosable.paddingRight : contentContainer.paddingRight;
-}, function (_ref6) {
-  var layout = _ref6.layout;
-  return layout === 'vertical' ? css(["padding-bottom:", ";"], contentContainer.vertical.paddingBottom) : css(["display:flex;align-items:center;padding-bottom:", ";"], contentContainer.paddingBottom);
-});
-var TopContainer = styled.div.withConfig({
-  displayName: "LocalMessage__TopContainer",
+})(["grid-area:text;"]);
+var CloseButton = styled(Button).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.base.padding);
 var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,
     _props$purpose = props.purpose,
@@ -93,47 +105,34 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
     purpose: purpose,
     width: width,
     layout: layout,
+    closable: closable,
     ref: ref
   });
-  var contentContainerProps = {
-    layout: layout,
-    closable: closable
-  };
-  var messageIconWrapper = jsx(MessageIconWrapper, {
-    icon: purposeVariants[purpose].icon,
-    color: localMessageTokens.icon[purpose].color
-  });
-  var content = children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
-    as: "span"
-  }, {
-    children: message
-  }));
-  var closeButton = closable && jsx(Button, {
-    icon: CloseIcon,
-    purpose: purposeVariants[purpose].closeButtonPurpose,
-    appearance: "borderless",
-    onClick: function onClick() {
-      setClosed(true);
-      onClose && onClose();
-    },
-    size: "small",
-    "aria-label": "Lukk melding"
-  });
-  return !isClosed ? jsx(Container, Object.assign({}, containerProps, {
-    children: layout === 'horisontal' ? jsxs(Fragment, {
-      children: [jsxs(ContentContainer, Object.assign({}, contentContainerProps, {
-        children: [messageIconWrapper, " ", content]
-      })), closeButton]
-    }) : jsxs(Fragment, {
-      children: [jsxs(TopContainer, Object.assign({
-        closable: closable
+  if (isClosed) {
+    return jsx(Fragment, {});
+  }
+  return jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsx(MessageIconWrapper, {
+      icon: purposeVariants[purpose].icon,
+      color: icon[purpose].color
+    }), jsx(TextContainer, {
+      children: children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
+        as: "span"
       }, {
-        children: [messageIconWrapper, " ", closeButton]
-      })), jsx(ContentContainer, Object.assign({}, contentContainerProps, {
-        children: content
-      }))]
-    })
-  })) : null;
+        children: message
+      }))
+    }), closable && jsx(CloseButton, {
+      icon: CloseIcon,
+      purpose: purposeVariants[purpose].closeButtonPurpose,
+      appearance: "borderless",
+      onClick: function onClick() {
+        setClosed(true);
+        onClose && onClose();
+      },
+      size: "small",
+      "aria-label": "Lukk melding"
+    })]
+  }));
 });
 
 export { LocalMessage };

package/dist/components/LocalMessage/LocalMessage.stories.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
             control: {
                 type: string;
             };
+            defaultValue: string;
         };
         width: {
             control: {

package/dist/components/LocalMessage/LocalMessage.tokens.d.ts

@@ -1,14 +1,7 @@
 import { SvgIcon } from '../../icons/utils';
 import { ButtonPurpose } from '../Button';
 import { StaticTypographyType } from '../Typography';
-import { LocalMessagePurpose } from './LocalMessage';
 export declare const typographyType: StaticTypographyType;
-export declare const purposeVariants: {
-    [k in LocalMessagePurpose]: {
-        icon: SvgIcon;
-        closeButtonPurpose: ButtonPurpose;
-    };
-};
 export declare const localMessageTokens: {
     container: {
         base: {
@@ -16,6 +9,7 @@ export declare const localMessageTokens: {
             borderRadius: string;
             border: string;
             padding: string;
+            gap: string;
         };
         purpose: {
             info: {
@@ -44,21 +38,30 @@ export declare const localMessageTokens: {
             };
         };
     };
-    contentContainer: {
-        paddingRight: string;
-        paddingTop: string;
-        paddingBottom: string;
-        withClosable: {
-            paddingRight: string;
+    purposeVariants: {
+        info: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
         };
-        vertical: {
-            paddingBottom: string;
+        warning: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
         };
-    };
-    topContainer: {
-        paddingTop: string;
-        withClosable: {
-            paddingTop: string;
+        danger: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
+        };
+        confidential: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
+        };
+        success: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
+        };
+        tips: {
+            icon: SvgIcon;
+            closeButtonPurpose: ButtonPurpose;
         };
     };
     icon: {

package/dist/components/LocalMessage/LocalMessage.tokens.js

@@ -18,7 +18,8 @@ var container = {
     boxShadow: outerShadow.DdsShadow1Onlight,
     borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
     border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-    padding: "0 ".concat(spacing.SizesDdsSpacingLocalX1)
+    padding: spacing.SizesDdsSpacingLocalX075,
+    gap: spacing.SizesDdsSpacingLocalX05
   },
   purpose: {
     info: {
@@ -94,28 +95,10 @@ var icon = {
     color: colors.DdsColorDangerDarkest
   }
 };
-var contentContainer = {
-  paddingRight: spacing.SizesDdsSpacingLocalX15,
-  paddingTop: spacing.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing.SizesDdsSpacingLocalX075,
-  withClosable: {
-    paddingRight: spacing.SizesDdsSpacingLocalX075
-  },
-  vertical: {
-    paddingBottom: spacing.SizesDdsSpacingLocalX15
-  }
-};
-var topContainer = {
-  paddingTop: spacing.SizesDdsSpacingLocalX15,
-  withClosable: {
-    paddingTop: spacing.SizesDdsSpacingLocalX1
-  }
-};
 var localMessageTokens = {
   container: container,
-  contentContainer: contentContainer,
-  topContainer: topContainer,
+  purposeVariants: purposeVariants,
   icon: icon
 };
 
-export { localMessageTokens, purposeVariants };
+export { localMessageTokens };

package/dist/components/ProgressTracker/ProgressTracker.d.ts

@@ -6,8 +6,6 @@ type ProgressTrackerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     activeStep?: number;
     /** Ekstra logikk ved klikking på et steg. */
     onStepChange?: (step: number) => void;
-    /** Om brukeren kan hoppe mellom stegene via museklikk på et steg. */
-    clickable?: boolean;
 }>;
 type ProgressTrackerComponent = ForwardRefExoticComponent<ProgressTrackerProps> & {
     Item: typeof ProgressTrackerItem;

package/dist/components/ProgressTracker/ProgressTracker.js

@@ -22,12 +22,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 = __rest(props, ["id", "activeStep", "onStepChange", "clickable", "children", "className", "htmlProps"]);
+      rest = __rest(props, ["id", "activeStep", "onStepChange", "children", "className", "htmlProps"]);
     var _useState = useState(activeStep),
       _useState2 = _slicedToArray(_useState, 2),
       thisActiveStep = _useState2[0],
@@ -53,7 +51,7 @@ var ProgressTracker = function () {
     return jsx(ProgressTrackerContext.Provider, Object.assign({
       value: {
         activeStep: thisActiveStep,
-        handleStepChange: clickable ? handleChange : undefined
+        handleStepChange: handleChange
       }
     }, {
       children: jsx("div", Object.assign({

package/dist/components/ProgressTracker/ProgressTracker.stories.d.ts

@@ -3,7 +3,6 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         activeStep?: number | undefined;
         onStepChange?: ((step: number) => void) | undefined;
-        clickable?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
@@ -39,4 +38,4 @@ declare const _default: {
 export default _default;
 export declare const Overview: () => JSX.Element;
 export declare const WithIcons: () => JSX.Element;
-export declare const NonClickable: () => JSX.Element;
+export declare const FutureStepsDisabled: () => JSX.Element;

package/dist/components/ProgressTracker/ProgressTrackerItem.js

@@ -66,29 +66,12 @@ var ItemText = styled.div.withConfig({
       return css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
   }
 });
-var ItemContentWrapper = styled.div.withConfig({
+var ItemContentWrapper = styled.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 css([":hover{", "{", "}", "{", "}}"], ItemNumber, function () {
-      if (state === 'inactiveCompleted') {
-        return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.hover.borderColor, itemNumber.completed.hover.color, itemNumber.completed.hover.backgroundColor);
-      } else if (state === 'inactiveIncomplete') {
-        return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.hover.borderColor, itemNumber.inactive.hover.color, itemNumber.inactive.hover.backgroundColor);
-      }
-    }, ItemText, function () {
-      if (state !== 'disabled') {
-        return css(["text-decoration-color:", ";"], itemText.inactive.hover.textDecorationColor);
-      }
-    });
-  }
-}, function (_ref4) {
-  var clickable = _ref4.clickable,
-    state = _ref4.state;
-  return clickable && state !== 'disabled' && 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' && css(["cursor:pointer;"]);
 });
 var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
   return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
@@ -107,8 +90,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 = useMemo(function () {
     if (completed) {

package/dist/components/Search/Search.js

@@ -1,9 +1,8 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Button } from '../Button/Button.js';
-import { searchTokens, typographyTypes } from './Search.tokens.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -17,21 +16,26 @@ import '../../hooks/useFloatPosition.js';
 import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
 import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
-import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
+import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
 import { SearchIcon } from '../../icons/tsx/search.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
 import { getFontStyling } from '../Typography/Typography.utils.js';
-import { SearchSuggestions } from './SearchSuggestions.js';
-import { useAutocompleteSearch } from './AutocompleteSearch.context.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { useAutocompleteSearch } from './AutocompleteSearch.context.js';
+import { searchTokens, typographyTypes } from './Search.tokens.js';
+import { SearchSuggestions } from './SearchSuggestions.js';
+import { createEmptyChangeEvent } from './Search.utils.js';
 
 var input = searchTokens.input,
   outerContainer = searchTokens.outerContainer,
   horisontalContainer = searchTokens.horisontalContainer,
-  icon = searchTokens.icon;
+  searchIcon = searchTokens.searchIcon,
+  clearButton = searchTokens.clearButton;
 var getIconSize = function getIconSize(size) {
   switch (size) {
     case 'large':
@@ -49,27 +53,31 @@ var Input = styled(Input$1).withConfig({
   var componentSize = _ref.componentSize;
   return css(["padding-top:", ";padding-bottom:", ";padding-left:", ";", ""], input.sizes[componentSize].paddingTop, input.sizes[componentSize].paddingBottom, input.sizes[componentSize].paddingLeft, getFontStyling(typographyTypes[componentSize]));
 });
-var StyledIcon = styled(Icon).withConfig({
-  displayName: "Search__StyledIcon",
+var StyledSearchIcon = styled(Icon).withConfig({
+  displayName: "Search__StyledSearchIcon",
   componentId: "sc-1ax3s9s-1"
-})(["position:absolute;left:", ";color:", ";", " z-index:1;"], icon.base.left, icon.base.color, function (_ref2) {
+})(["position:absolute;left:", ";color:", ";", " z-index:1;"], searchIcon.base.left, searchIcon.base.color, function (_ref2) {
   var size = _ref2.size;
-  return css(["top:", ";"], searchTokens.icon[size].top);
+  return css(["top:", ";"], searchTokens.searchIcon[size].top);
 });
+var StyledClearButton = styled(Button).withConfig({
+  displayName: "Search__StyledClearButton",
+  componentId: "sc-1ax3s9s-2"
+})(["position:absolute;right:", ";color:", ";top:", ";"], clearButton.right, clearButton.color, clearButton.top);
 var OuterContainer = styled.div.withConfig({
   displayName: "Search__OuterContainer",
-  componentId: "sc-1ax3s9s-2"
+  componentId: "sc-1ax3s9s-3"
 })(["display:flex;flex-direction:column;gap:", ";"], outerContainer.gap);
 var HorisontalContainer = styled.div.withConfig({
   displayName: "Search__HorisontalContainer",
-  componentId: "sc-1ax3s9s-3"
+  componentId: "sc-1ax3s9s-4"
 })(["", ""], function (props) {
   return props.hasSearchButton && css(["display:grid;grid-template-columns:1fr auto;gap:", ";"], horisontalContainer.gap);
 });
 var InputContainer = styled.div.withConfig({
   displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-4"
-})(["position:relative;"]);
+  componentId: "sc-1ax3s9s-5"
+})(["position:relative;display:flex;"]);
 var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
     componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
@@ -90,12 +98,21 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var suggestionsId = derivativeIdGenerator(uniqueId, 'suggestions');
   var suggestionsDescriptionId = derivativeIdGenerator(uniqueId, 'suggestions-description');
+  var _useState = 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
@@ -127,7 +144,7 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
         hasSearchButton: showSearchButton
       }, containerProps, {
         children: [jsxs(InputContainer, {
-          children: [jsx(StyledIcon, {
+          children: [jsx(StyledSearchIcon, {
             icon: SearchIcon,
             size: componentSize,
             iconSize: getIconSize(componentSize)
@@ -151,6 +168,13 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
             }, {
               children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet."
             }))]
+          }), hasValue && jsx(StyledClearButton, {
+            icon: CloseSmallIcon,
+            size: "tiny",
+            purpose: "secondary",
+            appearance: "borderless",
+            "aria-label": "T\xF8m",
+            onClick: clearInput
           })]
         }), showSearchButton && jsx(Button, Object.assign({
           size: componentSize,

package/dist/components/Search/Search.tokens.d.ts

@@ -27,7 +27,7 @@ export declare const searchTokens: {
             };
         };
     };
-    icon: {
+    searchIcon: {
         base: {
             left: string;
             color: string;
@@ -42,6 +42,11 @@ export declare const searchTokens: {
             top: string;
         };
     };
+    clearButton: {
+        right: string;
+        top: string;
+        color: string;
+    };
     horisontalContainer: {
         gap: string;
     };

package/dist/components/Search/Search.tokens.js

@@ -14,7 +14,7 @@ var paddingLeftMedium = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + ico
 var paddingLeftLarge = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + iconSizes.DdsIconsizeMediumNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px");
 var input = {
   base: {
-    paddingRight: spacing.SizesDdsSpacingLocalX05,
+    paddingRight: spacing.SizesDdsSpacingLocalX25,
     paddingLeft: spacing.SizesDdsSpacingLocalX3
   },
   sizes: {
@@ -41,7 +41,7 @@ var horisontalContainer = {
 var outerContainer = {
   gap: spacing.SizesDdsSpacingLocalX0125
 };
-var icon = {
+var searchIcon = {
   base: {
     left: spacing.SizesDdsSpacingLocalX075,
     color: textDefault.textColor
@@ -56,6 +56,11 @@ var icon = {
     top: "calc(50% - ".concat(iconSizes.DdsIconsizeMediumNumberPx / 2, "px)")
   }
 };
+var clearButton = {
+  right: spacing.SizesDdsSpacingLocalX075,
+  top: "calc(50% - 14px)",
+  color: textDefault.textColor
+};
 var suggestionsContainer = {
   marginTop: spacing.SizesDdsSpacingLocalX025,
   border: "1px solid ".concat(colors.DdsColorInteractiveBase),
@@ -66,7 +71,8 @@ var suggestionsHeader = {
 };
 var searchTokens = {
   input: input,
-  icon: icon,
+  searchIcon: searchIcon,
+  clearButton: clearButton,
   horisontalContainer: horisontalContainer,
   outerContainer: outerContainer,
   suggestionsContainer: suggestionsContainer,

package/dist/components/Search/Search.utils.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent } from 'react';
+/**
+ * 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
+ */
+export declare function createEmptyChangeEvent(inputElementId: string): ChangeEvent<HTMLInputElement>;