powr-sdk-web 5.6.10 → 5.6.12

package/dist/admin/index.js

@@ -30,6 +30,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
     projectId = _ref.projectId,
     _ref$sections = _ref.sections,
     sections = _ref$sections === void 0 ? [] : _ref$sections,
+    formPublicBaseUrl = _ref.formPublicBaseUrl,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "default" : _ref$theme;
   var _useState = (0, _react.useState)(null),
@@ -190,6 +191,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
     var sectionProps = {
       apiUrl: apiUrl,
       projectId: projectId,
+      formPublicBaseUrl: formPublicBaseUrl,
       theme: theme === 'dark' ? 'dark' : 'blue'
     };
     switch (currentSection) {
@@ -272,6 +274,7 @@ var AdminDashboard = function AdminDashboard(_ref) {
 AdminDashboard.propTypes = {
   projectId: _propTypes["default"].string,
   sections: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  formPublicBaseUrl: _propTypes["default"].string,
   theme: _propTypes["default"].oneOf(['default', 'dark'])
 };
 var _default = exports["default"] = AdminDashboard;

package/dist/forms/admin.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _auth = require("../utils/auth");
-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 _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
+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 _t6 in e) "default" !== _t6 && {}.hasOwnProperty.call(e, _t6) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t6)) && (i.get || i.set) ? o(f, _t6, i) : f[_t6] = e[_t6]); return f; })(e, t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -30,6 +30,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   var projectId = _ref.projectId,
     apiUrl = _ref.apiUrl,
+    formPublicBaseUrl = _ref.formPublicBaseUrl,
     onFormAction = _ref.onFormAction,
     onRefresh = _ref.onRefresh;
   var _useState = (0, _react.useState)([]),
@@ -56,39 +57,70 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     createFeedback = _useState10[0],
     setCreateFeedback = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    createdFormLink = _useState12[0],
+    setCreatedFormLink = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    copiedFormName = _useState14[0],
+    setCopiedFormName = _useState14[1];
+  var _useState15 = (0, _react.useState)({
       formTitle: '',
       formName: '',
       formId: '',
+      description: '',
       fields: []
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    formDraft = _useState12[0],
-    setFormDraft = _useState12[1];
-  var _useState13 = (0, _react.useState)(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedForm = _useState14[0],
-    setSelectedForm = _useState14[1];
-  var _useState15 = (0, _react.useState)(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    showDetailModal = _useState16[0],
-    setShowDetailModal = _useState16[1];
-  var _useState17 = (0, _react.useState)('responses'),
+    formDraft = _useState16[0],
+    setFormDraft = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    activeTab = _useState18[0],
-    setActiveTab = _useState18[1];
-  var _useState19 = (0, _react.useState)([]),
+    showEditModal = _useState18[0],
+    setShowEditModal = _useState18[1];
+  var _useState19 = (0, _react.useState)({
+      formTitle: '',
+      formName: '',
+      formId: '',
+      description: '',
+      fields: []
+    }),
     _useState20 = _slicedToArray(_useState19, 2),
-    formResponses = _useState20[0],
-    setFormResponses = _useState20[1];
-  var _useState21 = (0, _react.useState)(0),
+    editDraft = _useState20[0],
+    setEditDraft = _useState20[1];
+  var _useState21 = (0, _react.useState)(''),
     _useState22 = _slicedToArray(_useState21, 2),
-    responseCount = _useState22[0],
-    setResponseCount = _useState22[1];
+    editFeedback = _useState22[0],
+    setEditFeedback = _useState22[1];
   var _useState23 = (0, _react.useState)(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    loadingResponses = _useState24[0],
-    setLoadingResponses = _useState24[1];
+    isUpdating = _useState24[0],
+    setIsUpdating = _useState24[1];
+  var _useState25 = (0, _react.useState)(null),
+    _useState26 = _slicedToArray(_useState25, 2),
+    selectedForm = _useState26[0],
+    setSelectedForm = _useState26[1];
+  var _useState27 = (0, _react.useState)(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    showDetailModal = _useState28[0],
+    setShowDetailModal = _useState28[1];
+  var _useState29 = (0, _react.useState)('responses'),
+    _useState30 = _slicedToArray(_useState29, 2),
+    activeTab = _useState30[0],
+    setActiveTab = _useState30[1];
+  var _useState31 = (0, _react.useState)([]),
+    _useState32 = _slicedToArray(_useState31, 2),
+    formResponses = _useState32[0],
+    setFormResponses = _useState32[1];
+  var _useState33 = (0, _react.useState)(0),
+    _useState34 = _slicedToArray(_useState33, 2),
+    responseCount = _useState34[0],
+    setResponseCount = _useState34[1];
+  var _useState35 = (0, _react.useState)(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    loadingResponses = _useState36[0],
+    setLoadingResponses = _useState36[1];
   var fetchForms = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$apiCall, data, ok, _t;
@@ -200,14 +232,176 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       onFormAction(type, message);
     }
   };
+  var getFormPublicUrl = function getFormPublicUrl(formName) {
+    if (!formName) return '';
+    var base = (formPublicBaseUrl === null || formPublicBaseUrl === void 0 ? void 0 : formPublicBaseUrl.replace(/\/$/, '')) || (typeof window !== 'undefined' ? "".concat(window.location.origin, "/forms") : '/forms');
+    return "".concat(base, "?id=").concat(encodeURIComponent(formName));
+  };
+  var copyFormLink = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(formName, event) {
+      var _event$stopPropagatio;
+      var url, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);
+            url = getFormPublicUrl(formName);
+            if (url) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2);
+          case 1:
+            _context3.p = 1;
+            _context3.n = 2;
+            return navigator.clipboard.writeText(url);
+          case 2:
+            setCopiedFormName(formName);
+            setTimeout(function () {
+              return setCopiedFormName('');
+            }, 2000);
+            _context3.n = 4;
+            break;
+          case 3:
+            _context3.p = 3;
+            _t3 = _context3.v;
+            notify('error', 'Could not copy link');
+          case 4:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[1, 3]]);
+    }));
+    return function copyFormLink(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var FormPublicLink = function FormPublicLink(_ref5) {
+    var formName = _ref5.formName,
+      _ref5$compact = _ref5.compact,
+      compact = _ref5$compact === void 0 ? false : _ref5$compact;
+    var url = getFormPublicUrl(formName);
+    if (!url) return null;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center gap-2 ".concat(compact ? 'mt-1' : 'mt-2'),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-xs text-blue-600 hover:text-blue-800 underline truncate max-w-md"
+    }, url), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      onClick: function onClick(e) {
+        return copyFormLink(formName, e);
+      },
+      className: "shrink-0 text-xs text-gray-600 hover:text-gray-900 border border-gray-300 rounded px-2 py-0.5"
+    }, copiedFormName === formName ? 'Copied!' : 'Copy'));
+  };
   var resetFormDraft = function resetFormDraft() {
+    setCreatedFormLink('');
     setFormDraft({
       formTitle: '',
       formName: '',
       formId: '',
+      description: '',
       fields: []
     });
   };
