oa-componentbook 1.0.1-stage.363 → 1.0.1-stage.365

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -77,6 +77,9 @@ function KeyValueDataView(_ref) {
         className: "type-b2-400",
         title: value
       }, value) || _react.default.isValidElement && /*#__PURE__*/_react.default.createElement("span", null, value), (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagKey) === key && (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagData) && /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+        style: {
+          width: "100px"
+        },
         type: tagStatus.tagData.type || "success",
         label: tagStatus.tagData.label,
         size: tagStatus.tagData.size || "small"

package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ProfileDataWidget;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function ProfileDataWidget(_ref) {
+  let {
+    image,
+    title,
+    line1,
+    line2,
+    line3,
+    line4,
+    line5,
+    alignProfile
+  } = _ref;
+  // Determine what to display in the icon
+  const getIconContent = () => {
+    if (!(image !== null && image !== void 0 && image.visible)) return null;
+    if (image.imageType === "source" && image.imageFile) {
+      return /*#__PURE__*/_react.default.createElement("img", {
+        src: image.imageFile,
+        alt: "Profile",
+        style: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      });
+    }
+    if (image.imageType === "letterIcon") {
+      const letter = title !== null && title !== void 0 && title.label ? title.label.charAt(0).toUpperCase() : "";
+      return letter;
+    }
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfileDataContainer, {
+    alignProfile: alignProfile
+  }, (image === null || image === void 0 ? void 0 : image.visible) && /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: (image === null || image === void 0 ? void 0 : image.bgColor) || "#1976d2",
+      color: (image === null || image === void 0 ? void 0 : image.color) || "#ffffff"
+    }
+  }, getIconContent()), /*#__PURE__*/_react.default.createElement(_styles.ProfileInfo, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: (title === null || title === void 0 ? void 0 : title.color) || "primary-content",
+    typography: (title === null || title === void 0 ? void 0 : title.typography) || "type-h3-500",
+    className: "company-name"
+  }, (title === null || title === void 0 ? void 0 : title.label) || ""), /*#__PURE__*/_react.default.createElement("div", {
+    className: "company-details"
+  }, line1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line1.color || "secondary-content",
+    typography: line1.typography || "type-b1-400"
+  }, line1.label || ""), line2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line2.color || "secondary-content",
+    typography: line2.typography || "type-b1-400"
+  }, line2.label || ""), line3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line3.color || "secondary-content",
+    typography: line3.typography || "type-b1-400"
+  }, line3.label || ""), line4 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line4.color || "secondary-content",
+    typography: line4.typography || "type-b1-400"
+  }, line4.label || ""), line5 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line5.color || "secondary-content",
+    typography: line5.typography || "type-b1-400"
+  }, line5.label || ""))));
+}
+ProfileDataWidget.propTypes = {
+  image: _propTypes.default.shape({
+    visible: _propTypes.default.bool,
+    imageType: _propTypes.default.oneOf(["source", "letterIcon"]),
+    imageFile: _propTypes.default.string,
+    color: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  }),
+  title: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line1: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line2: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line3: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line4: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line5: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  alignProfile: _propTypes.default.string
+};

