@norges-domstoler/dds-components 10.7.0 → 11.1.0

package/dist/cjs/components/DescriptionList/DescriptionList.d.ts

@@ -3,10 +3,18 @@ export type DescriptionListAppearance = 'small' | 'bold';
 export type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDListElement, {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: 'row' | 'column';
 }>;
 export declare const DescriptionList: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance | undefined;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: "row" | "column" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/cjs/components/DescriptionList/DescriptionList.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
+        direction?: "row" | "column" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
@@ -14,4 +15,4 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: DescriptionListProps) => JSX.Element;
 export declare const Group: (args: DescriptionListProps) => JSX.Element;
 export declare const WithIcon: (args: DescriptionListProps) => JSX.Element;
-export declare const ColumnExample: (args: DescriptionListProps) => JSX.Element;
+export declare const RowDirectionExample: (args: DescriptionListProps) => JSX.Element;

package/dist/cjs/components/DescriptionList/DescriptionList.tokens.d.ts

@@ -31,6 +31,9 @@ export declare const descriptionListTokens: {
         beforeNextTerm: {
             marginTop: string;
         };
+        rowDirection: {
+            columnGap: string;
+        };
     };
     group: {
         base: {

package/dist/cjs/components/DescriptionList/DescriptionListGroup.d.ts

@@ -3,10 +3,18 @@ import { BaseComponentPropsWithChildren } from '../../types';
 export type DescriptionListGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Custom margin. */
     margin?: Property.Margin<string>;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string>;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string>;
 }>;
 export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Custom margin. */
     margin?: Property.Margin<string> | undefined;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string> | undefined;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/cjs/components/InputMessage/InputMessage.d.ts

@@ -12,5 +12,5 @@ export declare const InputMessage: import("react").ForwardRefExoticComponent<Pic
     /** Formålet med meldingen. Påvirker styling. */
     messageType: InputMessageType;
 } & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined; /** Meldingen som vises til brukeren. */
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/index.js

@@ -2069,7 +2069,7 @@ var InputMessageWrapper = styled__default.default.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? styled.css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
@@ -3613,55 +3613,58 @@ var getAppearanceAndPurposeStyling = function getAppearanceAndPurposeStyling(app
 var ButtonWrapper = styled__default.default.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base$1.border, function (_ref) {
+})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:", ";box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base$1.border, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, focusVisibleTransitionValue, function (_ref2) {
-  var appearance = _ref2.appearance,
-    purpose = _ref2.purpose;
-  return styled.css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances$1[appearance].base.borderRadius, appearances$1[appearance].base.boxShadow, appearances$1[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
-}, function (_ref3) {
-  var hasIcon = _ref3.hasIcon,
-    hasLabel = _ref3.hasLabel,
-    appearance = _ref3.appearance,
+}, function (_ref2) {
+  var isLoading = _ref2.isLoading;
+  return isLoading ? 'not-allowed' : 'pointer';
+}, focusVisibleTransitionValue, function (_ref3) {
+  var appearance = _ref3.appearance,
     purpose = _ref3.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && styled.css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances$1[appearance].purpose[purpose].icon.hover.borderColor, appearances$1[appearance].purpose[purpose].icon.hover.boxShadow, appearances$1[appearance].purpose[purpose].icon.active.borderColor, appearances$1[appearance].purpose[purpose].icon.active.boxShadow);
+  return styled.css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances$1[appearance].base.borderRadius, appearances$1[appearance].base.boxShadow, appearances$1[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
 }, function (_ref4) {
   var hasIcon = _ref4.hasIcon,
     hasLabel = _ref4.hasLabel,
-    size = _ref4.size;
-  return hasIcon && hasLabel && styled.css(["gap:", ";"], sizes$1[size].textAndIcon.gap);
+    appearance = _ref4.appearance,
+    purpose = _ref4.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && styled.css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances$1[appearance].purpose[purpose].icon.hover.borderColor, appearances$1[appearance].purpose[purpose].icon.hover.boxShadow, appearances$1[appearance].purpose[purpose].icon.active.borderColor, appearances$1[appearance].purpose[purpose].icon.active.boxShadow);
 }, function (_ref5) {
-  var size = _ref5.size,
-    hasLabel = _ref5.hasLabel;
-  return hasLabel ? styled.css(["", " padding:", ";"], getFontStyling(typographyTypes$6[size]), sizes$1[size].text.padding) : styled.css(["font-size:", ";padding:", ";"], sizes$1[size].justIcon.icon.fontSize, sizes$1[size].justIcon.icon.padding);
+  var hasIcon = _ref5.hasIcon,
+    hasLabel = _ref5.hasLabel,
+    size = _ref5.size;
+  return hasIcon && hasLabel && styled.css(["gap:", ";"], sizes$1[size].textAndIcon.gap);
 }, function (_ref6) {
-  var fullWidth = _ref6.fullWidth,
-    hasIcon = _ref6.hasIcon,
-    hasLabel = _ref6.hasLabel,
-    isLoading = _ref6.isLoading,
-    iconPosition = _ref6.iconPosition;
+  var size = _ref6.size,
+    hasLabel = _ref6.hasLabel;
+  return hasLabel ? styled.css(["", " padding:", ";"], getFontStyling(typographyTypes$6[size]), sizes$1[size].text.padding) : styled.css(["font-size:", ";padding:", ";"], sizes$1[size].justIcon.icon.fontSize, sizes$1[size].justIcon.icon.padding);
+}, function (_ref7) {
+  var fullWidth = _ref7.fullWidth,
+    hasIcon = _ref7.hasIcon,
+    hasLabel = _ref7.hasLabel,
+    isLoading = _ref7.isLoading,
+    iconPosition = _ref7.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? styled.css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? styled.css(["justify-content:left;"]) : styled.css(["justify-content:space-between;"]));
 }, focusVisible, selection);
 var StyledIconWrapperSpan = styled__default.default.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref7) {
-  var absolutePosition = _ref7.absolutePosition;
+})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref8) {
+  var absolutePosition = _ref8.absolutePosition;
   return absolutePosition && styled.css(["position:absolute;"]);
-}, function (_ref8) {
-  var isHidden = _ref8.isHidden;
-  return isHidden && styled.css(["visibility:hidden;"]);
 }, function (_ref9) {
-  var justIcon = _ref9.justIcon,
-    size = _ref9.size;
+  var isHidden = _ref9.isHidden;
+  return isHidden && styled.css(["visibility:hidden;"]);
+}, function (_ref10) {
+  var justIcon = _ref10.justIcon,
+    size = _ref10.size;
   return justIcon && styled.css(["height:", ";width:", ";"], sizes$1[size].justIcon.wrapper.height, sizes$1[size].justIcon.wrapper.width);
 });
 var Label$1 = styled__default.default.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(["", ""], function (_ref10) {
-  var isHidden = _ref10.isHidden;
+})(["", ""], function (_ref11) {
+  var isHidden = _ref11.isHidden;
   return isHidden && styled.css(["visibility:hidden;"]);
 });
 
