@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/container/tabs/tab-pane/index.d.ts

@@ -0,0 +1,95 @@
+import React from "react";
+import { WmTabPaneProps } from "./props";
+export declare const WmTabpane: {
+    (props: WmTabPaneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const WmTabpaneStandalone: {
+    (props: WmTabPaneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { WmTabpaneStandalone as WmTabPane };
+/**
+ * The WmTabPane component represents a single tab content panel within
+ * WmTabs. Used as a child of WmTabs.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--docs#tab-overview)
+ *
+ * @param props - {@link WmTabPaneProps}
+ */
+declare const _default: React.ComponentType<{
+    caption?: string;
+    smoothscroll?: boolean;
+    content?: string;
+    heading?: string;
+    title?: string;
+    disabled?: boolean;
+    badgevalue?: string | number;
+    badgetype?: string;
+    paneicon?: string;
+    paneiconurl?: string;
+    isdynamic?: boolean;
+    index?: number;
+    item?: Record<string, unknown>;
+    onSelect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    onDeselect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    onLoad?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>) => void;
+    onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
+    renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => React.ReactNode;
+    layoutClassName?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/container/tabs/tab-pane/index.js

@@ -0,0 +1,138 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo } from "react";
+import clsx from "clsx";
+import { Tabs } from "@base-ui-components/react/tabs";
+import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
+import { useTabsContext } from "..";
+import { setWidgetIndexWithContext } from "../../../data/list/utils/widget-instance-utils";
+const WmTabpane = (props) => {
+  const { className, disabled, renderPartial, name, index, listener, item, layoutClassName } = props;
+  const onHeaderclick = props.onHeaderclick;
+  const { selectedIndex, setSelectedIndex, tabsContainerName, updatePaneHeader } = useTabsContext();
+  const wasActiveRef = React.useRef(false);
+  const loadedRef = React.useRef(false);
+  const hasReportedHeaderRef = React.useRef(false);
+  useEffect(() => {
+    var _a, _b, _c, _d, _e;
+    const isActive = selectedIndex === index;
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        select: () => setSelectedIndex(index),
+        isActive,
+        deselect: () => setSelectedIndex(-1)
+      });
+    }
+    const widgetInstance = (_b = (_a = props == null ? void 0 : props.listener) == null ? void 0 : _a.Widgets) == null ? void 0 : _b[name];
+    setWidgetIndexWithContext(widgetInstance, [item], item);
+    if (isActive && tabsContainerName) {
+      listener.onChange(tabsContainerName, { activeTab: widgetInstance });
+    }
+    if (isActive) {
+      if (!loadedRef.current) {
+        (_c = props == null ? void 0 : props.onLoad) == null ? void 0 : _c.call(props, null, widgetInstance);
+        loadedRef.current = true;
+      }
+      if (!wasActiveRef.current) {
+        (_d = props == null ? void 0 : props.onSelect) == null ? void 0 : _d.call(props, null, widgetInstance, index);
+        wasActiveRef.current = true;
+      }
+    } else if (wasActiveRef.current) {
+      (_e = props == null ? void 0 : props.onDeselect) == null ? void 0 : _e.call(props, null, widgetInstance, index);
+      wasActiveRef.current = false;
+    }
+  }, [selectedIndex, name]);
+  const isHidden = useMemo(() => item === void 0 ? false : (item == null ? void 0 : item.show) === false, [item]);
+  const headerProps = useMemo(
+    () => ({
+      name,
+      title: props.title,
+      disabled,
+      show: props.show,
+      paneicon: props.paneicon,
+      paneiconurl: props.paneiconurl,
+      badgevalue: props.badgevalue,
+      badgetype: props.badgetype,
+      className,
+      onHeaderclick,
+      onHeaderClick: props.onHeaderClick
+    }),
+    [
+      name,
+      props.title,
+      disabled,
+      props.show,
+      props.paneicon,
+      props.paneiconurl,
+      props.badgevalue,
+      props.badgetype,
+      className,
+      onHeaderclick,
+      props.onHeaderClick
+    ]
+  );
+  useEffect(() => {
+    if (!hasReportedHeaderRef.current) {
+      hasReportedHeaderRef.current = true;
+      return;
+    }
+    updatePaneHeader(name, headerProps);
+  }, [name, headerProps, updatePaneHeader]);
+  return /* @__PURE__ */ jsx(
+    Tabs.Panel,
+    __spreadProps(__spreadValues({
+      value: index,
+      keepMounted: true,
+      className: clsx("tab-pane", "wm-tab-pane-root", layoutClassName, {
+        disabled,
+        [className]: !!className,
+        active: selectedIndex === index,
+        hidden: isHidden,
+        "wm-tab-pane-active": selectedIndex === index,
+        "wm-tab-pane-inactive": selectedIndex !== index
+      }),
+      role: "tabpanel",
+      style: props == null ? void 0 : props.styles,
+      "data-pane-name": name,
+      title: props == null ? void 0 : props.title
+    }, { name }), {
+      children: /* @__PURE__ */ jsx("div", { className: "tab-body", "data-widget-id": props["data-widget-id"], children: renderPartial ? renderPartial(
+        props,
+        () => {
+          var _a;
+          return (_a = props.onLoad) == null ? void 0 : _a.call(
+            props,
+            new Event("load"),
+            props
+          );
+        }
+      ) : props.children })
+    })
+  );
+};
+WmTabpane.displayName = "WmTabpane";
+const WmTabpaneStandalone = WmTabpane;
+var tab_pane_default = withBaseWrapper(WmTabpane);
+export {
+  WmTabpaneStandalone as WmTabPane,
+  WmTabpane,
+  tab_pane_default as default
+};

