@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.5 → 1.0.2-beta.6

package/dist/index.cjs.js

@@ -116,7 +116,7 @@ const selectFormState = state => getFeatureBuilderState(state).form;
  */
 const selectFormTitle = state => {
   const formState = selectFormState(state);
-  return formState && formState.title;
+  return formState === null || formState === void 0 ? void 0 : formState.title;
 };
 
 /**
@@ -127,7 +127,7 @@ const selectFormTitle = state => {
  */
 const selectFormIcon = state => {
   const formState = selectFormState(state);
-  return formState && formState.icon;
+  return formState === null || formState === void 0 ? void 0 : formState.icon;
 };
 
 /**
@@ -138,7 +138,7 @@ const selectFormIcon = state => {
  */
 const selectFormDisplayName = state => {
   const formState = selectFormState(state);
-  return formState && formState.displayName;
+  return formState === null || formState === void 0 ? void 0 : formState.displayName;
 };
 
 /**
@@ -149,7 +149,7 @@ const selectFormDisplayName = state => {
  */
 const selectFormLayout = state => {
   const formState = selectFormState(state);
-  return formState && formState.layout;
+  return formState === null || formState === void 0 ? void 0 : formState.layout;
 };
 
 /**
@@ -160,24 +160,24 @@ const selectFormLayout = state => {
  */
 const selectFormFields = state => {
   const formState = selectFormState(state);
-  return formState && formState.fields || [];
+  return (formState === null || formState === void 0 ? void 0 : formState.fields) || [];
 };
 const selectFormField = fieldId => state => selectFormFields(state).find(field => field.id === fieldId);
 const selectFormIsInitial = state => {
   const formState = selectFormState(state);
-  return formState && formState._isInitial;
+  return formState === null || formState === void 0 ? void 0 : formState._isInitial;
 };
 const selectFormIsSubmitting = state => {
   const formState = selectFormState(state);
-  return formState && formState._isSubmitting;
+  return formState === null || formState === void 0 ? void 0 : formState._isSubmitting;
 };
 const selectFormSubmitError = state => {
   const formState = selectFormState(state);
-  return formState && formState._submitError;
+  return formState === null || formState === void 0 ? void 0 : formState._submitError;
 };
 const selectFormSubmitSuccess = state => {
   const formState = selectFormState(state);
-  return formState && formState._submitSuccess;
+  return formState === null || formState === void 0 ? void 0 : formState._submitSuccess;
 };
 
 // ============ DEFINITION SELECTORS ============
@@ -185,50 +185,59 @@ const selectFormSubmitSuccess = state => {
 const selectDefinitionState = state => getFeatureBuilderState(state).definition;
 const selectDefinition = state => {
   const definitionState = selectDefinitionState(state);
-  return definitionState && definitionState.definition;
+  return definitionState === null || definitionState === void 0 ? void 0 : definitionState.definition;
 };
 const selectDefinitionId = state => {
   const definitionState = selectDefinitionState(state);
-  return definitionState && definitionState.id;
+  return definitionState === null || definitionState === void 0 ? void 0 : definitionState.id;
 };
 const selectDefinitionIsLoading = state => {
   const definitionState = selectDefinitionState(state);
-  return definitionState && definitionState.isLoading;
+  return definitionState === null || definitionState === void 0 ? void 0 : definitionState.isLoading;
 };
 const selectDefinitionError = state => {
   const definitionState = selectDefinitionState(state);
-  return definitionState && definitionState.error;
+  return definitionState === null || definitionState === void 0 ? void 0 : definitionState.error;
 };
 const selectDefinitionMode = state => {
   const definitionState = selectDefinitionState(state);
-  return definitionState && definitionState.mode;
+  return definitionState === null || definitionState === void 0 ? void 0 : definitionState.mode;
 };
 
-// Check if we have a definition loaded
-const selectHasDefinition = state => !!selectDefinition(state);
+// Check if we have a definition loaded or if we've determined the mode
+// This is used by hiddenFromFeaturePicker to determine if feature should be shown
+// When mode is "create", definition is null but we've determined the feature doesn't exist
+// When mode is "edit", definition exists and we've determined the feature exists
+const selectHasDefinition = state => {
+  const definition = selectDefinition(state);
+  const mode = selectDefinitionMode(state);
+  // Consider feature "loaded" if definition exists OR mode is set
+  // Mode being set means we've successfully fetched and determined the state
+  return !!definition || !!mode;
+};
 
 // ============ LISTINGS SELECTORS ============
 
 const selectListingsState = state => getFeatureBuilderState(state).listings;
 const selectListings = state => {
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.listings || [];
+  return (listingsState === null || listingsState === void 0 ? void 0 : listingsState.listings) || [];
 };
 const selectListingsIsLoading = state => {
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.isLoading;
+  return listingsState === null || listingsState === void 0 ? void 0 : listingsState.isLoading;
 };
 const selectListingsError = state => {
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.error;
+  return listingsState === null || listingsState === void 0 ? void 0 : listingsState.error;
 };
 const selectListingsIsRestoring = state => {
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.isRestoring;
+  return listingsState === null || listingsState === void 0 ? void 0 : listingsState.isRestoring;
 };
 const selectListingsIsInitiallyLoaded = state => {
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.isInitiallyLoaded;
+  return listingsState === null || listingsState === void 0 ? void 0 : listingsState.isInitiallyLoaded;
 };
 
 // Get a specific listing by ID
@@ -261,7 +270,7 @@ const selectDeletedListings = state => {
 const selectWizardState = state => getFeatureBuilderState(state).wizard;
 const selectWizardMode = state => {
   const wizardState = selectWizardState(state);
-  return wizardState && wizardState.mode;
+  return wizardState === null || wizardState === void 0 ? void 0 : wizardState.mode;
 };
 
 // Mode detection selectors - wizard mode is the SINGLE SOURCE OF TRUTH for create/edit mode
@@ -270,35 +279,35 @@ const selectIsCreateMode = state => selectWizardMode(state) === "create";
 const selectIsEditMode = state => selectWizardMode(state) === "edit";
 const selectNavigationState = state => {
   const wizardState = selectWizardState(state);
-  return wizardState && wizardState.navigation;
+  return wizardState === null || wizardState === void 0 ? void 0 : wizardState.navigation;
 };
 const selectCurrentStep = state => {
   const navigationState = selectNavigationState(state);
-  return navigationState && navigationState.currentStep;
+  return navigationState === null || navigationState === void 0 ? void 0 : navigationState.currentStep;
 };
 const selectStepValidation = state => {
   const wizardState = selectWizardState(state);
-  return wizardState && wizardState.stepValidation;
+  return wizardState === null || wizardState === void 0 ? void 0 : wizardState.stepValidation;
 };
 const selectStepValidationState = step => state => {
   const stepValidation = selectStepValidation(state);
-  return stepValidation && stepValidation[step];
+  return stepValidation === null || stepValidation === void 0 ? void 0 : stepValidation[step];
 };
 const selectIsStepValid = step => state => {
   const stepValidationState = selectStepValidationState(step)(state);
-  return stepValidationState && stepValidationState.isValid;
+  return stepValidationState === null || stepValidationState === void 0 ? void 0 : stepValidationState.isValid;
 };
 const selectStepErrors = step => state => {
   const stepValidationState = selectStepValidationState(step)(state);
-  return stepValidationState ? stepValidationState.errors : {};
+  return (stepValidationState === null || stepValidationState === void 0 ? void 0 : stepValidationState.errors) || {};
 };
 const selectStepCompletion = state => {
   const wizardState = selectWizardState(state);
-  return wizardState && wizardState.stepCompletion;
+  return wizardState === null || wizardState === void 0 ? void 0 : wizardState.stepCompletion;
 };
 const selectIsStepComplete = step => state => {
   const stepCompletion = selectStepCompletion(state);
-  return stepCompletion && stepCompletion[step];
+  return stepCompletion === null || stepCompletion === void 0 ? void 0 : stepCompletion[step];
 };
 
 // Check if current step should be accessible in current mode
@@ -328,14 +337,16 @@ const selectIsStepAccessible = step => state => {
 
 // Get current sort method
 const selectSortBy = state => {
+  var _listingsState$sortBy;
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.sortBy ? listingsState.sortBy : "newest";
+  return (_listingsState$sortBy = listingsState === null || listingsState === void 0 ? void 0 : listingsState.sortBy) !== null && _listingsState$sortBy !== void 0 ? _listingsState$sortBy : "newest";
 };
 
 // Get show deleted toggle state
 const selectShowDeleted = state => {
+  var _listingsState$showDe;
   const listingsState = selectListingsState(state);
-  return listingsState && listingsState.showDeleted ? listingsState.showDeleted : false;
+  return (_listingsState$showDe = listingsState === null || listingsState === void 0 ? void 0 : listingsState.showDeleted) !== null && _listingsState$showDe !== void 0 ? _listingsState$showDe : false;
 };
 
 // Get sorted and filtered listings
@@ -2120,846 +2131,838 @@ 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 {
+  Helper: Helper$1,
+  Session: Session$1
+} = PlussCore__namespace;
+const {
+  getUrl: getUrl$1
+} = Helper$1;
+const {
+  authedFunction: authedFunction$1
+} = Session$1;
+const featureDefinitionActions = {
+  /**
+   * Get the single feature definition by ID
+   * Path: {id}
+   */
+  getSingle: async (id, site) => {
+    const query = {
+      id,
+      site
+    };
+    return authedFunction$1({
+      method: "GET",
+      url: getUrl$1("feature-builder", "definition/get/single", query)
+    });
+  },
+  /**
+   * Creates a new feature definition with the provided configuration
+   *
+   * @param {string} id - The unique identifier for the new feature definition
+   * @param {string} site - The site ID where the feature definition will be created
+   * @param {FeatureDefinition} featureDefinition - The feature definition data to create
+   * @returns {Promise<ApiResponse>} Promise resolving to API response with created feature definition
+   * @throws {Error} When creation fails due to validation or API errors
+   *
+   */
+  create: async (id, site, featureDefinition) => {
+    return authedFunction$1({
+      method: "POST",
+      url: getUrl$1("feature-builder", "definition/update/create"),
+      data: {
+        id,
+        site,
+        featureDefinition
+      }
+    });
+  },
+  /**
+   * Updates an existing feature definition with new configuration
+   *
+   * @param {FeatureDefinition} featureDefinitionData - The updated feature definition data
+   * @param {string} featureDefinitionData.id - The unique identifier of the feature definition to update
+   * @param {string} [featureDefinitionData.displayName] - Updated display name
+   * @param {Field[]} [featureDefinitionData.fields] - Updated field definitions
+   * @param {Object} [featureDefinitionData.layout] - Updated layout configuration
+   * @param {string} site - The site ID where the feature definition exists
+   * @returns {Promise<ApiResponse>} Promise resolving to API response with updated feature definition
+   * @throws {Error} When update fails due to validation or API errors
+   *
+   * @example
+   * try {
+   *   const response = await featureDefinitionActions.edit(
+   *     {
+   *       id: 'feature-123',
+   *       displayName: 'Updated Form',
+   *       fields: [...]
+   *     },
+   *     'site-123'
+   *   );
+   */
+  edit: async (featureDefinitionData, site) => {
+    // Ensure site is included in the request body
+    const dataWithSite = _objectSpread$8({
+      site: site
+    }, featureDefinitionData);
+    return authedFunction$1({
+      method: "POST",
+      url: getUrl$1("feature-builder", "definition/update/edit"),
+      data: dataWithSite
+    });
+  },
+  /**
+   * Soft deletes a feature definition (marks as deleted but doesn't permanently remove)
+   *
+   * @param {string} id - The unique identifier of the feature definition to delete
+   * @param {string} site - The site ID where the feature definition exists
+   * @returns {Promise<ApiResponse>} Promise resolving to API response confirming deletion
+   * @throws {Error} When deletion fails or feature definition is not found
+   *
+   */
+  delete: async (id, site) => {
+    return authedFunction$1({
+      method: "POST",
+      url: getUrl$1("feature-builder", "definition/update/delete"),
+      data: {
+        id,
+        site
+      }
+    });
+  }
+};
 
-// Wizard action types
-const REDUCER_PREFIX$2 = values.reducerKey.toUpperCase();
-const SET_NAVIGATION_STATE$1 = "".concat(REDUCER_PREFIX$2, "_SET_NAVIGATION_STATE");
-const UPDATE_STEP_VALIDATION$1 = "".concat(REDUCER_PREFIX$2, "_UPDATE_STEP_VALIDATION");
-const MARK_STEP_COMPLETE$1 = "".concat(REDUCER_PREFIX$2, "_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
-    }
-  };
+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
+const UPDATE_STRINGS = "UPDATE_STRINGS";
+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$7(_objectSpread$7({}, currentStrings), {}, {
+    sideNav: _objectSpread$7(_objectSpread$7({}, currentStrings.sideNav), {}, {
+      [values.featureKey]: titleCased,
+      [values.menuKey]: "Manage ".concat(titleCased)
+    }),
+    permission: _objectSpread$7(_objectSpread$7({}, currentStrings.permission), {}, {
+      [values.permissionFeatureBuilderDefinition]: "Manage custom feature ".concat(titleCased),
+      [values.permissionFeatureBuilderContent]: "Manage ".concat(titleCased, " content")
+    })
+  });
+  dispatch({
+    type: UPDATE_STRINGS,
+    payload: updatedStrings
+  });
+};
+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$7(_objectSpread$7({}, currentStrings), {}, {
+    sideNav: _objectSpread$7(_objectSpread$7({}, currentStrings.sideNav), {}, {
+      [values.featureKey + "-icon"]: icon,
+      [values.menuKey + "-icon"]: icon
+    })
+  });
+  dispatch({
+    type: UPDATE_STRINGS,
+    payload: updatedStrings
+  });
 };