+  var populateEditDraft = function populateEditDraft(form) {
+    return {
+      formTitle: form.formTitle || '',
+      formName: form.formName || '',
+      formId: form.formId || '',
+      description: form.description || '',
+      fields: (form.fields || []).map(function (field, index) {
+        return _objectSpread({
+          id: "".concat(field.name || 'field', "-").concat(index),
+          name: field.name || '',
+          label: field.label || '',
+          type: field.type || 'text',
+          required: !!field.required,
+          description: field.description || ''
+        }, field.type === 'radio' ? {
+          options: field.options || []
+        } : {});
+      })
+    };
+  };
+  var normalizeFieldsForSave = function normalizeFieldsForSave(fields) {
+    var usedNames = new Set();
+    return fields.map(function (field, index, allFields) {
+      var _field$name, _field$description;
+      var others = allFields.filter(function (_, i) {
+        return i !== index;
+      });
+      var name = ((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.trim()) || uniqueFieldName(field.label, index, others);
+      var candidate = name;
+      var suffix = 2;
+      while (usedNames.has(candidate)) {
+        candidate = "".concat(name).concat(suffix);
+        suffix += 1;
+      }
+      usedNames.add(candidate);
+      return _objectSpread(_objectSpread({
+        name: candidate,
+        label: field.label.trim(),
+        type: field.type,
+        required: !!field.required
+      }, (_field$description = field.description) !== null && _field$description !== void 0 && _field$description.trim() ? {
+        description: field.description.trim()
+      } : {}), field.type === 'radio' ? {
+        options: field.options || []
+      } : {});
+    });
+  };
+  var validateFormDraft = function validateFormDraft(draft) {
+    var trimmedTitle = draft.formTitle.trim();
+    var trimmedName = draft.formName.trim();
+    var trimmedId = draft.formId.trim();
+    if (!trimmedTitle || !trimmedName || !trimmedId) {
+      return {
+        valid: false,
+        message: 'Form title, name, and ID are required'
+      };
+    }
+    if (draft.fields.length === 0) {
+      return {
+        valid: false,
+        message: 'Add at least one field'
+      };
+    }
+    var hasInvalidField = draft.fields.some(function (field) {
+      var _field$name2, _field$label;
+      return !((_field$name2 = field.name) !== null && _field$name2 !== void 0 && _field$name2.trim()) || !((_field$label = field.label) !== null && _field$label !== void 0 && _field$label.trim());
+    });
+    if (hasInvalidField) {
+      return {
+        valid: false,
+        message: 'Each field needs a name and label'
+      };
+    }
+    var fieldNames = draft.fields.map(function (field) {
+      return field.name.trim();
+    });
+    var duplicateNames = fieldNames.filter(function (name, index) {
+      return fieldNames.indexOf(name) !== index;
+    });
+    if (duplicateNames.length > 0) {
+      return {
+        valid: false,
+        message: "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', '))
+      };
+    }
+    return {
+      valid: true,
+      trimmedTitle: trimmedTitle,
+      trimmedName: trimmedName,
+      trimmedId: trimmedId,
+      normalizedFields: normalizeFieldsForSave(draft.fields)
+    };
+  };
   var slugify = function slugify(value) {
     return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '').slice(0, 32);
   };
