@hortiview/shared-components 2.10.2 → 2.11.0

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

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

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

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

@@ -1,9 +1,15 @@
 import { StepperBaseProps } from '../stepperTypes';
 
 /**
- * A component that displays the header of the stepper, including the step indicator (see {@link StepperIndicator}) and title.
+ * A component that displays the specified type of stepper header based on the provided type prop.
+ *
+ * If the type is 'default', it displays a stepper indicator with dots and the title of the current step.
+ * If the type is 'description', it shows the current step out of total steps and the title of the current step.
+ *
+ * @param stepperType - The type of the stepper indicator.
  * @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.
  * @returns
  */
-export declare const StepperHeader: ({ steps, currentStep }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperHeader: ({ stepperType, steps, currentStep, customTotalSteps, }: StepperBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +1,80 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { G as o } from "../../../index.es-DsGuBR0Z.js";
-import { T as p } from "../../../index.es-DCSgIiJH.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,
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { G as s } from "../../../index.es-DsGuBR0Z.js";
+import { T as n } from "../../../index.es-DCSgIiJH.js";
+import { s as t } from "../../../stepper.module-c-CWmpkt.js";
+import { StepperIndicator as o } from "./StepperIndicator.js";
+const y = ({
+  stepperType: d,
+  steps: e,
+  currentStep: i,
+  customTotalSteps: p
+}) => d === "description" ? /* @__PURE__ */ a(
+  s,
+  {
+    "data-testid": "description-stepper-header",
+    className: t.stepperDescriptionContainer,
+    secondaryAlign: "stretch",
+    gap: "none",
+    fullWidth: !0,
+    children: [
+      /* @__PURE__ */ r(
+        s,
+        {
+          className: t.stepperDescriptionProgress,
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          children: /* @__PURE__ */ a(n, { "data-testid": "description-stepper-header-progress", level: 2, children: [
+            e[i].step,
+            "/",
+            p ?? e.length
+          ] })
+        }
+      ),
+      /* @__PURE__ */ r(
+        s,
+        {
+          className: t.stepperDescriptionText,
+          primaryAlign: "flex-start",
+          secondaryAlign: "center",
+          children: /* @__PURE__ */ r(
+            n,
+            {
+              "data-testid": "description-stepper-header-description",
+              themeColor: "secondary-font",
+              level: 2,
+              children: e[i].title ?? ""
+            }
+          )
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ a(
+  s,
   {
     "data-testid": "stepper-header",
-    className: i.stepperContainer,
+    className: t.stepperContainer,
     gap: "dense",
     primaryAlign: "center",
     secondaryAlign: "center",
     direction: "vertical",
     fullWidth: !0,
     children: [
-      /* @__PURE__ */ t(s, { steps: e, currentStep: r }),
-      /* @__PURE__ */ t(
-        p,
+      /* @__PURE__ */ r(o, { steps: e, currentStep: i }),
+      /* @__PURE__ */ r(
+        n,
         {
           "data-testid": "stepper-header-description",
           level: 2,
           bold: !0,
           tag: "div",
-          className: i.stepperTitle,
-          children: e[r]?.title
+          className: t.stepperTitle,
+          children: e[i]?.title
         }
       )
     ]
   }
 );
 export {
-  f as StepperHeader
+  y as StepperHeader
 };

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

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { G as p } from "../../../index.es-DsGuBR0Z.js";
-import { s as e } from "../../../stepper.module-HuqmDJPj.js";
+import { s as e } from "../../../stepper.module-c-CWmpkt.js";
 const m = ({ steps: a, currentStep: i }) => /* @__PURE__ */ r(p, { gap: "dense", "data-testid": "stepper-indicator", children: a.map((t, o) => /* @__PURE__ */ r(
   "div",
   {

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

@@ -15,17 +15,21 @@ export type Step = {
      */
     name: string;
     /**
-     * The step number, starting from 0.
+     * The step number that is displayed when the stepper type is 'description'.
+     * @remarks This property is not visible within the stepper type 'default' and only serves as an identifier for the step.
      */
     step: number;
     /**
-     * The title of the step showing in the Stepper.
+     * The title/description of the step showing in the Stepper.
      */
-    title: string;
+    title: string | ReactNode;
     /**
      * Whether the step is optional or not showing a different design.
+     *
+     * @remarks There's no adjusted display logic for optional steps when using the description type stepper.
+     * In that case, use the title prop / description to indicate that the step is optional.
      */
-    optional: boolean;
+    optional?: boolean;
     /**
      * The props for the next button, including onClick, label, className and disabled state. {@link StepperButtonProps}
      */
@@ -40,6 +44,8 @@ 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 {string | ReactNode} leadingIcon - A custom leading icon for the button. Takes precedence over showArrowIcon.
+ * @param {string | ReactNode} trailingIcon - A custom trailing icon for the button. Takes precedence over showArrowIcon.
  * @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. *
@@ -57,12 +63,21 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
      * Whether to show a leading/trailing arrow icon for the button.
      */
     showArrowIcon?: boolean;
+    /**
+     * A custom leading icon for the button. Takes precedence over showArrowIcon.
+     */
+    leadingIcon?: string | ReactNode;
+    /**
+     * A custom trailing icon for the button. Takes precedence over showArrowIcon.
+     */
+    trailingIcon?: string | ReactNode;
     /**
      * Property adapted from Element library
      */
     buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
+ * @param {string} stepperType - The type of the stepper indicator. Defaults to 'dots'.
  * @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.
@@ -71,10 +86,23 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
  * @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 = {
+    /**
+     * The display-type of the Stepper.
+     * - `default` – Shows a row of dots for each step.
+     * - `description` – Displays progress numerically (n/n) and the title next to it.
+     *
+     * @default default
+     */
+    stepperType?: 'default' | 'description';
     /**
      * An array of steps for the stepper.
      */
     steps: Step[];
+    /**
+     * A custom total number of steps to display in the stepper header.
+     * @remarks This can be used to show a different total number of steps than the length of the steps array.
+     */
+    customTotalSteps?: number;
     /**
      * The current step index.
      */
@@ -101,7 +129,9 @@ export type StepperProps = {
     showPreviousButtonOnFirstStep?: boolean;
 };
 /**
+ * @param {string} type - The type of the stepper indicator.
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
+ * @param {number} customTotalSteps - A custom total number of steps to display in the stepper header.
  */
-export type StepperBaseProps = Pick<StepperProps, 'steps' | 'currentStep'>;
+export type StepperBaseProps = Pick<StepperProps, 'stepperType' | 'steps' | 'currentStep' | 'customTotalSteps'>;