-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));
+/**
+ * @typedef {Object} FieldValues
+ * @property {string} [label] - Field label text
+ * @property {string} [placeholder] - Placeholder text for input
+ * @property {boolean} [isRequired] - Whether field is required
+ * @property {string} [helpText] - Help text for field guidance
+ * @property {boolean} [allowCaption] - Whether field allows captions
+ * @property {boolean} [useAsSummary] - Whether field is used as summary
+ */
+
+/**
+ * @typedef {Object} FormField
+ * @property {string} id - Unique field identifier
+ * @property {string} type - Field type (text, title, description, image, file, cta, feature-image)
+ * @property {boolean} isMandatory - Whether field is mandatory system field
+ * @property {FieldValues} values - Field configuration values
+ */
+
+/**
+ * @typedef {Object} LayoutConfig
+ * @property {string} type - Layout type (round, square, etc.)
+ * @property {string} [gridIcon] - Background image for grid layout
+ */
+
+const actionsTypes = {
+  SET_INITIAL_VALUES: "".concat(values.reducerKey.toUpperCase(), "_SET_INITIAL_VALUES"),
+  SET_TITLE: "".concat(values.reducerKey.toUpperCase(), "_SET_TITLE"),
+  SET_ICON: "".concat(values.reducerKey.toUpperCase(), "_SET_ICON"),
+  SET_DISPLAY_NAME: "".concat(values.reducerKey.toUpperCase(), "_SET_DISPLAY_NAME"),
+  ADD_FIELD: "".concat(values.reducerKey.toUpperCase(), "_ADD_FIELD"),
+  DELETE_FIELD: "".concat(values.reducerKey.toUpperCase(), "_DELETE_FIELD"),
+  UPDATE_FIELD: "".concat(values.reducerKey.toUpperCase(), "_UPDATE_FIELD"),
+  SET_LAYOUT_GRID_ICON: "".concat(values.reducerKey.toUpperCase(), "_SET_LAYOUT_GRID_ICON"),
+  SET_LAYOUT_TYPE: "".concat(values.reducerKey.toUpperCase(), "_SET_LAYOUT_TYPE"),
+  SUBMIT_FORM_REQUEST: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_REQUEST"),
+  SUBMIT_FORM_SUCCESS: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_SUCCESS"),
+  SUBMIT_FORM_FAILURE: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_FAILURE"),
+  CLEAR_FORM_SUBMISSION_STATE: "".concat(values.reducerKey.toUpperCase(), "_CLEAR_FORM_SUBMISSION_STATE"),
+  SET_SUMMARY_FIELD: "".concat(values.reducerKey.toUpperCase(), "_SET_SUMMARY_FIELD")
 };
