@norges-domstoler/dds-components 5.1.0 → 5.2.0-beta.2

package/dist/cjs/index.js

@@ -3843,30 +3843,30 @@ var AnimatedChevronUpDown = function AnimatedChevronUpDown(_ref) {
   }));
 };
 
-var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$4 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$6 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$4 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     border = ddsDesignTokens.ddsBaseTokens.border;
 var TextInput$2 = ddsDesignTokens.ddsReferenceTokens.textInput;
 var inputBase$2 = Object.assign({
   color: TextInput$2.input.textColor,
   borderRadius: TextInput$2.input.borderRadius,
-  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$3.DdsColorNeutralsGray5),
+  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors$4.DdsColorNeutralsGray5),
   borderColor: TextInput$2.input.borderColor,
-  backgroundColor: colors$3.DdsColorNeutralsWhite
+  backgroundColor: colors$4.DdsColorNeutralsWhite
 }, TextInput$2.input.font);
 var inputFocusBase = Object.assign({}, focusInputfield);
 var inputHoverBase = Object.assign({}, hoverInputfield);
 var inputHasLabelBase = {
-  padding: "".concat(spacing$5.SizesDdsSpacingLocalX075NumberPx + fontPackages$4.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$4.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075NumberPx + fontPackages$4.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages$4.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase$1 = {
-  padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1, " ").concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1, " ").concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
 };
 var inputDisabledBase = {
   cursor: 'not-allowed',
-  color: colors$3.DdsColorNeutralsGray7,
-  backgroundColor: colors$3.DdsColorNeutralsGray1
+  color: colors$4.DdsColorNeutralsGray7,
+  backgroundColor: colors$4.DdsColorNeutralsGray1
 };
 var inputErrorBase = Object.assign({}, dangerInputfield);
 var inputErrorHoverBase = Object.assign({}, hoverDangerInputfield);
