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

package/components/container/tabs/props.js

@@ -1,30 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_PROPS = void 0;
-/**
- * Tab position/orientation.
- */
-
-/**
- * Icon position relative to tab label.
- */
-
-/**
- * Transition effect when switching tabs.
- */
-
-/**
- * Base props specific to the WmTabs component.
- */
-
-/**
- * Combined props for the WmTabs component, including base WaveMaker props.
- */
-
-var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+const DEFAULT_PROPS = {
   type: "static",
   dataset: [],
   defaultpaneindex: 0,
@@ -37,4 +11,7 @@ var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   enablescroll: false,
   listener: {},
   name: ""
-};
+};
+export {
+  DEFAULT_PROPS
+};

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

@@ -1,131 +1,136 @@
-"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.WmTabpane = exports.WmTabPane = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx2 = _interopRequireDefault(require("clsx"));
-var _tabs = require("@base-ui-components/react/tabs");
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _ = require("..");
-var _widgetInstanceUtils = require("@wavemaker-ai/react-runtime/components/data/list/utils/widget-instance-utils");
-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;
-var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
-  var className = props.className,
-    disabled = props.disabled,
-    renderPartial = props.renderPartial,
-    name = props.name,
-    index = props.index,
-    listener = props.listener,
-    item = props.item,
-    layoutClassName = props.layoutClassName;
-  var onHeaderclick = props.onHeaderclick;
-  var _useTabsContext = (0, _.useTabsContext)(),
-    selectedIndex = _useTabsContext.selectedIndex,
-    setSelectedIndex = _useTabsContext.setSelectedIndex,
-    tabsContainerName = _useTabsContext.tabsContainerName,
-    updatePaneHeader = _useTabsContext.updatePaneHeader;
-  var wasActiveRef = _react["default"].useRef(false);
-  var loadedRef = _react["default"].useRef(false);
-  var hasReportedHeaderRef = _react["default"].useRef(false);
-  (0, _react.useEffect)(function () {
-    var _props$listener;
-    var isActive = selectedIndex === index;
+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: function select() {
-          return setSelectedIndex(index);
-        },
-        isActive: isActive,
-        deselect: function deselect() {
-          return setSelectedIndex(-1);
-        }
+        select: () => setSelectedIndex(index),
+        isActive,
+        deselect: () => setSelectedIndex(-1)
       });
     }
-
-    // Read widgetInstance AFTER registration above so it carries select/deselect/isActive
-    var widgetInstance = props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Widgets) === null || _props$listener === void 0 ? void 0 : _props$listener[name];
-    (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, [item], item);
+    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
-      });
+      listener.onChange(tabsContainerName, { activeTab: widgetInstance });
     }
     if (isActive) {
       if (!loadedRef.current) {
-        var _props$onLoad;
-        props === null || props === void 0 || (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, null, widgetInstance);
+        (_c = props == null ? void 0 : props.onLoad) == null ? void 0 : _c.call(props, null, widgetInstance);
         loadedRef.current = true;
       }
       if (!wasActiveRef.current) {
-        var _props$onSelect;
-        props === null || props === void 0 || (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, null, widgetInstance, index);
+        (_d = props == null ? void 0 : props.onSelect) == null ? void 0 : _d.call(props, null, widgetInstance, index);
         wasActiveRef.current = true;
       }
     } else if (wasActiveRef.current) {
-      var _props$onDeselect;
-      props === null || props === void 0 || (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 || _props$onDeselect.call(props, null, widgetInstance, index);
+      (_e = props == null ? void 0 : props.onDeselect) == null ? void 0 : _e.call(props, null, widgetInstance, index);
       wasActiveRef.current = false;
     }
   }, [selectedIndex, name]);
