@hortiview/shared-components 2.16.2 → 2.17.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [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

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.2",
+  "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>",