@hortiview/shared-components 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.3.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.2.0...v2.3.0) (2025-08-20)
+
+### Features
+
+* add additional props to the stepper and stepper buttons ([e7a404d](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e7a404df5f97ec90dbfc4055cef8026f6d84a136))
+* added new LinkBanner component ([86d5360](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/86d5360b713cff6abd2bf6658e1f934b972c7020))
+
 ## [2.2.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.1.0...v2.2.0) (2025-07-24)
 
 ### Features

package/dist/AlertBanner-75jjene1.js

@@ -0,0 +1,26 @@
+import { jsx as n, Fragment as i, jsxs as t } from "react/jsx-runtime";
+import { G as l } from "./index.es-DntoATwO.js";
+import { I as _ } from "./index.es-3043KTnb.js";
+import { T as d } from "./index.es-D54RuMc_.js";
+import './assets/AlertBanner.css';const m = "_messageContainer_2hnjr_1", g = "_info_2hnjr_9", h = "_danger_2hnjr_14", p = "_success_2hnjr_19", f = "_warning_2hnjr_24", u = "_closeIcon_2hnjr_29", j = "_linkBanner_2hnjr_34", s = {
+  messageContainer: m,
+  info: g,
+  danger: h,
+  success: p,
+  warning: f,
+  closeIcon: u,
+  linkBanner: j
+}, k = ({
+  text: e,
+  color: o = "info",
+  isOpen: a = !0,
+  isBold: c = !0,
+  onClose: r
+}) => a ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${s.messageContainer} ${s[o]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", fullWidth: !0, children: [
+  typeof e == "string" ? /* @__PURE__ */ n(d, { bold: c, level: 2, children: e }) : /* @__PURE__ */ n("div", { style: { width: "100%" }, children: e }),
+  r && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: r, className: s.closeIcon })
+] }) }) : /* @__PURE__ */ n(i, {});
+export {
+  k as A,
+  s
+};