@@ -3685,7 +3688,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     icon = props.icon,
-    onClick = props.onClick,
+    _onClick = props.onClick,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     id = props.id,
@@ -3710,7 +3713,11 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasIcon: hasIcon,
     isLoading: loading,
     size: size,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      if (!loading && _onClick) {
+        _onClick(event);
+      }
+    },
     onFocus: onFocus,
     onBlur: onBlur
   });
@@ -3726,6 +3733,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })
   }));
   return jsxRuntime.jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
+    "aria-disabled": loading
+  }, {
     children: [!isIconButton && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$1, Object.assign({
         isHidden: loading,
@@ -6390,6 +6399,9 @@ var desc$1 = {
 var list$7 = {
   beforeNextTerm: {
     marginTop: spacing$n.SizesDdsSpacingLocalX2
+  },
+  rowDirection: {
+    columnGap: spacing$n.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
@@ -6410,20 +6422,27 @@ var term = descriptionListTokens.term,
 var DList = styled__default.default.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
+})(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && styled.css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && styled.css(["font-weight:600;"]));
-}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list$6.beforeNextTerm.marginTop);
+}, function (_ref2) {
+  var _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;
+  return direction;
+}, list$6.rowDirection.columnGap, term.firstOfType.marginTop, desc.lastChild.marginBottom, list$6.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'column' : _props$direction,
     children = props.children,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["appearance", "direction", "children", "id", "className", "htmlProps"]);
   var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     appearance: appearance,
+    direction: direction,
     ref: ref
   });
   return jsxRuntime.jsx(DList, Object.assign({}, dListProps, {
@@ -6471,21 +6490,31 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var DListGroup = styled__default.default.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["margin:", ";"], function (_ref) {
+})(["margin:", ";", " ", ""], function (_ref) {
   var margin = _ref.margin;
   return margin ? margin : descriptionListTokens.group.base.margin;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth && "min-width: ".concat(minWidth);
+}, function (_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  return maxWidth && "max-width: ".concat(maxWidth);
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     margin = props.margin,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["children", "margin", "minWidth", "maxWidth", "id", "className", "htmlProps"]);
   var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     children: children,
     ref: ref,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth,
+    maxWidth: maxWidth
   });
   return jsxRuntime.jsx(DListGroup, Object.assign({}, dListGroupProps, {
     children: children

package/dist/components/Button/Button.js

@@ -27,7 +27,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     icon = props.icon,
-    onClick = props.onClick,
+    _onClick = props.onClick,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     id = props.id,
@@ -52,7 +52,11 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     hasIcon: hasIcon,
     isLoading: loading,
     size: size,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      if (!loading && _onClick) {
+        _onClick(event);
+      }
+    },
     onFocus: onFocus,
     onBlur: onBlur
   });
@@ -68,6 +72,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     })
   }));
   return jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