@@ -239,7 +433,8 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
           id: "".concat(Date.now(), "-").concat(index)
         }, defaults), {}, {
           type: type,
-          required: false
+          required: false,
+          description: ''
         }, type === 'radio' ? {
           options: ['Option 1', 'Option 2']
         } : {})])
@@ -264,136 +459,297 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       });
     });
   };
+  var addEditField = function addEditField(type) {
+    setEditDraft(function (prev) {
+      var index = prev.fields.length + 1;
+      var defaults = type === 'mobile' ? {
+        name: 'whatsapp',
+        label: 'Mobile Number'
+      } : {
+        name: "field".concat(index),
+        label: "Field ".concat(index)
+      };
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: [].concat(_toConsumableArray(prev.fields), [_objectSpread(_objectSpread({
+          id: "".concat(Date.now(), "-").concat(index)
+        }, defaults), {}, {
+          type: type,
+          required: false,
+          description: ''
+        }, type === 'radio' ? {
+          options: ['Option 1', 'Option 2']
+        } : {})])
+      });
+    });
+  };
+  var updateEditField = function updateEditField(index, updates) {
+    setEditDraft(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: prev.fields.map(function (field, i) {
+          return i === index ? _objectSpread(_objectSpread({}, field), updates) : field;
+        })
+      });
+    });
+  };
+  var removeEditField = function removeEditField(index) {
+    setEditDraft(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: prev.fields.filter(function (_, i) {
+          return i !== index;
+        })
+      });
+    });
+  };
   var createForm = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, usedNames, normalizedFields, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.p = _context3.n) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var validation, payload, _yield$apiCall3, result, ok, errorMessage, _t4;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
           case 0:
             setCreateFeedback('');
             if (projectId) {
-              _context3.n = 1;
+              _context4.n = 1;
               break;
             }
             notify('error', 'Project ID is required');
-            return _context3.a(2);
+            return _context4.a(2);
           case 1:
