@hortiview/shared-components 2.16.2 → 2.18.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [2.18.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.17.0...v2.18.0) (2026-03-05)
+
+### Features
+
+* adjust searchable default logic ([0e66c32](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0e66c32a89b72fad851aad24b2a24bc152844520))
+
+### Bug Fixes
+
+* fixed publish.yaml to use devops service user ([ec046ce](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/ec046ce290294d3857a6fedf4594a0e688bfd9f0))
+
+### Code Refactoring
+
+* replace isDesktopNavbar with isDesktop and update tests ([6bc6f7e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/6bc6f7e47a963b95f367200938d79d25c83ba231))
+
+## [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/FormComponents/FormSelect/FormSelect.d.ts

@@ -26,7 +26,7 @@ export type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'classNam
     multi?: boolean;
     /** if true, the select allows the user to clear the selection */
     clearable?: boolean;
-    /** if true, the select allows the user to search for options */
+    /** if true, the select allows the user to search for options defaults to enabled on desktop and disabled on mobile unless explicitly overridden */
     searchable?: boolean;
     /**
      * the rules for the picker
@@ -47,7 +47,7 @@ export type FormSelectOption = {
  * creates a Select which should be part of a form component.
  * the Select is wrapped by the react hook forms {@link Controller} component.
  * @param clearable if the select allows the user to clear the selection
- * @param searchable if the select allows the user to search for options
+ * @param searchable whether the select allows the user to search for options. If not provided, search is enabled on desktop and disabled on mobile by default.
  * @param disabled if the select is disabled
  * @param hidden if the select should be hidden
  * @param hoisted if the select should be rendered outside of the parent

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -1,25 +1,26 @@
-import { jsx as o, Fragment as g, jsxs as k } from "react/jsx-runtime";
+import { jsx as l, Fragment as g, jsxs as J } from "react/jsx-runtime";
 import { g as u } from "../../../get-D8IXqiys.js";
-import { i as G } from "../../../isArray-BjSPDQ4v.js";
+import { i as L } from "../../../isArray-BjSPDQ4v.js";
 import { useMemo as z } from "react";
-import { useFormContext as J, Controller as C } from "react-hook-form";
-import { M as L } from "../../../react-tooltip.min-CVsI--2Y.js";
-import { useHelperText as O } from "../../../hooks/useHelperText.js";
-import { Select as Q } from "../../Select/Select.js";
-import { SelectTooltipText as R } from "./SelectTooltipText.js";
-import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1", W = "_invalidBorder_zh2wu_5", X = "_invalidPlaceholder_zh2wu_9", Y = "_invalidDropdownIcon_zh2wu_13", Z = "_formSelectContainer_zh2wu_18", N = "_formSelect_zh2wu_18", y = "_multiText_zh2wu_53", K = "_tooltip_zh2wu_62", ee = "_disabled_zh2wu_67", t = {
-  invalidHelperText: U,
-  invalidBorder: W,
-  invalidPlaceholder: X,
-  invalidDropdownIcon: Y,
-  formSelectContainer: Z,
-  formSelect: N,
-  multiText: y,
-  tooltip: K,
-  disabled: ee
-}, fe = ({
+import { useFormContext as O, Controller as C } from "react-hook-form";
+import { M as Q } from "../../../react-tooltip.min-CVsI--2Y.js";
+import { useHelperText as R } from "../../../hooks/useHelperText.js";
+import { Select as U } from "../../Select/Select.js";
+import { SelectTooltipText as W } from "./SelectTooltipText.js";
+import { u as X } from "../../../useBreakpoints-MzTZ0tCT.js";
+import '../../../assets/FormSelect.css';const Y = "_invalidHelperText_zh2wu_1", Z = "_invalidBorder_zh2wu_5", N = "_invalidPlaceholder_zh2wu_9", y = "_invalidDropdownIcon_zh2wu_13", K = "_formSelectContainer_zh2wu_18", ee = "_formSelect_zh2wu_18", te = "_multiText_zh2wu_53", ie = "_tooltip_zh2wu_62", oe = "_disabled_zh2wu_67", t = {
+  invalidHelperText: Y,
+  invalidBorder: Z,
+  invalidPlaceholder: N,
+  invalidDropdownIcon: y,
+  formSelectContainer: K,
+  formSelect: ee,
+  multiText: te,
+  tooltip: ie,
+  disabled: oe
+}, _e = ({
   propertyName: i,
-  label: s,
+  label: c,
   options: r,
   multi: a = !1,
   disabled: _ = !1,
@@ -28,100 +29,100 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1",
   valueKey: n = "value",
   textKey: x = "text",
   clearable: I = !1,
-  searchable: D = !0,
-  noOptionsMessage: T = "",
-  rules: f,
-  menuPosition: P = "auto",
-  ...l
+  searchable: D,
+  noOptionsMessage: S = "",
+  rules: m,
+  menuPosition: b = "auto",
+  ...o
 }) => {
-  const {
-    control: v,
-    getFieldState: B,
-    formState: { errors: S, isValidating: w }
-  } = J(), F = z(
-    () => !w && u(S, i) !== void 0,
-    [S, i, w]
-  ), b = z(
-    () => f?.required?.message,
-    [f]
-  ), { helperText: M, helperTextPersistent: j } = O({
+  const { isDesktop: B } = X(), {
+    control: T,
+    getFieldState: P,
+    formState: { errors: v, isValidating: w }
+  } = O(), F = z(
+    () => !w && u(v, i) !== void 0,
+    [v, i, w]
+  ), M = z(
+    () => m?.required?.message,
+    [m]
+  ), { helperText: j, helperTextPersistent: k } = R({
     propertyName: i,
-    helperText: l.helperText,
-    requiredText: b,
+    helperText: o.helperText,
+    requiredText: M,
     hasCharacterCount: !1
   });
-  return H ? /* @__PURE__ */ o(C, { name: i, control: v, render: () => /* @__PURE__ */ o(g, {}) }) : /* @__PURE__ */ o(
+  return H ? /* @__PURE__ */ l(C, { name: i, control: T, render: () => /* @__PURE__ */ l(g, {}) }) : /* @__PURE__ */ l(
     "div",
     {
       "data-testid": "form-select-container",
       className: t.formSelectContainer,
-      "data-tooltip-id": s,
-      children: /* @__PURE__ */ o(
+      "data-tooltip-id": c,
+      children: /* @__PURE__ */ l(
         C,
         {
           name: i,
-          rules: f,
-          control: v,
-          render: ({ field: { ref: te, onChange: m, value: p, ...q } }) => {
+          rules: m,
+          control: T,
+          render: ({ field: { ref: le, onChange: f, value: p, ...q } }) => {
             let h = r;
-            G(r) && u(r[0], "options") !== void 0 && (h = r.flatMap((e) => u(e, "options") ?? []));
+            L(r) && u(r[0], "options") !== void 0 && (h = r.flatMap((e) => u(e, "options") ?? []));
             const d = a ? h?.filter(
               (e) => p?.includes(e[n])
-            ) : h?.find((e) => e[n] === p), A = a && l.multiDisplayType === "text" && l.fixedHeightInput, c = B(i).invalid, E = `
+            ) : h?.find((e) => e[n] === p), A = a && o.multiDisplayType === "text" && o.fixedHeightInput, s = P(i).invalid, E = D ?? B, V = `
           ${t.formSelect} 
-          ${c ? t.invalidHelperText : ""} 
-          ${c ? t.invalidDropdownIcon : ""}  
-          ${c ? t.invalidBorder : ""} 
-          ${c ? t.invalidPlaceholder : ""}  
+          ${s ? t.invalidHelperText : ""} 
+          ${s ? t.invalidDropdownIcon : ""}  
+          ${s ? t.invalidBorder : ""} 
+          ${s ? t.invalidPlaceholder : ""}  
           ${A ? t.multiText : ""} 
           ${_ ? t.disabled : ""}`;
-            return /* @__PURE__ */ k(g, { children: [
-              /* @__PURE__ */ o(
-                Q,
+            return /* @__PURE__ */ J(g, { children: [
+              /* @__PURE__ */ l(
+                U,
                 {
                   ...q,
-                  ...l,
+                  ...o,
                   value: d ?? [],
-                  label: s,
+                  label: c,
                   variant: "outlined",
-                  helperText: M,
-                  helperTextPersistent: j,
+                  helperText: j,
+                  helperTextPersistent: k,
                   options: r,
                   valid: !F,
-                  "data-testid": l["data-testid"] ?? `select-${i}`,
-                  multiSelect: !r?.length && T ? !1 : a,
-                  className: E,
+                  "data-testid": o["data-testid"] ?? `select-${i}`,
+                  multiSelect: !r?.length && S ? !1 : a,
+                  className: V,
                   disabled: _,
                   valueKey: n,
                   textKey: x,
                   onChange: (e) => {
                     if (e == null) {
-                      m(e);
+                      f(e);
                       return;
                     }
                     if (a) {
-                      m(e.map((V) => V[n]));
+                      f(e.map((G) => G[n]));
                       return;
                     }
-                    m(e[n]), l?.onChange?.(e);
+                    f(e[n]), o?.onChange?.(e);
                   },
                   hoisted: $,
-                  noOptionsMessage: T,
-                  searchable: D,
+                  noOptionsMessage: S,
+                  searchable: E,
                   clearable: I,
-                  menuPosition: P
+                  menuPosition: b
                 }
               ),
-              /* @__PURE__ */ o(
-                L,
+              /* @__PURE__ */ l(
+                Q,
                 {
-                  id: s,
+                  id: c,
                   noArrow: !0,
                   place: "bottom",
                   delayShow: 420,
                   className: t.tooltip,
-                  hidden: !d || d.length === 0 || !l.fixedHeightInput,
-                  children: /* @__PURE__ */ o(R, { value: d, textKey: x, valueKey: n })
+                  hidden: !d || d.length === 0 || !o.fixedHeightInput,
+                  children: /* @__PURE__ */ l(W, { value: d, textKey: x, valueKey: n })
                 }
               )
             ] });
@@ -132,5 +133,5 @@ import '../../../assets/FormSelect.css';const U = "_invalidHelperText_zh2wu_1",
   );
 };
 export {
-  fe as FormSelect
+  _e as FormSelect
 };

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,15 +1,16 @@
-import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as T, w as p } from "../../../react.esm-Bm0cAgpZ.js";
-import { u as B } from "../../../index-BLPBqbdx.js";
-import { FormSelect as i } from "./FormSelect.js";
+import { jsx as a } from "react/jsx-runtime";
+import { a as s, s as t, f as B, w as f } from "../../../react.esm-Bm0cAgpZ.js";
+import { u as y } from "../../../index-BLPBqbdx.js";
+import { FormSelect as c } from "./FormSelect.js";
 import { SelectTooltipText as d } from "./SelectTooltipText.js";
-import { a as n, d as f, t as u, g as e } from "../../../vi.bdSIJ99Y-B308Q-4w.js";
-const g = n.fn();
-n.mock("react-hook-form", () => ({
-  ...n.importActual("react-hook-form"),
+import { a as m } from "../../../useBreakpoints-MzTZ0tCT.js";
+import { a as r, b as h, d as v, t as u, g as e } from "../../../vi.bdSIJ99Y-B308Q-4w.js";
+const g = r.fn();
+r.mock("react-hook-form", () => ({
+  ...r.importActual("react-hook-form"),
   Controller: ({
-    render: s
-  }) => s({
+    render: l
+  }) => l({
     field: {
       ref: void 0,
       onChange: g,
@@ -18,9 +19,9 @@ n.mock("react-hook-form", () => ({
   }),
   useFormContext: () => ({
     control: {
-      register: n.fn(),
-      unregister: n.fn(),
-      getFieldState: n.fn(),
+      register: r.fn(),
+      unregister: r.fn(),
+      getFieldState: r.fn(),
       _names: {
         array: new Set("test"),
         mount: new Set("test"),
@@ -30,11 +31,11 @@ n.mock("react-hook-form", () => ({
         watchAll: !1
       },
       _subjects: {
-        watch: n.fn(),
-        array: n.fn(),
-        state: n.fn()
+        watch: r.fn(),
+        array: r.fn(),
+        state: r.fn()
       },
-      _getWatch: n.fn(),
+      _getWatch: r.fn(),
       _formValues: ["test"],
       _defaultValues: ["test"]
     },
@@ -42,12 +43,20 @@ n.mock("react-hook-form", () => ({
     getFieldState: () => ({ invalid: !1 })
   })
 }));
-f("FormSelect Test", () => {
-  const s = [
+h(() => {
+  r.spyOn(m, "useBreakpoints").mockReturnValue({
+    isDesktop: !0,
+    isMobile: !1,
+    isTablet: !1,
+    isDesktopNavbar: !1
+  });
+});
+v("FormSelect Test", () => {
+  const l = [
     { id: "1", value: "Germany", description: "" },
     { id: "2", value: "France", description: "" },
     { id: "3", value: "Afar", description: "" }
-  ], m = [
+  ], p = [
     {
       groupValue: "Europe",
       groupName: "Europe",
@@ -63,14 +72,14 @@ f("FormSelect Test", () => {
     }
   ];
   u("render FormSelect", () => {
-    a(
-      /* @__PURE__ */ r(
-        i,
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: s,
+          options: l,
           valueKey: "id",
           textKey: "value"
         }
@@ -78,77 +87,140 @@ f("FormSelect Test", () => {
     );
     const o = t.getByRole("combobox");
     e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument();
+  }), u("enables search by default when isDesktop is true", () => {
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const o = t.getByRole("combobox");
+    e(o).not.toHaveAttribute("aria-readonly");
+  }), u("searchable=false overrides isDesktop=true", async () => {
+    const o = y.setup();
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value",
+          searchable: !1
+        }
+      )
+    );
+    const n = t.getByRole("combobox");
+    e(n).toHaveAttribute("aria-readonly", "true"), await o.click(n), await o.type(n, "Ger"), e(n).toHaveValue("");
+  }), u("cannot type when isDesktop=false and searchable is undefined", async () => {
+    const o = y.setup();
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !1,
+      isDesktopNavbar: !1
+    }), s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          propertyName: "countryId",
+          options: l,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const n = t.getByRole("combobox");
+    await o.click(n), await o.type(n, "Ger"), e(n).toHaveValue("");
   }), u("render grouped FormSelect and click on option", () => {
-    a(
-      /* @__PURE__ */ r(
-        i,
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value"
         }
       )
     );
     const o = t.getByRole("combobox");
-    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), T.mouseDown(o);
-    const c = t.getByText("Africa");
-    e(c).toBeInTheDocument(), e(c.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
-    const l = t.getByText("Europe");
-    e(l).toBeInTheDocument(), e(l.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
-    const y = t.getByText("France");
-    e(y).toBeInTheDocument(), e(y.parentElement?.parentElement).not.toBeInstanceOf(HTMLHeadingElement), e(t.getByText("Germany")).toBeInTheDocument(), e(t.getAllByText("Afar")).toHaveLength(2), T.click(y), e(g).toBeCalledWith("2");
+    e(o).toBeInTheDocument(), e(o).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), B.mouseDown(o);
+    const n = t.getByText("Africa");
+    e(n).toBeInTheDocument(), e(n.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const i = t.getByText("Europe");
+    e(i).toBeInTheDocument(), e(i.parentElement?.parentElement).toBeInstanceOf(HTMLHeadingElement);
+    const T = t.getByText("France");
+    e(T).toBeInTheDocument(), e(T.parentElement?.parentElement).not.toBeInstanceOf(HTMLHeadingElement), e(t.getByText("Germany")).toBeInTheDocument(), e(t.getAllByText("Afar")).toHaveLength(2), B.click(T), e(g).toBeCalledWith("2");
   }), u("render grouped FormSelect and hover to see tooltip on fixedHeightInput", async () => {
-    const o = B.setup();
-    a(
-      /* @__PURE__ */ r(
-        i,
+    const o = y.setup();
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value",
           fixedHeightInput: !0
         }
       )
     );
-    const c = document.querySelector('div[data-tooltip-id="address.country"]');
-    e(c).toBeInTheDocument();
-    const l = t.getByRole("combobox");
-    e(l).toBeInTheDocument(), e(l).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await p(() => {
+    const n = document.querySelector('div[data-tooltip-id="address.country"]');
+    e(n).toBeInTheDocument();
+    const i = t.getByRole("combobox");
+    e(i).toBeInTheDocument(), e(i).toBeInstanceOf(HTMLInputElement), e(t.getByText("address.country")).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("required")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await f(() => {
       e(t.getByRole("tooltip")).toBeInTheDocument();
     });
   }), u("render grouped FormSelect and no tooltip on fixedHeightInput === false", async () => {
-    const o = B.setup();
-    a(
-      /* @__PURE__ */ r(
-        i,
+    const o = y.setup();
+    s(
+      /* @__PURE__ */ a(
+        c,
         {
           label: "address.country",
           rules: { required: { value: !0, message: "required" } },
           propertyName: "countryId",
-          options: m,
+          options: p,
           valueKey: "id",
           textKey: "value",
           fixedHeightInput: !1
         }
       )
     );
-    const c = document.querySelector('div[data-tooltip-id="address.country"]');
-    e(c).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await p(() => {
+    const n = document.querySelector('div[data-tooltip-id="address.country"]');
+    e(n).toBeInTheDocument(), e(t.getByText("Afar")).toBeInTheDocument(), o.hover(t.getByText("Afar")), await f(() => {
       e(t.queryByRole("tooltip")).not.toBeInTheDocument();
     });
   }), u("render ToolTipText", async () => {
-    a(/* @__PURE__ */ r(d, { value: s[0], textKey: "value", valueKey: "id" })), e(t.getByText("Germany")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: l[0], textKey: "value", valueKey: "id" })), e(t.getByText("Germany")).toBeInTheDocument();
   }), u("render ToolTipText with multiple entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: s, textKey: "value", valueKey: "id" })), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("France")).toBeInTheDocument(), e(t.getByText("Germany")).toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: l, textKey: "value", valueKey: "id" })), e(t.getByText("Afar")).toBeInTheDocument(), e(t.getByText("France")).toBeInTheDocument(), e(t.getByText("Germany")).toBeInTheDocument();
   }), u("render ToolTipText with no entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: [], textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: [], textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
   }), u("render ToolTipText with no entries", async () => {
-    a(/* @__PURE__ */ r(d, { value: void 0, textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
+    s(/* @__PURE__ */ a(d, { value: void 0, textKey: "value", valueKey: "id" })), e(t.queryByText("Afar")).not.toBeInTheDocument(), e(t.queryByText("France")).not.toBeInTheDocument(), e(t.queryByText("Germany")).not.toBeInTheDocument();
   });
 });

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.18.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",