package/build/widgets/oa-widget-profile-data/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileInfo = exports.ProfileIcon = exports.ProfileDataContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const ProfileDataContainer = exports.ProfileDataContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  gap: 24px;\n  padding: ", ";\n  background: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  max-width: ", ";\n  justify-content: ", ";\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 16px;\n    margin: ", ";\n    padding: 24px;\n  }\n"])), props => props.alignProfile === 'center' ? '32px' : '32px', props => props.alignProfile === 'center' ? 'transparent' : '#ffffff', props => props.alignProfile === 'center' ? '0' : '12px', props => props.alignProfile === 'center' ? '24px auto' : '24px', props => props.alignProfile === 'center' ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.1)', props => props.alignProfile === 'center' ? 'none' : '1px solid #f0f0f0', props => props.alignProfile === 'center' ? '600px' : 'none', props => props.alignProfile === 'center' ? 'center' : 'flex-start', props => props.alignProfile === 'center' ? '16px auto' : '16px');
+const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 48px;\n  font-weight: 700;\n  flex-shrink: 0;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n    font-size: 36px;\n  }\n"])));
+const ProfileInfo = exports.ProfileInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  .company-name {\n    margin-bottom: 4px;\n    font-size: 24px;\n    font-weight: 700;\n    color: #333333;\n  }\n\n  .company-details {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    .ant-typography {\n      font-size: 14px;\n      line-height: 1.5;\n      color: #666666;\n    }\n  }\n"])));

package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js

@@ -10,6 +10,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
 var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
 var _CustomUpload = _interopRequireDefault(require("../../components/oa-component-upload/CustomUpload"));
@@ -17,12 +18,12 @@ var _CustomRadio = _interopRequireDefault(require("../../components/oa-component
 var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
 var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
 var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
-var _icons = require("@ant-design/icons");
 var _CustomSteps = _interopRequireDefault(require("../../components/oa-component-steps/CustomSteps"));
 var _Typography = require("../../components/oa-component-typography/Typography");
 var _utils = require("../../utils");
 var _styles = require("./styles");
 const _excluded = ["data", "data-test", "current", "initialAnswers", "onComplete", "onStepChange", "style", "showSubmitButton"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,7 +45,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function ProgressiveStepsWidget(_ref) {
   let {
       data,
-      'data-test': dataTest,
+      "data-test": dataTest,
       current: externalCurrent,
       initialAnswers = {},
       onComplete,
@@ -105,12 +106,10 @@ function ProgressiveStepsWidget(_ref) {
   };
 
   // Check if all steps are completed (including pre-populated ones)
-  const isAllStepsCompleted = () => {
-    return steps.every((step, index) => {
-      const stepId = step.key || index;
-      return answers[stepId] !== undefined;
-    });
-  };
+  const isAllStepsCompleted = () => steps.every((step, index) => {
+    const stepId = step.key || index;
+    return answers[stepId] !== undefined;
+  });
   const renderAnswerInput = (step, stepIndex) => {
     const {
       answerType,
@@ -121,24 +120,24 @@ function ProgressiveStepsWidget(_ref) {
     const stepId = step.key || stepIndex;
     const currentAnswer = answers[stepId];
     switch (answerType) {
-      case 'singleSelect':
+      case "singleSelect":
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
-            display: 'flex',
-            gap: '12px',
-            flexWrap: 'wrap'
+            display: "flex",
+            gap: "12px",
+            flexWrap: "wrap"
           }
         }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           key: idx,
-          type: currentAnswer === (option.value || option) ? 'primary' : 'secondary',
+          type: currentAnswer === (option.value || option) ? "primary" : "secondary",
           onClick: () => handleAnswer(stepIndex, option.value || option),
           label: option.label || option,
           "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
         })));
-      case 'button':
+      case "button":
         return /*#__PURE__*/_react.default.createElement("div", null, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           key: idx,
-          type: option.type || 'primary',
+          type: option.type || "primary",
           onClick: () => {
             // Execute custom click function if provided
             if (option.onClick) {
@@ -150,10 +149,10 @@ function ProgressiveStepsWidget(_ref) {
             }
           },
           label: option.label || option,
-          size: option.size || 'default',
+          size: option.size || "default",
           "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
         })));
-      case 'custom':
+      case "custom":
         // Render custom component with props for integration
         if (customComponent) {
           const CustomComponent = customComponent;
@@ -165,44 +164,44 @@ function ProgressiveStepsWidget(_ref) {
           }, step.customProps));
         }
         return null;
-      case 'paymentOptions':
+      case "paymentOptions":
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
-            width: '100%'
+            width: "100%"
           }
         }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement("div", {
           key: idx,
           style: {
-            border: '1px solid #d9d9d9',
-            borderRadius: '8px',
-            padding: '16px',
-            marginBottom: '12px',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: currentAnswer === (option.value || option) ? '#f0f8ff' : 'white',
+            border: "1px solid #d9d9d9",
+            borderRadius: "8px",
+            padding: "16px",
+            marginBottom: "12px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            backgroundColor: currentAnswer === (option.value || option) ? "#f0f8ff" : "white",
             // cursor: 'pointer',
-            transition: 'all 0.3s ease'
+            transition: "all 0.3s ease"
           }
           // onClick={() => handleAnswer(stepIndex, option.value || option)}
           ,
           "data-test": dataTest ? "".concat(dataTest, "--payment-option-").concat(stepIndex, "-").concat(idx) : undefined
         }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
           style: {
-            fontSize: '16px',
-            fontWeight: '500',
-            color: currentAnswer === (option.value || option) ? '#1890ff' : '#000'
+            fontSize: "16px",
+            fontWeight: "500",
+            color: currentAnswer === (option.value || option) ? "#1890ff" : "#000"
           }
         }, option.label || option), option.description && /*#__PURE__*/_react.default.createElement("div", {
           style: {
-            fontSize: '14px',
-            color: '#666',
-            marginTop: '4px'
+            fontSize: "14px",
+            color: "#666",
+            marginTop: "4px"
           }
         }, option.description)), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           type: "text-only",
           size: "small",