package/components/container/tabs/tab-pane/props.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Base props specific to the WmTabPane component.
+ */
+export interface TabPanePropsBase {
+    /**
+     * Tab caption/title (alternative to title).
+     */
+    caption?: string;
+    /**
+     * Enable smooth scroll when tab is selected.
+     */
+    smoothscroll?: boolean;
+    /**
+     * Tab content (legacy).
+     */
+    content?: string;
+    /**
+     * Tab heading (alternative to title).
+     */
+    heading?: string;
+    /**
+     * Tab title displayed in the tab header.
+     */
+    title?: string;
+    /**
+     * Whether the tab is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Badge value displayed in the tab header.
+     */
+    badgevalue?: string | number;
+    /**
+     * Badge style variant.
+     */
+    badgetype?: string;
+    /**
+     * Icon class for the tab header.
+     */
+    paneicon?: string;
+    paneiconurl?: string;
+    /**
+     * Whether this pane is from dynamic tabs (injected).
+     */
+    isdynamic?: boolean;
+    /**
+     * Tab index (injected by parent).
+     */
+    index?: number;
+    /**
+     * Dynamic tab item data (injected for dynamic tabs).
+     */
+    item?: Record<string, unknown>;
+    /**
+     * Called when tab is selected.
+     */
+    onSelect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    /**
+     * Called when tab is deselected.
+     */
+    onDeselect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    /**
+     * Called when tab content loads.
+     */
+    onLoad?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>) => void;
+    /**
+     * Called when tab header is clicked.
+     */
+    onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
+    /**
+     * Custom render function for tab content.
+     */
+    renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => ReactNode;
+    /**
+     * Utility layout classes from Studio Auto Layout (merged on the outer tab-pane wrapper).
+     */
+    layoutClassName?: string;
+}
+/**
+ * Combined props for the WmTabPane component, including base WaveMaker props.
+ */
+export type WmTabPaneProps = Prettify<TabPanePropsBase & BaseProps>;

package/components/container/tabs/utils.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export declare const filterVisibleChildren: (children: React.ReactNode, hiddenTabNames: Set<string>) => any[];
+type RemovePaneParams = {
+    type?: string;
+    dataset?: any[];
+    children: React.ReactNode;
+    hiddenTabNames: Set<string>;
+    TabName: string;
+    selectedIndex: number;
+    currentSelectedIndex: React.MutableRefObject<number>;
+    panesCountRef: React.MutableRefObject<number>;
+    setHiddenTabNames: React.Dispatch<React.SetStateAction<Set<string>>>;
+    setSelectedIndex: (index: number) => void;
+    saveStateToStorage: (index: number) => void;
+};
+export declare const handleRemovePane: ({ type, dataset, children, hiddenTabNames, TabName, selectedIndex, currentSelectedIndex, panesCountRef, setHiddenTabNames, setSelectedIndex, saveStateToStorage, }: RemovePaneParams) => void;
+export {};

package/components/container/tabs/utils.js