-const updateStepValidation = function (step, isValid) {
-  let errors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+/**
+ * Action creator to set initial form values
+ * Initializes form state with existing feature definition data
+ *
+ * @param {Object} initialValues - Initial form values object
+ * @param {string} initialValues.title - Feature title
+ * @param {string} initialValues.icon - Feature icon
+ * @param {string} initialValues.displayName - Feature display name
+ * @param {LayoutConfig} initialValues.layout - Layout configuration
+ * @param {FormField[]} initialValues.fields - Form fields array
+ * @returns {Object} Redux action object with type and payload
+ *
+ * @example
+ * dispatch(setInitialValues({
+ *   title: 'Contact Form',
+ *   icon: 'envelope',
+ *   fields: []
+ * }));
+ */
+const setInitialValues = initialValues => {
   return {
-    type: UPDATE_STEP_VALIDATION$1,
-    payload: {
-      step,
-      isValid,
-      errors
-    }
+    type: actionsTypes.SET_INITIAL_VALUES,
+    payload: initialValues
   };
 };
-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 setTitle = title => {
+  return {
+    type: actionsTypes.SET_TITLE,
+    payload: title
   };
-  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;
+/**
+ * Action creator to set form display name and update menu
+ * Updates both form state and external menu string
+ * Title cases the display name before updating the strings store
+ *
+ * @param {string} displayName - New display name for form
+ * @returns {Function} Thunk function for Redux
+ *
+ * @example
+ * dispatch(setDisplayName('Contact Information'));
+ */
+const setDisplayName = displayName => {
   return dispatch => {
-    dispatch(setCurrentStep(step, previousStep));
+    // Update menu string when display name changes (will be title cased in updateFeatureBuilderString)
+    dispatch(updateFeatureBuilderString(displayName));
+
+    // Dispatch the actual action
+    dispatch({
+      type: actionsTypes.SET_DISPLAY_NAME,
+      payload: displayName
+    });
   };
 };
 
-var css$d = ".SidebarLayout_module_fullWidthContent__0d6658dd {\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.SidebarLayout_module_fullWidthContainer__0d6658dd {\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.SidebarLayout_module_contentContainer__0d6658dd {\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.SidebarLayout_module_container__0d6658dd{\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.SidebarLayout_module_contentContainer__0d6658dd {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */\n\t}\n\t.SidebarLayout_module_container__0d6658dd {\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.SidebarLayout_module_contentContainer__0d6658dd {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */\n\t}\n\t.SidebarLayout_module_container__0d6658dd {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Legacy container support */\n\t}\n}\n\n/* Enhanced sidebar navigation for progress indication */\n\n/* Enhanced progress section */\n.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.hub-sideBar-section:last-child {\n\tborder-bottom: none;\n}\n";
-var modules_d5b6badf = {"fullWidthContent":"SidebarLayout_module_fullWidthContent__0d6658dd","fullWidthContainer":"SidebarLayout_module_fullWidthContainer__0d6658dd","contentContainer":"SidebarLayout_module_contentContainer__0d6658dd","container":"SidebarLayout_module_container__0d6658dd"};
-n(css$d,{});
-
 /**
- * Sidebar Layout component for feature builder wizard
- * Provides navigation sidebar with step progression, completion tracking
- * Manages step accessibility based on wizard mode and validation state
+ * Action creator to set form icon and update menu
+ * Updates both form state and external menu icon
  *
- * @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
+ * @param {string} icon - Icon identifier or FontAwesome icon class
+ * @returns {Function} Thunk function for Redux
  *
  * @example
- * <SidebarLayout history={historyObject}>
- *   <YourMainContent />
- * </SidebarLayout>
+ * dispatch(setIcon('fa-user'));
  */
-const SideBarInner = props => {
-  const {
-    children,
-    history
-  } = props;
-  const dispatch = reactRedux.useDispatch();
+const setIcon = icon => {
+  return dispatch => {
+    // Update menu icon when icon changes
+    dispatch(updateFeatureBuilderIcon(icon));
 
-  // Get wizard state
-  const mode = reactRedux.useSelector(selectWizardMode);
-  const isEditMode = reactRedux.useSelector(selectIsEditMode);
-  const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
-  const currentStep = reactRedux.useSelector(selectCurrentStep);
-  const goTo = url => history.push(url);
-  const isSelected = url => {
-    return history.location.pathname === url;
+    // Dispatch the actual action
+    dispatch({
+      type: actionsTypes.SET_ICON,
+      payload: icon
+    });
   };
+};
 
-  // Define step configuration with dynamic URL based on mode
-  const getStepUrl = stepKey => {
-    // Use routes from values.config to support different variants (-a, -b, -c, -d)
-    switch (stepKey) {
-      case "overview":
-        return values.routeFormOverviewStep;
-      case "fields":
-        return values.routeFormFieldsStep;
-      case "layout":
-        return values.routeFormLayoutStep;
-      default:
-        return "";
+/**
+ * Action creator to add a new field to the form
+ * Generates unique ID and supports custom field types
+ *
+ * @param {string} [fieldType="text"] - Type of field to add (text, title, description, image, gallery, file, cta, feature-image)
+ * @returns {Object} Redux action object with field ID and type
+ *
+ * @example
+ * dispatch(addField('text'));
+ * dispatch(addField('image'));
+ */
+const addField = function () {
+  let fieldType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "text";
+  // 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,
+    payload: {
+      id: fieldId,
+      type: fieldType
     }
   };
-  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 = () => {
-    const isWizardMode = mode === "create" || mode === "edit";
-    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: isWizardMode ? null : isAccessible ? () => {
-          goTo(step.url);
-          dispatch(goToStep(step.key));
-        } : null,
-        isFontAwesome: true,
-        // Enhanced completion indicator
-        completed: isCompleted,
-        // Disable all navigation in wizard mode
-        disabled: isWizardMode || mode === "create" && !isAccessible
-      };
-      return itemProps;
-    });
-  };
-
-  // Determine sidebar title - always use "Build Your Feature" now
-  const getSidebarTitle = () => {
-    return "Build Your Feature";
+};
+const deleteField = id => {
+  return {
+    type: actionsTypes.DELETE_FIELD,
+    payload: id
   };
-
-  // Simple help text
-  const getHelpText = () => {
-    return "Get help with feature builder";
+};
+const updateFieldById = (id, updatedField) => {
+  return {
+    type: actionsTypes.UPDATE_FIELD,
+    payload: {
+      id,
+      updatedField
+    }
   };
+};
 
-  // Build sidebar sections - simplified without progress section
-  const sidebarSections = [{
-    title: getSidebarTitle(),
-    items: buildSidebarItems()
-  }];
-
-  // Add effect to manually attach click handlers since HubSidebar might not use onclick properly
-  React.useEffect(() => {
-    const isWizardMode = mode === "create" || mode === "edit";
-    const attachClickHandlers = () => {
-      const stepsWithUrls = [{
-        key: "overview",
-        url: getStepUrl("overview")
-      }, {
-        key: "fields",
-        url: getStepUrl("fields")
-      }, {
-        key: "layout",
-        url: getStepUrl("layout")
-      }];
-      stepsWithUrls.forEach((step, index) => {
-        const navItem = Array.from(document.querySelectorAll(".hub-wrapperContainer .sideNav-item")).find(item => item.textContent && item.textContent.includes("".concat(index + 1, ".")));
-        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
-                }
-              }
-            }
-          });
-
-          // Check if this is the current step (selected)
-          const isCurrentStep = isSelected(step.url);
-
-          // In wizard mode, don't attach any click handlers
-          // Only attach click handler if not in wizard mode AND accessible
-          if (!isWizardMode && isAccessible) {
-            navItem.onclick = event => {
-              event.preventDefault();
-              event.stopPropagation();
-              history.push(step.url);
-              dispatch(goToStep(step.key));
-            };
-          }
-
-          // Make sure it's styled appropriately
-          // In wizard mode: block clicks, but keep current step visible
-          navItem.style.pointerEvents = isWizardMode ? "none" : "auto";
-          if (isWizardMode) {
-            // Current step: full opacity, not-allowed cursor
-            // Other steps: reduced opacity
-            navItem.style.opacity = isCurrentStep ? "1" : "0.4";
-            navItem.style.cursor = "not-allowed";
-          } else {
-            // Not in wizard mode: normal styling based on accessibility
-            navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
-            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("div", {
-    className: "hub-contentWrapper"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: modules_d5b6badf.fullWidthContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: modules_d5b6badf.contentContainer
-  }, children))));
+/**
+ * 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 SidebarLayout = reactRouter.withRouter(SideBarInner);
-
-var css$c = ".Form_module_content__d62303b4 {\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.Form_module_pageWrapper__d62303b4 {\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.Form_module_pageWrapper__d62303b4 {\n\t\tpadding: 3rem 0;\n\t}\n}\n\n/* Form container styling when using CenteredContainer */\n.Form_module_formContainer__d62303b4 {\n\tbackground-color: var(--bg-white);\n}\n\n/* Section styling */\n.Form_module_section__d62303b4 {\n\tmargin-bottom: 2rem;\n\t\tpadding:  0 0 2em;\n}\n\n.Form_module_section_NoBorder__d62303b4 {\n\t\tborder-bottom: none;\n}\n\n.Form_module_subtitle__d62303b4 {\n\tcolor: var(--text-bluegrey, #6c7a90);\n}\n\n.Form_module_sectionHeader__d62303b4 {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n}\n\n/* Add Field Button styling */\n.Form_module_addFieldButton__d62303b4 {\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.Form_module_addFieldButton__d62303b4: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.Form_module_addFieldButton__d62303b4:focus {\n\toutline: 2px solid var(--colour-branding-action, #5c90df);\n\toutline-offset: 2px;\n}\n\n.Form_module_addFieldButton__d62303b4:active {\n\ttransform: translateY(0);\n}\n\n/* Refresh button styling */\n.Form_module_refreshButton__d62303b4 {\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.Form_module_refreshButton__d62303b4:hover {\n\tbackground: var(--colour-dusk-hover, #485968);\n}\n\n/* Error message container */\n.Form_module_errorMessageContainer__d62303b4 {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n}\n\n/* Add Field Container - matches field structure */\n.Form_module_addFieldContainer__d62303b4 {\n\tdisplay: flex;\n\tmargin-top: 32px;\n}\n\n.Form_module_fieldNumberContainer__d62303b4 {\n\tdisplay: flex;\n\twidth: 40px;\n}\n\n/* Add Field Section */\n.Form_module_addFieldSection__d62303b4 {\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.Form_module_addFieldSection__d62303b4 {\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.Form_module_helpSection__d62303b4 {\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.Form_module_helpTitle__d62303b4 {\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.Form_module_helpText__d62303b4 {\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.Form_module_fieldTypeCards__d62303b4 {\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.Form_module_fieldTypeCards__d62303b4 {\n\t\tgap: 1.5rem; /* Slightly larger gap on desktop */\n\t}\n}\n\n.Form_module_fieldTypeCard__d62303b4 {\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.Form_module_fieldTypeCard__d62303b4: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.Form_module_fieldTypeCard__d62303b4:focus {\n\toutline: 2px solid var(--text-light);\n\toutline-offset: 2px;\n}\n\n.Form_module_fieldTypeCard__d62303b4:active {\n\ttransform: scale(0.98);\n\ttransition: transform 0.1s ease;\n}\n\n.Form_module_fieldTypeCardIcon__d62303b4 {\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.Form_module_fieldTypeCardContent__d62303b4 {\n\tflex: 1;\n\twidth: 100%;\n\tmin-width: 0; /* Prevent content from overflowing */\n}\n\n.Form_module_fieldTypeCardTitle__d62303b4 {\n\tmargin: 0 0 0.25rem 0;\n\tfont-weight: 600;\n\tfont-size: 1.4rem; /* Increased for better readability */\n}\n\n.Form_module_fieldTypeCardDescription__d62303b4 {\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.Form_module_fieldTypeCardUseCase__d62303b4 {\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.Form_module_addFieldSection__d62303b4> 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.Form_module_addFieldButtonContainer__d62303b4 {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n\n/* Empty State */\n.Form_module_emptyState__d62303b4 {\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.Form_module_emptyStateText__d62303b4 {\n\tcolor: var(--text-bluegrey, #6c7a90);\n\tfont-style: italic;\n}\n\n.Form_module_fieldTypeSelector__d62303b4 {\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.Form_module_addFieldSection__d62303b4 {\n\t\talign-items: stretch;\n\t}\n\t\n\t.Form_module_fieldTypeSelector__d62303b4 {\n\t\tmax-width: none;\n\t}\n}\n\n.Form_module_grid__four__d62303b4 {\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.Form_module_grid__four__d62303b4 {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 2rem;\n\t}\n}\n\n/* Navigation styles */\n.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n/* Two button alignment - one left, one right */\n.Form_module_navigation__d62303b4> :first-child:not(:only-child) {\n\tmargin-right: auto;\n}\n\n.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\tmargin-left: auto;\n}\n\n/* Special case for overview step - align save button to right */\n.Form_module_overviewStep__d62303b4 .Form_module_navigation__d62303b4> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n.Form_module_previousButton__d62303b4 {\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.Form_module_previousButton__d62303b4:hover {\n\tbackground: #5a6268;\n}\n\n.Form_module_saveButton__d62303b4 {\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.Form_module_saveButton__d62303b4: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.Form_module_saveButton__d62303b4:focus {\n\toutline: 2px solid var(--colour-purple, #6e79c5);\n\toutline-offset: 2px;\n}\n\n.Form_module_saveButton__d62303b4:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n.Form_module_nextButton__d62303b4 {\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.Form_module_nextButton__d62303b4:hover:not(:disabled) {\n\ttransform: translateY(-2px);\n\tbox-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n.Form_module_nextButton__d62303b4:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n\n\n.Form_module_errorMessage__d62303b4 {\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.Form_module_layoutOption__d62303b4 {\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\topacity: 0.6;\n}\n\n.Form_module_layoutOption__d62303b4:hover {\n\topacity: 1;\n}\n\n.Form_module_layoutOptionImage__d62303b4 {\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.Form_module_layoutOption__d62303b4.Form_module_selected__d62303b4 .Form_module_layoutOptionImage__d62303b4 {\n\tborder-color: var(--colour-purple, #6e79c5);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.Form_module_layoutOption__d62303b4.Form_module_selected__d62303b4 {\n\topacity: 1;\n}\n\n.Form_module_layoutOptionImg__d62303b4 {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.Form_module_layoutOptionContent__d62303b4 {\n\tmax-width: 250px;\n\tmargin-bottom: 0.5rem;\n}\n\n.Form_module_layoutOptionTitle__d62303b4 {\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.Form_module_layoutOptionDescription__d62303b4 {\n\tfont-size: 1.2rem;\n\tmargin: 0;\n\tline-height: 1.3;\n\tcolor: #6c757d;\n}\n\n.Form_module_layoutOption__d62303b4.Form_module_hasError__d62303b4 .Form_module_layoutOptionImage__d62303b4 {\n\tborder-color: var(--colour-red, #dc3545);\n}\n\n/* Field error styles */\n.Form_module_fieldError__d62303b4 {\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.Form_module_errorIcon__d62303b4 {\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 Form_module_errorShake__d62303b4 {\n\t0%, 100% { transform: translateX(0); }\n\t25% { transform: translateX(-3px); }\n\t75% { transform: translateX(3px); }\n}\n\n@keyframes Form_module_errorPulse__d62303b4 {\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.Form_module_successMessage__d62303b4 {\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.Form_module_createMode__d62303b4 {\n\tcolor: var(--colour-purple, #6e79c5);\n}\n\n.Form_module_editMode__d62303b4 {\n\tcolor: var(--colour-branding-dark, #364196);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n\t.Form_module_content__d62303b4 {\n\t\tpadding: 1.5rem 0 2.5rem 0; /* Maintain proper padding on mobile */\n\t}\n\t\n\t.Form_module_section__d62303b4 {\n\t\tmargin-bottom: 1.5rem;\n\t}\n\t\n\t/* Mobile: vertical layout for field selector and button */\n\t.Form_module_addFieldSection__d62303b4 {\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.Form_module_addFieldSection__d62303b4 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.Form_module_addFieldButtonContainer__d62303b4 {\n\t\talign-items: stretch;\n\t\tjustify-content: stretch;\n\t\tmin-height: auto;\n\t}\n\t\n\t.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_navigation__d62303b4> :first-child:not(:only-child),\n\t.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_previousButton__d62303b4,\n\t.Form_module_nextButton__d62303b4,\n\t.Form_module_saveButton__d62303b4 {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t}\n}\n\n@media (max-width: 480px) {\n\t.Form_module_content__d62303b4 {\n\t\tpadding: 1rem 0 2rem 0; /* Still maintain padding on small screens */\n\t}\n\t\n\t.Form_module_section__d62303b4 {\n\t\tmargin-bottom: 1rem;\n\t}\n\t\n\t.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_navigation__d62303b4> :first-child:not(:only-child),\n\t.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_errorMessageContainer__d62303b4 {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 0.75rem;\n\t}\n\t\n\t.Form_module_refreshButton__d62303b4 {\n\t\talign-self: flex-end;\n\t}\n}\n\n/* Full width content when sidebar is hidden */\n.hub-contentWrapper.fullWidthContent {\n\tmax-width: 1000px;\n\tmargin: 0 auto;\n\tpadding: 2rem;\n}\n\n.Form_module_hubContentWrapper_Col__d62303b4 {\n  flex-flow: column;\n}\n\n/* Validation error message - displayed at top of form */\n.Form_module_validationErrorMessage__d62303b4 {\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.Form_module_validationErrorMessage__d62303b4::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.Form_module_formHeader__d62303b4 {\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.Form_module_fieldsLoadingContainer__d62303b4 {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Help note styling */\n.Form_module_helpNote__d62303b4 {\n\tfont-size: 13px;\n\tcolor: #6c757d;\n}\n\n/* Loading container for overview */\n.Form_module_overviewLoadingContainer__d62303b4 {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Form layout header */\n.Form_module_formLayoutHeader__d62303b4 {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Section margins */\n.Form_module_gridIconSection__d62303b4 {\n\tmargin-bottom: 3rem;\n}\n\n.Form_module_layoutSection__d62303b4 {\n\tmargin-bottom: 2rem;\n}\n\n/* Grid icon loading state */\n.Form_module_gridIconLoading__d62303b4 {\n\tgrid-column: 1 / -1;\n}\n\n/* Hide upload button in grid icon section */\n.Form_module_gridIconSection__d62303b4 .iconLoader__buttonOverlay button:first-child {\n\tdisplay: none !important;\n}\n";
-var modules_cd65a764 = {"content":"Form_module_content__d62303b4","pageWrapper":"Form_module_pageWrapper__d62303b4","formContainer":"Form_module_formContainer__d62303b4","section":"Form_module_section__d62303b4","section--no-border":"Form_module_section_NoBorder__d62303b4","subtitle":"Form_module_subtitle__d62303b4","sectionHeader":"Form_module_sectionHeader__d62303b4","addFieldButton":"Form_module_addFieldButton__d62303b4","refreshButton":"Form_module_refreshButton__d62303b4","errorMessageContainer":"Form_module_errorMessageContainer__d62303b4","addFieldContainer":"Form_module_addFieldContainer__d62303b4","fieldNumberContainer":"Form_module_fieldNumberContainer__d62303b4","addFieldSection":"Form_module_addFieldSection__d62303b4","helpSection":"Form_module_helpSection__d62303b4","helpTitle":"Form_module_helpTitle__d62303b4","helpText":"Form_module_helpText__d62303b4","fieldTypeCards":"Form_module_fieldTypeCards__d62303b4","fieldTypeCard":"Form_module_fieldTypeCard__d62303b4","fieldTypeCardIcon":"Form_module_fieldTypeCardIcon__d62303b4","fieldTypeCardContent":"Form_module_fieldTypeCardContent__d62303b4","fieldTypeCardTitle":"Form_module_fieldTypeCardTitle__d62303b4","fieldTypeCardDescription":"Form_module_fieldTypeCardDescription__d62303b4","fieldTypeCardUseCase":"Form_module_fieldTypeCardUseCase__d62303b4","addFieldButtonContainer":"Form_module_addFieldButtonContainer__d62303b4","emptyState":"Form_module_emptyState__d62303b4","emptyStateText":"Form_module_emptyStateText__d62303b4","fieldTypeSelector":"Form_module_fieldTypeSelector__d62303b4","grid__four":"Form_module_grid__four__d62303b4","navigation":"Form_module_navigation__d62303b4","overviewStep":"Form_module_overviewStep__d62303b4","previousButton":"Form_module_previousButton__d62303b4","saveButton":"Form_module_saveButton__d62303b4","nextButton":"Form_module_nextButton__d62303b4","errorMessage":"Form_module_errorMessage__d62303b4","layoutOption":"Form_module_layoutOption__d62303b4","layoutOptionImage":"Form_module_layoutOptionImage__d62303b4","selected":"Form_module_selected__d62303b4","layoutOptionImg":"Form_module_layoutOptionImg__d62303b4","layoutOptionContent":"Form_module_layoutOptionContent__d62303b4","layoutOptionTitle":"Form_module_layoutOptionTitle__d62303b4","layoutOptionDescription":"Form_module_layoutOptionDescription__d62303b4","hasError":"Form_module_hasError__d62303b4","fieldError":"Form_module_fieldError__d62303b4","errorIcon":"Form_module_errorIcon__d62303b4","successMessage":"Form_module_successMessage__d62303b4","createMode":"Form_module_createMode__d62303b4","editMode":"Form_module_editMode__d62303b4","hub-contentWrapper--col":"Form_module_hubContentWrapper_Col__d62303b4","validationErrorMessage":"Form_module_validationErrorMessage__d62303b4","formHeader":"Form_module_formHeader__d62303b4","fieldsLoadingContainer":"Form_module_fieldsLoadingContainer__d62303b4","helpNote":"Form_module_helpNote__d62303b4","overviewLoadingContainer":"Form_module_overviewLoadingContainer__d62303b4","formLayoutHeader":"Form_module_formLayoutHeader__d62303b4","gridIconSection":"Form_module_gridIconSection__d62303b4","layoutSection":"Form_module_layoutSection__d62303b4","gridIconLoading":"Form_module_gridIconLoading__d62303b4","errorShake":"Form_module_errorShake__d62303b4","errorPulse":"Form_module_errorPulse__d62303b4"};
-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
-} = PlussCore__namespace;
-const {
-  getUrl: getUrl$1
-} = Helper$1;
-const {
-  authedFunction: authedFunction$1
-} = Session$1;
-const featureDefinitionActions = {
-  /**
-   * Get the single feature definition by ID
-   * Path: {id}
-   */
-  getSingle: async (id, site) => {
-    const query = {
-      id,
-      site
-    };
-    return authedFunction$1({
-      method: "GET",
-      url: getUrl$1("feature-builder", "definition/get/single", query)
-    });
-  },
-  /**
-   * Creates a new feature definition with the provided configuration
-   *
-   * @param {string} id - The unique identifier for the new feature definition
-   * @param {string} site - The site ID where the feature definition will be created
-   * @param {FeatureDefinition} featureDefinition - The feature definition data to create
-   * @returns {Promise<ApiResponse>} Promise resolving to API response with created feature definition
-   * @throws {Error} When creation fails due to validation or API errors
-   *
-   */
-  create: async (id, site, featureDefinition) => {
-    return authedFunction$1({
-      method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/create"),
-      data: {
-        id,
-        site,
-        featureDefinition
-      }
-    });
-  },
-  /**
-   * Updates an existing feature definition with new configuration
-   *
-   * @param {FeatureDefinition} featureDefinitionData - The updated feature definition data
-   * @param {string} featureDefinitionData.id - The unique identifier of the feature definition to update
-   * @param {string} [featureDefinitionData.displayName] - Updated display name
-   * @param {Field[]} [featureDefinitionData.fields] - Updated field definitions
-   * @param {Object} [featureDefinitionData.layout] - Updated layout configuration
-   * @param {string} site - The site ID where the feature definition exists
-   * @returns {Promise<ApiResponse>} Promise resolving to API response with updated feature definition
-   * @throws {Error} When update fails due to validation or API errors
-   *
-   * @example
-   * try {
-   *   const response = await featureDefinitionActions.edit(
-   *     {
-   *       id: 'feature-123',
-   *       displayName: 'Updated Form',
-   *       fields: [...]
-   *     },
-   *     'site-123'
-   *   );
-   */
-  edit: async (featureDefinitionData, site) => {
-    // Ensure site is included in the request body
-    const dataWithSite = _objectSpread$7({
-      site: site
-    }, featureDefinitionData);
-    return authedFunction$1({
-      method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/edit"),
-      data: dataWithSite
-    });
-  },
-  /**
-   * Soft deletes a feature definition (marks as deleted but doesn't permanently remove)
-   *
-   * @param {string} id - The unique identifier of the feature definition to delete
-   * @param {string} site - The site ID where the feature definition exists
-   * @returns {Promise<ApiResponse>} Promise resolving to API response confirming deletion
-   * @throws {Error} When deletion fails or feature definition is not found
-   *
-   */
-  delete: async (id, site) => {
-    return authedFunction$1({
-      method: "POST",
-      url: getUrl$1("feature-builder", "definition/update/delete"),
-      data: {
-        id,
-        site
-      }
-    });
-  }
+const setLayoutType = layoutType => {
+  return {
+    type: actionsTypes.SET_LAYOUT_TYPE,
+    payload: layoutType
+  };
 };
-
-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; }
-
-// 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
-const UPDATE_STRINGS = "UPDATE_STRINGS";
-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), {}, {
-      [values.featureKey]: titleCased,
-      [values.menuKey]: "Manage ".concat(titleCased)
-    }),
-    permission: _objectSpread$6(_objectSpread$6({}, currentStrings.permission), {}, {
-      [values.permissionFeatureBuilderDefinition]: "Manage custom feature ".concat(titleCased),
-      [values.permissionFeatureBuilderContent]: "Manage ".concat(titleCased, " content")
-    })
-  });
-  dispatch({
-    type: UPDATE_STRINGS,
-    payload: updatedStrings
-  });
+const submitFormRequest = () => {
+  return {
+    type: actionsTypes.SUBMIT_FORM_REQUEST
+  };
 };