-          label: option.detailsText || 'Enter details',
+          label: option.detailsText || "Enter details",
           onClick: e => {
             e.stopPropagation();
             if (option.onDetailsClick) {
@@ -210,22 +209,22 @@ function ProgressiveStepsWidget(_ref) {
             }
           }
         }))));
-      case 'text':
+      case "text":
         return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
-          placeholder: placeholder || 'Enter your answer...',
-          value: currentAnswer || '',
+          placeholder: placeholder || "Enter your answer...",
+          value: currentAnswer || "",
           onChange: e => handleAnswer(stepIndex, e.target.value),
           "data-test": dataTest ? "".concat(dataTest, "--text-input-").concat(stepIndex) : undefined
         });
-      case 'textarea':
+      case "textarea":
         return /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
-          placeholder: placeholder || 'Enter your answer...',
-          value: currentAnswer || '',
+          placeholder: placeholder || "Enter your answer...",
+          value: currentAnswer || "",
           onChange: e => handleAnswer(stepIndex, e.target.value),
           rows: 4,
           "data-test": dataTest ? "".concat(dataTest, "--textarea-").concat(stepIndex) : undefined
         });
-      case 'upload':
+      case "upload":
         return /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
           beforeUpload: file => {
             handleAnswer(stepIndex, file);
@@ -235,11 +234,11 @@ function ProgressiveStepsWidget(_ref) {
         }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
           iconConfig: {
             icon: /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null),
-            position: 'left'
+            position: "left"
           },
           label: "Upload File"
         }));
-      case 'radio':
+      case "radio":
         return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
           value: currentAnswer,
           onChange: e => handleAnswer(stepIndex, e.target.value),
@@ -249,7 +248,7 @@ function ProgressiveStepsWidget(_ref) {
           value: option.value || option,
           label: option.label || option
         })));
-      case 'checkbox':
+      case "checkbox":
         return /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default.Group, {
           value: currentAnswer || [],
           onChange: values => handleAnswer(stepIndex, values),
@@ -259,9 +258,9 @@ function ProgressiveStepsWidget(_ref) {
           value: option.value || option,
           label: option.label || option
         })));
-      case 'select':
+      case "select":
         return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
-          placeholder: placeholder || 'Select an option...',
+          placeholder: placeholder || "Select an option...",
           value: currentAnswer,
           onSelectionChange: value => handleAnswer(stepIndex, value.value),
           options: answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => ({
@@ -276,65 +275,65 @@ function ProgressiveStepsWidget(_ref) {
   };
 
   // Prepare steps data for CustomSteps component
-  const prepareStepsForCustomSteps = () => {
-    return steps.map((step, stepIndex) => {
-      const stepId = step.key || stepIndex;
-      const isActive = stepIndex === currentStep;
-      const isCompleted = stepIndex < currentStep && answers[stepId] !== undefined;
-      const isDisabled = stepIndex > currentStep;
-      const isVisible = stepIndex < visibleSteps;
-      const hasAnswer = answers[stepId] !== undefined;
-      if (!isVisible) return null;
-
-      // Get dynamic content based on answer state
-      const getDynamicContent = () => {
-        if (!hasAnswer || !step.dynamicContent) return null;
-        const dynamicContent = step.dynamicContent;
+  const prepareStepsForCustomSteps = () => steps.map((step, stepIndex) => {
+    const stepId = step.key || stepIndex;
+    const isActive = stepIndex === currentStep;
+    const isCompleted = stepIndex < currentStep && answers[stepId] !== undefined;
+    const isDisabled = stepIndex > currentStep;
+    const isVisible = stepIndex < visibleSteps;
+    const hasAnswer = answers[stepId] !== undefined;
+    if (!isVisible) return null;
 
-        // Check if we should show dynamic content for this answer
-        const shouldShowDynamic = typeof dynamicContent.showFor === 'function' ? dynamicContent.showFor(answers[stepId]) : dynamicContent.showFor === answers[stepId] || dynamicContent.showFor === true;
-        if (!shouldShowDynamic) return null;
-        return {
-          title: dynamicContent.title || step.title,
-          description: typeof dynamicContent.description === 'function' ? dynamicContent.description(answers[stepId]) : dynamicContent.description,
-          descriptionStyle: dynamicContent.descriptionStyle,
-          hideAnswerInput: dynamicContent.hideAnswerInput || false
-        };
-      };
-      const dynamicContent = getDynamicContent();
-      const displayTitle = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.title) || step.title;
-      const displayDescription = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.description) || step.description;
-      const displayDescriptionStyle = dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.descriptionStyle;
-      const shouldHideAnswerInput = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.hideAnswerInput) || false;
+    // Get dynamic content based on answer state
+    const getDynamicContent = () => {
+      if (!hasAnswer || !step.dynamicContent) return null;
+      const {
+        dynamicContent
+      } = step;
 
-      // Create the step content with question and answer
-      const stepContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          fontSize: '16px',
-          fontWeight: '500',
-          color: isActive ? '#1890ff' : isCompleted ? '#52c41a' : isDisabled ? '#d9d9d9' : '#000',
-          marginBottom: '8px'
-        }
-      }, (0, _utils.isString)(displayTitle) || (0, _utils.isNumber)(displayTitle) ? /*#__PURE__*/_react.default.createElement("span", {
-        "data-test": "".concat(dataTest, "--title-(").concat(displayTitle, ")")
-      }, displayTitle) : displayTitle), displayDescription && /*#__PURE__*/_react.default.createElement("div", {
-        style: _objectSpread({
-          color: '#666',
-          fontSize: '14px',
-          marginBottom: '12px'
-        }, displayDescriptionStyle)
-      }, displayDescription), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginTop: '12px'
-        }
-      }, renderAnswerInput(step, stepIndex)));
+      // Check if we should show dynamic content for this answer
+      const shouldShowDynamic = typeof dynamicContent.showFor === "function" ? dynamicContent.showFor(answers[stepId]) : dynamicContent.showFor === answers[stepId] || dynamicContent.showFor === true;
+      if (!shouldShowDynamic) return null;
       return {
-        key: step.key || stepIndex,
-        title: stepContent,
-        disabled: isDisabled
+        title: dynamicContent.title || step.title,
+        description: typeof dynamicContent.description === "function" ? dynamicContent.description(answers[stepId]) : dynamicContent.description,
+        descriptionStyle: dynamicContent.descriptionStyle,
+        hideAnswerInput: dynamicContent.hideAnswerInput || false
       };