-            trimmedTitle = formDraft.formTitle.trim();
-            trimmedName = formDraft.formName.trim();
-            trimmedId = formDraft.formId.trim();
-            if (!(!trimmedTitle || !trimmedName || !trimmedId)) {
-              _context3.n = 2;
+            validation = validateFormDraft(formDraft);
+            if (validation.valid) {
+              _context4.n = 2;
               break;
             }
-            notify('error', 'Form title, name, and ID are required');
-            return _context3.a(2);
+            notify('error', validation.message);
+            return _context4.a(2);
           case 2:
-            if (!(formDraft.fields.length === 0)) {
-              _context3.n = 3;
-              break;
-            }
-            notify('error', 'Add at least one field');
-            return _context3.a(2);
-          case 3:
-            hasInvalidField = formDraft.fields.some(function (field) {
-              var _field$name, _field$label;
-              return !((_field$name = field.name) !== null && _field$name !== void 0 && _field$name.trim()) || !((_field$label = field.label) !== null && _field$label !== void 0 && _field$label.trim());
-            });
-            if (!hasInvalidField) {
-              _context3.n = 4;
-              break;
-            }
-            notify('error', 'Each field needs a name and label');
-            return _context3.a(2);
-          case 4:
-            fieldNames = formDraft.fields.map(function (field) {
-              return field.name.trim();
-            });
-            duplicateNames = fieldNames.filter(function (name, index) {
-              return fieldNames.indexOf(name) !== index;
-            });
-            if (!(duplicateNames.length > 0)) {
-              _context3.n = 5;
-              break;
-            }
-            notify('error', "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', ')));
-            return _context3.a(2);
-          case 5:
             setIsSaving(true);
-            _context3.p = 6;
-            usedNames = new Set();
-            normalizedFields = formDraft.fields.map(function (field, index, allFields) {
-              var _field$name2;
-              var others = allFields.filter(function (_, i) {
-                return i !== index;
-              });
-              var name = ((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.trim()) || uniqueFieldName(field.label, index, others);
-              var candidate = name;
-              var suffix = 2;
-              while (usedNames.has(candidate)) {
-                candidate = "".concat(name).concat(suffix);
-                suffix += 1;
-              }
-              usedNames.add(candidate);
-              return _objectSpread({
-                name: candidate,
-                label: field.label.trim(),
-                type: field.type,
-                required: !!field.required
-              }, field.type === 'radio' ? {
-                options: field.options || []
-              } : {});
-            });
+            _context4.p = 3;
             payload = {
-              formTitle: trimmedTitle,
-              formName: trimmedName,
-              formId: trimmedId,
-              fields: normalizedFields
+              formTitle: validation.trimmedTitle,
+              formName: validation.trimmedName,
+              formId: validation.trimmedId,
+              description: formDraft.description.trim(),
+              fields: validation.normalizedFields
             };
-            _context3.n = 7;
+            _context4.n = 4;
             return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
               method: 'POST',
               body: payload
             });
-          case 7:
-            _yield$apiCall3 = _context3.v;
+          case 4:
+            _yield$apiCall3 = _context4.v;
             result = _yield$apiCall3.data;
             ok = _yield$apiCall3.ok;
             if (ok) {
-              _context3.n = 8;
+              _context4.n = 5;
               break;
             }
             throw new Error(result.message || 'Failed to create form');
-          case 8:
+          case 5:
             notify('success', result.message || 'Form created successfully!');
-            resetFormDraft();
-            setCreateFeedback('');
-            setShowCreateModal(false);
+            setCreatedFormLink(getFormPublicUrl(validation.trimmedName));
             fetchForms();
             if (onRefresh) {
               onRefresh();
             }
-            _context3.n = 10;
+            _context4.n = 7;
             break;
-          case 9:
-            _context3.p = 9;
-            _t3 = _context3.v;
-            console.error('Error creating form:', _t3);
-            errorMessage = _t3 instanceof Error ? _t3.message : 'Failed to create form';
+          case 6:
+            _context4.p = 6;
+            _t4 = _context4.v;
+            console.error('Error creating form:', _t4);
+            errorMessage = _t4 instanceof Error ? _t4.message : 'Failed to create form';
             notify('error', errorMessage);
-          case 10:
-            _context3.p = 10;
+          case 7:
+            _context4.p = 7;
             setIsSaving(false);
-            return _context3.f(10);
-          case 11:
-            return _context3.a(2);
+            return _context4.f(7);
+          case 8:
+            return _context4.a(2);
         }
-      }, _callee3, null, [[6, 9, 10, 11]]);
+      }, _callee4, null, [[3, 6, 7, 8]]);
     }));
     return function createForm() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var updateForm = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      var validation, payload, _yield$apiCall4, result, ok, updatedForm, _t5;
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.p = _context5.n) {
+          case 0:
+            setEditFeedback('');
+            if (projectId) {
+              _context5.n = 1;
+              break;
+            }
+            setEditFeedback('Project ID is required');
+            return _context5.a(2);
+          case 1:
+            validation = validateFormDraft(editDraft);
+            if (validation.valid) {
+              _context5.n = 2;
+              break;
+            }
+            setEditFeedback(validation.message);
+            return _context5.a(2);
+          case 2:
+            setIsUpdating(true);
+            _context5.p = 3;
+            payload = {
+              formTitle: validation.trimmedTitle,
+              formId: validation.trimmedId,
+              description: editDraft.description.trim(),
+              fields: validation.normalizedFields
+            };
+            _context5.n = 4;
+            return (0, _auth.apiCall)(apiUrl, "/forms/update-form/".concat(encodeURIComponent(editDraft.formName)), projectId, {
+              method: 'PUT',
+              body: payload
+            });
+          case 4:
+            _yield$apiCall4 = _context5.v;
+            result = _yield$apiCall4.data;
+            ok = _yield$apiCall4.ok;
+            if (ok) {
+              _context5.n = 5;
+              break;
+            }
+            throw new Error(result.message || 'Failed to update form');
+          case 5:
+            updatedForm = result.data || _objectSpread(_objectSpread(_objectSpread({}, selectedForm), payload), {}, {
+              formName: editDraft.formName
+            });
+            setSelectedForm(updatedForm);
+            setShowEditModal(false);
+            setEditFeedback('');
+            fetchForms();
+            if (onRefresh) {
+              onRefresh();
+            }
+            if (onFormAction) {
+              onFormAction('success', result.message || 'Form updated successfully!');
+            }
+            _context5.n = 7;
+            break;
+          case 6:
+            _context5.p = 6;
+            _t5 = _context5.v;
+            console.error('Error updating form:', _t5);
+            setEditFeedback(_t5 instanceof Error ? _t5.message : 'Failed to update form');
+          case 7:
+            _context5.p = 7;
+            setIsUpdating(false);
+            return _context5.f(7);
+          case 8:
+            return _context5.a(2);
+        }
+      }, _callee5, null, [[3, 6, 7, 8]]);
+    }));
+    return function updateForm() {
+      return _ref7.apply(this, arguments);
     };
   }();