package/dist/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_1i2s1_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1i2s1_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1i2s1_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1i2s1_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1i2s1_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_1i2s1_29{align-self:flex-start;margin-right:-.15rem}
+._messageContainer_2hnjr_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_2hnjr_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_2hnjr_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_2hnjr_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_2hnjr_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_2hnjr_29{align-self:flex-start;margin-right:-.15rem}._linkBanner_2hnjr_34{cursor:pointer}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_18rd0_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_18rd0_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_18rd0_18{margin-left:1rem!important}
+._modal_fr8bw_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_fr8bw_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_fr8bw_18{margin-left:1rem!important}._closeButton_fr8bw_22:before{display:none!important}._closeButton_fr8bw_22:hover{background-color:var(--lmnt-theme-surface-variant)!important}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,4 +1,4 @@
-type AlertBannerProps = {
+export type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
@@ -13,4 +13,3 @@ type AlertBannerProps = {
     action?: JSX.Element;
 };
 export declare const AlertBanner: ({ text, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,24 +1,8 @@
-import { jsx as n, Fragment as a, jsxs as t } from "react/jsx-runtime";
-import { G as l } from "../../index.es-DntoATwO.js";
-import { I as _ } from "../../index.es-3043KTnb.js";
-import { T as m } from "../../index.es-D54RuMc_.js";
-import '../../assets/AlertBanner.css';const d = "_messageContainer_1i2s1_1", g = "_info_1i2s1_9", p = "_danger_1i2s1_14", f = "_success_1i2s1_19", u = "_warning_1i2s1_24", y = "_closeIcon_1i2s1_29", e = {
-  messageContainer: d,
-  info: g,
-  danger: p,
-  success: f,
-  warning: u,
-  closeIcon: y
-}, b = ({
-  text: s,
-  color: r = "info",
-  isOpen: i = !0,
-  isBold: c = !0,
-  onClose: o
-}) => i ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${e.messageContainer} ${e[r]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", children: [
-  typeof s == "string" ? /* @__PURE__ */ n(m, { bold: c, level: 2, children: s }) : /* @__PURE__ */ n("div", { children: s }),
-  o && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: o, className: e.closeIcon })
-] }) }) : /* @__PURE__ */ n(a, {});
+import "react/jsx-runtime";
+import "../../index.es-DntoATwO.js";
+import "../../index.es-3043KTnb.js";
+import "../../index.es-D54RuMc_.js";
+import { A as e } from "../../AlertBanner-75jjene1.js";
 export {
-  b as AlertBanner
+  e as AlertBanner
 };

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,7 +1,7 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
-import { AlertBanner as n } from "./AlertBanner.js";
+import { A as n } from "../../AlertBanner-75jjene1.js";
 import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 p("AlertBanner Test", () => {
   c(() => {

package/dist/components/AlertBanner/LinkBanner.d.ts

@@ -0,0 +1,21 @@
+import { AlertBannerProps } from './AlertBanner';
+
+/**
+ * LinkBanner component, shows an alert banner but with a link as text
+ * @param text - The text of the link.
+ * @param url - The URL the link points to.
+ * @param color - The color of the link banner.
+ * @param isOpen - Whether the link banner is open or not.
+ * @param isBold - Whether the text is bold or not.
+ * @returns
+ */
+export declare const LinkBanner: ({ text, color, isOpen, isBold, url, }: Omit<AlertBannerProps, "onClose" | "action" | "text"> & {
+    /**
+     * the given text is shown as a link, in addition a link icon is displayed
+     */
+    url: string;
+    /**
+     * the text of the link
+     */
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AlertBanner/LinkBanner.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { G as l } from "../../index.es-DntoATwO.js";
+import { T as s } from "../../index.es-D54RuMc_.js";
+import { Iconify as p } from "../Iconify/Iconify.js";
+import { A as m, s as c } from "../../AlertBanner-75jjene1.js";
+const g = ({
+  text: n,
+  color: o = "info",
+  isOpen: t = !0,
+  isBold: e = !0,
+  url: i
+}) => /* @__PURE__ */ r(
+  m,
+  {
+    color: o,
+    isOpen: t,
+    isBold: e,
+    text: /* @__PURE__ */ r("a", { href: i, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ a(
+      l,
+      {
+        direction: "horizontal",
+        primaryAlign: "space-between",
+        gap: "dense",
+        secondaryAlign: "center",
+        className: c.linkBanner,
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ r(s, { bold: e, level: 2, children: n }),
+          /* @__PURE__ */ r(p, { icon: "open_in_new", pointer: !0 })
+        ]
+      }
+    ) })
+  }
+);
+export {
+  g as LinkBanner
+};

package/dist/components/AlertBanner/LinkBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AlertBanner/LinkBanner.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
+import { LinkBanner as a } from "./LinkBanner.js";
+import { d as n, b as i, a as m, t as p, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+n("LinkBanner Test", () => {
+  i(() => {
+    m.spyOn(o, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !0
+    });
+  }), p("render LinkBanner with text", () => {
+    r(/* @__PURE__ */ s(a, { text: "Test", url: "#" })), t(e.getByText("Test")).toBeInTheDocument(), t(e.getByText("open_in_new")).toBeInTheDocument(), t(e.getByRole("link")).toHaveAttribute("href", "#");
+  });
+});

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
-import { jsxs as ft, jsx as _, Fragment as pt } from "react/jsx-runtime";
-import { G as V } from "../../index.es-DntoATwO.js";
+import { jsxs as ft, jsx as E, Fragment as pt } from "react/jsx-runtime";
+import { G as z } from "../../index.es-DntoATwO.js";
 import { I as it } from "../../index.es-0lQcz8m1.js";
 import { _ as ht, c as B, P as s } from "../../identity-DLWZln-X.js";
-import d, { forwardRef as gt, useRef as et, useImperativeHandle as Et, useState as nt, useEffect as g, useCallback as z, useMemo as Y } from "react";
-import { i as _t, c as A, a as Ct } from "../../index.es-da0cf7oE.js";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as g, useCallback as j, useMemo as Y } from "react";
+import { i as Et, c as A, a as Ct } from "../../index.es-da0cf7oE.js";
 import { b as at, c as ot, d as St } from "../../tslib.es6-BDCynO9F.js";
 import { M as vt, a as yt } from "../../component-neHBNHRu.js";
 import { M as Ot, c as Tt, m as At } from "../../component-DsB0poTj.js";
@@ -73,7 +73,7 @@ function wt(i) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var j = "mdc-dom-focus-sentinel", Mt = (
+var q = "mdc-dom-focus-sentinel", Mt = (
   /** @class */
   function() {
     function i(e, t) {
@@ -85,7 +85,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
         throw new Error("FocusTrap: Element must have at least one focusable child.");
       this.elFocusedBeforeTrapFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.wrapTabFocus(this.root), this.options.skipInitialFocus || this.focusInitialElement(e, this.options.initialFocusEl);
     }, i.prototype.releaseFocus = function() {
-      [].slice.call(this.root.querySelectorAll("." + j)).forEach(function(e) {
+      [].slice.call(this.root.querySelectorAll("." + q)).forEach(function(e) {
         e.parentElement.removeChild(e);
       }), !this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus && this.elFocusedBeforeTrapFocus.focus();
     }, i.prototype.wrapTabFocus = function(e) {
@@ -103,7 +103,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
     }, i.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var o = 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(j) && !o, f = !1;
+        var o = 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(q) && !o, f = !1;
         if (a) {
           var p = getComputedStyle(n);
           f = p.display === "none" || p.visibility === "hidden";
@@ -112,7 +112,7 @@ var j = "mdc-dom-focus-sentinel", Mt = (
       });
     }, i.prototype.createSentinel = function() {
       var e = document.createElement("div");
-      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(j), e;
+      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(q), e;
     }, i;
   }()
 );
@@ -191,7 +191,7 @@ var r = {
     ".mdc-menu .mdc-deprecated-list-item"
   ].join(", "),
   SURFACE_SELECTOR: ".mdc-dialog__surface"
-}, q = {
+}, $ = {
   DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
   DIALOG_ANIMATION_OPEN_TIME_MS: 150
 };
@@ -217,10 +217,10 @@ var r = {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var w;
+var M;
 (function(i) {
   i.POLL_SCROLL_POS = "poll_scroll_position", i.POLL_LAYOUT_CHANGE = "poll_layout_change";
-})(w || (w = {}));
+})(M || (M = {}));
 var rt = (
   /** @class */
   function(i) {
@@ -249,7 +249,7 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "numbers", {
       get: function() {
-        return q;
+        return $;
       },
       enumerable: !1,
       configurable: !0
@@ -325,13 +325,13 @@ var rt = (
       this.dialogOpen = !0, this.adapter.notifyOpening(), this.adapter.addClass(r.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(r.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
         n.adapter.addClass(r.OPEN), n.adapter.addBodyClass(r.SCROLL_LOCK), n.layout(), n.animationTimer = setTimeout(function() {
           n.handleAnimationTimerEnd(), n.adapter.trapFocus(n.adapter.getInitialFocusEl()), n.adapter.notifyOpened();
-        }, q.DIALOG_ANIMATION_OPEN_TIME_MS);
+        }, $.DIALOG_ANIMATION_OPEN_TIME_MS);
       });
     }, e.prototype.close = function(t) {
       var n = this;
       t === void 0 && (t = ""), this.dialogOpen && (this.dialogOpen = !1, this.adapter.notifyClosing(t), this.adapter.addClass(r.CLOSING), this.adapter.removeClass(r.OPEN), this.adapter.removeBodyClass(r.SCROLL_LOCK), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), cancelAnimationFrame(this.animationFrame), this.animationFrame = 0, clearTimeout(this.animationTimer), this.animationTimer = setTimeout(function() {
         n.adapter.releaseFocus(), n.handleAnimationTimerEnd(), n.adapter.notifyClosed(t);
-      }, q.DIALOG_ANIMATION_CLOSE_TIME_MS));
+      }, $.DIALOG_ANIMATION_CLOSE_TIME_MS));
     }, e.prototype.showSurfaceScrim = function() {
       var t = this;
       this.adapter.addClass(r.SURFACE_SCRIM_SHOWING), this.runNextAnimationFrame(function() {
@@ -361,7 +361,7 @@ var rt = (
       this.suppressDefaultPressSelector = t;
     }, e.prototype.layout = function() {
       var t = this;
-      this.animFrame.request(w.POLL_LAYOUT_CHANGE, function() {
+      this.animFrame.request(M.POLL_LAYOUT_CHANGE, function() {
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
@@ -386,7 +386,7 @@ var rt = (
       n && this.escapeKeyAction !== "" && this.close(this.escapeKeyAction);
     }, e.prototype.handleScrollEvent = function() {
       var t = this;
-      this.animFrame.request(w.POLL_SCROLL_POS, function() {
+      this.animFrame.request(M.POLL_SCROLL_POS, function() {
         t.toggleScrollDividerHeader(), t.toggleScrollDividerFooter();
       });
     }, e.prototype.layoutInternal = function() {
@@ -477,8 +477,8 @@ var u = rt.strings, kt = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, o;
-      t === void 0 && (t = function(E, C) {
-        return new Mt(E, C);
+      t === void 0 && (t = function(_, C) {
+        return new Mt(_, C);
       });
       var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
@@ -489,8 +489,8 @@ var u = rt.strings, kt = (
           var v = p.value;
           this.buttonRipples.push(new Ot(v));
         }
-      } catch (E) {
-        n = { error: E };
+      } catch (_) {
+        n = { error: _ };
       } finally {
         try {
           p && !p.done && (o = f.return) && o.call(f);
@@ -788,7 +788,7 @@ const Ht = {
   returnFocusSelector: null,
   scrollable: !1,
   title: null
-}, M = /* @__PURE__ */ gt((i, e) => {
+}, k = /* @__PURE__ */ gt((i, e) => {
   const {
     actionButton: t,
     actionIcons: n,
@@ -797,36 +797,36 @@ const Ht = {
     children: f,
     className: p,
     content: v,
-    defaultButton: E,
+    defaultButton: _,
     dismissiveButton: C,
     footerSupplemental: b,
     headerActions: J,
-    hideCloseIcon: k,
+    hideCloseIcon: H,
     indicator: st,
     initialFocus: y,
-    mobileStackedButtons: H,
+    mobileStackedButtons: P,
     modalSize: h,
     nextButton: O,
     noActions: T,
-    onClose: P,
-    onClosed: U,
+    onClose: U,
+    onClosed: x,
     onOpen: D,
     onOpened: I,
     open: Q,
-    preventClose: x,
+    preventClose: G,
     preventPrimaryAccept: X,
     primaryButton: c,
-    returnFocusSelector: G,
+    returnFocusSelector: K,
     scrollable: Z,
     title: tt,
     ...lt
   } = i, N = et(), l = et();
-  Et(e, () => N.current, []);
-  const [K, ct] = nt(), [W, dt] = nt(() => O || a);
+  _t(e, () => N.current, []);
+  const [W, ct] = nt(), [V, dt] = nt(() => O || a);
   g(() => {
     dt(O || a);
   }, [O, a]);
-  const L = z(() => {
+  const L = j(() => {
     ct(window.innerWidth <= 600);
   }, []);
   g(() => (L(), window.addEventListener("resize", L), () => {
@@ -834,18 +834,18 @@ const Ht = {
   }), [L]), g(() => (l.current = kt.attachTo(N.current), () => {
     l.current.destroy();
   }), [l, N]), g(() => {
-    l.current.foundation.setAutoStackButtons(H);
-  }, [H]), g(() => {
+    l.current.foundation.setAutoStackButtons(P);
+  }, [P]), g(() => {
     T && (l.current.foundation.adapter.trapFocus = () => {
     });
   }, [T]), g(() => {
-    l.current.scrimClickAction = x ? "" : "close", l.current.escapeKeyAction = x ? "" : "close";
-  }, [x]);
-  const F = z((m) => {
-    P && P(m);
-  }, [P]), R = z((m) => {
-    G && _t(G), U && U(m);
-  }, [G, U]);
+    l.current.scrimClickAction = G ? "" : "close", l.current.escapeKeyAction = G ? "" : "close";
+  }, [G]);
+  const F = j((m) => {
+    U && U(m);
+  }, [U]), R = j((m) => {
+    K && Et(K), x && x(m);
+  }, [K, x]);
   g(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
     l.current.unlisten("MDCDialog: opening", D);
   }), [l, D]), g(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
@@ -863,27 +863,27 @@ const Ht = {
       elevation: t?.props.elevation !== "default" ? t?.props.elevation : "flat",
       variant: t?.props.variant || "filled"
     };
-    return E === "action" && (m["data-mdc-dialog-button-default"] = !0), y === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [t?.props.elevation, t?.props.variant, E, y]), mt = Y(() => () => {
+    return _ === "action" && (m["data-mdc-dialog-button-default"] = !0), y === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, _, y]), mt = Y(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       "data-mdc-dialog-action": X ? "" : "accept",
       elevation: c?.props.elevation !== "default" ? c?.props.elevation : "flat",
       variant: c?.props.variant || "filled"
     };
-    return E === "primary" && (m["data-mdc-dialog-button-default"] = !0), y === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [X, E, y, c?.props.elevation, c?.props.variant]);
+    return _ === "primary" && (m["data-mdc-dialog-button-default"] = !0), y === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, _, y, c?.props.elevation, c?.props.variant]);
   return /* @__PURE__ */ d.createElement("aside", ht({
     ref: N,
     className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", p),
     role: "alertdialog"
   }, lt), /* @__PURE__ */ d.createElement("div", {
-    className: B("lmnt-modal__container", "mdc-dialog__container", h === "fullscreen" && "mdc-dialog--fullscreen", h === "max" && "lmnt-modal__max", h === "xlarge" && "lmnt-modal__xl", h === "large" && "lmnt-modal__lg", h === "medium" && "lmnt-modal__md", h === "small" && "lmnt-modal__sm", (h === "mobile" || K) && "lmnt-modal__mobile", h === "dialog" && "lmnt-modal__dialog", T && "lmnt-modal-no-actions")
+    className: B("lmnt-modal__container", "mdc-dialog__container", h === "fullscreen" && "mdc-dialog--fullscreen", h === "max" && "lmnt-modal__max", h === "xlarge" && "lmnt-modal__xl", h === "large" && "lmnt-modal__lg", h === "medium" && "lmnt-modal__md", h === "small" && "lmnt-modal__sm", (h === "mobile" || W) && "lmnt-modal__mobile", h === "dialog" && "lmnt-modal__dialog", T && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ d.createElement("header", {
-    className: B("lmnt-modal__title", "mdc-dialog__title", (h === "dialog" || k) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (k || h === "dialog" || T) && "lmnt-modal--no-close-icon")
-  }, !k && h !== "dialog" && !T && /* @__PURE__ */ d.createElement(it, {
+    className: B("lmnt-modal__title", "mdc-dialog__title", (h === "dialog" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || h === "dialog" || T) && "lmnt-modal--no-close-icon")
+  }, !H && h !== "dialog" && !T && /* @__PURE__ */ d.createElement(it, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear"
@@ -897,19 +897,19 @@ const Ht = {
   }, o)), (v || f) && /* @__PURE__ */ d.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
   }, v || f), st, (t || a || C || O || c || b) && /* @__PURE__ */ d.createElement("footer", {
-    className: B("lmnt-modal__actions", "mdc-dialog__actions", K && "lmnt-dialog__actions__mobile", b && "lmnt-modal__actions--supplemental-btn", K && H && "lmnt-modal_actions-mobile-stacked")
-  }, !W && b && /* @__PURE__ */ d.createElement("div", {
+    className: B("lmnt-modal__actions", "mdc-dialog__actions", W && "lmnt-dialog__actions__mobile", b && "lmnt-modal__actions--supplemental-btn", W && P && "lmnt-modal_actions-mobile-stacked")
+  }, !V && b && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
   }, A(b, () => {
     const m = {};
-    return E === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), y === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  })), !W && (t || C || c) && /* @__PURE__ */ d.createElement("div", {
+    return _ === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), y === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !V && (t || C || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
   }, C && A(C, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), t && !c && A(t, ut), c && A(c, mt)), W && /* @__PURE__ */ d.createElement("div", {
+  }), t && !c && A(t, ut), c && A(c, mt)), V && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
   }, /* @__PURE__ */ d.createElement("div", null, Ct(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, A(O, {
     className: "lmnt-modal__button",
@@ -918,14 +918,15 @@ const Ht = {
     className: "mdc-dialog__scrim"
   }));
 });
-M.displayName = "Modal";
-M.propTypes = Ht;
-M.defaultProps = Pt;
-const Ut = "_modal_18rd0_1", xt = "_title_18rd0_6", Gt = "_titleWithoutCloseIcon_18rd0_18", $ = {
+k.displayName = "Modal";
+k.propTypes = Ht;
+k.defaultProps = Pt;
+const Ut = "_modal_fr8bw_1", xt = "_title_fr8bw_6", Gt = "_titleWithoutCloseIcon_fr8bw_18", Kt = "_closeButton_fr8bw_22", w = {
   modal: Ut,
   title: xt,
-  titleWithoutCloseIcon: Gt
-}, ee = ({
+  titleWithoutCloseIcon: Gt,
+  closeButton: Kt
+}, ne = ({
   onClose: i,
   title: e,
   headerActions: t,
@@ -934,32 +935,32 @@ const Ut = "_modal_18rd0_1", xt = "_title_18rd0_6", Gt = "_titleWithoutCloseIcon
   ...a
 }) => {
   const f = Y(() => {
-    const p = /* @__PURE__ */ ft(V, { primaryAlign: "center", secondaryAlign: "center", children: [
-      !n && /* @__PURE__ */ _(it, { icon: "close", onClick: () => i?.(), type: "button" }),
-      o ? /* @__PURE__ */ _(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ _(Nt, { icon: o }) }) : /* @__PURE__ */ _(pt, {}),
-      /* @__PURE__ */ _(
+    const p = /* @__PURE__ */ ft(z, { primaryAlign: "center", secondaryAlign: "center", children: [
+      !n && /* @__PURE__ */ E(it, { icon: "close", onClick: () => i?.(), type: "button", className: w.closeButton }),
+      o ? /* @__PURE__ */ E(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ E(Nt, { icon: o }) }) : /* @__PURE__ */ E(pt, {}),
+      /* @__PURE__ */ E(
         It,
         {
           level: 6,
-          className: n && !o ? $.titleWithoutCloseIcon : "",
+          className: n && !o ? w.titleWithoutCloseIcon : "",
           children: e
         }
       )
     ] }, "base-group");
-    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ _(V, { children: t }, "action-group")] : [p, t] : p;
+    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ E(z, { children: t }, "action-group")] : [p, t] : p;
   }, [t, n, o, i, e]);
-  return /* @__PURE__ */ _(
-    M,
+  return /* @__PURE__ */ E(
+    k,
     {
       ...a,
       "data-testid": "modal",
-      className: `${$.modal} ${$.title} ${a.className ?? ""}`,
+      className: `${w.modal} ${w.title} ${a.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ _(V, { primaryAlign: "space-between", secondaryAlign: "center", children: f }, "header-group"),
+      headerActions: /* @__PURE__ */ E(z, { primaryAlign: "space-between", secondaryAlign: "center", children: f }, "header-group"),
       preventClose: !0
     }
   );
 };
 export {
-  ee as Modal
+  ne as Modal
 };

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { P as r } from "../../index.es-D-CKRzIB.js";
-import "react";
 import "../../isEmpty-B4GG2s-V.js";
+import "react";
 import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";

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

@@ -8,9 +8,10 @@ import { StepperProps } from './stepperTypes';
  * @param steps - An array of steps for the stepper.
  * @param currentStep - The current step index.
  * @param children - The content to be displayed in the stepper.
- * @param nextButtonProps - Props for the next button, including onClick, label, and disabled state.
- * @param prevButtonProps - Props for the previous button, including onClick, label, and disabled state.
  * @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 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.
  * @returns
  */
-export declare const Stepper: ({ steps, currentStep, children, isStepLoading, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ steps, currentStep, children, isStepLoading, showStepperHeader, stepperButtonAlignment, showPreviousButtonOnFirstStep, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -1,16 +1,19 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { G as o } from "../../index.es-DntoATwO.js";
-import { useMemo as s } from "react";
-import { StepperPreviousButton as l, StepperNextButton as d } from "./components/StepperButton.js";
-import { StepperHeader as m } from "./components/StepperHeader.js";
-import { s as c } from "../../stepper.module-HuqmDJPj.js";
-const A = ({
+import { useMemo as m } from "react";
+import { StepperPreviousButton as c, StepperNextButton as u } from "./components/StepperButton.js";
+import { StepperHeader as f } from "./components/StepperHeader.js";
+import { s as g } from "../../stepper.module-HuqmDJPj.js";
+const P = ({
   steps: e,
   currentStep: t,
   children: n,
-  isStepLoading: a
+  isStepLoading: a,
+  showStepperHeader: p = !0,
+  stepperButtonAlignment: l = "center",
+  showPreviousButtonOnFirstStep: s = !1
 }) => {
-  const p = s(() => t === e.length - 1, [t, e.length]);
+  const d = m(() => t === e.length - 1, [t, e.length]);
   return /* @__PURE__ */ i(
     o,
     {
@@ -21,34 +24,43 @@ const A = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        /* @__PURE__ */ r(m, { steps: e, currentStep: t }),
+        p ? /* @__PURE__ */ r(f, { steps: e, currentStep: t }) : null,
         /* @__PURE__ */ r(
           o,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: c.stepperContent,
+            className: g.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
             children: n
           }
         ),
-        /* @__PURE__ */ i(o, { "data-testid": "stepper-buttons", fullWidth: !0, secondaryAlign: "center", primaryAlign: "center", children: [
-          t !== 0 && /* @__PURE__ */ r(l, { ...e[t].prevButtonProps }),
-          /* @__PURE__ */ r(
-            d,
-            {
-              ...e[t].nextButtonProps,
-              isStepLoading: a,
-              isLastStep: p
-            }
-          )
-        ] })
+        /* @__PURE__ */ i(
+          o,
+          {
+            "data-testid": "stepper-buttons",
+            fullWidth: !0,
+            secondaryAlign: "center",
+            primaryAlign: l,
+            children: [
+              (t !== 0 || s) && /* @__PURE__ */ r(c, { ...e[t].prevButtonProps }),
+              /* @__PURE__ */ r(
+                u,
+                {
+                  ...e[t].nextButtonProps,
+                  isStepLoading: a,
+                  isLastStep: d
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 };
 export {
-  A as Stepper
+  P as Stepper
 };

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

@@ -1,95 +1,71 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a as r, s as n, f as c } from "../../react.esm-CX1WJ2Pp.js";
-import { Stepper as l } from "./Stepper.js";
-import { v as s, d as a, t as p, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-const i = [
+import { a as s, s as t, f as c } from "../../react.esm-CX1WJ2Pp.js";
+import { Stepper as i } from "./Stepper.js";
+import { v as l, d as a, t as p, g as n } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const o = [
   {
     name: "step1",
     step: 0,
     title: "Step 1",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     name: "step2",
     step: 1,
     title: "Step 2",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     name: "step3",
     step: 2,
     title: "Step 3",
     optional: !0,
-    nextButtonProps: { onClick: s.fn(), label: "Finish" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Finish" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   }
 ];
 a("Stepper", () => {
   p("renders the stepper header and children", () => {
-    r(
-      /* @__PURE__ */ e(l, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), o(n.queryByText("Step 1")).not.toBeInTheDocument(), o(n.getByText("Step 2")).toBeInTheDocument(), o(n.queryByText("Step 3")).not.toBeInTheDocument(), o(n.getByText("Step Content")).toBeInTheDocument();
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("Step 1")).not.toBeInTheDocument(), n(t.getByText("Step 2")).toBeInTheDocument(), n(t.queryByText("Step 3")).not.toBeInTheDocument(), n(t.getByText("Step Content")).toBeInTheDocument();
   }), p("disables the next button when isStepLoading is true", () => {
-    r(
-      /* @__PURE__ */ e(l, { steps: i, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
-    const t = n.getByText("Next").closest("button");
-    o(t).toBeDisabled();
+    const r = t.getByText("Next").closest("button");
+    n(r).toBeDisabled();
   }), p("calls nextButtonProps.onClick when next button is clicked", () => {
-    const t = s.fn();
-    i[1].nextButtonProps.onClick = t, r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 1,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), c.click(n.getByText("Next")), o(t).toHaveBeenCalled();
+    const r = l.fn();
+    o[1].nextButtonProps.onClick = r, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), c.click(t.getByText("Next")), n(r).toHaveBeenCalled();
   }), p("calls prevButtonProps.onClick when prev button is clicked", () => {
-    const t = s.fn();
-    i[1].prevButtonProps.onClick = t, r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 1,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), c.click(n.getByText("Back")), o(t).toHaveBeenCalled();
+    const r = l.fn();
+    o[1].prevButtonProps.onClick = r, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), c.click(t.getByText("Back")), n(r).toHaveBeenCalled();
   }), p("does not render the prev button on the first step", () => {
-    r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 0,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), o(n.queryByText("Back")).not.toBeInTheDocument();
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 0, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("Back")).not.toBeInTheDocument();
   }), p("renders the next button as submit on last step", () => {
-    r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 2,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 2, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
-    const t = n.getByText("Finish").closest("button");
-    o(t).toHaveAttribute("type", "submit");
+    const r = t.getByText("Finish").closest("button");
+    n(r).toHaveAttribute("type", "submit");
+  }), p("does not render the stepper header when showStepperHeader is false", () => {
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, showStepperHeader: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByTestId("stepper-header")).not.toBeInTheDocument();
+  }), p("does not render stepper button icons when showArrowIcon is false", () => {
+    o[1].nextButtonProps.showArrowIcon = !1, o[1].prevButtonProps.showArrowIcon = !1, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("arrow_forward")).not.toBeInTheDocument(), n(t.queryByText("arrow_back")).not.toBeInTheDocument();
   });
 });

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

@@ -6,9 +6,12 @@ import { StepperButtonProps } from '../stepperTypes';
  * @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.
+ * @param showArrowIcon - Whether to show a leading arrow icon for the button. Defaults to true.
+ * @param buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @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, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperPreviousButton: ({ label, onClick, disabled, className, showArrowIcon, 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.
@@ -17,9 +20,12 @@ export declare const StepperPreviousButton: ({ label, onClick, disabled, classNa
  * @param className - Additional class names to apply to the button.
  * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will show a loading state and be disabled.
  * @param isLastStep - A boolean indicating if this is the last step. If true, the button will submit the form instead of going to the next step.
+ * @param showArrowIcon - Whether to show a trailing arrow icon for the button. Defaults to true.
+ * @param buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @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, }: StepperButtonProps & {
+export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, buttonSize, fullWidth, }: StepperButtonProps & {
     isStepLoading?: boolean;
     isLastStep?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -40,8 +40,11 @@ export type Step = {
  * @param {boolean} disabled - Whether the button is disabled or not.
  * @param {() => void} onClick - The function to be called when the button is clicked.
  * @param {string | ReactNode} label - The label of the button.
+ * @param {boolean} showArrowIcon - Whether to show a leading/trailing arrow icon for the button.
+ * @param {string} buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @param {boolean} fullWidth - Whether the button should take the full width of its container. *
  */
-export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled'> & {
+export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'fullWidth'> & {
     /**
      * The function to be called when the button is clicked.
      */
@@ -50,11 +53,22 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled'> & {
      * The label of the button.
      */
     label: string | ReactNode;
+    /**
+     * Whether to show a leading/trailing arrow icon for the button.
+     */
+    showArrowIcon?: boolean;
+    /**
+     * Property adapted from Element library
+     */
+    buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
  * @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.
+ * @param {boolean} showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
+ * @param {string} stepperButtonAlignment - The alignment of the stepper button group. Defaults to 'center'.
+ * @param {boolean} showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper.
  */
 export type StepperProps = {
     /**
@@ -69,6 +83,22 @@ export type StepperProps = {
      * a flag which indicates if the current step is loading.
      */
     isStepLoading?: boolean;
+    /**
+     * An indicator of whether to show the stepper header.
+     * @default true
+     */
+    showStepperHeader?: boolean;
+    /**
+     * The alignment of the stepper button group.
+     * @default 'center'
+     */
+    stepperButtonAlignment?: '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.
+     * @default false
+     */
+    showPreviousButtonOnFirstStep?: boolean;
 };
 /**
  * @param {Step[]} steps - An array of steps for the stepper.

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 export { AlertBanner } from './components/AlertBanner/AlertBanner';
+export { LinkBanner } from './components/AlertBanner/LinkBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';
@@ -20,6 +21,7 @@ export { ListArea } from './components/ListArea/ListArea';
 export { LoadingSpinner } from './components/LoadingSpinner/Default/LoadingSpinner';
 export { Modal } from './components/Modal/Modal';
 export { ModulePadding } from './components/ModulePadding/ModulePadding';
+export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { OverflowTooltip } from './components/OverflowTooltip/OverflowTooltip';
 export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';
 export { SearchBar } from './components/SearchBar/SearchBar';
@@ -28,7 +30,6 @@ export { StepperHeader } from './components/Stepper/components/StepperHeader';
 export { StepperIndicator } from './components/Stepper/components/StepperIndicator';
 export { Stepper } from './components/Stepper/Stepper';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
-export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';
 export { FormDatePicker } from './components/FormComponents/FormDatePicker/FormDatePicker';
 export { FormNumber } from './components/FormComponents/FormNumber/FormNumber';
@@ -40,17 +41,17 @@ export { FormToggle } from './components/FormComponents/FormToggle/FormToggle';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
+export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces } from './services/UtilService';
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
 export type { HealthCheckFailedProps } from './components/HealthCheckFailed/HealthCheckFailed';
 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 type { Step, StepperBaseProps, StepperButtonProps, StepperProps } from './components/Stepper/stepperTypes';
 export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
-export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID, } from './types/Languages';
+export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID } from './types/Languages';
 export type { AVAILABLE_LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';

package/dist/main.js

@@ -1,100 +1,102 @@
-import { AlertBanner as e } from "./components/AlertBanner/AlertBanner.js";
-import { BaseView as m } from "./components/BaseView/BaseView.js";
-import { BasicHeading as f } from "./components/BasicHeading/BasicHeading.js";
-import { BlockView as a } from "./components/BlockView/BlockView.js";
-import { ChipCard as l } from "./components/ChipCard/ChipCard.js";
-import { ContextMenu as n } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as d } from "./components/DeleteModal/DeleteModal.js";
-import { DetailContentWrapper as L } from "./components/DetailContentWrapper/DetailContentWrapper.js";
-import { Disclaimer as G } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as _ } from "./components/EmptyView/EmptyView.js";
-import { Filter as F } from "./components/Filter/Filter.js";
-import { FormattedNumberDisplay as D } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
-import { GenericTable as g } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as b } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as T } from "./components/HeaderFilter/HeaderFilter.js";
-import { HealthCheckFailed as U } from "./components/HealthCheckFailed/HealthCheckFailed.js";
-import { Iconify as M } from "./components/Iconify/Iconify.js";
-import { InfoGroup as V } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as k } from "./components/ListArea/ListArea.js";
-import { LoadingSpinner as O } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
-import { Modal as y } from "./components/Modal/Modal.js";
-import { ModulePadding as K } from "./components/ModulePadding/ModulePadding.js";
-import { OverflowTooltip as W } from "./components/OverflowTooltip/OverflowTooltip.js";
-import { ScrollbarX as j, ScrollbarY as q } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as Q } from "./components/SearchBar/SearchBar.js";
-import { Select as $ } from "./components/Select/Select.js";
-import { StepperHeader as or } from "./components/Stepper/components/StepperHeader.js";
-import { StepperIndicator as tr } from "./components/Stepper/components/StepperIndicator.js";
-import { Stepper as pr } from "./components/Stepper/Stepper.js";
-import { VerticalDivider as xr } from "./components/VerticalDivider/VerticalDivider.js";
-import { OnboardingBanner as ir } from "./components/OnboardingBanner/OnboardingBanner.js";
-import { FormCheckBox as Ar } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as cr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as Sr } from "./components/FormComponents/FormNumber/FormNumber.js";
-import { FormRadio as Er } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as sr } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as Ir } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as Nr } from "./components/FormComponents/FormText/FormText.js";
-import { FormToggle as Cr } from "./components/FormComponents/FormToggle/FormToggle.js";
-import { AvailableCustomIcons as Br } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as ur } from "./enums/ThemeColor.js";
-import { u as Hr } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as hr, getNumberAsLocaleString as Mr, trimLeadingAndTrailingSpaces as Pr } from "./services/UtilService.js";
-import { AVAILABLE_COUNTRY_KEYS as Rr, AVAILABLE_LOCALES as kr, ENGLISH_LANGUAGE_ID as wr, GERMAN_LANGUAGE_ID as Or, LANGUAGE_CODES_MAPPER as vr, LANGUAGE_ID_MAPPER as yr, SPANISH_LANGUAGE_ID as Yr, TURKISH_LANGUAGE_ID as Kr } from "./types/Languages.js";
+import { A as e } from "./AlertBanner-75jjene1.js";
+import { LinkBanner as m } from "./components/AlertBanner/LinkBanner.js";
+import { BaseView as f } from "./components/BaseView/BaseView.js";
+import { BasicHeading as a } from "./components/BasicHeading/BasicHeading.js";
+import { BlockView as l } from "./components/BlockView/BlockView.js";
+import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
+import { ContextMenu as d } from "./components/ContextMenu/ContextMenu.js";
+import { DeleteModal as S } from "./components/DeleteModal/DeleteModal.js";
+import { DetailContentWrapper as E } from "./components/DetailContentWrapper/DetailContentWrapper.js";
+import { Disclaimer as _ } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as F } from "./components/EmptyView/EmptyView.js";
+import { Filter as D } from "./components/Filter/Filter.js";
+import { FormattedNumberDisplay as C } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
+import { GenericTable as b } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as T } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as U } from "./components/HeaderFilter/HeaderFilter.js";
+import { HealthCheckFailed as M } from "./components/HealthCheckFailed/HealthCheckFailed.js";
+import { Iconify as V } from "./components/Iconify/Iconify.js";
+import { InfoGroup as R } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as O } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as y } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { Modal as K } from "./components/Modal/Modal.js";
+import { ModulePadding as W } from "./components/ModulePadding/ModulePadding.js";
+import { OnboardingBanner as j } from "./components/OnboardingBanner/OnboardingBanner.js";
+import { OverflowTooltip as J } from "./components/OverflowTooltip/OverflowTooltip.js";
+import { ScrollbarX as Z, ScrollbarY as $ } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as or } from "./components/SearchBar/SearchBar.js";
+import { Select as tr } from "./components/Select/Select.js";
+import { StepperHeader as pr } from "./components/Stepper/components/StepperHeader.js";
+import { StepperIndicator as xr } from "./components/Stepper/components/StepperIndicator.js";
+import { Stepper as ir } from "./components/Stepper/Stepper.js";
+import { VerticalDivider as Ar } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as cr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as Lr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as sr } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormRadio as Gr } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as Ir } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as Nr } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as Br } from "./components/FormComponents/FormText/FormText.js";
+import { FormToggle as gr } from "./components/FormComponents/FormToggle/FormToggle.js";
+import { AvailableCustomIcons as ur } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as Hr } from "./enums/ThemeColor.js";
+import { u as hr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as Pr, getNumberAsLocaleString as Vr, trimLeadingAndTrailingSpaces as kr } from "./services/UtilService.js";
+import { AVAILABLE_COUNTRY_KEYS as wr, AVAILABLE_LOCALES as Or, ENGLISH_LANGUAGE_ID as vr, GERMAN_LANGUAGE_ID as yr, LANGUAGE_CODES_MAPPER as Yr, LANGUAGE_ID_MAPPER as Kr, SPANISH_LANGUAGE_ID as zr, TURKISH_LANGUAGE_ID as Wr } from "./types/Languages.js";
 export {
-  Rr as AVAILABLE_COUNTRY_KEYS,
-  kr as AVAILABLE_LOCALES,
+  wr as AVAILABLE_COUNTRY_KEYS,
+  Or as AVAILABLE_LOCALES,
   e as AlertBanner,
-  Br as AvailableCustomIcons,
-  m as BaseView,
-  f as BasicHeading,
-  a as BlockView,
-  l as ChipCard,
-  n as ContextMenu,
-  d as DeleteModal,
-  L as DetailContentWrapper,
-  G as Disclaimer,
-  wr as ENGLISH_LANGUAGE_ID,
-  _ as EmptyView,
-  F as Filter,
-  Ar as FormCheckBox,
-  cr as FormDatePicker,
-  Sr as FormNumber,
-  Er as FormRadio,
-  sr as FormSelect,
-  Ir as FormSlider,
-  Nr as FormText,
-  Cr as FormToggle,
-  D as FormattedNumberDisplay,
-  Or as GERMAN_LANGUAGE_ID,
-  g as GenericTable,
-  b as HashTabView,
-  T as HeaderFilter,
-  U as HealthCheckFailed,
-  M as Iconify,
-  V as InfoGroup,
-  vr as LANGUAGE_CODES_MAPPER,
-  yr as LANGUAGE_ID_MAPPER,
-  k as ListArea,
-  O as LoadingSpinner,
-  y as Modal,
-  K as ModulePadding,
-  ir as OnboardingBanner,
-  W as OverflowTooltip,
-  Yr as SPANISH_LANGUAGE_ID,
-  j as ScrollbarX,
-  q as ScrollbarY,
-  Q as SearchBar,
-  $ as Select,
-  pr as Stepper,
-  or as StepperHeader,
-  tr as StepperIndicator,
-  Kr as TURKISH_LANGUAGE_ID,
-  ur as ThemeColor,
-  xr as VerticalDivider,
-  hr as capitalizeFirstLetters,
-  Mr as getNumberAsLocaleString,
-  Pr as trimLeadingAndTrailingSpaces,
-  Hr as useBreakpoints
+  ur as AvailableCustomIcons,
+  f as BaseView,
+  a as BasicHeading,
+  l as BlockView,
+  n as ChipCard,
+  d as ContextMenu,
+  S as DeleteModal,
+  E as DetailContentWrapper,
+  _ as Disclaimer,
+  vr as ENGLISH_LANGUAGE_ID,
+  F as EmptyView,
+  D as Filter,
+  cr as FormCheckBox,
+  Lr as FormDatePicker,
+  sr as FormNumber,
+  Gr as FormRadio,
+  Ir as FormSelect,
+  Nr as FormSlider,
+  Br as FormText,
+  gr as FormToggle,
+  C as FormattedNumberDisplay,
+  yr as GERMAN_LANGUAGE_ID,
+  b as GenericTable,
+  T as HashTabView,
+  U as HeaderFilter,
+  M as HealthCheckFailed,
+  V as Iconify,
+  R as InfoGroup,
+  Yr as LANGUAGE_CODES_MAPPER,
+  Kr as LANGUAGE_ID_MAPPER,
+  m as LinkBanner,
+  O as ListArea,
+  y as LoadingSpinner,
+  K as Modal,
+  W as ModulePadding,
+  j as OnboardingBanner,
+  J as OverflowTooltip,
+  zr as SPANISH_LANGUAGE_ID,
+  Z as ScrollbarX,
+  $ as ScrollbarY,
+  or as SearchBar,
+  tr as Select,
+  ir as Stepper,
+  pr as StepperHeader,
+  xr as StepperIndicator,
+  Wr as TURKISH_LANGUAGE_ID,
+  Hr as ThemeColor,
+  Ar as VerticalDivider,
+  Pr as capitalizeFirstLetters,
+  Vr as getNumberAsLocaleString,
+  kr as trimLeadingAndTrailingSpaces,
+  hr as useBreakpoints
 };

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