-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), {}, {
-      [values.featureKey + "-icon"]: icon,
-      [values.menuKey + "-icon"]: icon
-    })
-  });
-  dispatch({
-    type: UPDATE_STRINGS,
-    payload: updatedStrings
-  });
+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
+  };
 };
 
 /**
- * Form Actions for Feature Builder
- * Manages form state including title, icon, fields, layout, and submission
- * Handles CRUD operations for form fields and layout configuration
- * Coordinates with external menu updates and feature definition actions
+ * Submits the complete feature form to the server
+ * Handles form validation, API submission, and error handling
  *
- * @namespace formActions
- */
-
-/**
- * @typedef {Object} FieldValues
- * @property {string} [label] - Field label text
- * @property {string} [placeholder] - Placeholder text for input
- * @property {boolean} [isRequired] - Whether field is required
- * @property {string} [helpText] - Help text for field guidance
- * @property {boolean} [allowCaption] - Whether field allows captions
- * @property {boolean} [useAsSummary] - Whether field is used as summary
+ * @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 === null || state === void 0 ? void 0 : 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.");
+      }
 
-/**
- * @typedef {Object} FormField
- * @property {string} id - Unique field identifier
- * @property {string} type - Field type (text, title, description, image, file, cta, feature-image)
- * @property {boolean} isMandatory - Whether field is mandatory system field
- * @property {FieldValues} values - Field configuration values
- */
+      // Use mode from fetch instead of checking definition ID
+      const definitionState = state === null || state === void 0 ? void 0 : state.definition;
+      const mode = definitionState === null || definitionState === void 0 ? void 0 : definitionState.mode; // Use stored mode from fetch
+      const definitionId = definitionState === null || definitionState === void 0 ? void 0 : 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 !== null && data !== void 0 && 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 === null || data === void 0 ? void 0 : 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));
+    }
+  };
+}
 