+  var openEditModal = function openEditModal(form) {
+    setEditDraft(populateEditDraft(form));
+    setEditFeedback('');
+    setShowEditModal(true);
+  };
+  var renderFieldBuilder = function renderFieldBuilder(draft, _ref8) {
+    var addFieldFn = _ref8.addFieldFn,
+      updateFieldFn = _ref8.updateFieldFn,
+      removeFieldFn = _ref8.removeFieldFn;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center justify-between mb-3"
+    }, /*#__PURE__*/_react["default"].createElement("h3", {
+      className: "text-sm font-semibold text-gray-900"
+    }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex flex-wrap gap-2"
+    }, ['text', 'email', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
+      return /*#__PURE__*/_react["default"].createElement("button", {
+        key: type,
+        type: "button",
+        onClick: function onClick() {
+          return addFieldFn(type);
+        },
+        className: "px-3 py-1 text-xs rounded-full border border-gray-300 hover:bg-gray-50"
+      }, "+ ", type);
+    }))), draft.fields.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500"
+    }, "Add fields using the buttons above") : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "space-y-4"
+    }, draft.fields.map(function (field, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: field.id || index,
+        className: "rounded-lg border border-gray-200 p-4 space-y-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "flex items-center justify-between"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "text-sm font-medium text-gray-700 capitalize"
+      }, field.type, " field"), /*#__PURE__*/_react["default"].createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          return removeFieldFn(index);
+        },
+        className: "text-sm text-red-600 hover:text-red-700"
+      }, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "grid grid-cols-1 md:grid-cols-2 gap-3"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        type: "text",
+        value: field.label,
+        onChange: function onChange(e) {
+          return updateFieldFn(index, {
+            label: e.target.value
+          });
+        },
+        placeholder: "Label",
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+      }), /*#__PURE__*/_react["default"].createElement("input", {
+        type: "text",
+        value: field.name,
+        onChange: function onChange(e) {
+          return updateFieldFn(index, {
+            name: slugify(e.target.value)
+          });
+        },
+        placeholder: "name",
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+      })), /*#__PURE__*/_react["default"].createElement("input", {
+        type: "text",
+        value: field.description || '',
+        onChange: function onChange(e) {
+          return updateFieldFn(index, {
+            description: e.target.value
+          });
+        },
+        placeholder: "Help text (optional, shown below the label)",
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "flex items-center gap-2 text-sm text-gray-700"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        type: "checkbox",
+        checked: !!field.required,
+        onChange: function onChange(e) {
+          return updateFieldFn(index, {
+            required: e.target.checked
+          });
+        }
+      }), "Required"), field.type === 'radio' && /*#__PURE__*/_react["default"].createElement("textarea", {
+        value: (field.options || []).join('\n'),
+        onChange: function onChange(e) {
+          return updateFieldFn(index, {
+            options: e.target.value.split('\n').map(function (option) {
+              return option.trim();
+            }).filter(Boolean)
+          });
+        },
+        placeholder: "One option per line",
+        rows: 3,
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+      }));
+    })));
+  };
   var handleViewForm = function handleViewForm(form) {
     setSelectedForm(form);
     setActiveTab('responses');
@@ -481,7 +837,10 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       className: "text-xs text-gray-400"
     }, "ID: ", form.formId), /*#__PURE__*/_react["default"].createElement("p", {
       className: "text-xs text-gray-400"
-    }, "Name: ", form.formName)))), /*#__PURE__*/_react["default"].createElement("div", {
+    }, "Name: ", form.formName), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+      formName: form.formName,
+      compact: true
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "text-sm text-gray-500"
     }, ((_form$fields = form.fields) === null || _form$fields === void 0 ? void 0 : _form$fields.length) || 0, " fields"));
   })))), showCreateModal && /*#__PURE__*/_react["default"].createElement("div", {
@@ -490,9 +849,26 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-3xl max-h-[90vh] overflow-y-auto"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "text-xl font-bold text-gray-800 mb-6"
-  }, "Create New Form"), createFeedback && /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Create New Form"), createFeedback && !createdFormLink && /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
-  }, createFeedback), /*#__PURE__*/_react["default"].createElement("div", {
+  }, createFeedback), createdFormLink && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 space-y-2"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "font-medium"
+  }, "Form created! Share this link:"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex flex-wrap items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    href: createdFormLink,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-blue-700 underline break-all"
+  }, createdFormLink), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return copyFormLink(formDraft.formName.trim());
+    },
+    className: "text-xs border border-green-300 rounded px-2 py-1 bg-white"
+  }, "Copy link"))), !createdFormLink && /*#__PURE__*/_react["default"].createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-4"
@@ -550,87 +926,44 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
   }), /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-xs text-gray-500 mt-1"
-  }, "Used in URLs like `/forms?id=workshopform`"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex items-center justify-between mb-3"
-  }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: "text-sm font-semibold text-gray-900"
-  }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex flex-wrap gap-2"
-  }, ['text', 'email', 'mobile', 'textarea', 'radio', 'fileUploader'].map(function (type) {
-    return /*#__PURE__*/_react["default"].createElement("button", {
-      key: type,
-      type: "button",
-      onClick: function onClick() {
-        return addField(type);
-      },
-      className: "px-3 py-1 text-xs rounded-full border border-gray-300 hover:bg-gray-50"
-    }, "+ ", type);
-  }))), formDraft.fields.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500"
-  }, "Add fields using the buttons above") : /*#__PURE__*/_react["default"].createElement("div", {
-    className: "space-y-4"
-  }, formDraft.fields.map(function (field, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: field.id || index,
-      className: "rounded-lg border border-gray-200 p-4 space-y-3"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "flex items-center justify-between"
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "text-sm font-medium text-gray-700 capitalize"
-    }, field.type, " field"), /*#__PURE__*/_react["default"].createElement("button", {
-      type: "button",
-      onClick: function onClick() {
-        return removeField(index);
-      },
-      className: "text-sm text-red-600 hover:text-red-700"
-    }, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "grid grid-cols-1 md:grid-cols-2 gap-3"
-    }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: "text",
-      value: field.label,
-      onChange: function onChange(e) {
-        return updateField(index, {
-          label: e.target.value
-        });
-      },
-      placeholder: "Label",
-      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
-    }), /*#__PURE__*/_react["default"].createElement("input", {
-      type: "text",
-      value: field.name,
-      onChange: function onChange(e) {
-        return updateField(index, {
-          name: slugify(e.target.value)
-        });
-      },
-      placeholder: "name",
-      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
-    })), /*#__PURE__*/_react["default"].createElement("label", {
-      className: "flex items-center gap-2 text-sm text-gray-700"
-    }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: "checkbox",
-      checked: !!field.required,
-      onChange: function onChange(e) {
-        return updateField(index, {
-          required: e.target.checked
-        });
-      }
-    }), "Required"), field.type === 'radio' && /*#__PURE__*/_react["default"].createElement("textarea", {
-      value: (field.options || []).join('\n'),
-      onChange: function onChange(e) {
-        return updateField(index, {
-          options: e.target.value.split('\n').map(function (option) {
-            return option.trim();
-          }).filter(Boolean)
+  }, "Used in URLs like `/forms?id=workshopform`"), formDraft.formName.trim() && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-2 rounded-md border border-blue-100 bg-blue-50 px-3 py-2"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-xs font-medium text-blue-900 mb-1"
+  }, "Public form link"), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+    formName: formDraft.formName.trim(),
+    compact: true
+  })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "formDescription",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Description (optional)"), /*#__PURE__*/_react["default"].createElement("textarea", {
+    id: "formDescription",
+    value: formDraft.description,
+    onChange: function onChange(e) {
+      return setFormDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          description: e.target.value
         });
