@norges-domstoler/dds-components 7.1.0 → 8.0.0

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

@@ -0,0 +1,6 @@
+declare type ProgressTrackerContextType = {
+    activeStep: number;
+};
+export declare const ProgressTrackerContext: import("react").Context<ProgressTrackerContextType>;
+export declare const useProgressTrackerContext: () => ProgressTrackerContextType;
+export {};

package/dist/components/ProgressTracker/ProgressTracker.context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+var ProgressTrackerContext = /*#__PURE__*/createContext({
+  activeStep: 0
+});
+var useProgressTrackerContext = function useProgressTrackerContext() {
+  return useContext(ProgressTrackerContext);
+};
+
+export { ProgressTrackerContext, useProgressTrackerContext };

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

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent } from 'react';
+import { BaseComponentPropsWithChildren } from '../../types';
+import { ProgressTrackerItem } from './ProgressTrackerItem';
+declare type ProgressTrackerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number;
+}>;
+declare type ProgressTrackerComponent = ForwardRefExoticComponent<ProgressTrackerProps> & {
+    Item: typeof ProgressTrackerItem;
+};
+export declare const ProgressTracker: ProgressTrackerComponent;
+export {};

package/dist/components/ProgressTracker/ProgressTracker.js

@@ -0,0 +1,93 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo, Children, isValidElement, cloneElement, Fragment } from 'react';
+import styled from 'styled-components';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { ProgressTrackerContext } from './ProgressTracker.context.js';
+import { progressTrackerTokens } from './ProgressTracker.tokens.js';
+import { ProgressTrackerItem } from './ProgressTrackerItem.js';
+
+var ItemsWrapper = styled.ol.withConfig({
+  displayName: "ProgressTracker__ItemsWrapper",
+  componentId: "sc-v5htnb-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:", ";margin:0;padding:0;"], progressTrackerTokens.itemsWrapper.gap);
+var ProgressTrackerConnector = styled.div.withConfig({
+  displayName: "ProgressTracker__ProgressTrackerConnector",
+  componentId: "sc-v5htnb-1"
+})(["margin-left:calc( (", " / 2) - (", " / 2) );height:", ";border-right:", " solid ", ";"], progressTrackerTokens.itemNumber.size, progressTrackerTokens.connector.width, progressTrackerTokens.connector.height, progressTrackerTokens.connector.width, progressTrackerTokens.connector.color);
+var ProgressTracker = function () {
+  var Res = /*#__PURE__*/forwardRef(function (props, ref) {
+    var id = props.id,
+        _props$activeStep = props.activeStep,
+        activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
+        children = props.children,
+        className = props.className,
+        htmlProps = props.htmlProps,
+        rest = __rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+    var _useState = useState(activeStep),
+        _useState2 = _slicedToArray(_useState, 2),
+        thisActiveStep = _useState2[0],
+        setActiveStep = _useState2[1];
+
+    useEffect(function () {
+      if (activeStep !== undefined && activeStep != thisActiveStep) {
+        setActiveStep(activeStep);
+      }
+    }, [activeStep, thisActiveStep]);
+    var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+      ref: ref
+    });
+    var steps = useMemo(function () {
+      var validChildren = removeInvalidChildren(children);
+      var itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
+      var itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
+      return itemsWithConnectorsBetween;
+    }, [children]);
+    return jsx(ProgressTrackerContext.Provider, Object.assign({
+      value: {
+        activeStep: thisActiveStep
+      }
+    }, {
+      children: jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "progress"
+      }, containerProps, {
+        children: jsx(ItemsWrapper, {
+          children: steps
+        })
+      }))
+    }));
+  });
+  Res.Item = ProgressTrackerItem;
+  return Res;
+}();
+
+var removeInvalidChildren = function removeInvalidChildren(children) {
+  return Children.toArray(children).filter(isValidElement);
+};
+
+var passIndexPropToProgressTrackerItem = function passIndexPropToProgressTrackerItem(children) {
+  return Children.map(children, function (item, index) {
+    return /*#__PURE__*/cloneElement(item, Object.assign(Object.assign({}, item.props), {
+      index: index
+    }));
+  });
+};
+
+var intersperseItemsWithConnector = function intersperseItemsWithConnector(children) {
+  return Children.map(children, function (child, index) {
+    if (index === 0) {
+      return child;
+    }
+
+    return jsxs(Fragment, {
+      children: [jsx(ProgressTrackerConnector, {
+        "aria-hidden": true
+      }), child]
+    }, index);
+  });
+};
+
+export { ProgressTracker };

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