-  var isHidden = (0, _react.useMemo)(function () {
-    return item === undefined ? false : (item === null || item === void 0 ? void 0 : item.show) === false;
-  }, [item]);
-  var headerProps = (0, _react.useMemo)(function () {
-    return {
-      name: name,
+  const isHidden = useMemo(() => item === void 0 ? false : (item == null ? void 0 : item.show) === false, [item]);
+  const headerProps = useMemo(
+    () => ({
+      name,
       title: props.title,
-      disabled: disabled,
+      disabled,
       show: props.show,
       paneicon: props.paneicon,
       badgevalue: props.badgevalue,
       badgetype: props.badgetype,
-      className: className,
-      onHeaderclick: onHeaderclick,
+      className,
+      onHeaderclick,
       onHeaderClick: props.onHeaderClick
-    };
-  }, [name, props.title, disabled, props.show, props.paneicon, props.badgevalue, props.badgetype, className, onHeaderclick, props.onHeaderClick]);
-  (0, _react.useEffect)(function () {
+    }),
+    [
+      name,
+      props.title,
+      disabled,
+      props.show,
+      props.paneicon,
+      props.badgevalue,
+      props.badgetype,
+      className,
+      onHeaderclick,
+      props.onHeaderClick
+    ]
+  );
+  useEffect(() => {
     if (!hasReportedHeaderRef.current) {
       hasReportedHeaderRef.current = true;
       return;
     }
     updatePaneHeader(name, headerProps);
   }, [name, headerProps, updatePaneHeader]);
-  return __jsx(_tabs.Tabs.Panel, {
-    value: index,
-    keepMounted: true,
-    className: (0, _clsx2["default"])("tab-pane", "wm-tab-pane-root", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-      disabled: 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 || props === void 0 ? void 0 : props.styles,
-    "data-pane-name": name,
-    title: props === null || props === void 0 ? void 0 : props.title,
-    name: name
-  }, __jsx("div", {
-    className: "tab-body",
-    "data-widget-id": props["data-widget-id"]
-  }, renderPartial ? renderPartial(props, function () {
-    var _props$onLoad2;
-    return (_props$onLoad2 = props.onLoad) === null || _props$onLoad2 === void 0 ? void 0 : _props$onLoad2.call(props, new Event("load"), props);
-  }) : props.children));
+  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";
-var WmTabpaneStandalone = exports.WmTabPane = 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}
- */
-var _default = exports["default"] = (0, _withBaseWrapper["default"])(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.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/components/container/tabs/utils.js

@@ -1,51 +1,46 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleRemovePane = exports.filterVisibleChildren = void 0;
-var _react = _interopRequireDefault(require("react"));
-var filterVisibleChildren = exports.filterVisibleChildren = function filterVisibleChildren(children, hiddenTabNames) {
-  return _react["default"].Children.toArray(children).filter(function (c) {
-    var _c$props;
-    var nm = c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.name;
-    var isHidden = nm ? hiddenTabNames.has(nm) : false;
+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;
   });
 };
-var handleRemovePane = exports.handleRemovePane = function handleRemovePane(_ref) {
-  var _visibleBefore$select;
-  var type = _ref.type,
-    dataset = _ref.dataset,
-    children = _ref.children,
-    hiddenTabNames = _ref.hiddenTabNames,
-    TabName = _ref.TabName,
-    selectedIndex = _ref.selectedIndex,
-    currentSelectedIndex = _ref.currentSelectedIndex,
-    panesCountRef = _ref.panesCountRef,
-    setHiddenTabNames = _ref.setHiddenTabNames,
-    setSelectedIndex = _ref.setSelectedIndex,
-    saveStateToStorage = _ref.saveStateToStorage;
-  // Dynamic mode: mutate dataset
+const handleRemovePane = ({
+  type,
+  dataset,
+  children,
+  hiddenTabNames,
+  TabName,
+  selectedIndex,
+  currentSelectedIndex,
+  panesCountRef,
+  setHiddenTabNames,
+  setSelectedIndex,
+  saveStateToStorage
+}) => {
+  var _a, _b;
   if (type === "dynamic" && dataset) {
     return;
   }
-
-  // Static mode: mark hidden in internal state and adjust selection if needed
-  var visibleBefore = filterVisibleChildren(children, hiddenTabNames);
-  var activeName = (_visibleBefore$select = visibleBefore[selectedIndex]) === null || _visibleBefore$select === void 0 || (_visibleBefore$select = _visibleBefore$select.props) === null || _visibleBefore$select === void 0 ? void 0 : _visibleBefore$select.name;
-  setHiddenTabNames(function (prev) {
-    var next = new Set(prev);
+  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) {
-    var newIndex = Math.max(0, currentSelectedIndex.current - 1);
+    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.js

@@ -1,16 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWizardContext = exports["default"] = void 0;
-var _react = require("react");
-var WizardContext = /*#__PURE__*/(0, _react.createContext)(null);
-var useWizardContext = exports.useWizardContext = function useWizardContext() {
-  var context = (0, _react.useContext)(WizardContext);
+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 _default = exports["default"] = WizardContext;
+var WizardContext_default = WizardContext;
+export {
+  WizardContext_default as default,
+  useWizardContext
+};

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

@@ -1,101 +1,78 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CustomStepLabel = exports.CustomStepIcon = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _clsx = _interopRequireDefault(require("clsx"));
-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;
-// Custom Step Icon Component
-var CustomStepIcon = exports.CustomStepIcon = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var step = props.step,
-    _props$index = props.index,
-    index = _props$index === void 0 ? 0 : _props$index,
-    _props$wizardClass = props.wizardClass,
-    wizardClass = _props$wizardClass === void 0 ? "" : _props$wizardClass,
-    active = props.active,
-    completed = props.completed;
-  if (!step) return null;
-  var isNumber = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("number");
-  var isDottedStepper = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("dottedstepper");
-  var isTextInline = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("text-inline");
-  var isIconStepper = (wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("iconstepper")) || (wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("tabstepper"));
-  var isCompleted = step.isDone;
-  var iconContent = (0, _react.useMemo)(function () {
-    if (isCompleted && (isDottedStepper || isNumber)) {
-      return __jsx(_material.Box, {
-        component: "i",
-        className: "app-icon wi wi-done"
-      });
-    }
-    if (isNumber && !isCompleted) {
-      return __jsx(_material.Box, {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import clsx from "clsx";
+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)) {
+        return /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-done" });
+      }
+      if (isNumber && !isCompleted) {
+        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 && (!isCompleted || isCompleted && !step.doneiconclass)) {
+        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.iconclass}` });
+      }
+      if (step.doneiconclass && isCompleted && isIconStepper) {
+        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.doneiconclass}` });
+      }
+      return null;
+    }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
         component: "span",
-        className: "count"
-      }, index + 1);
-    }
-    if ((isDottedStepper || isTextInline && !isIconStepper) && !isCompleted) {
-      return __jsx(_material.Box, {
-        component: "span",
-        className: "dottedstepper"
-      });
-    }
-    if (isIconStepper && step.iconclass && (!isCompleted || isCompleted && !step.doneiconclass)) {
-      return __jsx(_material.Box, {
-        component: "span",
-        className: "app-icon ".concat(step.iconclass)
-      });
-    }
-    if (step.doneiconclass && isCompleted && isIconStepper) {
-      return __jsx(_material.Box, {
-        component: "span",
-        className: "app-icon ".concat(step.doneiconclass)
-      });
-    }
-    return null;
-  }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);
-  return __jsx(_material.Box, {
-    component: "span",
-    className: (0, _clsx["default"])("wizard-step-number", {
-      active: active,
-      finished: isCompleted,
-      "default": !active && !isCompleted
-    }, isDottedStepper && !completed && "has-dotted-stepper")
-  }, iconContent);
-});
+        className: clsx(
+          "wizard-step-number",
+          {
+            active,
+            finished: isCompleted,
+            default: !active && !isCompleted
+          },
+          isDottedStepper && !completed && "has-dotted-stepper"
+        ),
+        children: iconContent
+      }
+    );
+  }
+);
 CustomStepIcon.displayName = "CustomStepIcon";
-
-// Custom Step Label Component
-var CustomStepLabel = exports.CustomStepLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var step = props.step,
-    index = props.index,
-    wizardClass = props.wizardClass,
-    children = props.children;
-  var isTextInline = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("text-inline");
-  return __jsx(_react["default"].Fragment, null, __jsx(_material.Box, {
-    component: "span",
-    className: "title-wrapper"
-  }, isTextInline && __jsx(_material.Typography, {
-    component: "span",
-    className: "step-number",
-    variant: "caption"
-  }, "0".concat(index + 1)), __jsx(_material.Typography, {
-    component: "span",
-    variant: "body2",
-    className: "step-title"
-  }, step.title)), step.subtitle && __jsx(_material.Typography, {
-    component: "span",
-    className: "subtitle-wrapper",
-    variant: "caption",
-    title: step.subtitle
-  }, __jsx(_material.Box, {
-    component: "span",
-    className: "step-title"
-  }, step.subtitle)), children);
-});
-CustomStepLabel.displayName = "CustomStepLabel";
+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
+};