@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/container/wizard/index.js

@@ -1,304 +1,238 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmWizard = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _utils = require("./utils");
-var _WizardContext = _interopRequireDefault(require("./WizardContext"));
-var _wizardStep = require("./wizard-step");
-var _WizardStep = require("./components/WizardStep");
-var _form = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form"));
-var _formUtils = require("@wavemaker-ai/react-runtime/utils/form-utils");
-var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
-var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DEFAULT_CLS = "app-wizard panel clearfix";
-var BODY_CLASS = "app-wizard-body panel-body";
-
-// Main Wizard Component
-var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var listener = props.listener,
-    _props$stepstyle = props.stepstyle,
-    stepstyle = _props$stepstyle === void 0 ? "auto" : _props$stepstyle,
-    _props$actionsalignme = props.actionsalignment,
-    actionsalignment = _props$actionsalignme === void 0 ? "right" : _props$actionsalignme,
-    _props$defaultstep = props.defaultstep,
-    defaultstep = _props$defaultstep === void 0 ? "none" : _props$defaultstep,
-    _props$defaultstepind = props.defaultstepindex,
-    defaultstepindex = _props$defaultstepind === void 0 ? 0 : _props$defaultstepind,
-    _props$cancelable = props.cancelable,
-    cancelable = _props$cancelable === void 0 ? true : _props$cancelable,
-    _props$enablenext = props.enablenext,
-    enablenext = _props$enablenext === void 0 ? false : _props$enablenext,
-    _props$nextbtnlabel = props.nextbtnlabel,
-    nextbtnlabel = _props$nextbtnlabel === void 0 ? "Next" : _props$nextbtnlabel,
-    _props$previousbtnlab = props.previousbtnlabel,
-    previousbtnlabel = _props$previousbtnlab === void 0 ? "Previous" : _props$previousbtnlab,
-    _props$donebtnlabel = props.donebtnlabel,
-    donebtnlabel = _props$donebtnlabel === void 0 ? "Done" : _props$donebtnlabel,
-    _props$cancelbtnlabel = props.cancelbtnlabel,
-    cancelbtnlabel = _props$cancelbtnlabel === void 0 ? "Cancel" : _props$cancelbtnlabel,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "static" : _props$type,
-    _props$dataset = props.dataset,
-    dataset = _props$dataset === void 0 ? [] : _props$dataset,
-    _props$nodatamessage = props.nodatamessage,
-    nodatamessage = _props$nodatamessage === void 0 ? "No Data Found" : _props$nodatamessage,
-    children = props.children,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "classic" : _props$className,
-    styles = props.styles,
-    _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    onCancel = props.onCancel,
-    onDone = props.onDone,
-    message = props.message,
-    _props$orientation = props.orientation,
-    orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
-    _props$alternativeLab = props.alternativeLabel,
-    alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
-    _props$nonLinear = props.nonLinear,
-    nonLinear = _props$nonLinear === void 0 ? true : _props$nonLinear,
-    connector = props.connector,
-    width = props.width,
-    height = props.height,
-    render = props.render,
-    _props$standalone = props.standalone,
-    standalone = _props$standalone === void 0 ? false : _props$standalone;
-  var _useState = (0, _react.useState)([]),
-    steps = _useState[0],
-    setSteps = _useState[1];
-  var _useState2 = (0, _react.useState)(message || {
-      caption: "",
-      type: ""
-    }),
-    wizardMessage = _useState2[0],
-    setWizardMessage = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isInitialized = _useState3[0],
-    setIsInitialized = _useState3[1];
-  var formRefs = (0, _react.useRef)({});
-  var stepContainerRefs = (0, _react.useRef)({});
-  var navIndexRef = (0, _react.useRef)(-1);
-  var _useState4 = (0, _react.useState)(false),
-    formReady = _useState4[0],
-    setFormReady = _useState4[1];
-
-  // Detect if wizard is inside an outer form
-  var parentFormContext = (0, _formContext.useParentFormData)();
-  var isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
-
-  // Create dynamic steps callback
-  var createDynamicSteps = (0, _react.useCallback)(function (datasetItems, startIndex) {
-    return datasetItems.map(function (item, index) {
-      index = startIndex || index;
-      var stepData = render ? render(item, index, datasetItems) : item;
-      var stepProps = (stepData === null || stepData === void 0 ? void 0 : stepData.props) || {};
-      if (/*#__PURE__*/(0, _react.isValidElement)(stepData)) {
-        var _stepData$props;
-        if (stepData.type === _wizardStep.WmWizardstep) {
-          stepProps = stepData.props || {};
-        } else if ((_stepData$props = stepData.props) !== null && _stepData$props !== void 0 && _stepData$props.children) {
-          var _stepData$props2;
-          var childrenArray = _react.Children.toArray((_stepData$props2 = stepData.props) === null || _stepData$props2 === void 0 ? void 0 : _stepData$props2.children);
-          var firstWizardStep = childrenArray.find(function (child) {
-            return /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _wizardStep.WmWizardstep;
+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, jsxs } from "react/jsx-runtime";
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  isValidElement,
+  cloneElement,
+  useRef,
+  Children
+} from "react";
+import { Box, Typography, Stepper } from "@mui/material";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  getNextValidStep,
+  getStepByName,
+  getStepByIndex,
+  handleNavigation,
+  extendNextFn,
+  extendPrevFn,
+  getPrevValidStep,
+  appendDatasetSteps,
+  trimStepsToLength
+} from "./utils";
+import WizardContext from "./WizardContext";
+import { WmWizardstep } from "./wizard-step";
+import { WizardStep } from "./components/WizardStep";
+import WmForm from "../../data/form";
+import { getFormData } from "../../../utils/form-utils";
+import { useParentFormData } from "../../data/form/form-context";
+import isEqual from "lodash-es/isEqual";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLS = "app-wizard panel clearfix";
+const BODY_CLASS = "app-wizard-body panel-body";
+const WmWizard = memo(
+  (props) => {
+    const {
+      listener,
+      stepstyle = "auto",
+      actionsalignment = "right",
+      defaultstep = "none",
+      defaultstepindex = 0,
+      cancelable = true,
+      enablenext = false,
+      nextbtnlabel = "Next",
+      previousbtnlabel = "Previous",
+      donebtnlabel = "Done",
+      cancelbtnlabel = "Cancel",
+      type = "static",
+      dataset = [],
+      nodatamessage = "No Data Found",
+      children,
+      className = "classic",
+      styles,
+      name = "",
+      onCancel,
+      onDone,
+      message,
+      orientation = "horizontal",
+      alternativeLabel = false,
+      nonLinear = true,
+      connector,
+      width,
+      height,
+      render,
+      standalone = false
+    } = props;
+    const [steps, setSteps] = useState([]);
+    const [wizardMessage, setWizardMessage] = useState(message || { caption: "", type: "" });
+    const [isInitialized, setIsInitialized] = useState(false);
+    const formRefs = useRef({});
+    const stepContainerRefs = useRef({});
+    const navIndexRef = useRef(-1);
+    const [formReady, setFormReady] = useState(false);
+    const parentFormContext = useParentFormData();
+    const isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
+    const createDynamicSteps = useCallback(
+      (datasetItems, startIndex) => {
+        return datasetItems.map((item, index) => {
+          var _a, _b;
+          index = startIndex || index;
+          const stepData = render ? render(item, index, datasetItems) : item;
+          let stepProps = (stepData == null ? void 0 : stepData.props) || {};
+          if (isValidElement(stepData)) {
+            if (stepData.type === WmWizardstep) {
+              stepProps = stepData.props || {};
+            } else if ((_a = stepData.props) == null ? void 0 : _a.children) {
+              const childrenArray = Children.toArray(
+                (_b = stepData.props) == null ? void 0 : _b.children
+              );
+              const firstWizardStep = childrenArray.find(
+                (child) => isValidElement(child) && child.type === WmWizardstep
+              );
+              if (isValidElement(firstWizardStep)) {
+                stepProps = firstWizardStep.props || {};
+              }
+            }
+          }
+          return __spreadProps(__spreadValues({}, stepProps), {
+            name: `step_${index}`,
+            title: stepProps.title || `Step ${index + 1}`,
+            show: stepProps.show !== false,
+            enableskip: stepData.enableskip || false,
+            enableNext: stepData.enableNext !== false,
+            enablePrev: stepData.enablePrev !== false,
+            enableDone: stepData.enableDone !== false,
+            isDone: false,
+            done: false,
+            active: index === defaultstepindex,
+            disabled: false,
+            isValid: true,
+            isInitialized: false,
+            isdynamic: true,
+            dynamicStepIndex: index,
+            render: stepProps.render
           });
-          if (/*#__PURE__*/(0, _react.isValidElement)(firstWizardStep)) {
-            stepProps = firstWizardStep.props || {};
+        });
+      },
+      [defaultstepindex]
+    );
+    const currentStep = useMemo(() => steps.find((step) => step.active) || null, [steps]);
+    const visibleSteps = useMemo(() => steps.filter((step) => step.show), [steps]);
+    const currentStepIndex = useMemo(() => {
+      if (!currentStep) return -1;
+      return visibleSteps.findIndex((step) => step.name === currentStep.name);
+    }, [currentStep, visibleSteps]);
+    useEffect(() => {
+      navIndexRef.current = currentStepIndex;
+    }, [currentStepIndex]);
+    const hasNextStep = useMemo(
+      () => currentStepIndex < visibleSteps.length - 1,
+      [currentStepIndex, visibleSteps]
+    );
+    const hasPrevStep = useMemo(() => currentStepIndex > 0, [currentStepIndex]);
+    const showDoneBtn = useMemo(
+      () => !hasNextStep && (currentStep == null ? void 0 : currentStep.enableDone) !== false,
+      [hasNextStep, currentStep]
+    );
+    const [isStepValid, setIsStepValid] = useState(true);
+    const [formValiditySignature, setFormValiditySignature] = useState("");
+    const formValidityMapRef = useRef(/* @__PURE__ */ new Map());
+    const getStepForms = useCallback((stepName) => {
+      var _a, _b;
+      const formElOrList = (_a = formRefs.current) == null ? void 0 : _a[stepName];
+      if (formElOrList) {
+        const cachedForms = Array.isArray(formElOrList) ? formElOrList : [formElOrList];
+        const stepContainer = (_b = cachedForms[0]) == null ? void 0 : _b.closest(".app-wizard-step-container");
+        if (stepContainer) {
+          const allForms = Array.from(stepContainer.querySelectorAll("form"));
+          if (allForms.length > 0) {
+            formRefs.current[stepName] = allForms.length === 1 ? allForms[0] : allForms;
+            return allForms;
           }
         }
+        return cachedForms;
       }
-      return _objectSpread(_objectSpread({}, stepProps), {}, {
-        name: "step_".concat(index),
-        title: stepProps.title || "Step ".concat(index + 1),
-        show: stepProps.show !== false,
-        enableskip: stepData.enableskip || false,
-        enableNext: stepData.enableNext !== false,
-        enablePrev: stepData.enablePrev !== false,
-        enableDone: stepData.enableDone !== false,
-        isDone: false,
-        done: false,
-        active: index === defaultstepindex,
-        disabled: false,
-        isValid: true,
-        isInitialized: false,
-        isdynamic: true,
-        dynamicStepIndex: index,
-        render: stepProps.render
-      });
-    });
-  }, [defaultstepindex]);
-
-  // Computed properties
-  var currentStep = (0, _react.useMemo)(function () {
-    return steps.find(function (step) {
-      return step.active;
-    }) || null;
-  }, [steps]);
-  var visibleSteps = (0, _react.useMemo)(function () {
-    return steps.filter(function (step) {
-      return step.show;
-    });
-  }, [steps]);
-  var currentStepIndex = (0, _react.useMemo)(function () {
-    if (!currentStep) return -1;
-    return visibleSteps.findIndex(function (step) {
-      return step.name === currentStep.name;
-    });
-  }, [currentStep, visibleSteps]);
-
-  // Sync navigation ref whenever the visible current index changes
-  (0, _react.useEffect)(function () {
-    navIndexRef.current = currentStepIndex;
-  }, [currentStepIndex]);
-  var _hasNextStep = (0, _react.useMemo)(function () {
-    return currentStepIndex < visibleSteps.length - 1;
-  }, [currentStepIndex, visibleSteps]);
-  var hasPrevStep = (0, _react.useMemo)(function () {
-    return currentStepIndex > 0;
-  }, [currentStepIndex]);
-  var showDoneBtn = (0, _react.useMemo)(function () {
-    return !_hasNextStep && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableDone) !== false;
-  }, [_hasNextStep, currentStep]);
-  var _useState5 = (0, _react.useState)(true),
-    isStepValid = _useState5[0],
-    setIsStepValid = _useState5[1];
-  var _useState6 = (0, _react.useState)(""),
-    formValiditySignature = _useState6[0],
-    setFormValiditySignature = _useState6[1];
-  var formValidityMapRef = (0, _react.useRef)(new Map());
-
-  // Helper to get all forms in the current step container
-  var getStepForms = (0, _react.useCallback)(function (stepName) {
-    var _formRefs$current;
-    // First try cached formRefs
-    var formElOrList = (_formRefs$current = formRefs.current) === null || _formRefs$current === void 0 ? void 0 : _formRefs$current[stepName];
-    if (formElOrList) {
-      var _cachedForms$;
-      var cachedForms = Array.isArray(formElOrList) ? formElOrList : [formElOrList];
-      // Re-query the DOM to get ALL forms (list items may have rendered after initial cache)
-      var stepContainer = (_cachedForms$ = cachedForms[0]) === null || _cachedForms$ === void 0 ? void 0 : _cachedForms$.closest(".app-wizard-step-container");
-      if (stepContainer) {
-        var allForms = Array.from(stepContainer.querySelectorAll("form"));
-        if (allForms.length > 0) {
-          // Update cache with all forms
-          formRefs.current[stepName] = allForms.length === 1 ? allForms[0] : allForms;
-          return allForms;
+      return [];
+    }, []);
+    useEffect(() => {
+      const stepName = currentStep == null ? void 0 : currentStep.name;
+      if (!stepName) return;
+      const stepContainer = stepContainerRefs.current[stepName];
+      if (!stepContainer) return;
+      formValidityMapRef.current.clear();
+      setFormValiditySignature("");
+      const initialForms = getStepForms(stepName);
+      if (initialForms.length === 0) return;
+      const onValidity = (e) => {
+        const form = e.target.closest("form");
+        if (!form) return;
+        const detail = e.detail;
+        const isValid = (detail == null ? void 0 : detail.isValid) !== false;
+        const currentForms = getStepForms(stepName);
+        formValidityMapRef.current.set(form, isValid);
+        const allFormsValid = currentForms.every((f) => {
+          const validity = formValidityMapRef.current.get(f);
+          return validity === void 0 || validity === true;
+        });
+        setFormValiditySignature(allFormsValid ? "1" : "0");
+      };
+      stepContainer.addEventListener("wm:form-validity", onValidity);
+      return () => {
+        stepContainer.removeEventListener("wm:form-validity", onValidity);
+      };
+    }, [currentStep, formReady, getStepForms]);
+    const parentFormIsValid = parentFormContext == null ? void 0 : parentFormContext.isValid;
+    useEffect(() => {
+      const validateStep = () => {
+        var _a;
+        if (!currentStep) return;
+        const forms = getStepForms(currentStep.name);
+        if (forms.length === 0) {
+          if (isInsideOuterForm && parentFormContext) {
+            setIsStepValid(parentFormContext.isValid === true);
+            return;
+          }
+          setIsStepValid(true);
+          return;
         }
-      }
-      return cachedForms;
-    }
-    return [];
-  }, []);
-  (0, _react.useEffect)(function () {
-    var stepName = currentStep === null || currentStep === void 0 ? void 0 : currentStep.name;
-    if (!stepName) return;
-
-    // Get step container for event delegation
-    var stepContainer = stepContainerRefs.current[stepName];
-    if (!stepContainer) return;
-
-    // Reset validity state for new step
-    formValidityMapRef.current.clear();
-    setFormValiditySignature("");
-
-    // Only set up form validity tracking if forms are present inside the step
-    var initialForms = getStepForms(stepName);
-
-    // When inside outer form with no embedded forms, validity comes from context
-    // No DOM event listener needed - parentFormContext.isValid is reactive
-    if (initialForms.length === 0) return;
-
-    // Use event delegation - listen on container, forms bubble their events up
-    var onValidity = function onValidity(e) {
-      // Find the form that emitted this event (could be e.target or closest form)
-      var form = e.target.closest("form");
-      if (!form) return;
-      var detail = e.detail;
-      var isValid = (detail === null || detail === void 0 ? void 0 : detail.isValid) !== false;
-
-      // Re-query forms to get current list (handles dynamically added forms from lists)
-      var currentForms = getStepForms(stepName);
-
-      // Track validity per form element
-      formValidityMapRef.current.set(form, isValid);
-
-      // Check if ALL current forms are valid
-      var allFormsValid = currentForms.every(function (f) {
-        var validity = formValidityMapRef.current.get(f);
-        // If we haven't received an event for this form yet, assume valid
-        return validity === undefined || validity === true;
-      });
-      setFormValiditySignature(allFormsValid ? "1" : "0");
-    };
-
-    // Listen on container - captures events from all forms, including dynamically added ones
-    stepContainer.addEventListener("wm:form-validity", onValidity);
-    return function () {
-      stepContainer.removeEventListener("wm:form-validity", onValidity);
-    };
-  }, [currentStep, formReady, getStepForms]);
-  var parentFormIsValid = parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.isValid;
-  (0, _react.useEffect)(function () {
-    var validateStep = function validateStep() {
-      if (!currentStep) return;
-
-      // Dynamically query for all forms (handles list items that render after initial mount)
-      var forms = getStepForms(currentStep.name);
-      if (forms.length === 0) {
-        // When inside outer form with no embedded forms, use context-based validity
-        if (isInsideOuterForm && parentFormContext) {
-          setIsStepValid(parentFormContext.isValid === true);
+        const allFormsHidden = forms.every((form) => {
+          var _a2;
+          return form.hidden || ((_a2 = form.parentElement) == null ? void 0 : _a2.hidden);
+        });
+        if (allFormsHidden) {
+          setIsStepValid(true);
           return;
         }
-        setIsStepValid(true);
-        return;
-      }
-
-      // Check if all forms are hidden
-      var allFormsHidden = forms.every(function (form) {
-        var _form$parentElement;
-        return form.hidden || ((_form$parentElement = form.parentElement) === null || _form$parentElement === void 0 ? void 0 : _form$parentElement.hidden);
-      });
-      if (allFormsHidden) {
-        setIsStepValid(true);
-        return;
-      }
-
-      // Check if any form has fields and collect validity
-      var hasAnyFields = false;
-      var allFormsValid = true;
-      var _iterator = _createForOfIteratorHelper(forms),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _form$parentElement2;
-          var form = _step.value;
-          if (form.hidden || (_form$parentElement2 = form.parentElement) !== null && _form$parentElement2 !== void 0 && _form$parentElement2.hidden) continue;
-          var formdata = (0, _formUtils.getFormData)({
-            current: form
-          });
+        let hasAnyFields = false;
+        let allFormsValid = true;
+        for (const form of forms) {
+          if (form.hidden || ((_a = form.parentElement) == null ? void 0 : _a.hidden)) continue;
+          const formdata = getFormData({ current: form });
           if (!formdata) continue;
-          var hasFields = Object.keys(formdata.values || {}).length > 0;
+          const hasFields = Object.keys(formdata.values || {}).length > 0;
           if (hasFields) {
             hasAnyFields = true;
             if (formdata.isValid === false) {
@@ -306,662 +240,598 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
             }
           }
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      if (!hasAnyFields) {
-        setIsStepValid(true);
-        return;
-      }
-
-      // Use formValiditySignature which comes from the wm:form-validity event
-      // This reflects the most up-to-date validity state from the form
-      // "1" = valid, "0" = invalid, "" = no event received yet
-      if (formValiditySignature === "") {
-        // No validity event received yet - use collected validity from forms
-        setIsStepValid(allFormsValid);
-      } else {
-        // Use the validity from the event
-        setIsStepValid(formValiditySignature === "1");
-      }
-    };
-    validateStep();
-  }, [currentStep, formValiditySignature, formReady, getStepForms, isInsideOuterForm, parentFormContext, parentFormIsValid]);
-  var enableNext = (0, _react.useMemo)(function () {
-    var enablenextBool = typeof enablenext === "string" ? enablenext.toLowerCase() === "true" || enablenext === "1" : Boolean(enablenext);
-    return enablenextBool || (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableNext) !== false && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.isValid) !== false && isStepValid;
-  }, [enablenext, currentStep, isStepValid]);
-  var enablePrev = (0, _react.useMemo)(function () {
-    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enablePrev) !== false;
-  }, [currentStep]);
-  var enableDone = (0, _react.useMemo)(function () {
-    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableDone) !== false && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.isValid) !== false && isStepValid;
-  }, [currentStep, isStepValid]);
-  var isFirstStep = (0, _react.useMemo)(function () {
-    return currentStepIndex === 0;
-  }, [currentStepIndex]);
-  var isLastStep = (0, _react.useMemo)(function () {
-    return currentStepIndex === visibleSteps.length - 1;
-  }, [currentStepIndex, visibleSteps]);
-  var computedStepClass = (0, _react.useMemo)(function () {
-    return stepstyle === "justified" ? "justified" : "auto";
-  }, [stepstyle]);
-
-  // Step click handler
-  var onStepHeaderClick = (0, _react.useCallback)(function (event, step) {
-    if ((step.done || step.isDone || nonLinear && type === "dynamic") && step.show && !step.disabled) {
-      setSteps(function (prevSteps) {
-        return prevSteps.map(function (s) {
-          var stepIndex = prevSteps.findIndex(function (ps) {
-            return ps.name === s.name;
-          });
-          var targetIndex = prevSteps.findIndex(function (ps) {
-            return ps.name === step.name;
-          });
-          return _objectSpread(_objectSpread({}, s), {}, {
-            active: s.name === step.name,
-            isDone: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex,
-            done: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex || s.name === step.name && targetIndex > 0,
-            disabled: false,
-            // Ensure enableNext and isValid are preserved when activating a step
-            enableNext: s.name === step.name ? true : s.enableNext,
-            isValid: s.name === step.name ? true : s.isValid
-          });
-        });
-      });
-    }
-  }, [nonLinear, type]);
-  var handleStepClick = (0, _react.useCallback)(function (index) {
-    var step = visibleSteps[index];
-    if (step && step.show && !step.disabled) {
-      if (step.done || step.isDone) {
-        onStepHeaderClick({}, step);
-      }
-    }
-  }, [visibleSteps, nonLinear, onStepHeaderClick, type]);
-
-  // Step management functions
-  var updateStep = (0, _react.useCallback)(function (stepName, updates) {
-    setSteps(function (prevSteps) {
-      var stepIndex = prevSteps.findIndex(function (step) {
-        return step.name === stepName;
-      });
-      if (stepIndex === -1) return prevSteps;
-      var existing = prevSteps[stepIndex];
-      var hasChanges = Object.keys(updates).some(function (key) {
-        return existing[key] !== updates[key];
-      });
-      if (!hasChanges) return prevSteps;
-      var newSteps = (0, _toConsumableArray2["default"])(prevSteps);
-      newSteps[stepIndex] = _objectSpread(_objectSpread({}, existing), updates);
-      return newSteps;
-    });
-  }, []);
-
-  // Navigation functions
-  var _next = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var eventName,
-      fromIndex,
-      fromStep,
-      nextStep,
-      nextIndex,
-      _fromStep$onSkip,
-      response,
-      _fromStep$onNext,
-      _response,
-      _args = arguments;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          eventName = _args.length > 0 && _args[0] !== undefined ? _args[0] : "next";
-          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
-          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
-          if (fromStep) {
-            _context.next = 5;
-            break;
-          }
-          return _context.abrupt("return");
-        case 5:
-          nextStep = (0, _utils.getNextValidStep)(fromIndex + 1, visibleSteps);
-          if (nextStep) {
-            _context.next = 8;
-            break;
-          }
-          return _context.abrupt("return");
-        case 8:
-          nextIndex = visibleSteps.findIndex(function (s) {
-            return s.name === nextStep.name;
-          });
-          if (!(eventName === "skip")) {
-            _context.next = 19;
-            break;
-          }
-          response = (_fromStep$onSkip = fromStep.onSkip) === null || _fromStep$onSkip === void 0 ? void 0 : _fromStep$onSkip.call(fromStep, fromStep, fromStep, fromIndex);
-          if (!(response !== undefined)) {
-            _context.next = 16;
-            break;
-          }
-          _context.next = 14;
-          return (0, _utils.handleNavigation)(response, function () {
-            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
-          });
-        case 14:
-          _context.next = 17;
-          break;
-        case 16:
-          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
-        case 17:
-          _context.next = 30;
-          break;
-        case 19:
-          if (!(fromStep.isValid && eventName === "next")) {
-            _context.next = 29;
-            break;
+        if (!hasAnyFields) {
+          setIsStepValid(true);
+          return;
+        }
+        if (formValiditySignature === "") {
+          setIsStepValid(allFormsValid);
+        } else {
+          setIsStepValid(formValiditySignature === "1");
+        }
+      };
+      validateStep();
+    }, [
+      currentStep,
+      formValiditySignature,
+      formReady,
+      getStepForms,
+      isInsideOuterForm,
+      parentFormContext,
+      parentFormIsValid
+    ]);
+    const enableNext = useMemo(() => {
+      const enablenextBool = typeof enablenext === "string" ? enablenext.toLowerCase() === "true" || enablenext === "1" : Boolean(enablenext);
+      return enablenextBool || (currentStep == null ? void 0 : currentStep.enableNext) !== false && (currentStep == null ? void 0 : currentStep.isValid) !== false && isStepValid;
+    }, [enablenext, currentStep, isStepValid]);
+    const enablePrev = useMemo(() => (currentStep == null ? void 0 : currentStep.enablePrev) !== false, [currentStep]);
+    const enableDone = useMemo(
+      () => (currentStep == null ? void 0 : currentStep.enableDone) !== false && (currentStep == null ? void 0 : currentStep.isValid) !== false && isStepValid,
+      [currentStep, isStepValid]
+    );
+    const isFirstStep = useMemo(() => currentStepIndex === 0, [currentStepIndex]);
+    const isLastStep = useMemo(
+      () => currentStepIndex === visibleSteps.length - 1,
+      [currentStepIndex, visibleSteps]
+    );
+    const computedStepClass = useMemo(
+      () => stepstyle === "justified" ? "justified" : "auto",
+      [stepstyle]
+    );
+    const onStepHeaderClick = useCallback(
+      (event, step) => {
+        if ((step.done || step.isDone || nonLinear && type === "dynamic") && step.show && !step.disabled) {
+          setSteps(
+            (prevSteps) => prevSteps.map((s) => {
+              const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
+              const targetIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+              return __spreadProps(__spreadValues({}, s), {
+                active: s.name === step.name,
+                isDone: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex,
+                done: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex || s.name === step.name && targetIndex > 0,
+                disabled: false,
+                // Ensure enableNext and isValid are preserved when activating a step
+                enableNext: s.name === step.name ? true : s.enableNext,
+                isValid: s.name === step.name ? true : s.isValid
+              });
+            })
+          );
+        }
+      },
+      [nonLinear, type]
+    );
+    const handleStepClick = useCallback(
+      (index) => {
+        const step = visibleSteps[index];
+        if (step && step.show && !step.disabled) {
+          if (step.done || step.isDone) {
+            onStepHeaderClick({}, step);
           }
-          _response = (_fromStep$onNext = fromStep.onNext) === null || _fromStep$onNext === void 0 ? void 0 : _fromStep$onNext.call(fromStep, fromStep, fromStep, fromIndex);
-          if (!(_response !== undefined)) {
-            _context.next = 26;
-            break;
+        }
+      },
+      [visibleSteps, nonLinear, onStepHeaderClick, type]
+    );
+    const updateStep = useCallback((stepName, updates) => {
+      setSteps((prevSteps) => {
+        const stepIndex = prevSteps.findIndex((step) => step.name === stepName);
+        if (stepIndex === -1) return prevSteps;
+        const existing = prevSteps[stepIndex];
+        const hasChanges = Object.keys(updates).some(
+          (key) => existing[key] !== updates[key]
+        );
+        if (!hasChanges) return prevSteps;
+        const newSteps = [...prevSteps];
+        newSteps[stepIndex] = __spreadValues(__spreadValues({}, existing), updates);
+        return newSteps;
+      });
+    }, []);
+    const next = useCallback(
+      async (eventName = "next") => {
+        var _a, _b;
+        const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+        const fromStep = getStepByIndex(fromIndex, visibleSteps);
+        if (!fromStep) return;
+        const nextStep = getNextValidStep(fromIndex + 1, visibleSteps);
+        if (!nextStep) return;
+        const nextIndex = visibleSteps.findIndex((s) => s.name === nextStep.name);
+        if (eventName === "skip") {
+          const response = (_a = fromStep.onSkip) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
+          if (response !== void 0) {
+            await handleNavigation(
+              response,
+              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+            );
+          } else {
+            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
           }
-          _context.next = 24;
-          return (0, _utils.handleNavigation)(_response, function () {
-            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
-          });
-        case 24:
-          _context.next = 27;
-          break;
-        case 26:
-          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
-        case 27:
-          _context.next = 30;
-          break;
-        case 29:
-          if (enablenext && !fromStep.isValid) {
-            console.warn("Cannot proceed: current step is invalid");
+        } else if (fromStep.isValid && eventName === "next") {
+          const response = (_b = fromStep.onNext) == null ? void 0 : _b.call(fromStep, fromStep, fromStep, fromIndex);
+          if (response !== void 0) {
+            await handleNavigation(
+              response,
+              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+            );
           } else {
-            (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
           }
-        case 30:
-          // update ref to reflect the logical next position immediately
-          navIndexRef.current = nextIndex;
-          setFormReady(false);
-        case 32:
-        case "end":
-          return _context.stop();
+        } else if (enablenext && !fromStep.isValid) {
+          console.warn("Cannot proceed: current step is invalid");
+        } else {
+          extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+        }
+        navIndexRef.current = nextIndex;
+        setFormReady(false);
+      },
+      [currentStepIndex, visibleSteps, enablenext]
+    );
+    const prev = useCallback(async () => {
+      var _a;
+      const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+      const fromStep = getStepByIndex(fromIndex, visibleSteps);
+      if (!fromStep) return;
+      const targetStep = getPrevValidStep(fromIndex - 1, visibleSteps);
+      if (!targetStep) return;
+      const prevIndex = visibleSteps.findIndex((s) => s.name === targetStep.name);
+      const response = (_a = fromStep.onPrev) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
+      if (response !== void 0) {
+        await handleNavigation(
+          response,
+          () => extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps)
+        );
+      } else {
+        extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps);
       }
-    }, _callee);
-  })), [currentStepIndex, visibleSteps, enablenext]);
-  var prev = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var _fromStep$onPrev;
-    var fromIndex, fromStep, targetStep, prevIndex, response;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
-          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
-          if (fromStep) {
-            _context2.next = 4;
-            break;
-          }
-          return _context2.abrupt("return");
-        case 4:
-          targetStep = (0, _utils.getPrevValidStep)(fromIndex - 1, visibleSteps);
-          if (targetStep) {
-            _context2.next = 7;
-            break;
-          }
-          return _context2.abrupt("return");
-        case 7:
-          prevIndex = visibleSteps.findIndex(function (s) {
-            return s.name === targetStep.name;
-          });
-          response = (_fromStep$onPrev = fromStep.onPrev) === null || _fromStep$onPrev === void 0 ? void 0 : _fromStep$onPrev.call(fromStep, fromStep, fromStep, fromIndex);
-          if (!(response !== undefined)) {
-            _context2.next = 14;
-            break;
+      navIndexRef.current = prevIndex;
+      setFormReady(false);
+    }, [currentStepIndex, visibleSteps]);
+    const registerStep = useCallback((stepData) => {
+      setSteps((prevSteps) => {
+        const existingIndex = prevSteps.findIndex((step) => step.name === stepData.name);
+        if (existingIndex >= 0) {
+          const existing = prevSteps[existingIndex];
+          const hasChanges = Object.keys(stepData).some(
+            (key) => existing[key] !== stepData[key]
+          );
+          if (hasChanges) {
+            const newSteps = [...prevSteps];
+            newSteps[existingIndex] = __spreadValues(__spreadValues({}, existing), stepData);
+            return newSteps;
           }
-          _context2.next = 12;
-          return (0, _utils.handleNavigation)(response, function () {
-            return (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
-          });
-        case 12:
-          _context2.next = 15;
-          break;
-        case 14:
-          (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
-        case 15:
-          navIndexRef.current = prevIndex;
-          setFormReady(false);
-        case 17:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })), [currentStepIndex, visibleSteps]);
-  var registerStep = (0, _react.useCallback)(function (stepData) {
-    setSteps(function (prevSteps) {
-      var existingIndex = prevSteps.findIndex(function (step) {
-        return step.name === stepData.name;
+          return prevSteps;
+        }
+        return [...prevSteps, stepData];
       });
-      if (existingIndex >= 0) {
-        var existing = prevSteps[existingIndex];
-        var hasChanges = Object.keys(stepData).some(function (key) {
-          return existing[key] !== stepData[key];
-        });
-        if (hasChanges) {
-          var newSteps = (0, _toConsumableArray2["default"])(prevSteps);
-          newSteps[existingIndex] = _objectSpread(_objectSpread({}, existing), stepData);
-          return newSteps;
+    }, []);
+    const skip = useCallback(() => {
+      next("skip");
+    }, [next]);
+    const done = useCallback(() => {
+      if (currentStep) {
+        updateStep(currentStep.name, { isDone: true, done: true });
+        if (onDone) {
+          onDone(currentStep, steps);
         }
-        return prevSteps;
       }
-      return [].concat((0, _toConsumableArray2["default"])(prevSteps), [stepData]);
-    });
-  }, []);
-  var _skip = (0, _react.useCallback)(function () {
-    _next("skip");
-  }, [_next]);
-  var _done = (0, _react.useCallback)(function () {
-    if (currentStep) {
-      updateStep(currentStep.name, {
-        isDone: true,
-        done: true
-      });
-      if (onDone) {
-        onDone(currentStep, steps);
+    }, [currentStep, updateStep, onDone, steps]);
+    const cancel = useCallback(() => {
+      if (onCancel) {
+        onCancel(currentStep, steps);
       }
-    }
-  }, [currentStep, updateStep, onDone, steps]);
-  var _cancel = (0, _react.useCallback)(function () {
-    if (onCancel) {
-      onCancel(currentStep, steps);
-    }
-  }, [onCancel, steps]);
-  var _gotoStep = (0, _react.useCallback)(function (step) {
-    var _targetStep;
-    var gotoStepIndex;
-    var targetStep = null;
-    if (typeof step === "string") {
-      gotoStepIndex = steps.map(function (s) {
-        return s.name;
-      }).indexOf(step);
-      if (gotoStepIndex === -1) {
-        console.error("Could not find step '".concat(step, "'"));
-        return;
+    }, [onCancel, steps]);
+    const gotoStep = useCallback(
+      (step) => {
+        let gotoStepIndex;
+        let targetStep = null;
+        if (typeof step === "string") {
+          gotoStepIndex = steps.map((s) => s.name).indexOf(step);
+          if (gotoStepIndex === -1) {
+            console.error(`Could not find step '${step}'`);
+            return;
+          }
+          targetStep = steps[gotoStepIndex];
+        } else if (typeof step === "number" && step >= 0) {
+          gotoStepIndex = step;
+          targetStep = getStepByIndex(step, visibleSteps);
+        } else {
+          console.error("Invalid step name or index provided");
+          return;
+        }
+        if (targetStep == null ? void 0 : targetStep.show) {
+          const visIndex = visibleSteps.findIndex((s) => s.name === (targetStep == null ? void 0 : targetStep.name));
+          if (visIndex >= 0) navIndexRef.current = visIndex;
+          onStepHeaderClick({}, targetStep);
+        } else {
+          console.error("The gotoStep function cannot navigate to hidden steps");
+        }
+      },
+      [steps, visibleSteps, onStepHeaderClick]
+    );
+    const setDefaultStep = useCallback(
+      (step) => {
+        if (step && step.show) {
+          setSteps(
+            (prevSteps) => prevSteps.map((s, index) => {
+              const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
+              const defaultIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+              return __spreadProps(__spreadValues({}, s), {
+                active: s.name === step.name,
+                isDone: false,
+                done: stepIndex < defaultIndex,
+                isInitialized: s.name === step.name ? true : s.isInitialized,
+                // Ensure enableNext and isValid are preserved for the active step
+                enableNext: s.name === step.name ? true : s.enableNext,
+                isValid: s.name === step.name ? true : s.isValid
+              });
+            })
+          );
+          setTimeout(() => {
+            if (step.onLoad) {
+              const stepIndex = visibleSteps.findIndex((s) => s.name === step.name);
+              step.onLoad(step, stepIndex);
+            }
+          }, 100);
+        } else {
+          const nextValidStep = getNextValidStep(0, visibleSteps);
+          if (nextValidStep) {
+            setDefaultStep(nextValidStep);
+          }
+        }
+      },
+      [visibleSteps]
+    );
+    const showSignature = steps.map(
+      (s) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[s.name]) == null ? void 0 : _b.show) === false || ((_d = (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[s.name]) == null ? void 0 : _d.show) === "false" ? "0" : "1";
       }
-      targetStep = steps[gotoStepIndex];
-    } else if (typeof step === "number" && step >= 0) {
-      gotoStepIndex = step;
-      targetStep = (0, _utils.getStepByIndex)(step, visibleSteps);
-    } else {
-      console.error("Invalid step name or index provided");
-      return;
-    }
-    if ((_targetStep = targetStep) !== null && _targetStep !== void 0 && _targetStep.show) {
-      var visIndex = visibleSteps.findIndex(function (s) {
-        var _targetStep2;
-        return s.name === ((_targetStep2 = targetStep) === null || _targetStep2 === void 0 ? void 0 : _targetStep2.name);
+    ).join("|");
+    useEffect(() => {
+      if (!(listener == null ? void 0 : listener.Widgets)) return;
+      steps.forEach((step, index) => {
+        var _a;
+        const widgetShow = (_a = listener.Widgets[step.name]) == null ? void 0 : _a.show;
+        if ((widgetShow === false || widgetShow === "false") && step.show !== false) {
+          updateStep(step.name, { show: false, enableskip: false });
+          const prevStep = steps[index - 1];
+          if (prevStep && step.active) {
+            updateStep(prevStep.name, { active: true });
+            navIndexRef.current = index - 1;
+          }
+        }
       });
-      if (visIndex >= 0) navIndexRef.current = visIndex;
-      onStepHeaderClick({}, targetStep);
-    } else {
-      console.error("The gotoStep function cannot navigate to hidden steps");
-    }
-  }, [steps, visibleSteps, onStepHeaderClick]);
-
-  // Initialize default step
-  var setDefaultStep = (0, _react.useCallback)(function (step) {
-    if (step && step.show) {
-      setSteps(function (prevSteps) {
-        return prevSteps.map(function (s, index) {
-          var stepIndex = prevSteps.findIndex(function (ps) {
-            return ps.name === s.name;
-          });
-          var defaultIndex = prevSteps.findIndex(function (ps) {
-            return ps.name === step.name;
-          });
-          return _objectSpread(_objectSpread({}, s), {}, {
-            active: s.name === step.name,
-            isDone: false,
-            done: stepIndex < defaultIndex,
-            isInitialized: s.name === step.name ? true : s.isInitialized,
-            // Ensure enableNext and isValid are preserved for the active step
-            enableNext: s.name === step.name ? true : s.enableNext,
-            isValid: s.name === step.name ? true : s.isValid
-          });
+    }, [showSignature]);
+    const updateListener = React.useCallback(() => {
+      if (listener && typeof listener.onChange === "function") {
+        listener.onChange(name, {
+          hasNextStep: () => hasNextStep,
+          hasPreviousStep: () => hasPrevStep,
+          hasNoNextStep: () => showDoneBtn,
+          next: () => next("next"),
+          previous: () => prev(),
+          done: () => done(),
+          cancel: () => cancel(),
+          skip: () => skip(),
+          disableNext: () => !enableNext,
+          disablePrevious: () => !enablePrev,
+          disableDone: () => !enableDone,
+          prev,
+          cancelable,
+          nextbtnlabel,
+          previousbtnlabel,
+          donebtnlabel,
+          cancelbtnlabel,
+          actionsalignment,
+          skippable: currentStep == null ? void 0 : currentStep.enableskip,
+          getCurrentStepIndex: () => currentStepIndex,
+          gotoStep: (step) => gotoStep(step),
+          isFirstStep,
+          isLastStep,
+          currentStepIndex,
+          currentStep
         });
-      });
-      setTimeout(function () {
-        if (step.onLoad) {
-          var stepIndex = visibleSteps.findIndex(function (s) {
-            return s.name === step.name;
-          });
-          step.onLoad(step, stepIndex);
-        }
-      }, 100);
-    } else {
-      var nextValidStep = (0, _utils.getNextValidStep)(0, visibleSteps);
-      if (nextValidStep) {
-        setDefaultStep(nextValidStep);
       }
-    }
-  }, [visibleSteps]);
-  var showSignature = steps.map(function (s) {
-    var _listener$Widgets, _listener$Widgets2;
-    return (listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[s.name]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.show) === false || (listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 || (_listener$Widgets2 = _listener$Widgets2[s.name]) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2.show) === "false" ? "0" : "1";
-  }).join("|");
-  (0, _react.useEffect)(function () {
-    if (!(listener !== null && listener !== void 0 && listener.Widgets)) return;
-    steps.forEach(function (step, index) {
-      var _listener$Widgets$ste;
-      var widgetShow = (_listener$Widgets$ste = listener.Widgets[step.name]) === null || _listener$Widgets$ste === void 0 ? void 0 : _listener$Widgets$ste.show;
-      if ((widgetShow === false || widgetShow === "false") && step.show !== false) {
-        updateStep(step.name, {
-          show: false,
-          enableskip: false
-        });
-        var prevStep = steps[index - 1];
-        if (prevStep && step.active) {
-          updateStep(prevStep.name, {
-            active: true
-          });
-          navIndexRef.current = index - 1;
+    }, [
+      hasNextStep,
+      hasPrevStep,
+      showDoneBtn,
+      enableNext,
+      enablePrev,
+      enableDone,
+      cancelable,
+      currentStep == null ? void 0 : currentStep.enableskip,
+      nextbtnlabel,
+      previousbtnlabel,
+      donebtnlabel,
+      cancelbtnlabel,
+      actionsalignment,
+      currentStepIndex,
+      isFirstStep,
+      isLastStep,
+      visibleSteps
+    ]);
+    useEffect(() => {
+      updateListener();
+    }, [updateListener]);
+    useEffect(() => {
+      if (steps.length > 0 && !isInitialized && visibleSteps.length > 0 && type !== "dynamic") {
+        let defaultStepRef = null;
+        if (defaultstep !== "none") {
+          defaultStepRef = getStepByName(defaultstep, steps);
+        } else if (defaultstepindex >= 0 && defaultstepindex < visibleSteps.length) {
+          defaultStepRef = getStepByIndex(defaultstepindex, visibleSteps);
+        } else {
+          defaultStepRef = getNextValidStep(0, visibleSteps);
+        }
+        if (defaultStepRef) {
+          setDefaultStep(defaultStepRef);
+          setIsInitialized(true);
         }
       }
-    });
-  }, [showSignature]);
-  var updateListener = _react["default"].useCallback(function () {
-    if (listener && typeof listener.onChange === "function") {
-      listener.onChange(name, {
-        hasNextStep: function hasNextStep() {
-          return _hasNextStep;
-        },
-        hasPreviousStep: function hasPreviousStep() {
-          return hasPrevStep;
-        },
-        hasNoNextStep: function hasNoNextStep() {
-          return showDoneBtn;
-        },
-        next: function next() {
-          return _next("next");
-        },
-        previous: function previous() {
-          return prev();
-        },
-        done: function done() {
-          return _done();
-        },
-        cancel: function cancel() {
-          return _cancel();
-        },
-        skip: function skip() {
-          return _skip();
-        },
-        disableNext: function disableNext() {
-          return !enableNext;
-        },
-        disablePrevious: function disablePrevious() {
-          return !enablePrev;
-        },
-        disableDone: function disableDone() {
-          return !enableDone;
-        },
-        prev: prev,
-        cancelable: cancelable,
-        nextbtnlabel: nextbtnlabel,
-        previousbtnlabel: previousbtnlabel,
-        donebtnlabel: donebtnlabel,
-        cancelbtnlabel: cancelbtnlabel,
-        actionsalignment: actionsalignment,
-        skippable: currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip,
-        getCurrentStepIndex: function getCurrentStepIndex() {
-          return currentStepIndex;
-        },
-        gotoStep: function gotoStep(step) {
-          return _gotoStep(step);
-        },
-        isFirstStep: isFirstStep,
-        isLastStep: isLastStep,
-        currentStepIndex: currentStepIndex,
-        currentStep: currentStep
-      });
-    }
-  }, [_hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, cancelable, currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip, nextbtnlabel, previousbtnlabel, donebtnlabel, cancelbtnlabel, actionsalignment, currentStepIndex, isFirstStep, isLastStep, visibleSteps]);
-  (0, _react.useEffect)(function () {
-    updateListener();
-  }, [updateListener]);
-
-  // Initialize default step for STATIC wizards only
-  (0, _react.useEffect)(function () {
-    if (steps.length > 0 && !isInitialized && visibleSteps.length > 0 && type !== "dynamic") {
-      var defaultStepRef = null;
-      if (defaultstep !== "none") {
-        defaultStepRef = (0, _utils.getStepByName)(defaultstep, steps);
-      } else if (defaultstepindex >= 0 && defaultstepindex < visibleSteps.length) {
-        // CHANGED: Removed type === "dynamic" check and added bounds checking
-        // REASON: This effect only runs for static wizards, and bounds checking prevents runtime errors
-        defaultStepRef = (0, _utils.getStepByIndex)(defaultstepindex, visibleSteps);
-      } else {
-        defaultStepRef = (0, _utils.getNextValidStep)(0, visibleSteps);
-      }
-      if (defaultStepRef) {
-        setDefaultStep(defaultStepRef);
-        setIsInitialized(true);
+    }, [
+      steps.length,
+      visibleSteps.length,
+      defaultstep,
+      defaultstepindex,
+      type,
+      isInitialized,
+      setDefaultStep,
+      visibleSteps
+    ]);
+    useEffect(() => {
+      if (currentStep == null ? void 0 : currentStep.onLoad) {
+        currentStep == null ? void 0 : currentStep.onLoad(currentStep, currentStepIndex);
       }
-    }
-  }, [steps.length, visibleSteps.length, defaultstep, defaultstepindex, type, isInitialized, setDefaultStep, visibleSteps]);
-  (0, _react.useEffect)(function () {
-    if (currentStep !== null && currentStep !== void 0 && currentStep.onLoad) {
-      currentStep === null || currentStep === void 0 || currentStep.onLoad(currentStep, currentStepIndex);
-    }
-  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.onLoad]);
-
-  // Handle dataset changes for dynamic wizard
-  (0, _react.useEffect)(function () {
-    if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
-      var dynamicSteps = createDynamicSteps(dataset);
-      if (defaultstepindex >= 0 && defaultstepindex < dynamicSteps.length) {
-        var defaultStep = dynamicSteps[defaultstepindex];
-        if (defaultStep && defaultStep.show) {
-          var stepsWithDefault = dynamicSteps.map(function (step) {
-            return _objectSpread(_objectSpread({}, step), {}, {
+    }, [currentStep == null ? void 0 : currentStep.onLoad]);
+    useEffect(() => {
+      if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
+        const dynamicSteps = createDynamicSteps(dataset);
+        if (defaultstepindex >= 0 && defaultstepindex < dynamicSteps.length) {
+          const defaultStep = dynamicSteps[defaultstepindex];
+          if (defaultStep && defaultStep.show) {
+            const stepsWithDefault = dynamicSteps.map((step) => __spreadProps(__spreadValues({}, step), {
               active: step.name === defaultStep.name,
               isDone: false,
-              done: step.dynamicStepIndex !== undefined ? step.dynamicStepIndex < defaultstepindex : false
-            });
-          });
-          setSteps(stepsWithDefault);
-          setIsInitialized(true); // CHANGED: Mark as initialized immediately
+              done: step.dynamicStepIndex !== void 0 ? step.dynamicStepIndex < defaultstepindex : false
+            }));
+            setSteps(stepsWithDefault);
+            setIsInitialized(true);
+          } else {
+            setSteps(dynamicSteps);
+          }
         } else {
           setSteps(dynamicSteps);
         }
-      } else {
-        setSteps(dynamicSteps);
-      }
-      return;
-    }
-    if (type === "dynamic" && dataset.length > 0) {
-      // Append new steps if dataset grew
-      if (steps.length > 0 && dataset.length > steps.length) {
-        var newItems = dataset.slice(steps.length);
-        var newSteps = createDynamicSteps(newItems, steps.length);
-        if (newSteps.length) {
-          setSteps(function (prev) {
-            return (0, _utils.appendDatasetSteps)(prev, newSteps);
-          });
-        }
         return;
       }
-      // Remove steps if dataset shrank
-      if (steps.length > 0 && dataset.length < steps.length) {
-        setSteps(function (prev) {
-          return (0, _utils.trimStepsToLength)(prev, dataset.length);
-        });
-        return;
+      if (type === "dynamic" && dataset.length > 0) {
+        if (steps.length > 0 && dataset.length > steps.length) {
+          const newItems = dataset.slice(steps.length);
+          const newSteps = createDynamicSteps(newItems, steps.length);
+          if (newSteps.length) {
+            setSteps((prev2) => appendDatasetSteps(prev2, newSteps));
+          }
+          return;
+        }
+        if (steps.length > 0 && dataset.length < steps.length) {
+          setSteps((prev2) => trimStepsToLength(prev2, dataset.length));
+          return;
+        }
       }
-    }
-  }, [type, dataset, createDynamicSteps, defaultstepindex, dataset.length]);
-
-  // Context value
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      steps: steps,
-      currentStep: currentStep,
-      currentStepIndex: currentStepIndex,
-      hasNextStep: _hasNextStep,
-      hasPrevStep: hasPrevStep,
-      showDoneBtn: showDoneBtn || false,
-      enableNext: enableNext || false,
-      enablePrev: enablePrev || false,
-      enableDone: enableDone || false,
-      isFirstStep: isFirstStep,
-      isLastStep: isLastStep,
-      registerStep: registerStep,
-      updateStep: updateStep,
-      next: _next,
-      prev: prev,
-      skip: _skip,
-      done: _done,
-      cancel: _cancel,
-      gotoStep: _gotoStep,
-      onStepHeaderClick: onStepHeaderClick,
-      addStep: function addStep() {
-        return [];
+    }, [type, dataset, createDynamicSteps, defaultstepindex, dataset.length]);
+    const contextValue = useMemo(
+      () => ({
+        steps,
+        currentStep,
+        currentStepIndex,
+        hasNextStep,
+        hasPrevStep,
+        showDoneBtn: showDoneBtn || false,
+        enableNext: enableNext || false,
+        enablePrev: enablePrev || false,
+        enableDone: enableDone || false,
+        isFirstStep,
+        isLastStep,
+        registerStep,
+        updateStep,
+        next,
+        prev,
+        skip,
+        done,
+        cancel,
+        gotoStep,
+        onStepHeaderClick,
+        addStep: () => []
+      }),
+      [
+        steps,
+        currentStep,
+        currentStepIndex,
+        hasNextStep,
+        hasPrevStep,
+        showDoneBtn,
+        enableNext,
+        enablePrev,
+        enableDone,
+        isFirstStep,
+        isLastStep,
+        registerStep,
+        updateStep,
+        next,
+        prev,
+        skip,
+        done,
+        cancel,
+        gotoStep,
+        onStepHeaderClick
+      ]
+    );
+    const wizardSteps = [];
+    React.Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === WmWizardstep) {
+        wizardSteps.push(child);
       }
-    };
-  }, [steps, currentStep, currentStepIndex, _hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, isFirstStep, isLastStep, registerStep, updateStep, _next, prev, _skip, _done, _cancel, _gotoStep, onStepHeaderClick]);
-
-  // Extract wizard steps from children
-  var wizardSteps = [];
-  _react["default"].Children.forEach(children, function (child) {
-    if (/*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _wizardStep.WmWizardstep) {
-      wizardSteps.push(child);
-    }
-  });
-
-  // If no data in dynamic mode, show no data message
-  if (type === "dynamic" && (!dataset || dataset.length === 0)) {
-    return __jsx("div", null, nodatamessage);
-  }
-  var classValue = className && className.trim() !== "" ? className : "classic";
-  return __jsx(_WizardContext["default"].Provider, {
-    value: contextValue
-  }, __jsx(_material.Box, {
-    className: (0, _clsx["default"])(DEFAULT_CLS, classValue, computedStepClass, {
-      classic: classValue === null || classValue === void 0 ? void 0 : classValue.includes("classic"),
-      number: classValue === null || classValue === void 0 ? void 0 : classValue.includes("number"),
-      dottedstepper: classValue === null || classValue === void 0 ? void 0 : classValue.includes("dottedstepper"),
-      "text-inline": classValue === null || classValue === void 0 ? void 0 : classValue.includes("text-inline"),
-      iconstepper: classValue === null || classValue === void 0 ? void 0 : classValue.includes("iconstepper")
-    }),
-    style: _objectSpread(_objectSpread({}, styles), {}, {
-      width: width,
-      height: height
-    }),
-    hidden: props.hidden,
-    name: name
-  }, __jsx(_material.Box, {
-    className: "app-wizard-heading"
-  }, __jsx(_material.Stepper, {
-    activeStep: currentStepIndex,
-    orientation: orientation,
-    alternativeLabel: alternativeLabel,
-    nonLinear: nonLinear,
-    connector: connector,
-    className: (0, _clsx["default"])("app-wizard-steps", computedStepClass, stepstyle === "justified" ? "nav-justified" : "")
-  }, steps.map(function (step, index) {
-    // Calculate the visible index by counting only visible steps before this one
-    var visibleIndex = steps.slice(0, index).filter(function (s) {
-      return s.show !== false && s.show !== "false";
-    }).length;
-    var isCurrentStep = currentStepIndex === visibleIndex && step.show !== false && step.show !== "false";
-    return __jsx(_WizardStep.WizardStep, {
-      key: step.name,
-      step: step,
-      index: index,
-      className: classValue,
-      nonLinear: nonLinear,
-      orientation: orientation,
-      onStepClick: handleStepClick,
-      current: isCurrentStep
     });
-  }))), (orientation === "horizontal" || type === "dynamic") && __jsx(_material.Box, {
-    className: BODY_CLASS
-  }, wizardMessage.caption && __jsx(_material.Box, {
-    component: "p"
-  }, __jsx(_material.Typography, {
-    variant: "body2",
-    color: wizardMessage.type === "error" ? "error" : "textSecondary"
-  }, wizardMessage.caption)), steps.map(function (step, index) {
-    return __jsx("div", {
-      key: step.name,
-      ref: function ref(el) {
-        if (el) {
-          // Store the step container element for event delegation
-          stepContainerRefs.current[step.name] = el;
-          // Get all forms inside the step (handles lists with multiple forms)
-          var formElements = el.querySelectorAll("form");
-          if (formElements.length > 0) {
-            // Store as array if multiple forms, single element if one form
-            formRefs.current[step.name] = formElements.length === 1 ? formElements[0] : Array.from(formElements);
-            if (formElements[0].classList.contains("app-form")) {
-              setFormReady(true);
+    if (type === "dynamic" && (!dataset || dataset.length === 0)) {
+      return /* @__PURE__ */ jsx("div", { children: nodatamessage });
+    }
+    const classValue = className && className.trim() !== "" ? className : "classic";
+    return /* @__PURE__ */ jsx(WizardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        className: clsx(DEFAULT_CLS, classValue, computedStepClass, {
+          classic: classValue == null ? void 0 : classValue.includes("classic"),
+          number: classValue == null ? void 0 : classValue.includes("number"),
+          dottedstepper: classValue == null ? void 0 : classValue.includes("dottedstepper"),
+          "text-inline": classValue == null ? void 0 : classValue.includes("text-inline"),
+          iconstepper: classValue == null ? void 0 : classValue.includes("iconstepper")
+        }),
+        style: __spreadProps(__spreadValues({}, styles), { width, height }),
+        hidden: props.hidden
+      }, { name }), {
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "app-wizard-heading", children: /* @__PURE__ */ jsx(
+            Stepper,
+            {
+              activeStep: currentStepIndex,
+              orientation,
+              alternativeLabel,
+              nonLinear,
+              connector,
+              className: clsx(
+                "app-wizard-steps",
+                computedStepClass,
+                stepstyle === "justified" ? "nav-justified" : ""
+              ),
+              children: steps.map((step, index) => {
+                const visibleIndex = steps.slice(0, index).filter((s) => s.show !== false && s.show !== "false").length;
+                const isCurrentStep = currentStepIndex === visibleIndex && step.show !== false && step.show !== "false";
+                return /* @__PURE__ */ jsx(
+                  WizardStep,
+                  {
+                    step,
+                    index,
+                    className: classValue,
+                    nonLinear,
+                    orientation,
+                    onStepClick: handleStepClick,
+                    current: isCurrentStep
+                  },
+                  step.name
+                );
+              })
             }
-          }
-        }
-      },
-      className: (0, _clsx["default"])("app-wizard-step-container", {
-        active: step.active
-      }),
-      hidden: !step.active,
-      name: step.name
-    }, isInsideOuterForm ?
-    // Inside outer form - use div, fields/forms pass through to outer form context
-    __jsx("div", {
-      className: (0, _clsx["default"])("app-wizard-step-content", {
-        active: step.active
+          ) }),
+          (orientation === "horizontal" || type === "dynamic") && /* @__PURE__ */ jsxs(Box, { className: BODY_CLASS, children: [
+            wizardMessage.caption && /* @__PURE__ */ jsx(Box, { component: "p", children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                color: wizardMessage.type === "error" ? "error" : "textSecondary",
+                children: wizardMessage.caption
+              }
+            ) }),
+            steps.map((step, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (el) => {
+                  if (el) {
+                    stepContainerRefs.current[step.name] = el;
+                    const formElements = el.querySelectorAll("form");
+                    if (formElements.length > 0) {
+                      formRefs.current[step.name] = formElements.length === 1 ? formElements[0] : Array.from(formElements);
+                      if (formElements[0].classList.contains("app-form")) {
+                        setFormReady(true);
+                      }
+                    }
+                  }
+                },
+                className: clsx("app-wizard-step-container", {
+                  active: step.active
+                }),
+                hidden: !step.active,
+                name: step.name,
+                children: isInsideOuterForm ? (
+                  // Inside outer form - use div, fields/forms pass through to outer form context
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx("app-wizard-step-content", {
+                        active: step.active
+                      }),
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                    }
+                  )
+                ) : (
+                  // @ts-ignore Standalone wizard without inner form - wizard provides form context
+                  /* @__PURE__ */ jsx(
+                    WmForm,
+                    {
+                      standalone,
+                      show: step.active,
+                      name: step.name + `_form`,
+                      className: clsx("app-wizard-step-content", {
+                        active: step.active
+                      }),
+                      listener,
+                      isInsideWizard: true,
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                    }
+                  )
+                )
+              },
+              step.name
+            ))
+          ] }),
+          children,
+          type === "static" && wizardSteps.map(
+            (step, index) => {
+              var _a;
+              return cloneElement(step, {
+                key: ((_a = step.props) == null ? void 0 : _a.name) || index
+              });
+            }
+          )
+        ]
       })