@@ -0,0 +1,46 @@
+import React from "react";
+const filterVisibleChildren = (children, hiddenTabNames) => {
+  return React.Children.toArray(children).filter((c) => {
+    var _a;
+    const nm = (_a = c == null ? void 0 : c.props) == null ? void 0 : _a.name;
+    const isHidden = nm ? hiddenTabNames.has(nm) : false;
+    return c && c.props && c.props.show !== false && !isHidden;
+  });
+};
+const handleRemovePane = ({
+  type,
+  dataset,
+  children,
+  hiddenTabNames,
+  TabName,
+  selectedIndex,
+  currentSelectedIndex,
+  panesCountRef,
+  setHiddenTabNames,
+  setSelectedIndex,
+  saveStateToStorage
+}) => {
+  var _a, _b;
+  if (type === "dynamic" && dataset) {
+    return;
+  }
+  const visibleBefore = filterVisibleChildren(children, hiddenTabNames);
+  const activeName = (_b = (_a = visibleBefore[selectedIndex]) == null ? void 0 : _a.props) == null ? void 0 : _b.name;
+  setHiddenTabNames((prev) => {
+    const next = new Set(prev);
+    next.add(TabName);
+    return next;
+  });
+  if (activeName === TabName) {
+    const newIndex = Math.max(0, currentSelectedIndex.current - 1);
+    currentSelectedIndex.current = newIndex;
+    setSelectedIndex(newIndex);
+    saveStateToStorage(newIndex);
+  } else {
+    setSelectedIndex(currentSelectedIndex.current);
+  }
+};
+export {
+  filterVisibleChildren,
+  handleRemovePane
+};

package/components/container/wizard/WizardContext.d.ts

@@ -0,0 +1,4 @@
+import { WizardContextType } from "./props";
+declare const WizardContext: import("react").Context<WizardContextType>;
+export declare const useWizardContext: () => WizardContextType;
+export default WizardContext;

package/components/container/wizard/WizardContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+const WizardContext = createContext(null);
+const useWizardContext = () => {
+  const context = useContext(WizardContext);
+  if (!context) {
+    throw new Error("useWizardContext must be used within a WizardProvider");
+  }
+  return context;
+};
+var WizardContext_default = WizardContext;
+export {
+  WizardContext_default as default,
+  useWizardContext
+};

package/components/container/wizard/components/StepComponents.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { StepIconProps } from "@mui/material";
+import { WizardStepData } from "../props";
+export declare const CustomStepIcon: import("react").MemoExoticComponent<(props: StepIconProps & {
+    step?: WizardStepData;
+    index?: number;
+    wizardClass?: string;
+    active?: boolean;
+    completed?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const CustomStepLabel: import("react").MemoExoticComponent<(props: {
+    step: WizardStepData;
+    index: number;
+    wizardClass: string;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element>;

package/components/container/wizard/components/StepComponents.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import clsx from "clsx";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+const CustomStepIcon = memo(
+  (props) => {
+    const { step, index = 0, wizardClass = "", active, completed } = props;
+    if (!step) return null;
+    const isNumber = wizardClass == null ? void 0 : wizardClass.includes("number");
+    const isDottedStepper = wizardClass == null ? void 0 : wizardClass.includes("dottedstepper");
+    const isTextInline = wizardClass == null ? void 0 : wizardClass.includes("text-inline");
+    const isIconStepper = (wizardClass == null ? void 0 : wizardClass.includes("iconstepper")) || (wizardClass == null ? void 0 : wizardClass.includes("tabstepper"));
+    const isCompleted = step.isDone;
+    const iconContent = useMemo(() => {
+      if (isCompleted && (isDottedStepper || isNumber) && !isIconStepper) {
+        return /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-done" });
+      }
+      if (isNumber && !isCompleted && !isIconStepper) {
+        return /* @__PURE__ */ jsx(Box, { component: "span", className: "count", children: index + 1 });
+      }
+      if ((isDottedStepper || isTextInline && !isIconStepper) && !isCompleted) {
+        return /* @__PURE__ */ jsx(Box, { component: "span", className: "dottedstepper" });
+      }
+      if (isIconStepper && (step.iconclass || step.iconurl) && (!isCompleted || isCompleted && !step.doneiconclass && !step.doneiconurl)) {
+        return /* @__PURE__ */ jsx(WmAppIcon, { iconclass: step.iconclass, iconurl: step.iconurl, alt: "Wizard step icon" });
+      }
+      if ((step.doneiconclass || step.doneiconurl) && isCompleted && isIconStepper) {
+        return /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass: step.doneiconclass,
+            iconurl: step.doneiconurl,
+            alt: "Wizard done icon"
+          }
+        );
+      }
+      return null;
+    }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        className: clsx(
+          "wizard-step-number",
+          {
+            active,
+            finished: isCompleted,
+            default: !active && !isCompleted
+          },
+          isDottedStepper && !completed && "has-dotted-stepper"
+        ),
+        children: iconContent
+      }
+    );
+  }
+);
+CustomStepIcon.displayName = "CustomStepIcon";
+const CustomStepLabel = memo(
+  (props) => {
+    const { step, index, wizardClass, children } = props;
+    const isTextInline = wizardClass == null ? void 0 : wizardClass.includes("text-inline");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box, { component: "span", className: "title-wrapper", children: [
+        isTextInline && /* @__PURE__ */ jsx(Typography, { component: "span", className: "step-number", variant: "caption", children: `0${index + 1}` }),
+        /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", className: "step-title", children: step.title })
+      ] }),
+      step.subtitle && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "span",
+          className: "subtitle-wrapper",
+          variant: "caption",
+          title: step.subtitle,
+          children: /* @__PURE__ */ jsx(Box, { component: "span", className: "step-title", children: step.subtitle })
+        }
+      ),
+      children
+    ] });
+  }
+);
+CustomStepLabel.displayName = "CustomStepLabel";
+export {
+  CustomStepIcon,
+  CustomStepLabel
+};