@@ -0,0 +1,40 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    }> & {
+        Item: (props: ({
+            onClick: (index: number) => void;
+        } & Pick<import("react").HTMLAttributes<HTMLButtonElement>, "id" | "className"> & {
+            active?: boolean | undefined;
+            completed?: boolean | undefined;
+            disabled?: boolean | undefined;
+            icon?: import("../../icons/utils").SvgIcon | undefined;
+            index?: number | undefined;
+        } & {
+            children?: import("react").ReactNode;
+        } & {
+            htmlProps?: import("react").HTMLAttributes<HTMLButtonElement> | undefined;
+        }) | ({
+            onClick?: undefined;
+        } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+            active?: boolean | undefined;
+            completed?: boolean | undefined;
+            disabled?: boolean | undefined;
+            icon?: import("../../icons/utils").SvgIcon | undefined;
+            index?: number | undefined;
+        } & {
+            children?: import("react").ReactNode;
+        } & {
+            htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+        })) => JSX.Element;
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const WithIcons: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

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

@@ -0,0 +1,69 @@
+import { IconSize } from '../Icon';
+export declare const progressTrackerTokens: {
+    itemsWrapper: {
+        gap: string;
+    };
+    itemContentWrapper: {
+        gap: string;
+    };
+    connector: {
+        color: string;
+        height: string;
+        width: string;
+    };
+    itemNumber: {
+        size: string;
+        borderWidth: string;
+        iconSize: IconSize;
+        fontSize: string;
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+            hover: {
+                borderColor: string;
+                color: string;
+                backgroundColor: string;
+            };
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+            hover: {
+                borderColor: string;
+                color: string;
+                backgroundColor: string;
+            };
+        };
+        disabled: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    itemText: {
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+            hover: {
+                textDecoration: string;
+            };
+        };
+        disabled: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -0,0 +1,80 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    font = ddsBaseTokens.font;
+var itemsWrapper = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
+var itemContentWrapper = {
+  gap: spacing.SizesDdsSpacingLocalX05
+};
+var connector = {
+  color: colors.DdsColorNeutralsGray5,
+  height: '18px',
+  width: '1px'
+};
+var itemNumber = {
+  size: '28px',
+  borderWidth: '2px',
+  iconSize: 'small',
+  fontSize: font.DdsFontBodySans01FontSize,
+  active: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase
+  },
+  completed: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors.DdsColorInteractiveDark,
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorInteractiveDark
+    }
+  },
+  inactive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    hover: {
+      borderColor: colors.DdsColorInteractiveBase,
+      color: colors.DdsColorInteractiveBase,
+      backgroundColor: colors.DdsColorInteractiveLightest
+    }
+  },
+  disabled: {
+    borderColor: colors.DdsColorNeutralsGray5,
+    color: colors.DdsColorNeutralsGray5,
+    backgroundColor: colors.DdsColorNeutralsWhite
+  }
+};
+var itemText = {
+  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
+  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  active: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'underline'
+  },
+  inactive: {
+    color: colors.DdsColorNeutralsGray7,
+    textDecoration: 'none',
+    hover: {
+      textDecoration: 'underline'
+    }
+  },
+  disabled: {
+    color: colors.DdsColorNeutralsGray6,
+    textDecoration: 'none'
+  }
+};
+var progressTrackerTokens = {
+  itemsWrapper: itemsWrapper,
+  itemContentWrapper: itemContentWrapper,
+  connector: connector,
+  itemNumber: itemNumber,
+  itemText: itemText
+};
+
+export { progressTrackerTokens };

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

@@ -0,0 +1,24 @@
+import { SvgIcon } from '../../icons/utils';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type BaseItemProps = {
+    /** Om steget er valgt eller ikke. Settes av konsument. */
+    active?: boolean;
+    /** Om steget er ferdig eller ikke. Settes av konsument. */
+    completed?: boolean;
+    /** Om steget skal være disabled. Settes av konsument.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Ikon som skal vises istedenfor stegnummeret. Settes av konument. */
+    icon?: SvgIcon;
+    /** Indeksen til steget. NB! Denne settes automatisk av `<ProgressTracker />` og skal ikke settes manuelt. */
+    index?: number;
+};
+declare type ProgressTrackerItemProps = ({
+    /** Click-handler som gjør det mulig for bruker å klikke på steget for å navigere. Valgfri. */
+    onClick: (index: number) => void;
+} & BaseComponentPropsWithChildren<HTMLButtonElement, BaseItemProps>) | ({
+    onClick?: undefined;
+} & BaseComponentPropsWithChildren<HTMLDivElement, BaseItemProps>);
+export declare const ProgressTrackerItem: (props: ProgressTrackerItemProps) => JSX.Element;
+export {};