-    }, currentStep !== null && currentStep !== void 0 && currentStep.name && step.active && currentStep.render ? currentStep.render(step, index) : step.children) :
-    // @ts-ignore Standalone wizard without inner form - wizard provides form context
-    __jsx(_form["default"], {
-      standalone: standalone,
-      show: step.active,
-      name: step.name + "_form",
-      className: (0, _clsx["default"])("app-wizard-step-content", {
-        active: step.active
-      }),
-      listener: listener,
-      isInsideWizard: true
-    }, currentStep !== null && currentStep !== void 0 && currentStep.name && step.active && currentStep.render ? currentStep.render(step, index) : step.children));
-  })), children, type === "static" && wizardSteps.map(function (step, index) {
-    var _step$props;
-    return /*#__PURE__*/(0, _react.cloneElement)(step, {
-      key: ((_step$props = step.props) === null || _step$props === void 0 ? void 0 : _step$props.name) || index
+    ) });
+  },
+  (prev, next) => {
+    const keys = [
+      "render",
+      "dataset",
+      "className",
+      "styles",
+      "width",
+      "height",
+      "type",
+      "stepstyle",
+      "orientation",
+      "alternativeLabel",
+      "nonLinear",
+      "defaultstep",
+      "defaultstepindex",
+      "message",
+      "cancelable",
+      "enablenext",
+      "nextbtnlabel",
+      "previousbtnlabel",
+      "donebtnlabel",
+      "cancelbtnlabel",
+      "children",
+      "hidden"
+    ];
+    return keys.every((key) => {
+      if (key === "children") {
+        return prev[key] === next[key];
+      }
+      return isEqual(prev[key], next[key]);
     });
-  })));
-}, function (prev, next) {
-  var keys = ["render", "dataset", "className", "styles", "width", "height", "type", "stepstyle", "orientation", "alternativeLabel", "nonLinear", "defaultstep", "defaultstepindex", "message", "cancelable", "enablenext", "nextbtnlabel", "previousbtnlabel", "donebtnlabel", "cancelbtnlabel", "children", "hidden"];
-  return keys.every(function (key) {
-    // Never deep-compare children; treat as referential
-    if (key === "children") {
-      return prev[key] === next[key];
-    }
-    return (0, _isEqual["default"])(prev[key], next[key]);
-  });
-});
-var WmWizardStandalone = exports.WmWizard = (0, _withStandalone["default"])(WmWizard);
+  }
+);
+const WmWizardStandalone = withStandalone(WmWizard);
 WmWizard.displayName = "WmWizard";
-
-/**
- * The WmWizard component renders a multi-step wizard flow with navigation,
- * validation, and configurable step content.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-wizard--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-wizard--docs)
- *
- * @param props - {@link WmWizardProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizard);
+var wizard_default = withBaseWrapper(WmWizard);
+export {
+  WmWizardStandalone as WmWizard,
+  wizard_default as default
+};