package/components/container/wizard/components/WizardStep.d.ts

@@ -0,0 +1,5 @@
+import { WizardStepProps } from "../props";
+export declare const WizardStep: {
+    ({ step, index, className, nonLinear, orientation, onStepClick, current, }: WizardStepProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/container/wizard/components/WizardStep.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Step, StepLabel, StepContent, Box } from "@mui/material";
+import clsx from "clsx";
+import { CustomStepIcon, CustomStepLabel } from "./StepComponents";
+const STEP_CLASS = "app-wizard-step";
+const WizardStep = ({
+  step,
+  index,
+  className,
+  nonLinear = false,
+  orientation = "horizontal",
+  onStepClick,
+  current
+}) => {
+  const stepProps = {};
+  const labelProps = {};
+  if (step.disabled) {
+    stepProps.disabled = true;
+  }
+  if (step.done || step.isDone) {
+    stepProps.completed = true;
+  }
+  if (step.show === false || step.show === "false") {
+    stepProps.hidden = true;
+  }
+  const isClassic = className == null ? void 0 : className.includes("classic");
+  return /* @__PURE__ */ jsxs(
+    Step,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, stepProps), {
+      className: clsx(
+        STEP_CLASS,
+        current ? "active" : step.done || step.isDone ? "finished" : "default"
+      )
+    }), stepProps), {
+      children: [
+        nonLinear || step.done || step.isDone ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "a",
+            onClick: () => onStepClick(index),
+            className: clsx({
+              active: current,
+              finished: step.done || step.isDone,
+              default: !current && !(step.done || step.isDone),
+              "title-center-align": isClassic && !step.subtitle
+            }),
+            "aria-current": step.active ? "step" : void 0,
+            "aria-label": step.subtitle ? `step ${index + 1} ${step.title} ${step.subtitle}` : `step ${index + 1} ${step.title}`,
+            "aria-disabled": step.disabled,
+            title: step.title,
+            children: [
+              isClassic && /* @__PURE__ */ jsx("span", { className: "arrow" }),
+              /* @__PURE__ */ jsx(
+                StepLabel,
+                __spreadProps(__spreadValues({}, labelProps), {
+                  slots: { stepIcon: CustomStepIcon },
+                  slotProps: {
+                    stepIcon: {
+                      step,
+                      index,
+                      wizardClass: className,
+                      active: step.active,
+                      completed: step.done || step.isDone
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(CustomStepLabel, { step, index, wizardClass: className || "" })
+                })
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isClassic && /* @__PURE__ */ jsx("span", { className: "arrow" }),
+          /* @__PURE__ */ jsx(
+            StepLabel,
+            __spreadProps(__spreadValues({}, labelProps), {
+              slots: { stepIcon: CustomStepIcon },
+              slotProps: {
+                stepIcon: {
+                  step,
+                  index,
+                  wizardClass: className,
+                  active: step.active,
+                  completed: step.done || step.isDone
+                }
+              },
+              children: /* @__PURE__ */ jsx(CustomStepLabel, { step, index, wizardClass: className || "" })
+            })
+          )
+        ] }),
+        orientation === "vertical" && /* @__PURE__ */ jsx(StepContent, { children: step.active && step.content })
+      ]
+    }),
+    step.name
+  );
+};
+WizardStep.displayName = "WizardStep";
+export {
+  WizardStep
+};