@hortiview/shared-components 1.10.0 → 1.11.0

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as o } from "../../../react.esm-CX1WJ2Pp.js";
-import { G as i } from "../../../GenericCard-CelFEWlW.js";
-import { d as m, t as s, g as e } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
+import { G as i } from "../../../GenericCard-DuNnB9Ve.js";
+import { d as m, t as s, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCard", () => {
   const d = {
     id: 1,

package/dist/components/GenericTable/Mobile/GenericCardList.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { G as c } from "../../../index.es-DntoATwO.js";
 import { P as l } from "../../../index.es-D-CKRzIB.js";
-import { a as o } from "../../../index.es-CF_xy2ns.js";
-import { s as i, G as m } from "../../../GenericCard-CelFEWlW.js";
+import { a as o } from "../../../index.es-D54RuMc_.js";
+import { s as i, G as m } from "../../../GenericCard-DuNnB9Ve.js";
 const u = ({
   columns: n,
   data: e,

package/dist/components/GenericTable/Mobile/GenericCardList.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as r, s as o, w as l } from "../../../react.esm-CX1WJ2Pp.js";
 import { GenericCardList as s } from "./GenericCardList.js";
-import { d as m, t as i, g as e } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as m, t as i, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCardList", () => {
   const d = [
     { id: "name", header: "Name", accessor: "name", asCardTitle: !0 },

package/dist/components/HashTabView/HashTabView.test.js

@@ -1,7 +1,7 @@
 import { jsx as n, Fragment as o } from "react/jsx-runtime";
 import { a, s as e, f as r } from "../../react.esm-CX1WJ2Pp.js";
 import { HashTabView as c } from "./HashTabView.js";
-import { d as h, t as l, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as h, t as l, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 const m = [
   {
     title: "Map",

package/dist/components/HeaderFilter/HeaderFilter.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { b as n } from "../../index.es-CF_xy2ns.js";
+import { T as n } from "../../index.es-D54RuMc_.js";
 import { BasicHeading as s } from "../BasicHeading/BasicHeading.js";
 import { Select as c } from "../Select/Select.js";
 import '../../assets/HeaderFilter.css';const d = "_filterSelect_923nc_1", m = {

package/dist/components/HeaderFilter/HeaderFilter.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as i, s as t, f as T } from "../../react.esm-CX1WJ2Pp.js";
 import { HeaderFilter as s } from "./HeaderFilter.js";
-import { d as c, t as o, v as l, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as c, t as o, a as l, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 c("HeaderFilter-Test", () => {
   o("render header filter", () => {
     i(

package/dist/components/HealthCheckFailed/HealthCheckFailed.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { C as c, a as d, b as l } from "../../index.es-6TJ1S8Jr.js";
 import { G as h } from "../../index.es-DntoATwO.js";
 import { P as m } from "../../index.es-D-CKRzIB.js";
-import { b as o } from "../../index.es-CF_xy2ns.js";
+import { T as o } from "../../index.es-D54RuMc_.js";
 import { Iconify as _ } from "../Iconify/Iconify.js";
 import '../../assets/HealthCheckFailed.css';const p = "_database_11ki8_1", f = "_spin_11ki8_1", u = "_iot_11ki8_16", k = "_platform_11ki8_17", g = "_other_11ki8_18", C = "_crossedOut_11ki8_22", a = {
   database: p,

package/dist/components/HealthCheckFailed/HealthCheckFailed.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { a as s, s as e } from "../../react.esm-CX1WJ2Pp.js";
 import { HealthCheckFailed as r } from "./HealthCheckFailed.js";
-import { d as h, t as i, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as h, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("HealthCheckFailed Component", () => {
   const c = "Test Title", n = "Test Subtitle";
   i("displays the correct title and subtitle", () => {

package/dist/components/Iconify/Iconify.test.js

@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
 import { Iconify as c } from "./Iconify.js";
 import { AvailableCustomIcons as l } from "../../enums/AvailableCustomIcons.js";
 import { a as r, w as s, s as i } from "../../react.esm-CX1WJ2Pp.js";
-import { d as f, t as a, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as f, t as a, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 f("Iconify Test", async () => {
   const m = Object.keys(l).filter((e) => isNaN(Number(e)));
   a.each(m)("render available custom icon (%s)", async (e) => {

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,7 +1,7 @@
 import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
 import { D as h } from "../../index.es-BWgXLqXn.js";
 import { G as s } from "../../index.es-DntoATwO.js";
-import { a as g, d as f } from "../../index.es-CF_xy2ns.js";
+import { a as g, d as f } from "../../index.es-D54RuMc_.js";
 import { useMemo as _, Fragment as D } from "react";
 import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import '../../assets/InfoGroup.css';const C = "_dividerContainer_4c1hq_1", y = "_centerDefaultComponent_4c1hq_10", A = "_verticalDivider_4c1hq_14", G = "_mainGroup_4c1hq_22", x = "_textAlignRight_4c1hq_28", l = {

package/dist/components/InfoGroup/InfoGroup.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { a as l, s as t } from "../../react.esm-CX1WJ2Pp.js";
 import { InfoGroup as r } from "./InfoGroup.js";
-import { d as s, t as i, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as s, t as i, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 s("InfoGroup Test", () => {
   i("render Single InfoGroup", () => {
     l(/* @__PURE__ */ o(r, { fields: m }));

package/dist/components/ListArea/ListArea.js

@@ -1,11 +1,11 @@
 import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import { D as u } from "../../index.es-BWgXLqXn.js";
 import { E as y } from "../../index.es-h2lMdt7G.js";
-import { L as C } from "../../index.es-d5xhUpJZ.js";
+import { L as C } from "../../index.es-fnFnw2P1.js";
 import { o as p } from "../../orderBy-Bd48bw88.js";
 import { useState as b, useMemo as v } from "react";
 import { SearchBar as B } from "../SearchBar/SearchBar.js";
-import { g as D, a as j, s as t } from "../../ListAreaService-DOwtdRa4.js";
+import { g as D, a as j, s as t } from "../../ListAreaService-Wq9IkwWN.js";
 const q = ({
   elements: r,
   pathname: o,

package/dist/components/ListArea/ListArea.test.js

@@ -1,9 +1,9 @@
 import { jsx as r, Fragment as i } from "react/jsx-runtime";
-import { c as p } from "../../index.es-CF_xy2ns.js";
+import { c as p } from "../../index.es-D54RuMc_.js";
 import { a as s, s as a, f as u } from "../../react.esm-CX1WJ2Pp.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-DOwtdRa4.js";
-import { d as m, t as n, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { g as h } from "../../ListAreaService-Wq9IkwWN.js";
+import { d as m, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 m("ListArea Test", () => {
   const o = [
     {

package/dist/components/ListArea/ListAreaService.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
 import "../../index.es-DntoATwO.js";
 import "../../index.es-3043KTnb.js";
-import "../../index.es-CF_xy2ns.js";
+import "../../index.es-D54RuMc_.js";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as a, a as g, m as d } from "../../ListAreaService-DOwtdRa4.js";
+import { g as a, a as g, m as d } from "../../ListAreaService-Wq9IkwWN.js";
 export {
   a as getGroupedItems,
   g as getListedItems,

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
-import "../../../index.es-CF_xy2ns.js";
+import "../../../index.es-D54RuMc_.js";
 import "../../Iconify/Iconify.js";
-import { B as t } from "../../../BigLoadingSpinner-CqSGYzZA.js";
+import { B as t } from "../../../BigLoadingSpinner-BbXMCKpm.js";
 export {
   t as BigLoadingSpinner
 };

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { s as r, B as n } from "../../../BigLoadingSpinner-CqSGYzZA.js";
+import { s as r, B as n } from "../../../BigLoadingSpinner-BbXMCKpm.js";
 import { a as i, s as e } from "../../../react.esm-CX1WJ2Pp.js";
-import { d as g, t as a, g as t } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as g, t as a, g as t } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 g("BigLoadingSpinner Test", () => {
   a("render BigLoadingSpinner with custom loading text", () => {
     i(/* @__PURE__ */ o(n, { text: "Please wait..." })), t(e.getByText("Please wait...")).toBeInTheDocument(), t(e.getByRole("progressbar")).toBeInTheDocument();

package/dist/components/LoadingSpinner/Default/LoadingSpinner.js

@@ -2,12 +2,12 @@ import { jsx as y, jsxs as B } from "react/jsx-runtime";
 import { _ as M, c as P, P as c } from "../../../identity-DLWZln-X.js";
 import t, { forwardRef as z, useRef as W, useImperativeHandle as F, useEffect as k, useCallback as $, useState as j, useMemo as H } from "react";
 import { h as U, d as V } from "../../../index.es-da0cf7oE.js";
-import { b as R, c as I } from "../../../tslib.es6-BDCynO9F.js";
+import { b as T, c as I } from "../../../tslib.es6-BDCynO9F.js";
 import { M as G, a as K } from "../../../component-neHBNHRu.js";
 import { G as q } from "../../../index.es-DntoATwO.js";
 import { P as J } from "../../../index.es-D-CKRzIB.js";
-import { b as Q } from "../../../index.es-CF_xy2ns.js";
-import { B as X } from "../../../BigLoadingSpinner-CqSGYzZA.js";
+import { T as Q } from "../../../index.es-D54RuMc_.js";
+import { B as X } from "../../../BigLoadingSpinner-BbXMCKpm.js";
 import '../../../assets/LoadingSpinner.css';/**
  * @license
  * Copyright 2020 Google Inc.
@@ -65,7 +65,7 @@ var m = {
 var L = (
   /** @class */
   function(a) {
-    R(e, a);
+    T(e, a);
     function e(r) {
       return a.call(this, I(I({}, e.defaultAdapter), r)) || this;
     }
@@ -151,7 +151,7 @@ var L = (
 var Y = (
   /** @class */
   function(a) {
-    R(e, a);
+    T(e, a);
     function e() {
       return a !== null && a.apply(this, arguments) || this;
     }
@@ -299,7 +299,7 @@ const Z = {
   }), []), k(() => {
     (p === "determinate" && i < 0 || i > 1) && U("CircularProgress: `progress` must be between 0 and 1."), h.current.determinate = p === "determinate", h.current.progress = i;
   }, [i, p]);
-  const T = () => {
+  const R = () => {
     switch (v) {
       case "xs":
         return {
@@ -384,7 +384,7 @@ const Z = {
     strokeDashArray: _,
     strokeDashoffset: O,
     halfStrokeDashoffset: S
-  } = T(), b = $(() => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
+  } = R(), b = $(() => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left"
   }, /* @__PURE__ */ t.createElement("svg", {
     className: "mdc-circular-progress__indeterminate-circle-graphic",

package/dist/components/LoadingSpinner/Default/LoadingSpinner.test.js

@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
 import { a, s as e } from "../../../react.esm-CX1WJ2Pp.js";
 import { act as s } from "react";
 import { LoadingSpinner as i } from "./LoadingSpinner.js";
-import { d as m, b as d, t as o, g as t, a as r } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as m, b as d, t as o, g as t, v as r } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("LoadingSpinner Test", () => {
   d(() => {
     r.useFakeTimers();

package/dist/components/Modal/Modal.js

@@ -9,7 +9,7 @@ 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";
 import { A as bt } from "../../animationframe-EMBh6XeO.js";
 import { P as Dt } from "../../index.es-D-CKRzIB.js";
-import { T as It } from "../../index.es-CF_xy2ns.js";
+import { b as It } from "../../index.es-D54RuMc_.js";
 import { Iconify as Nt } from "../Iconify/Iconify.js";
 import '../../assets/Modal.css';/**
  * @license

package/dist/components/ModulePadding/ModulePadding.test.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
 import { a } from "../../useBreakpoints-MzTZ0tCT.js";
 import { ModulePadding as d } from "./ModulePadding.js";
-import { d as r, t as i, v as n, g as s } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as r, t as i, a as n, g as s } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 r("ModulePadding Test", () => {
   i("should render with padding of 16px for desktop", () => {
     n.spyOn(a, "useBreakpoints").mockReturnValue({

package/dist/components/OverflowTooltip/OverflowTooltip.js

@@ -1,5 +1,5 @@
 import { jsxs as c, Fragment as m, jsx as s } from "react/jsx-runtime";
-import { b as p } from "../../index.es-CF_xy2ns.js";
+import { T as p } from "../../index.es-D54RuMc_.js";
 import { useState as d, useMemo as h, cloneElement as f } from "react";
 import { M as w } from "../../react-tooltip.min-DSY6KDqS.js";
 import { hasChildWithGreaterWidth as W } from "./OverflowTooltipService.js";

package/dist/components/OverflowTooltip/OverflowTooltip.test.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { T as n } from "../../index.es-CF_xy2ns.js";
+import { b as n } from "../../index.es-D54RuMc_.js";
 import { a as i, s as e, w as s } from "../../react.esm-CX1WJ2Pp.js";
 import { u as a } from "../../index-I7uTh4Tr.js";
 import { OverflowTooltip as c } from "./OverflowTooltip.js";
-import { d as u, t as p, g as r } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as u, t as p, g as r } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 u("OverflowTooltip Test", () => {
   p("should render OverflowTooltip on hover", async () => {
     Object.defineProperty(HTMLElement.prototype, "clientWidth", {

package/dist/components/Scrollbar/scrollbar.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { a, s as e } from "../../react.esm-CX1WJ2Pp.js";
 import { ScrollbarY as d, ScrollbarX as l } from "./Scrollbar.js";
-import { d as c, t, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as c, t, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 c("Scrollbar", () => {
   t("should render Y correctly", () => {
     a(/* @__PURE__ */ s("div", { "data-testid": "div", className: d }));

package/dist/components/SearchBar/SearchBar.test.js

@@ -2,7 +2,7 @@ import { jsx as a } from "react/jsx-runtime";
 import { a as r, s as t, f as h } from "../../react.esm-CX1WJ2Pp.js";
 import { act as l } from "react";
 import { SearchBar as s } from "./SearchBar.js";
-import { d as m, t as o, v as n, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as m, t as o, a as n, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 m("SearchBar Test", () => {
   o("renders SearchBar component", () => {
     r(

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { S as f } from "../../index.es-UHKFl8Da.js";
+import { S as f } from "../../index.es-BNHI3ZIK.js";
 import { useEffect as n } from "react";
 import { u as S } from "../../uniqueId-NU3-C36A.js";
 import '../../assets/Select.css';const p = "_customPortal_8wq49_1", $ = "_customSelect_8wq49_7", r = {

package/dist/components/Select/Select.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { a, s as c } from "../../react.esm-CX1WJ2Pp.js";
 import { Select as n } from "./Select.js";
-import { d as l, t as m, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as l, t as m, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 l("Select", () => {
   const o = [
     { value: "1", text: "Option 1" },

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

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { StepperProps } from './stepperTypes';
+
+/**
+ * A component that displays a stepper with a header, content, and navigation buttons.
+ *
+ * !! Be aware that the stepper is not a controlled component, so you need to manage the current step, content and loading state yourself.
+ * @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.
+ * @returns
+ */
+export declare const Stepper: ({ steps, currentStep, children, isStepLoading, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,54 @@
+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 = ({
+  steps: e,
+  currentStep: t,
+  children: n,
+  isStepLoading: a
+}) => {
+  const p = s(() => t === e.length - 1, [t, e.length]);
+  return /* @__PURE__ */ i(
+    o,
+    {
+      "data-testid": "stepper",
+      fullWidth: !0,
+      direction: "vertical",
+      gap: "airy",
+      primaryAlign: "center",
+      secondaryAlign: "center",
+      children: [
+        /* @__PURE__ */ r(m, { steps: e, currentStep: t }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            "data-testid": "stepper-content",
+            fullWidth: !0,
+            className: c.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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  A as Stepper
+};

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

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

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

@@ -0,0 +1,95 @@
+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 = [
+  {
+    name: "step1",
+    step: 0,
+    title: "Step 1",
+    optional: !1,
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  },
+  {
+    name: "step2",
+    step: 1,
+    title: "Step 2",
+    optional: !1,
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  },
+  {
+    name: "step3",
+    step: 2,
+    title: "Step 3",
+    optional: !0,
+    nextButtonProps: { onClick: s.fn(), label: "Finish" },
+    prevButtonProps: { onClick: s.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();
+  }), 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" }) })
+    );
+    const t = n.getByText("Next").closest("button");
+    o(t).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();
+  }), 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();
+  }), 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();
+  }), 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" })
+        }
+      )
+    );
+    const t = n.getByText("Finish").closest("button");
+    o(t).toHaveAttribute("type", "submit");
+  });
+});

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

@@ -0,0 +1,25 @@
+import { StepperButtonProps } from '../stepperTypes';
+
+/**
+ * A button component for the stepper that is used to go to the previous step.
+ * @param label - The label of the button.
+ * @param 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.
+ * @returns
+ */
+export declare const StepperPreviousButton: ({ label, onClick, disabled, className, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A button component for the stepper that is used to go to the next step.
+ * @param label - The label of the button.
+ * @param 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 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.
+ * @returns
+ */
+export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, }: StepperButtonProps & {
+    isStepLoading?: boolean;
+    isLastStep?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+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,
+  {
+    "data-testid": "stepper-previous-button",
+    className: `${s.stepperButton} ${o ?? ""}`,
+    onClick: r,
+    disabled: e,
+    fullWidth: !0,
+    variant: "outlined",
+    leadingIcon: "arrow_back",
+    children: t
+  }
+), 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
+  }
+);
+export {
+  m as StepperNextButton,
+  c as StepperPreviousButton
+};

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

@@ -0,0 +1,9 @@
+import { StepperBaseProps } from '../stepperTypes';
+
+/**
+ * A component that displays the header of the stepper, including the step indicator (see {@link StepperIndicator}) and title.
+ * @param steps - An array of steps for the stepper.
+ * @param currentStep - The current step index.
+ * @returns
+ */
+export declare const StepperHeader: ({ steps, currentStep }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { G as o } from "../../../index.es-DntoATwO.js";
+import { T as p } from "../../../index.es-D54RuMc_.js";
+import { s as i } from "../../../stepper.module-HuqmDJPj.js";
+import { StepperIndicator as s } from "./StepperIndicator.js";
+const f = ({ steps: e, currentStep: r }) => /* @__PURE__ */ a(
+  o,
+  {
+    "data-testid": "stepper-header",
+    className: i.stepperContainer,
+    gap: "dense",
+    primaryAlign: "center",
+    secondaryAlign: "center",
+    direction: "vertical",
+    fullWidth: !0,
+    children: [
+      /* @__PURE__ */ t(s, { steps: e, currentStep: r }),
+      /* @__PURE__ */ t(
+        p,
+        {
+          "data-testid": "stepper-header-description",
+          level: 2,
+          bold: !0,
+          tag: "div",
+          className: i.stepperTitle,
+          children: e[r]?.title
+        }
+      )
+    ]
+  }
+);
+export {
+  f as StepperHeader
+};

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

@@ -0,0 +1,9 @@
+import { StepperBaseProps } from '../stepperTypes';
+
+/**
+ * A component that displays the stepper indicator, showing the current step and optional steps.
+ * @param steps - An array of steps for the stepper.
+ * @param currentStep - The current step index.
+ * @returns
+ */
+export declare const StepperIndicator: ({ steps, currentStep }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/components/StepperIndicator.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { G as p } from "../../../index.es-DntoATwO.js";
+import { s as e } from "../../../stepper.module-HuqmDJPj.js";
+const m = ({ steps: a, currentStep: i }) => /* @__PURE__ */ r(p, { gap: "dense", "data-testid": "stepper-indicator", children: a.map((t, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    "data-testid": `stepper-indicator-${t.name}`,
+    className: `${e.stepperIndicatorItem}
+            ${t.optional ? e.stepperIndicatorItemOptional : ""}
+            ${o <= i ? e.stepperIndicatorItemActive : ""}`
+  },
+  `indicator_${t.name}`
+)) });
+export {
+  m as StepperIndicator
+};