-    }).filter(Boolean); // Remove null entries
-  };
+    };
+    const dynamicContent = getDynamicContent();
+    const displayTitle = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.title) || step.title;
+    const displayDescription = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.description) || step.description;
+    const displayDescriptionStyle = dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.descriptionStyle;
+    const shouldHideAnswerInput = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.hideAnswerInput) || false;
+
+    // Create the step content with question and answer
+    const stepContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontSize: "16px",
+        fontWeight: "500",
+        color: isActive ? "#1890ff" : isCompleted ? "#52c41a" : isDisabled ? "#d9d9d9" : "#000",
+        marginBottom: "8px"
+      }
+    }, (0, _utils.isString)(displayTitle) || (0, _utils.isNumber)(displayTitle) ? /*#__PURE__*/_react.default.createElement("span", {
+      "data-test": "".concat(dataTest, "--title-(").concat(displayTitle, ")")
+    }, displayTitle) : displayTitle), displayDescription && /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread({
+        color: "#666",
+        fontSize: "14px",
+        marginBottom: "12px"
+      }, displayDescriptionStyle)
+    }, displayDescription), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: "12px"
+      }
+    }, renderAnswerInput(step, stepIndex)));
+    return {
+      key: step.key || stepIndex,
+      title: stepContent,
+      disabled: isDisabled
+    };
+  }).filter(Boolean); // Remove null entries
   return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_CustomSteps.default, _extends({
@@ -358,7 +357,7 @@ ProgressiveStepsWidget.propTypes = {
       key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       title: _propTypes.default.node,
       description: _propTypes.default.node,
-      answerType: _propTypes.default.oneOf(['singleSelect', 'button', 'paymentOptions', 'text', 'textarea', 'upload', 'radio', 'checkbox', 'select', 'custom']),
+      answerType: _propTypes.default.oneOf(["singleSelect", "button", "paymentOptions", "text", "textarea", "upload", "radio", "checkbox", "select", "custom"]),
       answerOptions: _propTypes.default.array,
       placeholder: _propTypes.default.string,
       customComponent: _propTypes.default.elementType,
@@ -372,7 +371,7 @@ ProgressiveStepsWidget.propTypes = {
       })
     }))
   }),
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   current: _propTypes.default.number,
   initialAnswers: _propTypes.default.object,
   onComplete: _propTypes.default.func,
@@ -384,7 +383,7 @@ ProgressiveStepsWidget.defaultProps = {
   data: {
     steps: []
   },
-  'data-test': null,
+  "data-test": null,
   current: 0,
   initialAnswers: {},
   onComplete: undefined,