package/dist/components/ProgressTracker/ProgressTrackerItem.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
+import 'tslib';
+import '../../icons/utils/StyledSvg.js';
+import { CheckIcon } from '../../icons/tsx/check.js';
+import { Icon } from '../Icon/Icon.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { useProgressTrackerContext } from './ProgressTracker.context.js';
+import { progressTrackerTokens } from './ProgressTracker.tokens.js';
+
+var toItemState = function toItemState(active, completed, disabled) {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (active) {
+    return completed ? 'activeCompleted' : 'activeIncomplete';
+  } else {
+    return completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+  }
+};
+
+var itemNumber = progressTrackerTokens.itemNumber,
+    itemText = progressTrackerTokens.itemText,
+    itemContentWrapper = progressTrackerTokens.itemContentWrapper;
+var ItemWrapper = styled.li.withConfig({
+  displayName: "ProgressTrackerItem__ItemWrapper",
+  componentId: "sc-1j9qaj9-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;"]);
+var ItemNumber = styled.div.withConfig({
+  displayName: "ProgressTrackerItem__ItemNumber",
+  componentId: "sc-1j9qaj9-1"
+})(["border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;font-size:", ";font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, itemNumber.fontSize, function (_ref) {
+  var state = _ref.state;
+
+  switch (state) {
+    case 'activeIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.active.borderColor, itemNumber.active.color, itemNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
+
+    case 'inactiveCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.borderColor, itemNumber.inactive.color, itemNumber.inactive.backgroundColor);
+
+    case 'disabled':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.disabled.borderColor, itemNumber.disabled.color, itemNumber.disabled.backgroundColor);
+  }
+});
+var ItemText = styled.div.withConfig({
+  displayName: "ProgressTrackerItem__ItemText",
+  componentId: "sc-1j9qaj9-2"
+})(["font-family:", ";font-size:", ";text-align:start;", ""], itemText.fontFamily, itemText.fontSize, function (_ref2) {
+  var state = _ref2.state;
+
+  switch (state) {
+    case 'activeCompleted':
+    case 'activeIncomplete':
+      return css(["color:", ";text-decoration ", ";"], itemText.active.color, itemText.active.textDecoration);
+
+    case 'inactiveCompleted':
+    case 'inactiveIncomplete':
+      return css(["color:", ";text-decoration ", ";"], itemText.inactive.color, itemText.inactive.textDecoration);
+
+    case 'disabled':
+      return css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
+  }
+});
+var ItemContentWrapper = styled.div.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 ", ";"], itemText.inactive.hover.textDecoration);
+      }
+    });
+  }
+}, function (_ref4) {
+  var clickable = _ref4.clickable,
+      state = _ref4.state;
+  return clickable && state !== 'disabled' && css(["cursor:pointer;"]);
+});
+
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
+  return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+};
+
+var ProgressTrackerItem = function ProgressTrackerItem(props) {
+  var _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index,
+      _props$completed = props.completed,
+      completed = _props$completed === void 0 ? false : _props$completed,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      icon = props.icon,
+      children = props.children;
+
+  var _useProgressTrackerCo = useProgressTrackerContext(),
+      activeStep = _useProgressTrackerCo.activeStep;
+
+  var active = activeStep === index;
+  var styleProps = {
+    state: toItemState(active, completed, disabled),
+    clickable: props.onClick !== undefined
+  };
+  var stepNumberContent = useMemo(function () {
+    if (completed) {
+      return jsx(Icon, {
+        icon: CheckIcon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    if (icon !== undefined) {
+      return jsx(Icon, {
+        icon: icon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    return index + 1;
+  }, [completed, icon, index]);
+  return jsx(ItemWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxs(ItemContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: !disabled && props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined,
+      disabled: disabled
+    }, {
+      children: [jsx(ItemNumber, Object.assign({}, styleProps, {
+        "aria-hidden": true
+      }, {
+        children: stepNumberContent
+      })), jsxs(ItemText, Object.assign({}, styleProps, {
+        children: [jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed, index)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
+export { ProgressTrackerItem };

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

@@ -0,0 +1 @@
+export * from './ProgressTracker';

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

@@ -1,7 +1,7 @@
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
         label?: string | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;

package/dist/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -1,7 +1,7 @@
 import { RadioButtonGroupProps } from '.';
 declare const _default: {
     title: string;
-    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
+    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "id" | "className"> & {
         name?: string | undefined;
         label?: string | undefined;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;

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

@@ -6,13 +6,13 @@ declare type ButtonProps = {
     label?: string;
     loading?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare type SearchProps = Pick<BaseInputProps, 'tip'> & {
+export declare type SearchProps = Pick<BaseInputProps, 'tip' | 'label'> & {
     /**Størrelsen på komponenten. */
     componentSize?: SearchSize;
     /**Props for søkeknappen. */
     buttonProps?: ButtonProps;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare const Search: import("react").ForwardRefExoticComponent<Pick<BaseInputProps, "tip"> & {
+export declare const Search: import("react").ForwardRefExoticComponent<Pick<BaseInputProps, "label" | "tip"> & {
     /**Størrelsen på komponenten. */
     componentSize?: SearchSize | undefined;
     /**Props for søkeknappen. */

package/dist/components/Search/Search.js

@@ -7,7 +7,7 @@ import { searchTokens } from './Search.tokens.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
-import { Input as Input$1, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
+import { Input as Input$1 } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
@@ -17,9 +17,13 @@ import '../../utils/color.js';
 import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
 import { SearchIcon } from '../../icons/tsx/search.js';
+import '../Typography/Typography/Typography.js';
+import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Link/Link.js';
 
 var input = searchTokens.input,
-    container = searchTokens.container,
+    outerContainer = searchTokens.outerContainer,
+    horisontalContainer = searchTokens.horisontalContainer,
     icon = searchTokens.icon;
 
 var getIconSize = function getIconSize(size) {
@@ -49,32 +53,34 @@ var StyledIcon = styled(Icon).withConfig({
   var size = _ref2.size;
   return css(["top:", ";"], searchTokens.icon[size].top);
 });
-var Container = styled.div.withConfig({
-  displayName: "Search__Container",
+var OuterContainer = styled.div.withConfig({
+  displayName: "Search__OuterContainer",
   componentId: "sc-1ax3s9s-2"
-})(["display:flex;flex-direction:row;gap:", ";"], container.gap);
+})(["display:flex;flex-direction:column;gap:", ";"], outerContainer.gap);
+var HorisontalContainer = styled.div.withConfig({
+  displayName: "Search__HorisontalContainer",
+  componentId: "sc-1ax3s9s-3"
+})(["display:grid;grid-template-columns:1fr auto;gap:", ";"], horisontalContainer.gap);
 var InputContainer = styled.div.withConfig({
   displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-3"
-})(["position:relative;"]);
-var ButtonWrapper = styled.div.withConfig({
-  displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-4"
-})([""]);
+})(["position:relative;"]);
 var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
       buttonProps = _a.buttonProps,
       name = _a.name,
+      label = _a.label,
       tip = _a.tip,
       id = _a.id,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
+      rest = __rest(_a, ["componentSize", "buttonProps", "name", "label", "tip", "id", "className", "style", 'aria-describedby']);
 
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
+  var hasLabel = !!label;
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {
@@ -92,33 +98,35 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
 
   var _b = buttonProps || {},
-      label = _b.label,
+      buttonLabel = _b.label,
       onClick = _b.onClick,
       otherButtonProps = __rest(_b, ["label", "onClick"]);
 
-  return jsxs(Container, Object.assign({}, containerProps, {
-    children: [jsxs(OuterInputContainer, Object.assign({
-      width: "100%"
+  return jsxs(OuterContainer, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId
     }, {
-      children: [jsxs(InputContainer, {
-        children: [jsx(StyledIcon, {
-          icon: SearchIcon,
+      children: label
+    })), jsxs("div", {
+      children: [jsxs(HorisontalContainer, Object.assign({}, containerProps, {
+        children: [jsxs(InputContainer, {
+          children: [jsx(StyledIcon, {
+            icon: SearchIcon,
+            size: componentSize,
+            iconSize: getIconSize(componentSize)
+          }), jsx(Input, Object.assign({}, inputProps))]
+        }), buttonProps && onClick && jsx(Button, Object.assign({
           size: componentSize,
-          iconSize: getIconSize(componentSize)
-        }), jsx(Input, Object.assign({}, inputProps))]
-      }), hasTip && jsx(InputMessage, {
+          label: buttonLabel || 'Søk',
+          onClick: onClick
+        }, otherButtonProps))]
+      })), hasTip && jsx(InputMessage, {
         id: tipId,
         messageType: "tip",
         message: tip
       })]
-    })), buttonProps && onClick && jsx(ButtonWrapper, {
-      children: jsx(Button, Object.assign({
-        size: componentSize,
-        label: label || 'Søk',
-        onClick: onClick
-      }, otherButtonProps))
     })]
-  }));
+  });
 });
 
 export { Search };