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

package/README.md

@@ -70,6 +70,12 @@ Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-
 
 For versjonering brukes [_semantisk versjonering_](https://semver.org/) for å holde ting organisert og for å enkelt kommunisere utviklingsløpet til pakken.
 
+### Pre-release versjoner
+
+Hvis man ønsker å publisere en pre-release kan man følge samme flyt som vanlig release, men markere releasen som "pre-release" på Github. Da vil det publiseres en ny versjon til `next`-taggen på NPM istedenfor `latest` som i normal flyt. Pre-releases kan brukes for å publisere innhold som er ment til å være med i neste versjon, men som kan testes av konsumenter før neste release er klar.
+
+Versjonsnummerering for pre-releases skal følge `-beta.x`, eksempelvis `5.0.0-beta.1` osv.
+
 ## ⌨️ For bidragsytere
 
 Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).

package/dist/cjs/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 {};

package/dist/cjs/components/Stepper/Stepper.context.d.ts

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

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

@@ -0,0 +1,11 @@
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<{
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

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

@@ -0,0 +1,39 @@
+export declare const stepperTokens: {
+    connector: {
+        color: string;
+    };
+    stepNumber: {
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    stepButton: {
+        marginTop: string;
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        completed: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/cjs/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Step';

package/dist/cjs/index.d.ts

@@ -34,3 +34,4 @@ export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
 export * from './icons/tsx';
+export * from './components/Stepper';

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: {
@@ -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,
@@ -8907,7 +8907,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:url(\"", "\");", " 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{", "}"], 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 +10308,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 +10325,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 +10390,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 +10412,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 +10502,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 +10524,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 +10900,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:url(\"", "\");", " 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{", "}"], 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/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 {};

package/dist/components/Stepper/Step.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { useStepperContext } from './Stepper.context.js';
+import { stepperTokens } from './Stepper.tokens.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+
+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.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.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 && css(["cursor:pointer;"]);
+});
+var StepNumber = styled.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 css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.active.borderColor, stepNumber.active.color, stepNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+    case 'inactiveCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.completed.borderColor, stepNumber.completed.color, stepNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.inactive.borderColor, stepNumber.inactive.color, stepNumber.inactive.backgroundColor);
+  }
+});
+var StepCompletedCheck = styled.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.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 css(["color:", ";text-decoration ", ";"], stepButton.active.color, clickable ? stepButton.active.textDecoration : 'none');
+
+    case 'inactiveCompleted':
+      return css(["color:", ";text-decoration ", ";"], stepButton.completed.color, clickable ? stepButton.completed.textDecoration : 'none');
+
+    case 'inactiveIncomplete':
+      return 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 jsx(StepWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxs(StepContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined
+    }, {
+      children: [jsx(StepNumber, Object.assign({}, styleProps, {
+        children: completed ? jsx(StepCompletedCheck, {}) : index + 1
+      })), jsxs(StepText, Object.assign({}, styleProps, {
+        children: [jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
+export { Step };

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

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

package/dist/components/Stepper/Stepper.context.js

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

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

@@ -0,0 +1,11 @@
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<{
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,66 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { StepperContext } from './Stepper.context.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var StepsWrapper = styled.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__*/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 = __rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+  var _useState = useState(activeStep),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveStep = _useState2[0],
+      setActiveStep = _useState2[1];
+
+  useEffect(function () {
+    if (activeStep !== undefined && activeStep != thisActiveStep) {
+      setActiveStep(activeStep);
+    }
+  }, [activeStep, thisActiveStep]);
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref
+  });
+  var steps = (_a = Children.map(children, function (step, index) {
+    if (! /*#__PURE__*/isValidElement(step)) {
+      return false;
+    }
+
+    return /*#__PURE__*/cloneElement(step, Object.assign(Object.assign({}, step.props), {
+      index: index
+    }));
+  })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+  return jsx(StepperContext.Provider, Object.assign({
+    value: {
+      activeStep: thisActiveStep
+    }
+  }, {
+    children: jsx("div", Object.assign({
+      role: "group",
+      "aria-label": "progress"
+    }, containerProps, {
+      children: jsx(StepsWrapper, {
+        children: steps
+      })
+    }))
+  }));
+});
+
+export { Stepper };

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

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

@@ -0,0 +1,39 @@
+export declare const stepperTokens: {
+    connector: {
+        color: string;
+    };
+    stepNumber: {
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    stepButton: {
+        marginTop: string;
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        completed: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/components/Stepper/Stepper.tokens.js

@@ -0,0 +1,49 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    font = ddsBaseTokens.font;
+var connector = {
+  color: colors.DdsColorInteractiveBase
+};
+var stepNumber = {
+  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 = {
+  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,
+  stepNumber: stepNumber,
+  stepButton: stepButton
+};
+
+export { stepperTokens };

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

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Step';

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -6,7 +6,7 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var Wrapper = styled.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,

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
 export * from './icons/tsx';
+export * from './components/Stepper';

package/dist/index.js

@@ -186,3 +186,5 @@ export { VisibilityOnIcon } from './icons/tsx/visibilityOn.js';
 export { WarningIcon } from './icons/tsx/warning.js';
 export { ZoomInIcon } from './icons/tsx/zoomIn.js';
 export { ZoomOutIcon } from './icons/tsx/zoomOut.js';
+export { Stepper } from './components/Stepper/Stepper.js';
+export { Step } from './components/Stepper/Step.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.1.0",
+  "version": "5.2.0-beta.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -111,7 +111,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@floating-ui/react-dom": "^0.7.2",
+    "@floating-ui/react-dom": "^1.0.0",
     "focus-visible": "^5.2.0",
     "react-select": "^5.3.0",
     "tslib": "^2.4.0"