@hortiview/shared-components 2.10.2 → 2.11.1

package/dist/components/OnboardingBanner/OnboardingBanner.js

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { G as a } from "../../index.es-DsGuBR0Z.js";
-import { I as b } from "../../index.es-BzdG6flH.js";
-import { B as h } from "../../index.es-DUcI2Zyr.js";
-import { b as u, T as g } from "../../index.es-DCSgIiJH.js";
-import { E as f } from "../../index.es-DNRm4vOy.js";
-import { G as y, a as v, b as i } from "../../index.es-vqlyMiew.js";
-import { I as _ } from "../../index.es-DYs8W4jv.js";
+import { B as b } from "../../index.es-B0QNuIUR.js";
+import { E as h } from "../../index.es-Bw3LT0xk.js";
+import { G as u, a as g, b as a } from "../../index.es-BZ3r3ilq.js";
+import { G as i } from "../../index.es-C1SajYlm.js";
+import { I as f } from "../../index.es-DCYlADaN.js";
+import { I as y } from "../../index.es-C1u7zUBz.js";
+import { b as v, T as _ } from "../../index.es-NEYPxnlS.js";
 import { u as C } from "../../useBreakpoints-MzTZ0tCT.js";
 import '../../assets/OnboardingBanner.css';const G = "_elevation_7z8y8_1", k = "_color_7z8y8_5", B = "_buttons_7z8y8_9", l = {
   elevation: G,
@@ -21,57 +21,65 @@ import '../../assets/OnboardingBanner.css';const G = "_elevation_7z8y8_1", k = "
 }) => {
   const { isDesktop: d } = C();
   return p ? /* @__PURE__ */ o(
-    f,
+    h,
     {
       "data-testid": "onboarding-banner",
       elevation: 2,
       customPadding: "0.5rem 1rem 1rem",
       rounded: !0,
       className: l.elevation,
-      children: /* @__PURE__ */ o(y, { variant: "none", rowGap: "8px", columnGap: "8px", children: /* @__PURE__ */ r(v, { "data-testid": "onboarding-banner-content", children: [
-        /* @__PURE__ */ o(i, { desktopCol: 12, phoneCol: 4, tabletCol: 8, children: /* @__PURE__ */ r(
-          a,
+      children: /* @__PURE__ */ o(u, { variant: "none", rowGap: "8px", columnGap: "8px", children: /* @__PURE__ */ r(g, { "data-testid": "onboarding-banner-content", children: [
+        /* @__PURE__ */ o(a, { desktopCol: 12, phoneCol: 4, tabletCol: 8, children: /* @__PURE__ */ r(
+          i,
           {
             "data-testid": "onboarding-banner-header-content",
             primaryAlign: "space-between",
             secondaryAlign: "center",
             fullWidth: !0,
             children: [
-              /* @__PURE__ */ o(u, { level: 6, children: s }),
+              /* @__PURE__ */ o(v, { level: 6, children: s }),
               /* @__PURE__ */ o(
-                b,
+                y,
                 {
                   "data-testid": "onboarding-banner-close-button",
                   type: "button",
                   onClick: m,
-                  icon: /* @__PURE__ */ o(_, { icon: "clear" })
+                  icon: /* @__PURE__ */ o(f, { icon: "clear" })
                 }
               )
             ]
           }
         ) }),
         /* @__PURE__ */ o(
-          i,
+          a,
           {
             desktopCol: n ? 10 : 12,
             phoneCol: 4,
             tabletCol: 8,
             order: d ? 2 : 3,
-            children: /* @__PURE__ */ r(a, { direction: "vertical", gap: "dense", children: [
-              /* @__PURE__ */ o(g, { level: 2, className: l.color, children: c }),
-              e && e.length > 0 && /* @__PURE__ */ o(a, { "data-testid": "onboarding-banner-buttons", direction: "horizontal", className: l.buttons, children: e?.map((t) => /* @__PURE__ */ o(
-                h,
+            children: /* @__PURE__ */ r(i, { direction: "vertical", gap: "dense", children: [
+              /* @__PURE__ */ o(_, { level: 2, className: l.color, children: c }),
+              e && e.length > 0 && /* @__PURE__ */ o(
+                i,
                 {
-                  "data-testid": `onboarding-banner-button-${t.id}`,
-                  ...t
-                },
-                t.id
-              )) })
+                  "data-testid": "onboarding-banner-buttons",
+                  direction: "horizontal",
+                  className: l.buttons,
+                  children: e?.map((t) => /* @__PURE__ */ o(
+                    b,
+                    {
+                      "data-testid": `onboarding-banner-button-${t.id}`,
+                      ...t
+                    },
+                    t.id
+                  ))
+                }
+              )
             ] })
           }
         ),
         n && /* @__PURE__ */ o(
-          i,
+          a,
           {
             horizontalAlign: "center",
             "data-testid": "onboarding-banner-media-content",

package/dist/components/OnboardingBanner/OnboardingBanner.test.js

@@ -1,5 +1,5 @@
 import { jsx as n, Fragment as d } from "react/jsx-runtime";
-import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as o, s as e } from "../../react.esm-BbMrgZCM.js";
 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", () => {

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 { T as p } from "../../index.es-DCSgIiJH.js";
+import { T as p } from "../../index.es-NEYPxnlS.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,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { b as n } from "../../index.es-DCSgIiJH.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 { b as n } from "../../index.es-NEYPxnlS.js";
+import { a as i, s as e, w as s } from "../../react.esm-BbMrgZCM.js";
+import { u as a } from "../../index-CkZYDkGd.js";
 import { OverflowTooltip as c } from "./OverflowTooltip.js";
 import { d as u, t as p, g as r } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 u("OverflowTooltip Test", () => {

package/dist/components/SafeForm/SafeForm.test.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { a as u, s as i, f as r } from "../../react.esm-CX1WJ2Pp.js";
-import { u as y } from "../../index-I7uTh4Tr.js";
+import { a as u, s as i, f as r } from "../../react.esm-BbMrgZCM.js";
+import { u as y } from "../../index-CkZYDkGd.js";
 import { SafeForm as p } from "./SafeForm.js";
 import { d as b, t as c, g as s, v as l } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 b("SafeForm", () => {

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

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as e } from "../../react.esm-BbMrgZCM.js";
 import { ScrollbarY as d, ScrollbarX as l } from "./Scrollbar.js";
 import { d as c, t, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 c("Scrollbar", () => {

package/dist/components/SearchBar/SearchBar.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { I as l } from "../../index.es-BzdG6flH.js";
-import { T as u } from "../../index.es-BLolvOHO.js";
+import { I as l } from "../../index.es-C1u7zUBz.js";
+import { T as u } from "../../index.es-CvHDFF6V.js";
 import '../../assets/SearchBar.css';const b = "_searchbar_g83qp_1", d = {
   searchbar: b
 }, g = ({

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

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as t, f as h } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r, s as t, f as h } from "../../react.esm-BbMrgZCM.js";
 import { act as l } from "react";
 import { SearchBar as s } from "./SearchBar.js";
 import { d as m, t as o, a as n, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/Select/Select.js

@@ -1,25 +1,25 @@
 import { jsx as a } from "react/jsx-runtime";
-import { S as f } from "../../index.es-Dq_bXeGZ.js";
-import { useEffect as n } from "react";
+import { S as f } from "../../index.es-fV9oWpEf.js";
+import { useEffect as u } from "react";
 import { u as S } from "../../uniqueId-NU3-C36A.js";
-import '../../assets/Select.css';const p = "_customPortal_1c12e_1", $ = "_customSelect_1c12e_7", r = {
+import '../../assets/Select.css';const p = "_customPortal_1u11g_1", $ = "_customSelect_1u11g_8", n = {
   customPortal: p,
   customSelect: $
 }, P = ({
-  menuMaxHeight: s = "15rem",
+  menuMaxHeight: r = "15rem",
   portalClassName: o,
   "data-testid": l = "custom-select",
-  className: u,
+  className: s,
   hoisted: c,
   ...d
 }) => {
   const e = `custom-portal-${o ?? "default"}`, m = S("elementSelectForTestId-");
-  return n(() => {
+  return u(() => {
     if (c && !document.getElementById(e)) {
       const t = document.createElement("div");
-      t.id = e, t.className = `${r.customPortal} ${o ?? ""}`, document.body.appendChild(t);
+      t.id = e, t.className = `${n.customPortal} ${o ?? ""}`, document.body.appendChild(t);
     }
-  }, [c, e, o]), n(() => {
+  }, [c, e, o]), u(() => {
     const t = document.querySelectorAll(`#${m} input[role="combobox"]`);
     t && t.forEach((i) => {
       i.setAttribute("data-testid", l);
@@ -27,11 +27,11 @@ import '../../assets/Select.css';const p = "_customPortal_1c12e_1", $ = "_custom
   }, [l, m]), /* @__PURE__ */ a(
     f,
     {
-      menuMaxHeight: s,
+      menuMaxHeight: r,
       hoisted: c,
       id: m,
       portalContainer: document.getElementById(e) ? `#${e}` : void 0,
-      className: `${r.customSelect} ${u ?? ""}`,
+      className: `${n.customSelect} ${s ?? ""}`,
       ...d
     }
   );

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

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a, s as c } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as c } from "../../react.esm-BbMrgZCM.js";
 import { Select as n } from "./Select.js";
 import { d as l, t as m, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 l("Select", () => {

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

@@ -2,11 +2,15 @@ import { PropsWithChildren } from 'react';
 import { StepperProps } from './stepperTypes';
 
 /**
- * A component that displays a stepper with a header, content, and navigation buttons.
+ * A component that displays a stepper with a header, content, and navigation buttons.<br />
+ * Available in two display types: 'default' (dots) and 'description' (numerical with description).
  *
- * !! Be aware that the stepper is not a controlled component, so you need to manage the current step, content and loading state yourself.
+ * **!! Be aware that the stepper is not a controlled component, so you need to manage the current step, content and loading state yourself. !!**
+ *
+ * @param stepperType - The type of the stepper indicator. Defaults to 'default' (dots).
  * @param steps - An array of steps for the stepper.
  * @param currentStep - The current step index.
+ * @param customTotalSteps - A custom total number of steps to display in the stepper header. Only applicable for 'description' type.
  * @param children - The content to be displayed in the stepper.
  * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
  * @param showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
@@ -14,4 +18,4 @@ import { StepperProps } from './stepperTypes';
  * @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, showStepperHeader, stepperButtonAlignment, showPreviousButtonOnFirstStep, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ stepperType, steps, currentStep, customTotalSteps, children, isStepLoading, showStepperHeader, stepperButtonAlignment, showPreviousButtonOnFirstStep, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -1,19 +1,21 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { G as o } from "../../index.es-DsGuBR0Z.js";
-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 = ({
+import { G as o } from "../../index.es-C1SajYlm.js";
+import { useMemo as u } from "react";
+import { StepperPreviousButton as f, StepperNextButton as g } from "./components/StepperButton.js";
+import { StepperHeader as y } from "./components/StepperHeader.js";
+import { s as h } from "../../stepper.module-c-CWmpkt.js";
+const j = ({
+  stepperType: n = "default",
   steps: e,
   currentStep: t,
-  children: n,
-  isStepLoading: a,
-  showStepperHeader: p = !0,
-  stepperButtonAlignment: l = "center",
-  showPreviousButtonOnFirstStep: s = !1
+  customTotalSteps: a,
+  children: l,
+  isStepLoading: p,
+  showStepperHeader: s = !0,
+  stepperButtonAlignment: d = "center",
+  showPreviousButtonOnFirstStep: m = !1
 }) => {
-  const d = m(() => t === e.length - 1, [t, e.length]);
+  const c = u(() => t === e.length - 1, [t, e.length]);
   return /* @__PURE__ */ i(
     o,
     {
@@ -24,17 +26,25 @@ const P = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        p ? /* @__PURE__ */ r(f, { steps: e, currentStep: t }) : null,
+        s ? /* @__PURE__ */ r(
+          y,
+          {
+            stepperType: n,
+            steps: e,
+            currentStep: t,
+            customTotalSteps: a
+          }
+        ) : null,
         /* @__PURE__ */ r(
           o,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: g.stepperContent,
+            className: h.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
-            children: n
+            children: l
           }
         ),
         /* @__PURE__ */ i(
@@ -43,15 +53,15 @@ const P = ({
             "data-testid": "stepper-buttons",
             fullWidth: !0,
             secondaryAlign: "center",
-            primaryAlign: l,
+            primaryAlign: d,
             children: [
-              (t !== 0 || s) && /* @__PURE__ */ r(c, { ...e[t].prevButtonProps }),
+              (t !== 0 || m) && /* @__PURE__ */ r(f, { ...e[t].prevButtonProps }),
               /* @__PURE__ */ r(
-                u,
+                g,
                 {
                   ...e[t].nextButtonProps,
-                  isStepLoading: a,
-                  isLastStep: d
+                  isStepLoading: p,
+                  isLastStep: c
                 }
               )
             ]
@@ -62,5 +72,5 @@ const P = ({
   );
 };
 export {
-  P as Stepper
+  j as Stepper
 };

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

@@ -1,71 +1,160 @@
 import { jsx as e } from "react/jsx-runtime";
-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 = [
+import { a as p, s as t, f as u, c as l } from "../../react.esm-BbMrgZCM.js";
+import { Stepper as o } from "./Stepper.js";
+import { v as s, d as a, t as c, g as n } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const i = [
   {
     name: "step1",
     step: 0,
     title: "Step 1",
     optional: !1,
-    nextButtonProps: { onClick: l.fn(), label: "Next" },
-    prevButtonProps: { onClick: l.fn(), label: "Back" }
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
   },
   {
     name: "step2",
     step: 1,
     title: "Step 2",
     optional: !1,
-    nextButtonProps: { onClick: l.fn(), label: "Next" },
-    prevButtonProps: { onClick: l.fn(), label: "Back" }
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
   },
   {
     name: "step3",
     step: 2,
     title: "Step 3",
     optional: !0,
-    nextButtonProps: { onClick: l.fn(), label: "Finish" },
-    prevButtonProps: { onClick: l.fn(), label: "Back" }
+    nextButtonProps: { onClick: s.fn(), label: "Finish" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
   }
 ];
 a("Stepper", () => {
-  p("renders the stepper header and children", () => {
-    s(
-      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+  c("renders the stepper header and children", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, 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", () => {
-    s(
-      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+  }), c("disables the next button when isStepLoading is true", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
     const r = t.getByText("Next").closest("button");
     n(r).toBeDisabled();
-  }), p("calls nextButtonProps.onClick when next button is clicked", () => {
-    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 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", () => {
-    s(
-      /* @__PURE__ */ e(i, { steps: o, currentStep: 0, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+  }), c("calls nextButtonProps.onClick when next button is clicked", () => {
+    const r = s.fn();
+    i[1].nextButtonProps.onClick = r, p(
+      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), u.click(t.getByText("Next")), n(r).toHaveBeenCalled();
+  }), c("calls prevButtonProps.onClick when prev button is clicked", () => {
+    const r = s.fn();
+    i[1].prevButtonProps.onClick = r, p(
+      /* @__PURE__ */ e(o, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), u.click(t.getByText("Back")), n(r).toHaveBeenCalled();
+  }), c("does not render the prev button on the first step", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, 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", () => {
-    s(
-      /* @__PURE__ */ e(i, { steps: o, currentStep: 2, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+  }), c("renders the next button as submit on last step", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, currentStep: 2, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
     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" }) })
+  }), c("does not render the stepper header when showStepperHeader is false", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, 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" }) })
+  }), c("does not render stepper button icons when showArrowIcon is false", () => {
+    i[1].nextButtonProps.showArrowIcon = !1, i[1].prevButtonProps.showArrowIcon = !1, p(
+      /* @__PURE__ */ e(o, { steps: i, 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();
   });
 });
+const d = [
+  {
+    name: "Description Step 1",
+    step: 1,
+    title: "Description 1",
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  },
+  {
+    name: "Description Step 2",
+    step: 2,
+    title: "Description 2",
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  },
+  {
+    name: "Description Step 2.5",
+    step: 2.5,
+    title: "Description 2.5",
+    nextButtonProps: { onClick: s.fn(), label: "Next" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  },
+  {
+    name: "Description Step 3",
+    step: 3,
+    title: "Description 3",
+    nextButtonProps: { onClick: s.fn(), label: "Finish" },
+    prevButtonProps: { onClick: s.fn(), label: "Back" }
+  }
+];
+a("stepper types", () => {
+  const r = /* @__PURE__ */ e("div", { children: "content" });
+  c("default type without prop", () => {
+    p(
+      /* @__PURE__ */ e(o, { steps: i, currentStep: 0, children: r })
+    ), n(t.getByTestId("stepper-header")).toBeInTheDocument(), n(t.getByText("Step 1")).toBeInTheDocument();
+  }), c("default type via prop", () => {
+    p(
+      /* @__PURE__ */ e(o, { stepperType: "default", steps: i, currentStep: 0, children: r })
+    ), n(t.getByTestId("stepper-header")).toBeInTheDocument(), n(t.getByText("Step 1")).toBeInTheDocument();
+  }), c("description type via prop", () => {
+    p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
+    ), n(t.getByTestId("description-stepper-header")).toBeInTheDocument(), n(t.getByText("Description 1")).toBeInTheDocument();
+  });
+});
+a("description stepper header", () => {
+  const r = /* @__PURE__ */ e("div", { children: "content" });
+  c("render step process", () => {
+    p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
+    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("1/4"), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 1, children: r })
+    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2/4"), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 2, children: r })
+    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("2.5/4"), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 3, children: r })
+    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/4"), l(), p(
+      /* @__PURE__ */ e(
+        o,
+        {
+          stepperType: "description",
+          steps: d,
+          currentStep: 3,
+          customTotalSteps: 3,
+          children: r
+        }
+      )
+    ), n(t.getByTestId("description-stepper-header-progress")).toHaveTextContent("3/3");
+  }), c("render description text", () => {
+    p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 0, children: r })
+    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      "Description 1"
+    ), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 1, children: r })
+    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      "Description 2"
+    ), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 2, children: r })
+    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      "Description 2.5"
+    ), l(), p(
+      /* @__PURE__ */ e(o, { stepperType: "description", steps: d, currentStep: 3, children: r })
+    ), n(t.getByTestId("description-stepper-header-description")).toHaveTextContent(
+      "Description 3"
+    );
+  });
+});

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

@@ -7,11 +7,13 @@ import { StepperButtonProps } from '../stepperTypes';
  * @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 leadingIcon - A custom leading icon for the button.
+ * @param trailingIcon - A custom trailing icon for the button.
  * @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, showArrowIcon, buttonSize, fullWidth, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperPreviousButton: ({ label, onClick, disabled, className, showArrowIcon, leadingIcon, trailingIcon, 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.
@@ -21,11 +23,13 @@ export declare const StepperPreviousButton: ({ label, onClick, disabled, classNa
  * @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 leadingIcon - A custom icon to display instead of the default arrow icon.
+ * @param trailingIcon - A custom icon to display instead of the default arrow icon.
  * @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, showArrowIcon, buttonSize, fullWidth, }: StepperButtonProps & {
+export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps & {
     isStepLoading?: boolean;
     isLastStep?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;