@hortiview/shared-components 2.16.0 → 2.16.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [2.16.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.1...v2.16.2) (2026-02-24)
+
+### Bug Fixes
+
+* adjust modal border radius to exclude fullscreen mode ([88981ad](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/88981adcde776e88f76abda8a90b1e91b4f9557b))
+
+## [2.16.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.16.0...v2.16.1) (2026-02-23)
+
+### Bug Fixes
+
+* 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/assets/Modal.css

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

package/dist/components/Modal/Modal.js

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

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