-/**
- * @typedef {Object} LayoutConfig
- * @property {string} type - Layout type (round, square, etc.)
- * @property {string} [gridIcon] - Background image for grid layout
- */
+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 actionsTypes = {
-  SET_INITIAL_VALUES: "".concat(values.reducerKey.toUpperCase(), "_SET_INITIAL_VALUES"),
-  SET_TITLE: "".concat(values.reducerKey.toUpperCase(), "_SET_TITLE"),
-  SET_ICON: "".concat(values.reducerKey.toUpperCase(), "_SET_ICON"),
-  SET_DISPLAY_NAME: "".concat(values.reducerKey.toUpperCase(), "_SET_DISPLAY_NAME"),
-  ADD_FIELD: "".concat(values.reducerKey.toUpperCase(), "_ADD_FIELD"),
-  DELETE_FIELD: "".concat(values.reducerKey.toUpperCase(), "_DELETE_FIELD"),
-  UPDATE_FIELD: "".concat(values.reducerKey.toUpperCase(), "_UPDATE_FIELD"),
-  SET_LAYOUT_GRID_ICON: "".concat(values.reducerKey.toUpperCase(), "_SET_LAYOUT_GRID_ICON"),
-  SET_LAYOUT_TYPE: "".concat(values.reducerKey.toUpperCase(), "_SET_LAYOUT_TYPE"),
-  SUBMIT_FORM_REQUEST: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_REQUEST"),
-  SUBMIT_FORM_SUCCESS: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_SUCCESS"),
-  SUBMIT_FORM_FAILURE: "".concat(values.reducerKey.toUpperCase(), "_SUBMIT_FORM_FAILURE"),
-  CLEAR_FORM_SUBMISSION_STATE: "".concat(values.reducerKey.toUpperCase(), "_CLEAR_FORM_SUBMISSION_STATE"),
-  SET_SUMMARY_FIELD: "".concat(values.reducerKey.toUpperCase(), "_SET_SUMMARY_FIELD")
+// Wizard action types
+const REDUCER_PREFIX$2 = values.reducerKey.toUpperCase();
+const SET_NAVIGATION_STATE$1 = "".concat(REDUCER_PREFIX$2, "_SET_NAVIGATION_STATE");
+const UPDATE_STEP_VALIDATION$1 = "".concat(REDUCER_PREFIX$2, "_UPDATE_STEP_VALIDATION");
+const MARK_STEP_COMPLETE$1 = "".concat(REDUCER_PREFIX$2, "_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) => {
+  var _state$wizard;
+  const state = getState()[values.reducerKey];
+  const currentStep = state === null || state === void 0 || (_state$wizard = state.wizard) === null || _state$wizard === void 0 || (_state$wizard = _state$wizard.navigation) === null || _state$wizard === void 0 ? void 0 : _state$wizard.currentStep;
 
-/**
- * Action creator to set initial form values
- * Initializes form state with existing feature definition data
- *
- * @param {Object} initialValues - Initial form values object
- * @param {string} initialValues.title - Feature title
- * @param {string} initialValues.icon - Feature icon
- * @param {string} initialValues.displayName - Feature display name
- * @param {LayoutConfig} initialValues.layout - Layout configuration
- * @param {FormField[]} initialValues.fields - Form fields array
- * @returns {Object} Redux action object with type and payload
- *
- * @example
- * dispatch(setInitialValues({
- *   title: 'Contact Form',
- *   icon: 'envelope',
- *   fields: []
- * }));
- */
-const setInitialValues = initialValues => {
+  // 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.SET_INITIAL_VALUES,
-    payload: initialValues
+    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 setTitle = title => {
+  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.SET_TITLE,
-    payload: title
+    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":
+      {
+        var _form$title, _form$displayName, _form$icon;
+        const hasTitle = ((_form$title = form.title) === null || _form$title === void 0 ? void 0 : _form$title.trim().length) > 0;
+        const hasDisplayName = ((_form$displayName = form.displayName) === null || _form$displayName === void 0 ? void 0 : _form$displayName.trim().length) > 0;
+        const hasIcon = ((_form$icon = form.icon) === null || _form$icon === void 0 ? void 0 : _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":
+      {
+        var _form$fields, _form$fields2;
+        const hasTitleField = (_form$fields = form.fields) === null || _form$fields === void 0 ? void 0 : _form$fields.some(field => field.id === "mandatory-title");
+        const hasImageField = (_form$fields2 = form.fields) === null || _form$fields2 === void 0 ? void 0 : _form$fields2.some(field => field.id === "mandatory-feature-image");
 
-/**
- * Action creator to set form display name and update menu
- * Updates both form state and external menu string
- * Title cases the display name before updating the strings store
- *
- * @param {string} displayName - New display name for form
- * @returns {Function} Thunk function for Redux
- *
- * @example
- * dispatch(setDisplayName('Contact Information'));
- */
-const setDisplayName = displayName => {
+        // 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":
+      {
+        var _form$layout;
+        const hasLayoutType = ((_form$layout = form.layout) === null || _form$layout === void 0 || (_form$layout = _form$layout.type) === null || _form$layout === void 0 ? void 0 : _form$layout.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 => {
-    // Update menu string when display name changes (will be title cased in updateFeatureBuilderString)
-    dispatch(updateFeatureBuilderString(displayName));
-
-    // Dispatch the actual action
-    dispatch({
-      type: actionsTypes.SET_DISPLAY_NAME,
-      payload: displayName
-    });
+    dispatch(setCurrentStep(step, previousStep));
   };
 };
 
+var css$d = ".SidebarLayout_module_fullWidthContent__0d6658dd {\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.SidebarLayout_module_fullWidthContainer__0d6658dd {\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.SidebarLayout_module_contentContainer__0d6658dd {\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.SidebarLayout_module_container__0d6658dd{\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.SidebarLayout_module_contentContainer__0d6658dd {\n\t\tpadding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */\n\t}\n\t.SidebarLayout_module_container__0d6658dd {\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.SidebarLayout_module_contentContainer__0d6658dd {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */\n\t}\n\t.SidebarLayout_module_container__0d6658dd {\n\t\tpadding: 1rem 1rem 2rem 1rem; /* Legacy container support */\n\t}\n}\n\n/* Enhanced sidebar navigation for progress indication */\n\n/* Enhanced progress section */\n.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.hub-sideBar-section:last-child {\n\tborder-bottom: none;\n}\n";
+var modules_d5b6badf = {"fullWidthContent":"SidebarLayout_module_fullWidthContent__0d6658dd","fullWidthContainer":"SidebarLayout_module_fullWidthContainer__0d6658dd","contentContainer":"SidebarLayout_module_contentContainer__0d6658dd","container":"SidebarLayout_module_container__0d6658dd"};
+n(css$d,{});
+
 /**
- * Action creator to set form icon and update menu
- * Updates both form state and external menu icon
+ * Sidebar Layout component for feature builder wizard
+ * Provides navigation sidebar with step progression, completion tracking
+ * Manages step accessibility based on wizard mode and validation state
  *
- * @param {string} icon - Icon identifier or FontAwesome icon class
- * @returns {Function} Thunk function for Redux
+ * @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(setIcon('fa-user'));
+ * <SidebarLayout history={historyObject}>
+ *   <YourMainContent />
+ * </SidebarLayout>
  */
-const setIcon = icon => {
-  return dispatch => {
-    // Update menu icon when icon changes
-    dispatch(updateFeatureBuilderIcon(icon));
+const SideBarInner = props => {
+  const {
+    children,
+    history
+  } = props;
+  const dispatch = reactRedux.useDispatch();
 
-    // Dispatch the actual action
-    dispatch({
-      type: actionsTypes.SET_ICON,
-      payload: icon
-    });
+  // Get wizard state
+  const mode = reactRedux.useSelector(selectWizardMode);
+  const isEditMode = reactRedux.useSelector(selectIsEditMode);
+  const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
+  const currentStep = reactRedux.useSelector(selectCurrentStep);
+  const goTo = url => history.push(url);
+  const isSelected = url => {
+    return history.location.pathname === url;
   };
-};
 
-/**
- * Action creator to add a new field to the form
- * Generates unique ID and supports custom field types
- *
- * @param {string} [fieldType="text"] - Type of field to add (text, title, description, image, gallery, file, cta, feature-image)
- * @returns {Object} Redux action object with field ID and type
- *
- * @example
- * dispatch(addField('text'));
- * dispatch(addField('image'));
- */
-const addField = function () {
-  let fieldType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "text";
-  // 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,
-    payload: {
-      id: fieldId,
-      type: fieldType
+  // Define step configuration with dynamic URL based on mode
+  const getStepUrl = stepKey => {
+    // Use routes from values.config to support different variants (-a, -b, -c, -d)
+    switch (stepKey) {
+      case "overview":
+        return values.routeFormOverviewStep;
+      case "fields":
+        return values.routeFormFieldsStep;
+      case "layout":
+        return values.routeFormLayoutStep;
+      default:
+        return "";
     }
   };
-};
-const deleteField = id => {
-  return {
-    type: actionsTypes.DELETE_FIELD,
-    payload: id
-  };
-};
-const updateFieldById = (id, updatedField) => {
-  return {
-    type: actionsTypes.UPDATE_FIELD,
-    payload: {
-      id,
-      updatedField
-    }
+  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 = () => {
+    const isWizardMode = mode === "create" || mode === "edit";
+    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: isWizardMode ? null : isAccessible ? () => {
+          goTo(step.url);
+          dispatch(goToStep(step.key));
+        } : null,
+        isFontAwesome: true,
+        // Enhanced completion indicator
+        completed: isCompleted,
+        // Disable all navigation in wizard mode
+        disabled: isWizardMode || mode === "create" && !isAccessible
+      };
+      return itemProps;
+    });
   };
-};
 
-/**
- * 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
+  // Determine sidebar title - always use "Build Your Feature" now
+  const getSidebarTitle = () => {
+    return "Build Your Feature";
   };
-};
-const clearFormSubmissionState = () => {
-  return {
-    type: actionsTypes.CLEAR_FORM_SUBMISSION_STATE
+
+  // Simple help text
+  const getHelpText = () => {
+    return "Get help with feature builder";
   };
-};
 
-/**
- * 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.");
-      }
+  // Build sidebar sections - simplified without progress section
+  const sidebarSections = [{
+    title: getSidebarTitle(),
+    items: buildSidebarItems()
+  }];
 
-      // 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
+  // Add effect to manually attach click handlers since HubSidebar might not use onclick properly
+  React.useEffect(() => {
+    const isWizardMode = mode === "create" || mode === "edit";
+    const attachClickHandlers = () => {
+      const stepsWithUrls = [{
+        key: "overview",
+        url: getStepUrl("overview")
+      }, {
+        key: "fields",
+        url: getStepUrl("fields")
+      }, {
+        key: "layout",
+        url: getStepUrl("layout")
+      }];
+      stepsWithUrls.forEach((step, index) => {
+        const navItem = Array.from(document.querySelectorAll(".hub-wrapperContainer .sideNav-item")).find(item => item.textContent && item.textContent.includes("".concat(index + 1, ".")));
+        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
+                }
+              }
+            }
+          });
+
+          // Check if this is the current step (selected)
+          const isCurrentStep = isSelected(step.url);
+
+          // In wizard mode, don't attach any click handlers
+          // Only attach click handler if not in wizard mode AND accessible
+          if (!isWizardMode && isAccessible) {
+            navItem.onclick = event => {
+              event.preventDefault();
+              event.stopPropagation();
+              history.push(step.url);
+              dispatch(goToStep(step.key));
+            };
+          }
+
+          // Make sure it's styled appropriately
+          // In wizard mode: block clicks, but keep current step visible
+          navItem.style.pointerEvents = isWizardMode ? "none" : "auto";
+          if (isWizardMode) {
+            // Current step: full opacity, not-allowed cursor
+            // Other steps: reduced opacity
+            navItem.style.opacity = isCurrentStep ? "1" : "0.4";
+            navItem.style.cursor = "not-allowed";
+          } else {
+            // Not in wizard mode: normal styling based on accessibility
+            navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
+            navItem.style.opacity = isAccessible ? "1" : "0.5";
           }
-        };
-        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));
+      });
+    };
+
+    // 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("div", {
+    className: "hub-contentWrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: modules_d5b6badf.fullWidthContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: modules_d5b6badf.contentContainer
+  }, children))));
+};
+const SidebarLayout = reactRouter.withRouter(SideBarInner);
+
+var css$c = ".Form_module_content__d62303b4 {\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.Form_module_pageWrapper__d62303b4 {\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.Form_module_pageWrapper__d62303b4 {\n\t\tpadding: 3rem 0;\n\t}\n}\n\n/* Form container styling when using CenteredContainer */\n.Form_module_formContainer__d62303b4 {\n\tbackground-color: var(--bg-white);\n}\n\n/* Section styling */\n.Form_module_section__d62303b4 {\n\tmargin-bottom: 2rem;\n\t\tpadding:  0 0 2em;\n}\n\n.Form_module_section_NoBorder__d62303b4 {\n\t\tborder-bottom: none;\n}\n\n.Form_module_subtitle__d62303b4 {\n\tcolor: var(--text-bluegrey, #6c7a90);\n}\n\n.Form_module_sectionHeader__d62303b4 {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n}\n\n/* Add Field Button styling */\n.Form_module_addFieldButton__d62303b4 {\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.Form_module_addFieldButton__d62303b4: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.Form_module_addFieldButton__d62303b4:focus {\n\toutline: 2px solid var(--colour-branding-action, #5c90df);\n\toutline-offset: 2px;\n}\n\n.Form_module_addFieldButton__d62303b4:active {\n\ttransform: translateY(0);\n}\n\n/* Refresh button styling */\n.Form_module_refreshButton__d62303b4 {\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.Form_module_refreshButton__d62303b4:hover {\n\tbackground: var(--colour-dusk-hover, #485968);\n}\n\n/* Error message container */\n.Form_module_errorMessageContainer__d62303b4 {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n}\n\n/* Add Field Container - matches field structure */\n.Form_module_addFieldContainer__d62303b4 {\n\tdisplay: flex;\n\tmargin-top: 32px;\n}\n\n.Form_module_fieldNumberContainer__d62303b4 {\n\tdisplay: flex;\n\twidth: 40px;\n}\n\n/* Add Field Section */\n.Form_module_addFieldSection__d62303b4 {\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.Form_module_addFieldSection__d62303b4 {\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.Form_module_helpSection__d62303b4 {\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.Form_module_helpTitle__d62303b4 {\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.Form_module_helpText__d62303b4 {\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.Form_module_fieldTypeCards__d62303b4 {\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.Form_module_fieldTypeCards__d62303b4 {\n\t\tgap: 1.5rem; /* Slightly larger gap on desktop */\n\t}\n}\n\n.Form_module_fieldTypeCard__d62303b4 {\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.Form_module_fieldTypeCard__d62303b4: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.Form_module_fieldTypeCard__d62303b4:focus {\n\toutline: 2px solid var(--text-light);\n\toutline-offset: 2px;\n}\n\n.Form_module_fieldTypeCard__d62303b4:active {\n\ttransform: scale(0.98);\n\ttransition: transform 0.1s ease;\n}\n\n.Form_module_fieldTypeCardIcon__d62303b4 {\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.Form_module_fieldTypeCardContent__d62303b4 {\n\tflex: 1;\n\twidth: 100%;\n\tmin-width: 0; /* Prevent content from overflowing */\n}\n\n.Form_module_fieldTypeCardTitle__d62303b4 {\n\tmargin: 0 0 0.25rem 0;\n\tfont-weight: 600;\n\tfont-size: 1.4rem; /* Increased for better readability */\n}\n\n.Form_module_fieldTypeCardDescription__d62303b4 {\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.Form_module_fieldTypeCardUseCase__d62303b4 {\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.Form_module_addFieldSection__d62303b4> 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.Form_module_addFieldButtonContainer__d62303b4 {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n\n/* Empty State */\n.Form_module_emptyState__d62303b4 {\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.Form_module_emptyStateText__d62303b4 {\n\tcolor: var(--text-bluegrey, #6c7a90);\n\tfont-style: italic;\n}\n\n.Form_module_fieldTypeSelector__d62303b4 {\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.Form_module_addFieldSection__d62303b4 {\n\t\talign-items: stretch;\n\t}\n\t\n\t.Form_module_fieldTypeSelector__d62303b4 {\n\t\tmax-width: none;\n\t}\n}\n\n.Form_module_grid__four__d62303b4 {\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.Form_module_grid__four__d62303b4 {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 2rem;\n\t}\n}\n\n/* Navigation styles */\n.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n/* Two button alignment - one left, one right */\n.Form_module_navigation__d62303b4> :first-child:not(:only-child) {\n\tmargin-right: auto;\n}\n\n.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\tmargin-left: auto;\n}\n\n/* Special case for overview step - align save button to right */\n.Form_module_overviewStep__d62303b4 .Form_module_navigation__d62303b4> :only-child {\n\tmargin-left: auto;\n\tmargin-right: 0;\n}\n\n.Form_module_previousButton__d62303b4 {\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.Form_module_previousButton__d62303b4:hover {\n\tbackground: #5a6268;\n}\n\n.Form_module_saveButton__d62303b4 {\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.Form_module_saveButton__d62303b4: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.Form_module_saveButton__d62303b4:focus {\n\toutline: 2px solid var(--colour-purple, #6e79c5);\n\toutline-offset: 2px;\n}\n\n.Form_module_saveButton__d62303b4:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n.Form_module_nextButton__d62303b4 {\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.Form_module_nextButton__d62303b4:hover:not(:disabled) {\n\ttransform: translateY(-2px);\n\tbox-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n.Form_module_nextButton__d62303b4:disabled {\n\tbackground: #6c757d;\n\tcursor: not-allowed;\n\topacity: 0.65;\n\ttransform: none;\n\tbox-shadow: none;\n}\n\n\n\n.Form_module_errorMessage__d62303b4 {\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.Form_module_layoutOption__d62303b4 {\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\topacity: 0.6;\n}\n\n.Form_module_layoutOption__d62303b4:hover {\n\topacity: 1;\n}\n\n.Form_module_layoutOptionImage__d62303b4 {\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.Form_module_layoutOption__d62303b4.Form_module_selected__d62303b4 .Form_module_layoutOptionImage__d62303b4 {\n\tborder-color: var(--colour-purple, #6e79c5);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.Form_module_layoutOption__d62303b4.Form_module_selected__d62303b4 {\n\topacity: 1;\n}\n\n.Form_module_layoutOptionImg__d62303b4 {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.Form_module_layoutOptionContent__d62303b4 {\n\tmax-width: 250px;\n\tmargin-bottom: 0.5rem;\n}\n\n.Form_module_layoutOptionTitle__d62303b4 {\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.Form_module_layoutOptionDescription__d62303b4 {\n\tfont-size: 1.2rem;\n\tmargin: 0;\n\tline-height: 1.3;\n\tcolor: #6c757d;\n}\n\n.Form_module_layoutOption__d62303b4.Form_module_hasError__d62303b4 .Form_module_layoutOptionImage__d62303b4 {\n\tborder-color: var(--colour-red, #dc3545);\n}\n\n/* Field error styles */\n.Form_module_fieldError__d62303b4 {\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.Form_module_errorIcon__d62303b4 {\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 Form_module_errorShake__d62303b4 {\n\t0%, 100% { transform: translateX(0); }\n\t25% { transform: translateX(-3px); }\n\t75% { transform: translateX(3px); }\n}\n\n@keyframes Form_module_errorPulse__d62303b4 {\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.Form_module_successMessage__d62303b4 {\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.Form_module_createMode__d62303b4 {\n\tcolor: var(--colour-purple, #6e79c5);\n}\n\n.Form_module_editMode__d62303b4 {\n\tcolor: var(--colour-branding-dark, #364196);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n\t.Form_module_content__d62303b4 {\n\t\tpadding: 1.5rem 0 2.5rem 0; /* Maintain proper padding on mobile */\n\t}\n\t\n\t.Form_module_section__d62303b4 {\n\t\tmargin-bottom: 1.5rem;\n\t}\n\t\n\t/* Mobile: vertical layout for field selector and button */\n\t.Form_module_addFieldSection__d62303b4 {\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.Form_module_addFieldSection__d62303b4 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.Form_module_addFieldButtonContainer__d62303b4 {\n\t\talign-items: stretch;\n\t\tjustify-content: stretch;\n\t\tmin-height: auto;\n\t}\n\t\n\t.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_navigation__d62303b4> :first-child:not(:only-child),\n\t.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_previousButton__d62303b4,\n\t.Form_module_nextButton__d62303b4,\n\t.Form_module_saveButton__d62303b4 {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t}\n}\n\n@media (max-width: 480px) {\n\t.Form_module_content__d62303b4 {\n\t\tpadding: 1rem 0 2rem 0; /* Still maintain padding on small screens */\n\t}\n\t\n\t.Form_module_section__d62303b4 {\n\t\tmargin-bottom: 1rem;\n\t}\n\t\n\t.Form_module_navigation__d62303b4 {\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.Form_module_navigation__d62303b4> :only-child {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_navigation__d62303b4> :first-child:not(:only-child),\n\t.Form_module_navigation__d62303b4> :last-child:not(:only-child) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t\n\t.Form_module_errorMessageContainer__d62303b4 {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 0.75rem;\n\t}\n\t\n\t.Form_module_refreshButton__d62303b4 {\n\t\talign-self: flex-end;\n\t}\n}\n\n/* Full width content when sidebar is hidden */\n.hub-contentWrapper.fullWidthContent {\n\tmax-width: 1000px;\n\tmargin: 0 auto;\n\tpadding: 2rem;\n}\n\n.Form_module_hubContentWrapper_Col__d62303b4 {\n  flex-flow: column;\n}\n\n/* Validation error message - displayed at top of form */\n.Form_module_validationErrorMessage__d62303b4 {\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.Form_module_validationErrorMessage__d62303b4::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.Form_module_formHeader__d62303b4 {\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.Form_module_fieldsLoadingContainer__d62303b4 {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Help note styling */\n.Form_module_helpNote__d62303b4 {\n\tfont-size: 13px;\n\tcolor: #6c757d;\n}\n\n/* Loading container for overview */\n.Form_module_overviewLoadingContainer__d62303b4 {\n\ttext-align: center;\n\tpadding: 60px 20px;\n}\n\n/* Form layout header */\n.Form_module_formLayoutHeader__d62303b4 {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 16px;\n}\n\n/* Section margins */\n.Form_module_gridIconSection__d62303b4 {\n\tmargin-bottom: 3rem;\n}\n\n.Form_module_layoutSection__d62303b4 {\n\tmargin-bottom: 2rem;\n}\n\n/* Grid icon loading state */\n.Form_module_gridIconLoading__d62303b4 {\n\tgrid-column: 1 / -1;\n}\n\n/* Hide upload button in grid icon section */\n.Form_module_gridIconSection__d62303b4 .iconLoader__buttonOverlay button:first-child {\n\tdisplay: none !important;\n}\n";
+var modules_cd65a764 = {"content":"Form_module_content__d62303b4","pageWrapper":"Form_module_pageWrapper__d62303b4","formContainer":"Form_module_formContainer__d62303b4","section":"Form_module_section__d62303b4","section--no-border":"Form_module_section_NoBorder__d62303b4","subtitle":"Form_module_subtitle__d62303b4","sectionHeader":"Form_module_sectionHeader__d62303b4","addFieldButton":"Form_module_addFieldButton__d62303b4","refreshButton":"Form_module_refreshButton__d62303b4","errorMessageContainer":"Form_module_errorMessageContainer__d62303b4","addFieldContainer":"Form_module_addFieldContainer__d62303b4","fieldNumberContainer":"Form_module_fieldNumberContainer__d62303b4","addFieldSection":"Form_module_addFieldSection__d62303b4","helpSection":"Form_module_helpSection__d62303b4","helpTitle":"Form_module_helpTitle__d62303b4","helpText":"Form_module_helpText__d62303b4","fieldTypeCards":"Form_module_fieldTypeCards__d62303b4","fieldTypeCard":"Form_module_fieldTypeCard__d62303b4","fieldTypeCardIcon":"Form_module_fieldTypeCardIcon__d62303b4","fieldTypeCardContent":"Form_module_fieldTypeCardContent__d62303b4","fieldTypeCardTitle":"Form_module_fieldTypeCardTitle__d62303b4","fieldTypeCardDescription":"Form_module_fieldTypeCardDescription__d62303b4","fieldTypeCardUseCase":"Form_module_fieldTypeCardUseCase__d62303b4","addFieldButtonContainer":"Form_module_addFieldButtonContainer__d62303b4","emptyState":"Form_module_emptyState__d62303b4","emptyStateText":"Form_module_emptyStateText__d62303b4","fieldTypeSelector":"Form_module_fieldTypeSelector__d62303b4","grid__four":"Form_module_grid__four__d62303b4","navigation":"Form_module_navigation__d62303b4","overviewStep":"Form_module_overviewStep__d62303b4","previousButton":"Form_module_previousButton__d62303b4","saveButton":"Form_module_saveButton__d62303b4","nextButton":"Form_module_nextButton__d62303b4","errorMessage":"Form_module_errorMessage__d62303b4","layoutOption":"Form_module_layoutOption__d62303b4","layoutOptionImage":"Form_module_layoutOptionImage__d62303b4","selected":"Form_module_selected__d62303b4","layoutOptionImg":"Form_module_layoutOptionImg__d62303b4","layoutOptionContent":"Form_module_layoutOptionContent__d62303b4","layoutOptionTitle":"Form_module_layoutOptionTitle__d62303b4","layoutOptionDescription":"Form_module_layoutOptionDescription__d62303b4","hasError":"Form_module_hasError__d62303b4","fieldError":"Form_module_fieldError__d62303b4","errorIcon":"Form_module_errorIcon__d62303b4","successMessage":"Form_module_successMessage__d62303b4","createMode":"Form_module_createMode__d62303b4","editMode":"Form_module_editMode__d62303b4","hub-contentWrapper--col":"Form_module_hubContentWrapper_Col__d62303b4","validationErrorMessage":"Form_module_validationErrorMessage__d62303b4","formHeader":"Form_module_formHeader__d62303b4","fieldsLoadingContainer":"Form_module_fieldsLoadingContainer__d62303b4","helpNote":"Form_module_helpNote__d62303b4","overviewLoadingContainer":"Form_module_overviewLoadingContainer__d62303b4","formLayoutHeader":"Form_module_formLayoutHeader__d62303b4","gridIconSection":"Form_module_gridIconSection__d62303b4","layoutSection":"Form_module_layoutSection__d62303b4","gridIconLoading":"Form_module_gridIconLoading__d62303b4","errorShake":"Form_module_errorShake__d62303b4","errorPulse":"Form_module_errorPulse__d62303b4"};
+n(css$c,{});
 
 /*
  * Icon categories and definitions for the feature builder
@@ -3283,9 +3286,6 @@ const FormOverviewStepInner = props => {
 
       // Clear submission state after showing toast (only for non-edit cases)
       if (!isEditMode) {
-        const {
-          clearFormSubmissionState
-        } = require("../actions/formActions");
         dispatch(clearFormSubmissionState());
       }
     }
@@ -3979,8 +3979,9 @@ function fetchFeatureDefinitions() {
         dispatch(fetchFeaturesFailure(new Error("Unexpected response status: ".concat(response.status))));
       }
     } catch (err) {
+      var _err$response;
       // Check if it's a 404 (feature doesn't exist)
-      if (err.response && err.response.status === 404) {
+      if (((_err$response = err.response) === null || _err$response === void 0 ? void 0 : _err$response.status) === 404) {
         // 404: Feature doesn't exist → create mode
         dispatch(fetchFeaturesSuccess(null, "create"));
 
@@ -4636,8 +4637,7 @@ const FormLayoutStepInner = props => {
   // Use custom hook to handle definition loading
   const {
     definition,
-    definitionIsLoading,
-    reloadDefinition
+    definitionIsLoading
   } = useFeatureDefinitionLoader();
 
   // Get form initialization state
@@ -5249,7 +5249,7 @@ const undeleteListing = id => {
       const response = await listingActions.undelete(id, site);
       // If API returns the restored listing, use it; otherwise we'll need to refetch
       const restoredListing = response.data;
-      if (restoredListing && restoredListing.id) {
+      if (restoredListing !== null && restoredListing !== void 0 && restoredListing.id) {
         dispatch(undeleteListingSuccess(restoredListing));
       } else {
         // Trigger a refetch by dispatching the success with just ID, then fetch updated listings
@@ -5565,20 +5565,21 @@ const formReducer = function () {
   switch (type) {
     case actionsTypes.SET_INITIAL_VALUES:
       {
+        var _payload$featureDefin, _definitionWrapper$de;
         // The actual definition data is in payload.featureDefinition.definition
-        const definitionWrapper = payload && payload.featureDefinition ? payload.featureDefinition : payload;
-        const definition = definitionWrapper && definitionWrapper.definition ? definitionWrapper.definition : definitionWrapper;
+        const definitionWrapper = (_payload$featureDefin = payload === null || payload === void 0 ? void 0 : payload.featureDefinition) !== null && _payload$featureDefin !== void 0 ? _payload$featureDefin : payload;
+        const definition = (_definitionWrapper$de = definitionWrapper === null || definitionWrapper === void 0 ? void 0 : definitionWrapper.definition) !== null && _definitionWrapper$de !== void 0 ? _definitionWrapper$de : definitionWrapper;
 
         // Validate and map definition data to form state structure
         const mappedValues = {
-          title: definition && definition.title || "",
-          icon: definition && definition.icon || "star",
-          displayName: definition && definition.displayName || "",
-          layout: definition && definition.layout || {
+          title: (definition === null || definition === void 0 ? void 0 : definition.title) || "",
+          icon: (definition === null || definition === void 0 ? void 0 : definition.icon) || "star",
+          displayName: (definition === null || definition === void 0 ? void 0 : definition.displayName) || "",
+          layout: (definition === null || definition === void 0 ? void 0 : definition.layout) || {
             gridIcon: undefined,
             type: "round"
           },
-          fields: definition && Array.isArray(definition.fields) ? definition.fields : state.fields
+          fields: Array.isArray(definition === null || definition === void 0 ? void 0 : definition.fields) ? definition.fields : state.fields
         };
         const newState = _objectSpread$3(_objectSpread$3(_objectSpread$3({}, state), mappedValues), {}, {
           _isInitial: false
@@ -5783,14 +5784,15 @@ const definitionReducer = function () {
         let definitionId = values.featureId; // Always use hardcoded ID
 
         if (mode === "edit" && data) {
+          var _data$featureDefiniti, _featureDefinitionWra, _featureDefinitionWra2, _definition;
           // Extract from API response for edit mode
           // Handle nested structure: data.featureDefinition.definition
-          const featureDefinitionWrapper = data && data.featureDefinition ? data.featureDefinition : data;
-          definition = featureDefinitionWrapper && featureDefinitionWrapper.definition ? featureDefinitionWrapper.definition : featureDefinitionWrapper;
-          definitionId = featureDefinitionWrapper && featureDefinitionWrapper.id || values.featureId;
+          const featureDefinitionWrapper = (_data$featureDefiniti = data === null || data === void 0 ? void 0 : data.featureDefinition) !== null && _data$featureDefiniti !== void 0 ? _data$featureDefiniti : data;
+          definition = (_featureDefinitionWra = featureDefinitionWrapper === null || featureDefinitionWrapper === void 0 ? void 0 : featureDefinitionWrapper.definition) !== null && _featureDefinitionWra !== void 0 ? _featureDefinitionWra : featureDefinitionWrapper;
+          definitionId = (_featureDefinitionWra2 = featureDefinitionWrapper === null || featureDefinitionWrapper === void 0 ? void 0 : featureDefinitionWrapper.id) !== null && _featureDefinitionWra2 !== void 0 ? _featureDefinitionWra2 : values.featureId;
 
           // Ensure fields array exists and preserves order property
-          if (definition && definition.fields) {
+          if ((_definition = definition) !== null && _definition !== void 0 && _definition.fields) {
             // Create a new array to ensure we preserve all field properties including order
             definition.fields = definition.fields.map(field => _objectSpread$3(_objectSpread$3({}, field), {}, {
               // Ensure order property exists, fallback to array index if missing
@@ -5829,7 +5831,7 @@ const definitionReducer = function () {
           // Optimistically update with new definition
           mode: "edit" // Switch to edit mode immediately
         }),
-        id: payload && payload.id,
+        id: payload === null || payload === void 0 ? void 0 : payload.id,
         error: null
       });
     case FEATURE_EDIT_REQUEST: