@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0 → 1.0.2-beta.2

package/dist/index.cjs.js

@@ -2117,438 +2117,16 @@ const Text$8 = Components$4.Text;
 
 function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const SET_NAVIGATION_STATE$1 = "SET_NAVIGATION_STATE";
-const UPDATE_STEP_VALIDATION$1 = "UPDATE_STEP_VALIDATION";
-const MARK_STEP_COMPLETE$1 = "MARK_STEP_COMPLETE";
-const setCurrentStep = function (step) {
-  let previousStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  return {
-    type: SET_NAVIGATION_STATE$1,
-    payload: {
-      currentStep: step,
-      previousStep,
-      canGoBack: step !== "welcome",
-      canGoForward: true
-    }
-  };
-};
-const goToStep = step => (dispatch, getState) => {
-  const state = getState()[require("../values.config").reducerKey];
-  const currentStep = state && state.wizard && state.wizard.navigation && state.wizard.navigation.currentStep;
-
-  // Clear form submission state when changing steps
-  const {
-    clearFormSubmissionState
-  } = require("./formActions");
-  dispatch(clearFormSubmissionState());
-  dispatch(setCurrentStep(step, currentStep));
-};
-const updateStepValidation = function (step, isValid) {
-  let errors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return {
-    type: UPDATE_STEP_VALIDATION$1,
-    payload: {
-      step,
-      isValid,
-      errors
-    }
-  };
-};
-const validateAndUpdateStep = step => (dispatch, getState) => {
-  // Use existing selectors to get form data
-  const state = getState();
-  const title = selectFormTitle(state);
-  const icon = selectFormIcon(state);
-  const displayName = selectFormDisplayName(state);
-  const layout = selectFormLayout(state);
-  const fields = selectFormFields(state);
-  const form = {
-    title,
-    icon,
-    displayName,
-    layout,
-    fields
-  };
-  const {
-    isValid,
-    errors
-  } = getFormValidation(form, step);
-  dispatch(updateStepValidation(step, isValid, errors));
-
-  // If valid, mark as complete
-  if (isValid) {
-    dispatch({
-      type: MARK_STEP_COMPLETE$1,
-      payload: step
-    });
-  }
-  return {
-    isValid,
-    errors
-  };
-};
-const getFormValidation = (form, step) => {
-  // Return validation results for undefined form (prevent crashes)
-  if (!form) {
-    switch (step) {
-      case "overview":
-        return {
-          isValid: false,
-          errors: {
-            title: "Title is required",
-            displayName: "Display name is required",
-            icon: "Icon is required"
-          }
-        };
-      case "fields":
-        return {
-          isValid: false,
-          errors: {
-            missingTitle: "Title field is required",
-            missingImage: "Feature image field is required",
-            fieldLabels: "Some fields are missing labels"
-          }
-        };
-      case "layout":
-        return {
-          isValid: false,
-          errors: {
-            layoutType: "Layout type is required"
-          }
-        };
-      default:
-        return {
-          isValid: false,
-          errors: {}
-        };
-    }
-  }
-  switch (step) {
-    case "overview":
-      {
-        const hasTitle = form.title && form.title.trim().length > 0;
-        const hasDisplayName = form.displayName && form.displayName.trim().length > 0;
-        const hasIcon = form.icon && form.icon.length > 0;
-        return {
-          isValid: hasTitle && hasDisplayName && hasIcon,
-          errors: {
-            title: !hasTitle ? "Title is required" : null,
-            displayName: !hasDisplayName ? "Display name is required" : null,
-            icon: !hasIcon ? "Icon is required" : null
-          }
-        };
-      }
-    case "fields":
-      {
-        const hasTitleField = form.fields && form.fields.some(field => field.id === "mandatory-title");
-        const hasImageField = form.fields && form.fields.some(field => field.id === "mandatory-feature-image");
-
-        // Check each field for missing labels and create field-specific errors
-        const fieldErrors = {};
-        let allFieldsHaveLabels = true;
-        if (form.fields) {
-          form.fields.forEach(field => {
-            if ((field.type === "text" || field.type === "description" || field.type === "title" || field.type === "image" || field.type === "gallery" || field.type === "feature-image" || field.type === "file" || field.type === "cta") && field.values) {
-              if (!field.values.label || field.values.label.trim().length === 0) {
-                fieldErrors[field.id] = "Field label is required";
-                allFieldsHaveLabels = false;
-              }
-            }
-          });
-        }
-        return {
-          isValid: hasTitleField && hasImageField && allFieldsHaveLabels,
-          errors: _objectSpread$8({
-            missingTitle: !hasTitleField ? "Title field is required" : null,
-            missingImage: !hasImageField ? "Feature image field is required" : null
-          }, fieldErrors)
-        };
-      }
-    case "layout":
-      {
-        const hasLayoutType = form.layout && form.layout.type && form.layout.type.length > 0;
-        return {
-          isValid: hasLayoutType,
-          errors: {
-            layoutType: !hasLayoutType ? "Layout type is required" : null
-          }
-        };
-      }
-    default:
-      return {
-        isValid: true,
-        errors: {}
-      };
-  }
-};
-const setCurrentStepAndSave = function (step) {
-  let previousStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  return dispatch => {
-    dispatch(setCurrentStep(step, previousStep));
-  };
-};
-
-var css$d = ".fullWidthContent {\n\tmax-width: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding: 2rem 2rem 3rem 2rem; /* Add extra bottom padding */\n}\n\n/* Full-width container that allows scrollbar at edge */\n.fullWidthContainer {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0; /* Allow content to determine height */\n\twidth: 100%; /* Take full width to ensure scrollbar is at edge */\n}\n\n/* Content container to keep content centered */\n.contentContainer {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0;\n\tmax-width: 960px;\n\tmargin: 0 auto;\n\tpadding: 64px 32px;\n\twidth: 100%;\n\tbox-sizing: border-box;\n}\n\n/* Legacy container class for backward compatibility */\n.container{\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0; /* Allow content to determine height */\n  max-width: 960px;\n  margin: 0 auto;\n  padding: 64px 32px;\n}\n\n/* Responsive adjustments for content container */\n@media (max-width: 768px) {\n\t.contentContainer {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */\n\t}\n\t.container {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Legacy container support */\n\t}\n}\n\n@media (max-width: 480px) {\n\t.contentContainer {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */\n\t}\n\t.container {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Legacy container support */\n\t}\n}\n\n/* Enhanced sidebar navigation for progress indication */\n:global(.hub-sideBar) {\n\t/* Make sidebar more prominent during creation mode */\n}\n\n:global(.sideNav-item.isCurrent) {\n\tbackground: var(--colour-purple, #6e79c5) !important;\n\tcolor: var(--colour-white, #ffffff) !important;\n\tfont-weight: 600 !important;\n\tborder-left: 4px solid var(--colour-branding-dark, #364196) !important;\n}\n\n:global(.sideNav-item.isCurrent) i {\n\tcolor: var(--colour-white, #ffffff) !important;\n}\n\n:global(.sideNav-item.isCompleted) {\n\tcolor: var(--colour-branding-dark, #364196) !important;\n\tposition: relative;\n}\n\n:global(.sideNav-item.isCompleted::after) {\n\tcontent: \"✓\";\n\tposition: absolute;\n\tright: 1rem;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\tcolor: var(--colour-branding-dark, #364196);\n\tfont-weight: bold;\n}\n\n:global(.sideNav-item.isDisabled) {\n\topacity: 0.4;\n\tcursor: not-allowed;\n}\n\n/* Enhanced progress section */\n:global(.hub-sideBar-section) {\n\tborder-bottom: 2px solid var(--colour-branding-main-fade, rgba(74, 87, 183, 0.15));\n\tpadding-bottom: 1rem;\n\tmargin-bottom: 1rem;\n}\n\n:global(.hub-sideBar-section:last-child) {\n\tborder-bottom: none;\n}\n\n/* Delete button styling - bold red for development */\n.deleteButton {\n\tcolor: #dc3545 !important;\n\tfont-weight: bold !important;\n}\n\n:global(.sideNav-item.deleteButton) {\n\tcolor: #dc3545 !important;\n\tfont-weight: bold !important;\n}\n\n:global(.sideNav-item.deleteButton:hover) {\n\tbackground-color: rgba(220, 53, 69, 0.1) !important;\n}\n\n:global(.sideNav-item.deleteButton i) {\n\tcolor: #dc3545 !important;\n}\n\n/* Development delete button */\n.devDeleteButton {\n\tposition: absolute;\n\tbottom: 20px;\n\tleft: 20px;\n\tbackground-color: #ff0000;\n\tcolor: #ffffff;\n\tborder: none;\n\tpadding: 8px 12px;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\tfont-size: 12px;\n\tfont-weight: bold;\n\tz-index: 1000;\n\tbox-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n\n.devDeleteButton:hover {\n\tbackground-color: #cc0000;\n}\n";
-n(css$d,{});
-
-const {
-  Helper: Helper$2,
-  Session: Session$2
-} = PlussCore__namespace;
-const {
-  getUrl: getUrl$2
-} = Helper$2;
-const {
-  authedFunction: authedFunction$2
-} = Session$2;
-
-/**
- * Sidebar Layout component for feature builder wizard
- * Provides navigation sidebar with step progression, completion tracking
- * Includes delete functionality for feature definitions
- * Manages step accessibility based on wizard mode and validation state
- *
- * @param {Object} props - Component props
- * @param {React.ReactNode} props.children - Child components to render in main content area
- * @param {Object} props.history - React Router history object for navigation
- * @returns {React.ReactElement} Layout component with sidebar navigation
- *
- * @example
- * <SidebarLayout history={historyObject}>
- *   <YourMainContent />
- * </SidebarLayout>
- */
-const SideBarInner = props => {
-  const {
-    children,
-    history
-  } = props;
-  const dispatch = reactRedux.useDispatch();
-
-  // Get wizard state
-  const mode = reactRedux.useSelector(selectWizardMode);
-  const isEditMode = reactRedux.useSelector(selectIsEditMode);
-  const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
-  const currentStep = reactRedux.useSelector(selectCurrentStep);
-  reactRedux.useSelector(selectStepProgress);
-  const definition = reactRedux.useSelector(selectDefinition);
-  const definitionId = reactRedux.useSelector(selectDefinitionId);
-  const auth = reactRedux.useSelector(state => state.auth);
-
-  // Delete functionality state
-  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
-  const [isDeleting, setIsDeleting] = React.useState(false);
-  const goTo = url => history.push(url);
-  const isSelected = url => {
-    return history.location.pathname === url;
-  };
-
-  // Define step configuration with dynamic URL based on mode
-  const getStepUrl = stepKey => {
-    // Always use /definition/ in the URL since that's how routes are registered
-    return "/feature-builder/definition/".concat(stepKey);
-  };
-  const steps = [{
-    key: "overview",
-    text: "Feature Overview",
-    icon: "info-circle",
-    url: getStepUrl("overview")
-  }, {
-    key: "fields",
-    text: "Configure Fields",
-    icon: "edit",
-    url: getStepUrl("fields")
-  }, {
-    key: "layout",
-    text: "Choose Layout",
-    icon: "columns",
-    url: getStepUrl("layout")
-  }];
-
-  // Build sidebar items based on mode
-  const buildSidebarItems = () => {
-    return steps.map((step, index) => {
-      const isCompleted = selectIsStepComplete(step.key);
-      const isAccessible = selectIsStepAccessible(step.key);
-
-      // Add step number to text for better clarity
-      const stepText = "".concat(index + 1, ". ").concat(step.text);
-      const itemProps = {
-        type: "navItem",
-        text: stepText,
-        icon: step.icon,
-        selected: isSelected(step.url),
-        onclick: isAccessible ? () => {
-          goTo(step.url);
-          dispatch(goToStep(step.key));
-        } : null,
-        isFontAwesome: true,
-        // Enhanced completion indicator
-        completed: isCompleted,
-        // Allow navigation to completed steps even in create mode
-        disabled: mode === "create" && !isAccessible
-      };
-      return itemProps;
-    });
-  };
-
-  // Determine sidebar title - always use "Build Your Feature" now
-  const getSidebarTitle = () => {
-    return "Build Your Feature";
-  };
-
-  // Simple help text
-  const getHelpText = () => {
-    return "Get help with feature builder";
-  };
-
-  // Build sidebar sections - simplified without progress section
-  const sidebarSections = [{
-    title: getSidebarTitle(),
-    items: buildSidebarItems()
-  }];
-
-  // Delete functionality handlers
-  const handleDeleteClick = () => {
-    setShowDeleteConfirm(true);
-  };
-  const handleConfirmDelete = async () => {
-    if (!definition) return;
-    setIsDeleting(true);
-    try {
-      await authedFunction$2({
-        method: "POST",
-        url: getUrl$2("feature-builder", "definition/update/delete"),
-        data: {
-          id: definitionId,
-          site: auth.site
-        }
-      });
-
-      // Redirect to welcome screen after deletion
-      history.push("/feature-builder/definition/overview");
-    } finally {
-      setIsDeleting(false);
-      setShowDeleteConfirm(false);
-    }
-  };
-  const handleCancelDelete = () => {
-    setShowDeleteConfirm(false);
-  };
-
-  // Add effect to manually attach click handlers since HubSidebar might not use onclick properly
-  React.useEffect(() => {
-    const attachClickHandlers = () => {
-      const stepsWithUrls = [{
-        key: "overview",
-        url: getStepUrl("overview")
-      }, {
-        key: "fields",
-        url: getStepUrl("fields")
-      }, {
-        key: "layout",
-        url: getStepUrl("layout")
-      }];
-      stepsWithUrls.forEach(step => {
-        const navItem = Array.from(document.querySelectorAll(".sideNav-item")).find(item => item.textContent && item.textContent.includes(step.key === "overview" ? "Feature Overview" : step.key === "fields" ? "Configure Fields" : "Choose Layout"));
-        if (navItem) {
-          // Remove any existing click listeners
-          navItem.onclick = null;
-
-          // Check if this step is accessible
-          const isAccessible = selectIsStepAccessible(step.key)({
-            [values.reducerKey]: {
-              wizard: {
-                mode: mode,
-                navigation: {
-                  currentStep: currentStep
-                }
-              }
-            }
-          });
-
-          // Add our click handler only if accessible
-          if (isAccessible) {
-            navItem.onclick = event => {
-              event.preventDefault();
-              event.stopPropagation();
-              history.push(step.url);
-              dispatch(goToStep(step.key));
-            };
-          }
-
-          // Make sure it's styled appropriately
-          navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
-          navItem.style.pointerEvents = "auto";
-          navItem.style.opacity = isAccessible ? "1" : "0.5";
-        }
-      });
-    };
-
-    // Initial attachment
-    attachClickHandlers();
-
-    // Re-attach after a short delay to ensure HubSidebar has rendered
-    const timeoutId = setTimeout(attachClickHandlers, 100);
-
-    // Also try to re-attach when DOM changes (observe for mutations)
-    const observer = new MutationObserver(() => {
-      setTimeout(attachClickHandlers, 50);
-    });
-
-    // Start observing the document body for changes
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-    return () => {
-      clearTimeout(timeoutId);
-      observer.disconnect();
-    };
-  }, [history, dispatch, isEditMode, isCreateMode, currentStep]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "hub-wrapperContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(HubSidebar, {
-    sections: sidebarSections,
-    helpGuide: {
-      text: getHelpText(),
-      url: "https://www.plusscommunities.com/user-guide"
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleDeleteClick,
-    className: css$d.devDeleteButton
-  }, "DELETE FEATURE DEF"), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "hub-contentWrapper"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: css$d.fullWidthContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: css$d.contentContainer
-  }, children))), /*#__PURE__*/React__default["default"].createElement(DeleteConfirmationPopup, {
-    isOpen: showDeleteConfirm,
-    listing: definition,
-    onConfirm: handleConfirmDelete,
-    onCancel: handleCancelDelete,
-    isDeleting: isDeleting,
-    deleteType: "featureDefinition"
-  }));
-};
-const SidebarLayout = reactRouter.withRouter(SideBarInner);
-
-var css$c = ".content {\n\tflex: 1 1 auto;\n\tdisplay: flex;\n\tflex-flow: column nowrap;\n\tpadding: 2rem 0 3rem 0; /* Add proper top/bottom padding */\n\tmin-height: 100%; /* Ensure full height for proper spacing */\n}\n\n/* New page wrapper for centered container approach */\n.pageWrapper {\n\tpadding: 2rem 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n}\n\n@media (min-width: 768px) {\n\t.pageWrapper {\n\t\tpadding: 3rem 0;\n\t}\n}\n\n/* Form container styling when using CenteredContainer */\n.formContainer {\n\tbackground-color: var(--bg-white);\n}\n\n/* Section styling */\n.section {\n\tmargin-bottom: 2rem;\n\t\tpadding:  0 0 2em;\n}\n\n.section--no-border {\n\t\tborder-bottom: none;\n}\n\n.subtitle {\n\tcolor: var(--text-bluegrey, #6c7a90);\n}\n\n.sectionHeader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n}\n\n/* Add Field Button styling */\n.addFieldButton {\n\tbackground: var(--colour-branding-action, #5c90df);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 1.5rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tcursor: pointer;\n\tmargin-bottom: 2rem;\n\ttransition: all 0.2s ease;\n}\n\n.addFieldButton:hover {\n\tbackground: var(--colour-branding-action-hover, #364196);\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 2px 4px rgba(92, 144, 223, 0.3);\n}\n\n.addFieldButton:focus {\n\toutline: 2px solid var(--colour-branding-action, #5c90df);\n\toutline-offset: 2px;\n}\n\n.addFieldButton:active {\n\ttransform: translateY(0);\n}\n\n/* Refresh button styling */\n.refreshButton {\n\tmargin-left: 10px;\n\tpadding: 2px 8px;\n\tfont-size: 12px;\n\tbackground: var(--colour-dusk, #536280);\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\ttransition: background-color 0.2s ease;\n}\n\n.refreshButton:hover {\n\tbackground: var(--colour-dusk-hover, #485968);\n}\n\n/* Error message container */\n.errorMessageContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n}\n\n/* Add Field Container - matches field structure */\n.addFieldContainer {\n\tdisplay: flex;\n\tmargin-top: 32px;\n}\n\n.fieldNumberContainer {\n\tdisplay: flex;\n\twidth: 40px;\n}\n\n/* Add Field Section */\n.addFieldSection {\n\tdisplay: flex;\n\tgap: 1rem;\n\talign-items: center;\n\tjustify-content: flex-start; /* Align to start to match field content */\n\tmargin-top: 0; /* Remove top margin since it's in the container */\n}\n\n/* Desktop: horizontal layout for field selector and button */\n@media (min-width: 769px) {\n\t.addFieldSection {\n\t\tflex-direction: row;\n\t\talign-items: baseline;\n\t\tgap: 2rem;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start; /* Align to start to match field content */\n\t}\n}\n\n/* Help Section for Popup */\n.helpSection {\n\tbackground-color: var(--colour-branding-action-superlight);\n\tborder: 1px solid var(--colour-branding-inactive);\n\tborder-radius: 8px;\n\tpadding: 1.5rem;\n\tmargin-bottom: 1.5rem;\n}\n\n.helpTitle {\n\tcolor: var(--text-dark);\n\tfont-weight: 600;\n\tmargin-bottom: 0.75rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tfont-size: 1.25rem;\n}\n\n.helpText {\n\tcolor: var(--colour-branding-action);\n\tline-height: 1.6;\n\tfont-size: 1.25rem;\n}\n\n/* Field Type Cards for Popup */\n.fieldTypeCards {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem; /* Spacing between vertical cards */\n\tpadding: 1rem 0;\n}\n\n/* Responsive layout: maintain vertical layout on all screen sizes */\n@media (min-width: 768px) {\n\t.fieldTypeCards {\n\t\tgap: 1.5rem; /* Slightly larger gap on desktop */\n\t}\n}\n\n.fieldTypeCard {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 1.75rem 1.25rem; /* More vertical padding */\n\tborder: 1px solid var(--border-line-grey);\n\tborder-radius: 8px;\n\tbackground-color: var(--bg-white);\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n\tmin-height: 120px; /* Adjust height for horizontal layout */\n\tgap: 1rem; /* Space between icon and content */\n}\n\n.fieldTypeCard:hover {\n\tborder-color: var(--text-light);\n\tbackground-color: var(--bg-bluegrey);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.fieldTypeCard:focus {\n\toutline: 2px solid var(--text-light);\n\toutline-offset: 2px;\n}\n\n.fieldTypeCard:active {\n\ttransform: scale(0.98);\n\ttransition: transform 0.1s ease;\n}\n\n.fieldTypeCardIcon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 48px;\n\theight: 48px;\n\tmargin-bottom: 0; /* Remove bottom margin for horizontal layout */\n\tfont-size: 20px;\n\tflex-shrink: 0;\n\tborder: 1px solid var(--border-line-grey); /* Subtle border */\n\tborder-radius: 8px;\n\tbackground-color: var(--bg-bluegrey);\n\tpadding: 8px;\n}\n\n\n.fieldTypeCardContent {\n\tflex: 1;\n\twidth: 100%;\n\tmin-width: 0; /* Prevent content from overflowing */\n}\n\n.fieldTypeCardTitle {\n\tmargin: 0 0 0.25rem 0;\n\tfont-weight: 600;\n\tfont-size: 1.4rem; /* Increased for better readability */\n}\n\n.fieldTypeCardDescription {\n\tmargin: 0 0 0.75rem 0;\n\tfont-size: 1.6rem; /* Increased for better readability */\n\tline-height: 1.5; /* Improved line height for better readability */\n}\n\n.fieldTypeCardUseCase {\n\tmargin: 0;\n\tfont-size: 1.4rem;\n\tfont-style: italic;\n\tcolor: var(--text-light);\n\tpadding-top: 0.5rem;\n\tborder-top: 1px solid var(--border-line-grey);\n}\n\n/* Field selector and button container - horizontal layout */\n.addFieldSection> div:first-child {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n\tflex: 1;\n}\n\n/* Container for add field button alignment */\n.addFieldButtonContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n\n/* Empty State */\n.emptyState {\n\tpadding: 2rem;\n\ttext-align: center;\n\tbackground-color: var(--bg-bluegrey, #f4f7f9);\n\tborder-radius: 8px;\n\tborder: 1px dashed var(--border-line-grey, #dbddf1);\n\tmargin-bottom: 1rem;\n}\n\n.emptyStateText {\n\tcolor: var(--text-bluegrey, #6c7a90);\n\tfont-style: italic;\n}\n\n.fieldTypeSelector {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-width: 500px; /* Increased from 300px to accommodate longer text */\n\twidth: 100%;\n}\n\n@media (max-width: 768px) {\n\t.addFieldSection {\n\t\talign-items: stretch;\n\t}\n\t\n\t.fieldTypeSelector {\n\t\tmax-width: none;\n\t}\n}\n\n.grid__four {\n  max-width: 1200px;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(250px, 1fr));\n  margin: 2rem 0;\n\tgap: 2rem;\n\tjustify-items: center;\n}\n\n@media (max-width: 768px) {\n\t.grid__four {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 2rem;\n\t}\n}\n\n/* Navigation styles */\n.navigation {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tgap: 1rem;\n\tmargin-top: 3rem; /* Increase from 2rem */\n\tpadding-top: 2rem;\n\tpadding-bottom: 2rem; /* Add bottom padding */\n\tborder-top: 1px solid #e9ecef;\n}\n\n/* Single button alignment - align to right for overview step save button */\n.navigation> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n/* Two button alignment - one left, one right */\n.navigation> :first-child:not(:only-child) {\n\tmargin-right: auto;\n}\n\n.navigation> :last-child:not(:only-child) {\n\tmargin-left: auto;\n}\n\n/* Special case for overview step - align save button to right */\n.overviewStep .navigation> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n.previousButton {\n\tbackground: #6c757d;\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 1.5rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.previousButton:hover {\n\tbackground: #5a6268;\n}\n\n.saveButton {\n\tbackground: var(--colour-purple, #6e79c5);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 2rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.saveButton:hover:not(:disabled) {\n\tbackground: var(--colour-purple-hover, #5a66b3);\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 2px 4px rgba(110, 121, 197, 0.3);\n}\n\n.saveButton:focus {\n\toutline: 2px solid var(--colour-purple, #6e79c5);\n\toutline-offset: 2px;\n}\n\n.saveButton:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n.nextButton {\n\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 2rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.nextButton:hover:not(:disabled) {\n\ttransform: translateY(-2px);\n\tbox-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n.nextButton:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n\n\n.errorMessage {\n\tcolor: var(--colour-red);\n\tmargin: 0.25rem 0;\n\tpadding: 0.25rem 0;\n\tfont-size: 0.875rem;\n\tline-height: 1.4;\n}\n\n/* Layout option styles */\n.layoutOption {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\ttext-align: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\tbackground-color: transparent;\n}\n\n.layoutOptionImage {\n\twidth: 250px;\n\theight: 250px;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tmargin-bottom: 1rem;\n\tborder: 2px solid var(--border-line-grey, #dbddf1);\n\ttransition: all 0.2s ease;\n}\n\n.layoutOption.selected .layoutOptionImage {\n\tborder-color: var(--border-line-grey, #dbddf1);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.layoutOptionImg {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.layoutOptionContent {\n\tmax-width: 250px;\n}\n\n.layoutOptionTitle {\n\tfont-size: 1.6rem;\n\tfont-weight: 600;\n\tmargin: 0 0 0.5rem 0;\n\tline-height: 1.3;\n\tcolor: #333;\n}\n\n.layoutOptionDescription {\n\tfont-size: 1.2rem;\n\tmargin: 0;\n\tline-height: 1.3;\n\tcolor: #6c757d;\n}\n\n.layoutOption.hasError .layoutOptionImage {\n\tborder-color: var(--colour-red, #dc3545);\n}\n\n/* Field error styles */\n.fieldError {\n\tcolor: #dc3545;\n\tfont-size: 1.6rem;\n\tfont-weight: 500;\n\tmargin-top: 0.5rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.25rem;\n}\n\n.errorIcon {\n\tfont-size: 1rem;\n}\n\n/* Field wrapper styles are now handled in Fields.module.css */\n\n/* Field type indicator styles are now handled in Fields.module.css */\n\n@keyframes errorShake {\n\t0%, 100% { transform: translateX(0); }\n\t25% { transform: translateX(-3px); }\n\t75% { transform: translateX(3px); }\n}\n\n@keyframes errorPulse {\n\t0% { \n\t\tbox-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);\n\t}\n\t50% { \n\t\tbox-shadow: 0 2px 6px rgba(192, 39, 67, 0.2), 0 1px 3px rgba(192, 39, 67, 0.15);\n\t}\n\t100% { \n\t\tbox-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);\n\t}\n}\n\n.successMessage {\n\tbackground: var(--colour-branding-secondary-light);\n\tborder: 1px solid var(--colour-branding-secondary);\n\tborder-radius: 8px;\n\tpadding: 1rem;\n\tmargin-top: 1rem;\n\tcolor: var(--colour-green);\n\tfont-weight: 500;\n}\n\n/* Mode-aware styling */\n.createMode {\n\tcolor: var(--colour-purple, #6e79c5);\n}\n\n.editMode {\n\tcolor: var(--colour-branding-dark, #364196);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n\t.content {\n\t\tpadding: 1.5rem 0 2.5rem 0; /* Maintain proper padding on mobile */\n\t}\n\t\n\t.section {\n\t\tmargin-bottom: 1.5rem;\n\t}\n\t\n\t/* Mobile: vertical layout for field selector and button */\n\t.addFieldSection {\n\t\tflex-direction: column;\n\t\talign-items: stretch; /* Stretch to fill available space */\n\t}\n\t\n\t/* Button should not be full width on mobile */\n\t.addFieldSection Button {\n\t\twidth: auto; /* Let button use its natural width */\n\t\tpadding: 1rem 1.5rem; /* Keep proper padding but not full width */\n\t}\n\t\n\t.addFieldButtonContainer {\n\t\talign-items: stretch;\n\t\tjustify-content: stretch;\n\t\tmin-height: auto;\n\t}\n\t\n\t.navigation {\n\t\tflex-direction: column;\n\t\tgap: 0.75rem;\n\t\tjustify-content: flex-start; /* Align to start on mobile */\n\t\tmargin-top: 2rem; /* Slightly reduce on mobile */\n\t\tpadding-top: 1.5rem;\n\t\tpadding-bottom: 1.5rem; /* Maintain bottom padding */\n\t}\n\t\n\t/* Mobile button alignment - single button aligns right, two buttons stack */\n\t.navigation> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.navigation> :first-child:not(:only-child),\n\t.navigation> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.previousButton,\n\t.nextButton,\n\t.saveButton {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t}\n}\n\n@media (max-width: 480px) {\n\t.content {\n\t\tpadding: 1rem 0 2rem 0; /* Still maintain padding on small screens */\n\t}\n\t\n\t.section {\n\t\tmargin-bottom: 1rem;\n\t}\n\t\n\t.navigation {\n\t\tmargin-top: 1.5rem; /* Further reduce on very small screens */\n\t\tpadding-top: 1rem;\n\t\tpadding-bottom: 1.5rem;\n\t\tjustify-content: flex-start; /* Align to start on small screens */\n\t}\n\t\n\t/* Small screen button alignment */\n\t.navigation> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.navigation> :first-child:not(:only-child),\n\t.navigation> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.errorMessageContainer {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 0.75rem;\n\t}\n\t\n\t.refreshButton {\n\t\talign-self: flex-end;\n\t}\n}\n\n/* Full width content when sidebar is hidden */\n:global(.hub-contentWrapper.fullWidthContent) {\n\tmax-width: 1000px;\n\tmargin: 0 auto;\n\tpadding: 2rem;\n}\n\n.hub-contentWrapper--col {\n  flex-flow: column;\n}\n\n/* Validation error message - displayed at top of form */\n.validationErrorMessage {\n\tbackground-color: var(--colour-branding-secondary-light);\n\tborder: 1px solid var(--colour-branding-secondary);\n\tborder-radius: 6px;\n\tcolor: var(--colour-red);\n\tpadding: 12px 16px;\n\tfont-weight: 500;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t\tmargin: 24px 32px;\n}\n\n.validationErrorMessage::before {\n\tcontent: \"⚠\";\n\tfont-size: 16px;\n\tcolor: var(--colour-red);\n}\n\n/* Loading overlay for forms - deprecated, use SkeletonLoader instead */\n/*\n.loadingOverlay {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tbackground: rgba(255, 255, 255, 0.95);\n\tbackdrop-filter: blur(2px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 10;\n\tborder-radius: 8px;\n\tanimation: fadeIn 0.2s ease-in-out;\n}\n\n@keyframes fadeIn {\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n}\n*/\n\n/* Form header with buttons */\n.formHeader {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Loading container for fields */\n.fieldsLoadingContainer {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Help note styling */\n.helpNote {\n\tfont-size: 13px;\n\tcolor: #6c757d;\n}\n\n/* Loading container for overview */\n.overviewLoadingContainer {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Form layout header */\n.formLayoutHeader {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Section margins */\n.gridIconSection {\n\tmargin-bottom: 3rem;\n}\n\n.layoutSection {\n\tmargin-bottom: 2rem;\n}\n\n/* Grid icon loading state */\n.gridIconLoading {\n\tgrid-column: 1 / -1;\n}\n\n/* Hide upload button in grid icon section */\n.gridIconSection :global(.iconLoader__buttonOverlay button:first-child) {\n\tdisplay: none !important;\n}\n";
-n(css$c,{});
-
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const {
-  Helper: Helper$1,
-  Session: Session$1
+  Helper: Helper$2,
+  Session: Session$2
 } = PlussCore__namespace;
 const {
-  getUrl: getUrl$1
-} = Helper$1;
+  getUrl: getUrl$2
+} = Helper$2;
 const {
-  authedFunction: authedFunction$1
-} = Session$1;
+  authedFunction: authedFunction$2
+} = Session$2;
 const featureDefinitionActions = {
   /**
    * Get the single feature definition by ID
@@ -2559,9 +2137,9 @@ const featureDefinitionActions = {
       id,
       site
     };
-    return authedFunction$1({
+    return authedFunction$2({
       method: "GET",
-      url: getUrl$1("feature-builder", "definition/get/single", query)
+      url: getUrl$2("feature-builder", "definition/get/single", query)
     });
   },
   /**
@@ -2575,9 +2153,9 @@ const featureDefinitionActions = {
    *
    */
   create: async (id, site, featureDefinition) => {
-    return authedFunction$1({
+    return authedFunction$2({
       method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/create"),
+      url: getUrl$2("feature-builder", "definition/update/create"),
       data: {
         id,
         site,
@@ -2610,12 +2188,12 @@ const featureDefinitionActions = {
    */
   edit: async (featureDefinitionData, site) => {
     // Ensure site is included in the request body
-    const dataWithSite = _objectSpread$7({
+    const dataWithSite = _objectSpread$8({
       site: site
     }, featureDefinitionData);
-    return authedFunction$1({
+    return authedFunction$2({
       method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/edit"),
+      url: getUrl$2("feature-builder", "definition/update/edit"),
       data: dataWithSite
     });
   },
@@ -2629,9 +2207,9 @@ const featureDefinitionActions = {
    *
    */
   delete: async (id, site) => {
-    return authedFunction$1({
+    return authedFunction$2({
       method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/delete"),
+      url: getUrl$2("feature-builder", "definition/update/delete"),
       data: {
         id,
         site
@@ -2640,8 +2218,8 @@ const featureDefinitionActions = {
   }
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // IMPORTANT: Using local UPDATE_STRINGS action type to make extension self-contained
 // The main app's StringsReducer will handle this action type the same way
@@ -2650,12 +2228,12 @@ const updateFeatureBuilderString = title => (dispatch, getState) => {
   var _getState$strings;
   const currentStrings = ((_getState$strings = getState().strings) === null || _getState$strings === void 0 ? void 0 : _getState$strings.config) || {};
   const titleCased = toTitleCase(title) || values.textMenuTitle;
-  const updatedStrings = _objectSpread$6(_objectSpread$6({}, currentStrings), {}, {
-    sideNav: _objectSpread$6(_objectSpread$6({}, currentStrings.sideNav), {}, {
+  const updatedStrings = _objectSpread$7(_objectSpread$7({}, currentStrings), {}, {
+    sideNav: _objectSpread$7(_objectSpread$7({}, currentStrings.sideNav), {}, {
       [values.featureKey]: titleCased,
       [values.menuKey]: "Manage ".concat(titleCased)
     }),
-    permission: _objectSpread$6(_objectSpread$6({}, currentStrings.permission), {}, {
+    permission: _objectSpread$7(_objectSpread$7({}, currentStrings.permission), {}, {
       [values.permissionFeatureBuilderDefinition]: "Manage custom feature ".concat(titleCased),
       [values.permissionFeatureBuilderContent]: "Manage ".concat(titleCased, " content")
     })
@@ -2668,8 +2246,8 @@ const updateFeatureBuilderString = title => (dispatch, getState) => {
 const updateFeatureBuilderIcon = icon => (dispatch, getState) => {
   var _getState$strings2;
   const currentStrings = ((_getState$strings2 = getState().strings) === null || _getState$strings2 === void 0 ? void 0 : _getState$strings2.config) || {};
-  const updatedStrings = _objectSpread$6(_objectSpread$6({}, currentStrings), {}, {
-    sideNav: _objectSpread$6(_objectSpread$6({}, currentStrings.sideNav), {}, {
+  const updatedStrings = _objectSpread$7(_objectSpread$7({}, currentStrings), {}, {
+    sideNav: _objectSpread$7(_objectSpread$7({}, currentStrings.sideNav), {}, {
       [values.featureKey + "-icon"]: icon,
       [values.menuKey + "-icon"]: icon
     })
@@ -2825,167 +2403,586 @@ const addField = function () {
   // Generate a unique ID for the new field
   const fieldId = "custom-field-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
   return {
-    type: actionsTypes.ADD_FIELD,
+    type: actionsTypes.ADD_FIELD,
+    payload: {
+      id: fieldId,
+      type: fieldType
+    }
+  };
+};
+const deleteField = id => {
+  return {
+    type: actionsTypes.DELETE_FIELD,
+    payload: id
+  };
+};
+const updateFieldById = (id, updatedField) => {
+  return {
+    type: actionsTypes.UPDATE_FIELD,
+    payload: {
+      id,
+      updatedField
+    }
+  };
+};
+
+/**
+ * Action creator to set a description field as the summary field
+ * Ensures only one description field can be marked as summary by
+ * automatically unsetting all other description fields when a new one is selected
+ *
+ * @param {string} fieldId - ID of the description field to set as summary
+ * @returns {Object} Redux action object for summary field selection
+ *
+ * @example
+ * dispatch(setSummaryField('field-description-123'));
+ */
+const setSummaryField = fieldId => {
+  return {
+    type: actionsTypes.SET_SUMMARY_FIELD,
+    payload: fieldId
+  };
+};
+const setLayoutType = layoutType => {
+  return {
+    type: actionsTypes.SET_LAYOUT_TYPE,
+    payload: layoutType
+  };
+};
+const submitFormRequest = () => {
+  return {
+    type: actionsTypes.SUBMIT_FORM_REQUEST
+  };
+};
+const submitFormSuccess = () => {
+  return {
+    type: actionsTypes.SUBMIT_FORM_SUCCESS
+  };
+};
+const submitFormFailure = error => {
+  return {
+    type: actionsTypes.SUBMIT_FORM_FAILURE,
+    payload: error
+  };
+};
+const clearFormSubmissionState = () => {
+  return {
+    type: actionsTypes.CLEAR_FORM_SUBMISSION_STATE
+  };
+};
+
+/**
+ * Submits the complete feature form to the server
+ * Handles form validation, API submission, and error handling
+ *
+ * @returns {Function} Async thunk function for Redux
+ * @throws {Error} When form validation fails or API submission encounters error
+ */
+function submitForm() {
+  return async (dispatch, getState) => {
+    const state = getState()[values.reducerKey];
+    const form = state && state.form;
+    if (!form) {
+      dispatch(submitFormFailure(new Error("Form data is missing. Please refresh the page and try again.")));
+      return;
+    }
+    dispatch(submitFormRequest());
+    try {
+      // Get site from auth store
+      const site = getState().auth.site;
+      if (!site) {
+        throw new Error("Authentication error: Site context not found. Please refresh and login again.");
+      }
+
+      // Use mode from fetch instead of checking definition ID
+      const definitionState = state && state.definition;
+      const mode = definitionState && definitionState.mode; // Use stored mode from fetch
+      const definitionId = definitionState && definitionState.id;
+      if (mode === "edit") {
+        // Always update when in edit mode
+        const updatedDefinition = {
+          id: definitionId,
+          site: site,
+          // Include site from auth store
+          featureDefinition: {
+            // Wrap in expected structure for backend
+            title: form.title,
+            icon: form.icon,
+            displayName: form.displayName,
+            layout: form.layout,
+            fields: form.fields
+          }
+        };
+        await featureDefinitionActions.edit(updatedDefinition, site);
+      } else {
+        // Always create when in create mode (or mode is undefined/null)
+        if (!values.featureId || !site) {
+          throw new Error("Authentication error: Missing required context (featureId or site).");
+        }
+        await featureDefinitionActions.create(values.featureId, site,
+        // Use actual site from auth store
+        {
+          title: form.title,
+          icon: form.icon,
+          displayName: form.displayName,
+          layout: form.layout,
+          fields: form.fields
+        });
+      }
+      dispatch(submitFormSuccess());
+    } catch (err) {
+      // Handle different types of errors
+      let errorToDisplay = err;
+      if (err.response) {
+        // API error (400, 401, 404, 500, etc.)
+        const {
+          status,
+          data
+        } = err.response;
+        if (status === 400 && data && data.error) {
+          errorToDisplay = new Error("Validation error: ".concat(data.error));
+        } else if (status === 401) {
+          errorToDisplay = new Error("You are not authorized to perform this action");
+        } else if (status === 404) {
+          errorToDisplay = new Error("Feature definition not found");
+        } else if (status >= 500) {
+          errorToDisplay = new Error("Server error. Please try again later.");
+        } else {
+          errorToDisplay = new Error(data && data.error || "Request failed with status ".concat(status));
+        }
+      } else if (err.request) {
+        // Network error (no response received)
+        errorToDisplay = new Error("Network error. Please check your connection and try again.");
+      } else if (err.message) {
+        // Other JavaScript errors
+        errorToDisplay = err;
+      } else {
+        // Unknown error
+        errorToDisplay = new Error("An unexpected error occurred while saving");
+      }
+      dispatch(submitFormFailure(errorToDisplay));
+    }
+  };
+}
+
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const SET_NAVIGATION_STATE$1 = "SET_NAVIGATION_STATE";
+const UPDATE_STEP_VALIDATION$1 = "UPDATE_STEP_VALIDATION";
+const MARK_STEP_COMPLETE$1 = "MARK_STEP_COMPLETE";
+const setCurrentStep = function (step) {
+  let previousStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return {
+    type: SET_NAVIGATION_STATE$1,
     payload: {
-      id: fieldId,
-      type: fieldType
+      currentStep: step,
+      previousStep,
+      canGoBack: step !== "welcome",
+      canGoForward: true
     }
   };
 };
-const deleteField = id => {
+const goToStep = step => (dispatch, getState) => {
+  const state = getState()[values.reducerKey];
+  const currentStep = state && state.wizard && state.wizard.navigation && state.wizard.navigation.currentStep;
+
+  // Clear form submission state when changing steps
+  dispatch(clearFormSubmissionState());
+  dispatch(setCurrentStep(step, currentStep));
+};
+const updateStepValidation = function (step, isValid) {
+  let errors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return {
-    type: actionsTypes.DELETE_FIELD,
-    payload: id
+    type: UPDATE_STEP_VALIDATION$1,
+    payload: {
+      step,
+      isValid,
+      errors
+    }
   };
 };
-const updateFieldById = (id, updatedField) => {
+const validateAndUpdateStep = step => (dispatch, getState) => {
+  // Use existing selectors to get form data
+  const state = getState();
+  const title = selectFormTitle(state);
+  const icon = selectFormIcon(state);
+  const displayName = selectFormDisplayName(state);
+  const layout = selectFormLayout(state);
+  const fields = selectFormFields(state);
+  const form = {
+    title,
+    icon,
+    displayName,
+    layout,
+    fields
+  };
+  const {
+    isValid,
+    errors
+  } = getFormValidation(form, step);
+  dispatch(updateStepValidation(step, isValid, errors));
+
+  // If valid, mark as complete
+  if (isValid) {
+    dispatch({
+      type: MARK_STEP_COMPLETE$1,
+      payload: step
+    });
+  }
   return {
-    type: actionsTypes.UPDATE_FIELD,
-    payload: {
-      id,
-      updatedField
+    isValid,
+    errors
+  };
+};
+const getFormValidation = (form, step) => {
+  // Return validation results for undefined form (prevent crashes)
+  if (!form) {
+    switch (step) {
+      case "overview":
+        return {
+          isValid: false,
+          errors: {
+            title: "Title is required",
+            displayName: "Display name is required",
+            icon: "Icon is required"
+          }
+        };
+      case "fields":
+        return {
+          isValid: false,
+          errors: {
+            missingTitle: "Title field is required",
+            missingImage: "Feature image field is required",
+            fieldLabels: "Some fields are missing labels"
+          }
+        };
+      case "layout":
+        return {
+          isValid: false,
+          errors: {
+            layoutType: "Layout type is required"
+          }
+        };
+      default:
+        return {
+          isValid: false,
+          errors: {}
+        };
     }
+  }
+  switch (step) {
+    case "overview":
+      {
+        const hasTitle = form.title && form.title.trim().length > 0;
+        const hasDisplayName = form.displayName && form.displayName.trim().length > 0;
+        const hasIcon = form.icon && form.icon.length > 0;
+        return {
+          isValid: hasTitle && hasDisplayName && hasIcon,
+          errors: {
+            title: !hasTitle ? "Title is required" : null,
+            displayName: !hasDisplayName ? "Display name is required" : null,
+            icon: !hasIcon ? "Icon is required" : null
+          }
+        };
+      }
+    case "fields":
+      {
+        const hasTitleField = form.fields && form.fields.some(field => field.id === "mandatory-title");
+        const hasImageField = form.fields && form.fields.some(field => field.id === "mandatory-feature-image");
+
+        // Check each field for missing labels and create field-specific errors
+        const fieldErrors = {};
+        let allFieldsHaveLabels = true;
+        if (form.fields) {
+          form.fields.forEach(field => {
+            if ((field.type === "text" || field.type === "description" || field.type === "title" || field.type === "image" || field.type === "gallery" || field.type === "feature-image" || field.type === "file" || field.type === "cta") && field.values) {
+              if (!field.values.label || field.values.label.trim().length === 0) {
+                fieldErrors[field.id] = "Field label is required";
+                allFieldsHaveLabels = false;
+              }
+            }
+          });
+        }
+        return {
+          isValid: hasTitleField && hasImageField && allFieldsHaveLabels,
+          errors: _objectSpread$6({
+            missingTitle: !hasTitleField ? "Title field is required" : null,
+            missingImage: !hasImageField ? "Feature image field is required" : null
+          }, fieldErrors)
+        };
+      }
+    case "layout":
+      {
+        const hasLayoutType = form.layout && form.layout.type && form.layout.type.length > 0;
+        return {
+          isValid: hasLayoutType,
+          errors: {
+            layoutType: !hasLayoutType ? "Layout type is required" : null
+          }
+        };
+      }
+    default:
+      return {
+        isValid: true,
+        errors: {}
+      };
+  }
+};
+const setCurrentStepAndSave = function (step) {
+  let previousStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return dispatch => {
+    dispatch(setCurrentStep(step, previousStep));
   };
 };
 
+var css$d = ".fullWidthContent {\n\tmax-width: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding: 2rem 2rem 3rem 2rem; /* Add extra bottom padding */\n}\n\n/* Full-width container that allows scrollbar at edge */\n.fullWidthContainer {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0; /* Allow content to determine height */\n\twidth: 100%; /* Take full width to ensure scrollbar is at edge */\n}\n\n/* Content container to keep content centered */\n.contentContainer {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0;\n\tmax-width: 960px;\n\tmargin: 0 auto;\n\tpadding: 64px 32px;\n\twidth: 100%;\n\tbox-sizing: border-box;\n}\n\n/* Legacy container class for backward compatibility */\n.container{\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0; /* Allow content to determine height */\n  max-width: 960px;\n  margin: 0 auto;\n  padding: 64px 32px;\n}\n\n/* Responsive adjustments for content container */\n@media (max-width: 768px) {\n\t.contentContainer {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */\n\t}\n\t.container {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Legacy container support */\n\t}\n}\n\n@media (max-width: 480px) {\n\t.contentContainer {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */\n\t}\n\t.container {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Legacy container support */\n\t}\n}\n\n/* Enhanced sidebar navigation for progress indication */\n:global(.hub-sideBar) {\n\t/* Make sidebar more prominent during creation mode */\n}\n\n:global(.sideNav-item.isCurrent) {\n\tbackground: var(--colour-purple, #6e79c5) !important;\n\tcolor: var(--colour-white, #ffffff) !important;\n\tfont-weight: 600 !important;\n\tborder-left: 4px solid var(--colour-branding-dark, #364196) !important;\n}\n\n:global(.sideNav-item.isCurrent) i {\n\tcolor: var(--colour-white, #ffffff) !important;\n}\n\n:global(.sideNav-item.isCompleted) {\n\tcolor: var(--colour-branding-dark, #364196) !important;\n\tposition: relative;\n}\n\n:global(.sideNav-item.isCompleted::after) {\n\tcontent: \"✓\";\n\tposition: absolute;\n\tright: 1rem;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\tcolor: var(--colour-branding-dark, #364196);\n\tfont-weight: bold;\n}\n\n:global(.sideNav-item.isDisabled) {\n\topacity: 0.4;\n\tcursor: not-allowed;\n}\n\n/* Enhanced progress section */\n:global(.hub-sideBar-section) {\n\tborder-bottom: 2px solid var(--colour-branding-main-fade, rgba(74, 87, 183, 0.15));\n\tpadding-bottom: 1rem;\n\tmargin-bottom: 1rem;\n}\n\n:global(.hub-sideBar-section:last-child) {\n\tborder-bottom: none;\n}\n\n/* Delete button styling - bold red for development */\n.deleteButton {\n\tcolor: #dc3545 !important;\n\tfont-weight: bold !important;\n}\n\n:global(.sideNav-item.deleteButton) {\n\tcolor: #dc3545 !important;\n\tfont-weight: bold !important;\n}\n\n:global(.sideNav-item.deleteButton:hover) {\n\tbackground-color: rgba(220, 53, 69, 0.1) !important;\n}\n\n:global(.sideNav-item.deleteButton i) {\n\tcolor: #dc3545 !important;\n}\n\n/* Development delete button */\n.devDeleteButton {\n\tposition: absolute;\n\tbottom: 20px;\n\tleft: 20px;\n\tbackground-color: #ff0000;\n\tcolor: #ffffff;\n\tborder: none;\n\tpadding: 8px 12px;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\tfont-size: 12px;\n\tfont-weight: bold;\n\tz-index: 1000;\n\tbox-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n\n.devDeleteButton:hover {\n\tbackground-color: #cc0000;\n}\n";
+n(css$d,{});
+
+const {
+  Helper: Helper$1,
+  Session: Session$1
+} = PlussCore__namespace;
+const {
+  getUrl: getUrl$1
+} = Helper$1;
+const {
+  authedFunction: authedFunction$1
+} = Session$1;
+
 /**
- * Action creator to set a description field as the summary field
- * Ensures only one description field can be marked as summary by
- * automatically unsetting all other description fields when a new one is selected
+ * Sidebar Layout component for feature builder wizard
+ * Provides navigation sidebar with step progression, completion tracking
+ * Includes delete functionality for feature definitions
+ * Manages step accessibility based on wizard mode and validation state
  *
- * @param {string} fieldId - ID of the description field to set as summary
- * @returns {Object} Redux action object for summary field selection
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render in main content area
+ * @param {Object} props.history - React Router history object for navigation
+ * @returns {React.ReactElement} Layout component with sidebar navigation
  *
  * @example
- * dispatch(setSummaryField('field-description-123'));
+ * <SidebarLayout history={historyObject}>
+ *   <YourMainContent />
+ * </SidebarLayout>
  */
-const setSummaryField = fieldId => {
-  return {
-    type: actionsTypes.SET_SUMMARY_FIELD,
-    payload: fieldId
+const SideBarInner = props => {
+  const {
+    children,
+    history
+  } = props;
+  const dispatch = reactRedux.useDispatch();
+
+  // Get wizard state
+  const mode = reactRedux.useSelector(selectWizardMode);
+  const isEditMode = reactRedux.useSelector(selectIsEditMode);
+  const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
+  const currentStep = reactRedux.useSelector(selectCurrentStep);
+  reactRedux.useSelector(selectStepProgress);
+  const definition = reactRedux.useSelector(selectDefinition);
+  const definitionId = reactRedux.useSelector(selectDefinitionId);
+  const auth = reactRedux.useSelector(state => state.auth);
+
+  // Delete functionality state
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const goTo = url => history.push(url);
+  const isSelected = url => {
+    return history.location.pathname === url;
+  };
+
+  // Define step configuration with dynamic URL based on mode
+  const getStepUrl = stepKey => {
+    // Always use /definition/ in the URL since that's how routes are registered
+    return "/feature-builder/definition/".concat(stepKey);
+  };
+  const steps = [{
+    key: "overview",
+    text: "Feature Overview",
+    icon: "info-circle",
+    url: getStepUrl("overview")
+  }, {
+    key: "fields",
+    text: "Configure Fields",
+    icon: "edit",
+    url: getStepUrl("fields")
+  }, {
+    key: "layout",
+    text: "Choose Layout",
+    icon: "columns",
+    url: getStepUrl("layout")
+  }];
+
+  // Build sidebar items based on mode
+  const buildSidebarItems = () => {
+    return steps.map((step, index) => {
+      const isCompleted = selectIsStepComplete(step.key);
+      const isAccessible = selectIsStepAccessible(step.key);
+
+      // Add step number to text for better clarity
+      const stepText = "".concat(index + 1, ". ").concat(step.text);
+      const itemProps = {
+        type: "navItem",
+        text: stepText,
+        icon: step.icon,
+        selected: isSelected(step.url),
+        onclick: isAccessible ? () => {
+          goTo(step.url);
+          dispatch(goToStep(step.key));
+        } : null,
+        isFontAwesome: true,
+        // Enhanced completion indicator
+        completed: isCompleted,
+        // Allow navigation to completed steps even in create mode
+        disabled: mode === "create" && !isAccessible
+      };
+      return itemProps;
+    });
   };
-};
-const setLayoutType = layoutType => {
-  return {
-    type: actionsTypes.SET_LAYOUT_TYPE,
-    payload: layoutType
+
+  // Determine sidebar title - always use "Build Your Feature" now
+  const getSidebarTitle = () => {
+    return "Build Your Feature";
   };
-};
-const submitFormRequest = () => {
-  return {
-    type: actionsTypes.SUBMIT_FORM_REQUEST
+
+  // Simple help text
+  const getHelpText = () => {
+    return "Get help with feature builder";
   };
-};
-const submitFormSuccess = () => {
-  return {
-    type: actionsTypes.SUBMIT_FORM_SUCCESS
+
+  // Build sidebar sections - simplified without progress section
+  const sidebarSections = [{
+    title: getSidebarTitle(),
+    items: buildSidebarItems()
+  }];
+
+  // Delete functionality handlers
+  const handleDeleteClick = () => {
+    setShowDeleteConfirm(true);
   };
-};
-const submitFormFailure = error => {
-  return {
-    type: actionsTypes.SUBMIT_FORM_FAILURE,
-    payload: error
+  const handleConfirmDelete = async () => {
+    if (!definition) return;
+    setIsDeleting(true);
+    try {
+      await authedFunction$1({
+        method: "POST",
+        url: getUrl$1("feature-builder", "definition/update/delete"),
+        data: {
+          id: definitionId,
+          site: auth.site
+        }
+      });
+
+      // Redirect to welcome screen after deletion
+      history.push("/feature-builder/definition/overview");
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+    }
   };
-};
-const clearFormSubmissionState = () => {
-  return {
-    type: actionsTypes.CLEAR_FORM_SUBMISSION_STATE
+  const handleCancelDelete = () => {
+    setShowDeleteConfirm(false);
   };
-};
 
-/**
- * Submits the complete feature form to the server
- * Handles form validation, API submission, and error handling
- *
- * @returns {Function} Async thunk function for Redux
- * @throws {Error} When form validation fails or API submission encounters error
- */
-function submitForm() {
-  return async (dispatch, getState) => {
-    const state = getState()[values.reducerKey];
-    const form = state && state.form;
-    if (!form) {
-      dispatch(submitFormFailure(new Error("Form data is missing. Please refresh the page and try again.")));
-      return;
-    }
-    dispatch(submitFormRequest());
-    try {
-      // Get site from auth store
-      const site = getState().auth.site;
-      if (!site) {
-        throw new Error("Authentication error: Site context not found. Please refresh and login again.");
-      }
+  // Add effect to manually attach click handlers since HubSidebar might not use onclick properly
+  React.useEffect(() => {
+    const attachClickHandlers = () => {
+      const stepsWithUrls = [{
+        key: "overview",
+        url: getStepUrl("overview")
+      }, {
+        key: "fields",
+        url: getStepUrl("fields")
+      }, {
+        key: "layout",
+        url: getStepUrl("layout")
+      }];
+      stepsWithUrls.forEach(step => {
+        const navItem = Array.from(document.querySelectorAll(".sideNav-item")).find(item => item.textContent && item.textContent.includes(step.key === "overview" ? "Feature Overview" : step.key === "fields" ? "Configure Fields" : "Choose Layout"));
+        if (navItem) {
+          // Remove any existing click listeners
+          navItem.onclick = null;
 
-      // Use mode from fetch instead of checking definition ID
-      const definitionState = state && state.definition;
-      const mode = definitionState && definitionState.mode; // Use stored mode from fetch
-      const definitionId = definitionState && definitionState.id;
-      if (mode === "edit") {
-        // Always update when in edit mode
-        const updatedDefinition = {
-          id: definitionId,
-          site: site,
-          // Include site from auth store
-          featureDefinition: {
-            // Wrap in expected structure for backend
-            title: form.title,
-            icon: form.icon,
-            displayName: form.displayName,
-            layout: form.layout,
-            fields: form.fields
+          // Check if this step is accessible
+          const isAccessible = selectIsStepAccessible(step.key)({
+            [values.reducerKey]: {
+              wizard: {
+                mode: mode,
+                navigation: {
+                  currentStep: currentStep
+                }
+              }
+            }
+          });
+
+          // Add our click handler only if accessible
+          if (isAccessible) {
+            navItem.onclick = event => {
+              event.preventDefault();
+              event.stopPropagation();
+              history.push(step.url);
+              dispatch(goToStep(step.key));
+            };
           }
-        };
-        await featureDefinitionActions.edit(updatedDefinition, site);
-      } else {
-        // Always create when in create mode (or mode is undefined/null)
-        if (!values.featureId || !site) {
-          throw new Error("Authentication error: Missing required context (featureId or site).");
-        }
-        await featureDefinitionActions.create(values.featureId, site,
-        // Use actual site from auth store
-        {
-          title: form.title,
-          icon: form.icon,
-          displayName: form.displayName,
-          layout: form.layout,
-          fields: form.fields
-        });
-      }
-      dispatch(submitFormSuccess());
-    } catch (err) {
-      // Handle different types of errors
-      let errorToDisplay = err;
-      if (err.response) {
-        // API error (400, 401, 404, 500, etc.)
-        const {
-          status,
-          data
-        } = err.response;
-        if (status === 400 && data && data.error) {
-          errorToDisplay = new Error("Validation error: ".concat(data.error));
-        } else if (status === 401) {
-          errorToDisplay = new Error("You are not authorized to perform this action");
-        } else if (status === 404) {
-          errorToDisplay = new Error("Feature definition not found");
-        } else if (status >= 500) {
-          errorToDisplay = new Error("Server error. Please try again later.");
-        } else {
-          errorToDisplay = new Error(data && data.error || "Request failed with status ".concat(status));
+
+          // Make sure it's styled appropriately
+          navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
+          navItem.style.pointerEvents = "auto";
+          navItem.style.opacity = isAccessible ? "1" : "0.5";
         }
-      } else if (err.request) {
-        // Network error (no response received)
-        errorToDisplay = new Error("Network error. Please check your connection and try again.");
-      } else if (err.message) {
-        // Other JavaScript errors
-        errorToDisplay = err;
-      } else {
-        // Unknown error
-        errorToDisplay = new Error("An unexpected error occurred while saving");
-      }
-      dispatch(submitFormFailure(errorToDisplay));
+      });
+    };
+
+    // Initial attachment
+    attachClickHandlers();
+
+    // Re-attach after a short delay to ensure HubSidebar has rendered
+    const timeoutId = setTimeout(attachClickHandlers, 100);
+
+    // Also try to re-attach when DOM changes (observe for mutations)
+    const observer = new MutationObserver(() => {
+      setTimeout(attachClickHandlers, 50);
+    });
+
+    // Start observing the document body for changes
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      clearTimeout(timeoutId);
+      observer.disconnect();
+    };
+  }, [history, dispatch, isEditMode, isCreateMode, currentStep]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "hub-wrapperContainer"
+  }, /*#__PURE__*/React__default["default"].createElement(HubSidebar, {
+    sections: sidebarSections,
+    helpGuide: {
+      text: getHelpText(),
+      url: "https://www.plusscommunities.com/user-guide"
     }
-  };
-}
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: handleDeleteClick,
+    className: css$d.devDeleteButton
+  }, "DELETE FEATURE DEF"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "hub-contentWrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: css$d.fullWidthContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: css$d.contentContainer
+  }, children))), /*#__PURE__*/React__default["default"].createElement(DeleteConfirmationPopup, {
+    isOpen: showDeleteConfirm,
+    listing: definition,
+    onConfirm: handleConfirmDelete,
+    onCancel: handleCancelDelete,
+    isDeleting: isDeleting,
+    deleteType: "featureDefinition"
+  }));
+};
+const SidebarLayout = reactRouter.withRouter(SideBarInner);
+
+var css$c = ".content {\n\tflex: 1 1 auto;\n\tdisplay: flex;\n\tflex-flow: column nowrap;\n\tpadding: 2rem 0 3rem 0; /* Add proper top/bottom padding */\n\tmin-height: 100%; /* Ensure full height for proper spacing */\n}\n\n/* New page wrapper for centered container approach */\n.pageWrapper {\n\tpadding: 2rem 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n}\n\n@media (min-width: 768px) {\n\t.pageWrapper {\n\t\tpadding: 3rem 0;\n\t}\n}\n\n/* Form container styling when using CenteredContainer */\n.formContainer {\n\tbackground-color: var(--bg-white);\n}\n\n/* Section styling */\n.section {\n\tmargin-bottom: 2rem;\n\t\tpadding:  0 0 2em;\n}\n\n.section--no-border {\n\t\tborder-bottom: none;\n}\n\n.subtitle {\n\tcolor: var(--text-bluegrey, #6c7a90);\n}\n\n.sectionHeader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n}\n\n/* Add Field Button styling */\n.addFieldButton {\n\tbackground: var(--colour-branding-action, #5c90df);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 1.5rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tcursor: pointer;\n\tmargin-bottom: 2rem;\n\ttransition: all 0.2s ease;\n}\n\n.addFieldButton:hover {\n\tbackground: var(--colour-branding-action-hover, #364196);\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 2px 4px rgba(92, 144, 223, 0.3);\n}\n\n.addFieldButton:focus {\n\toutline: 2px solid var(--colour-branding-action, #5c90df);\n\toutline-offset: 2px;\n}\n\n.addFieldButton:active {\n\ttransform: translateY(0);\n}\n\n/* Refresh button styling */\n.refreshButton {\n\tmargin-left: 10px;\n\tpadding: 2px 8px;\n\tfont-size: 12px;\n\tbackground: var(--colour-dusk, #536280);\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\ttransition: background-color 0.2s ease;\n}\n\n.refreshButton:hover {\n\tbackground: var(--colour-dusk-hover, #485968);\n}\n\n/* Error message container */\n.errorMessageContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n}\n\n/* Add Field Container - matches field structure */\n.addFieldContainer {\n\tdisplay: flex;\n\tmargin-top: 32px;\n}\n\n.fieldNumberContainer {\n\tdisplay: flex;\n\twidth: 40px;\n}\n\n/* Add Field Section */\n.addFieldSection {\n\tdisplay: flex;\n\tgap: 1rem;\n\talign-items: center;\n\tjustify-content: flex-start; /* Align to start to match field content */\n\tmargin-top: 0; /* Remove top margin since it's in the container */\n}\n\n/* Desktop: horizontal layout for field selector and button */\n@media (min-width: 769px) {\n\t.addFieldSection {\n\t\tflex-direction: row;\n\t\talign-items: baseline;\n\t\tgap: 2rem;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start; /* Align to start to match field content */\n\t}\n}\n\n/* Help Section for Popup */\n.helpSection {\n\tbackground-color: var(--colour-branding-action-superlight);\n\tborder: 1px solid var(--colour-branding-inactive);\n\tborder-radius: 8px;\n\tpadding: 1.5rem;\n\tmargin-bottom: 1.5rem;\n}\n\n.helpTitle {\n\tcolor: var(--text-dark);\n\tfont-weight: 600;\n\tmargin-bottom: 0.75rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tfont-size: 1.25rem;\n}\n\n.helpText {\n\tcolor: var(--colour-branding-action);\n\tline-height: 1.6;\n\tfont-size: 1.25rem;\n}\n\n/* Field Type Cards for Popup */\n.fieldTypeCards {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem; /* Spacing between vertical cards */\n\tpadding: 1rem 0;\n}\n\n/* Responsive layout: maintain vertical layout on all screen sizes */\n@media (min-width: 768px) {\n\t.fieldTypeCards {\n\t\tgap: 1.5rem; /* Slightly larger gap on desktop */\n\t}\n}\n\n.fieldTypeCard {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 1.75rem 1.25rem; /* More vertical padding */\n\tborder: 1px solid var(--border-line-grey);\n\tborder-radius: 8px;\n\tbackground-color: var(--bg-white);\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n\tmin-height: 120px; /* Adjust height for horizontal layout */\n\tgap: 1rem; /* Space between icon and content */\n}\n\n.fieldTypeCard:hover {\n\tborder-color: var(--text-light);\n\tbackground-color: var(--bg-bluegrey);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.fieldTypeCard:focus {\n\toutline: 2px solid var(--text-light);\n\toutline-offset: 2px;\n}\n\n.fieldTypeCard:active {\n\ttransform: scale(0.98);\n\ttransition: transform 0.1s ease;\n}\n\n.fieldTypeCardIcon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 48px;\n\theight: 48px;\n\tmargin-bottom: 0; /* Remove bottom margin for horizontal layout */\n\tfont-size: 20px;\n\tflex-shrink: 0;\n\tborder: 1px solid var(--border-line-grey); /* Subtle border */\n\tborder-radius: 8px;\n\tbackground-color: var(--bg-bluegrey);\n\tpadding: 8px;\n}\n\n\n.fieldTypeCardContent {\n\tflex: 1;\n\twidth: 100%;\n\tmin-width: 0; /* Prevent content from overflowing */\n}\n\n.fieldTypeCardTitle {\n\tmargin: 0 0 0.25rem 0;\n\tfont-weight: 600;\n\tfont-size: 1.4rem; /* Increased for better readability */\n}\n\n.fieldTypeCardDescription {\n\tmargin: 0 0 0.75rem 0;\n\tfont-size: 1.6rem; /* Increased for better readability */\n\tline-height: 1.5; /* Improved line height for better readability */\n}\n\n.fieldTypeCardUseCase {\n\tmargin: 0;\n\tfont-size: 1.4rem;\n\tfont-style: italic;\n\tcolor: var(--text-light);\n\tpadding-top: 0.5rem;\n\tborder-top: 1px solid var(--border-line-grey);\n}\n\n/* Field selector and button container - horizontal layout */\n.addFieldSection> div:first-child {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n\tflex: 1;\n}\n\n/* Container for add field button alignment */\n.addFieldButtonContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n\n/* Empty State */\n.emptyState {\n\tpadding: 2rem;\n\ttext-align: center;\n\tbackground-color: var(--bg-bluegrey, #f4f7f9);\n\tborder-radius: 8px;\n\tborder: 1px dashed var(--border-line-grey, #dbddf1);\n\tmargin-bottom: 1rem;\n}\n\n.emptyStateText {\n\tcolor: var(--text-bluegrey, #6c7a90);\n\tfont-style: italic;\n}\n\n.fieldTypeSelector {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-width: 500px; /* Increased from 300px to accommodate longer text */\n\twidth: 100%;\n}\n\n@media (max-width: 768px) {\n\t.addFieldSection {\n\t\talign-items: stretch;\n\t}\n\t\n\t.fieldTypeSelector {\n\t\tmax-width: none;\n\t}\n}\n\n.grid__four {\n  max-width: 1200px;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(250px, 1fr));\n  margin: 2rem 0;\n\tgap: 2rem;\n\tjustify-items: center;\n}\n\n@media (max-width: 768px) {\n\t.grid__four {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 2rem;\n\t}\n}\n\n/* Navigation styles */\n.navigation {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tgap: 1rem;\n\tmargin-top: 3rem; /* Increase from 2rem */\n\tpadding-top: 2rem;\n\tpadding-bottom: 2rem; /* Add bottom padding */\n\tborder-top: 1px solid #e9ecef;\n}\n\n/* Single button alignment - align to right for overview step save button */\n.navigation> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n/* Two button alignment - one left, one right */\n.navigation> :first-child:not(:only-child) {\n\tmargin-right: auto;\n}\n\n.navigation> :last-child:not(:only-child) {\n\tmargin-left: auto;\n}\n\n/* Special case for overview step - align save button to right */\n.overviewStep .navigation> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n.previousButton {\n\tbackground: #6c757d;\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 1.5rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.previousButton:hover {\n\tbackground: #5a6268;\n}\n\n.saveButton {\n\tbackground: var(--colour-purple, #6e79c5);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 2rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.saveButton:hover:not(:disabled) {\n\tbackground: var(--colour-purple-hover, #5a66b3);\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 2px 4px rgba(110, 121, 197, 0.3);\n}\n\n.saveButton:focus {\n\toutline: 2px solid var(--colour-purple, #6e79c5);\n\toutline-offset: 2px;\n}\n\n.saveButton:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n.nextButton {\n\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n\tcolor: white;\n\tborder: none;\n\tpadding: 0.75rem 2rem;\n\tborder-radius: 6px;\n\tfont-size: 1rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n}\n\n.nextButton:hover:not(:disabled) {\n\ttransform: translateY(-2px);\n\tbox-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n.nextButton:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n\n\n.errorMessage {\n\tcolor: var(--colour-red);\n\tmargin: 0.25rem 0;\n\tpadding: 0.25rem 0;\n\tfont-size: 0.875rem;\n\tline-height: 1.4;\n}\n\n/* Layout option styles */\n.layoutOption {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\ttext-align: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\tbackground-color: transparent;\n}\n\n.layoutOptionImage {\n\twidth: 250px;\n\theight: 250px;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tmargin-bottom: 1rem;\n\tborder: 2px solid var(--border-line-grey, #dbddf1);\n\ttransition: all 0.2s ease;\n}\n\n.layoutOption.selected .layoutOptionImage {\n\tborder-color: var(--border-line-grey, #dbddf1);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.layoutOptionImg {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.layoutOptionContent {\n\tmax-width: 250px;\n}\n\n.layoutOptionTitle {\n\tfont-size: 1.6rem;\n\tfont-weight: 600;\n\tmargin: 0 0 0.5rem 0;\n\tline-height: 1.3;\n\tcolor: #333;\n}\n\n.layoutOptionDescription {\n\tfont-size: 1.2rem;\n\tmargin: 0;\n\tline-height: 1.3;\n\tcolor: #6c757d;\n}\n\n.layoutOption.hasError .layoutOptionImage {\n\tborder-color: var(--colour-red, #dc3545);\n}\n\n/* Field error styles */\n.fieldError {\n\tcolor: #dc3545;\n\tfont-size: 1.6rem;\n\tfont-weight: 500;\n\tmargin-top: 0.5rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.25rem;\n}\n\n.errorIcon {\n\tfont-size: 1rem;\n}\n\n/* Field wrapper styles are now handled in Fields.module.css */\n\n/* Field type indicator styles are now handled in Fields.module.css */\n\n@keyframes errorShake {\n\t0%, 100% { transform: translateX(0); }\n\t25% { transform: translateX(-3px); }\n\t75% { transform: translateX(3px); }\n}\n\n@keyframes errorPulse {\n\t0% { \n\t\tbox-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);\n\t}\n\t50% { \n\t\tbox-shadow: 0 2px 6px rgba(192, 39, 67, 0.2), 0 1px 3px rgba(192, 39, 67, 0.15);\n\t}\n\t100% { \n\t\tbox-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);\n\t}\n}\n\n.successMessage {\n\tbackground: var(--colour-branding-secondary-light);\n\tborder: 1px solid var(--colour-branding-secondary);\n\tborder-radius: 8px;\n\tpadding: 1rem;\n\tmargin-top: 1rem;\n\tcolor: var(--colour-green);\n\tfont-weight: 500;\n}\n\n/* Mode-aware styling */\n.createMode {\n\tcolor: var(--colour-purple, #6e79c5);\n}\n\n.editMode {\n\tcolor: var(--colour-branding-dark, #364196);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n\t.content {\n\t\tpadding: 1.5rem 0 2.5rem 0; /* Maintain proper padding on mobile */\n\t}\n\t\n\t.section {\n\t\tmargin-bottom: 1.5rem;\n\t}\n\t\n\t/* Mobile: vertical layout for field selector and button */\n\t.addFieldSection {\n\t\tflex-direction: column;\n\t\talign-items: stretch; /* Stretch to fill available space */\n\t}\n\t\n\t/* Button should not be full width on mobile */\n\t.addFieldSection Button {\n\t\twidth: auto; /* Let button use its natural width */\n\t\tpadding: 1rem 1.5rem; /* Keep proper padding but not full width */\n\t}\n\t\n\t.addFieldButtonContainer {\n\t\talign-items: stretch;\n\t\tjustify-content: stretch;\n\t\tmin-height: auto;\n\t}\n\t\n\t.navigation {\n\t\tflex-direction: column;\n\t\tgap: 0.75rem;\n\t\tjustify-content: flex-start; /* Align to start on mobile */\n\t\tmargin-top: 2rem; /* Slightly reduce on mobile */\n\t\tpadding-top: 1.5rem;\n\t\tpadding-bottom: 1.5rem; /* Maintain bottom padding */\n\t}\n\t\n\t/* Mobile button alignment - single button aligns right, two buttons stack */\n\t.navigation> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.navigation> :first-child:not(:only-child),\n\t.navigation> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.previousButton,\n\t.nextButton,\n\t.saveButton {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t}\n}\n\n@media (max-width: 480px) {\n\t.content {\n\t\tpadding: 1rem 0 2rem 0; /* Still maintain padding on small screens */\n\t}\n\t\n\t.section {\n\t\tmargin-bottom: 1rem;\n\t}\n\t\n\t.navigation {\n\t\tmargin-top: 1.5rem; /* Further reduce on very small screens */\n\t\tpadding-top: 1rem;\n\t\tpadding-bottom: 1.5rem;\n\t\tjustify-content: flex-start; /* Align to start on small screens */\n\t}\n\t\n\t/* Small screen button alignment */\n\t.navigation> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.navigation> :first-child:not(:only-child),\n\t.navigation> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.errorMessageContainer {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 0.75rem;\n\t}\n\t\n\t.refreshButton {\n\t\talign-self: flex-end;\n\t}\n}\n\n/* Full width content when sidebar is hidden */\n:global(.hub-contentWrapper.fullWidthContent) {\n\tmax-width: 1000px;\n\tmargin: 0 auto;\n\tpadding: 2rem;\n}\n\n.hub-contentWrapper--col {\n  flex-flow: column;\n}\n\n/* Validation error message - displayed at top of form */\n.validationErrorMessage {\n\tbackground-color: var(--colour-branding-secondary-light);\n\tborder: 1px solid var(--colour-branding-secondary);\n\tborder-radius: 6px;\n\tcolor: var(--colour-red);\n\tpadding: 12px 16px;\n\tfont-weight: 500;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t\tmargin: 24px 32px;\n}\n\n.validationErrorMessage::before {\n\tcontent: \"⚠\";\n\tfont-size: 16px;\n\tcolor: var(--colour-red);\n}\n\n/* Loading overlay for forms - deprecated, use SkeletonLoader instead */\n/*\n.loadingOverlay {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tbackground: rgba(255, 255, 255, 0.95);\n\tbackdrop-filter: blur(2px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 10;\n\tborder-radius: 8px;\n\tanimation: fadeIn 0.2s ease-in-out;\n}\n\n@keyframes fadeIn {\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n}\n*/\n\n/* Form header with buttons */\n.formHeader {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Loading container for fields */\n.fieldsLoadingContainer {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Help note styling */\n.helpNote {\n\tfont-size: 13px;\n\tcolor: #6c757d;\n}\n\n/* Loading container for overview */\n.overviewLoadingContainer {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Form layout header */\n.formLayoutHeader {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Section margins */\n.gridIconSection {\n\tmargin-bottom: 3rem;\n}\n\n.layoutSection {\n\tmargin-bottom: 2rem;\n}\n\n/* Grid icon loading state */\n.gridIconLoading {\n\tgrid-column: 1 / -1;\n}\n\n/* Hide upload button in grid icon section */\n.gridIconSection :global(.iconLoader__buttonOverlay button:first-child) {\n\tdisplay: none !important;\n}\n";
+n(css$c,{});
 
 /*
  * Icon categories and definitions for the feature builder
@@ -3306,9 +3303,6 @@ const FormOverviewStepInner = props => {
 
       // Clear submission state after showing toast (only for non-edit cases)
       if (!isEditMode) {
-        const {
-          clearFormSubmissionState
-        } = require("../actions/formActions");
         dispatch(clearFormSubmissionState());
       }
     }