@hortiview/shared-components 2.1.0 → 2.3.0

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/OnboardingBanner/OnboardingBanner.test.js

@@ -1,12 +1,12 @@
-import { jsx as n, Fragment as a } from "react/jsx-runtime";
+import { jsx as n, Fragment as d } from "react/jsx-runtime";
 import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
-import { OnboardingBanner as s } from "./OnboardingBanner.js";
-import { d, t as i, a as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-d("Onboarding Banner Test", () => {
-  i("render OnboardingBanner with headline & description text", () => {
+import { OnboardingBanner as i } from "./OnboardingBanner.js";
+import { d as a, t as s, a as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+a("Onboarding Banner Test", () => {
+  s("render OnboardingBanner with headline & description text", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
@@ -15,56 +15,56 @@ d("Onboarding Banner Test", () => {
         }
       )
     ), t(e.getByText("test")).toBeInTheDocument(), t(e.getByText("test description")).toBeInTheDocument();
-  }), i("render OnboardingBanner with media content", () => {
+  }), s("render OnboardingBanner with media content", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
-          mediaContent: /* @__PURE__ */ n(a, { children: "Element" }),
+          mediaContent: /* @__PURE__ */ n(d, { children: "Element" }),
           isVisible: !0,
           onClose: r.fn()
         }
       )
     ), t(e.getByText("Element")).toBeInTheDocument();
-  }), i("render OnboardingBanner with buttons", () => {
+  }), s("render OnboardingBanner with buttons", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !0,
           onClose: r.fn(),
-          buttons: [{ label: "button-1" }, { label: "button-2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), t(e.getByText("button-1")).toBeInTheDocument(), t(e.getByText("button-2")).toBeInTheDocument(), t(e.queryByText("button-3")).not.toBeInTheDocument();
-  }), i("calls onClose when close button is clicked", () => {
+  }), s("calls onClose when close button is clicked", () => {
     const l = r.fn();
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !0,
           onClose: l,
-          buttons: [{ label: "button-1" }, { label: "button2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), e.getByTestId("onboarding-banner-close-button").click(), t(l).toHaveBeenCalledTimes(1);
-  }), i("renders nothing when isVisibility is false", () => {
+  }), s("renders nothing when isVisibility is false", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !1,
           onClose: r.fn(),
-          buttons: [{ label: "button-1" }, { label: "button-2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), t(e.queryByText("test")).not.toBeInTheDocument();

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
 };