+    "aria-disabled": loading
+  }, {
     children: [!isIconButton && jsxs(Fragment, {
       children: [iconPosition === 'left' && iconElement, jsx(Label, Object.assign({
         isHidden: loading,

package/dist/components/Button/Button.styles.js

@@ -26,55 +26,58 @@ var getAppearanceAndPurposeStyling = function getAppearanceAndPurposeStyling(app
 var ButtonWrapper = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base.border, function (_ref) {
+})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:", ";box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base.border, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, focusVisibleTransitionValue, function (_ref2) {
-  var appearance = _ref2.appearance,
-    purpose = _ref2.purpose;
-  return css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances[appearance].base.borderRadius, appearances[appearance].base.boxShadow, appearances[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
-}, function (_ref3) {
-  var hasIcon = _ref3.hasIcon,
-    hasLabel = _ref3.hasLabel,
-    appearance = _ref3.appearance,
+}, function (_ref2) {
+  var isLoading = _ref2.isLoading;
+  return isLoading ? 'not-allowed' : 'pointer';
+}, focusVisibleTransitionValue, function (_ref3) {
+  var appearance = _ref3.appearance,
     purpose = _ref3.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances[appearance].purpose[purpose].icon.hover.borderColor, appearances[appearance].purpose[purpose].icon.hover.boxShadow, appearances[appearance].purpose[purpose].icon.active.borderColor, appearances[appearance].purpose[purpose].icon.active.boxShadow);
+  return css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances[appearance].base.borderRadius, appearances[appearance].base.boxShadow, appearances[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
 }, function (_ref4) {
   var hasIcon = _ref4.hasIcon,
     hasLabel = _ref4.hasLabel,
-    size = _ref4.size;
-  return hasIcon && hasLabel && css(["gap:", ";"], sizes[size].textAndIcon.gap);
+    appearance = _ref4.appearance,
+    purpose = _ref4.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances[appearance].purpose[purpose].icon.hover.borderColor, appearances[appearance].purpose[purpose].icon.hover.boxShadow, appearances[appearance].purpose[purpose].icon.active.borderColor, appearances[appearance].purpose[purpose].icon.active.boxShadow);
 }, function (_ref5) {
-  var size = _ref5.size,
-    hasLabel = _ref5.hasLabel;
-  return hasLabel ? css(["", " padding:", ";"], getFontStyling(typographyTypes[size]), sizes[size].text.padding) : css(["font-size:", ";padding:", ";"], sizes[size].justIcon.icon.fontSize, sizes[size].justIcon.icon.padding);
+  var hasIcon = _ref5.hasIcon,
+    hasLabel = _ref5.hasLabel,
+    size = _ref5.size;
+  return hasIcon && hasLabel && css(["gap:", ";"], sizes[size].textAndIcon.gap);
 }, function (_ref6) {
-  var fullWidth = _ref6.fullWidth,
-    hasIcon = _ref6.hasIcon,
-    hasLabel = _ref6.hasLabel,
-    isLoading = _ref6.isLoading,
-    iconPosition = _ref6.iconPosition;
+  var size = _ref6.size,
+    hasLabel = _ref6.hasLabel;
+  return hasLabel ? css(["", " padding:", ";"], getFontStyling(typographyTypes[size]), sizes[size].text.padding) : css(["font-size:", ";padding:", ";"], sizes[size].justIcon.icon.fontSize, sizes[size].justIcon.icon.padding);
+}, function (_ref7) {
+  var fullWidth = _ref7.fullWidth,
+    hasIcon = _ref7.hasIcon,
+    hasLabel = _ref7.hasLabel,
+    isLoading = _ref7.isLoading,
+    iconPosition = _ref7.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? css(["justify-content:left;"]) : css(["justify-content:space-between;"]));
 }, focusVisible, selection);
 var StyledIconWrapperSpan = styled.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref7) {
-  var absolutePosition = _ref7.absolutePosition;
+})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref8) {
+  var absolutePosition = _ref8.absolutePosition;
   return absolutePosition && css(["position:absolute;"]);
-}, function (_ref8) {
-  var isHidden = _ref8.isHidden;
-  return isHidden && css(["visibility:hidden;"]);
 }, function (_ref9) {
-  var justIcon = _ref9.justIcon,
-    size = _ref9.size;
+  var isHidden = _ref9.isHidden;
+  return isHidden && css(["visibility:hidden;"]);
+}, function (_ref10) {
+  var justIcon = _ref10.justIcon,
+    size = _ref10.size;
   return justIcon && css(["height:", ";width:", ";"], sizes[size].justIcon.wrapper.height, sizes[size].justIcon.wrapper.width);
 });
 var Label = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(["", ""], function (_ref10) {
-  var isHidden = _ref10.isHidden;
+})(["", ""], function (_ref11) {
+  var isHidden = _ref11.isHidden;
   return isHidden && css(["visibility:hidden;"]);
 });
 

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -3,10 +3,18 @@ export type DescriptionListAppearance = 'small' | 'bold';
 export type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDListElement, {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: 'row' | 'column';
 }>;
 export declare const DescriptionList: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance | undefined;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: "row" | "column" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/DescriptionList/DescriptionList.js

@@ -17,20 +17,27 @@ var term = descriptionListTokens.term,
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
+})(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
-}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
+}, function (_ref2) {
+  var _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;
+  return direction;
+}, list.rowDirection.columnGap, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'column' : _props$direction,
     children = props.children,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+    rest = __rest(props, ["appearance", "direction", "children", "id", "className", "htmlProps"]);
   var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     appearance: appearance,