-      },
-      placeholder: "One option per line",
-      rows: 3,
-      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
-    }));
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+      });
+    },
+    placeholder: "Instructions or context shown at the top of the public form",
+    rows: 3,
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), renderFieldBuilder(formDraft, {
+    addFieldFn: addField,
+    updateFieldFn: updateField,
+    removeFieldFn: removeField
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex justify-end gap-4 mt-6"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
+  }, createdFormLink ? /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      resetFormDraft();
+      setCreateFeedback('');
+      setShowCreateModal(false);
+    },
+    className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md"
+  }, "Done") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
       resetFormDraft();
@@ -645,7 +978,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"
   }, isSaving ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "animate-spin h-5 w-5 mx-auto border-2 border-white border-t-transparent rounded-full"
-  }) : 'Create Form')))), showDetailModal && selectedForm && /*#__PURE__*/_react["default"].createElement("div", {
+  }) : 'Create Form'))))), showDetailModal && selectedForm && /*#__PURE__*/_react["default"].createElement("div", {
     className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-4xl max-h-[90vh] overflow-y-auto"
@@ -653,7 +986,15 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "flex items-center justify-between mb-6"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "text-xl font-bold text-gray-800"
-  }, selectedForm.formTitle), /*#__PURE__*/_react["default"].createElement("button", {
+  }, selectedForm.formTitle), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return openEditModal(selectedForm);
+    },
+    className: "text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md"
+  }, "Edit Form"), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       return setShowDetailModal(false);
     },
@@ -668,7 +1009,13 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M6 18L18 6M6 6l12 12"
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+  }))))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-blue-100 bg-blue-50 px-4 py-3"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm font-medium text-blue-900 mb-1"
+  }, "Public form link"), /*#__PURE__*/_react["default"].createElement(FormPublicLink, {
+    formName: selectedForm.formName
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-4"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex space-x-4 border-b border-gray-200"
@@ -694,7 +1041,13 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "font-medium text-gray-700"
   }, "Form Name:"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-gray-900"
-  }, selectedForm.formName))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+  }, selectedForm.formName)), selectedForm.description && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "md:col-span-2"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "font-medium text-gray-700"
+  }, "Description:"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-gray-900 whitespace-pre-wrap"
+  }, selectedForm.description))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
     className: "font-medium text-gray-700 mb-2"
   }, "Form Fields:"), /*#__PURE__*/_react["default"].createElement("div", {
     className: "bg-gray-50 p-4 rounded-lg"
@@ -777,6 +1130,97 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     }, "View Raw Data"), /*#__PURE__*/_react["default"].createElement("pre", {
       className: "mt-2 text-xs bg-gray-50 p-3 rounded overflow-x-auto"
     }, JSON.stringify(response, null, 2)))));
-  }))))));
+  }))))), showEditModal && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60] p-4"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-3xl max-h-[90vh] overflow-y-auto"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "text-xl font-bold text-gray-800 mb-6"
+  }, "Edit Form"), editFeedback && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+  }, editFeedback), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "space-y-6"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "editFormTitle",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Form Title *"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "editFormTitle",
+    type: "text",
+    value: editDraft.formTitle,
+    onChange: function onChange(e) {
+      return setEditDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          formTitle: e.target.value
+        });
+      });
+    },
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "editFormId",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Form ID *"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "editFormId",
+    type: "text",
+    value: editDraft.formId,
+    onChange: function onChange(e) {
+      return setEditDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          formId: e.target.value.toUpperCase()
+        });
+      });
+    },
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "md:col-span-2"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "editFormName",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Form Name (URL slug)"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "editFormName",
+    type: "text",
+    value: editDraft.formName,
+    disabled: true,
+    className: "w-full px-3 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-500"
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-xs text-gray-500 mt-1"
+  }, "Form name cannot be changed after creation"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "editFormDescription",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Description (optional)"), /*#__PURE__*/_react["default"].createElement("textarea", {
+    id: "editFormDescription",
+    value: editDraft.description,
+    onChange: function onChange(e) {
+      return setEditDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          description: e.target.value
+        });
+      });
+    },
+    placeholder: "Instructions or context shown at the top of the public form",
+    rows: 3,
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), renderFieldBuilder(editDraft, {
+    addFieldFn: addEditField,
+    updateFieldFn: updateEditField,
+    removeFieldFn: removeEditField
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex justify-end gap-4 mt-6"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      setShowEditModal(false);
+      setEditFeedback('');
+    },
+    className: "bg-gray-300 text-gray-700 hover:bg-gray-400 px-4 py-2 rounded-md"
+  }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: updateForm,
+    disabled: isUpdating,
+    className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"
+  }, isUpdating ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "animate-spin h-5 w-5 mx-auto border-2 border-white border-t-transparent rounded-full"
+  }) : 'Save Changes')))));
 };
 var _default = exports["default"] = PowrFormsAdmin;