@@ -3876,10 +3876,10 @@ var inputReadOnlyBase = {
   outline: 'none',
   cursor: 'default',
   backgroundColor: 'transparent',
-  paddingLeft: spacing$5.SizesDdsSpacingLocalX1
+  paddingLeft: spacing$6.SizesDdsSpacingLocalX1
 };
 var inputLabelBase = {
-  padding: "".concat(spacing$5.SizesDdsSpacingLocalX075, " ").concat(spacing$5.SizesDdsSpacingLocalX1)
+  padding: "".concat(spacing$6.SizesDdsSpacingLocalX075, " ").concat(spacing$6.SizesDdsSpacingLocalX1)
 };
 var inputLabelHoverBase = {
   color: TextInput$2.label.hover.textColor
@@ -3888,7 +3888,7 @@ var inputLabelFocusBase = {
   color: TextInput$2.label.focus.textColor
 };
 var inputLabelDisabledBase = {
-  color: colors$3.DdsColorNeutralsGray6
+  color: colors$4.DdsColorNeutralsGray6
 };
 var inputTokens = {
   baseInput: {
@@ -6460,25 +6460,25 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : null;
 });
 
-var spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$5 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$3 = ddsDesignTokens.ddsBaseTokens.fontPackages,
     iconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes;
 var textDefault$5 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var inputBase = {
-  paddingRight: spacing$4.SizesDdsSpacingLocalX05,
-  paddingLeft: spacing$4.SizesDdsSpacingLocalX3
+  paddingRight: spacing$5.SizesDdsSpacingLocalX05,
+  paddingLeft: spacing$5.SizesDdsSpacingLocalX3
 };
 var smallBase$1 = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_01.base), {
-  paddingTop: spacing$4.SizesDdsSpacingLocalX05,
-  paddingBottom: spacing$4.SizesDdsSpacingLocalX05
+  paddingTop: spacing$5.SizesDdsSpacingLocalX05,
+  paddingBottom: spacing$5.SizesDdsSpacingLocalX05
 });
 var mediumBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_02.base), {
-  paddingTop: spacing$4.SizesDdsSpacingLocalX075,
-  paddingBottom: spacing$4.SizesDdsSpacingLocalX075
+  paddingTop: spacing$5.SizesDdsSpacingLocalX075,
+  paddingBottom: spacing$5.SizesDdsSpacingLocalX075
 });
 var largeBase = Object.assign(Object.assign({}, fontPackages$3.supportingStyle_inputtext_03.base), {
-  paddingTop: spacing$4.SizesDdsSpacingLocalX1,
-  paddingBottom: spacing$4.SizesDdsSpacingLocalX1
+  paddingTop: spacing$5.SizesDdsSpacingLocalX1,
+  paddingBottom: spacing$5.SizesDdsSpacingLocalX1
 });
 var iconWrapperBase = {
   color: textDefault$5.textColor
@@ -6486,7 +6486,7 @@ var iconWrapperBase = {
 var containerBase$3 = {
   display: 'flex',
   flexDirection: 'row',
-  gap: spacing$4.SizesDdsSpacingLocalX05
+  gap: spacing$5.SizesDdsSpacingLocalX05
 };
 var searchTokens = {
   input: {
@@ -6502,7 +6502,7 @@ var searchTokens = {
     }
   },
   icon: {
-    spaceLeft: spacing$4.SizesDdsSpacingLocalX075,
+    spaceLeft: spacing$5.SizesDdsSpacingLocalX075,
     small: {
       size: 'small',
       spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeSmallNumberPx / 2, "px)")
@@ -6515,7 +6515,7 @@ var searchTokens = {
       size: 'medium',
       spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeMediumNumberPx / 2, "px)")
     },
-    spaceTop: "calc(50% - ".concat(spacing$4.SizesDdsSpacingLocalX15NumberPx / 2, "px)")
+    spaceTop: "calc(50% - ".concat(spacing$5.SizesDdsSpacingLocalX15NumberPx / 2, "px)")
   },
   iconWrapper: {
     base: iconWrapperBase
@@ -7030,15 +7030,15 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$3 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$4 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$2 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var iconBase$1 = {
-  color: colors$2.DdsColorInteractiveBase,
-  marginLeft: spacing$3.SizesDdsSpacingLocalX05
+  color: colors$3.DdsColorInteractiveBase,
+  marginLeft: spacing$4.SizesDdsSpacingLocalX05
 };
 var breadcrumbBase = Object.assign(Object.assign({}, fontPackages$2.body_sans_02.base), {
-  gap: spacing$3.SizesDdsSpacingLocalX05
+  gap: spacing$4.SizesDdsSpacingLocalX05
 });
 var breadcrumbTokens = {
   breadcrumb: {
@@ -7493,7 +7493,7 @@ var StyledList = styled__default["default"].ul.withConfig({
   return typographyType && styled.css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:url(\"", "\");}ul > li:before{background-image:url(\"", "\");}ul > li > ul > li:before{background-image:url(\"", "\");}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), bullet, bulletLvl2, bulletLvl3) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
+  return listType === 'unordered' ? styled.css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), "url(\"".concat(bullet, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : styled.css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$listType = props.listType,
@@ -7597,17 +7597,17 @@ var DescriptionListTerm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing,
+var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing,
     fontPackages$1 = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var textDefault$1 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var base$6 = Object.assign(Object.assign({}, fontPackages$1.body_sans_03.base), {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing$2.SizesDdsSpacingLocalX025,
+  gap: spacing$3.SizesDdsSpacingLocalX025,
   color: textDefault$1.textColor
 });
 var iconBase = {
-  marginRight: spacing$2.SizesDdsSpacingLocalX025
+  marginRight: spacing$3.SizesDdsSpacingLocalX025
 };
 var descriptionListDescTokens = {
   base: base$6,
@@ -8229,6 +8229,9 @@ function placementToArrowPlacement(placement) {
   }
 }
 
+var isKeyboardEvent = function isKeyboardEvent(e) {
+  return e.key !== undefined;
+};
 function useRoveFocus(size, reset) {
   var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'column';
 
@@ -8237,17 +8240,17 @@ function useRoveFocus(size, reset) {
       currentFocus = _useState2[0],
       setCurrentFocus = _useState2[1];
 
-  var nextKey = direction === 'row' ? 39 : 40;
-  var previousKey = direction === 'row' ? 37 : 38;
+  var nextKey = direction === 'row' ? 'ArrowRight' : 'ArrowDown';
+  var previousKey = direction === 'row' ? 'ArrowLeft' : 'ArrowUp';
   var handleKeyDown = React.useCallback(function (e) {
-    if (!size) return;
+    if (!size || !isKeyboardEvent(e)) return;
     if (reset) setCurrentFocus(-1);
 
-    if (e.keyCode === nextKey) {
+    if (e.key === nextKey) {
       // Down arrow
       e.preventDefault();
       setCurrentFocus(currentFocus === size - 1 ? 0 : currentFocus + 1);
-    } else if (e.keyCode === previousKey) {
+    } else if (e.key === previousKey) {
       // Up arrow
       e.preventDefault();
 
@@ -8875,7 +8878,7 @@ var InternalHeader = function InternalHeader(props) {
   }));
 };
 
-var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='rgba(58%2c65%2c70%2c1)'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3e%3cpath d='M0 0h24v24H0V0z' fill='none'/%3e%3cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z' fill='%233a4146' /%3e%3c/svg%3e";
   var CalendarIcon = img;
 
 var IconSizes = ddsDesignTokens.ddsBaseTokens.iconSizes,
@@ -8907,7 +8910,7 @@ var getWidth = function getWidth(type) {
 var StyledInput = styled__default["default"](StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}::-webkit-calendar-picker-indicator:focus-visible{", "}::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-year-field:focus,::-webkit-datetime-edit-hour-field:focus,::-webkit-datetime-edit-minute-field:focus{", "}"], CalendarIcon, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
 var nextUniqueId$8 = 0;
 var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var id = _a.id,
@@ -10308,13 +10311,13 @@ var TabPanels = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
+var colors$2 = ddsDesignTokens.ddsBaseTokens.colors,
     borderRadius$1 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing;
+    spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
 var wrapperBase = {
   border: '1px solid',
   borderRadius: borderRadius$1.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing$1.SizesDdsSpacingLocalX0125, " ").concat(spacing$1.SizesDdsSpacingLocalX025),
+  padding: "".concat(spacing$2.SizesDdsSpacingLocalX0125, " ").concat(spacing$2.SizesDdsSpacingLocalX025),
   maxWidth: '100%',
   display: 'inline-flex',
   alignItems: 'center'
@@ -10325,8 +10328,8 @@ var innerBase = {
   textOverflow: 'ellipsis'
 };
 var defaultBase = {
-  backgroundColor: colors$1.DdsColorNeutralsGray1,
-  borderColor: colors$1.DdsColorNeutralsGray3
+  backgroundColor: colors$2.DdsColorNeutralsGray1,
+  borderColor: colors$2.DdsColorNeutralsGray3
 };
 var successBase = Object.assign({}, localMessageTokens.container.success.base);
 var warningBase = Object.assign({}, localMessageTokens.container.warning.base);
@@ -10390,19 +10393,19 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-var colors = ddsDesignTokens.ddsBaseTokens.colors,
-    spacing = ddsDesignTokens.ddsBaseTokens.spacing,
+var colors$1 = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing$1 = ddsDesignTokens.ddsBaseTokens.spacing,
     borderRadius = ddsDesignTokens.ddsBaseTokens.borderRadius,
     fontPackages = ddsDesignTokens.ddsBaseTokens.fontPackages;
 var containerBase = {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing.SizesDdsSpacingLocalX025,
-  padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
-  backgroundColor: colors.DdsColorNeutralsGray1,
-  border: "1px solid ".concat(colors.DdsColorNeutralsGray3),
+  gap: spacing$1.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing$1.SizesDdsSpacingLocalX0125, " ").concat(spacing$1.SizesDdsSpacingLocalX025),
+  backgroundColor: colors$1.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors$1.DdsColorNeutralsGray3),
   borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-  color: colors.DdsColorNeutralsGray9,
+  color: colors$1.DdsColorNeutralsGray9,
   maxWidth: '100%'
 };
 var textBase = Object.assign({
@@ -10412,7 +10415,7 @@ var textBase = Object.assign({
 }, fontPackages.body_sans_01.base);
 var groupBase = {
   display: 'flex',
-  gap: spacing.SizesDdsSpacingLocalX075
+  gap: spacing$1.SizesDdsSpacingLocalX075
 };
 var chipTokens = {
   container: {
@@ -10502,7 +10505,7 @@ var ChipGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var Wrapper = styled__default["default"].span.withConfig({
   displayName: "VisuallyHidden__Wrapper",
   componentId: "sc-ciubxt-0"
-})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+})(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
 var VisuallyHidden = function VisuallyHidden(props) {
   var children = props.children,
       id = props.id,
@@ -10524,6 +10527,222 @@ var VisuallyHidden = function VisuallyHidden(props) {
   }));
 };
 
+var StepperContext = /*#__PURE__*/React.createContext({
+  activeStep: 0
+});
+var useStepperContext = function useStepperContext() {
+  return React.useContext(StepperContext);
+};
+
+var StepsWrapper = styled__default["default"].ol.withConfig({
+  displayName: "Stepper__StepsWrapper",
+  componentId: "sc-4w2c73-0"
+})(["display:flex;margin:0;padding:0;"]);
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+var Stepper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _a;
+
+  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 = tslib.__rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+  var _useState = React.useState(activeStep),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveStep = _useState2[0],
+      setActiveStep = _useState2[1];
+
+  React.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 = (_a = React.Children.map(children, function (step, index) {
+    if (! /*#__PURE__*/React.isValidElement(step)) {
+      return false;
+    }
+
+    return /*#__PURE__*/React.cloneElement(step, Object.assign(Object.assign({}, step.props), {
+      index: index
+    }));
+  })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+  return jsxRuntime.jsx(StepperContext.Provider, Object.assign({
+    value: {
+      activeStep: thisActiveStep
+    }
+  }, {
+    children: jsxRuntime.jsx("div", Object.assign({
+      role: "group",
+      "aria-label": "progress"
+    }, containerProps, {
+      children: jsxRuntime.jsx(StepsWrapper, {
+        children: steps
+      })
+    }))
+  }));
+});
+
+var colors = ddsDesignTokens.ddsBaseTokens.colors,
+    spacing = ddsDesignTokens.ddsBaseTokens.spacing,
+    font = ddsDesignTokens.ddsBaseTokens.font;
+var connector$1 = {
+  color: colors.DdsColorInteractiveBase
+};
+var stepNumber$1 = {
+  active: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase
+  },
+  completed: {
+    borderColor: colors.DdsColorSuccessLighter,
+    color: colors.DdsColorNeutralsGray9,
+    backgroundColor: colors.DdsColorSuccessLighter
+  },
+  inactive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite
+  }
+};
+var stepButton$1 = {
+  marginTop: spacing.SizesDdsSpacingLayoutX1,
+  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
+  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  active: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'none'
+  },
+  completed: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  },
+  inactive: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  }
+};
+var stepperTokens = {
+  connector: connector$1,
+  stepNumber: stepNumber$1,
+  stepButton: stepButton$1
+};
+
+var toStepState = function toStepState(active, completed) {
+  return active ? completed ? 'activeCompleted' : 'activeIncomplete' : completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+};
+
+var stepNumber = stepperTokens.stepNumber,
+    connector = stepperTokens.connector,
+    stepButton = stepperTokens.stepButton;
+var stepSize = '40px';
+var StepWrapper = styled__default["default"].li.withConfig({
+  displayName: "Step__StepWrapper",
+  componentId: "sc-5n6xpp-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;:not(:last-child):after{content:'';display:block;border-top:1px solid ", ";position:absolute;width:100%;left:50%;top:calc(", " / 2);}"], connector.color, stepSize);
+var StepContentWrapper = styled__default["default"].div.withConfig({
+  displayName: "Step__StepContentWrapper",
+  componentId: "sc-5n6xpp-1"
+})(["background:none;border:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;transition:", ";:focus-visible{", "}", ""], focusVisibleTransitionValue, focusVisible, function (_ref) {
+  var clickable = _ref.clickable;
+  return clickable && styled.css(["cursor:pointer;"]);
+});
+var StepNumber = styled__default["default"].div.withConfig({
+  displayName: "Step__StepNumber",
+  componentId: "sc-5n6xpp-2"
+})(["border-radius:50%;border:1px solid;padding:5px;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", ""], stepSize, stepSize, function (_ref2) {
+  var state = _ref2.state;
+
+  switch (state) {
+    case 'activeIncomplete':
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.active.borderColor, stepNumber.active.color, stepNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+    case 'inactiveCompleted':
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.completed.borderColor, stepNumber.completed.color, stepNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.inactive.borderColor, stepNumber.inactive.color, stepNumber.inactive.backgroundColor);
+  }
+});
+var StepCompletedCheck = styled__default["default"].div.withConfig({
+  displayName: "Step__StepCompletedCheck",
+  componentId: "sc-5n6xpp-3"
+})(["border:solid ", ";border-width:0 2px 2px 0;transform:rotate(45deg);width:27.5%;height:55%;margin-top:-2px;"], stepNumber.completed.color);
+var StepText = styled__default["default"].div.withConfig({
+  displayName: "Step__StepText",
+  componentId: "sc-5n6xpp-4"
+})(["font-family:", ";font-size:", ";margin-top:", ";", ""], stepButton.fontFamily, stepButton.fontSize, stepButton.marginTop, function (_ref3) {
+  var state = _ref3.state,
+      clickable = _ref3.clickable;
+
+  switch (state) {
+    case 'activeCompleted':
+    case 'activeIncomplete':
+      return styled.css(["color:", ";text-decoration ", ";"], stepButton.active.color, clickable ? stepButton.active.textDecoration : 'none');
+
+    case 'inactiveCompleted':
+      return styled.css(["color:", ";text-decoration ", ";"], stepButton.completed.color, clickable ? stepButton.completed.textDecoration : 'none');
+
+    case 'inactiveIncomplete':
+      return styled.css(["color:", ";text-decoration ", ";"], stepButton.inactive.color, clickable ? stepButton.inactive.textDecoration : 'none');
+  }
+});
+
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed) {
+  return "".concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+};
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+
+var Step = function Step(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,
+      children = props.children;
+
+  var _useStepperContext = useStepperContext(),
+      activeStep = _useStepperContext.activeStep;
+
+  var active = activeStep === index;
+  var styleProps = {
+    state: toStepState(active, completed),
+    clickable: props.onClick !== undefined
+  };
+  return jsxRuntime.jsx(StepWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxRuntime.jsxs(StepContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined
+    }, {
+      children: [jsxRuntime.jsx(StepNumber, Object.assign({}, styleProps, {
+        children: completed ? jsxRuntime.jsx(StepCompletedCheck, {}) : index + 1
+      })), jsxRuntime.jsxs(StepText, Object.assign({}, styleProps, {
+        children: [jsxRuntime.jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
@@ -10684,6 +10903,8 @@ exports.SortCell = SortCell;
 exports.Spinner = Spinner;
 exports.StarFilledIcon = StarFilledIcon;
 exports.StarIcon = StarIcon;
+exports.Step = Step;
+exports.Stepper = Stepper;
 exports.SyncIcon = SyncIcon;
 exports.Tab = Tab;
 exports.TabList = TabList;

package/dist/components/Datepicker/Datepicker.js

@@ -18,7 +18,7 @@ var getWidth = function getWidth(type) {
 var StyledInput = styled(StatefulInput).withConfig({
   displayName: "Datepicker__StyledInput",
   componentId: "sc-1ijxhje-0"
-})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}::-webkit-calendar-picker-indicator:focus-visible{", "}::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-year-field:focus,::-webkit-datetime-edit-hour-field:focus,::-webkit-datetime-edit-minute-field:focus{", "}"], CalendarIcon, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+})(["&::-webkit-calendar-picker-indicator{background-image:", ";", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}&::-webkit-datetime-edit-fields-wrapper{padding:0;}&::-webkit-calendar-picker-indicator:focus-visible{", "}&::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}&::-webkit-datetime-edit-day-field:focus,&::-webkit-datetime-edit-month-field:focus,&::-webkit-datetime-edit-year-field:focus,&::-webkit-datetime-edit-hour-field:focus,&::-webkit-datetime-edit-minute-field:focus{", "}"], "url(\"".concat(CalendarIcon, "\")"), datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
 var nextUniqueId = 0;
 var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,

package/dist/components/Drawer/DrawerGroup.d.ts

@@ -9,5 +9,5 @@ declare type DrawerGroupProps = {
     /**Ekstra logikk som kjøres når `<Drawer />` lukkes. */
     onClose?: () => void;
 };
-export declare const DrawerGroup: ({ children, drawerId, onOpen, onClose }: DrawerGroupProps) => JSX.Element;
+export declare const DrawerGroup: ({ children, drawerId, onOpen, onClose, }: DrawerGroupProps) => JSX.Element;
 export {};

package/dist/components/List/List.js

@@ -20,7 +20,7 @@ var StyledList = styled.ul.withConfig({
   return typographyType && css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:url(\"", "\");}ul > li:before{background-image:url(\"", "\");}ul > li > ul > li:before{background-image:url(\"", "\");}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), bullet, bulletLvl2, bulletLvl3) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
+  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), "url(\"".concat(bullet, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
 });
 var List = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$listType = props.listType,

package/dist/components/OverflowMenu/OverflowMenuGroup.d.ts

@@ -11,4 +11,4 @@ export declare type OverflowMenuGroupProps = {
     /**Custom id for `<OverflowMenu />`. */
     overflowMenuId?: string;
 };
-export declare const OverflowMenuGroup: ({ children, onClose, onToggle, onOpen, overflowMenuId }: OverflowMenuGroupProps) => JSX.Element;
+export declare const OverflowMenuGroup: ({ children, onClose, onToggle, onOpen, overflowMenuId, }: OverflowMenuGroupProps) => JSX.Element;

package/dist/components/Popover/PopoverGroup.d.ts

@@ -11,4 +11,4 @@ export declare type PopoverGroupProps = {
     /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
     children: ReactNode;
 };
-export declare const PopoverGroup: ({ isOpen, onCloseButtonClick, onTriggerClick, children, popoverId }: PopoverGroupProps) => JSX.Element;
+export declare const PopoverGroup: ({ isOpen, onCloseButtonClick, onTriggerClick, children, popoverId, }: PopoverGroupProps) => JSX.Element;

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

@@ -12,4 +12,6 @@ export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     required?: boolean | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
     'aria-describedby'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -15,6 +15,8 @@ declare const _default: {
         checked?: boolean | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
-import { BaseComponentProps } from '../../types';
+import { BaseComponentPropsWithChildren } from '../../types';
 declare type PickedInputHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'readOnly' | 'checked' | 'value' | 'required' | 'onChange' | 'aria-describedby'>;
-export declare type RadioButtonProps = BaseComponentProps<HTMLInputElement, {
+export declare type RadioButtonProps = BaseComponentPropsWithChildren<HTMLInputElement, {
     /**Ledetekst for alternativet. */
     label?: string;
     /**Spesifiserer om input er disabled. */

package/dist/components/Stepper/Step.d.ts

@@ -0,0 +1,20 @@
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type BaseStepProps = {
+    /** Om steget er valgt eller ikke. Settes av konsument. */
+    active?: boolean;
+    /** Om steget er ferdig eller ikke. Settes av konsument */
+    completed?: boolean;
+    /** Indeksen til steget. NB! Denne settes automatisk av <Stepper /> og skal ikke settes manuelt. */
+    index?: number;
+};
+declare type StepProps = ({
+    /** Click-handler som gjør det mulig for bruker å klikke på steget for å navigere. Valgfri. */
+    onClick: (stepIndex: number) => void;
+} & BaseComponentPropsWithChildren<HTMLButtonElement, BaseStepProps>) | ({
+    onClick?: undefined;
+} & BaseComponentPropsWithChildren<HTMLDivElement, BaseStepProps>);
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Step: (props: StepProps) => JSX.Element;
+export {};