+    direction: direction,
     ref: ref
   });
   return jsx(DList, Object.assign({}, dListProps, {

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

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
+        direction?: "row" | "column" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
@@ -14,4 +15,4 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: DescriptionListProps) => JSX.Element;
 export declare const Group: (args: DescriptionListProps) => JSX.Element;
 export declare const WithIcon: (args: DescriptionListProps) => JSX.Element;
-export declare const ColumnExample: (args: DescriptionListProps) => JSX.Element;
+export declare const RowDirectionExample: (args: DescriptionListProps) => JSX.Element;

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

@@ -31,6 +31,9 @@ export declare const descriptionListTokens: {
         beforeNextTerm: {
             marginTop: string;
         };
+        rowDirection: {
+            columnGap: string;
+        };
     };
     group: {
         base: {

package/dist/components/DescriptionList/DescriptionList.tokens.js

@@ -32,6 +32,9 @@ var desc = {
 var list = {
   beforeNextTerm: {
     marginTop: spacing.SizesDdsSpacingLocalX2
+  },
+  rowDirection: {
+    columnGap: spacing.SizesDdsSpacingLocalX2
   }
 };
 var group = {

package/dist/components/DescriptionList/DescriptionListGroup.d.ts

@@ -3,10 +3,18 @@ import { BaseComponentPropsWithChildren } from '../../types';
 export type DescriptionListGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Custom margin. */
     margin?: Property.Margin<string>;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string>;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string>;
 }>;
 export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Custom margin. */
     margin?: Property.Margin<string> | undefined;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string> | undefined;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/DescriptionList/DescriptionListGroup.js

@@ -8,21 +8,31 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var DListGroup = styled.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["margin:", ";"], function (_ref) {
+})(["margin:", ";", " ", ""], function (_ref) {
   var margin = _ref.margin;
   return margin ? margin : descriptionListTokens.group.base.margin;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth && "min-width: ".concat(minWidth);
+}, function (_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  return maxWidth && "max-width: ".concat(maxWidth);
 });
 var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     margin = props.margin,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+    rest = __rest(props, ["children", "margin", "minWidth", "maxWidth", "id", "className", "htmlProps"]);
   var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     children: children,
     ref: ref,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth,
+    maxWidth: maxWidth
   });
   return jsx(DListGroup, Object.assign({}, dListGroupProps, {
     children: children

package/dist/components/InputMessage/InputMessage.d.ts

@@ -12,5 +12,5 @@ export declare const InputMessage: import("react").ForwardRefExoticComponent<Pic
     /** Formålet med meldingen. Påvirker styling. */
     messageType: InputMessageType;
 } & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined; /** Meldingen som vises til brukeren. */
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/InputMessage/InputMessage.js

@@ -22,7 +22,7 @@ var InputMessageWrapper = styled.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.7.0",
+  "version": "11.1.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -61,8 +61,8 @@
     "@storybook/addons": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.15",
+    "@storybook/mdx2-csf": "^0.0.4",
+    "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.15",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -71,7 +71,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
@@ -79,10 +79,10 @@
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.4",
     "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest-environment-jsdom": "^29.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.10.0",