@hortiview/shared-components 2.16.1 → 2.17.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [2.17.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.2...v2.17.0) (2026-02-27)
+
+### Features
+
+* made Step buttons optional and added variant support to stepperButtonProps ([bf876f1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/bf876f1435d54562c42166778ab7c326ec31b10b)), closes [#18954](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/18954)
+
+## [2.16.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.1...v2.16.2) (2026-02-24)
+
+### Bug Fixes
+
+* adjust modal border radius to exclude fullscreen mode ([88981ad](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/88981adcde776e88f76abda8a90b1e91b4f9557b))
+
 ## [2.16.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.0...v2.16.1) (2026-02-23)
 
 ### Bug Fixes

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_95xon_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important;border-radius:1rem!important}._modal_95xon_1 footer{margin-bottom:0!important}._gap_95xon_11{gap:4px!important}._title_95xon_15{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_95xon_27{margin-left:1rem!important}._closeButton_95xon_31{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_95xon_31:before{display:none!important}._closeButton_95xon_31:hover{background-color:var(--lmnt-theme-surface-variant)!important}
+._modal_mu9y6_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_mu9y6_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_mu9y6_1 footer{margin-bottom:0!important}._gap_mu9y6_14{gap:4px!important}._title_mu9y6_18{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_mu9y6_31{margin-left:1rem!important}._closeButton_mu9y6_35{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_mu9y6_35:before{display:none!important}._closeButton_mu9y6_35:hover{background-color:var(--lmnt-theme-surface-variant)!important}

package/dist/components/Modal/Modal.js

@@ -8,8 +8,8 @@ import { w as Mt, r as ne, c as D, a as oe } from "../../index.es-Da7ok-B-.js";
 import { b as xt, c as Pt, d as ie } from "../../tslib.es6-BDCynO9F.js";
 import { M as ae, a as re } from "../../component-Bz_dtX1r.js";
 import { M as se, c as le, m as ce } from "../../component-DEJuY56h.js";
-import { A as de } from "../../animationframe-BVKDmEXe.js";
-import { P as ue } from "../../index.es-BanVdXEd.js";
+import { A as ue } from "../../animationframe-BVKDmEXe.js";
+import { P as de } from "../../index.es-BanVdXEd.js";
 import { b as me } from "../../index.es-SjZ_-d7U.js";
 import { Iconify as fe } from "../Iconify/Iconify.js";
 import { O as pe } from "../../OfflineView-CIwV08EQ.js";
@@ -105,12 +105,12 @@ var X = "mdc-dom-focus-sentinel", ve = (
     }, o.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var i = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(X) && !i, u = !1;
+        var i = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(X) && !i, d = !1;
         if (a) {
           var h = getComputedStyle(n);
-          u = h.display === "none" || h.visibility === "hidden";
+          d = h.display === "none" || h.visibility === "hidden";
         }
-        return a && !u;
+        return a && !d;
       });
     }, o.prototype.createSentinel = function() {
       var e = document.createElement("div");
@@ -229,7 +229,7 @@ var $t = (
     xt(e, o);
     function e(t) {
       var n = o.call(this, Pt(Pt({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = O.CLOSE_ACTION, n.scrimClickAction = O.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = O.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new de(), n.contentScrollHandler = function() {
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = O.CLOSE_ACTION, n.scrimClickAction = O.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = O.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new ue(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -379,8 +379,8 @@ var $t = (
       if (n) {
         var i = this.adapter.getActionFromEvent(t);
         if (!i) {
-          var a = t.composedPath ? t.composedPath()[0] : t.target, u = this.suppressDefaultPressSelector ? !this.adapter.eventTargetMatches(a, this.suppressDefaultPressSelector) : !0;
-          n && u && this.adapter.clickDefaultButton();
+          var a = t.composedPath ? t.composedPath()[0] : t.target, d = this.suppressDefaultPressSelector ? !this.adapter.eventTargetMatches(a, this.suppressDefaultPressSelector) : !0;
+          n && d && this.adapter.clickDefaultButton();
         }
       }
     }, e.prototype.handleDocumentKeydown = function(t) {
@@ -487,7 +487,7 @@ var f = $t.strings, Se = (
         throw new Error("Dialog component requires a " + f.CONTAINER_SELECTOR + " container element");
       this.container = a, this.content = this.root.querySelector(f.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(f.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + f.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
-        for (var u = ie(this.buttons), h = u.next(); !h.done; h = u.next()) {
+        for (var d = ie(this.buttons), h = d.next(); !h.done; h = d.next()) {
           var y = h.value;
           this.buttonRipples.push(new se(y));
         }
@@ -495,7 +495,7 @@ var f = $t.strings, Se = (
         n = { error: g };
       } finally {
         try {
-          h && !h.done && (i = u.return) && i.call(u);
+          h && !h.done && (i = d.return) && i.call(d);
         } finally {
           if (n) throw n.error;
         }
@@ -794,7 +794,7 @@ var f = $t.strings, Se = (
   scrollable: !1,
   title: null
 }, Ae = ["actionButton", "actionIcons", "badge", "backButton", "children", "className", "content", "defaultButton", "dismissiveButton", "footerSupplemental", "headerActions", "hideCloseIcon", "indicator", "initialFocus", "mobileStackedButtons", "modalSize", "nextButton", "noActions", "onClose", "onClosed", "onOpen", "onOpened", "open", "preventClose", "preventPrimaryAccept", "primaryButton", "returnFocusSelector", "scrollable", "title"], r = Oe, et = /* @__PURE__ */ Zt(function(o, e) {
-  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, u = o.badge, h = u === void 0 ? r.badge : u, y = o.backButton, g = y === void 0 ? r.backButton : y, S = o.children, B = S === void 0 ? r.children : S, v = o.className, U = v === void 0 ? r.className : v, nt = o.content, ot = nt === void 0 ? r.content : nt, it = o.defaultButton, T = it === void 0 ? r.defaultButton : it, at = o.dismissiveButton, F = at === void 0 ? r.dismissiveButton : at, rt = o.footerSupplemental, L = rt === void 0 ? r.footerSupplemental : rt, st = o.headerActions, lt = st === void 0 ? r.headerActions : st, ct = o.hideCloseIcon, G = ct === void 0 ? r.hideCloseIcon : ct, dt = o.indicator, Ut = dt === void 0 ? r.indicator : dt, ut = o.initialFocus, b = ut === void 0 ? r.initialFocus : ut, mt = o.mobileStackedButtons, K = mt === void 0 ? r.mobileStackedButtons : mt, ft = o.modalSize, C = ft === void 0 ? r.modalSize : ft, pt = o.nextButton, I = pt === void 0 ? r.nextButton : pt, ht = o.noActions, N = ht === void 0 ? r.noActions : ht, gt = o.onClose, W = gt === void 0 ? r.onClose : gt, Ct = o.onClosed, V = Ct === void 0 ? r.onClosed : Ct, _t = o.onOpen, R = _t === void 0 ? r.onOpen : _t, Et = o.onOpened, w = Et === void 0 ? r.onOpened : Et, vt = o.open, St = vt === void 0 ? r.open : vt, yt = o.preventClose, z = yt === void 0 ? r.preventClose : yt, Ot = o.preventPrimaryAccept, At = Ot === void 0 ? r.preventPrimaryAccept : Ot, Tt = o.primaryButton, d = Tt === void 0 ? r.primaryButton : Tt, bt = o.returnFocusSelector, j = bt === void 0 ? r.returnFocusSelector : bt, It = o.scrollable, Nt = It === void 0 ? r.scrollable : It, Dt = o.title, Bt = Dt === void 0 ? r.title : Dt, Gt = Qt(o, Ae), k = wt(), c = wt();
+  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, d = o.badge, h = d === void 0 ? r.badge : d, y = o.backButton, g = y === void 0 ? r.backButton : y, S = o.children, B = S === void 0 ? r.children : S, v = o.className, U = v === void 0 ? r.className : v, nt = o.content, ot = nt === void 0 ? r.content : nt, it = o.defaultButton, T = it === void 0 ? r.defaultButton : it, at = o.dismissiveButton, F = at === void 0 ? r.dismissiveButton : at, rt = o.footerSupplemental, L = rt === void 0 ? r.footerSupplemental : rt, st = o.headerActions, lt = st === void 0 ? r.headerActions : st, ct = o.hideCloseIcon, G = ct === void 0 ? r.hideCloseIcon : ct, ut = o.indicator, Ut = ut === void 0 ? r.indicator : ut, dt = o.initialFocus, b = dt === void 0 ? r.initialFocus : dt, mt = o.mobileStackedButtons, K = mt === void 0 ? r.mobileStackedButtons : mt, ft = o.modalSize, C = ft === void 0 ? r.modalSize : ft, pt = o.nextButton, I = pt === void 0 ? r.nextButton : pt, ht = o.noActions, N = ht === void 0 ? r.noActions : ht, gt = o.onClose, W = gt === void 0 ? r.onClose : gt, Ct = o.onClosed, V = Ct === void 0 ? r.onClosed : Ct, _t = o.onOpen, R = _t === void 0 ? r.onOpen : _t, Et = o.onOpened, w = Et === void 0 ? r.onOpened : Et, vt = o.open, St = vt === void 0 ? r.open : vt, yt = o.preventClose, z = yt === void 0 ? r.preventClose : yt, Ot = o.preventPrimaryAccept, At = Ot === void 0 ? r.preventPrimaryAccept : Ot, Tt = o.primaryButton, u = Tt === void 0 ? r.primaryButton : Tt, bt = o.returnFocusSelector, j = bt === void 0 ? r.returnFocusSelector : bt, It = o.scrollable, Nt = It === void 0 ? r.scrollable : It, Dt = o.title, Bt = Dt === void 0 ? r.title : Dt, Gt = Qt(o, Ae), k = wt(), c = wt();
   te(e, function() {
     return k.current;
   }, []);
@@ -862,12 +862,12 @@ var f = $t.strings, Se = (
       var p = {
         className: "lmnt-modal__button mdc-dialog__button",
         "data-mdc-dialog-action": At ? "" : "accept",
-        elevation: d?.props.elevation !== "default" ? d?.props.elevation : "flat",
-        variant: d?.props.variant || "filled"
+        elevation: u?.props.elevation !== "default" ? u?.props.elevation : "flat",
+        variant: u?.props.variant || "filled"
       };
       return T === "primary" && (p["data-mdc-dialog-button-default"] = !0), b === "primary" && (p["data-mdc-dialog-initial-focus"] = !0), p;
     };
-  }, [At, T, b, d?.props.elevation, d?.props.variant]);
+  }, [At, T, b, u?.props.elevation, u?.props.variant]);
   return /* @__PURE__ */ m.createElement("aside", Xt({
     ref: k,
     className: x("lmnt", "lmnt-modal", "mdc-dialog", Nt && "lmnt-modal--scrollable mdc-dialog--scrollable", U),
@@ -891,20 +891,20 @@ var f = $t.strings, Se = (
     }
   }, h)), (ot || B) && /* @__PURE__ */ m.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, ot || B), Ut, (n || g || F || I || d || L) && /* @__PURE__ */ m.createElement("footer", {
+  }, ot || B), Ut, (n || g || F || I || u || L) && /* @__PURE__ */ m.createElement("footer", {
     className: x("lmnt-modal__actions", "mdc-dialog__actions", q && "lmnt-dialog__actions__mobile", L && "lmnt-modal__actions--supplemental-btn", q && K && "lmnt-modal_actions-mobile-stacked")
   }, !Y && L && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
   }, D(L, function() {
     var p = {};
     return T === "footerSupplemental" && (p["data-mdc-dialog-button-default"] = !0), b === "footerSupplemental" && (p["data-mdc-dialog-initial-focus"] = !0), p;
-  })), !Y && (n || F || d) && /* @__PURE__ */ m.createElement("div", {
+  })), !Y && (n || F || u) && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
   }, F && D(F, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), n && !d && D(n, jt), d && D(d, qt)), Y && /* @__PURE__ */ m.createElement("div", {
+  }), n && !u && D(n, jt), u && D(u, qt)), Y && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
   }, /* @__PURE__ */ m.createElement("div", null, oe(g, "lmnt-modal__button")), /* @__PURE__ */ m.createElement("div", null, D(I, {
     className: "lmnt-modal__button",
@@ -915,7 +915,7 @@ var f = $t.strings, Se = (
 });
 et.displayName = "Modal";
 et.propTypes = ye;
-const Te = "_modal_95xon_1", be = "_gap_95xon_11", Ie = "_title_95xon_15", Ne = "_titleWithoutCloseIcon_95xon_27", De = "_closeButton_95xon_31", A = {
+const Te = "_modal_mu9y6_1", be = "_gap_mu9y6_14", Ie = "_title_mu9y6_18", Ne = "_titleWithoutCloseIcon_mu9y6_31", De = "_closeButton_mu9y6_35", A = {
   modal: Te,
   gap: be,
   title: Ie,
@@ -928,7 +928,7 @@ const Te = "_modal_95xon_1", be = "_gap_95xon_11", Ie = "_title_95xon_15", Ne =
   actionButton: n,
   hideCloseIcon: i,
   closeIcon: a = "close",
-  leadingIcon: u,
+  leadingIcon: d,
   isOnline: h = !0,
   offlineViewProps: y,
   children: g,
@@ -953,12 +953,12 @@ const Te = "_modal_95xon_1", be = "_gap_95xon_11", Ie = "_title_95xon_15", Ne =
                 className: A.closeButton
               }
             ),
-            u ? /* @__PURE__ */ E(ue, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ E(fe, { icon: u }) }) : /* @__PURE__ */ E(Jt, {}),
+            d ? /* @__PURE__ */ E(de, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ E(fe, { icon: d }) }) : /* @__PURE__ */ E(Jt, {}),
             /* @__PURE__ */ E(
               me,
               {
                 level: 6,
-                className: i && !u ? A.titleWithoutCloseIcon : "",
+                className: i && !d ? A.titleWithoutCloseIcon : "",
                 children: e
               }
             )
@@ -974,7 +974,7 @@ const Te = "_modal_95xon_1", be = "_gap_95xon_11", Ie = "_title_95xon_15", Ne =
       action: /* @__PURE__ */ E(J, { className: A.gap, children: t }, "action-group")
     };
     return [v, U];
-  }, [t, i, a, u, o, e]);
+  }, [t, i, a, d, o, e]);
   return /* @__PURE__ */ E(
     et,
     {

package/dist/components/Stepper/Stepper.js

@@ -1,24 +1,24 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { G as u } from "../../index.es-oxil0uFe.js";
-import { useMemo as v } from "react";
-import { StepperPreviousButton as g, StepperNextButton as A } from "./components/StepperButton.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { G as d } from "../../index.es-oxil0uFe.js";
+import { useMemo as f } from "react";
+import { StepperPreviousButton as C, StepperNextButton as S } from "./components/StepperButton.js";
 import { StepperHeader as k } from "./components/StepperHeader.js";
-import { s as S } from "../../stepper.module-DR_FbENS.js";
+import { s as b } from "../../stepper.module-DR_FbENS.js";
 import { StepperStyle as D } from "./stepperStyles.js";
-const W = ({
-  stepperStyle: h = D.DESKTOP,
-  steps: i,
-  currentStepId: o,
-  overwriteTotalSteps: P,
-  isStepLoading: x,
-  showStepperHeader: y = !0,
-  showStepperButtons: c = !0,
-  stepperButtonAlignment: C = "center",
-  showPreviousButtonOnFirstStep: d = !1,
-  children: B
+const G = ({
+  stepperStyle: m = D.DESKTOP,
+  steps: o,
+  currentStepId: s,
+  overwriteTotalSteps: v,
+  isStepLoading: P,
+  showStepperHeader: h = !0,
+  showStepperButtons: y = !0,
+  stepperButtonAlignment: g,
+  showPreviousButtonOnFirstStep: x = !1,
+  children: A
 }) => {
-  const p = v(() => {
-    const s = i.map((r, e) => (e === 0 && r.excludeFromHeader && console.error(
+  const p = f(() => {
+    const i = o.map((r, e) => (e === 0 && r.excludeFromHeader && console.error(
       "The first step is excluded from the header. Please check your configuration."
     ), {
       step: r,
@@ -26,45 +26,31 @@ const W = ({
       isCompleted: !1,
       isRendered: !r.excludeFromHeader,
       isFirst: e === 0,
-      isLast: e === i.length - 1
-    })), l = i.findIndex((r) => r.id === o);
+      isLast: e === o.length - 1
+    })), l = o.findIndex((r) => r.id === s);
     l === -1 && console.error(
-      `Current step with id ${o} not found in steps array. Bad configuration?`
+      `Current step with id ${s} not found in steps array. Bad configuration?`
     );
-    let f = o;
-    for (let r = 0; r < s.length; r++) {
-      const e = s[r];
+    let u = s;
+    for (let r = 0; r < i.length; r++) {
+      const e = i[r];
       if (r > l) {
         e.isActive = !1, e.isCompleted = !1;
         continue;
       }
-      if (e.step.id === o)
+      if (e.step.id === s)
         if (e.isRendered)
           e.isActive = !0, e.isCompleted = !1;
         else {
-          const a = s.find((b) => b.step.id === f);
+          const a = i.find((B) => B.step.id === u);
           a && (a.isActive = !0, a.isCompleted = e.step.excludedStepCompletesPreviousStep ?? !1);
         }
-      r < l && (e.isActive = !1, e.isCompleted = !0, e.isRendered && (f = e.step.id));
+      r < l && (e.isActive = !1, e.isCompleted = !0, e.isRendered && (u = e.step.id));
     }
-    return s;
-  }, [i, o]), t = v(() => p.find((s) => s.isActive), [p]);
-  if (!t)
-    return console.error(
-      `No active step found for currentStepId ${o}. Please check your configuration.`
-    ), null;
-  if (c) {
-    if (!t.step.nextButtonProps?.onClick || !t.step.nextButtonProps?.label)
-      return console.error(
-        `Next button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide nextButtonProps for each step.`
-      ), null;
-    if ((!t.isFirst || d) && (!t.step.prevButtonProps?.onClick || !t.step.prevButtonProps?.label))
-      return console.error(
-        `Previous button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide prevButtonProps for each applicable step.`
-      ), null;
-  }
-  return /* @__PURE__ */ m(
-    u,
+    return i;
+  }, [o, s]), t = f(() => p.find((i) => i.isActive), [p]);
+  return t ? /* @__PURE__ */ c(
+    d,
     {
       "data-testid": "stepper",
       fullWidth: !0,
@@ -73,59 +59,61 @@ const W = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        y ? /* @__PURE__ */ n(
+        h ? /* @__PURE__ */ n(
           k,
           {
-            stepperStyle: h,
+            stepperStyle: m,
             stepsData: p,
-            overwriteTotalSteps: P
+            overwriteTotalSteps: v
           }
         ) : null,
         /* @__PURE__ */ n(
-          u,
+          d,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: S.stepperContent,
+            className: b.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
-            children: B
+            children: A
           }
         ),
-        c ? /* @__PURE__ */ m(
-          u,
+        y ? /* @__PURE__ */ c(
+          d,
           {
             "data-testid": "stepper-buttons",
             fullWidth: !0,
             secondaryAlign: "center",
-            primaryAlign: C,
+            primaryAlign: t.step.prevButtonProps ? g : "end",
             children: [
-              (!t.isFirst || d) && /* @__PURE__ */ n(
-                g,
+              (!t.isFirst || x) && t.step.prevButtonProps ? /* @__PURE__ */ n(
+                C,
                 {
                   ...t.step.prevButtonProps,
                   onClick: t.step.prevButtonProps.onClick,
                   label: t.step.prevButtonProps.label
                 }
-              ),
-              /* @__PURE__ */ n(
-                A,
+              ) : null,
+              t.step.nextButtonProps ? /* @__PURE__ */ n(
+                S,
                 {
                   ...t.step.nextButtonProps,
                   onClick: t.step.nextButtonProps.onClick,
                   label: t.step.nextButtonProps.label,
-                  isStepLoading: x,
+                  isStepLoading: P,
                   isLastStep: t.isLast
                 }
-              )
+              ) : null
             ]
           }
         ) : null
       ]
     }
-  );
+  ) : (console.error(
+    `No active step found for currentStepId ${s}. Please check your configuration.`
+  ), null);
 };
 export {
-  W as Stepper
+  G as Stepper
 };

package/dist/components/Stepper/Stepper.test.js

@@ -1,18 +1,18 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as p, s as t, f as S, c as C } from "../../react.esm-Bm0cAgpZ.js";
-import { a as y } from "../../useBreakpoints-MzTZ0tCT.js";
+import { a as p, s as t, f as y, c as C } from "../../react.esm-Bm0cAgpZ.js";
+import { a as S } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Stepper as s } from "./Stepper.js";
 import { StepperStyle as i } from "./stepperStyles.js";
-import { d as B, b as h, t as c, g as e, v as a } from "../../vi.bdSIJ99Y-B308Q-4w.js";
-const m = () => [
+import { d as B, b as T, t as c, g as e, v as l } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+const u = () => [
   {
     id: "step1",
     stepNumber: 1,
     text: "Description 1",
     secondaryText: "Secondary Description 1",
     optional: !1,
-    nextButtonProps: { onClick: a.fn(), label: "Next" },
-    prevButtonProps: { onClick: a.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     id: "step2",
@@ -20,8 +20,8 @@ const m = () => [
     text: "Description 2",
     secondaryText: "Secondary Description 2",
     optional: !1,
-    nextButtonProps: { onClick: a.fn(), label: "Next" },
-    prevButtonProps: { onClick: a.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     id: "step3",
@@ -29,14 +29,14 @@ const m = () => [
     text: "Description 3",
     secondaryText: "Secondary Description 3",
     optional: !0,
-    nextButtonProps: { onClick: a.fn(), label: "Finish" },
-    prevButtonProps: { onClick: a.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Finish" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   }
 ];
 B("Generic Stepper Tests (StepperStyle.DESKTOP)", () => {
   let o;
-  h(() => {
-    o = m();
+  T(() => {
+    o = u();
   }), c("Default Render", () => {
     p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
@@ -66,15 +66,15 @@ B("Generic Stepper Tests (StepperStyle.DESKTOP)", () => {
     const r = t.getByText("Next").closest("button");
     e(r).toBeDisabled();
   }), c("calls nextButtonProps.onClick when next button is clicked", () => {
-    const r = a.fn();
+    const r = l.fn();
     o[1].nextButtonProps.onClick = r, p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), S.click(t.getByText("Next")), e(r).toHaveBeenCalled();
+    ), y.click(t.getByText("Next")), e(r).toHaveBeenCalled();
   }), c("calls prevButtonProps.onClick when prev button is clicked", () => {
-    const r = a.fn();
+    const r = l.fn();
     o[1].prevButtonProps.onClick = r, p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), S.click(t.getByText("Back")), e(r).toHaveBeenCalled();
+    ), y.click(t.getByText("Back")), e(r).toHaveBeenCalled();
   }), c("does not render the prev button on the first step", () => {
     p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step1", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
@@ -116,31 +116,29 @@ B("Generic Stepper Tests (StepperStyle.DESKTOP)", () => {
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.queryByText("arrow_forward")).not.toBeInTheDocument(), e(t.queryByText("arrow_back")).not.toBeInTheDocument();
   }), c("prints an error when current step is not found", () => {
-    const r = a.spyOn(console, "error").mockImplementation(() => {
+    const r = l.spyOn(console, "error").mockImplementation(() => {
     });
     p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "unknownId", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(r).toHaveBeenCalledWith(
       "Current step with id unknownId not found in steps array. Bad configuration?"
     ), r.mockRestore(), e(t.queryByTestId("description-stepper-header")).not.toBeInTheDocument();
-  }), c("prints an error when next button props are not found but showStepperButtons is true", () => {
-    const r = a.spyOn(console, "error").mockImplementation(() => {
-    }), d = m();
-    d[0].nextButtonProps.onClick = void 0, d[1].prevButtonProps.label = void 0, p(
-      /* @__PURE__ */ n(s, { steps: d, currentStepId: "step1", showStepperButtons: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(r).toHaveBeenCalledWith(
-      "Next button props not found for current step with id step1. If you want to use the stepper buttons, make sure to provide nextButtonProps for each step."
-    ), p(
-      /* @__PURE__ */ n(s, { steps: d, currentStepId: "step2", showStepperButtons: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(r).toHaveBeenCalledWith(
-      "Previous button props not found for current step with id step2. If you want to use the stepper buttons, make sure to provide prevButtonProps for each applicable step."
-    ), r.mockRestore();
+  }), c("does not render buttons when props are not provided", () => {
+    const r = u();
+    r[0].nextButtonProps = void 0, r[0].prevButtonProps = void 0, p(
+      /* @__PURE__ */ n(s, { steps: r, currentStepId: "step1", showPreviousButtonOnFirstStep: !0, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.queryByText("Next")).not.toBeInTheDocument(), e(t.queryByText("Back")).not.toBeInTheDocument();
+  }), c("renders only one button if the other is missing", () => {
+    const r = u();
+    r[1].prevButtonProps = void 0, p(
+      /* @__PURE__ */ n(s, { steps: r, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+    ), e(t.getByText("Next")).toBeInTheDocument(), e(t.queryByText("Back")).not.toBeInTheDocument();
   });
 });
 B("Stepper Type DESKTOP Tests", () => {
   let o;
-  h(() => {
-    o = m();
+  T(() => {
+    o = u();
   }), c("renders numbers, text and secondary text", () => {
     p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
@@ -203,23 +201,23 @@ B("Stepper Type DESKTOP Tests", () => {
     );
     const r = t.getByTestId("stepper-item-circle-for-step1"), d = t.getByTestId(
       "stepper-connector-before-step2"
-    ), l = t.getByTestId("stepper-item-circle-for-step2"), u = t.getByTestId("stepper-connector-before-step3"), I = t.getByTestId("stepper-item-circle-for-step3");
-    e(r.className).toContain("stepperItemNumberActive"), e(d.className).toContain("stepperItemConnectorCompleted"), e(l.className).toContain("stepperItemNumberActive"), e(u.className).not.toContain("stepperItemConnectorCompleted"), e(I.className).not.toContain("stepperItemNumberActive");
+    ), a = t.getByTestId("stepper-item-circle-for-step2"), m = t.getByTestId("stepper-connector-before-step3"), I = t.getByTestId("stepper-item-circle-for-step3");
+    e(r.className).toContain("stepperItemNumberActive"), e(d.className).toContain("stepperItemConnectorCompleted"), e(a.className).toContain("stepperItemNumberActive"), e(m.className).not.toContain("stepperItemConnectorCompleted"), e(I.className).not.toContain("stepperItemNumberActive");
   }), c("advancing step changes number to checkmark and adjusts color", () => {
     const { rerender: r } = p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), d = t.getByTestId("stepper-item-circle-for-step1"), l = t.getByTestId("stepper-connector-before-step2"), u = t.getByTestId("stepper-item-circle-for-step2"), I = t.getByTestId("stepper-connector-before-step3"), T = t.getByTestId("stepper-item-circle-for-step3");
-    e(d.className).toContain("stepperItemNumberActive"), e(l.className).not.toContain("stepperItemConnectorCompleted"), e(u.className).not.toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(T.className).not.toContain("stepperItemNumberActive"), r(
+    ), d = t.getByTestId("stepper-item-circle-for-step1"), a = t.getByTestId("stepper-connector-before-step2"), m = t.getByTestId("stepper-item-circle-for-step2"), I = t.getByTestId("stepper-connector-before-step3"), h = t.getByTestId("stepper-item-circle-for-step3");
+    e(d.className).toContain("stepperItemNumberActive"), e(a.className).not.toContain("stepperItemConnectorCompleted"), e(m.className).not.toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(h.className).not.toContain("stepperItemNumberActive"), r(
       /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(d.className).toContain("stepperItemNumberActive"), e(l.className).toContain("stepperItemConnectorCompleted"), e(u.className).toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(T.className).not.toContain("stepperItemNumberActive"), r(
+    ), e(d.className).toContain("stepperItemNumberActive"), e(a.className).toContain("stepperItemConnectorCompleted"), e(m.className).toContain("stepperItemNumberActive"), e(I.className).not.toContain("stepperItemConnectorCompleted"), e(h.className).not.toContain("stepperItemNumberActive"), r(
       /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(d.className).toContain("stepperItemNumberActive"), e(l.className).toContain("stepperItemConnectorCompleted"), e(u.className).toContain("stepperItemNumberActive"), e(I.className).toContain("stepperItemConnectorCompleted"), e(T.className).toContain("stepperItemNumberActive");
+    ), e(d.className).toContain("stepperItemNumberActive"), e(a.className).toContain("stepperItemConnectorCompleted"), e(m.className).toContain("stepperItemNumberActive"), e(I.className).toContain("stepperItemConnectorCompleted"), e(h.className).toContain("stepperItemNumberActive");
   }), c("custom button icons are shown as expected", () => {
     o[1].nextButtonProps.showArrowIcon = !1, o[1].nextButtonProps.trailingIcon = "flag", o[1].prevButtonProps.showArrowIcon = !1, o[1].prevButtonProps.leadingIcon = "wifi", p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByText("flag")).toBeInTheDocument(), e(t.getByText("wifi")).toBeInTheDocument();
   }), c("handles excludeFromHeader and excludedStepCompletesPreviousStep correctly", () => {
-    const r = m();
+    const r = u();
     r.push({
       id: "step4",
       stepNumber: 4,
@@ -227,8 +225,8 @@ B("Stepper Type DESKTOP Tests", () => {
       excludeFromHeader: !0,
       excludedStepCompletesPreviousStep: !1,
       secondaryText: "Secondary Description 4",
-      nextButtonProps: { onClick: a.fn(), label: "Next" },
-      prevButtonProps: { onClick: a.fn(), label: "Back" }
+      nextButtonProps: { onClick: l.fn(), label: "Next" },
+      prevButtonProps: { onClick: l.fn(), label: "Back" }
     }), r[1].excludedStepCompletesPreviousStep = !0, r[1].excludeFromHeader = !0, p(
       /* @__PURE__ */ n(
         s,
@@ -252,25 +250,25 @@ B("Stepper Type DESKTOP Tests", () => {
         }
       )
     );
-    const l = t.getByTestId("stepper-connector-before-step3");
-    e(l.className).toContain("stepperItemConnectorCompleted"), e(
+    const a = t.getByTestId("stepper-connector-before-step3");
+    e(a.className).toContain("stepperItemConnectorCompleted"), e(
       t.queryByTestId("stepper-item-check-for-step3")
     ).not.toBeInTheDocument();
   }), c("shows mobile view breakpoint is triggered (<600px)", () => {
-    a.spyOn(y, "useBreakpoints").mockReturnValue({
+    l.spyOn(S, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isDesktop: !1,
       isDesktopNavbar: !1,
       isTablet: !1
     }), p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(t.getByTestId("desktop-stepper-header")).toBeInTheDocument(), e(t.getByTestId("stepper-item-step2")).toBeInTheDocument(), e(t.queryByTestId("stepper-item-step1")).not.toBeInTheDocument(), e(t.queryByTestId("stepper-item-step3")).not.toBeInTheDocument(), a.spyOn(y, "useBreakpoints").mockRestore();
+    ), e(t.getByTestId("desktop-stepper-header")).toBeInTheDocument(), e(t.getByTestId("stepper-item-step2")).toBeInTheDocument(), e(t.queryByTestId("stepper-item-step1")).not.toBeInTheDocument(), e(t.queryByTestId("stepper-item-step3")).not.toBeInTheDocument(), l.spyOn(S, "useBreakpoints").mockRestore();
   });
 });
 B("Stepper Type DOTS Tests", () => {
   let o;
-  h(() => {
-    o = m();
+  T(() => {
+    o = u();
   }), c("renders dots and text", () => {
     p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
@@ -288,8 +286,8 @@ B("Stepper Type DOTS Tests", () => {
     p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
-    const r = t.getByTestId("stepper-indicator-step1"), d = t.getByTestId("stepper-indicator-step2"), l = t.getByTestId("stepper-indicator-step3");
-    e(r.className).toContain("stepperIndicatorItemActive"), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).not.toContain("stepperIndicatorItemActive");
+    const r = t.getByTestId("stepper-indicator-step1"), d = t.getByTestId("stepper-indicator-step2"), a = t.getByTestId("stepper-indicator-step3");
+    e(r.className).toContain("stepperIndicatorItemActive"), e(d.className).toContain("stepperIndicatorItemActive"), e(a.className).not.toContain("stepperIndicatorItemActive");
   }), c("show optional style", () => {
     p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
@@ -299,18 +297,18 @@ B("Stepper Type DOTS Tests", () => {
   }), c("advancing step adjusts styles accordingly", () => {
     const { rerender: r } = p(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), d = t.getByTestId("stepper-indicator-step1"), l = t.getByTestId("stepper-indicator-step2"), u = t.getByTestId("stepper-indicator-step3");
-    e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).not.toContain("stepperIndicatorItemActive"), e(u.className).not.toContain("stepperIndicatorItemActive"), r(
+    ), d = t.getByTestId("stepper-indicator-step1"), a = t.getByTestId("stepper-indicator-step2"), m = t.getByTestId("stepper-indicator-step3");
+    e(d.className).toContain("stepperIndicatorItemActive"), e(a.className).not.toContain("stepperIndicatorItemActive"), e(m.className).not.toContain("stepperIndicatorItemActive"), r(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).toContain("stepperIndicatorItemActive"), e(u.className).not.toContain("stepperIndicatorItemActive"), r(
+    ), e(d.className).toContain("stepperIndicatorItemActive"), e(a.className).toContain("stepperIndicatorItemActive"), e(m.className).not.toContain("stepperIndicatorItemActive"), r(
       /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), e(d.className).toContain("stepperIndicatorItemActive"), e(l.className).toContain("stepperIndicatorItemActive"), e(u.className).toContain("stepperIndicatorItemActive");
+    ), e(d.className).toContain("stepperIndicatorItemActive"), e(a.className).toContain("stepperIndicatorItemActive"), e(m.className).toContain("stepperIndicatorItemActive");
   });
 });
 B("Stepper Type SMALL Tests", () => {
   let o;
-  h(() => {
-    o = m();
+  T(() => {
+    o = u();
   }), c("renders step number, total steps and text", () => {
     p(
       /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })

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

@@ -3,6 +3,7 @@ import { StepperButtonProps } from '../stepperTypes';
 /**
  * A button component for the stepper that is used to go to the previous step.
  * @param label - The label of the button.
+ * @param variant - The element variant of the button. Defaults to 'outlined'.
  * @param onClick - The function to be called when the button is clicked.
  * @param disabled - Whether the button is disabled or not.
  * @param className - Additional class names to apply to the button.
@@ -13,10 +14,11 @@ import { StepperButtonProps } from '../stepperTypes';
  * @param fullWidth - Whether the button should take the full width of its container. Defaults to true.
  * @returns
  */
-export declare const StepperPreviousButton: ({ label, onClick, disabled, className, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperPreviousButton: ({ label, variant, onClick, disabled, className, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A button component for the stepper that is used to go to the next step.
  * @param label - The label of the button.
+ * @param variant - The element variant of the button. Defaults to the element standard variant.
  * @param onClick - The function to be called when the button is clicked.
  * @param disabled - Whether the button is disabled or not.
  * @param className - Additional class names to apply to the button.
@@ -29,7 +31,7 @@ export declare const StepperPreviousButton: ({ label, onClick, disabled, classNa
  * @param fullWidth - Whether the button should take the full width of its container. Defaults to true.
  * @returns
  */
-export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps & {
+export declare const StepperNextButton: ({ label, variant, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps & {
     isStepLoading?: boolean;
     isLastStep?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/components/StepperButton.js

@@ -1,74 +1,77 @@
-import { jsx as i } from "react/jsx-runtime";
-import { B as a } from "../../../index.es-B8p8KCdj.js";
-import { useMemo as v } from "react";
-import { s as f } from "../../../stepper.module-DR_FbENS.js";
-const y = ({
+import { jsx as a } from "react/jsx-runtime";
+import { B as v } from "../../../index.es-B8p8KCdj.js";
+import { useMemo as b } from "react";
+import { s as i } from "../../../stepper.module-DR_FbENS.js";
+const N = ({
   label: p,
-  onClick: n,
-  disabled: s,
-  className: m,
+  variant: s = "outlined",
+  onClick: m,
+  disabled: n,
+  className: d,
   showArrowIcon: t = !0,
   leadingIcon: e,
   trailingIcon: r,
   buttonSize: u = "themeDefault",
   fullWidth: o = !0
 }) => {
-  const d = v(() => {
+  const f = b(() => {
     if (e) return e;
     if (!r)
       return t ? "arrow_back" : void 0;
   }, [e, r, t]);
-  return /* @__PURE__ */ i(
-    a,
+  return /* @__PURE__ */ a(
+    v,
     {
       "data-testid": "stepper-previous-button",
-      className: `${f.stepperButton} ${m ?? ""}`,
-      onClick: n,
-      disabled: s,
+      className: `${i.stepperButton} ${d ?? ""}`,
+      onClick: m,
+      disabled: n,
       fullWidth: o,
       buttonSize: u,
-      variant: "outlined",
-      leadingIcon: d,
+      variant: s,
+      leadingIcon: f,
       trailingIcon: r,
       type: "button",
       children: p
     }
   );
-}, N = ({
+}, h = ({
   label: p,
-  onClick: n,
-  disabled: s,
-  className: m,
+  variant: s,
+  onClick: m,
+  disabled: n,
+  className: d,
   isStepLoading: t,
   isLastStep: e,
   showArrowIcon: r = !0,
   leadingIcon: u,
   trailingIcon: o,
-  buttonSize: d = "themeDefault",
-  fullWidth: b = !0
+  buttonSize: f = "themeDefault",
+  fullWidth: B = !0
 }) => {
-  const B = v(() => {
+  const c = b(() => {
     if (o) return o;
     if (!u && !t && !e)
       return r ? "arrow_forward" : void 0;
   }, [e, t, r, u, o]);
-  return /* @__PURE__ */ i(
-    a,
+  return /* @__PURE__ */ a(
+    v,
     {
       "data-testid": "stepper-next-button",
-      className: `${f.stepperButton} ${t ? f.stepperButtonLoading : ""} ${m ?? ""}`,
-      onClick: n,
-      disabled: t || s,
-      fullWidth: b,
-      trailingIcon: B,
+      className: `${i.stepperButton} ${t ? i.stepperButtonLoading : ""} ${d ?? ""}`,
+      onClick: m,
+      variant: s,
+      disabled: t || n,
+      fullWidth: B,
+      trailingIcon: c,
       leadingIcon: u,
       type: e ? "submit" : "button",
-      buttonSize: d,
+      buttonSize: f,
       children: p
     }
   );
 };
 export {
-  N as StepperNextButton,
-  y as StepperPreviousButton
+  h as StepperNextButton,
+  N as StepperPreviousButton
 };

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

@@ -47,23 +47,21 @@ export type Step = {
     optional?: boolean;
     /**
      * The props for the next button, including onClick, label, className and disabled state.
-     * Will print a console error if the button is embedded but no props are provided and return null for the entire stepper.
      *
      * See {@link StepperButtonProps} for details.
      */
-    nextButtonProps: Partial<StepperButtonProps>;
+    nextButtonProps?: StepperButtonProps;
     /**
      * The props for the previous button, including onClick, label, className and disabled state.
-     * Will print a console error if the button is embedded but no props are provided and return null for the entire stepper.
      *
      * See {@link StepperButtonProps} for details.
      */
-    prevButtonProps: Partial<StepperButtonProps>;
+    prevButtonProps?: StepperButtonProps;
 };
 /**
  * Defines the props for the stepper buttons, including onClick, label, className and disabled state.
  */
-export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'fullWidth'> & {
+export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'fullWidth' | 'variant'> & {
     /**
      * The function to be called when the button is clicked.
      */
@@ -140,9 +138,8 @@ export type StepperProps = {
     showStepperButtons?: boolean;
     /**
      * The alignment of the stepper button group.
-     * @default 'center'
      */
-    stepperButtonAlignment?: Extract<CSSProperties['justifyContent'], 'center' | 'space-between'>;
+    stepperButtonAlignment?: Extract<CSSProperties['justifyContent'], 'start' | 'end' | 'center' | 'space-between'>;
     /**
      * A flag which indicates if the previous button should be shown on the first step.
      * This can be useful for canceling the stepper.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.16.1",
+  "version": "2.17.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",