@norges-domstoler/dds-components 11.0.0 → 11.1.1

package/dist/cjs/components/Card/CardAccordion/useElementHeight.d.ts

@@ -0,0 +1 @@
+export declare function useElementHeight(element: HTMLDivElement | null): number | null;

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,
@@ -6399,6 +6399,9 @@ var desc$1 = {
 var list$7 = {
   beforeNextTerm: {
     marginTop: spacing$n.SizesDdsSpacingLocalX2
+  },
+  rowDirection: {
+    columnGap: spacing$n.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
@@ -6419,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, {
@@ -6480,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
@@ -7535,7 +7555,25 @@ var useIsMounted = function useIsMounted() {
   }, []);
 };
 
-var expandingAnimation = styled.css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+function useElementHeight(element) {
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  React.useEffect(function () {
+    if (!element) return;
+    var resizeObserver = new ResizeObserver(function () {
+      setHeight(element.offsetHeight);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [element]);
+  return height;
+}
+
+var expandingAnimation = styled.css(["@media (prefers-reduced-motion:no-preference){transition:height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
 function getPadding(props) {
   var padding = props.padding;
   return padding || cardAccordionTokens.body.padding;
@@ -7543,28 +7581,20 @@ function getPadding(props) {
 var Body = styled__default.default.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){", "}", " height:", "px;overflow:hidden;"], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, getPadding, getFontStyling(typographyTypes$3.body), function (_ref2) {
-  var paddingTop = _ref2.paddingTop;
-  return paddingTop && styled.css(["padding-top:", ";"], paddingTop);
-}, function (_ref3) {
-  var isExpanded = _ref3.isExpanded;
-  return !isExpanded && styled.css(["padding-top:0;padding-bottom:0;"]);
+}, getFontStyling(typographyTypes$3.body), function (_ref2) {
+  var height = _ref2.height,
+    isExpanded = _ref2.isExpanded;
+  return isExpanded ? height : 0;
 });
 var BodyContainer = styled__default.default.div.withConfig({
   displayName: "CardAccordionBody__BodyContainer",
   componentId: "sc-igsnpx-1"
-})(["", " overflow:hidden;visibility:", ";max-height:", "px;"], function (_ref4) {
-  var animate = _ref4.animate;
-  return animate && expandingAnimation;
-}, function (_ref5) {
-  var isExpanded = _ref5.isExpanded;
-  return isExpanded ? 'visible' : 'hidden';
-}, function (_ref6) {
-  var maxHeight = _ref6.maxHeight;
-  return maxHeight ? maxHeight : 0;
+})(["padding:", ";", ""], getPadding, function (_ref3) {
+  var paddingTop = _ref3.paddingTop;
+  return paddingTop && styled.css(["padding-top:", ";"], paddingTop);
 });
 var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -7573,20 +7603,24 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    paddingTop = props.paddingTop,
+    rest = tslib.__rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps", "padding", "paddingTop"]);
   var bodyRef = React.useRef(null);
-  var isMounted = useIsMounted();
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     animate = _useState2[0],
     setAnimate = _useState2[1];
-  var _useState3 = React.useState(0),
+  var isMounted = useIsMounted();
+  var height = useElementHeight(bodyRef.current);
+  var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    maxHeight = _useState4[0],
-    setMaxHeight = _useState4[1];
+    initialExpandedHeight = _useState4[0],
+    setIntialExpandedHeight = _useState4[1];
   React.useLayoutEffect(function () {
+    // For å unngå initiell animasjon dersom Accordion er satt til å være åpen som default.
     if (bodyRef.current && isExpanded) {
-      setMaxHeight(bodyRef.current.scrollHeight);
+      setIntialExpandedHeight(bodyRef.current.scrollHeight);
     }
   }, []);
   React.useEffect(function () {
@@ -7594,22 +7628,17 @@ var CardAccordionBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setAnimate(true);
     }
   }, [isMounted]);
-  React.useEffect(function () {
-    if (!isExpanded) {
-      setMaxHeight(0);
-    } else if (bodyRef && bodyRef.current) {
-      setMaxHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isExpanded]);
   var bodyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref,
     isExpanded: isExpanded,
-    role: 'region'
+    role: 'region',
+    height: height || initialExpandedHeight || 0
   });
   var bodyContainerProps = {
     ref: bodyRef,
-    maxHeight: maxHeight,
-    isExpanded: isExpanded
+    isExpanded: isExpanded,
+    padding: padding,
+    paddingTop: paddingTop
   };
   return jsxRuntime.jsx(Body, Object.assign({}, bodyProps, {
     animate: animate,

package/dist/components/Card/CardAccordion/CardAccordionBody.js

@@ -7,8 +7,9 @@ import useIsMounted from '../../../hooks/useIsMounted.js';
 import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import { getFontStyling } from '../../Typography/Typography.utils.js';
 import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
+import { useElementHeight } from './useElementHeight.js';
 
-var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
 function getPadding(props) {
   var padding = props.padding;
   return padding || cardAccordionTokens.body.padding;
@@ -16,28 +17,20 @@ function getPadding(props) {
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){", "}", " height:", "px;overflow:hidden;"], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, getPadding, getFontStyling(typographyTypes.body), function (_ref2) {
-  var paddingTop = _ref2.paddingTop;
-  return paddingTop && css(["padding-top:", ";"], paddingTop);
-}, function (_ref3) {
-  var isExpanded = _ref3.isExpanded;
-  return !isExpanded && css(["padding-top:0;padding-bottom:0;"]);
+}, getFontStyling(typographyTypes.body), function (_ref2) {
+  var height = _ref2.height,
+    isExpanded = _ref2.isExpanded;
+  return isExpanded ? height : 0;
 });
 var BodyContainer = styled.div.withConfig({
   displayName: "CardAccordionBody__BodyContainer",
   componentId: "sc-igsnpx-1"
-})(["", " overflow:hidden;visibility:", ";max-height:", "px;"], function (_ref4) {
-  var animate = _ref4.animate;
-  return animate && expandingAnimation;
-}, function (_ref5) {
-  var isExpanded = _ref5.isExpanded;
-  return isExpanded ? 'visible' : 'hidden';
-}, function (_ref6) {
-  var maxHeight = _ref6.maxHeight;
-  return maxHeight ? maxHeight : 0;
+})(["padding:", ";", ""], getPadding, function (_ref3) {
+  var paddingTop = _ref3.paddingTop;
+  return paddingTop && css(["padding-top:", ";"], paddingTop);
 });
 var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -46,20 +39,24 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    paddingTop = props.paddingTop,
+    rest = __rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps", "padding", "paddingTop"]);
   var bodyRef = useRef(null);
-  var isMounted = useIsMounted();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     animate = _useState2[0],
     setAnimate = _useState2[1];
-  var _useState3 = useState(0),
+  var isMounted = useIsMounted();
+  var height = useElementHeight(bodyRef.current);
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    maxHeight = _useState4[0],
-    setMaxHeight = _useState4[1];
+    initialExpandedHeight = _useState4[0],
+    setIntialExpandedHeight = _useState4[1];
   useLayoutEffect(function () {
+    // For å unngå initiell animasjon dersom Accordion er satt til å være åpen som default.
     if (bodyRef.current && isExpanded) {
-      setMaxHeight(bodyRef.current.scrollHeight);
+      setIntialExpandedHeight(bodyRef.current.scrollHeight);
     }
   }, []);
   useEffect(function () {
@@ -67,22 +64,17 @@ var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
       setAnimate(true);
     }
   }, [isMounted]);
-  useEffect(function () {
-    if (!isExpanded) {
-      setMaxHeight(0);
-    } else if (bodyRef && bodyRef.current) {
-      setMaxHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isExpanded]);
   var bodyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref,
     isExpanded: isExpanded,
-    role: 'region'
+    role: 'region',
+    height: height || initialExpandedHeight || 0
   });
   var bodyContainerProps = {
     ref: bodyRef,
-    maxHeight: maxHeight,
-    isExpanded: isExpanded
+    isExpanded: isExpanded,
+    padding: padding,
+    paddingTop: paddingTop
   };
   return jsx(Body, Object.assign({}, bodyProps, {
     animate: animate,

package/dist/components/Card/CardAccordion/useElementHeight.d.ts

@@ -0,0 +1 @@
+export declare function useElementHeight(element: HTMLDivElement | null): number | null;

package/dist/components/Card/CardAccordion/useElementHeight.js

@@ -0,0 +1,22 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+
+function useElementHeight(element) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  useEffect(function () {
+    if (!element) return;
+    var resizeObserver = new ResizeObserver(function () {
+      setHeight(element.offsetHeight);
+    });
+    resizeObserver.observe(element);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [element]);
+  return height;
+}
+
+export { useElementHeight };

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": "11.0.0",
+  "version": "11.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",