@abgov/jsonforms-components 2.81.3 → 2.81.5

package/index.esm.js

@@ -14091,1301 +14091,1195 @@ const BackButton = ({
   });
 };
 
-const GoAInputBaseTableReview = props => {
-  var _uischema$options, _uischema$scope2, _jsonForms$core, _uischema$options4, _uischema$options5, _uischema$options6;
+var $$5 = _export;
+var flattenIntoArray = flattenIntoArray_1;
+var toObject$1 = toObject$d;
+var lengthOfArrayLike$1 = lengthOfArrayLike$d;
+var toIntegerOrInfinity = toIntegerOrInfinity$9;
+var arraySpeciesCreate = arraySpeciesCreate$3;
+
+// `Array.prototype.flat` method
+// https://tc39.es/ecma262/#sec-array.prototype.flat
+$$5({ target: 'Array', proto: true }, {
+  flat: function flat(/* depthArg = 1 */) {
+    var depthArg = arguments.length ? arguments[0] : undefined;
+    var O = toObject$1(this);
+    var sourceLen = lengthOfArrayLike$1(O);
+    var A = arraySpeciesCreate(O, 0);
+    A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
+    return A;
+  }
+});
+
+// this method was added to unscopables after implementation
+// in popular engines, so it's moved to a separate module
+var addToUnscopables = addToUnscopables$5;
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables('flat');
+
+let _$6 = t => t,
+  _t$7;
+const GoAContextMenuIcon = props => {
+  return jsx(GoabIconButton, {
+    icon: props.type,
+    onClick: props.onClick,
+    title: props.title,
+    testId: props.testId,
+    size: "small",
+    disabled: props.disabled
+  });
+};
+const GoAContextMenu = styled.div(_t$7 || (_t$7 = _$6`
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  gap: var(--goa-space-2xs);
+
+  > .goa-icon-button {
+    cursor: pointer;
+    border-radius: var(--goa-border-radius-m);
+    padding: var(--goa-space-2xs);
+  }
+  > .goa-icon-button + .goa-icon-button {
+    margin-left: var(--goa-space-none);
+  }
+`));
+
+const DeleteFileModal = ({
+  isOpen,
+  title,
+  content,
+  onDelete,
+  onCancel
+}) => {
+  return jsx(GoabModal, {
+    testId: "delete-confirmation",
+    open: isOpen,
+    heading: title,
+    maxWidth: "640px",
+    actions: jsxs(GoabButtonGroup, {
+      alignment: "end",
+      children: [jsx(GoabButton, {
+        type: "secondary",
+        testId: "delete-cancel",
+        onClick: onCancel,
+        children: "Cancel"
+      }), jsx(GoabButton, {
+        type: "primary",
+        variant: "destructive",
+        testId: "delete-confirm",
+        onClick: onDelete,
+        children: "Delete"
+      })]
+    }),
+    children: content
+  });
+};
+
+let _2 = t => t,
+  _t$6,
+  _t2$3,
+  _t3$2,
+  _t4$2;
+const _excluded$4 = ["data", "path", "handleChange", "uischema"];
+const FileUploaderReview = props => {
+  return FileUploader(Object.assign({}, props, {
+    isStepperReview: true
+  }));
+};
+const FileUploader = _ref => {
+  var _enumerators$function, _enumerators$function2, _enumerators$function3, _uischema$options, _uischema$options2, _uischema$options3, _uischema$options4, _props$schema, _uischema$options$com, _uischema$options5, _uischema$options6, _uischema$options$com2, _uischema$options7, _uischema$options$com3, _uischema$options8, _uischema$options9;
+  let {
+      data,
+      path,
+      handleChange,
+      uischema
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  const enumerators = useContext(JsonFormContext);
+  const uploadTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('upload-file');
+  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
+  const downloadTriggerFunction = enumerators == null || (_enumerators$function2 = enumerators.functions) == null ? void 0 : _enumerators$function2.get('download-file');
+  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
+  const deleteTriggerFunction = enumerators == null || (_enumerators$function3 = enumerators.functions) == null ? void 0 : _enumerators$function3.get('delete-file');
+  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
+  const fileListValue = enumerators == null ? void 0 : enumerators.data.get('file-list');
+  const [loadingFileName, setLoadingFileName] = useState(undefined);
+  const [uploadError, setUploadError] = useState(undefined);
+  const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
+  enumerators == null || enumerators.addFormContextData('countries', countries);
+  const user = enumerators == null ? void 0 : enumerators.getFormContextData('user');
+  // eslint-disable-next-line
+  const fileList = fileListValue && fileListValue();
   const {
-    data,
-    uischema,
-    label,
-    schema,
-    rootSchema,
-    path,
-    errors,
-    enabled,
-    cells,
     required,
+    label,
+    i18nKeyPrefix,
     visible
   } = props;
-  const reportChange = useReviewChange();
-  const {
-    noAnswerMessage
-  } = useStepperPageOptions();
-  const showChangeButtons = useShowChangeButtons();
-  const jsonForms = useJsonForms();
-  const reviewLabel = typeof ((_uischema$options = uischema.options) == null ? void 0 : _uischema$options.reviewLabel) === 'string' ? uischema.options.reviewLabel : '';
-  const propLabel = typeof label === 'string' ? label : '';
-  if (visible === false) {
-    return null;
-  }
-  let labelToUpdate = '';
-  if (reviewLabel.trim() !== '') {
-    labelToUpdate = reviewLabel;
-  } else if (typeof (schema == null ? void 0 : schema.title) === 'string' && schema.title.trim()) {
-    labelToUpdate = schema.title;
-  } else if (propLabel.trim() !== '') {
-    var _uischema$scope;
-    if ((_uischema$scope = uischema.scope) != null && _uischema$scope.startsWith('#/') && controlScopeMatchesLabel(uischema.scope, propLabel)) {
-      labelToUpdate = getLabelText(uischema.scope, propLabel);
-    } else {
-      labelToUpdate = propLabel;
+  const propertyId = i18nKeyPrefix;
+  const rootPath = typeof path === 'string' ? path.replace(/(\.\d+|\[\d+\])$/, '') : path;
+  const variant = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) || 'button';
+  const noDownloadButton = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.format) == null ? void 0 : _uischema$options2.noDownloadButton;
+  const noDownloadButtonInReview = uischema == null || (_uischema$options3 = uischema.options) == null || (_uischema$options3 = _uischema$options3.format) == null || (_uischema$options3 = _uischema$options3.review) == null ? void 0 : _uischema$options3.noDownloadButton;
+  const noDeleteButton = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.format) == null || (_uischema$options4 = _uischema$options4.review) == null ? void 0 : _uischema$options4.noDeleteButton;
+  const isArraySchema = (props == null || (_props$schema = props.schema) == null ? void 0 : _props$schema.type) === 'array' || Array.isArray(data);
+  const maxFiles = (_uischema$options$com = uischema == null || (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.componentProps) == null ? void 0 : _uischema$options5.maximum) != null ? _uischema$options$com : isArraySchema ? Number.MAX_SAFE_INTEGER : 1;
+  const isMultiFile = maxFiles > 1 || isArraySchema;
+  const metadataKey = path;
+  const [deleteHide, setDeleteHide] = useState(false);
+  const [deleteConfirmIndex, setDeleteConfirmIndex] = useState(null);
+  const pendingUploadIndexRef = useRef(null);
+  const uploadQueueRef = useRef(Promise.resolve());
+  const filesForDisplay = useMemo(() => {
+    if (!fileList) return [];
+    if (isMultiFile) {
+      const files = fileList[metadataKey] || fileList[rootPath] || fileList[propertyId] || [];
+      const dataUrns = Array.isArray(data) ? data : data ? [data] : [];
+      if (dataUrns.length > 0) {
+        const urnSet = new Set(dataUrns);
+        const scopedFiles = files.filter(f => urnSet.has(f.urn));
+        if (scopedFiles.length > 0) {
+          return scopedFiles.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+        }
+        const allFiles = Object.values(fileList).flat();
+        const filesByUrn = dataUrns.map(urn => allFiles.find(f => (f == null ? void 0 : f.urn) === urn)).filter(f => !!f);
+        if (filesByUrn.length > 0) {
+          return filesByUrn.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+        }
+      }
+      // Keep a stable list even if upstream metadata briefly duplicates entries.
+      return files.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
     }
-  } else if ((_uischema$scope2 = uischema.scope) != null && _uischema$scope2.startsWith('#/')) {
-    labelToUpdate = getGeneratedLabelFromScope(uischema.scope);
-  } else {
-    labelToUpdate = propLabel;
-  }
-  let reviewText = data;
-  const isBoolean = typeof data === 'boolean';
-  const getArrayDisplayValues = () => {
-    var _itemSchema$oneOf;
-    if (!Array.isArray(data)) {
-      return [];
+    return fileList[metadataKey] || fileList[propertyId] || [];
+  }, [fileList, isMultiFile, metadataKey, rootPath, propertyId, data]);
+  const fileListLength = filesForDisplay.length;
+  useEffect(() => {
+    // Clear pending upload index when rendered file list catches up.
+    pendingUploadIndexRef.current = null;
+  }, [fileListLength, metadataKey, rootPath]);
+  const getNextUploadIndex = () => {
+    const baseIndex = filesForDisplay.length;
+    if (pendingUploadIndexRef.current === null || pendingUploadIndexRef.current < baseIndex) {
+      pendingUploadIndexRef.current = baseIndex;
     }
-    const itemSchema = schema == null ? void 0 : schema.items;
-    const oneOf = (_itemSchema$oneOf = itemSchema == null ? void 0 : itemSchema.oneOf) != null ? _itemSchema$oneOf : [];
-    const titleByConst = new Map();
-    oneOf.forEach(option => {
-      var _option$title;
-      if (!(option != null && option.const)) return;
-      titleByConst.set(option.const, (_option$title = option.title) != null ? _option$title : option.const);
-    });
-    return data.map(value => {
-      const raw = typeof value === 'string' ? value : String(value);
-      return titleByConst.get(raw) || raw;
-    });
+    const nextIndex = pendingUploadIndexRef.current;
+    pendingUploadIndexRef.current += 1;
+    return nextIndex;
   };
-  if (isBoolean) {
-    var _uischema$options2, _uischema$options3;
-    let checkboxLabel = '';
-    if ((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.text) != null && _uischema$options2.trim()) {
-      checkboxLabel = uischema.options.text.trim();
-    } else if (uischema.scope && uischema.scope.startsWith('#/')) {
-      checkboxLabel = getGeneratedLabelFromScope(uischema.scope);
-    }
-    if (((_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.radio) === true) {
-      reviewText = data ? `Yes` : `No`;
-    } else {
-      if (label !== '' || typeof label === 'boolean') {
-        reviewText = data ? `Yes` : `No`;
-      } else {
-        reviewText = data ? `Yes (${checkboxLabel})` : `No (${checkboxLabel})`;
-      }
+  async function uploadFile(file, requestedIndex) {
+    if (!uploadTrigger) return;
+    const fileListLength = requestedIndex != null ? requestedIndex : isMultiFile ? getNextUploadIndex() : filesForDisplay.length;
+    // Single-file controls should allow selecting a new file to replace the current one.
+    if (isMultiFile && fileListLength >= maxFiles) {
+      setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
+      return;
     }
+    setUploadError(undefined);
+    setLoadingFileName(file == null ? void 0 : file.name);
+    await Promise.resolve(uploadTrigger(file, isMultiFile ? `${rootPath}.${fileListLength}` : path));
+    setDeleteHide(false);
   }
-  if (Array.isArray(data) && data.length > 0) {
-    const displayValues = getArrayDisplayValues();
-    reviewText = jsx("ul", {
-      style: {
-        margin: 0,
-        paddingLeft: '1.25rem'
-      },
-      children: displayValues.map((value, index) => jsx("li", {
-        children: value
-      }, `${value}-${index}`))
+  function queueUpload(file, requestedIndex) {
+    uploadQueueRef.current = uploadQueueRef.current.then(() => uploadFile(file, requestedIndex)).catch(() => {
+      // Keep queue alive after an individual upload failure.
     });
   }
-  // Helper to extract errors manually from global state, bypassing "touched" filter
-  const normalizePath = p => p.replace(/\[(\d+)\]/g, '.$1').replace(/\//g, '.').replace(/^\./, '');
-  const findMatchingError = currentErrors => {
-    if (!currentErrors) return undefined;
-    const normalizedPropPath = normalizePath(path || '');
-    for (const e of currentErrors) {
-      var _e$params2;
-      const errorPath = normalizePath(e.dataPath || e.instancePath || '');
-      if (errorPath === normalizedPropPath) {
-        return e;
-      }
-      if (e.keyword === 'required') {
-        var _e$params;
-        const missing = (_e$params = e.params) == null ? void 0 : _e$params.missingProperty;
-        if (missing) {
-          const missingPath = errorPath ? `${errorPath}.${missing}` : missing;
-          if (missingPath === normalizedPropPath) {
-            return e;
-          }
-        }
-      }
-      if (e.keyword === 'errorMessage' && (_e$params2 = e.params) != null && _e$params2.errors) {
-        const nested = findMatchingError(e.params.errors);
-        if (nested) return nested;
-      }
-    }
-    return undefined;
-  };
-  const matchedError = findMatchingError((_jsonForms$core = jsonForms.core) == null ? void 0 : _jsonForms$core.errors);
-  let activeError;
-  if (matchedError) {
-    try {
-      if (matchedError.keyword === 'errorMessage' && matchedError.message) {
-        activeError = matchedError.message;
-      } else if (matchedError.keyword === 'minItems') {
-        var _schema$errorMessage;
-        const minItemsError = (_schema$errorMessage = schema.errorMessage) == null ? void 0 : _schema$errorMessage.minItems;
-        activeError = minItemsError || humanizeAjvError(matchedError, schema, uischema);
-      } else {
-        activeError = humanizeAjvError(matchedError, rootSchema != null ? rootSchema : schema, uischema);
-      }
-    } catch (_unused) {
-      var _matchedError$params;
-      // Fallback: try to extract missing property name and create a friendly message
-      if (matchedError.keyword === 'required' && (_matchedError$params = matchedError.params) != null && _matchedError$params.missingProperty) {
-        const missing = matchedError.params.missingProperty;
-        const missingPropertyLabel = convertToReadableFormat(missing);
-        activeError = `${missingPropertyLabel} is required`;
-      } else if (matchedError.keyword === 'minItems') {
-        var _schema$errorMessage2;
-        activeError = (_schema$errorMessage2 = schema.errorMessage) == null ? void 0 : _schema$errorMessage2.minItems;
-      } else {
-        var _matchedError$message;
-        const propertyMatch = (_matchedError$message = matchedError.message) == null ? void 0 : _matchedError$message.match(/'([^']+)'/);
-        if (propertyMatch && propertyMatch[1]) {
-          const missingPropertyLabel = convertToReadableFormat(propertyMatch[1]);
-          activeError = `${missingPropertyLabel} is required`;
-        } else {
-          activeError = matchedError.message;
-        }
-      }
+  function downloadFile(file) {
+    if (downloadTrigger && file) {
+      downloadTrigger(file, propertyId);
     }
   }
-  if (!activeError && typeof errors === 'string' && errors.trim() !== '') {
-    activeError = errors;
-  }
-  // A required field with no user-entered value should always show the required error, even when
-  // another AJV rule (e.g. minLength) also fires against the empty value — required takes priority
-  // over any other validation message. isNilOrEmptyValue deliberately doesn't treat boolean `false`
-  // as empty, so an unchecked required checkbox still falls through to the boolean-specific handling
-  // below instead of being clobbered here.
-  if (required && isNilOrEmptyValue(data, true)) {
-    // clean-code-ignore: 2.18
-    activeError = `${labelToUpdate} is required`;
-  }
-  const isRegisterBackedEnumFalsePositive = (uischema == null || (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.register) !== undefined && !isNilOrEmptyValue(data, true) && typeof activeError === 'string' && activeError.toLowerCase().includes('must be equal to one of the allowed values');
-  if (isRegisterBackedEnumFalsePositive) {
-    activeError = undefined;
-  }
-  if (activeError && /\sis required$/i.test(activeError)) {
-    activeError = `${labelToUpdate} is required`;
+  function deleteFile(file) {
+    if (deleteTrigger && file) {
+      deleteTrigger(file, propertyId);
+    }
   }
-  // For required boolean fields (e.g. anyOf: [{enum: [true]}]), suppress the raw AJV
-  // "must be equal to one of the allowed values" error and show a friendly message instead.
-  if ((schema == null ? void 0 : schema.type) === 'boolean' && activeError && activeError.toLowerCase().includes('must be equal')) {
-    activeError = data === false ? `${labelToUpdate} is required` : undefined;
+  function getFileName(index) {
+    var _getFile;
+    return (_getFile = getFile(index)) == null ? void 0 : _getFile.filename;
   }
-  // If a required checkbox is unchecked, show only the validation message in
-  // review mode (not a contradictory "No (...)" value line).
-  let isBooleanRequiredError = false;
-  if ((schema == null ? void 0 : schema.type) === 'boolean' && data === false && activeError && /\sis required$/i.test(activeError)) {
-    reviewText = '';
-    isBooleanRequiredError = true;
+  function getFile(index) {
+    return filesForDisplay == null ? void 0 : filesForDisplay[index];
   }
-  const stepId = (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.stepId;
-  function handleChangeClick() {
-    reportChange(stepId, uischema.scope);
+  useEffect(() => {
+    if (loadingFileName !== undefined) {
+      setLoadingFileName(undefined);
+    }
+    const delayedFunction = () => {
+      if (!fileList) return;
+      const filesForControl = filesForDisplay || [];
+      const hasFileListEntryForPath = Object.prototype.hasOwnProperty.call(fileList, metadataKey) || Object.prototype.hasOwnProperty.call(fileList, rootPath) || !isMultiFile && Object.prototype.hasOwnProperty.call(fileList, propertyId);
+      const urns = filesForControl.map(f => f.urn);
+      if (urns.length === 0) {
+        if (hasFileListEntryForPath && data !== undefined && data !== null && data !== '') {
+          handleChange(isMultiFile ? rootPath : path, undefined);
+        }
+      } else if (isMultiFile) {
+        handleChange(rootPath, urns);
+      } else {
+        // Single-file replacement appends metadata; keep the latest selection as the current value.
+        handleChange(path, urns[urns.length - 1]);
+      }
+    };
+    const timeoutId = setTimeout(delayedFunction, 1);
+    return () => clearTimeout(timeoutId);
+  }, [data, fileList, filesForDisplay, rootPath, path, propertyId, metadataKey, isMultiFile, handleChange, loadingFileName]);
+  const readOnly = (uischema == null || (_uischema$options6 = uischema.options) == null || (_uischema$options6 = _uischema$options6.componentProps) == null ? void 0 : _uischema$options6.readOnly) === true || (props == null ? void 0 : props.isStepperReview) === true || user === null;
+  const maxFileSize = (_uischema$options$com2 = uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.maxFileSize) != null ? _uischema$options$com2 : '';
+  const accept = (_uischema$options$com3 = uischema == null || (_uischema$options8 = uischema.options) == null || (_uischema$options8 = _uischema$options8.componentProps) == null ? void 0 : _uischema$options8.accept) != null ? _uischema$options$com3 : '';
+  if (!enumerators) {
+    //eslint-disable-next-line
+    return jsx(Fragment, {});
   }
-  const showInlineValue = reviewText === null || reviewText === undefined || typeof reviewText === 'string' || typeof reviewText === 'number' || /*#__PURE__*/React.isValidElement(reviewText) || Array.isArray(reviewText) && reviewText.length === 0;
-  const isValueEmpty = !isBooleanRequiredError && (reviewText === null || reviewText === undefined || reviewText === '' || Array.isArray(reviewText) && reviewText.length === 0);
-  return jsx("tr", {
-    "data-testid": `input-base-table-${label}-row`,
-    children: jsxs(PageReviewContainer, {
-      colSpan: 3,
-      children: [jsxs(ReviewHeader, {
-        children: [jsxs(ReviewLabel, {
-          children: [labelToUpdate, required && jsx(RequiredTextLabel, {
-            children: " (required)"
-          })]
-        }), showChangeButtons && stepId !== undefined && !((_uischema$options6 = uischema.options) != null && (_uischema$options6 = _uischema$options6.componentProps) != null && _uischema$options6.readOnly) && jsx(BackButton, {
-          text: "Change",
-          link: handleChangeClick,
-          showBackIcon: false
+  const helpText = uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.help;
+  const sentenceCaseLabel = label;
+  const renderFileItem = index => {
+    var _getFile2;
+    const showFileDeleteConfirmation = deleteConfirmIndex === index;
+    return jsx("div", {
+      children: readOnly ? jsxs(AttachmentBorderDisabled, {
+        children: [getFileName(index), noDownloadButtonInReview !== true && jsx(GoAContextMenuIcon, {
+          testId: "download-icon",
+          title: "Download",
+          type: "download",
+          onClick: () => downloadFile(getFile(index))
         })]
-      }), jsxs(ReviewValue, {
-        children: [showInlineValue ? jsx("div", {
-          "data-testid": `review-value-${label}`,
-          children: isValueEmpty ? jsx(NoneGivenText, {
-            children: noAnswerMessage
-          }) : reviewText != null ? reviewText : ''
-        }) : jsx(JsonFormsDispatch, {
-          "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
-          schema: schema,
-          uischema: uischema,
-          enabled: enabled,
-          renderers: jsonForms.renderers,
-          cells: cells
-        }), activeError && jsx(GoabFormItem, {
-          error: activeError,
-          label: ""
+      }) : jsxs(AttachmentBorder, {
+        children: [jsx("div", {
+          children: getFileName(index)
+        }), jsxs(GoAContextMenu, {
+          children: [noDownloadButton !== true && jsx(GoAContextMenuIcon, {
+            testId: "download-icon",
+            title: "Download",
+            type: "download",
+            onClick: () => downloadFile(getFile(index))
+          }), noDeleteButton !== true && jsx(GoAContextMenuIcon, {
+            "data-testid": "delete-icon",
+            title: "Delete",
+            type: "trash",
+            onClick: () => {
+              setDeleteConfirmIndex(index);
+            }
+          })]
+        }), jsx(DeleteFileModal, {
+          isOpen: showFileDeleteConfirmation,
+          title: "Delete file",
+          content: `Delete file ${(_getFile2 = getFile(index)) == null ? void 0 : _getFile2.filename} ?`,
+          onCancel: () => setDeleteConfirmIndex(null),
+          onDelete: () => {
+            setDeleteConfirmIndex(null);
+            deleteFile(getFile(index));
+            if (!isMultiFile) {
+              setDeleteHide(true);
+            }
+            setUploadError(undefined);
+          }
         })]
-      })]
-    })
-  });
-};
-const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
-
-const defaultLabel = 'Email address';
-const GoAEmailInput = props => {
-  var _uischema$options$com, _uischema$options, _uischema$options$com2, _uischema$options2, _stepperState$categor;
-  const {
-    data,
-    config,
-    id,
-    enabled,
-    visible,
-    uischema,
-    errors,
-    schema,
-    required,
-    label,
-    handleChange
-  } = props;
-  const defaultSchema = schema;
-  const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
-  const readOnly = (_uischema$options$com = uischema == null || (_uischema$options = uischema.options) == null || (_uischema$options = _uischema$options.componentProps) == null ? void 0 : _uischema$options.readOnly) != null ? _uischema$options$com : false;
-  const width = (_uischema$options$com2 = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.componentProps) == null ? void 0 : _uischema$options2.width) != null ? _uischema$options$com2 : '100%';
-  const formStepperCtx = useContext(JsonFormsStepperContext);
-  const stepperState = formStepperCtx == null || formStepperCtx.selectStepperState == null ? void 0 : formStepperCtx.selectStepperState();
-  const currentCategory = stepperState == null || (_stepperState$categor = stepperState.categories) == null ? void 0 : _stepperState$categor[stepperState == null ? void 0 : stepperState.activeId];
-  const showReviewLink = currentCategory == null ? void 0 : currentCategory.showReviewPageLink;
-  const [localValue, setLocalValue] = useState(data);
-  const debouncedValue = useDebounce(localValue, 300);
-  useEffect(() => {
-    if (data === undefined || data === null) {
-      return;
-    }
-    setLocalValue(data);
-  }, [data]);
-  /* istanbul ignore next */
-  useEffect(() => {
-    if (debouncedValue === data) return;
-    // Only sync if debouncedValue differs from data and is not initial empty state
-    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
-      onChangeForInputControl({
-        value: debouncedValue,
-        controlProps: props
-      });
-    }
-  }, [debouncedValue]);
-  const [isVisited, setIsVisited] = useState(false);
-  useEffect(() => {
-    if (showReviewLink === true) {
-      setIsVisited(true);
-    }
-  }, [showReviewLink]);
-  const splitErrors = (errors != null ? errors : '').split(/\r?\n/).map(e => e.trim()).filter(Boolean);
-  const primaryLabel = (defaultSchema == null ? void 0 : defaultSchema.label) || defaultLabel;
-  const splintIndex = splitErrors.findIndex(e => e === REQUIRED_PROPERTY_ERROR);
-  splitErrors[splintIndex] = `${primaryLabel} is required`;
-  const finalErrors = splitErrors.join('\n');
-  useEffect(() => {
-    if (typeof handleChange === 'function' && (schema == null ? void 0 : schema.default) !== undefined && data === undefined) {
-      handleChange(props.path, schema.default);
-      setLocalValue(schema.default);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.default, data]);
+      })
+    });
+  };
   return jsx(Visible, {
     "$visible": visible,
-    children: jsx(JsonFormRegisterProvider, {
-      defaultRegisters: undefined,
-      children: jsx(FormFieldWrapper$1, {
-        children: jsx(GoabFormItem, {
-          error: isVisited && finalErrors,
-          testId: "form-email-input-wrapper",
-          requirement: required ? 'required' : undefined,
-          label: primaryLabel,
-          children: jsx(GoabInput, {
-            error: isVisited && finalErrors.length > 0,
-            type: 'email',
-            width: width,
-            name: "Email address",
-            value: data,
-            testId: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-            disabled: !enabled,
-            readonly: readOnly,
-            onChange: detail => {
-              if (!isVisited) {
-                setIsVisited(true);
-              }
-              setLocalValue(detail.value);
-            },
-            onBlur: detail => {
-              if (!isVisited) {
-                setIsVisited(true);
+    children: jsxs(FileUploaderStyle, {
+      className: "FileUploader",
+      children: [jsx(GoabFormItem, {
+        label: sentenceCaseLabel,
+        requirement: required ? 'required' : undefined,
+        error: uploadError
+      }), !readOnly && jsx("div", {
+        className: "file-upload",
+        children: jsx(GoabFileUploadInput, {
+          variant: variant,
+          onSelectFile: detail => {
+            var _detail$files;
+            const selectedFiles = detail != null && (_detail$files = detail.files) != null && _detail$files.length ? detail.files : detail != null && detail.file ? [detail.file] : [];
+            if (selectedFiles.length === 0) {
+              return;
+            }
+            if (isMultiFile) {
+              for (const selectedFile of selectedFiles) {
+                const nextIndex = getNextUploadIndex();
+                if (nextIndex >= maxFiles) {
+                  setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
+                  break;
+                }
+                queueUpload(selectedFile, nextIndex);
               }
-              onBlurForTextControl({
-                name: detail.name,
-                value: detail.value,
-                controlProps: props
-              });
+            } else {
+              queueUpload(selectedFiles[0]);
             }
+          },
+          maxFileSize: maxFileSize,
+          accept: accept
+        })
+      }), helpText && jsx(HelpText, {
+        children: helpText
+      }), jsx("div", {
+        children: loadingFileName !== undefined ? jsx(GoabModal, {
+          open: loadingFileName !== undefined,
+          children: jsx("div", {
+            className: "align-center",
+            children: jsx(GoabCircularProgress, {
+              visible: true,
+              message: `Uploading ${loadingFileName}`,
+              size: "large"
+            })
           })
+        }) : jsx("div", {
+          children: (fileList && isMultiFile ? filesForDisplay.map((_, i) => i) : !deleteHide && getFile(fileListLength - 1) && fileListLength >= 0 ? [fileListLength - 1] : []).map(index => jsx(React.Fragment, {
+            children: renderFileItem(index)
+          }, index))
         })
-      })
+      })]
     })
   });
 };
-const GoAEmailControl = props => jsx(GoAEmailInput, Object.assign({}, props));
-const GoAEmailControlTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('email')));
-const GoAInputEmailControl = withJsonFormsControlProps(GoAEmailControl);
+const HelpText = styled.div(_t$6 || (_t$6 = _2`
+  margin-top: var(--goa-space-xs);
+  font-size: var(--goa-font-size-3);
+  color: var(--goa-color-text-secondary);
+`));
+const AttachmentBorderDisabled = styled.div(_t2$3 || (_t2$3 = _2`
+  display: flex;
+  flex-direction: row;
+  border: var(--goa-border-width-s) solid #dcdcdc;
+  border-radius: var(--goa-border-radius-m);
+  padding: var(--goa-space-xs);
+  width: fit-content;
+  background-color: #f1f1f1;
+`));
+const AttachmentBorder = styled.div(_t3$2 || (_t3$2 = _2`
+  display: flex;
+  flex-direction: row;
+  border: var(--goa-border-width-s) solid #dcdcdc;
+  border-radius: var(--goa-border-radius-m);
+  padding: var(--goa-space-xs);
+  width: fit-content;
+  margin-top: var(--goa-space-2xs);
+`));
+const FileUploaderStyle = styled.div(_t4$2 || (_t4$2 = _2`
+  margin-bottom: var(--goa-space-l);
+  .label {
+    display: block;
+    font-weight: var(--goa-font-weight-bold);
+    color: var(--goa-color-text-default);
+    font-size: var(--goa-font-size-4);
+    padding: 0 0 var(--goa-space-xs) 0;
+  }
 
-let _$6 = t => t,
-  _t$7;
-const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
-  return elements.map((child, index) => jsx(JsonFormsDispatch, {
-    uischema: child,
-    schema: schema,
-    path: path,
-    enabled: enabled,
-    renderers: renderers,
-    cells: cells
-  }, `review-${path}_${index}`));
-};
-const withAjvProps = Component => function WithAjvProps(props) {
-  const ctx = useJsonForms();
-  const ajv = getAjv({
-    jsonforms: Object.assign({}, ctx)
-  });
-  return jsx(Component, Object.assign({}, props, {
-    ajv: ajv
-  }));
-};
-const LayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible,
-  width
-}) => {
-  if (isEmpty$1(elements)) {
-    return null;
-  } else {
-    if (direction === 'row') {
-      return jsx(Visible, {
-        "$visible": visible,
-        children: jsx(GoabGrid$1, {
-          minChildWidth: width || '10ch',
-          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-        })
-      });
-    } else {
-      return jsx(Visible, {
-        "$visible": visible,
-        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-      });
-    }
+  .align-center {
+    text-align-last: center;
+  }
+
+  .file-upload {
+    margin-bottom: var(--goa-space-xs);
   }
+`));
+
+const isFileUrnSchema = schema => {
+  if ((schema == null ? void 0 : schema.format) === 'file-urn') return true;
+  const items = schema == null ? void 0 : schema.items;
+  return (schema == null ? void 0 : schema.type) === 'array' && !Array.isArray(items) && (items == null ? void 0 : items.format) === 'file-urn';
 };
-const ReviewLayoutRenderer = ({
-  elements,
-  schema,
-  path,
-  enabled,
-  direction,
-  renderers,
-  cells,
-  visible,
-  width
-}) => {
-  if (isEmpty$1(elements)) {
+const GoAInputBaseTableReview = props => {
+  var _uischema$options, _uischema$scope2, _jsonForms$core, _uischema$options4, _uischema$options5, _uischema$options6;
+  const {
+    data,
+    uischema,
+    label,
+    schema,
+    rootSchema,
+    path,
+    errors,
+    enabled,
+    cells,
+    required,
+    visible
+  } = props;
+  const reportChange = useReviewChange();
+  const {
+    noAnswerMessage
+  } = useStepperPageOptions();
+  const showChangeButtons = useShowChangeButtons();
+  const jsonForms = useJsonForms();
+  const reviewLabel = typeof ((_uischema$options = uischema.options) == null ? void 0 : _uischema$options.reviewLabel) === 'string' ? uischema.options.reviewLabel : '';
+  const propLabel = typeof label === 'string' ? label : '';
+  if (visible === false) {
     return null;
-  } else {
-    if (direction === 'row') {
-      return jsx(Visible, {
-        "$visible": visible,
-        children: jsx(ReviewGrid, {
-          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-        })
-      });
+  }
+  let labelToUpdate = '';
+  if (reviewLabel.trim() !== '') {
+    labelToUpdate = reviewLabel;
+  } else if (typeof (schema == null ? void 0 : schema.title) === 'string' && schema.title.trim()) {
+    labelToUpdate = schema.title;
+  } else if (propLabel.trim() !== '') {
+    var _uischema$scope;
+    if ((_uischema$scope = uischema.scope) != null && _uischema$scope.startsWith('#/') && controlScopeMatchesLabel(uischema.scope, propLabel)) {
+      labelToUpdate = getLabelText(uischema.scope, propLabel);
     } else {
-      return jsx(Visible, {
-        "$visible": visible,
-        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
-      });
+      labelToUpdate = propLabel;
     }
+  } else if ((_uischema$scope2 = uischema.scope) != null && _uischema$scope2.startsWith('#/')) {
+    labelToUpdate = getGeneratedLabelFromScope(uischema.scope);
+  } else {
+    labelToUpdate = propLabel;
   }
-};
-const ReviewGrid = styled.div(_t$7 || (_t$7 = _$6`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
-  gap: 16px;
-`));
-
-let _$5 = t => t,
-  _t$6,
-  _t2$3,
-  _t3$2,
-  _t4$2,
-  _t5$1,
-  _t6$1,
-  _t7,
-  _t8,
-  _t9,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29;
-const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
-  display: flex;
-  flex-direction: column;
-`));
-const CompletionStatus = styled.div(_t2$3 || (_t2$3 = _$5`
-  padding: 0;
-  margin: 0;
-  padding-top: var(--goa-space-xl);
-
-  display: flex;
-  flex-direction: column;
-`));
-const BarTop = styled.div(_t3$2 || (_t3$2 = _$5`
-  display: flex;
-
-  .progress-text {
-    margin-left: auto;
+  let reviewText = data;
+  const isBoolean = typeof data === 'boolean';
+  const getArrayDisplayValues = () => {
+    var _itemSchema$oneOf;
+    if (!Array.isArray(data)) {
+      return [];
+    }
+    const itemSchema = schema == null ? void 0 : schema.items;
+    const oneOf = (_itemSchema$oneOf = itemSchema == null ? void 0 : itemSchema.oneOf) != null ? _itemSchema$oneOf : [];
+    const titleByConst = new Map();
+    oneOf.forEach(option => {
+      var _option$title;
+      if (!(option != null && option.const)) return;
+      titleByConst.set(option.const, (_option$title = option.title) != null ? _option$title : option.const);
+    });
+    return data.map(value => {
+      const raw = typeof value === 'string' ? value : String(value);
+      return titleByConst.get(raw) || raw;
+    });
+  };
+  if (isBoolean) {
+    var _uischema$options2, _uischema$options3;
+    let checkboxLabel = '';
+    if ((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.text) != null && _uischema$options2.trim()) {
+      checkboxLabel = uischema.options.text.trim();
+    } else if (uischema.scope && uischema.scope.startsWith('#/')) {
+      checkboxLabel = getGeneratedLabelFromScope(uischema.scope);
+    }
+    if (((_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.radio) === true) {
+      reviewText = data ? `Yes` : `No`;
+    } else {
+      if (label !== '' || typeof label === 'boolean') {
+        reviewText = data ? `Yes` : `No`;
+      } else {
+        reviewText = data ? `Yes (${checkboxLabel})` : `No (${checkboxLabel})`;
+      }
+    }
   }
-`));
-const Bar = styled.div(_t4$2 || (_t4$2 = _$5`
-  display: flex;
-  flex-direction: row;
-
-  .progress-container {
-    align-items: flex-start;
-    width: 100%;
-
-    height: 4px;
-    background-color: #e0e0e0;
-    border-radius: 4;
-    overflow: hidden;
-    position: relative;
-    border: 1px solid #ccc;
-    margin-bottom: 20px;
+  if (Array.isArray(data) && data.length > 0) {
+    const displayValues = getArrayDisplayValues();
+    reviewText = jsx("ul", {
+      style: {
+        margin: 0,
+        paddingLeft: '1.25rem'
+      },
+      children: displayValues.map((value, index) => jsx("li", {
+        children: value
+      }, `${value}-${index}`))
+    });
   }
-
-  .progress-bar {
-    width: 60%;
-    height: 100%;
-    background-color: #004abf;
-    border-radius: 4;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    box-sizing: border-box;
+  // Helper to extract errors manually from global state, bypassing "touched" filter
+  const normalizePath = p => p.replace(/\[(\d+)\]/g, '.$1').replace(/\//g, '.').replace(/^\./, '');
+  const findMatchingError = currentErrors => {
+    if (!currentErrors) return undefined;
+    const normalizedPropPath = normalizePath(path || '');
+    for (const e of currentErrors) {
+      var _e$params2;
+      const errorPath = normalizePath(e.dataPath || e.instancePath || '');
+      if (errorPath === normalizedPropPath) {
+        return e;
+      }
+      if (e.keyword === 'required') {
+        var _e$params;
+        const missing = (_e$params = e.params) == null ? void 0 : _e$params.missingProperty;
+        if (missing) {
+          const missingPath = errorPath ? `${errorPath}.${missing}` : missing;
+          if (missingPath === normalizedPropPath) {
+            return e;
+          }
+        }
+      }
+      if (e.keyword === 'errorMessage' && (_e$params2 = e.params) != null && _e$params2.errors) {
+        const nested = findMatchingError(e.params.errors);
+        if (nested) return nested;
+      }
+    }
+    return undefined;
+  };
+  const matchedError = findMatchingError((_jsonForms$core = jsonForms.core) == null ? void 0 : _jsonForms$core.errors);
+  let activeError;
+  if (matchedError) {
+    try {
+      if (matchedError.keyword === 'errorMessage' && matchedError.message) {
+        activeError = matchedError.message;
+      } else if (matchedError.keyword === 'minItems') {
+        var _schema$errorMessage;
+        const minItemsError = (_schema$errorMessage = schema.errorMessage) == null ? void 0 : _schema$errorMessage.minItems;
+        activeError = minItemsError || humanizeAjvError(matchedError, schema, uischema);
+      } else {
+        activeError = humanizeAjvError(matchedError, rootSchema != null ? rootSchema : schema, uischema);
+      }
+    } catch (_unused) {
+      var _matchedError$params;
+      // Fallback: try to extract missing property name and create a friendly message
+      if (matchedError.keyword === 'required' && (_matchedError$params = matchedError.params) != null && _matchedError$params.missingProperty) {
+        const missing = matchedError.params.missingProperty;
+        const missingPropertyLabel = convertToReadableFormat(missing);
+        activeError = `${missingPropertyLabel} is required`;
+      } else if (matchedError.keyword === 'minItems') {
+        var _schema$errorMessage2;
+        activeError = (_schema$errorMessage2 = schema.errorMessage) == null ? void 0 : _schema$errorMessage2.minItems;
+      } else {
+        var _matchedError$message;
+        const propertyMatch = (_matchedError$message = matchedError.message) == null ? void 0 : _matchedError$message.match(/'([^']+)'/);
+        if (propertyMatch && propertyMatch[1]) {
+          const missingPropertyLabel = convertToReadableFormat(propertyMatch[1]);
+          activeError = `${missingPropertyLabel} is required`;
+        } else {
+          activeError = matchedError.message;
+        }
+      }
+    }
   }
-`));
-styled.div(_t5$1 || (_t5$1 = _$5``));
-const BadgeWrapper = styled.div(_t6$1 || (_t6$1 = _$5`
-  margin-left: 10px;
-  margin-top: 7px;
-`));
-const CompletionTextHeader = styled.h3(_t7 || (_t7 = _$5`
-  display: flex;
-`));
-const ReviewItemSection = styled.div(_t8 || (_t8 = _$5`
-  margin-bottom: var(--goa-space-m);
-  padding: var(--goa-space-xl) var(--goa-space-2xl);
-  border: 1px solid var(--goa-color-greyscale-300);
-  border-radius: var(--goa-border-radius-xl);
-
-  .element-style {
-    max-width: 1600px;
+  if (!activeError && typeof errors === 'string' && errors.trim() !== '') {
+    activeError = errors;
   }
-
-  @media (max-width: 639px) {
-    padding: var(--goa-space-l) var(--goa-space-m);
+  // A required field with no user-entered value should always show the required error, even when
+  // another AJV rule (e.g. minLength) also fires against the empty value — required takes priority
+  // over any other validation message. isNilOrEmptyValue deliberately doesn't treat boolean `false`
+  // as empty, so an unchecked required checkbox still falls through to the boolean-specific handling
+  // below instead of being clobbered here.
+  if (required && isNilOrEmptyValue(data, true)) {
+    // clean-code-ignore: 2.18
+    activeError = `${labelToUpdate} is required`;
   }
-`));
-const ReviewSectionTitle = styled.h3(_t9 || (_t9 = _$5`
-  margin-bottom: var(--goa-space-m);
-  overflow-wrap: anywhere;
-`));
-const ReviewItemHeader = styled.div(_t0 || (_t0 = _$5`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--goa-space-xl);
-`));
-const ReviewItemTitle = styled.div(_t1 || (_t1 = _$5`
-  font-size: var(--goa-space-l);
-  line-height: var(--goa-space-xl);
-  font-weight: 300;
-`));
-styled.div(_t10 || (_t10 = _$5`
-  color: #0070c4;
-  text-decoration: underline;
-  outline: none;
-  cursor: pointer;
-
-  &:focus {
-    outline: 2px solid #0070c4;
-    background-color: #e6f7ff;
+  const isRegisterBackedEnumFalsePositive = (uischema == null || (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.register) !== undefined && !isNilOrEmptyValue(data, true) && typeof activeError === 'string' && activeError.toLowerCase().includes('must be equal to one of the allowed values');
+  if (isRegisterBackedEnumFalsePositive) {
+    activeError = undefined;
   }
-`));
-styled.div(_t11 || (_t11 = _$5`
-  margin-left: var(--goa-space-m);
-`));
-styled.div(_t12 || (_t12 = _$5`
-  margin-bottom: var(--goa-space-m);
-`));
-styled.div(_t13 || (_t13 = _$5`
-  margin: var(--goa-space-s);
-  width: 100%;
-`));
-styled.h3(_t14 || (_t14 = _$5`
-  text-transform: capitalize;
-`));
-const RightAlignmentDiv = styled.div(_t15 || (_t15 = _$5`
-  @media screen and (max-width: 767px) {
-    margin-bottom: var(--goa-space-l);
+  if (activeError && /\sis required$/i.test(activeError)) {
+    activeError = `${labelToUpdate} is required`;
   }
-  @media screen and (min-width: 768px) {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: var(--goa-space-l);
-  }
-`));
-const FormStepperSummaryH3 = styled.h3(_t16 || (_t16 = _$5`
-  flex: 1;
-  max-width: 100%;
-  margin-bottom: var(--goa-space-m);
-  font-size: var(--goa-font-size-7);
-  line-height: var(--goa-line-height-4);
-  font-weight: var(--goa-font-weight-bold);
-  overflow-wrap: anywhere;
-`));
-const PageRenderPadding = styled.div(_t17 || (_t17 = _$5`
-  margin-top: var(--goa-space-2xl);
-`));
-styled.div(_t18 || (_t18 = _$5`
-  margin-bottom: var(--goa-space-2xl);
-`));
-const PageBorder = styled.div(_t19 || (_t19 = _$5`
-  padding: var(--goa-space-m) var(--goa-space-3xl);
-
-  @media (max-width: 639px) {
-    padding: var(--goa-space-m) var(--goa-space-xs);
-  }
-`));
-styled.div(_t20 || (_t20 = _$5`
-  .element-style {
-    max-width: 1600px;
-  }
-`));
-styled.div(_t21 || (_t21 = _$5`
-  padding: var(--goa-space-xl) var(--goa-space-2xl);
-  border: 1px solid var(--goa-color-greyscale-300);
-  border-radius: var(--goa-border-radius-xl);
-`));
-styled.div(_t22 || (_t22 = _$5`
-  margin-top: var(--goa-space-xl);
-  display: flex;
-  justify-content: space-between;
-`));
-styled.h3(_t23 || (_t23 = _$5`
-  color: var(--goa-color-text-secondary) !important;
-  margin-bottom: var(--goa-space-l);
-`));
-const CategoryStatus = styled.td(_t24 || (_t24 = _$5`
-  width: var(--goa-space-xl);
-  padding-right: var(--goa-space-xl);
-  align-content: center;
-`));
-const Center = styled.div(_t25 || (_t25 = _$5`
-  padding-top: 5px;
-`));
-const PageStepperRow = styled.tr(_t26 || (_t26 = _$5`
-  ${0}
-`), ({
-  disabled
-}) => disabled ? `
-          pointer-events: none;
-          opacity: 0.5;
-          cursor: not-allowed;
-        ` : `
-          cursor: pointer;
-
-          &:hover td {
-            background-color: var(--goa-color-greyscale-100);
-          }
-
-          td {
-            transition: background-color 0.2s ease-in-out;
-          }
-
-
-          &:focus-visible {
-            border-radius: 0.25rem;
-            outline: 3px solid var(--goa-color-interactive-focus);
-          }
-        `);
-const SectionHeaderRowTr = styled.tr(_t27 || (_t27 = _$5`
-  & > td {
-    border: 0 !important;
-    padding-top: var(--goa-space-l);
-    padding-bottom: var(--goa-space-s);
-    padding-left: 0 !important;
-  }
-
-  & + tr > td {
-    border-top: none !important;
-  }
-`));
-const SummaryRowLink = styled.a(_t28 || (_t28 = _$5`
-  position: relative;
-  top: var(--goa-space-xs);
-  &:focus-visible {
-    border-radius: 0.25rem;
-    outline: 3px solid var(--goa-color-interactive-focus);
+  // For required boolean fields (e.g. anyOf: [{enum: [true]}]), suppress the raw AJV
+  // "must be equal to one of the allowed values" error and show a friendly message instead.
+  if ((schema == null ? void 0 : schema.type) === 'boolean' && activeError && activeError.toLowerCase().includes('must be equal')) {
+    activeError = data === false ? `${labelToUpdate} is required` : undefined;
   }
-  padding: 0 var(--goa-space-s) var(--goa-space-xs); var(--goa-space-s);
-`));
-const SummaryTd = styled.td(_t29 || (_t29 = _$5`
-  border: 0 !important;
-  padding: 0 !important;
-`));
-
-const RenderStepElements = props => {
-  var _props$category;
-  // Passing the schema straight through matters for performance. This used to hand down a shallow
-  // copy, and because the copy is made in a hook it is a brand new object every time the step
-  // changes — which invalidates every identity-keyed cache downstream, including the renderer
-  // lookup JsonForms memoizes on the schema it is given.
-  const memoizedSchema = props.schema;
-  return jsx(Visible, {
-    "$visible": props.visible,
-    "data-testid": `${(props == null ? void 0 : props.path) || ((_props$category = props.category) == null ? void 0 : _props$category.label)}-categories-${props.categoryIndex}`,
-    children: props.category.elements.map((uiSchema, index) => {
-      var _props$category2;
-      return jsx(JsonFormsDispatch, {
-        schema: memoizedSchema,
-        uischema: uiSchema,
-        renderers: props.renderers,
-        cells: props.cells,
-        path: props.path,
-        visible: props.visible,
-        enabled: props.enabled
-      }, `${(props == null ? void 0 : props.path) || ((_props$category2 = props.category) == null ? void 0 : _props$category2.label)}-category-page-${index}`);
-    })
-  });
-};
-
-var $$5 = _export;
-var flattenIntoArray = flattenIntoArray_1;
-var toObject$1 = toObject$d;
-var lengthOfArrayLike$1 = lengthOfArrayLike$d;
-var toIntegerOrInfinity = toIntegerOrInfinity$9;
-var arraySpeciesCreate = arraySpeciesCreate$3;
-
-// `Array.prototype.flat` method
-// https://tc39.es/ecma262/#sec-array.prototype.flat
-$$5({ target: 'Array', proto: true }, {
-  flat: function flat(/* depthArg = 1 */) {
-    var depthArg = arguments.length ? arguments[0] : undefined;
-    var O = toObject$1(this);
-    var sourceLen = lengthOfArrayLike$1(O);
-    var A = arraySpeciesCreate(O, 0);
-    A.length = flattenIntoArray(A, O, O, sourceLen, 0, depthArg === undefined ? 1 : toIntegerOrInfinity(depthArg));
-    return A;
+  // If a required checkbox is unchecked, show only the validation message in
+  // review mode (not a contradictory "No (...)" value line).
+  let isBooleanRequiredError = false;
+  if ((schema == null ? void 0 : schema.type) === 'boolean' && data === false && activeError && /\sis required$/i.test(activeError)) {
+    reviewText = '';
+    isBooleanRequiredError = true;
   }
-});
-
-// this method was added to unscopables after implementation
-// in popular engines, so it's moved to a separate module
-var addToUnscopables = addToUnscopables$5;
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('flat');
-
-const isPropertiesMatch = (obj, props, isExactMatch) => {
-  if (isObject$o(obj)) {
-    const keys = Object.keys(obj);
-    if (isExactMatch) {
-      return props.every(attr => keys.includes(attr)) && keys.length === props.length;
-    } else {
-      return props.every(attr => keys.includes(attr));
-    }
+  const stepId = (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.stepId;
+  function handleChangeClick() {
+    reportChange(stepId, uischema.scope);
   }
-  return false;
-};
-const createSchemaMatchTester = (props, isExactMatch = false) => {
-  return schemaMatches(schema => {
-    return schema && isPropertiesMatch(schema.properties, props, isExactMatch);
-  });
-};
-
-const isFullName = createSchemaMatchTester(['firstName', 'middleName', 'lastName'], true);
-const FullNameTester = rankWith(4, isFullName);
-
-const FullNameControlReview = props => {
-  var _props$uischema, _props$schema$require, _props$schema;
-  const reportChange = useReviewChange();
-  const showChangeButtons = useShowChangeButtons();
-  const stepId = (_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.stepId;
-  const {
-    uischema,
-    data,
-    id
-  } = props;
-  const requiredFields = (_props$schema$require = (_props$schema = props.schema) == null ? void 0 : _props$schema.required) != null ? _props$schema$require : [];
-  const isMissing = value => isNilOrEmptyString(value);
-  const renderRow = (fieldLabel, value, fieldName, testId) => {
-    var _uischema$options;
-    return jsx("tr", {
-      children: jsxs(PageReviewContainer, {
-        colSpan: 3,
-        children: [jsxs(ReviewHeader, {
-          children: [jsxs(ReviewLabel, {
-            children: [fieldLabel, requiredFields.includes(fieldName) && jsx(RequiredTextLabel, {
-              children: " (required)"
-            })]
-          }), showChangeButtons && stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(BackButton, {
-            text: "Change",
-            link: () => reportChange(stepId, uischema.scope),
-            testId: `${fieldName}-change-btn`,
-            showBackIcon: false
-          })]
-        }), jsxs(ReviewValue, {
-          children: [jsx("div", {
-            "data-testid": testId,
-            children: value != null ? value : ''
-          }), requiredFields.includes(fieldName) && isMissing(value) && jsx(GoabFormItem, {
-            error: `${fieldLabel} is required`,
-            label: ""
+  const showInlineValue = reviewText === null || reviewText === undefined || typeof reviewText === 'string' || typeof reviewText === 'number' || /*#__PURE__*/React.isValidElement(reviewText) || Array.isArray(reviewText) && reviewText.length === 0;
+  const isValueEmpty = !isBooleanRequiredError && (reviewText === null || reviewText === undefined || reviewText === '' || Array.isArray(reviewText) && reviewText.length === 0);
+  return jsx("tr", {
+    "data-testid": `input-base-table-${label}-row`,
+    children: jsxs(PageReviewContainer, {
+      colSpan: 3,
+      children: [jsxs(ReviewHeader, {
+        children: [jsxs(ReviewLabel, {
+          children: [labelToUpdate, required && jsx(RequiredTextLabel, {
+            children: " (required)"
           })]
+        }), showChangeButtons && stepId !== undefined && !((_uischema$options6 = uischema.options) != null && (_uischema$options6 = _uischema$options6.componentProps) != null && _uischema$options6.readOnly) && jsx(BackButton, {
+          text: "Change",
+          link: handleChangeClick,
+          showBackIcon: false
         })]
-      })
-    }, testId);
-  };
-  return jsxs(Fragment, {
-    children: [renderRow('First name', data == null ? void 0 : data.firstName, 'firstName', `firstName-control-${id}`), renderRow('Middle name', data == null ? void 0 : data.middleName, 'middleName', `middleName-control-${id}`), renderRow('Last name', data == null ? void 0 : data.lastName, 'lastName', `lastName-control-${id}`)]
+      }), jsxs(ReviewValue, {
+        children: [isFileUrnSchema(schema) && !isNilOrEmptyValue(data, true) ? jsx("div", {
+          "data-testid": `review-value-${label}`,
+          children: jsx(FileUploaderReview, Object.assign({}, props, {
+            label: "",
+            required: false
+          }))
+        }) : showInlineValue ? jsx("div", {
+          "data-testid": `review-value-${label}`,
+          children: isValueEmpty ? jsx(NoneGivenText, {
+            children: noAnswerMessage
+          }) : reviewText != null ? reviewText : ''
+        }) : jsx(JsonFormsDispatch, {
+          "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          renderers: jsonForms.renderers,
+          cells: cells
+        }), activeError && jsx(GoabFormItem, {
+          error: activeError,
+          label: ""
+        })]
+      })]
+    })
   });
 };
-const GoAInputBaseFullNameControlReview = withJsonFormsAllOfProps(FullNameControlReview);
-
-const isFullNameDoB = createSchemaMatchTester(['firstName', 'middleName', 'lastName', 'dateOfBirth'], true);
-const FullNameDobTester = rankWith(4, isFullNameDoB);
+const GoAInputBaseTableReviewControl = withJsonFormsControlProps(GoAInputBaseTableReview);
 
-const FullNameDobReviewControl = props => {
-  var _uischema$options, _props$schema$require, _props$schema;
+const defaultLabel = 'Email address';
+const GoAEmailInput = props => {
+  var _uischema$options$com, _uischema$options, _uischema$options$com2, _uischema$options2, _stepperState$categor;
   const {
     data,
+    config,
     id,
-    uischema
+    enabled,
+    visible,
+    uischema,
+    errors,
+    schema,
+    required,
+    label,
+    handleChange
   } = props;
-  const reportChange = useReviewChange();
-  const showChangeButtons = useShowChangeButtons();
-  const stepId = uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.stepId;
-  const requiredFields = (_props$schema$require = (_props$schema = props.schema) == null ? void 0 : _props$schema.required) != null ? _props$schema$require : [];
-  const isMissing = value => isNilOrEmptyString(value);
-  const renderRow = (fieldLabel, value, fieldName, testId) => {
-    var _uischema$options2;
-    return jsx("tr", {
-      children: jsxs(PageReviewContainer, {
-        colSpan: 3,
-        children: [jsxs(ReviewHeader, {
-          children: [jsxs(ReviewLabel, {
-            children: [fieldLabel, requiredFields.includes(fieldName) && jsx(RequiredTextLabel, {
-              children: " (required)"
-            })]
-          }), showChangeButtons && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(BackButton, {
-            text: "Change",
-            link: () => reportChange(stepId, uischema.scope),
-            testId: `${fieldName}-change-btn`,
-            showBackIcon: false
-          })]
-        }), jsxs(ReviewValue, {
-          children: [jsx("div", {
-            "data-testid": testId,
-            children: value != null ? value : ''
-          }), requiredFields.includes(fieldName) && isMissing(value) && jsx(GoabFormItem, {
-            error: `${fieldLabel} is required`,
-            label: ""
-          })]
-        })]
-      })
-    }, testId);
-  };
-  return jsxs(Fragment, {
-    children: [renderRow('First name', data == null ? void 0 : data.firstName, 'firstName', `firstName-control-${id}`), renderRow('Middle name', data == null ? void 0 : data.middleName, 'middleName', `middleName-control-${id}`), renderRow('Last name', data == null ? void 0 : data.lastName, 'lastName', `lastName-control-${id}`), renderRow('Date of birth', data == null ? void 0 : data.dateOfBirth, 'dateOfBirth', `dob-control-${id}`)]
-  });
-};
-const GoAInputBaseFullNameDobControlReview = withJsonFormsAllOfProps(FullNameDobReviewControl);
-
-// Encapsulates masked-input state for a GoA input: display value, mount reflection, and change/keypress handling.
-const resetMaskedValue = (detail, nextValue) => {
-  const target = getMaskInputTarget(detail);
-  if (target) {
-    target.value = nextValue;
-  }
-};
-const useMaskedInput = ({
-  mask,
-  inPlace,
-  data,
-  allowedKeys,
-  onCommit
-}) => {
-  const format = value => inPlace ? toMaskTemplate(value, mask) : formatWithPattern(value, mask);
-  const initialDisplay = format(typeof data === 'string' ? data : '');
-  // In-place mounts empty then sets the template so the web component reflects it (a value change forces the paint).
-  const [value, setValue] = useState(inPlace ? '' : initialDisplay);
+  const defaultSchema = schema;
+  const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
+  const readOnly = (_uischema$options$com = uischema == null || (_uischema$options = uischema.options) == null || (_uischema$options = _uischema$options.componentProps) == null ? void 0 : _uischema$options.readOnly) != null ? _uischema$options$com : false;
+  const width = (_uischema$options$com2 = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.componentProps) == null ? void 0 : _uischema$options2.width) != null ? _uischema$options$com2 : '100%';
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const stepperState = formStepperCtx == null || formStepperCtx.selectStepperState == null ? void 0 : formStepperCtx.selectStepperState();
+  const currentCategory = stepperState == null || (_stepperState$categor = stepperState.categories) == null ? void 0 : _stepperState$categor[stepperState == null ? void 0 : stepperState.activeId];
+  const showReviewLink = currentCategory == null ? void 0 : currentCategory.showReviewPageLink;
+  const [localValue, setLocalValue] = useState(data);
+  const debouncedValue = useDebounce(localValue, 300);
   useEffect(() => {
-    setValue(format(typeof data === 'string' ? data : ''));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mask, inPlace]);
-  const handleChange = detail => {
-    var _target$selectionStar;
-    const rawValue = detail.value;
-    const cleaned = allowedKeys ? filterAllowedKeys(rawValue, allowedKeys) : rawValue;
-    if (!inPlace) {
-      const stored = cleaned === '' ? '' : formatWithPattern(cleaned, mask);
-      if (allowedKeys && cleaned !== rawValue) {
-        resetMaskedValue(detail, stored);
-      }
-      setValue(stored);
-      onCommit(stored);
-      return;
-    }
-    const target = getMaskInputTarget(detail);
-    const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : cleaned.length;
-    const overflow = overflowMaskEdit(value, cleaned, caretIndex, mask);
-    if (overflow) {
-      applyInPlaceEdit(target, overflow);
-      return;
-    }
-    const edit = computeMaskEdit(cleaned, caretIndex, mask);
-    applyInPlaceEdit(target, edit);
-    setValue(edit.display);
-    onCommit(edit.stored);
-  };
-  // In-place has no maxLength (the template is already full length) and GoA keyPress is keyup, so restore on overflow.
-  const handleKeyPress = detail => {
-    var _detail$event, _target$value, _target$selectionStar2;
-    const blockDisallowed = shouldBlockKey(detail.key, allowedKeys);
-    const blockOverflow = inPlace && /^[A-Za-z0-9]$/.test(detail.key) && isMaskFilled(value, mask);
-    if (!blockDisallowed && !blockOverflow) {
+    if (data === undefined || data === null) {
       return;
     }
-    (_detail$event = detail.event) == null || _detail$event.preventDefault();
-    if (!blockOverflow) {
-      return;
+    setLocalValue(data);
+  }, [data]);
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (debouncedValue === data) return;
+    // Only sync if debouncedValue differs from data and is not initial empty state
+    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
+      onChangeForInputControl({
+        value: debouncedValue,
+        controlProps: props
+      });
     }
-    const target = getMaskInputTarget(detail);
-    const rawValue = (_target$value = target == null ? void 0 : target.value) != null ? _target$value : value;
-    const overflow = overflowMaskEdit(value, rawValue, (_target$selectionStar2 = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar2 : value.length, mask);
-    if (overflow) {
-      applyInPlaceEdit(target, overflow);
+  }, [debouncedValue]);
+  const [isVisited, setIsVisited] = useState(false);
+  useEffect(() => {
+    if (showReviewLink === true) {
+      setIsVisited(true);
     }
-  };
-  return {
-    value,
-    handleChange,
-    handleKeyPress
-  };
-};
-
-const PhoneNumberControl = props => {
-  var _uischema$options, _uischema$options2;
-  const {
-    data,
-    path,
-    schema,
-    uischema,
-    handleChange,
-    enabled,
-    visible,
-    required
-  } = props;
-  // Default mask can be overridden per field via the UI schema options.
-  const phoneMask = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.phoneMask) || DEFAULT_PATTERNS.phone.mask;
-  // When in-place, the field shows the fill-in template and edits keep the caret in place.
-  const inPlace = (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.inPlace) === true;
-  const [error, setError] = useState('');
-  const {
-    value,
-    handleChange: handleMaskChange,
-    handleKeyPress
-  } = useMaskedInput({
-    mask: phoneMask,
-    inPlace,
-    data,
-    allowedKeys: DEFAULT_PATTERNS.phone.allowedKeys,
-    onCommit: stored => {
-      setError(stored && !DEFAULT_PATTERNS.phone.pattern.test(stored) ? DEFAULT_PATTERNS.phone.error : '');
-      handleChange(path, stored);
+  }, [showReviewLink]);
+  const splitErrors = (errors != null ? errors : '').split(/\r?\n/).map(e => e.trim()).filter(Boolean);
+  const primaryLabel = (defaultSchema == null ? void 0 : defaultSchema.label) || defaultLabel;
+  const splintIndex = splitErrors.findIndex(e => e === REQUIRED_PROPERTY_ERROR);
+  splitErrors[splintIndex] = `${primaryLabel} is required`;
+  const finalErrors = splitErrors.join('\n');
+  useEffect(() => {
+    if (typeof handleChange === 'function' && (schema == null ? void 0 : schema.default) !== undefined && data === undefined) {
+      handleChange(props.path, schema.default);
+      setLocalValue(schema.default);
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schema.default, data]);
   return jsx(Visible, {
     "$visible": visible,
-    children: jsx(GoabFormItem, {
-      label: (schema == null ? void 0 : schema.title) || 'Phone number',
-      requirement: required ? 'required' : undefined,
-      error: error,
-      testId: `form-item-${path}`,
-      children: jsx(GoabInput, {
-        type: "tel",
-        name: path,
-        disabled: !enabled,
-        "aria-label": "phone number input",
-        testId: `phone-input-${path}`,
-        value: value,
-        maxLength: inPlace ? undefined : phoneMask.length,
-        placeholder: inPlace ? undefined : maskPlaceholder(phoneMask),
-        onChange: detail => handleMaskChange(detail),
-        onKeyPress: detail => handleKeyPress(detail),
-        width: "100%"
-      }, `${phoneMask}:${inPlace}`)
+    children: jsx(JsonFormRegisterProvider, {
+      defaultRegisters: undefined,
+      children: jsx(FormFieldWrapper$1, {
+        children: jsx(GoabFormItem, {
+          error: isVisited && finalErrors,
+          testId: "form-email-input-wrapper",
+          requirement: required ? 'required' : undefined,
+          label: primaryLabel,
+          children: jsx(GoabInput, {
+            error: isVisited && finalErrors.length > 0,
+            type: 'email',
+            width: width,
+            name: "Email address",
+            value: data,
+            testId: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
+            disabled: !enabled,
+            readonly: readOnly,
+            onChange: detail => {
+              if (!isVisited) {
+                setIsVisited(true);
+              }
+              setLocalValue(detail.value);
+            },
+            onBlur: detail => {
+              if (!isVisited) {
+                setIsVisited(true);
+              }
+              onBlurForTextControl({
+                name: detail.name,
+                value: detail.value,
+                controlProps: props
+              });
+            }
+          })
+        })
+      })
     })
   });
 };
-const GoAPhoneNumberControl = withJsonFormsControlProps(PhoneNumberControl);
-
-const PhoneNumberTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('phone')));
-
-let _$4 = t => t,
-  _t$5,
-  _t2$2,
-  _t3$1,
-  _t4$1,
-  _t5,
-  _t6;
-const SearchBox = styled.div(_t$5 || (_t$5 = _$4`
-  position: relative;
+const GoAEmailControl = props => jsx(GoAEmailInput, Object.assign({}, props));
+const GoAEmailControlTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('email')));
+const GoAInputEmailControl = withJsonFormsControlProps(GoAEmailControl);
 
-  .suggestions {
-    width: 100%;
-    margin-top: 3px;
-    border-top-width: 0;
-    list-style: none;
-    max-height: 15.5rem;
-    width: 100%;
-    position: absolute;
-
-    background: var(--goa-color-greyscale-white);
-    box-shadow: 0 8px 8px rgb(0 0 0 / 20%), 0 4px 4px rgb(0 0 0 / 10%);
-    z-index: 99;
-    overflow: hidden auto;
-    padding-left: 0;
+let _$5 = t => t,
+  _t$5;
+const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
+  return elements.map((child, index) => jsx(JsonFormsDispatch, {
+    uischema: child,
+    schema: schema,
+    path: path,
+    enabled: enabled,
+    renderers: renderers,
+    cells: cells
+  }, `review-${path}_${index}`));
+};
+const withAjvProps = Component => function WithAjvProps(props) {
+  const ctx = useJsonForms();
+  const ajv = getAjv({
+    jsonforms: Object.assign({}, ctx)
+  });
+  return jsx(Component, Object.assign({}, props, {
+    ajv: ajv
+  }));
+};
+const LayoutRenderer = ({
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+  visible,
+  width
+}) => {
+  if (isEmpty$1(elements)) {
+    return null;
+  } else {
+    if (direction === 'row') {
+      return jsx(Visible, {
+        "$visible": visible,
+        children: jsx(GoabGrid$1, {
+          minChildWidth: width || '10ch',
+          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+        })
+      });
+    } else {
+      return jsx(Visible, {
+        "$visible": visible,
+        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+      });
+    }
   }
-  .suggestions li {
+};
+const ReviewLayoutRenderer = ({
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+  visible,
+  width
+}) => {
+  if (isEmpty$1(elements)) {
+    return null;
+  } else {
+    if (direction === 'row') {
+      return jsx(Visible, {
+        "$visible": visible,
+        children: jsx(ReviewGrid, {
+          children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+        })
+      });
+    } else {
+      return jsx(Visible, {
+        "$visible": visible,
+        children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
+      });
+    }
   }
-  .suggestion-active,
-  .suggestions li:hover {
-    background-color: var(--goa-color-interactive-default);
-    color: var(--goa-color-greyscale-white);
-    cursor: pointer;
-    font-weight: 600;
+};
+const ReviewGrid = styled.div(_t$5 || (_t$5 = _$5`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
+  gap: 16px;
+`));
+
+let _$4 = t => t,
+  _t$4,
+  _t2$2,
+  _t3$1,
+  _t4$1,
+  _t5$1,
+  _t6$1,
+  _t7,
+  _t8,
+  _t9,
+  _t0,
+  _t1,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28,
+  _t29;
+const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
+  display: flex;
+  flex-direction: column;
+`));
+const CompletionStatus = styled.div(_t2$2 || (_t2$2 = _$4`
+  padding: 0;
+  margin: 0;
+  padding-top: var(--goa-space-xl);
+
+  display: flex;
+  flex-direction: column;
+`));
+const BarTop = styled.div(_t3$1 || (_t3$1 = _$4`
+  display: flex;
+
+  .progress-text {
+    margin-left: auto;
   }
-  .input-container {
+`));
+const Bar = styled.div(_t4$1 || (_t4$1 = _$4`
+  display: flex;
+  flex-direction: row;
+
+  .progress-container {
+    align-items: flex-start;
+    width: 100%;
+
+    height: 4px;
+    background-color: #e0e0e0;
+    border-radius: 4;
+    overflow: hidden;
     position: relative;
-    display: inline-block;
-    width: 100%; /* Ensures it spans the parent container */
+    border: 1px solid #ccc;
+    margin-bottom: 20px;
   }
 
-  .input-container .input-spinner {
-    position: absolute;
-    top: 50%;
-    right: 8px; /* Adjust based on padding or margin of the input field */
-    transform: translateY(-50%);
-    z-index: 1; /* Ensure it appears above the input */
-    pointer-events: none; /* Prevent spinner from interfering with clicks */
+  .progress-bar {
+    width: 60%;
+    height: 100%;
+    background-color: #004abf;
+    border-radius: 4;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    box-sizing: border-box;
   }
 `));
-const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$4`
-  margin: 0 0 var(--goa-space-m) 0;
-  text-wrap: wrap;
-  word-break: break-word;
+styled.div(_t5$1 || (_t5$1 = _$4``));
+const BadgeWrapper = styled.div(_t6$1 || (_t6$1 = _$4`
+  margin-left: 10px;
+  margin-top: 7px;
+`));
+const CompletionTextHeader = styled.h3(_t7 || (_t7 = _$4`
+  display: flex;
+`));
+const ReviewItemSection = styled.div(_t8 || (_t8 = _$4`
+  margin-bottom: var(--goa-space-m);
+  padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
-  padding: var(--goa-space-l);
-`));
-const TextWrap = styled.p(_t3$1 || (_t3$1 = _$4`
-  text-wrap: auto;
-  word-break: break-word;
+
+  .element-style {
+    max-width: 1600px;
+  }
+
+  @media (max-width: 639px) {
+    padding: var(--goa-space-l) var(--goa-space-m);
+  }
 `));
-const TextWrapDiv = styled.div(_t4$1 || (_t4$1 = _$4`
-  text-wrap: auto;
-  word-break: break-word;
+const ReviewSectionTitle = styled.h3(_t9 || (_t9 = _$4`
+  margin-bottom: var(--goa-space-m);
+  overflow-wrap: anywhere;
 `));
-const LabelDiv = styled.div(_t5 || (_t5 = _$4`
-  color: var(--goa-color-text-default);
-  font: var(--goa-typography-body-m);
-  min-height: 2.625rem;
+const ReviewItemHeader = styled.div(_t0 || (_t0 = _$4`
   display: flex;
   align-items: center;
-  text-wrap: auto;
-  word-break: break-word;
+  justify-content: space-between;
+  margin-bottom: var(--goa-space-xl);
 `));
-/* istanbul ignore next */
-const ListItem = styled.li(_t6 || (_t6 = _$4`
-  background-color: ${0};
-  color: ${0};
-  font-weight: ${0};
-  padding: var(--goa-space-xs) var(--goa-space-2xs) var(--goa-space-xs) var(--goa-space-xs);
-  margin-left: 0.25rem;
-`), ({
-  selected,
-  index
-}) => selected === index ? 'var(--goa-color-interactive-default)' : '', ({
-  selected,
-  index
-}) => selected === index ? 'var(--goa-color-greyscale-white) !important' : '', ({
-  selected,
-  index
-}) => selected === index ? '600' : '');
-
-const PhoneNumberReviewControl = props => {
-  const {
-    data,
-    id,
-    required
-  } = props;
-  return jsx(GoabFormItem, {
-    label: "Phone number",
-    error: required && !data ? 'Phone number is required' : '',
-    requirement: required ? 'required' : undefined,
-    children: jsx(TextWrapDiv, {
-      children: jsx("div", {
-        "data-testid": `phone-control-${id}`,
-        children: data || ''
-      })
-    })
-  });
-};
-const GoabInputBasePhoneNumberReviewControl = withJsonFormsAllOfProps(PhoneNumberReviewControl);
+const ReviewItemTitle = styled.div(_t1 || (_t1 = _$4`
+  font-size: var(--goa-space-l);
+  line-height: var(--goa-space-xl);
+  font-weight: 300;
+`));
+styled.div(_t10 || (_t10 = _$4`
+  color: #0070c4;
+  text-decoration: underline;
+  outline: none;
+  cursor: pointer;
 
-let _$3 = t => t,
-  _t$4;
-const PhoneGrid = styled.div(_t$4 || (_t$4 = _$3`
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 0.2rem;
-  align-items: start;
-  margin-bottom: var(--goa-space-l) !important;
+  &:focus {
+    outline: 2px solid #0070c4;
+    background-color: #e6f7ff;
+  }
+`));
+styled.div(_t11 || (_t11 = _$4`
+  margin-left: var(--goa-space-m);
+`));
+styled.div(_t12 || (_t12 = _$4`
+  margin-bottom: var(--goa-space-m);
+`));
+styled.div(_t13 || (_t13 = _$4`
+  margin: var(--goa-space-s);
+  width: 100%;
+`));
+styled.h3(_t14 || (_t14 = _$4`
+  text-transform: capitalize;
+`));
+const RightAlignmentDiv = styled.div(_t15 || (_t15 = _$4`
+  @media screen and (max-width: 767px) {
+    margin-bottom: var(--goa-space-l);
+  }
+  @media screen and (min-width: 768px) {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: var(--goa-space-l);
+  }
+`));
+const FormStepperSummaryH3 = styled.h3(_t16 || (_t16 = _$4`
+  flex: 1;
+  max-width: 100%;
+  margin-bottom: var(--goa-space-m);
+  font-size: var(--goa-font-size-7);
+  line-height: var(--goa-line-height-4);
+  font-weight: var(--goa-font-weight-bold);
+  overflow-wrap: anywhere;
+`));
+const PageRenderPadding = styled.div(_t17 || (_t17 = _$4`
+  margin-top: var(--goa-space-2xl);
+`));
+styled.div(_t18 || (_t18 = _$4`
+  margin-bottom: var(--goa-space-2xl);
+`));
+const PageBorder = styled.div(_t19 || (_t19 = _$4`
+  padding: var(--goa-space-m) var(--goa-space-3xl);
 
-  goa-form-item {
-    margin-right: 0 !important;
+  @media (max-width: 639px) {
+    padding: var(--goa-space-m) var(--goa-space-xs);
   }
 `));
-const PHONE_REGEX = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
-const normalizePhoneData = value => ({
-  type: (value == null ? void 0 : value.type) || '',
-  number: (value == null ? void 0 : value.number) || ''
-});
-const PhoneNumberWithTypeControl = props => {
-  const {
-    data,
-    path,
-    handleChange,
-    enabled,
-    visible,
-    required
-  } = props;
-  const [formData, setFormData] = useState(normalizePhoneData(data));
-  const [error, setError] = useState(undefined);
-  useEffect(() => {
-    const nextData = normalizePhoneData(data);
-    setFormData(currentData => currentData.type === nextData.type && currentData.number === nextData.number ? currentData : nextData);
-  }, [data]);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const updateFormData = updated => {
-    setFormData(updated);
-    if (updated.number && !PHONE_REGEX.test(updated.number)) {
-      setError('Enter a valid phone number (e.g., (780) 123-4567)');
-    } else {
-      setError(undefined);
-    }
-    handleChange(path, updated);
-  };
+styled.div(_t20 || (_t20 = _$4`
+  .element-style {
+    max-width: 1600px;
+  }
+`));
+styled.div(_t21 || (_t21 = _$4`
+  padding: var(--goa-space-xl) var(--goa-space-2xl);
+  border: 1px solid var(--goa-color-greyscale-300);
+  border-radius: var(--goa-border-radius-xl);
+`));
+styled.div(_t22 || (_t22 = _$4`
+  margin-top: var(--goa-space-xl);
+  display: flex;
+  justify-content: space-between;
+`));
+styled.h3(_t23 || (_t23 = _$4`
+  color: var(--goa-color-text-secondary) !important;
+  margin-bottom: var(--goa-space-l);
+`));
+const CategoryStatus = styled.td(_t24 || (_t24 = _$4`
+  width: var(--goa-space-xl);
+  padding-right: var(--goa-space-xl);
+  align-content: center;
+`));
+const Center = styled.div(_t25 || (_t25 = _$4`
+  padding-top: 5px;
+`));
+const PageStepperRow = styled.tr(_t26 || (_t26 = _$4`
+  ${0}
+`), ({
+  disabled
+}) => disabled ? `
+          pointer-events: none;
+          opacity: 0.5;
+          cursor: not-allowed;
+        ` : `
+          cursor: pointer;
+
+          &:hover td {
+            background-color: var(--goa-color-greyscale-100);
+          }
+
+          td {
+            transition: background-color 0.2s ease-in-out;
+          }
+
+
+          &:focus-visible {
+            border-radius: 0.25rem;
+            outline: 3px solid var(--goa-color-interactive-focus);
+          }
+        `);
+const SectionHeaderRowTr = styled.tr(_t27 || (_t27 = _$4`
+  & > td {
+    border: 0 !important;
+    padding-top: var(--goa-space-l);
+    padding-bottom: var(--goa-space-s);
+    padding-left: 0 !important;
+  }
+
+  & + tr > td {
+    border-top: none !important;
+  }
+`));
+const SummaryRowLink = styled.a(_t28 || (_t28 = _$4`
+  position: relative;
+  top: var(--goa-space-xs);
+  &:focus-visible {
+    border-radius: 0.25rem;
+    outline: 3px solid var(--goa-color-interactive-focus);
+  }
+  padding: 0 var(--goa-space-s) var(--goa-space-xs); var(--goa-space-s);
+`));
+const SummaryTd = styled.td(_t29 || (_t29 = _$4`
+  border: 0 !important;
+  padding: 0 !important;
+`));
+
+const RenderStepElements = props => {
+  var _props$category;
+  // Passing the schema straight through matters for performance. This used to hand down a shallow
+  // copy, and because the copy is made in a hook it is a brand new object every time the step
+  // changes — which invalidates every identity-keyed cache downstream, including the renderer
+  // lookup JsonForms memoizes on the schema it is given.
+  const memoizedSchema = props.schema;
   return jsx(Visible, {
-    "$visible": visible,
-    children: jsxs(PhoneGrid, {
-      children: [jsx(GoabFormItem, {
-        label: "Phone type",
-        requirement: required ? 'required' : undefined,
-        children: jsxs(GoabDropdown, {
-          name: "type",
-          value: formData.type || '',
-          disabled: !enabled,
-          onChange: detail => updateFormData(Object.assign({}, formData, {
-            type: detail.value
-          })),
-          children: [jsx(GoabDropdownItem, {
-            value: "Mobile"
-          }), jsx(GoabDropdownItem, {
-            value: "Landline"
-          })]
-        })
-      }), jsx(GoabFormItem, {
-        label: "Phone number",
-        error: error,
-        requirement: required ? 'required' : undefined,
-        children: jsx(GoabInput, {
-          type: "tel",
-          name: "number",
-          placeholder: "(000) 000-0000",
-          value: formData.number || '',
-          disabled: !enabled,
-          onChange: detail => updateFormData(Object.assign({}, formData, {
-            number: detail.value
-          }))
-        })
-      })]
+    "$visible": props.visible,
+    "data-testid": `${(props == null ? void 0 : props.path) || ((_props$category = props.category) == null ? void 0 : _props$category.label)}-categories-${props.categoryIndex}`,
+    children: props.category.elements.map((uiSchema, index) => {
+      var _props$category2;
+      return jsx(JsonFormsDispatch, {
+        schema: memoizedSchema,
+        uischema: uiSchema,
+        renderers: props.renderers,
+        cells: props.cells,
+        path: props.path,
+        visible: props.visible,
+        enabled: props.enabled
+      }, `${(props == null ? void 0 : props.path) || ((_props$category2 = props.category) == null ? void 0 : _props$category2.label)}-category-page-${index}`);
     })
   });
 };
-const GoAPhoneNumberWithTypeControl = withJsonFormsControlProps(PhoneNumberWithTypeControl);
-
-const isPhoneNumberWithType = createSchemaMatchTester(['number', 'type'], true);
-const PhoneNumberWithTypeTester = rankWith(4, isPhoneNumberWithType);
 
-const PhoneNumberWithTypeReviewControl = props => {
-  const {
-    data,
-    id,
-    required
-  } = props;
-  return jsxs(PhoneGrid, {
-    children: [jsx(GoabFormItem, {
-      label: "Phone number",
-      error: required && !(data != null && data.number) ? 'Phone number is required' : '',
-      requirement: required ? 'required' : undefined,
-      children: jsx(TextWrapDiv, {
-        children: jsx("div", {
-          "data-testid": `phone-number-control-${id}`,
-          children: (data == null ? void 0 : data.number) || ''
-        })
-      })
-    }), jsx(GoabFormItem, {
-      label: "Phone type",
-      error: required && !(data != null && data.type) ? 'Phone type is required' : '',
-      requirement: required ? 'required' : undefined,
-      children: jsx(TextWrapDiv, {
-        children: jsx("div", {
-          "data-testid": `phone-type-control-${id}`,
-          children: (data == null ? void 0 : data.type) || ''
-        })
-      })
-    })]
+const isPropertiesMatch = (obj, props, isExactMatch) => {
+  if (isObject$o(obj)) {
+    const keys = Object.keys(obj);
+    if (isExactMatch) {
+      return props.every(attr => keys.includes(attr)) && keys.length === props.length;
+    } else {
+      return props.every(attr => keys.includes(attr));
+    }
+  }
+  return false;
+};
+const createSchemaMatchTester = (props, isExactMatch = false) => {
+  return schemaMatches(schema => {
+    return schema && isPropertiesMatch(schema.properties, props, isExactMatch);
   });
 };
-const GoabInputBasePhoneNumberWithTypeReviewControl = withJsonFormsAllOfProps(PhoneNumberWithTypeReviewControl);
 
-let _$2 = t => t,
-  _t$3;
-const FormFieldWrapper = styled.div(_t$3 || (_t$3 = _$2`
-  margin-bottom: var(--goa-space-l);
-`));
+const isFullName = createSchemaMatchTester(['firstName', 'middleName', 'lastName'], true);
+const FullNameTester = rankWith(4, isFullName);
 
-const ContractInfoControl = props => {
-  var _options$enableEmail, _options$enablePhone, _options$emailFirst;
+const FullNameControlReview = props => {
+  var _props$uischema, _props$schema$require, _props$schema;
+  const reportChange = useReviewChange();
+  const showChangeButtons = useShowChangeButtons();
+  const stepId = (_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.stepId;
   const {
-    data = {},
-    path,
-    handleChange,
-    enabled,
-    visible,
-    required,
-    uischema
+    uischema,
+    data,
+    id
   } = props;
-  const handleFieldChange = (field, value) => {
-    handleChange(`${path}.${field}`, value);
-  };
-  const emailProps = Object.assign({}, props, {
-    data: data == null ? void 0 : data.email,
-    path: `${path}.email`
-  });
-  const phoneProps = Object.assign({}, props, {
-    data: data == null ? void 0 : data.phone,
-    path: `${path}.phone`
-  });
-  const {
-    options
-  } = uischema;
-  const enableEmail = (_options$enableEmail = options == null ? void 0 : options.enableEmail) != null ? _options$enableEmail : true;
-  const enablePhone = (_options$enablePhone = options == null ? void 0 : options.enablePhone) != null ? _options$enablePhone : true;
-  const emailFirst = (_options$emailFirst = options == null ? void 0 : options.emailFirst) != null ? _options$emailFirst : false;
-  if (!enableEmail && !enablePhone) {
-    throw new Error('At least one contact method must be enabled');
-  }
-  return jsxs("div", {
-    style: {
-      display: visible ? 'block' : 'none'
-    },
-    children: [enableEmail && emailFirst && jsx(GoAEmailInput, Object.assign({}, emailProps)), enablePhone && jsx(FormFieldWrapper, {
-      children: jsx(PhoneNumberControl, Object.assign({}, phoneProps))
-    }), enableEmail && !emailFirst && jsx(GoAEmailInput, Object.assign({}, emailProps)), enableEmail && enablePhone && jsx(FormFieldWrapper, {
-      children: jsx(GoabFormItem, {
-        label: "Preferred Contact Method",
-        requirement: required ? 'required' : undefined,
-        children: jsxs(GoabDropdown, {
-          testId: `preferred-contact-${path}`,
-          disabled: !enabled,
-          value: data.preferredContactMethod || '',
-          onChange: detail => handleFieldChange('preferredContactMethod', detail.value || ''),
-          width: "250px",
-          children: [jsx(GoabDropdownItem, {
-            value: "",
-            label: "Select a Contact Method"
-          }), emailFirst && jsx(GoabDropdownItem, {
-            value: "Email",
-            label: "Email"
-          }), jsx(GoabDropdownItem, {
-            value: "Phone",
-            label: "Phone"
-          }), !emailFirst && jsx(GoabDropdownItem, {
-            value: "Email",
-            label: "Email"
+  const requiredFields = (_props$schema$require = (_props$schema = props.schema) == null ? void 0 : _props$schema.required) != null ? _props$schema$require : [];
+  const isMissing = value => isNilOrEmptyString(value);
+  const renderRow = (fieldLabel, value, fieldName, testId) => {
+    var _uischema$options;
+    return jsx("tr", {
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [jsxs(ReviewHeader, {
+          children: [jsxs(ReviewLabel, {
+            children: [fieldLabel, requiredFields.includes(fieldName) && jsx(RequiredTextLabel, {
+              children: " (required)"
+            })]
+          }), showChangeButtons && stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(BackButton, {
+            text: "Change",
+            link: () => reportChange(stepId, uischema.scope),
+            testId: `${fieldName}-change-btn`,
+            showBackIcon: false
           })]
-        })
+        }), jsxs(ReviewValue, {
+          children: [jsx("div", {
+            "data-testid": testId,
+            children: value != null ? value : ''
+          }), requiredFields.includes(fieldName) && isMissing(value) && jsx(GoabFormItem, {
+            error: `${fieldLabel} is required`,
+            label: ""
+          })]
+        })]
       })
-    })]
+    }, testId);
+  };
+  return jsxs(Fragment, {
+    children: [renderRow('First name', data == null ? void 0 : data.firstName, 'firstName', `firstName-control-${id}`), renderRow('Middle name', data == null ? void 0 : data.middleName, 'middleName', `middleName-control-${id}`), renderRow('Last name', data == null ? void 0 : data.lastName, 'lastName', `lastName-control-${id}`)]
   });
 };
+const GoAInputBaseFullNameControlReview = withJsonFormsAllOfProps(FullNameControlReview);
 
-const ContractInfoControlReview = props => {
-  var _props$uischema, _schema$required, _options$enableEmail, _options$enablePhone, _options$emailFirst;
-  const reportChange = useReviewChange();
-  const showChangeButtons = useShowChangeButtons();
-  const stepId = (_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.stepId;
+const isFullNameDoB = createSchemaMatchTester(['firstName', 'middleName', 'lastName', 'dateOfBirth'], true);
+const FullNameDobTester = rankWith(4, isFullNameDoB);
+
+const FullNameDobReviewControl = props => {
+  var _uischema$options, _props$schema$require, _props$schema;
   const {
-    uischema,
-    data = {},
+    data,
     id,
-    schema
+    uischema
   } = props;
-  const requiredFields = (_schema$required = schema == null ? void 0 : schema.required) != null ? _schema$required : [];
-  const isMissing = value => value === undefined || value === null || value === '';
+  const reportChange = useReviewChange();
+  const showChangeButtons = useShowChangeButtons();
+  const stepId = uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.stepId;
+  const requiredFields = (_props$schema$require = (_props$schema = props.schema) == null ? void 0 : _props$schema.required) != null ? _props$schema$require : [];
+  const isMissing = value => isNilOrEmptyString(value);
   const renderRow = (fieldLabel, value, fieldName, testId) => {
-    var _uischema$options;
+    var _uischema$options2;
     return jsx("tr", {
       children: jsxs(PageReviewContainer, {
         colSpan: 3,
         children: [jsxs(ReviewHeader, {
-          children: [jsx(ReviewLabel, {
-            children: fieldLabel
-          }), showChangeButtons && stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(BackButton, {
+          children: [jsxs(ReviewLabel, {
+            children: [fieldLabel, requiredFields.includes(fieldName) && jsx(RequiredTextLabel, {
+              children: " (required)"
+            })]
+          }), showChangeButtons && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(BackButton, {
             text: "Change",
             link: () => reportChange(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
@@ -15403,1228 +15297,1345 @@ const ContractInfoControlReview = props => {
       })
     }, testId);
   };
-  const {
-    options
-  } = uischema;
-  const enableEmail = (_options$enableEmail = options == null ? void 0 : options.enableEmail) != null ? _options$enableEmail : true;
-  const enablePhone = (_options$enablePhone = options == null ? void 0 : options.enablePhone) != null ? _options$enablePhone : true;
-  const emailFirst = (_options$emailFirst = options == null ? void 0 : options.emailFirst) != null ? _options$emailFirst : false;
-  if (!enableEmail && !enablePhone) {
-    throw new Error('At least one contact method must be enabled');
-  }
   return jsxs(Fragment, {
-    children: [enableEmail && emailFirst && renderRow('Email', data == null ? void 0 : data.email, 'email', `email-control-${id}`), enablePhone && renderRow('Phone number', data == null ? void 0 : data.phone, 'phone', `phone-control-${id}`), enableEmail && !emailFirst && renderRow('Email', data == null ? void 0 : data.email, 'email', `email-control-${id}`), enableEmail && enablePhone && renderRow('Preferred contact method', (data == null ? void 0 : data.preferredContactMethod) || 'Email', 'preferredContactMethod', `preferred-contact-${id}`)]
+    children: [renderRow('First name', data == null ? void 0 : data.firstName, 'firstName', `firstName-control-${id}`), renderRow('Middle name', data == null ? void 0 : data.middleName, 'middleName', `middleName-control-${id}`), renderRow('Last name', data == null ? void 0 : data.lastName, 'lastName', `lastName-control-${id}`), renderRow('Date of birth', data == null ? void 0 : data.dateOfBirth, 'dateOfBirth', `dob-control-${id}`)]
   });
 };
-const GoAContractInfoControlReview = withJsonFormsAllOfProps(ContractInfoControlReview);
-
-const isContactInformation = createSchemaMatchTester(['email', 'phone', 'preferredContactMethod']);
-const ContactInformationTester = rankWith(4, isContactInformation);
-
-var $$4 = _export;
-var iterate = iterate$c;
-var createProperty$1 = createProperty$4;
+const GoAInputBaseFullNameDobControlReview = withJsonFormsAllOfProps(FullNameDobReviewControl);
 
-// `Object.fromEntries` method
-// https://github.com/tc39/proposal-object-from-entries
-$$4({ target: 'Object', stat: true }, {
-  fromEntries: function fromEntries(iterable) {
-    var obj = {};
-    iterate(iterable, function (k, v) {
-      createProperty$1(obj, k, v);
-    }, { AS_ENTRIES: true });
-    return obj;
+// Encapsulates masked-input state for a GoA input: display value, mount reflection, and change/keypress handling.
+const resetMaskedValue = (detail, nextValue) => {
+  const target = getMaskInputTarget(detail);
+  if (target) {
+    target.value = nextValue;
   }
-});
-
-var global$2 = global$v;
-var fails = fails$D;
-var uncurryThis$3 = functionUncurryThis;
-var toString$2 = toString$n;
-var trim = stringTrim.trim;
-var whitespaces = whitespaces$3;
-
-var $parseInt$1 = global$2.parseInt;
-var Symbol$1 = global$2.Symbol;
-var ITERATOR = Symbol$1 && Symbol$1.iterator;
-var hex = /^[+-]?0x/i;
-var exec$2 = uncurryThis$3(hex.exec);
-var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
-  // MS Edge 18- broken with boxed symbols
-  || (ITERATOR && !fails(function () { $parseInt$1(Object(ITERATOR)); }));
-
-// `parseInt` method
-// https://tc39.es/ecma262/#sec-parseint-string-radix
-var numberParseInt = FORCED ? function parseInt(string, radix) {
-  var S = trim(toString$2(string));
-  return $parseInt$1(S, (radix >>> 0) || (exec$2(hex, S) ? 16 : 10));
-} : $parseInt$1;
-
-var $$3 = _export;
-var $parseInt = numberParseInt;
-
-// `parseInt` method
-// https://tc39.es/ecma262/#sec-parseint-string-radix
-$$3({ global: true, forced: parseInt !== $parseInt }, {
-  parseInt: $parseInt
-});
-
-const ADD_DATA_ACTION = 'jsonforms/register/add_data_action';
-const SET_DATA_ACTION = 'jsonforms/register/set_data_action';
-const INCREMENT_ACTION = 'jsonforms/register/increment_action';
-const DELETE_ACTION = 'jsonforms/register/delete_action';
-const initialState = {
-  categories: {}
 };
-
-function objectListReducer(state, action) {
-  switch (action.type) {
-    case ADD_DATA_ACTION:
-      {
-        //ok so we're assuming we're already getting the updated category data
-        const {
-          categories
-        } = state;
-        const {
-          name,
-          category
-        } = action.payload;
-        const newCategories = Object.assign({}, categories);
-        if (!newCategories[name]) {
-          newCategories[name] = {
-            data: category
-          };
-        } else {
-          newCategories[name].data = category;
-        }
-        return Object.assign({}, state, {
-          categories: newCategories
-        });
-      }
-    case SET_DATA_ACTION:
-      {
-        const CategoriesStateData = action.payload;
-        return Object.assign({}, state, {
-          categories: CategoriesStateData
-        });
-      }
-    case INCREMENT_ACTION:
-      {
-        const {
-          categories
-        } = state;
-        const name = action.payload;
-        const newCategories = Object.assign({}, categories);
-        // Assuming you want to increment the count of a category:
-        if (newCategories[name]) {
-          const updatedCategory = Object.assign({}, categories[name], {
-            count: (categories[name].count || 0) + 1
-          });
-          return Object.assign({}, state, {
-            categories: Object.assign({}, categories, {
-              [name]: updatedCategory
-            })
-          });
-        } else {
-          newCategories[name] = {
-            count: 1,
-            data: {}
-          };
-        }
-        return Object.assign({}, state, {
-          categories: newCategories
-        });
-      }
-    case DELETE_ACTION:
-      {
-        const {
-          name,
-          category
-        } = action.payload;
-        const {
-          categories
-        } = state;
-        const newCategories = Object.assign({}, categories);
-        newCategories[name] = category;
-        return Object.assign({}, state, {
-          categories: newCategories
-        });
-      }
-    default:
-      return state;
-  }
-}
-
-const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
-  open,
-  onConfirm,
-  onCancel,
-  title,
-  message
-}) {
-  useEffect(() => {
-    if (open) {
-      const deleteBtn = document.querySelector('[data-testId="object-array-confirm-button"]');
-      if (deleteBtn) {
-        setTimeout(() => {
-          var _deleteBtn$shadowRoot;
-          (_deleteBtn$shadowRoot = deleteBtn.shadowRoot) == null || (_deleteBtn$shadowRoot = _deleteBtn$shadowRoot.querySelector('button')) == null || _deleteBtn$shadowRoot.focus();
-        }, 200);
+const useMaskedInput = ({
+  mask,
+  inPlace,
+  data,
+  allowedKeys,
+  onCommit
+}) => {
+  const format = value => inPlace ? toMaskTemplate(value, mask) : formatWithPattern(value, mask);
+  const initialDisplay = format(typeof data === 'string' ? data : '');
+  // In-place mounts empty then sets the template so the web component reflects it (a value change forces the paint).
+  const [value, setValue] = useState(inPlace ? '' : initialDisplay);
+  useEffect(() => {
+    setValue(format(typeof data === 'string' ? data : ''));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mask, inPlace]);
+  const handleChange = detail => {
+    var _target$selectionStar;
+    const rawValue = detail.value;
+    const cleaned = allowedKeys ? filterAllowedKeys(rawValue, allowedKeys) : rawValue;
+    if (!inPlace) {
+      const stored = cleaned === '' ? '' : formatWithPattern(cleaned, mask);
+      if (allowedKeys && cleaned !== rawValue) {
+        resetMaskedValue(detail, stored);
       }
+      setValue(stored);
+      onCommit(stored);
+      return;
     }
-  }, [open]);
-  return jsxs(GoabModal, {
-    open: open,
-    testId: "object-array-modal",
-    heading: title,
-    children: [jsx(DeleteDialogContent, {
-      "data-testid": "object-array-modal-content",
-      children: `${message}?`
-    }), jsxs(GoabButtonGroup, {
-      alignment: "end",
-      children: [jsx(GoabButton, {
-        type: "secondary",
-        testId: "object-array-modal-button",
-        onClick: () => {
-          onCancel();
-        },
-        children: "Cancel"
-      }), jsx(GoabButton, {
-        type: "primary",
-        variant: "destructive",
-        testId: "object-array-confirm-button",
-        onClick: () => {
-          onConfirm();
-        },
-        children: "Delete"
-      })]
-    })]
-  }, 1);
-});
-
-const _excluded$4 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "data", "config", "isStepperReview", "handleChange", "removeItems"];
-const GenerateRows = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
-  if ((schema == null ? void 0 : schema.type) === 'object') {
-    const props = {
-      schema,
-      rowPath,
-      enabled,
-      cells,
-      uischema,
-      isInReview,
-      openDeleteDialog,
-      data,
-      handleChange,
-      errors
-    };
-    return jsx(ListWithDetailsReviewCellDiv, {
-      children: jsx(Cell, Object.assign({}, props, {
-        count: count || 0
-      }))
-    });
-  } else {
-    const props = {
-      schema,
-      rowPath,
-      cellPath: rowPath,
-      enabled,
-      uischema,
-      isInReview,
-      openDeleteDialog,
-      handleChange,
-      data
-    };
-    return jsx(ListWithDetailsReviewCellDiv, {
-      children: jsx(Cell, Object.assign({}, props, {
-        count: count || 0
-      }), rowPath)
-    });
-  }
-};
-const getValidColumnProps = scopedSchema => {
-  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
-    return Object.keys(scopedSchema.properties);
-  }
-  // primitives
-  return [''];
-};
-const EmptyList = ({
-  numColumns,
-  noDataMessage,
-  translations
-}) => jsx("div", {
-  style: {
-    width: '100%',
-    padding: '1rem 0'
-  },
-  children: jsx(TextCenter, {
-    children: jsx("b", {
-      children: noDataMessage
-    })
-  })
-});
-const ctxToNonEmptyCellProps = (ctx, ownProps) => {
-  var _ctx$core, _ctx$core2;
+    const target = getMaskInputTarget(detail);
+    const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : cleaned.length;
+    const overflow = overflowMaskEdit(value, cleaned, caretIndex, mask);
+    if (overflow) {
+      applyInPlaceEdit(target, overflow);
+      return;
+    }
+    const edit = computeMaskEdit(cleaned, caretIndex, mask);
+    applyInPlaceEdit(target, edit);
+    setValue(edit.display);
+    onCommit(edit.stored);
+  };
+  // In-place has no maxLength (the template is already full length) and GoA keyPress is keyup, so restore on overflow.
+  const handleKeyPress = detail => {
+    var _detail$event, _target$value, _target$selectionStar2;
+    const blockDisallowed = shouldBlockKey(detail.key, allowedKeys);
+    const blockOverflow = inPlace && /^[A-Za-z0-9]$/.test(detail.key) && isMaskFilled(value, mask);
+    if (!blockDisallowed && !blockOverflow) {
+      return;
+    }
+    (_detail$event = detail.event) == null || _detail$event.preventDefault();
+    if (!blockOverflow) {
+      return;
+    }
+    const target = getMaskInputTarget(detail);
+    const rawValue = (_target$value = target == null ? void 0 : target.value) != null ? _target$value : value;
+    const overflow = overflowMaskEdit(value, rawValue, (_target$selectionStar2 = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar2 : value.length, mask);
+    if (overflow) {
+      applyInPlaceEdit(target, overflow);
+    }
+  };
   return {
-    uischema: ownProps.uischema,
-    rowPath: ownProps.rowPath,
-    schema: ownProps.schema,
-    rootSchema: (_ctx$core = ctx.core) == null ? void 0 : _ctx$core.schema,
-    errors: ((_ctx$core2 = ctx.core) == null ? void 0 : _ctx$core2.errors) || undefined,
-    enabled: ownProps.enabled,
-    cells: ownProps.cells || ctx.cells,
-    renderers: ownProps.renderers || ctx.renderers,
-    handleChange: ownProps.handleChange
+    value,
+    handleChange,
+    handleKeyPress
   };
 };
-const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
-  var _schema$properties, _uischema$options, _uischema$options2, _errors$filter, _uischema$elements;
+
+const PhoneNumberControl = props => {
+  var _uischema$options, _uischema$options2;
   const {
+    data,
+    path,
     schema,
-    enabled,
-    renderers,
-    cells,
-    rowPath,
     uischema,
-    isInReview,
-    data,
-    count,
-    openDeleteDialog,
     handleChange,
-    errors
+    enabled,
+    visible,
+    required
   } = props;
+  // Default mask can be overridden per field via the UI schema options.
+  const phoneMask = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.phoneMask) || DEFAULT_PATTERNS.phone.mask;
+  // When in-place, the field shows the fill-in template and edits keep the caret in place.
+  const inPlace = (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.inPlace) === true;
+  const [error, setError] = useState('');
   const {
-    noAnswerMessage
-  } = useStepperPageOptions();
-  const element = (schema == null ? void 0 : schema.items) || (schema == null || (_schema$properties = schema.properties) == null || (_schema$properties = _schema$properties[rowPath]) == null ? void 0 : _schema$properties.items) || schema;
-  const required = (element == null ? void 0 : element.required) || [];
-  const properties = element == null ? void 0 : element.properties;
-  let tableKeys = extractNames(uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.detail);
-  if (Object.keys(tableKeys).length === 0) {
-    properties && Object.keys(properties).forEach(item => {
-      tableKeys[item] = item;
-    });
-  }
-  if (properties && Object.keys(properties).length !== Object.keys(tableKeys).length) {
-    const tempTableKeys = {};
-    //For nested objects to display only the top level column.
-    properties && Object.keys(properties).forEach(item => {
-      if (Object.keys(tableKeys).includes(item)) {
-        tempTableKeys[item] = tableKeys[item];
-      } else {
-        // If the property is not in the tableKeys (e.g. it was a nested object in the UI schema),
-        // we still need a header for it to maintain alignment.
-        // Use the property title from the schema, or capitalize the property name.
-        tempTableKeys[item] = properties[item].title || capitalizeFirstLetter(item);
-      }
-    });
-    tableKeys = tempTableKeys;
-  }
-  // Review only shows properties that have a control in the detail UI schema.
-  const detailProperties = extractScopedProperties(uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.detail);
-  const reviewKeys = detailProperties.size > 0 ? Object.fromEntries(Object.entries(tableKeys).filter(([key]) => detailProperties.has(key))) : tableKeys;
-  const hasAnyErrors = Array.isArray(errors) ? (errors == null || (_errors$filter = errors.filter(err => {
-    return err.instancePath.includes(rowPath);
-  })) == null ? void 0 : _errors$filter.length) > 0 : false;
-  return jsxs(NonEmptyCellStyle, {
-    "data-testid": `${rowPath}-ObjectListOuterWrapper`,
-    children: [!isInReview && (uischema == null || (_uischema$elements = uischema.elements) == null ? void 0 : _uischema$elements.map(element => {
-      return jsx(JsonFormsDispatch, {
-        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
-        schema: schema,
-        uischema: element,
-        path: rowPath,
-        enabled: enabled,
-        renderers: renderers,
-        cells: cells
-      }, rowPath);
-    })), properties && Object.keys(properties).length > 0 && jsxs(Fragment, {
-      children: [isInReview ? jsx("div", {
-        style: {
-          padding: '0.75rem 0'
-        },
-        "data-testid": `${rowPath}.objectListWrapper`,
-        children: range(count || 0).map((i, key) => {
-          const rowData = data && data[i];
-          if (!rowData) return null;
-          const hasAnyValue = Object.keys(reviewKeys).some(key => {
-            const value = rowData[key];
-            return value !== undefined && value !== null && value !== '';
-          });
-          const hasRowErrors = (errors || []).some(e => e.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
-          if (!hasAnyValue && !hasRowErrors) return null;
-          return jsx(ReviewItemFrame, {
-            "data-testid": `${rowPath}.objectList-${key}`,
-            children: Object.entries(reviewKeys).map(([key, label]) => {
-              var _required$includes, _properties$key;
-              const value = rowData[key];
-              const isRequiredField = (_required$includes = required == null ? void 0 : required.includes(key)) != null ? _required$includes : false;
-              const fieldPath = `/${props.rowPath.replace(/\./g, '/')}/${i}/${key}`;
-              const rowPathMatch = `/${props.rowPath.replace(/\./g, '/')}/${i}`;
-              const fieldError = (errors || []).find(e => {
-                var _msg$match;
-                const msg = e.message || '';
-                const requiredProperty = (_msg$match = msg.match(/'([^']+)'/)) == null ? void 0 : _msg$match[1];
-                return e.instancePath === fieldPath || e.instancePath === rowPathMatch && msg.includes(key) || e.instancePath === rowPathMatch && requiredProperty === key;
-              });
-              const isEmptyValue = value === undefined || value === null || value === '';
-              let reviewError = '';
-              if (fieldError) {
-                const raw = fieldError.message || '';
-                reviewError = raw.includes('required') ? `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required` : raw;
-              } else if (isRequiredField && isEmptyValue) {
-                reviewError = `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required`;
-              }
-              return jsxs(ReviewRow, {
-                "data-testid": `#/properties/${key}-input-${i}-row`,
-                children: [jsxs(ReviewRowLabel, {
-                  children: [(properties == null || (_properties$key = properties[key]) == null ? void 0 : _properties$key.title) || (label !== key ? label : key.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase())), isRequiredField && jsx(RequiredSpan, {
-                    children: " (required)"
-                  }), " :"]
-                }), jsx(ReviewRowValue, {
-                  "data-testid": `#/properties/${key}-input-${i}-review`,
-                  children: renderCellColumn({
-                    data: isEmptyValue ? undefined : value,
-                    error: reviewError,
-                    isRequired: isRequiredField,
-                    errors: errors !== undefined ? errors : [],
-                    element: key,
-                    rowPath,
-                    index: i,
-                    noAnswerMessage: noAnswerMessage != null ? noAnswerMessage : NO_ANSWER_MESSAGE
-                  })
-                })]
-              }, key);
-            })
-          }, i);
+    value,
+    handleChange: handleMaskChange,
+    handleKeyPress
+  } = useMaskedInput({
+    mask: phoneMask,
+    inPlace,
+    data,
+    allowedKeys: DEFAULT_PATTERNS.phone.allowedKeys,
+    onCommit: stored => {
+      setError(stored && !DEFAULT_PATTERNS.phone.pattern.test(stored) ? DEFAULT_PATTERNS.phone.error : '');
+      handleChange(path, stored);
+    }
+  });
+  return jsx(Visible, {
+    "$visible": visible,
+    children: jsx(GoabFormItem, {
+      label: (schema == null ? void 0 : schema.title) || 'Phone number',
+      requirement: required ? 'required' : undefined,
+      error: error,
+      testId: `form-item-${path}`,
+      children: jsx(GoabInput, {
+        type: "tel",
+        name: path,
+        disabled: !enabled,
+        "aria-label": "phone number input",
+        testId: `phone-input-${path}`,
+        value: value,
+        maxLength: inPlace ? undefined : phoneMask.length,
+        placeholder: inPlace ? undefined : maskPlaceholder(phoneMask),
+        onChange: detail => handleMaskChange(detail),
+        onKeyPress: detail => handleKeyPress(detail),
+        width: "100%"
+      }, `${phoneMask}:${inPlace}`)
+    })
+  });
+};
+const GoAPhoneNumberControl = withJsonFormsControlProps(PhoneNumberControl);
+
+const PhoneNumberTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('phone')));
+
+let _$3 = t => t,
+  _t$3,
+  _t2$1,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const SearchBox = styled.div(_t$3 || (_t$3 = _$3`
+  position: relative;
+
+  .suggestions {
+    width: 100%;
+    margin-top: 3px;
+    border-top-width: 0;
+    list-style: none;
+    max-height: 15.5rem;
+    width: 100%;
+    position: absolute;
+
+    background: var(--goa-color-greyscale-white);
+    box-shadow: 0 8px 8px rgb(0 0 0 / 20%), 0 4px 4px rgb(0 0 0 / 10%);
+    z-index: 99;
+    overflow: hidden auto;
+    padding-left: 0;
+  }
+  .suggestions li {
+  }
+  .suggestion-active,
+  .suggestions li:hover {
+    background-color: var(--goa-color-interactive-default);
+    color: var(--goa-color-greyscale-white);
+    cursor: pointer;
+    font-weight: 600;
+  }
+  .input-container {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Ensures it spans the parent container */
+  }
+
+  .input-container .input-spinner {
+    position: absolute;
+    top: 50%;
+    right: 8px; /* Adjust based on padding or margin of the input field */
+    transform: translateY(-50%);
+    z-index: 1; /* Ensure it appears above the input */
+    pointer-events: none; /* Prevent spinner from interfering with clicks */
+  }
+`));
+const AddressIndent = styled.div(_t2$1 || (_t2$1 = _$3`
+  margin: 0 0 var(--goa-space-m) 0;
+  text-wrap: wrap;
+  word-break: break-word;
+  border: 1px solid var(--goa-color-greyscale-300);
+  border-radius: var(--goa-border-radius-xl);
+  padding: var(--goa-space-l);
+`));
+const TextWrap = styled.p(_t3 || (_t3 = _$3`
+  text-wrap: auto;
+  word-break: break-word;
+`));
+const TextWrapDiv = styled.div(_t4 || (_t4 = _$3`
+  text-wrap: auto;
+  word-break: break-word;
+`));
+const LabelDiv = styled.div(_t5 || (_t5 = _$3`
+  color: var(--goa-color-text-default);
+  font: var(--goa-typography-body-m);
+  min-height: 2.625rem;
+  display: flex;
+  align-items: center;
+  text-wrap: auto;
+  word-break: break-word;
+`));
+/* istanbul ignore next */
+const ListItem = styled.li(_t6 || (_t6 = _$3`
+  background-color: ${0};
+  color: ${0};
+  font-weight: ${0};
+  padding: var(--goa-space-xs) var(--goa-space-2xs) var(--goa-space-xs) var(--goa-space-xs);
+  margin-left: 0.25rem;
+`), ({
+  selected,
+  index
+}) => selected === index ? 'var(--goa-color-interactive-default)' : '', ({
+  selected,
+  index
+}) => selected === index ? 'var(--goa-color-greyscale-white) !important' : '', ({
+  selected,
+  index
+}) => selected === index ? '600' : '');
+
+const PhoneNumberReviewControl = props => {
+  const {
+    data,
+    id,
+    required
+  } = props;
+  return jsx(GoabFormItem, {
+    label: "Phone number",
+    error: required && !data ? 'Phone number is required' : '',
+    requirement: required ? 'required' : undefined,
+    children: jsx(TextWrapDiv, {
+      children: jsx("div", {
+        "data-testid": `phone-control-${id}`,
+        children: data || ''
+      })
+    })
+  });
+};
+const GoabInputBasePhoneNumberReviewControl = withJsonFormsAllOfProps(PhoneNumberReviewControl);
+
+let _$2 = t => t,
+  _t$2;
+const PhoneGrid = styled.div(_t$2 || (_t$2 = _$2`
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 0.2rem;
+  align-items: start;
+  margin-bottom: var(--goa-space-l) !important;
+
+  goa-form-item {
+    margin-right: 0 !important;
+  }
+`));
+const PHONE_REGEX = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
+const normalizePhoneData = value => ({
+  type: (value == null ? void 0 : value.type) || '',
+  number: (value == null ? void 0 : value.number) || ''
+});
+const PhoneNumberWithTypeControl = props => {
+  const {
+    data,
+    path,
+    handleChange,
+    enabled,
+    visible,
+    required
+  } = props;
+  const [formData, setFormData] = useState(normalizePhoneData(data));
+  const [error, setError] = useState(undefined);
+  useEffect(() => {
+    const nextData = normalizePhoneData(data);
+    setFormData(currentData => currentData.type === nextData.type && currentData.number === nextData.number ? currentData : nextData);
+  }, [data]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateFormData = updated => {
+    setFormData(updated);
+    if (updated.number && !PHONE_REGEX.test(updated.number)) {
+      setError('Enter a valid phone number (e.g., (780) 123-4567)');
+    } else {
+      setError(undefined);
+    }
+    handleChange(path, updated);
+  };
+  return jsx(Visible, {
+    "$visible": visible,
+    children: jsxs(PhoneGrid, {
+      children: [jsx(GoabFormItem, {
+        label: "Phone type",
+        requirement: required ? 'required' : undefined,
+        children: jsxs(GoabDropdown, {
+          name: "type",
+          value: formData.type || '',
+          disabled: !enabled,
+          onChange: detail => updateFormData(Object.assign({}, formData, {
+            type: detail.value
+          })),
+          children: [jsx(GoabDropdownItem, {
+            value: "Mobile"
+          }), jsx(GoabDropdownItem, {
+            value: "Landline"
+          })]
         })
-      }) : jsx(FixTableHeaderAlignment, {
-        children: jsxs(GoabTable, {
-          width: "100%",
-          children: [jsx("thead", {
-            children: jsxs("tr", {
-              children: [Object.entries(tableKeys).map(([value, index]) => {
-                const currentProperty = properties[value];
-                return jsx("th", {
-                  children: jsxs("p", {
-                    children: [(currentProperty == null ? void 0 : currentProperty.title) || index, ' ', (required == null ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
-                      children: "(required)"
-                    })]
-                  })
-                }, index);
-              }), jsx("th", {
-                children: jsx("p", {
-                  children: "Actions"
-                })
-              })]
-            }, 0)
-          }), jsx("tbody", {
-            children: range(count || 0).map((num, i) => {
-              const errorRow = errors == null ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
-              return jsxs("tr", {
-                children: [Object.keys(properties).map((element, ix) => {
-                  var _error$message;
-                  const dataObject = properties[element];
-                  const schemaName = element;
-                  const currentData = data && data[num] ? data[num][element] : '';
-                  //Get out of the loop to not render extra blank columns at the end of the table
-                  if (ix > 1 && Object.keys(tableKeys).length === ix) return null;
-                  const error = (errors == null ? void 0 : errors.filter(e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}` || e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}`)).find(y => {
-                    var _y$message;
-                    return (y == null || (_y$message = y.message) == null ? void 0 : _y$message.includes(element)) || y.instancePath.includes(element);
-                  });
-                  // Create a human-friendly error message for rendering
-                  let humanMessage = createHumanizeError(error, schema, uischema);
-                  if (error != null && (_error$message = error.message) != null && _error$message.includes('must NOT have fewer') && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
-                    humanMessage = `${capitalizeFirstLetter(schemaName)} is required`;
-                  }
-                  return jsx("td", {
-                    children: jsx(GoabFormItem, {
-                      error: humanMessage != null ? humanMessage : '',
-                      mb: errorRow && !error && '2xl' || 'xs',
-                      children: dataObject.enum ? jsxs(GoabDropdown, {
-                        id: schemaName,
-                        name: schemaName,
-                        value: currentData != null ? String(currentData) : '',
-                        testId: `#/properties/${schemaName}-select-${i}`,
-                        onChange: detail => {
-                          const selectedValue = Array.isArray(detail.value) ? detail.value[0] : detail.value;
-                          const coerced = dataObject.type === 'number' && selectedValue !== '' ? Number(selectedValue) : selectedValue;
-                          handleChange(rowPath, {
-                            [num]: {
-                              [schemaName]: coerced
-                            }
-                          });
-                        },
-                        width: "100%",
-                        ariaLabel: schemaName,
-                        error: !!humanMessage,
-                        children: [!(required != null && required.includes(schemaName)) && jsx(GoabDropdownItem, {
-                          value: "",
-                          label: `-- Select ${schemaName} --`
-                        }), dataObject.enum.map(opt => jsx(GoabDropdownItem, {
-                          value: String(opt),
-                          label: String(opt)
-                        }, String(opt)))]
-                      }) : dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoabInput, {
-                        error: humanMessage ? humanMessage.length > 0 : false,
-                        type: dataObject.type === 'number' ? 'number' : 'text',
-                        id: schemaName,
-                        name: schemaName,
-                        value: currentData,
-                        testId: `#/properties/${schemaName}-input-${i}`,
-                        onChange: detail => {
-                          handleChange(rowPath, {
-                            [num]: {
-                              [detail.name]: dataObject.type === 'number' ? parseInt(detail.value) : detail.value
-                            }
-                          });
-                        },
-                        ariaLabel: schemaName,
-                        width: "100%"
-                      }) : jsx(GoabCallout, {
-                        type: "important",
-                        size: "medium",
-                        testId: "form-support-callout",
-                        heading: "Not supported",
-                        children: "Only string, number, and enum are supported inside arrays"
-                      })
-                    })
-                  }, ix);
-                }), !isInReview && jsx("td", {
-                  style: {
-                    alignContent: 'baseLine',
-                    paddingTop: '18px'
-                  },
-                  children: jsx("div", {
-                    children: jsx(GoabIconButton, {
-                      icon: "trash",
-                      title: "trash button",
-                      testId: "trash-icon-button",
-                      "aria-label": `remove-element-${num}`,
-                      onClick: () => openDeleteDialog(num)
-                    })
-                  })
-                })]
-              }, `${rowPath}-${i}-${num}`);
-            })
+      }), jsx(GoabFormItem, {
+        label: "Phone number",
+        error: error,
+        requirement: required ? 'required' : undefined,
+        children: jsx(GoabInput, {
+          type: "tel",
+          name: "number",
+          placeholder: "(000) 000-0000",
+          value: formData.number || '',
+          disabled: !enabled,
+          onChange: detail => updateFormData(Object.assign({}, formData, {
+            number: detail.value
+          }))
+        })
+      })]
+    })
+  });
+};
+const GoAPhoneNumberWithTypeControl = withJsonFormsControlProps(PhoneNumberWithTypeControl);
+
+const isPhoneNumberWithType = createSchemaMatchTester(['number', 'type'], true);
+const PhoneNumberWithTypeTester = rankWith(4, isPhoneNumberWithType);
+
+const PhoneNumberWithTypeReviewControl = props => {
+  const {
+    data,
+    id,
+    required
+  } = props;
+  return jsxs(PhoneGrid, {
+    children: [jsx(GoabFormItem, {
+      label: "Phone number",
+      error: required && !(data != null && data.number) ? 'Phone number is required' : '',
+      requirement: required ? 'required' : undefined,
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `phone-number-control-${id}`,
+          children: (data == null ? void 0 : data.number) || ''
+        })
+      })
+    }), jsx(GoabFormItem, {
+      label: "Phone type",
+      error: required && !(data != null && data.type) ? 'Phone type is required' : '',
+      requirement: required ? 'required' : undefined,
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `phone-type-control-${id}`,
+          children: (data == null ? void 0 : data.type) || ''
+        })
+      })
+    })]
+  });
+};
+const GoabInputBasePhoneNumberWithTypeReviewControl = withJsonFormsAllOfProps(PhoneNumberWithTypeReviewControl);
+
+let _$1 = t => t,
+  _t$1;
+const FormFieldWrapper = styled.div(_t$1 || (_t$1 = _$1`
+  margin-bottom: var(--goa-space-l);
+`));
+
+const ContractInfoControl = props => {
+  var _options$enableEmail, _options$enablePhone, _options$emailFirst;
+  const {
+    data = {},
+    path,
+    handleChange,
+    enabled,
+    visible,
+    required,
+    uischema
+  } = props;
+  const handleFieldChange = (field, value) => {
+    handleChange(`${path}.${field}`, value);
+  };
+  const emailProps = Object.assign({}, props, {
+    data: data == null ? void 0 : data.email,
+    path: `${path}.email`
+  });
+  const phoneProps = Object.assign({}, props, {
+    data: data == null ? void 0 : data.phone,
+    path: `${path}.phone`
+  });
+  const {
+    options
+  } = uischema;
+  const enableEmail = (_options$enableEmail = options == null ? void 0 : options.enableEmail) != null ? _options$enableEmail : true;
+  const enablePhone = (_options$enablePhone = options == null ? void 0 : options.enablePhone) != null ? _options$enablePhone : true;
+  const emailFirst = (_options$emailFirst = options == null ? void 0 : options.emailFirst) != null ? _options$emailFirst : false;
+  if (!enableEmail && !enablePhone) {
+    throw new Error('At least one contact method must be enabled');
+  }
+  return jsxs("div", {
+    style: {
+      display: visible ? 'block' : 'none'
+    },
+    children: [enableEmail && emailFirst && jsx(GoAEmailInput, Object.assign({}, emailProps)), enablePhone && jsx(FormFieldWrapper, {
+      children: jsx(PhoneNumberControl, Object.assign({}, phoneProps))
+    }), enableEmail && !emailFirst && jsx(GoAEmailInput, Object.assign({}, emailProps)), enableEmail && enablePhone && jsx(FormFieldWrapper, {
+      children: jsx(GoabFormItem, {
+        label: "Preferred Contact Method",
+        requirement: required ? 'required' : undefined,
+        children: jsxs(GoabDropdown, {
+          testId: `preferred-contact-${path}`,
+          disabled: !enabled,
+          value: data.preferredContactMethod || '',
+          onChange: detail => handleFieldChange('preferredContactMethod', detail.value || ''),
+          width: "250px",
+          children: [jsx(GoabDropdownItem, {
+            value: "",
+            label: "Select a Contact Method"
+          }), emailFirst && jsx(GoabDropdownItem, {
+            value: "Email",
+            label: "Email"
+          }), jsx(GoabDropdownItem, {
+            value: "Phone",
+            label: "Phone"
+          }), !emailFirst && jsx(GoabDropdownItem, {
+            value: "Email",
+            label: "Email"
           })]
         })
-      }), hasAnyErrors && isInReview && jsx(GoabFormItem, {
-        error: `There are validation errors for '${capitalizeFirstLetter(rowPath)}'`
-      })]
+      })
     })]
   });
-});
-const NonEmptyCell = ownProps => {
-  const data = ownProps.data || {};
-  const ctx = useJsonForms();
-  const emptyCellProps = ctxToNonEmptyCellProps(ctx, Object.assign({}, ownProps, {
-    data
-  }));
-  const isValid = isEmpty$1(emptyCellProps.errors);
-  return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
-    handleChange: ownProps == null ? void 0 : ownProps.handleChange,
-    isInReview: ownProps == null ? void 0 : ownProps.isInReview,
-    isValid: isValid,
-    openDeleteDialog: ownProps == null ? void 0 : ownProps.openDeleteDialog,
-    data: data,
-    count: ownProps == null ? void 0 : ownProps.count
-  }));
 };
-const NonEmptyRowComponent = ({
-  childPath,
-  schema,
-  openDeleteDialog,
-  enabled,
-  cells,
-  uischema,
-  isInReview,
-  data,
-  count,
-  handleChange
-}) => {
-  return jsx("div", {
-    children: enabled ? isInReview ? jsx("div", {
-      children: jsx("div", {
-        children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
-      })
-    }) : jsx(GoabContainer, {
-      children: jsx("div", {
-        children: jsx("div", {
-          children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
-        })
+
+const ContractInfoControlReview = props => {
+  var _props$uischema, _schema$required, _options$enableEmail, _options$enablePhone, _options$emailFirst;
+  const reportChange = useReviewChange();
+  const showChangeButtons = useShowChangeButtons();
+  const stepId = (_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.stepId;
+  const {
+    uischema,
+    data = {},
+    id,
+    schema
+  } = props;
+  const requiredFields = (_schema$required = schema == null ? void 0 : schema.required) != null ? _schema$required : [];
+  const isMissing = value => value === undefined || value === null || value === '';
+  const renderRow = (fieldLabel, value, fieldName, testId) => {
+    var _uischema$options;
+    return jsx("tr", {
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [jsxs(ReviewHeader, {
+          children: [jsx(ReviewLabel, {
+            children: fieldLabel
+          }), showChangeButtons && stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(BackButton, {
+            text: "Change",
+            link: () => reportChange(stepId, uischema.scope),
+            testId: `${fieldName}-change-btn`,
+            showBackIcon: false
+          })]
+        }), jsxs(ReviewValue, {
+          children: [jsx("div", {
+            "data-testid": testId,
+            children: value != null ? value : ''
+          }), requiredFields.includes(fieldName) && isMissing(value) && jsx(GoabFormItem, {
+            error: `${fieldLabel} is required`,
+            label: ""
+          })]
+        })]
       })
-    }) : null
-  }, childPath);
+    }, testId);
+  };
+  const {
+    options
+  } = uischema;
+  const enableEmail = (_options$enableEmail = options == null ? void 0 : options.enableEmail) != null ? _options$enableEmail : true;
+  const enablePhone = (_options$enablePhone = options == null ? void 0 : options.enablePhone) != null ? _options$enablePhone : true;
+  const emailFirst = (_options$emailFirst = options == null ? void 0 : options.emailFirst) != null ? _options$emailFirst : false;
+  if (!enableEmail && !enablePhone) {
+    throw new Error('At least one contact method must be enabled');
+  }
+  return jsxs(Fragment, {
+    children: [enableEmail && emailFirst && renderRow('Email', data == null ? void 0 : data.email, 'email', `email-control-${id}`), enablePhone && renderRow('Phone number', data == null ? void 0 : data.phone, 'phone', `phone-control-${id}`), enableEmail && !emailFirst && renderRow('Email', data == null ? void 0 : data.email, 'email', `email-control-${id}`), enableEmail && enablePhone && renderRow('Preferred contact method', (data == null ? void 0 : data.preferredContactMethod) || 'Email', 'preferredContactMethod', `preferred-contact-${id}`)]
+  });
 };
-const NonEmptyList = /*#__PURE__*/React.memo(NonEmptyRowComponent);
-const ObjectArrayList = ({
-  data,
-  path,
-  schema,
-  openDeleteDialog,
-  uischema,
-  config,
-  enabled,
-  cells,
-  translations,
-  count,
-  isInReview,
-  handleChange
-}) => {
-  const isEmptyList = count === 0;
-  if (isEmptyList) {
-    var _uischema$options$noD, _uischema$options3;
-    const noDataMessage = (_uischema$options$noD = (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.noDataMessage) != null ? _uischema$options$noD : 'No data';
-    return jsx(EmptyList, {
-      noDataMessage: noDataMessage,
-      numColumns: getValidColumnProps(schema).length + 1,
-      translations: translations
-    });
+const GoAContractInfoControlReview = withJsonFormsAllOfProps(ContractInfoControlReview);
+
+const isContactInformation = createSchemaMatchTester(['email', 'phone', 'preferredContactMethod']);
+const ContactInformationTester = rankWith(4, isContactInformation);
+
+var $$4 = _export;
+var iterate = iterate$c;
+var createProperty$1 = createProperty$4;
+
+// `Object.fromEntries` method
+// https://github.com/tc39/proposal-object-from-entries
+$$4({ target: 'Object', stat: true }, {
+  fromEntries: function fromEntries(iterable) {
+    var obj = {};
+    iterate(iterable, function (k, v) {
+      createProperty$1(obj, k, v);
+    }, { AS_ENTRIES: true });
+    return obj;
+  }
+});
+
+var global$2 = global$v;
+var fails = fails$D;
+var uncurryThis$3 = functionUncurryThis;
+var toString$2 = toString$n;
+var trim = stringTrim.trim;
+var whitespaces = whitespaces$3;
+
+var $parseInt$1 = global$2.parseInt;
+var Symbol$1 = global$2.Symbol;
+var ITERATOR = Symbol$1 && Symbol$1.iterator;
+var hex = /^[+-]?0x/i;
+var exec$2 = uncurryThis$3(hex.exec);
+var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
+  // MS Edge 18- broken with boxed symbols
+  || (ITERATOR && !fails(function () { $parseInt$1(Object(ITERATOR)); }));
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+var numberParseInt = FORCED ? function parseInt(string, radix) {
+  var S = trim(toString$2(string));
+  return $parseInt$1(S, (radix >>> 0) || (exec$2(hex, S) ? 16 : 10));
+} : $parseInt$1;
+
+var $$3 = _export;
+var $parseInt = numberParseInt;
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+$$3({ global: true, forced: parseInt !== $parseInt }, {
+  parseInt: $parseInt
+});
+
+const ADD_DATA_ACTION = 'jsonforms/register/add_data_action';
+const SET_DATA_ACTION = 'jsonforms/register/set_data_action';
+const INCREMENT_ACTION = 'jsonforms/register/increment_action';
+const DELETE_ACTION = 'jsonforms/register/delete_action';
+const initialState = {
+  categories: {}
+};
+
+function objectListReducer(state, action) {
+  switch (action.type) {
+    case ADD_DATA_ACTION:
+      {
+        //ok so we're assuming we're already getting the updated category data
+        const {
+          categories
+        } = state;
+        const {
+          name,
+          category
+        } = action.payload;
+        const newCategories = Object.assign({}, categories);
+        if (!newCategories[name]) {
+          newCategories[name] = {
+            data: category
+          };
+        } else {
+          newCategories[name].data = category;
+        }
+        return Object.assign({}, state, {
+          categories: newCategories
+        });
+      }
+    case SET_DATA_ACTION:
+      {
+        const CategoriesStateData = action.payload;
+        return Object.assign({}, state, {
+          categories: CategoriesStateData
+        });
+      }
+    case INCREMENT_ACTION:
+      {
+        const {
+          categories
+        } = state;
+        const name = action.payload;
+        const newCategories = Object.assign({}, categories);
+        // Assuming you want to increment the count of a category:
+        if (newCategories[name]) {
+          const updatedCategory = Object.assign({}, categories[name], {
+            count: (categories[name].count || 0) + 1
+          });
+          return Object.assign({}, state, {
+            categories: Object.assign({}, categories, {
+              [name]: updatedCategory
+            })
+          });
+        } else {
+          newCategories[name] = {
+            count: 1,
+            data: {}
+          };
+        }
+        return Object.assign({}, state, {
+          categories: newCategories
+        });
+      }
+    case DELETE_ACTION:
+      {
+        const {
+          name,
+          category
+        } = action.payload;
+        const {
+          categories
+        } = state;
+        const newCategories = Object.assign({}, categories);
+        newCategories[name] = category;
+        return Object.assign({}, state, {
+          categories: newCategories
+        });
+      }
+    default:
+      return state;
   }
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const childPath = path;
-  return jsx(NonEmptyList, {
-    childPath: childPath,
-    rowIndex: 0,
-    schema: schema,
-    openDeleteDialog: openDeleteDialog,
-    showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
-    enabled: enabled,
-    handleChange: handleChange,
-    cells: cells,
-    path: path,
-    uischema: uischema,
-    translations: translations,
-    isInReview: isInReview,
-    count: count,
-    data: data
-  }, 0);
-};
-const ObjectArrayControl = props => {
-  var _registers$categories, _registers$categories2, _registers$categories3, _registers$categories4, _uischema$options6;
-  const [registers, dispatch] = useReducer(objectListReducer, initialState);
-  const [open, setOpen] = useState(false);
-  const [rowData, setRowData] = useState(0);
-  const [maxItemsError, setMaxItemsError] = useState('');
-  const reportChange = useReviewChange();
-  const showChangeButtons = useShowChangeButtons();
-  const {
-      label,
-      path,
+}
+
+const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
+  open,
+  onConfirm,
+  onCancel,
+  title,
+  message
+}) {
+  useEffect(() => {
+    if (open) {
+      const deleteBtn = document.querySelector('[data-testId="object-array-confirm-button"]');
+      if (deleteBtn) {
+        setTimeout(() => {
+          var _deleteBtn$shadowRoot;
+          (_deleteBtn$shadowRoot = deleteBtn.shadowRoot) == null || (_deleteBtn$shadowRoot = _deleteBtn$shadowRoot.querySelector('button')) == null || _deleteBtn$shadowRoot.focus();
+        }, 200);
+      }
+    }
+  }, [open]);
+  return jsxs(GoabModal, {
+    open: open,
+    testId: "object-array-modal",
+    heading: title,
+    children: [jsx(DeleteDialogContent, {
+      "data-testid": "object-array-modal-content",
+      children: `${message}?`
+    }), jsxs(GoabButtonGroup, {
+      alignment: "end",
+      children: [jsx(GoabButton, {
+        type: "secondary",
+        testId: "object-array-modal-button",
+        onClick: () => {
+          onCancel();
+        },
+        children: "Cancel"
+      }), jsx(GoabButton, {
+        type: "primary",
+        variant: "destructive",
+        testId: "object-array-confirm-button",
+        onClick: () => {
+          onConfirm();
+        },
+        children: "Delete"
+      })]
+    })]
+  }, 1);
+});
+
+const _excluded$3 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "data", "config", "isStepperReview", "handleChange", "removeItems"];
+const GenerateRows = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
+  if ((schema == null ? void 0 : schema.type) === 'object') {
+    const props = {
       schema,
-      rootSchema,
-      uischema,
-      errors,
-      visible,
+      rowPath,
       enabled,
       cells,
+      uischema,
+      isInReview,
+      openDeleteDialog,
       data,
-      config,
-      isStepperReview
-    } = props,
-    additionalProps = _objectWithoutPropertiesLoose(props, _excluded$4);
-  const parsedData = Array.isArray(data) ? data : [];
-  const hasDataRows = parsedData.length > 0;
-  const latestData = hasDataRows ? Object.fromEntries(parsedData.map((item, index) => [String(index), item])) : (_registers$categories = (_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data) != null ? _registers$categories : {};
-  const latestCount = hasDataRows ? parsedData.length : (_registers$categories3 = (_registers$categories4 = registers.categories[path]) == null ? void 0 : _registers$categories4.count) != null ? _registers$categories3 : Object.keys(latestData).length;
-  const openDeleteDialog = useCallback((rowIndex, name) => {
-    setOpen(true);
-    setRowData(rowIndex);
-  }, [setOpen, setRowData]);
-  const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
-  const deleteConfirm = () => {
-    if (deleteItem && path) {
-      deleteItem(path, rowData);
-    }
-    setOpen(false);
-  };
-  //  eslint-disable-next-line
-  const addItem = (path, value) => {
-    var _uischema$options4, _uischema$options5;
-    const maxItems = (_uischema$options4 = uischema.options) != null && (_uischema$options4 = _uischema$options4.detail) != null && _uischema$options4.maxItems ? (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.detail) == null ? void 0 : _uischema$options5.maxItems : DEFAULT_MAX_ITEMS;
-    if (latestCount < maxItems) {
-      return () => {
-        const currentRows = hasDataRows ? parsedData : Object.keys(latestData).sort((a, b) => Number(a) - Number(b)).map(key => latestData[key]);
-        const nextData = [...currentRows, value];
-        const categoryData = Object.fromEntries(nextData.map((item, index) => [String(index), item]));
-        props.handleChange(path, nextData);
-        dispatch({
-          type: SET_DATA_ACTION,
-          payload: Object.assign({}, registers.categories, {
-            [path]: {
-              count: nextData.length,
-              data: categoryData
-            }
-          })
-        });
-      };
-    } else {
-      setMaxItemsError(`Maximum ${maxItems} items allowed.`);
-      setTimeout(() => {
-        setMaxItemsError('');
-      }, 3000);
-    }
-  };
-  // eslint-disable-next-line
-  const deleteItem = (path, value) => {
-    const categories = registers.categories;
-    const currentCategory = categories[path];
-    const newCategoryData = {};
-    if (currentCategory != null && currentCategory.data) {
-      delete currentCategory.data[value];
-      Object.keys(currentCategory.data).forEach((key, index) => {
-        newCategoryData[index] = currentCategory.data[key];
-      });
-      currentCategory.data = newCategoryData;
-    }
-    if (currentCategory != null && currentCategory.count && (currentCategory == null ? void 0 : currentCategory.count) > 0) currentCategory.count--;
-    let handleChangeData = Object.keys(newCategoryData).map(key => {
-      return newCategoryData[key];
+      handleChange,
+      errors
+    };
+    return jsx(ListWithDetailsReviewCellDiv, {
+      children: jsx(Cell, Object.assign({}, props, {
+        count: count || 0
+      }))
     });
-    if (handleChangeData.length === 0) {
-      handleChangeData = null;
-    }
-    setMaxItemsError('');
-    props.handleChange(path, handleChangeData);
-    dispatch({
-      type: DELETE_ACTION,
-      payload: {
-        name: path,
-        category: currentCategory
-      }
+  } else {
+    const props = {
+      schema,
+      rowPath,
+      cellPath: rowPath,
+      enabled,
+      uischema,
+      isInReview,
+      openDeleteDialog,
+      handleChange,
+      data
+    };
+    return jsx(ListWithDetailsReviewCellDiv, {
+      children: jsx(Cell, Object.assign({}, props, {
+        count: count || 0
+      }), rowPath)
     });
+  }
+};
+const getValidColumnProps = scopedSchema => {
+  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
+    return Object.keys(scopedSchema.properties);
+  }
+  // primitives
+  return [''];
+};
+const EmptyList = ({
+  numColumns,
+  noDataMessage,
+  translations
+}) => jsx("div", {
+  style: {
+    width: '100%',
+    padding: '1rem 0'
+  },
+  children: jsx(TextCenter, {
+    children: jsx("b", {
+      children: noDataMessage
+    })
+  })
+});
+const ctxToNonEmptyCellProps = (ctx, ownProps) => {
+  var _ctx$core, _ctx$core2;
+  return {
+    uischema: ownProps.uischema,
+    rowPath: ownProps.rowPath,
+    schema: ownProps.schema,
+    rootSchema: (_ctx$core = ctx.core) == null ? void 0 : _ctx$core.schema,
+    errors: ((_ctx$core2 = ctx.core) == null ? void 0 : _ctx$core2.errors) || undefined,
+    enabled: ownProps.enabled,
+    cells: ownProps.cells || ctx.cells,
+    renderers: ownProps.renderers || ctx.renderers,
+    handleChange: ownProps.handleChange
   };
-  //eslint-disable-next-line
-  const handleChangeWithData = (path, value) => {
-    if (path) {
-      var _categories$path;
-      const categories = registers.categories;
-      const currentCategory = ((_categories$path = categories[path]) == null ? void 0 : _categories$path.data) || {};
-      const newData = {};
-      const allKeys = Object.keys(value).concat(Object.keys(currentCategory || []));
-      const allKeysUnique = allKeys.filter((a, b) => allKeys.indexOf(a) === b);
-      Object.keys(allKeysUnique).forEach(num => {
-        if (!newData[num]) {
-          newData[num] = {};
-        }
-        currentCategory[num] && Object.keys(currentCategory[num]).forEach(path => {
-          newData[num][path] = currentCategory[num][path];
-        });
-        value[num] && Object.keys(value[num]).forEach(path => {
-          newData[num][path] = value[num][path] !== undefined ? value[num][path] : currentCategory[num] && currentCategory[num][path];
-        });
-      });
-      const handleChangeData = Object.keys(newData).map(key => {
-        return newData[key];
-      });
-      props.handleChange(path, JSON.parse(JSON.stringify(handleChangeData)));
-      dispatch({
-        type: ADD_DATA_ACTION,
-        payload: {
-          name: path,
-          category: newData
-        }
-      });
-    }
-  };
-  useEffect(() => {
-    var _currentCategory$coun;
-    const updatedData = Object.fromEntries((parsedData || []).map((item, index) => [index, item]));
-    const count = Object.keys(updatedData).length;
-    const currentCategory = registers.categories[path];
-    if (Array.isArray(data) && data.length === 0 && ((_currentCategory$coun = currentCategory == null ? void 0 : currentCategory.count) != null ? _currentCategory$coun : 0) > 0) {
-      return;
-    }
-    const hasSameCount = (currentCategory == null ? void 0 : currentCategory.count) === count;
-    const hasSameData = JSON.stringify((currentCategory == null ? void 0 : currentCategory.data) || {}) === JSON.stringify(updatedData);
-    if (hasSameCount && hasSameData) {
-      return;
-    }
-    const dispatchData = Object.assign({}, registers.categories, {
-      [path]: {
-        count: count,
-        data: updatedData
-      }
+};
+const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
+  var _schema$properties, _uischema$options, _uischema$options2, _errors$filter, _uischema$elements;
+  const {
+    schema,
+    enabled,
+    renderers,
+    cells,
+    rowPath,
+    uischema,
+    isInReview,
+    data,
+    count,
+    openDeleteDialog,
+    handleChange,
+    errors
+  } = props;
+  const {
+    noAnswerMessage
+  } = useStepperPageOptions();
+  const element = (schema == null ? void 0 : schema.items) || (schema == null || (_schema$properties = schema.properties) == null || (_schema$properties = _schema$properties[rowPath]) == null ? void 0 : _schema$properties.items) || schema;
+  const required = (element == null ? void 0 : element.required) || [];
+  const properties = element == null ? void 0 : element.properties;
+  let tableKeys = extractNames(uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.detail);
+  if (Object.keys(tableKeys).length === 0) {
+    properties && Object.keys(properties).forEach(item => {
+      tableKeys[item] = item;
     });
-    dispatch({
-      type: SET_DATA_ACTION,
-      payload: dispatchData
+  }
+  if (properties && Object.keys(properties).length !== Object.keys(tableKeys).length) {
+    const tempTableKeys = {};
+    //For nested objects to display only the top level column.
+    properties && Object.keys(properties).forEach(item => {
+      if (Object.keys(tableKeys).includes(item)) {
+        tempTableKeys[item] = tableKeys[item];
+      } else {
+        // If the property is not in the tableKeys (e.g. it was a nested object in the UI schema),
+        // we still need a header for it to maintain alignment.
+        // Use the property title from the schema, or capitalize the property name.
+        tempTableKeys[item] = properties[item].title || capitalizeFirstLetter(item);
+      }
     });
-  }, [parsedData, path]);
-  const controlElement = uischema;
-  const listTitle = label || ((_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.title);
-  const isInReview = isStepperReview === true;
-  const isListWithDetail = controlElement.type === 'ListWithDetail';
-  if (isInReview) {
-    var _uischema$options7, _uischema$options8;
-    return jsx("tr", {
-      children: jsxs(PageReviewContainer, {
-        colSpan: 3,
-        children: [listTitle ? isListWithDetail && additionalProps.required && (data === null || data === undefined) ? jsx("b", {
-          children: jsxs(ListWithDetailWarningIconDiv, {
-            children: [jsx(GoabIcon, {
-              type: "warning",
-              title: "warning",
-              size: "small",
-              theme: "filled",
-              ml: "2xs",
-              mt: "2xs"
-            }), listTitle, " is required."]
-          })
-        }) : jsxs(ReviewHeader, {
-          style: {
-            width: '100%',
-            display: 'grid',
-            gridTemplateColumns: '1fr auto',
-            alignItems: 'center'
-          },
-          children: [jsxs(ReviewLabel, {
-            children: [listTitle, jsx("span", {
-              children: additionalProps.required && '(required)'
-            }), maxItemsError && jsx("span", {
-              style: {
-                color: 'red',
-                marginLeft: '1rem'
-              },
-              children: maxItemsError
-            })]
-          }), showChangeButtons && ((_uischema$options7 = uischema.options) == null ? void 0 : _uischema$options7.stepId) !== undefined && !((_uischema$options8 = uischema.options) != null && (_uischema$options8 = _uischema$options8.componentProps) != null && _uischema$options8.readOnly) && jsx(BackButton, {
-            text: "Change",
-            link: () => {
-              var _uischema$options9;
-              return reportChange((_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.stepId, uischema.scope);
-            },
-            showBackIcon: false
+    tableKeys = tempTableKeys;
+  }
+  // Review only shows properties that have a control in the detail UI schema.
+  const detailProperties = extractScopedProperties(uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.detail);
+  const reviewKeys = detailProperties.size > 0 ? Object.fromEntries(Object.entries(tableKeys).filter(([key]) => detailProperties.has(key))) : tableKeys;
+  const hasAnyErrors = Array.isArray(errors) ? (errors == null || (_errors$filter = errors.filter(err => {
+    return err.instancePath.includes(rowPath);
+  })) == null ? void 0 : _errors$filter.length) > 0 : false;
+  return jsxs(NonEmptyCellStyle, {
+    "data-testid": `${rowPath}-ObjectListOuterWrapper`,
+    children: [!isInReview && (uischema == null || (_uischema$elements = uischema.elements) == null ? void 0 : _uischema$elements.map(element => {
+      return jsx(JsonFormsDispatch, {
+        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+        schema: schema,
+        uischema: element,
+        path: rowPath,
+        enabled: enabled,
+        renderers: renderers,
+        cells: cells
+      }, rowPath);
+    })), properties && Object.keys(properties).length > 0 && jsxs(Fragment, {
+      children: [isInReview ? jsx("div", {
+        style: {
+          padding: '0.75rem 0'
+        },
+        "data-testid": `${rowPath}.objectListWrapper`,
+        children: range(count || 0).map((i, key) => {
+          const rowData = data && data[i];
+          if (!rowData) return null;
+          const hasAnyValue = Object.keys(reviewKeys).some(key => {
+            const value = rowData[key];
+            return value !== undefined && value !== null && value !== '';
+          });
+          const hasRowErrors = (errors || []).some(e => e.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
+          if (!hasAnyValue && !hasRowErrors) return null;
+          return jsx(ReviewItemFrame, {
+            "data-testid": `${rowPath}.objectList-${key}`,
+            children: Object.entries(reviewKeys).map(([key, label]) => {
+              var _required$includes, _properties$key;
+              const value = rowData[key];
+              const isRequiredField = (_required$includes = required == null ? void 0 : required.includes(key)) != null ? _required$includes : false;
+              const fieldPath = `/${props.rowPath.replace(/\./g, '/')}/${i}/${key}`;
+              const rowPathMatch = `/${props.rowPath.replace(/\./g, '/')}/${i}`;
+              const fieldError = (errors || []).find(e => {
+                var _msg$match;
+                const msg = e.message || '';
+                const requiredProperty = (_msg$match = msg.match(/'([^']+)'/)) == null ? void 0 : _msg$match[1];
+                return e.instancePath === fieldPath || e.instancePath === rowPathMatch && msg.includes(key) || e.instancePath === rowPathMatch && requiredProperty === key;
+              });
+              const isEmptyValue = value === undefined || value === null || value === '';
+              let reviewError = '';
+              if (fieldError) {
+                const raw = fieldError.message || '';
+                reviewError = raw.includes('required') ? `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required` : raw;
+              } else if (isRequiredField && isEmptyValue) {
+                reviewError = `${capitalizeFirstLetter(label.replace(/[_-]/g, ' '))} is required`;
+              }
+              return jsxs(ReviewRow, {
+                "data-testid": `#/properties/${key}-input-${i}-row`,
+                children: [jsxs(ReviewRowLabel, {
+                  children: [(properties == null || (_properties$key = properties[key]) == null ? void 0 : _properties$key.title) || (label !== key ? label : key.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase())), isRequiredField && jsx(RequiredSpan, {
+                    children: " (required)"
+                  }), " :"]
+                }), jsx(ReviewRowValue, {
+                  "data-testid": `#/properties/${key}-input-${i}-review`,
+                  children: renderCellColumn({
+                    data: isEmptyValue ? undefined : value,
+                    error: reviewError,
+                    isRequired: isRequiredField,
+                    errors: errors !== undefined ? errors : [],
+                    element: key,
+                    rowPath,
+                    index: i,
+                    noAnswerMessage: noAnswerMessage != null ? noAnswerMessage : NO_ANSWER_MESSAGE
+                  })
+                })]
+              }, key);
+            })
+          }, i);
+        })
+      }) : jsx(FixTableHeaderAlignment, {
+        children: jsxs(GoabTable, {
+          width: "100%",
+          children: [jsx("thead", {
+            children: jsxs("tr", {
+              children: [Object.entries(tableKeys).map(([value, index]) => {
+                const currentProperty = properties[value];
+                return jsx("th", {
+                  children: jsxs("p", {
+                    children: [(currentProperty == null ? void 0 : currentProperty.title) || index, ' ', (required == null ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
+                      children: "(required)"
+                    })]
+                  })
+                }, index);
+              }), jsx("th", {
+                children: jsx("p", {
+                  children: "Actions"
+                })
+              })]
+            }, 0)
+          }), jsx("tbody", {
+            children: range(count || 0).map((num, i) => {
+              const errorRow = errors == null ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
+              return jsxs("tr", {
+                children: [Object.keys(properties).map((element, ix) => {
+                  var _error$message;
+                  const dataObject = properties[element];
+                  const schemaName = element;
+                  const currentData = data && data[num] ? data[num][element] : '';
+                  //Get out of the loop to not render extra blank columns at the end of the table
+                  if (ix > 1 && Object.keys(tableKeys).length === ix) return null;
+                  const error = (errors == null ? void 0 : errors.filter(e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}` || e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}`)).find(y => {
+                    var _y$message;
+                    return (y == null || (_y$message = y.message) == null ? void 0 : _y$message.includes(element)) || y.instancePath.includes(element);
+                  });
+                  // Create a human-friendly error message for rendering
+                  let humanMessage = createHumanizeError(error, schema, uischema);
+                  if (error != null && (_error$message = error.message) != null && _error$message.includes('must NOT have fewer') && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
+                    humanMessage = `${capitalizeFirstLetter(schemaName)} is required`;
+                  }
+                  return jsx("td", {
+                    children: jsx(GoabFormItem, {
+                      error: humanMessage != null ? humanMessage : '',
+                      mb: errorRow && !error && '2xl' || 'xs',
+                      children: dataObject.enum ? jsxs(GoabDropdown, {
+                        id: schemaName,
+                        name: schemaName,
+                        value: currentData != null ? String(currentData) : '',
+                        testId: `#/properties/${schemaName}-select-${i}`,
+                        onChange: detail => {
+                          const selectedValue = Array.isArray(detail.value) ? detail.value[0] : detail.value;
+                          const coerced = dataObject.type === 'number' && selectedValue !== '' ? Number(selectedValue) : selectedValue;
+                          handleChange(rowPath, {
+                            [num]: {
+                              [schemaName]: coerced
+                            }
+                          });
+                        },
+                        width: "100%",
+                        ariaLabel: schemaName,
+                        error: !!humanMessage,
+                        children: [!(required != null && required.includes(schemaName)) && jsx(GoabDropdownItem, {
+                          value: "",
+                          label: `-- Select ${schemaName} --`
+                        }), dataObject.enum.map(opt => jsx(GoabDropdownItem, {
+                          value: String(opt),
+                          label: String(opt)
+                        }, String(opt)))]
+                      }) : dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoabInput, {
+                        error: humanMessage ? humanMessage.length > 0 : false,
+                        type: dataObject.type === 'number' ? 'number' : 'text',
+                        id: schemaName,
+                        name: schemaName,
+                        value: currentData,
+                        testId: `#/properties/${schemaName}-input-${i}`,
+                        onChange: detail => {
+                          handleChange(rowPath, {
+                            [num]: {
+                              [detail.name]: dataObject.type === 'number' ? parseInt(detail.value) : detail.value
+                            }
+                          });
+                        },
+                        ariaLabel: schemaName,
+                        width: "100%"
+                      }) : jsx(GoabCallout, {
+                        type: "important",
+                        size: "medium",
+                        testId: "form-support-callout",
+                        heading: "Not supported",
+                        children: "Only string, number, and enum are supported inside arrays"
+                      })
+                    })
+                  }, ix);
+                }), !isInReview && jsx("td", {
+                  style: {
+                    alignContent: 'baseLine',
+                    paddingTop: '18px'
+                  },
+                  children: jsx("div", {
+                    children: jsx(GoabIconButton, {
+                      icon: "trash",
+                      title: "trash button",
+                      testId: "trash-icon-button",
+                      "aria-label": `remove-element-${num}`,
+                      onClick: () => openDeleteDialog(num)
+                    })
+                  })
+                })]
+              }, `${rowPath}-${i}-${num}`);
+            })
           })]
-        }) : null, jsx(ObjectArrayList, Object.assign({
-          path: path,
-          schema: schema,
-          uischema: uischema,
-          enabled: enabled,
-          openDeleteDialog: openDeleteDialog,
-          translations: {},
-          count: latestCount,
-          data: latestData,
-          cells: cells,
-          config: config,
-          isInReview: isInReview,
-          handleChange: handleChangeWithData
-        }, additionalProps))]
-      })
-    });
-  }
-  const content = jsxs(Visible, {
-    "$visible": visible,
-    "data-testid": "jsonforms-object-list-wrapper",
-    children: [jsxs(ToolBarHeader, {
-      children: [listTitle && jsxs(ObjectArrayTitle, {
-        children: [listTitle, additionalProps.required && jsx(RequiredSpan, {
-          children: "(required)"
-        }), maxItemsError && jsx("span", {
-          style: {
-            color: 'red',
-            marginLeft: '1rem'
-          },
-          children: maxItemsError
-        })]
-      }), jsx(ObjectArrayToolBar, {
-        errors: errors,
-        label: label,
-        addItem: addItem,
-        numColumns: 0,
-        path: path,
-        uischema: controlElement,
-        schema: schema,
-        rootSchema: rootSchema,
-        enabled: enabled
-      })]
-    }), jsxs("div", {
-      children: [jsx(ObjectArrayList, Object.assign({
-        path: path,
-        schema: schema,
-        uischema: uischema,
-        enabled: enabled,
-        openDeleteDialog: openDeleteDialog,
-        translations: {},
-        count: latestCount,
-        data: latestData,
-        cells: cells,
-        config: config,
-        isInReview: isInReview,
-        handleChange: handleChangeWithData
-      }, additionalProps)), jsx(DeleteDialog, {
-        open: open,
-        onCancel: deleteCancel,
-        onConfirm: deleteConfirm,
-        title: 'Remove item',
-        message: 'Are you sure you wish to remove the selected item'
+        })
+      }), hasAnyErrors && isInReview && jsx(GoabFormItem, {
+        error: `There are validation errors for '${capitalizeFirstLetter(rowPath)}'`
       })]
     })]
   });
-  return content;
-};
-
-let _$1 = t => t,
-  _t$2;
-const GoAContextMenuIcon = props => {
-  return jsx(GoabIconButton, {
-    icon: props.type,
-    onClick: props.onClick,
-    title: props.title,
-    testId: props.testId,
-    size: "small",
-    disabled: props.disabled
-  });
+});
+const NonEmptyCell = ownProps => {
+  const data = ownProps.data || {};
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, Object.assign({}, ownProps, {
+    data
+  }));
+  const isValid = isEmpty$1(emptyCellProps.errors);
+  return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
+    handleChange: ownProps == null ? void 0 : ownProps.handleChange,
+    isInReview: ownProps == null ? void 0 : ownProps.isInReview,
+    isValid: isValid,
+    openDeleteDialog: ownProps == null ? void 0 : ownProps.openDeleteDialog,
+    data: data,
+    count: ownProps == null ? void 0 : ownProps.count
+  }));
 };
-const GoAContextMenu = styled.div(_t$2 || (_t$2 = _$1`
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  gap: var(--goa-space-2xs);
-
-  > .goa-icon-button {
-    cursor: pointer;
-    border-radius: var(--goa-border-radius-m);
-    padding: var(--goa-space-2xs);
-  }
-  > .goa-icon-button + .goa-icon-button {
-    margin-left: var(--goa-space-none);
-  }
-`));
-
-const DeleteFileModal = ({
-  isOpen,
-  title,
-  content,
-  onDelete,
-  onCancel
+const NonEmptyRowComponent = ({
+  childPath,
+  schema,
+  openDeleteDialog,
+  enabled,
+  cells,
+  uischema,
+  isInReview,
+  data,
+  count,
+  handleChange
 }) => {
-  return jsx(GoabModal, {
-    testId: "delete-confirmation",
-    open: isOpen,
-    heading: title,
-    maxWidth: "640px",
-    actions: jsxs(GoabButtonGroup, {
-      alignment: "end",
-      children: [jsx(GoabButton, {
-        type: "secondary",
-        testId: "delete-cancel",
-        onClick: onCancel,
-        children: "Cancel"
-      }), jsx(GoabButton, {
-        type: "primary",
-        variant: "destructive",
-        testId: "delete-confirm",
-        onClick: onDelete,
-        children: "Delete"
-      })]
-    }),
-    children: content
-  });
+  return jsx("div", {
+    children: enabled ? isInReview ? jsx("div", {
+      children: jsx("div", {
+        children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
+      })
+    }) : jsx(GoabContainer, {
+      children: jsx("div", {
+        children: jsx("div", {
+          children: GenerateRows(NonEmptyCell, schema, childPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data)
+        })
+      })
+    }) : null
+  }, childPath);
 };
-
-let _2 = t => t,
-  _t$1,
-  _t2$1,
-  _t3,
-  _t4;
-const _excluded$3 = ["data", "path", "handleChange", "uischema"];
-const FileUploaderReview = props => {
-  return FileUploader(Object.assign({}, props, {
-    isStepperReview: true
-  }));
+const NonEmptyList = /*#__PURE__*/React.memo(NonEmptyRowComponent);
+const ObjectArrayList = ({
+  data,
+  path,
+  schema,
+  openDeleteDialog,
+  uischema,
+  config,
+  enabled,
+  cells,
+  translations,
+  count,
+  isInReview,
+  handleChange
+}) => {
+  const isEmptyList = count === 0;
+  if (isEmptyList) {
+    var _uischema$options$noD, _uischema$options3;
+    const noDataMessage = (_uischema$options$noD = (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.noDataMessage) != null ? _uischema$options$noD : 'No data';
+    return jsx(EmptyList, {
+      noDataMessage: noDataMessage,
+      numColumns: getValidColumnProps(schema).length + 1,
+      translations: translations
+    });
+  }
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const childPath = path;
+  return jsx(NonEmptyList, {
+    childPath: childPath,
+    rowIndex: 0,
+    schema: schema,
+    openDeleteDialog: openDeleteDialog,
+    showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
+    enabled: enabled,
+    handleChange: handleChange,
+    cells: cells,
+    path: path,
+    uischema: uischema,
+    translations: translations,
+    isInReview: isInReview,
+    count: count,
+    data: data
+  }, 0);
 };
-const FileUploader = _ref => {
-  var _enumerators$function, _enumerators$function2, _enumerators$function3, _uischema$options, _uischema$options2, _uischema$options3, _uischema$options4, _props$schema, _uischema$options$com, _uischema$options5, _uischema$options6, _uischema$options$com2, _uischema$options7, _uischema$options$com3, _uischema$options8, _uischema$options9;
-  let {
-      data,
-      path,
-      handleChange,
-      uischema
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  const enumerators = useContext(JsonFormContext);
-  const uploadTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('upload-file');
-  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
-  const downloadTriggerFunction = enumerators == null || (_enumerators$function2 = enumerators.functions) == null ? void 0 : _enumerators$function2.get('download-file');
-  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
-  const deleteTriggerFunction = enumerators == null || (_enumerators$function3 = enumerators.functions) == null ? void 0 : _enumerators$function3.get('delete-file');
-  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
-  const fileListValue = enumerators == null ? void 0 : enumerators.data.get('file-list');
-  const [loadingFileName, setLoadingFileName] = useState(undefined);
-  const [uploadError, setUploadError] = useState(undefined);
-  const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
-  enumerators == null || enumerators.addFormContextData('countries', countries);
-  const user = enumerators == null ? void 0 : enumerators.getFormContextData('user');
-  // eslint-disable-next-line
-  const fileList = fileListValue && fileListValue();
+const ObjectArrayControl = props => {
+  var _registers$categories, _registers$categories2, _registers$categories3, _registers$categories4, _uischema$options6;
+  const [registers, dispatch] = useReducer(objectListReducer, initialState);
+  const [open, setOpen] = useState(false);
+  const [rowData, setRowData] = useState(0);
+  const [maxItemsError, setMaxItemsError] = useState('');
+  const reportChange = useReviewChange();
+  const showChangeButtons = useShowChangeButtons();
   const {
-    required,
-    label,
-    i18nKeyPrefix,
-    visible
-  } = props;
-  const propertyId = i18nKeyPrefix;
-  const rootPath = typeof path === 'string' ? path.replace(/(\.\d+|\[\d+\])$/, '') : path;
-  const variant = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) || 'button';
-  const noDownloadButton = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.format) == null ? void 0 : _uischema$options2.noDownloadButton;
-  const noDownloadButtonInReview = uischema == null || (_uischema$options3 = uischema.options) == null || (_uischema$options3 = _uischema$options3.format) == null || (_uischema$options3 = _uischema$options3.review) == null ? void 0 : _uischema$options3.noDownloadButton;
-  const noDeleteButton = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.format) == null || (_uischema$options4 = _uischema$options4.review) == null ? void 0 : _uischema$options4.noDeleteButton;
-  const isArraySchema = (props == null || (_props$schema = props.schema) == null ? void 0 : _props$schema.type) === 'array' || Array.isArray(data);
-  const maxFiles = (_uischema$options$com = uischema == null || (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.componentProps) == null ? void 0 : _uischema$options5.maximum) != null ? _uischema$options$com : isArraySchema ? Number.MAX_SAFE_INTEGER : 1;
-  const isMultiFile = maxFiles > 1 || isArraySchema;
-  const metadataKey = path;
-  const [deleteHide, setDeleteHide] = useState(false);
-  const [deleteConfirmIndex, setDeleteConfirmIndex] = useState(null);
-  const pendingUploadIndexRef = useRef(null);
-  const uploadQueueRef = useRef(Promise.resolve());
-  const filesForDisplay = useMemo(() => {
-    if (!fileList) return [];
-    if (isMultiFile) {
-      const files = fileList[metadataKey] || fileList[rootPath] || fileList[propertyId] || [];
-      const dataUrns = Array.isArray(data) ? data : data ? [data] : [];
-      if (dataUrns.length > 0) {
-        const urnSet = new Set(dataUrns);
-        const scopedFiles = files.filter(f => urnSet.has(f.urn));
-        if (scopedFiles.length > 0) {
-          return scopedFiles.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
-        }
-        const allFiles = Object.values(fileList).flat();
-        const filesByUrn = dataUrns.map(urn => allFiles.find(f => (f == null ? void 0 : f.urn) === urn)).filter(f => !!f);
-        if (filesByUrn.length > 0) {
-          return filesByUrn.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
-        }
-      }
-      // Keep a stable list even if upstream metadata briefly duplicates entries.
-      return files.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+      label,
+      path,
+      schema,
+      rootSchema,
+      uischema,
+      errors,
+      visible,
+      enabled,
+      cells,
+      data,
+      config,
+      isStepperReview
+    } = props,
+    additionalProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const parsedData = Array.isArray(data) ? data : [];
+  const hasDataRows = parsedData.length > 0;
+  const latestData = hasDataRows ? Object.fromEntries(parsedData.map((item, index) => [String(index), item])) : (_registers$categories = (_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data) != null ? _registers$categories : {};
+  const latestCount = hasDataRows ? parsedData.length : (_registers$categories3 = (_registers$categories4 = registers.categories[path]) == null ? void 0 : _registers$categories4.count) != null ? _registers$categories3 : Object.keys(latestData).length;
+  const openDeleteDialog = useCallback((rowIndex, name) => {
+    setOpen(true);
+    setRowData(rowIndex);
+  }, [setOpen, setRowData]);
+  const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
+  const deleteConfirm = () => {
+    if (deleteItem && path) {
+      deleteItem(path, rowData);
     }
-    return fileList[metadataKey] || fileList[propertyId] || [];
-  }, [fileList, isMultiFile, metadataKey, rootPath, propertyId, data]);
-  const fileListLength = filesForDisplay.length;
-  useEffect(() => {
-    // Clear pending upload index when rendered file list catches up.
-    pendingUploadIndexRef.current = null;
-  }, [fileListLength, metadataKey, rootPath]);
-  const getNextUploadIndex = () => {
-    const baseIndex = filesForDisplay.length;
-    if (pendingUploadIndexRef.current === null || pendingUploadIndexRef.current < baseIndex) {
-      pendingUploadIndexRef.current = baseIndex;
+    setOpen(false);
+  };
+  //  eslint-disable-next-line
+  const addItem = (path, value) => {
+    var _uischema$options4, _uischema$options5;
+    const maxItems = (_uischema$options4 = uischema.options) != null && (_uischema$options4 = _uischema$options4.detail) != null && _uischema$options4.maxItems ? (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.detail) == null ? void 0 : _uischema$options5.maxItems : DEFAULT_MAX_ITEMS;
+    if (latestCount < maxItems) {
+      return () => {
+        const currentRows = hasDataRows ? parsedData : Object.keys(latestData).sort((a, b) => Number(a) - Number(b)).map(key => latestData[key]);
+        const nextData = [...currentRows, value];
+        const categoryData = Object.fromEntries(nextData.map((item, index) => [String(index), item]));
+        props.handleChange(path, nextData);
+        dispatch({
+          type: SET_DATA_ACTION,
+          payload: Object.assign({}, registers.categories, {
+            [path]: {
+              count: nextData.length,
+              data: categoryData
+            }
+          })
+        });
+      };
+    } else {
+      setMaxItemsError(`Maximum ${maxItems} items allowed.`);
+      setTimeout(() => {
+        setMaxItemsError('');
+      }, 3000);
     }
-    const nextIndex = pendingUploadIndexRef.current;
-    pendingUploadIndexRef.current += 1;
-    return nextIndex;
   };
-  async function uploadFile(file, requestedIndex) {
-    if (!uploadTrigger) return;
-    const fileListLength = requestedIndex != null ? requestedIndex : isMultiFile ? getNextUploadIndex() : filesForDisplay.length;
-    // Single-file controls should allow selecting a new file to replace the current one.
-    if (isMultiFile && fileListLength >= maxFiles) {
-      setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
-      return;
+  // eslint-disable-next-line
+  const deleteItem = (path, value) => {
+    const categories = registers.categories;
+    const currentCategory = categories[path];
+    const newCategoryData = {};
+    if (currentCategory != null && currentCategory.data) {
+      delete currentCategory.data[value];
+      Object.keys(currentCategory.data).forEach((key, index) => {
+        newCategoryData[index] = currentCategory.data[key];
+      });
+      currentCategory.data = newCategoryData;
     }
-    setUploadError(undefined);
-    setLoadingFileName(file == null ? void 0 : file.name);
-    await Promise.resolve(uploadTrigger(file, isMultiFile ? `${rootPath}.${fileListLength}` : path));
-    setDeleteHide(false);
-  }
-  function queueUpload(file, requestedIndex) {
-    uploadQueueRef.current = uploadQueueRef.current.then(() => uploadFile(file, requestedIndex)).catch(() => {
-      // Keep queue alive after an individual upload failure.
+    if (currentCategory != null && currentCategory.count && (currentCategory == null ? void 0 : currentCategory.count) > 0) currentCategory.count--;
+    let handleChangeData = Object.keys(newCategoryData).map(key => {
+      return newCategoryData[key];
     });
-  }
-  function downloadFile(file) {
-    if (downloadTrigger && file) {
-      downloadTrigger(file, propertyId);
+    if (handleChangeData.length === 0) {
+      handleChangeData = null;
     }
-  }
-  function deleteFile(file) {
-    if (deleteTrigger && file) {
-      deleteTrigger(file, propertyId);
+    setMaxItemsError('');
+    props.handleChange(path, handleChangeData);
+    dispatch({
+      type: DELETE_ACTION,
+      payload: {
+        name: path,
+        category: currentCategory
+      }
+    });
+  };
+  //eslint-disable-next-line
+  const handleChangeWithData = (path, value) => {
+    if (path) {
+      var _categories$path;
+      const categories = registers.categories;
+      const currentCategory = ((_categories$path = categories[path]) == null ? void 0 : _categories$path.data) || {};
+      const newData = {};
+      const allKeys = Object.keys(value).concat(Object.keys(currentCategory || []));
+      const allKeysUnique = allKeys.filter((a, b) => allKeys.indexOf(a) === b);
+      Object.keys(allKeysUnique).forEach(num => {
+        if (!newData[num]) {
+          newData[num] = {};
+        }
+        currentCategory[num] && Object.keys(currentCategory[num]).forEach(path => {
+          newData[num][path] = currentCategory[num][path];
+        });
+        value[num] && Object.keys(value[num]).forEach(path => {
+          newData[num][path] = value[num][path] !== undefined ? value[num][path] : currentCategory[num] && currentCategory[num][path];
+        });
+      });
+      const handleChangeData = Object.keys(newData).map(key => {
+        return newData[key];
+      });
+      props.handleChange(path, JSON.parse(JSON.stringify(handleChangeData)));
+      dispatch({
+        type: ADD_DATA_ACTION,
+        payload: {
+          name: path,
+          category: newData
+        }
+      });
     }
-  }
-  function getFileName(index) {
-    var _getFile;
-    return (_getFile = getFile(index)) == null ? void 0 : _getFile.filename;
-  }
-  function getFile(index) {
-    return filesForDisplay == null ? void 0 : filesForDisplay[index];
-  }
+  };
   useEffect(() => {
-    if (loadingFileName !== undefined) {
-      setLoadingFileName(undefined);
+    var _currentCategory$coun;
+    const updatedData = Object.fromEntries((parsedData || []).map((item, index) => [index, item]));
+    const count = Object.keys(updatedData).length;
+    const currentCategory = registers.categories[path];
+    if (Array.isArray(data) && data.length === 0 && ((_currentCategory$coun = currentCategory == null ? void 0 : currentCategory.count) != null ? _currentCategory$coun : 0) > 0) {
+      return;
     }
-    const delayedFunction = () => {
-      if (!fileList) return;
-      const filesForControl = filesForDisplay || [];
-      const hasFileListEntryForPath = Object.prototype.hasOwnProperty.call(fileList, metadataKey) || Object.prototype.hasOwnProperty.call(fileList, rootPath) || !isMultiFile && Object.prototype.hasOwnProperty.call(fileList, propertyId);
-      const urns = filesForControl.map(f => f.urn);
-      if (urns.length === 0) {
-        if (hasFileListEntryForPath && data !== undefined && data !== null && data !== '') {
-          handleChange(isMultiFile ? rootPath : path, undefined);
-        }
-      } else if (isMultiFile) {
-        handleChange(rootPath, urns);
-      } else {
-        // Single-file replacement appends metadata; keep the latest selection as the current value.
-        handleChange(path, urns[urns.length - 1]);
+    const hasSameCount = (currentCategory == null ? void 0 : currentCategory.count) === count;
+    const hasSameData = JSON.stringify((currentCategory == null ? void 0 : currentCategory.data) || {}) === JSON.stringify(updatedData);
+    if (hasSameCount && hasSameData) {
+      return;
+    }
+    const dispatchData = Object.assign({}, registers.categories, {
+      [path]: {
+        count: count,
+        data: updatedData
       }
-    };
-    const timeoutId = setTimeout(delayedFunction, 1);
-    return () => clearTimeout(timeoutId);
-  }, [data, fileList, filesForDisplay, rootPath, path, propertyId, metadataKey, isMultiFile, handleChange, loadingFileName]);
-  const readOnly = (uischema == null || (_uischema$options6 = uischema.options) == null || (_uischema$options6 = _uischema$options6.componentProps) == null ? void 0 : _uischema$options6.readOnly) === true || (props == null ? void 0 : props.isStepperReview) === true || user === null;
-  const maxFileSize = (_uischema$options$com2 = uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.maxFileSize) != null ? _uischema$options$com2 : '';
-  const accept = (_uischema$options$com3 = uischema == null || (_uischema$options8 = uischema.options) == null || (_uischema$options8 = _uischema$options8.componentProps) == null ? void 0 : _uischema$options8.accept) != null ? _uischema$options$com3 : '';
-  if (!enumerators) {
-    //eslint-disable-next-line
-    return jsx(Fragment, {});
-  }
-  const helpText = uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.help;
-  const sentenceCaseLabel = label;
-  const renderFileItem = index => {
-    var _getFile2;
-    const showFileDeleteConfirmation = deleteConfirmIndex === index;
-    return jsx("div", {
-      children: readOnly ? jsxs(AttachmentBorderDisabled, {
-        children: [getFileName(index), noDownloadButtonInReview !== true && jsx(GoAContextMenuIcon, {
-          testId: "download-icon",
-          title: "Download",
-          type: "download",
-          onClick: () => downloadFile(getFile(index))
-        })]
-      }) : jsxs(AttachmentBorder, {
-        children: [jsx("div", {
-          children: getFileName(index)
-        }), jsxs(GoAContextMenu, {
-          children: [noDownloadButton !== true && jsx(GoAContextMenuIcon, {
-            testId: "download-icon",
-            title: "Download",
-            type: "download",
-            onClick: () => downloadFile(getFile(index))
-          }), noDeleteButton !== true && jsx(GoAContextMenuIcon, {
-            "data-testid": "delete-icon",
-            title: "Delete",
-            type: "trash",
-            onClick: () => {
-              setDeleteConfirmIndex(index);
-            }
+    });
+    dispatch({
+      type: SET_DATA_ACTION,
+      payload: dispatchData
+    });
+  }, [parsedData, path]);
+  const controlElement = uischema;
+  const listTitle = label || ((_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.title);
+  const isInReview = isStepperReview === true;
+  const isListWithDetail = controlElement.type === 'ListWithDetail';
+  if (isInReview) {
+    var _uischema$options7, _uischema$options8;
+    return jsx("tr", {
+      children: jsxs(PageReviewContainer, {
+        colSpan: 3,
+        children: [listTitle ? isListWithDetail && additionalProps.required && (data === null || data === undefined) ? jsx("b", {
+          children: jsxs(ListWithDetailWarningIconDiv, {
+            children: [jsx(GoabIcon, {
+              type: "warning",
+              title: "warning",
+              size: "small",
+              theme: "filled",
+              ml: "2xs",
+              mt: "2xs"
+            }), listTitle, " is required."]
+          })
+        }) : jsxs(ReviewHeader, {
+          style: {
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            alignItems: 'center'
+          },
+          children: [jsxs(ReviewLabel, {
+            children: [listTitle, jsx("span", {
+              children: additionalProps.required && '(required)'
+            }), maxItemsError && jsx("span", {
+              style: {
+                color: 'red',
+                marginLeft: '1rem'
+              },
+              children: maxItemsError
+            })]
+          }), showChangeButtons && ((_uischema$options7 = uischema.options) == null ? void 0 : _uischema$options7.stepId) !== undefined && !((_uischema$options8 = uischema.options) != null && (_uischema$options8 = _uischema$options8.componentProps) != null && _uischema$options8.readOnly) && jsx(BackButton, {
+            text: "Change",
+            link: () => {
+              var _uischema$options9;
+              return reportChange((_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.stepId, uischema.scope);
+            },
+            showBackIcon: false
           })]
-        }), jsx(DeleteFileModal, {
-          isOpen: showFileDeleteConfirmation,
-          title: "Delete file",
-          content: `Delete file ${(_getFile2 = getFile(index)) == null ? void 0 : _getFile2.filename} ?`,
-          onCancel: () => setDeleteConfirmIndex(null),
-          onDelete: () => {
-            setDeleteConfirmIndex(null);
-            deleteFile(getFile(index));
-            if (!isMultiFile) {
-              setDeleteHide(true);
-            }
-            setUploadError(undefined);
-          }
-        })]
+        }) : null, jsx(ObjectArrayList, Object.assign({
+          path: path,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          openDeleteDialog: openDeleteDialog,
+          translations: {},
+          count: latestCount,
+          data: latestData,
+          cells: cells,
+          config: config,
+          isInReview: isInReview,
+          handleChange: handleChangeWithData
+        }, additionalProps))]
       })
     });
-  };
-  return jsx(Visible, {
+  }
+  const content = jsxs(Visible, {
     "$visible": visible,
-    children: jsxs(FileUploaderStyle, {
-      className: "FileUploader",
-      children: [jsx(GoabFormItem, {
-        label: sentenceCaseLabel,
-        requirement: required ? 'required' : undefined,
-        error: uploadError
-      }), !readOnly && jsx("div", {
-        className: "file-upload",
-        children: jsx(GoabFileUploadInput, {
-          variant: variant,
-          onSelectFile: detail => {
-            var _detail$files;
-            const selectedFiles = detail != null && (_detail$files = detail.files) != null && _detail$files.length ? detail.files : detail != null && detail.file ? [detail.file] : [];
-            if (selectedFiles.length === 0) {
-              return;
-            }
-            if (isMultiFile) {
-              for (const selectedFile of selectedFiles) {
-                const nextIndex = getNextUploadIndex();
-                if (nextIndex >= maxFiles) {
-                  setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
-                  break;
-                }
-                queueUpload(selectedFile, nextIndex);
-              }
-            } else {
-              queueUpload(selectedFiles[0]);
-            }
+    "data-testid": "jsonforms-object-list-wrapper",
+    children: [jsxs(ToolBarHeader, {
+      children: [listTitle && jsxs(ObjectArrayTitle, {
+        children: [listTitle, additionalProps.required && jsx(RequiredSpan, {
+          children: "(required)"
+        }), maxItemsError && jsx("span", {
+          style: {
+            color: 'red',
+            marginLeft: '1rem'
           },
-          maxFileSize: maxFileSize,
-          accept: accept
-        })
-      }), helpText && jsx(HelpText, {
-        children: helpText
-      }), jsx("div", {
-        children: loadingFileName !== undefined ? jsx(GoabModal, {
-          open: loadingFileName !== undefined,
-          children: jsx("div", {
-            className: "align-center",
-            children: jsx(GoabCircularProgress, {
-              visible: true,
-              message: `Uploading ${loadingFileName}`,
-              size: "large"
-            })
-          })
-        }) : jsx("div", {
-          children: (fileList && isMultiFile ? filesForDisplay.map((_, i) => i) : !deleteHide && getFile(fileListLength - 1) && fileListLength >= 0 ? [fileListLength - 1] : []).map(index => jsx(React.Fragment, {
-            children: renderFileItem(index)
-          }, index))
-        })
+          children: maxItemsError
+        })]
+      }), jsx(ObjectArrayToolBar, {
+        errors: errors,
+        label: label,
+        addItem: addItem,
+        numColumns: 0,
+        path: path,
+        uischema: controlElement,
+        schema: schema,
+        rootSchema: rootSchema,
+        enabled: enabled
       })]
-    })
+    }), jsxs("div", {
+      children: [jsx(ObjectArrayList, Object.assign({
+        path: path,
+        schema: schema,
+        uischema: uischema,
+        enabled: enabled,
+        openDeleteDialog: openDeleteDialog,
+        translations: {},
+        count: latestCount,
+        data: latestData,
+        cells: cells,
+        config: config,
+        isInReview: isInReview,
+        handleChange: handleChangeWithData
+      }, additionalProps)), jsx(DeleteDialog, {
+        open: open,
+        onCancel: deleteCancel,
+        onConfirm: deleteConfirm,
+        title: 'Remove item',
+        message: 'Are you sure you wish to remove the selected item'
+      })]
+    })]
   });
+  return content;
 };
-const HelpText = styled.div(_t$1 || (_t$1 = _2`
-  margin-top: var(--goa-space-xs);
-  font-size: var(--goa-font-size-3);
-  color: var(--goa-color-text-secondary);
-`));
-const AttachmentBorderDisabled = styled.div(_t2$1 || (_t2$1 = _2`
-  display: flex;
-  flex-direction: row;
-  border: var(--goa-border-width-s) solid #dcdcdc;
-  border-radius: var(--goa-border-radius-m);
-  padding: var(--goa-space-xs);
-  width: fit-content;
-  background-color: #f1f1f1;
-`));
-const AttachmentBorder = styled.div(_t3 || (_t3 = _2`
-  display: flex;
-  flex-direction: row;
-  border: var(--goa-border-width-s) solid #dcdcdc;
-  border-radius: var(--goa-border-radius-m);
-  padding: var(--goa-space-xs);
-  width: fit-content;
-  margin-top: var(--goa-space-2xs);
-`));
-const FileUploaderStyle = styled.div(_t4 || (_t4 = _2`
-  margin-bottom: var(--goa-space-l);
-  .label {
-    display: block;
-    font-weight: var(--goa-font-weight-bold);
-    color: var(--goa-color-text-default);
-    font-size: var(--goa-font-size-4);
-    padding: 0 0 var(--goa-space-xs) 0;
-  }
-
-  .align-center {
-    text-align-last: center;
-  }
-
-  .file-upload {
-    margin-bottom: var(--goa-space-xs);
-  }
-`));
 
 const ArrayControl = props => {
   const {
@@ -18009,12 +18020,16 @@ const FormStepperReviewer = props => {
       children: [summaryPageTitle && !jsonForms.readonly && jsx(FormStepperSummaryH3, {
         children: summaryPageTitle
       }), categories.map((category, categoryIndex) => {
-        var _category$options, _category$options$sec, _category$options2;
+        var _category$options, _category$options2, _category$options$sec, _category$options3;
         // Preserve index stability
         if (!isVisible(category, data, '', ajv, undefined)) {
           return null;
         }
         const categoryLabel = category.label || category.i18n || 'Unknown Category';
+        const isInTaskList = cat => {
+          var _cat$options;
+          return (cat == null || (_cat$options = cat.options) == null ? void 0 : _cat$options.showInTaskList) !== false;
+        };
         // Build visible elements list
         const elementsToRender = category.elements.filter(field => hasVisibleContent(field)).map(e => {
           const layout = e;
@@ -18026,12 +18041,12 @@ const FormStepperReviewer = props => {
           }
           return e;
         }).flat();
-        // Do not render empty categories
-        if (elementsToRender.length === 0) {
+        // Do not render empty categories or showInTaskList is false
+        if (elementsToRender.length === 0 || !isInTaskList(category)) {
           return null;
         }
         //The tasklist can have a parent section title, we want to display if it exists
-        const sectionTitle = ((_category$options = category.options) == null ? void 0 : _category$options.showInTaskList) === true ? String((_category$options$sec = (_category$options2 = category.options) == null ? void 0 : _category$options2.sectionTitle) != null ? _category$options$sec : '').trim() : '';
+        const sectionTitle = ((_category$options = category.options) == null ? void 0 : _category$options.showInTaskList) === true || ((_category$options2 = category.options) == null ? void 0 : _category$options2.showInTaskList) === undefined ? String((_category$options$sec = (_category$options3 = category.options) == null ? void 0 : _category$options3.sectionTitle) != null ? _category$options$sec : '').trim() : '';
         const showSectionTitle = sectionTitle !== '' && sectionTitle !== lastShownSectionTitle;
         if (showSectionTitle) {
           lastShownSectionTitle = sectionTitle;
@@ -18474,7 +18489,7 @@ function updateCompletion(group, index) {
     endIndex++;
   }
   const relevant = group.slice(index, endIndex + 1);
-  // A task is "completed" iff:
+  // A task is "completed" if:
   // - the main row itself isCompleted, AND
   // - every detail page that is currently visible is also completed.
   const newIsCompleted = category.isCompleted && relevant.every(cat => !cat.visible || cat.isCompleted);