@hortiview/shared-components 2.16.0 → 2.16.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [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
+
+* stepperStyle export ([a0937a8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a0937a8f4db9985ea1a8409c8ed8f601d2c3d9a2))
+
 ## [2.16.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.15.0...v2.16.0) (2026-02-20)
 
 ### Features

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

@@ -2,27 +2,25 @@ import { PropsWithChildren } from 'react';
 import { StepperProps } from './stepperTypes';
 
 /**
- * A component that displays a stepper with a header, content, and navigation buttons.<br />
- * Available in three display types: 'desktop', 'small' and 'dots'.<br />
+ * A component that displays a stepper with a header, content area, and navigation buttons.<br />
+ * Available in three styles: 'DESKTOP', 'SMALL', and 'DOTS'.<br />
  *
- * - Desktop: Default EDS-like styling
- * - Small: A compact version of the desktop stepper showing only the current step and total steps in the header, as well as the title of the current step.
- * - Dots: A minimal version showing only centered dots for each step and the title of the current step in the header.
+ * - DESKTOP: Default EDS-style appearance.
+ * - SMALL: A compact version of the desktop stepper that shows only the current step, the total number of steps in the header, and the title of the current step.
+ * - DOTS: A minimal version that displays centered dots for each step and the title of the current step in the header.
  *
+ * **Note: The stepper is not a controlled component. You must manage the current step, content, and loading state yourself.**
  *
- * **!! Be aware that the stepper is not a controlled component, so you need to manage the current step, content and loading state yourself. !!**
- *
- * @param stepperType - The type of the stepper indicator. Defaults to 'desktop'.
- * @param steps - An array of steps for the stepper.
- * @param currentStepId - The current step id, matching the id property of one of the steps in
- * the steps array.
- * @param overwriteTotalSteps - A custom total number of steps to display in the stepper header. Only applicable for 'small' stepper.
- * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
- * @param showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
- * @param showStepperButtons - An indicator of whether to show the stepper buttons. Defaults to true.
- * @param stepperButtonAlignment - The alignment of the stepper button group. Defaults to 'center'.
- * @param showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper. Defaults to false.
- * @param children - The content to be displayed in the stepper.
- * @returns
+ * @param stepperStyle - The style of stepper indicator. Defaults to `StepperStyle.DESKTOP`. See {@link StepperStyle}.
+ * @param steps - An array of step definitions for the stepper.
+ * @param currentStepId - The ID of the current step. Must match the `id` property of one of the steps in the `steps` array.
+ * @param overwriteTotalSteps - A custom total number of steps to display in the header. Only applicable to the 'SMALL' stepper.
+ * @param isStepLoading - Indicates whether the current step is loading. If `true`, the next button is disabled and displays a loading state.
+ * @param showStepperHeader - Indicates whether the stepper header is displayed. Defaults to `true`.
+ * @param showStepperButtons - Indicates whether the stepper navigation buttons are displayed. Defaults to `true`.
+ * @param stepperButtonAlignment - The alignment of the stepper button group. Defaults to `'center'`.
+ * @param showPreviousButtonOnFirstStep - Indicates whether the previous button is shown on the first step. This can be useful for providing a cancel action. Defaults to `false`.
+ * @param children - The content to render inside the stepper.
+ * @returns The rendered stepper component.
  */
-export declare const Stepper: ({ stepperType, steps, currentStepId, overwriteTotalSteps, isStepLoading, showStepperHeader, showStepperButtons, stepperButtonAlignment, showPreviousButtonOnFirstStep, children, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Stepper: ({ stepperStyle, steps, currentStepId, overwriteTotalSteps, isStepLoading, showStepperHeader, showStepperButtons, stepperButtonAlignment, showPreviousButtonOnFirstStep, children, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Stepper/Stepper.js

@@ -3,10 +3,10 @@ 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 { StepperHeader as k } from "./components/StepperHeader.js";
-import { s as D } from "../../stepper.module-DR_FbENS.js";
-import { StepperType as S } from "./stepperTypes.js";
-const T = ({
-  stepperType: h = S.DESKTOP,
+import { s as S } 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,
@@ -76,7 +76,7 @@ const T = ({
         y ? /* @__PURE__ */ n(
           k,
           {
-            stepperType: h,
+            stepperStyle: h,
             stepsData: p,
             overwriteTotalSteps: P
           }
@@ -86,7 +86,7 @@ const T = ({
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: D.stepperContent,
+            className: S.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
@@ -127,5 +127,5 @@ const T = ({
   );
 };
 export {
-  T as Stepper
+  W as Stepper
 };

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

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-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 { 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 { Stepper as s } from "./Stepper.js";
-import { StepperType as i } from "./stepperTypes.js";
-import { d as I, b as B, t as c, g as e, v as a } from "../../vi.bdSIJ99Y-B308Q-4w.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 = () => [
   {
     id: "step1",
@@ -33,9 +33,9 @@ const m = () => [
     prevButtonProps: { onClick: a.fn(), label: "Back" }
   }
 ];
-I("Generic Stepper Tests (StepperType.DESKTOP)", () => {
+B("Generic Stepper Tests (StepperStyle.DESKTOP)", () => {
   let o;
-  B(() => {
+  h(() => {
     o = m();
   }), c("Default Render", () => {
     p(
@@ -69,12 +69,12 @@ I("Generic Stepper Tests (StepperType.DESKTOP)", () => {
     const r = a.fn();
     o[1].nextButtonProps.onClick = r, p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", isStepLoading: !1, children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), y.click(t.getByText("Next")), e(r).toHaveBeenCalled();
+    ), S.click(t.getByText("Next")), e(r).toHaveBeenCalled();
   }), c("calls prevButtonProps.onClick when prev button is clicked", () => {
     const r = a.fn();
     o[1].prevButtonProps.onClick = r, p(
       /* @__PURE__ */ n(s, { steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
-    ), y.click(t.getByText("Back")), e(r).toHaveBeenCalled();
+    ), S.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" }) })
@@ -137,13 +137,13 @@ I("Generic Stepper Tests (StepperType.DESKTOP)", () => {
     ), r.mockRestore();
   });
 });
-I("Stepper Type DESKTOP Tests", () => {
+B("Stepper Type DESKTOP Tests", () => {
   let o;
-  B(() => {
+  h(() => {
     o = m();
   }), c("renders numbers, text and secondary text", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByTestId("desktop-stepper-header")).toBeInTheDocument(), e(t.getByText(
       1
       /* STEP_1 */
@@ -176,7 +176,7 @@ I("Stepper Type DESKTOP Tests", () => {
     ).not.toBeInTheDocument(), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
   }), c("show numbers for active and incompleted step", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.queryByText(
       1
       /* STEP_1 */
@@ -189,7 +189,7 @@ I("Stepper Type DESKTOP Tests", () => {
     )).toBeInTheDocument();
   }), c("show checkmark for completed step", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DESKTOP, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.queryByText(
       1
       /* STEP_1 */
@@ -199,21 +199,21 @@ I("Stepper Type DESKTOP Tests", () => {
     )).not.toBeInTheDocument(), e(t.getByTestId("stepper-item-check-for-step1")).toBeInTheDocument(), e(t.getByTestId("stepper-item-check-for-step2")).toBeInTheDocument();
   }), c("has correct color styles for completed and active steps", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DESKTOP, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
     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"), T = 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(T.className).not.toContain("stepperItemNumberActive");
+    ), 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");
   }), c("advancing step changes number to checkmark and adjusts color", () => {
     const { rerender: r } = p(
-      /* @__PURE__ */ n(s, { stepperType: 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"), T = t.getByTestId("stepper-connector-before-step3"), h = 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(T.className).not.toContain("stepperItemConnectorCompleted"), e(h.className).not.toContain("stepperItemNumberActive"), r(
-      /* @__PURE__ */ n(s, { stepperType: 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(T.className).not.toContain("stepperItemConnectorCompleted"), e(h.className).not.toContain("stepperItemNumberActive"), r(
-      /* @__PURE__ */ n(s, { stepperType: 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(T.className).toContain("stepperItemConnectorCompleted"), e(h.className).toContain("stepperItemNumberActive");
+      /* @__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(
+      /* @__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(
+      /* @__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");
   }), 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" }) })
@@ -233,7 +233,7 @@ I("Stepper Type DESKTOP Tests", () => {
       /* @__PURE__ */ n(
         s,
         {
-          stepperType: i.DESKTOP,
+          stepperStyle: i.DESKTOP,
           steps: r,
           currentStepId: "step2",
           children: /* @__PURE__ */ n("div", { children: "Step Content" })
@@ -245,7 +245,7 @@ I("Stepper Type DESKTOP Tests", () => {
       /* @__PURE__ */ n(
         s,
         {
-          stepperType: i.DESKTOP,
+          stepperStyle: i.DESKTOP,
           steps: r,
           currentStepId: "step4",
           children: /* @__PURE__ */ n("div", { children: "Step Content" })
@@ -257,23 +257,23 @@ I("Stepper Type DESKTOP Tests", () => {
       t.queryByTestId("stepper-item-check-for-step3")
     ).not.toBeInTheDocument();
   }), c("shows mobile view breakpoint is triggered (<600px)", () => {
-    a.spyOn(S, "useBreakpoints").mockReturnValue({
+    a.spyOn(y, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isDesktop: !1,
       isDesktopNavbar: !1,
       isTablet: !1
     }), p(
-      /* @__PURE__ */ n(s, { stepperType: 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(S, "useBreakpoints").mockRestore();
+      /* @__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();
   });
 });
-I("Stepper Type DOTS Tests", () => {
+B("Stepper Type DOTS Tests", () => {
   let o;
-  B(() => {
+  h(() => {
     o = m();
   }), c("renders dots and text", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByTestId("dots-stepper-header")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step1")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step2")).toBeInTheDocument(), e(t.getByTestId("stepper-indicator-step3")).toBeInTheDocument(), e(t.getByText(
       "Description 1"
       /* STEP_1 */
@@ -286,53 +286,53 @@ I("Stepper Type DOTS Tests", () => {
     )).not.toBeInTheDocument(), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
   }), c("show active style for completed, active and incompleted steps", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__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");
   }), c("show optional style", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
     const r = t.getByTestId("stepper-indicator-step3");
     e(r.className).toContain("stepperIndicatorItemOptional");
   }), c("advancing step adjusts styles accordingly", () => {
     const { rerender: r } = p(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__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(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__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(
-      /* @__PURE__ */ n(s, { stepperType: i.DOTS, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__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");
   });
 });
-I("Stepper Type SMALL Tests", () => {
+B("Stepper Type SMALL Tests", () => {
   let o;
-  B(() => {
+  h(() => {
     o = m();
   }), c("renders step number, total steps and text", () => {
     p(
-      /* @__PURE__ */ n(s, { stepperType: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByTestId("description-stepper-header")).toBeInTheDocument(), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/3"), e(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
       "Description 1"
       /* STEP_1 */
     ), e(t.getByText("Step Content")).toBeInTheDocument(), e(t.getByText("Next")).toBeInTheDocument();
   }), c("advancing step adjusts progress accordingly", () => {
     const { rerender: r } = p(
-      /* @__PURE__ */ n(s, { stepperType: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step1", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     );
     e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/3"), r(
-      /* @__PURE__ */ n(s, { stepperType: i.SMALL, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step2", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2/3"), r(
-      /* @__PURE__ */ n(s, { stepperType: i.SMALL, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
+      /* @__PURE__ */ n(s, { stepperStyle: i.SMALL, steps: o, currentStepId: "step3", children: /* @__PURE__ */ n("div", { children: "Step Content" }) })
     ), e(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/3");
   }), c("overwriting total steps accordingly", () => {
     p(
       /* @__PURE__ */ n(
         s,
         {
-          stepperType: i.SMALL,
+          stepperStyle: i.SMALL,
           steps: o,
           currentStepId: "step3",
           overwriteTotalSteps: 5,

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

@@ -1,6 +1,6 @@
-import { StepperBaseProps } from '../stepperTypes';
+import { StepperBaseProps } from '../stepperTypes.ts';
 
 /**
  * A component that displays the specified type of stepper header based on the provided type prop.
  */
-export declare const StepperHeader: ({ stepperType, stepsData, overwriteTotalSteps, }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const StepperHeader: ({ stepperStyle, stepsData, overwriteTotalSteps, }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/Stepper/components/StepperHeader.js

@@ -4,10 +4,10 @@ import { T as o } from "../../../index.es-SjZ_-d7U.js";
 import { useMemo as f, Fragment as A } from "react";
 import { u as v } from "../../../useBreakpoints-MzTZ0tCT.js";
 import { s as t } from "../../../stepper.module-DR_FbENS.js";
-import { StepperType as c } from "../stepperTypes.js";
 import { StepperItem as h } from "./StepperItem.js";
-const k = ({
-  stepperType: d,
+import { StepperStyle as c } from "../stepperStyles.js";
+const T = ({
+  stepperStyle: d,
   stepsData: l,
   overwriteTotalSteps: u
 }) => {
@@ -139,5 +139,5 @@ const k = ({
     );
 };
 export {
-  k as StepperHeader
+  T as StepperHeader
 };

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

@@ -1,7 +1,7 @@
 import { StepperItemProps } from '../stepperTypes';
 
 /**
- * A component for the Desktop-type stepper. Shows the number of the step, title and description
+ * A component for the Desktop-style stepper. Shows the number of the step, title and description
  * @param step - Step to be displayed in the stepper item.
  * @returns
  */

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

@@ -0,0 +1,5 @@
+export declare enum StepperStyle {
+    DESKTOP = "DESKTOP",
+    SMALL = "SMALL",
+    DOTS = "DOTS"
+}

package/dist/components/Stepper/stepperStyles.js

@@ -0,0 +1,4 @@
+var L = /* @__PURE__ */ ((D) => (D.DESKTOP = "DESKTOP", D.SMALL = "SMALL", D.DOTS = "DOTS", D))(L || {});
+export {
+  L as StepperStyle
+};

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

@@ -1,11 +1,7 @@
 import { ButtonProps } from '@element-public/react-button';
 import { CSSProperties, ReactNode } from 'react';
+import { StepperStyle } from './stepperStyles.ts';
 
-export declare enum StepperType {
-    DESKTOP = "DESKTOP",
-    SMALL = "SMALL",
-    DOTS = "DOTS"
-}
 /**
  * Defines the structure of a step in the stepper
  */
@@ -15,15 +11,15 @@ export type Step = {
      */
     id: string | number;
     /**
-     * The step number that is displayed when the stepper shows a step number (StepperType.DESKTOP and StepperType.SMALL)
+     * The step number that is displayed when the stepper shows a step number (StepperStyle.DESKTOP and StepperStyle.SMALL)
      */
     stepNumber: number;
     /**
-     * Whether to exclude the step from the header. Only applicable for StepperType.DESKTOP.
+     * Whether to exclude the step from the header. Only applicable for StepperStyle.DESKTOP.
      */
     excludeFromHeader?: boolean;
     /**
-     * Whether activating this step should mark the previous step as completed. Only works in StepperType.DESKTOP
+     * Whether activating this step should mark the previous step as completed. Only works in StepperStyle.DESKTOP
      * @default false
      *
      * @remarks By default a step is treated as completed when the next visible step is active. This flag allows excluded steps (invisible ones) to complete the previous step.
@@ -95,7 +91,7 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
     buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
- * @param {StepperType} stepperType - The type of the stepper indicator. Defaults to StepperType.DESKTOP. See {@link StepperType}
+ * @param {StepperStyle} stepperStyle - The type of the stepper indicator. Defaults to StepperStyle.DESKTOP. See {@link StepperStyle}
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
  * @param {boolean} isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
@@ -105,14 +101,14 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
  */
 export type StepperProps = {
     /**
-     * The display-type of the Stepper.
-     * - StepperType.DESKTOP: EDS-like default stepper appearance. (Do not use on mobile)
-     * - StepperType.SMALL: Compact version with n/n progress display.
-     * - StepperType.DOTS: Centered dots and title underneath.
+     * The display-style of the Stepper.
+     * - StepperStyle.DESKTOP: EDS-like default stepper appearance. (also mobile optimized)
+     * - StepperStyle.SMALL: Compact version with n/n progress display.
+     * - StepperStyle.DOTS: Centered dots and title underneath.
      *
-     * @default StepperType.DESKTOP
+     * @default StepperStyle.DESKTOP
      */
-    stepperType?: StepperType;
+    stepperStyle?: StepperStyle;
     /**
      * An array of steps for the stepper.
      */
@@ -124,7 +120,7 @@ export type StepperProps = {
     currentStepId: Step['id'];
     /**
      * Set a custom number of total steps to display in the stepper header.
-     * Only applicable for StepperType.SMALL.
+     * Only applicable for StepperStyle.SMALL.
      * @remarks This can be used to show a different total number of steps than the length of the steps array. (Think half steps -> 1, 1.5, 2)
      */
     overwriteTotalSteps?: number;
@@ -155,11 +151,11 @@ export type StepperProps = {
     showPreviousButtonOnFirstStep?: boolean;
 };
 /**
- * @param {StepperType} stepperType - The type of the stepper indicator.
+ * @param {StepperStyle} stepperStyle - The type of the stepper indicator.
  * @param {number} overwriteTotalSteps - A custom total number of steps to display in the stepper header.
  * @param {StepData[]} stepsData - An array of step data for rendering the steps @lookup {@link StepData}.
  */
-export type StepperBaseProps = Pick<StepperProps, 'stepperType' | 'overwriteTotalSteps'> & {
+export type StepperBaseProps = Pick<StepperProps, 'stepperStyle' | 'overwriteTotalSteps'> & {
     stepsData: StepData[];
 };
 /**

package/dist/components/Stepper/stepperTypes.js

@@ -1,4 +1 @@
-var L = /* @__PURE__ */ ((D) => (D.DESKTOP = "DESKTOP", D.SMALL = "SMALL", D.DOTS = "DOTS", D))(L || {});
-export {
-  L as StepperType
-};
+

package/dist/main.d.ts

@@ -52,6 +52,7 @@ export type { InfoCardProps } from './components/InfoCard/InfoCard';
 export type { FieldItem } from './components/InfoGroup/InfoGroup';
 export type { LoadingSpinnerProps } from './components/LoadingSpinner/Default/LoadingSpinner';
 export type { Step, StepperBaseProps, StepperButtonProps, StepperProps, } from './components/Stepper/stepperTypes';
+export { StepperStyle } from './components/Stepper/stepperStyles';
 export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';

package/dist/main.js

@@ -5,7 +5,7 @@ import { BasicHeading as i } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as n } from "./components/BlockView/BlockView.js";
 import { ButtonCard as A } from "./components/ButtonCard/ButtonCard.js";
 import { ChipCard as d } from "./components/ChipCard/ChipCard.js";
-import { ConfirmationModal as S } from "./components/ConfirmationModal/ConfirmationModal.js";
+import { ConfirmationModal as E } from "./components/ConfirmationModal/ConfirmationModal.js";
 import { ContextMenu as L } from "./components/ContextMenu/ContextMenu.js";
 import { DeleteModal as F } from "./components/DeleteModal/DeleteModal.js";
 import { DetailContentWrapper as T } from "./components/DetailContentWrapper/DetailContentWrapper.js";
@@ -31,7 +31,7 @@ import { SearchBar as xr } from "./components/SearchBar/SearchBar.js";
 import { Select as ar } from "./components/Select/Select.js";
 import { StepperHeader as lr } from "./components/Stepper/components/StepperHeader.js";
 import { Stepper as sr } from "./components/Stepper/Stepper.js";
-import { VerticalDivider as Er } from "./components/VerticalDivider/VerticalDivider.js";
+import { VerticalDivider as Sr } from "./components/VerticalDivider/VerticalDivider.js";
 import { FormCheckBox as cr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
 import { FormDatePicker as _r } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
 import { FormNumber as Ir } from "./components/FormComponents/FormNumber/FormNumber.js";
@@ -45,36 +45,37 @@ import { AvailableCustomIcons as Rr } from "./enums/AvailableCustomIcons.js";
 import { ThemeColor as Hr } from "./enums/ThemeColor.js";
 import { u as hr } from "./useBreakpoints-MzTZ0tCT.js";
 import { capitalizeFirstLetters as vr, getFormattedDateTime as yr, getNumberAsLocaleString as Wr, trimLeadingAndTrailingSpaces as Yr } from "./services/UtilService.js";
-import { DATE_FORMAT as zr, DATE_TIME_FORMAT as Xr, TIME_FORMAT as jr } from "./types/Time.js";
-import { AVAILABLE_COUNTRY_KEYS as Jr, AVAILABLE_LOCALES as Qr, ENGLISH_LANGUAGE_ID as Zr, GERMAN_LANGUAGE_ID as $r, LANGUAGE_CODES_MAPPER as ro, LANGUAGE_ID_MAPPER as oo, SPANISH_LANGUAGE_ID as eo, TURKISH_LANGUAGE_ID as to } from "./types/Languages.js";
-import { Allowed as po } from "./components/Allowed/Allowed.js";
-import { AllowedButton as xo } from "./components/AllowedButton/AllowedButton.js";
-import { AllowedIconButton as ao } from "./components/AllowedIconButton/AllowedIconButton.js";
-import { getPermissionsFromModulePermissionToken as lo, useIsAllowed as Ao } from "./components/PermissionChecks/PermissionService.js";
-import { SharedComponentsPermissionProvider as Eo } from "./components/SharedComponentsPermissionProvider/SharedComponentsPermissionProvider.js";
-import { createPermissionWrapper as co, renderWithPermissions as Lo } from "./test-utils.js";
-import { HVMainPermissions as Fo } from "./types/Permission.js";
+import { StepperStyle as zr } from "./components/Stepper/stepperStyles.js";
+import { DATE_FORMAT as jr, DATE_TIME_FORMAT as qr, TIME_FORMAT as Jr } from "./types/Time.js";
+import { AVAILABLE_COUNTRY_KEYS as Zr, AVAILABLE_LOCALES as $r, ENGLISH_LANGUAGE_ID as ro, GERMAN_LANGUAGE_ID as oo, LANGUAGE_CODES_MAPPER as eo, LANGUAGE_ID_MAPPER as to, SPANISH_LANGUAGE_ID as mo, TURKISH_LANGUAGE_ID as po } from "./types/Languages.js";
+import { Allowed as xo } from "./components/Allowed/Allowed.js";
+import { AllowedButton as ao } from "./components/AllowedButton/AllowedButton.js";
+import { AllowedIconButton as lo } from "./components/AllowedIconButton/AllowedIconButton.js";
+import { getPermissionsFromModulePermissionToken as so, useIsAllowed as So } from "./components/PermissionChecks/PermissionService.js";
+import { SharedComponentsPermissionProvider as co } from "./components/SharedComponentsPermissionProvider/SharedComponentsPermissionProvider.js";
+import { createPermissionWrapper as _o, renderWithPermissions as Fo } from "./test-utils.js";
+import { HVMainPermissions as To } from "./types/Permission.js";
 export {
-  Jr as AVAILABLE_COUNTRY_KEYS,
-  Qr as AVAILABLE_LOCALES,
+  Zr as AVAILABLE_COUNTRY_KEYS,
+  $r as AVAILABLE_LOCALES,
   e as AlertBanner,
-  po as Allowed,
-  xo as AllowedButton,
-  ao as AllowedIconButton,
+  xo as Allowed,
+  ao as AllowedButton,
+  lo as AllowedIconButton,
   Rr as AvailableCustomIcons,
   f as BaseView,
   i as BasicHeading,
   n as BlockView,
   A as ButtonCard,
   d as ChipCard,
-  S as ConfirmationModal,
+  E as ConfirmationModal,
   L as ContextMenu,
-  zr as DATE_FORMAT,
-  Xr as DATE_TIME_FORMAT,
+  jr as DATE_FORMAT,
+  qr as DATE_TIME_FORMAT,
   F as DeleteModal,
   T as DetailContentWrapper,
   D as Disclaimer,
-  Zr as ENGLISH_LANGUAGE_ID,
+  ro as ENGLISH_LANGUAGE_ID,
   u as EmptyView,
   C as Filter,
   cr as FormCheckBox,
@@ -86,16 +87,16 @@ export {
   Pr as FormText,
   gr as FormToggle,
   N as FormattedNumberDisplay,
-  $r as GERMAN_LANGUAGE_ID,
+  oo as GERMAN_LANGUAGE_ID,
   w as GenericTable,
-  Fo as HVMainPermissions,
+  To as HVMainPermissions,
   b as HashTabView,
   V as HeaderFilter,
   U as Iconify,
   k as InfoCard,
   y as InfoGroup,
-  ro as LANGUAGE_CODES_MAPPER,
-  oo as LANGUAGE_ID_MAPPER,
+  eo as LANGUAGE_CODES_MAPPER,
+  to as LANGUAGE_ID_MAPPER,
   m as LinkBanner,
   Y as ListArea,
   z as LoadingSpinner,
@@ -104,26 +105,27 @@ export {
   Z as OfflineView,
   rr as OnboardingBanner,
   er as OverflowTooltip,
-  eo as SPANISH_LANGUAGE_ID,
+  mo as SPANISH_LANGUAGE_ID,
   Or as SafeForm,
   mr as ScrollbarX,
   pr as ScrollbarY,
   xr as SearchBar,
   ar as Select,
-  Eo as SharedComponentsPermissionProvider,
+  co as SharedComponentsPermissionProvider,
   sr as Stepper,
   lr as StepperHeader,
-  jr as TIME_FORMAT,
-  to as TURKISH_LANGUAGE_ID,
+  zr as StepperStyle,
+  Jr as TIME_FORMAT,
+  po as TURKISH_LANGUAGE_ID,
   Hr as ThemeColor,
-  Er as VerticalDivider,
+  Sr as VerticalDivider,
   vr as capitalizeFirstLetters,
-  co as createPermissionWrapper,
+  _o as createPermissionWrapper,
   yr as getFormattedDateTime,
   Wr as getNumberAsLocaleString,
-  lo as getPermissionsFromModulePermissionToken,
-  Lo as renderWithPermissions,
+  so as getPermissionsFromModulePermissionToken,
+  Fo as renderWithPermissions,
   Yr as trimLeadingAndTrailingSpaces,
   hr as useBreakpoints,
-  Ao as useIsAllowed
+  So as useIsAllowed
 };

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