package/dist/forms/index.js

@@ -176,6 +176,7 @@ var PowrForm = function PowrForm(_ref) {
           label: field.label,
           required: field.required,
           error: errors[field.name],
+          description: field.description,
           theme: theme
         }, /*#__PURE__*/_react["default"].createElement("input", _extends({
           type: "email"
@@ -194,6 +195,7 @@ var PowrForm = function PowrForm(_ref) {
           label: field.label,
           required: field.required,
           error: errors[field.name],
+          description: field.description,
           theme: theme
         }, /*#__PURE__*/_react["default"].createElement("input", _extends({
           type: "text"
@@ -208,6 +210,7 @@ var PowrForm = function PowrForm(_ref) {
           label: field.label,
           required: field.required,
           error: errors[field.name],
+          description: field.description,
           theme: theme
         }, /*#__PURE__*/_react["default"].createElement("input", _extends({
           type: "tel",
@@ -226,7 +229,8 @@ var PowrForm = function PowrForm(_ref) {
         return /*#__PURE__*/_react["default"].createElement(InputField, {
           key: field.name,
           label: field.label,
-          required: field.required
+          required: field.required,
+          description: field.description
         }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({}, register(field.name, {
           required: field.required
         }), {
@@ -240,6 +244,7 @@ var PowrForm = function PowrForm(_ref) {
           options: field.options || [],
           register: register,
           error: errors[field.name],
+          description: field.description,
           theme: theme
         });
       case "custom":
@@ -267,7 +272,9 @@ var PowrForm = function PowrForm(_ref) {
           className: "block text-base font-medium mb-1"
         }, field.label, " ", field.required && /*#__PURE__*/_react["default"].createElement("span", {
           className: "text-red-600"
-        }, "*")), /*#__PURE__*/_react["default"].createElement("input", {
+        }, "*")), field.description && /*#__PURE__*/_react["default"].createElement("p", {
+          className: "text-sm text-gray-500 mb-2"
+        }, field.description), /*#__PURE__*/_react["default"].createElement("input", {
           type: "file",
           accept: "image/*,application/pdf",
           onChange: function onChange(e) {
@@ -317,7 +324,9 @@ var PowrForm = function PowrForm(_ref) {
     className: "border-b-4 ".concat(borderColor, " pb-6 mb-8")
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "text-3xl font-bold text-gray-800"
-  }, formSchema.formTitle)), successMessage && /*#__PURE__*/_react["default"].createElement("div", {
+  }, formSchema.formTitle), formSchema.description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-gray-600 mt-3 text-base leading-relaxed"
+  }, formSchema.description)), successMessage && /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-8 flex flex-col items-center justify-center p-6 bg-green-50 border border-green-300 rounded-lg shadow animate-fade-in"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "mb-2"
@@ -368,13 +377,16 @@ var InputField = function InputField(_ref4) {
     required = _ref4.required,
     error = _ref4.error,
     children = _ref4.children,
+    description = _ref4.description,
     _ref4$theme = _ref4.theme,
     theme = _ref4$theme === void 0 ? "purple" : _ref4$theme;
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
     className: "block text-base font-medium mb-1"
   }, label, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
     className: "text-red-600"
-  }, "*")), children, error && /*#__PURE__*/_react["default"].createElement("p", {
+  }, "*")), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm text-gray-500 mb-2"
+  }, description), children, error && /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-red-600 text-sm mt-1"
   }, error.message));
 };
@@ -386,13 +398,16 @@ var RadioGroup = function RadioGroup(_ref5) {
     options = _ref5.options,
     register = _ref5.register,
     error = _ref5.error,
+    description = _ref5.description,
     _ref5$theme = _ref5.theme,
     theme = _ref5$theme === void 0 ? "purple" : _ref5$theme;
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
     className: "block text-base font-medium mb-2"
   }, label, " ", /*#__PURE__*/_react["default"].createElement("span", {
     className: "text-red-600"
-  }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "*")), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-sm text-gray-500 mb-2"
+  }, description), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex flex-col gap-3"
   }, options.map(function (option) {
     return /*#__PURE__*/_react["default"].createElement("label", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.6.10",
+    "version": "5.6.12",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",