@abgov/jsonforms-components 1.10.0 → 1.10.2

package/index.esm.js

@@ -1,13 +1,13 @@
 import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useContext, useEffect, useMemo, useState, useCallback } from 'react';
 import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
-import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
-import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
+import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsLayoutProps, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import merge from 'lodash/merge';
 import axios from 'axios';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
 import Ajv from 'ajv';
 
@@ -1556,122 +1556,8 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-var wellKnownSymbol$5 = wellKnownSymbol$c;
-
-var TO_STRING_TAG$1 = wellKnownSymbol$5('toStringTag');
-var test = {};
-
-test[TO_STRING_TAG$1] = 'z';
-
-var toStringTagSupport = String(test) === '[object z]';
-
-var TO_STRING_TAG_SUPPORT = toStringTagSupport;
-var isCallable$3 = isCallable$h;
-var classofRaw = classofRaw$1;
-var wellKnownSymbol$4 = wellKnownSymbol$c;
-
-var TO_STRING_TAG = wellKnownSymbol$4('toStringTag');
-var $Object = Object;
-
-// ES3 wrong here
-var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) === 'Arguments';
-
-// fallback for IE11 Script Access Denied error
-var tryGet = function (it, key) {
-  try {
-    return it[key];
-  } catch (error) { /* empty */ }
-};
-
-// getting tag from ES6+ `Object.prototype.toString`
-var classof$3 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
-  var O, tag, result;
-  return it === undefined ? 'Undefined' : it === null ? 'Null'
-    // @@toStringTag case
-    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
-    // builtinTag case
-    : CORRECT_ARGUMENTS ? classofRaw(O)
-    // ES3 arguments fallback
-    : (result = classofRaw(O)) === 'Object' && isCallable$3(O.callee) ? 'Arguments' : result;
-};
-
-var classof$2 = classof$3;
-
-var $String = String;
-
-var toString$5 = function (argument) {
-  if (classof$2(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
-};
-
-var makeBuiltIn = makeBuiltIn$3.exports;
-var defineProperty$1 = objectDefineProperty;
-
-var defineBuiltInAccessor$1 = function (target, name, descriptor) {
-  if (descriptor.get) makeBuiltIn(descriptor.get, name, { getter: true });
-  if (descriptor.set) makeBuiltIn(descriptor.set, name, { setter: true });
-  return defineProperty$1.f(target, name, descriptor);
-};
-
-var $$4 = _export;
 var DESCRIPTORS$1 = descriptors;
-var global$4 = global$f;
 var uncurryThis$6 = functionUncurryThis;
-var hasOwn$1 = hasOwnProperty_1;
-var isCallable$2 = isCallable$h;
-var isPrototypeOf$1 = objectIsPrototypeOf;
-var toString$4 = toString$5;
-var defineBuiltInAccessor = defineBuiltInAccessor$1;
-var copyConstructorProperties = copyConstructorProperties$2;
-
-var NativeSymbol = global$4.Symbol;
-var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
-
-if (DESCRIPTORS$1 && isCallable$2(NativeSymbol) && (!('description' in SymbolPrototype) ||
-  // Safari 12 bug
-  NativeSymbol().description !== undefined
-)) {
-  var EmptyStringDescriptionStore = {};
-  // wrap Symbol constructor for correct work with undefined description
-  var SymbolWrapper = function Symbol() {
-    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$4(arguments[0]);
-    var result = isPrototypeOf$1(SymbolPrototype, this)
-      ? new NativeSymbol(description)
-      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
-      : description === undefined ? NativeSymbol() : NativeSymbol(description);
-    if (description === '') EmptyStringDescriptionStore[result] = true;
-    return result;
-  };
-
-  copyConstructorProperties(SymbolWrapper, NativeSymbol);
-  SymbolWrapper.prototype = SymbolPrototype;
-  SymbolPrototype.constructor = SymbolWrapper;
-
-  var NATIVE_SYMBOL = String(NativeSymbol('description detection')) === 'Symbol(description detection)';
-  var thisSymbolValue = uncurryThis$6(SymbolPrototype.valueOf);
-  var symbolDescriptiveString = uncurryThis$6(SymbolPrototype.toString);
-  var regexp = /^Symbol\((.*)\)[^)]+$/;
-  var replace$2 = uncurryThis$6(''.replace);
-  var stringSlice$4 = uncurryThis$6(''.slice);
-
-  defineBuiltInAccessor(SymbolPrototype, 'description', {
-    configurable: true,
-    get: function description() {
-      var symbol = thisSymbolValue(this);
-      if (hasOwn$1(EmptyStringDescriptionStore, symbol)) return '';
-      var string = symbolDescriptiveString(symbol);
-      var desc = NATIVE_SYMBOL ? stringSlice$4(string, 7, -1) : replace$2(string, regexp, '$1');
-      return desc === '' ? undefined : desc;
-    }
-  });
-
-  $$4({ global: true, constructor: true, forced: true }, {
-    Symbol: SymbolWrapper
-  });
-}
-
-var DESCRIPTORS = descriptors;
-var uncurryThis$5 = functionUncurryThis;
 var call$6 = functionCall;
 var fails$7 = fails$i;
 var objectKeys = objectKeys$2;
@@ -1683,17 +1569,17 @@ var IndexedObject = indexedObject;
 // eslint-disable-next-line es/no-object-assign -- safe
 var $assign = Object.assign;
 // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-var defineProperty = Object.defineProperty;
-var concat$1 = uncurryThis$5([].concat);
+var defineProperty$1 = Object.defineProperty;
+var concat$1 = uncurryThis$6([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 var objectAssign = !$assign || fails$7(function () {
   // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
+  if (DESCRIPTORS$1 && $assign({ b: 1 }, $assign(defineProperty$1({}, 'a', {
     enumerable: true,
     get: function () {
-      defineProperty(this, 'b', {
+      defineProperty$1(this, 'b', {
         value: 3,
         enumerable: false
       });
@@ -1722,18 +1608,18 @@ var objectAssign = !$assign || fails$7(function () {
     var key;
     while (length > j) {
       key = keys[j++];
-      if (!DESCRIPTORS || call$6(propertyIsEnumerable, S, key)) T[key] = S[key];
+      if (!DESCRIPTORS$1 || call$6(propertyIsEnumerable, S, key)) T[key] = S[key];
     }
   } return T;
 } : $assign;
 
-var $$3 = _export;
+var $$4 = _export;
 var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 // eslint-disable-next-line es/no-object-assign -- required for testing
-$$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+$$4({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
   assign: assign
 });
 
@@ -1743,6 +1629,54 @@ const FormFieldWrapper = styled.div(_t$7 || (_t$7 = _$7`
   margin-bottom: var(--goa-space-l);
 `));
 
+var wellKnownSymbol$5 = wellKnownSymbol$c;
+
+var TO_STRING_TAG$1 = wellKnownSymbol$5('toStringTag');
+var test = {};
+
+test[TO_STRING_TAG$1] = 'z';
+
+var toStringTagSupport = String(test) === '[object z]';
+
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var isCallable$3 = isCallable$h;
+var classofRaw = classofRaw$1;
+var wellKnownSymbol$4 = wellKnownSymbol$c;
+
+var TO_STRING_TAG = wellKnownSymbol$4('toStringTag');
+var $Object = Object;
+
+// ES3 wrong here
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) === 'Arguments';
+
+// fallback for IE11 Script Access Denied error
+var tryGet = function (it, key) {
+  try {
+    return it[key];
+  } catch (error) { /* empty */ }
+};
+
+// getting tag from ES6+ `Object.prototype.toString`
+var classof$3 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+  var O, tag, result;
+  return it === undefined ? 'Undefined' : it === null ? 'Null'
+    // @@toStringTag case
+    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
+    // builtinTag case
+    : CORRECT_ARGUMENTS ? classofRaw(O)
+    // ES3 arguments fallback
+    : (result = classofRaw(O)) === 'Object' && isCallable$3(O.callee) ? 'Arguments' : result;
+};
+
+var classof$2 = classof$3;
+
+var $String = String;
+
+var toString$5 = function (argument) {
+  if (classof$2(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
 var anObject$3 = anObject$9;
 
 // `RegExp.prototype.flags` getter implementation
@@ -1762,10 +1696,10 @@ var regexpFlags$1 = function () {
 };
 
 var fails$6 = fails$i;
-var global$3 = global$f;
+var global$4 = global$f;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$3.RegExp;
+var $RegExp$2 = global$4.RegExp;
 
 var UNSUPPORTED_Y$1 = fails$6(function () {
   var re = $RegExp$2('a', 'y');
@@ -1793,10 +1727,10 @@ var regexpStickyHelpers = {
 };
 
 var fails$5 = fails$i;
-var global$2 = global$f;
+var global$3 = global$f;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$2.RegExp;
+var $RegExp$1 = global$3.RegExp;
 
 var regexpUnsupportedDotAll = fails$5(function () {
   var re = $RegExp$1('.', 's');
@@ -1804,10 +1738,10 @@ var regexpUnsupportedDotAll = fails$5(function () {
 });
 
 var fails$4 = fails$i;
-var global$1 = global$f;
+var global$2 = global$f;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$1.RegExp;
+var $RegExp = global$2.RegExp;
 
 var regexpUnsupportedNcg = fails$4(function () {
   var re = $RegExp('(?<a>b)', 'g');
@@ -1818,8 +1752,8 @@ var regexpUnsupportedNcg = fails$4(function () {
 /* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
 /* eslint-disable regexp/no-useless-quantifier -- testing */
 var call$5 = functionCall;
-var uncurryThis$4 = functionUncurryThis;
-var toString$3 = toString$5;
+var uncurryThis$5 = functionUncurryThis;
+var toString$4 = toString$5;
 var regexpFlags = regexpFlags$1;
 var stickyHelpers = regexpStickyHelpers;
 var shared = shared$4;
@@ -1831,10 +1765,10 @@ var UNSUPPORTED_NCG = regexpUnsupportedNcg;
 var nativeReplace = shared('native-string-replace', String.prototype.replace);
 var nativeExec = RegExp.prototype.exec;
 var patchedExec = nativeExec;
-var charAt$3 = uncurryThis$4(''.charAt);
-var indexOf = uncurryThis$4(''.indexOf);
-var replace$1 = uncurryThis$4(''.replace);
-var stringSlice$3 = uncurryThis$4(''.slice);
+var charAt$3 = uncurryThis$5(''.charAt);
+var indexOf = uncurryThis$5(''.indexOf);
+var replace$2 = uncurryThis$5(''.replace);
+var stringSlice$4 = uncurryThis$5(''.slice);
 
 var UPDATES_LAST_INDEX_WRONG = (function () {
   var re1 = /a/;
@@ -1855,7 +1789,7 @@ if (PATCH) {
   patchedExec = function exec(string) {
     var re = this;
     var state = getInternalState(re);
-    var str = toString$3(string);
+    var str = toString$4(string);
     var raw = state.raw;
     var result, reCopy, lastIndex, match, i, object, group;
 
@@ -1874,12 +1808,12 @@ if (PATCH) {
     var strCopy = str;
 
     if (sticky) {
-      flags = replace$1(flags, 'y', '');
+      flags = replace$2(flags, 'y', '');
       if (indexOf(flags, 'g') === -1) {
         flags += 'g';
       }
 
-      strCopy = stringSlice$3(str, re.lastIndex);
+      strCopy = stringSlice$4(str, re.lastIndex);
       // Support anchored sticky behavior.
       if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt$3(str, re.lastIndex - 1) !== '\n')) {
         source = '(?: ' + source + ')';
@@ -1900,8 +1834,8 @@ if (PATCH) {
 
     if (sticky) {
       if (match) {
-        match.input = stringSlice$3(match.input, charsAdded);
-        match[0] = stringSlice$3(match[0], charsAdded);
+        match.input = stringSlice$4(match.input, charsAdded);
+        match[0] = stringSlice$4(match[0], charsAdded);
         match.index = re.lastIndex;
         re.lastIndex += match[0].length;
       } else re.lastIndex = 0;
@@ -1932,12 +1866,12 @@ if (PATCH) {
 
 var regexpExec$2 = patchedExec;
 
-var $$2 = _export;
+var $$3 = _export;
 var exec = regexpExec$2;
 
 // `RegExp.prototype.exec` method
 // https://tc39.es/ecma262/#sec-regexp.prototype.exec
-$$2({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
+$$3({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
   exec: exec
 });
 
@@ -2028,18 +1962,18 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
   if (SHAM) createNonEnumerableProperty(RegExpPrototype$2[SYMBOL], 'sham', true);
 };
 
-var uncurryThis$3 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$4;
-var toString$2 = toString$5;
+var toString$3 = toString$5;
 var requireObjectCoercible$2 = requireObjectCoercible$5;
 
-var charAt$2 = uncurryThis$3(''.charAt);
-var charCodeAt = uncurryThis$3(''.charCodeAt);
-var stringSlice$2 = uncurryThis$3(''.slice);
+var charAt$2 = uncurryThis$4(''.charAt);
+var charCodeAt = uncurryThis$4(''.charCodeAt);
+var stringSlice$3 = uncurryThis$4(''.slice);
 
 var createMethod = function (CONVERT_TO_STRING) {
   return function ($this, pos) {
-    var S = toString$2(requireObjectCoercible$2($this));
+    var S = toString$3(requireObjectCoercible$2($this));
     var position = toIntegerOrInfinity$1(pos);
     var size = S.length;
     var first, second;
@@ -2051,7 +1985,7 @@ var createMethod = function (CONVERT_TO_STRING) {
           ? charAt$2(S, position)
           : first
         : CONVERT_TO_STRING
-          ? stringSlice$2(S, position, position + 2)
+          ? stringSlice$3(S, position, position + 2)
           : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000;
   };
 };
@@ -2073,13 +2007,13 @@ var advanceStringIndex$1 = function (S, index, unicode) {
   return index + (unicode ? charAt$1(S, index).length : 1);
 };
 
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$3 = functionUncurryThis;
 var toObject = toObject$4;
 
 var floor = Math.floor;
-var charAt = uncurryThis$2(''.charAt);
-var replace = uncurryThis$2(''.replace);
-var stringSlice$1 = uncurryThis$2(''.slice);
+var charAt = uncurryThis$3(''.charAt);
+var replace$1 = uncurryThis$3(''.replace);
+var stringSlice$2 = uncurryThis$3(''.slice);
 // eslint-disable-next-line redos/no-vulnerable -- safe
 var SUBSTITUTION_SYMBOLS = /\$([$&'`]|\d{1,2}|<[^>]*>)/g;
 var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&'`]|\d{1,2})/g;
@@ -2094,15 +2028,15 @@ var getSubstitution$1 = function (matched, str, position, captures, namedCapture
     namedCaptures = toObject(namedCaptures);
     symbols = SUBSTITUTION_SYMBOLS;
   }
-  return replace(replacement, symbols, function (match, ch) {
+  return replace$1(replacement, symbols, function (match, ch) {
     var capture;
     switch (charAt(ch, 0)) {
       case '$': return '$';
       case '&': return matched;
-      case '`': return stringSlice$1(str, 0, position);
-      case "'": return stringSlice$1(str, tailPos);
+      case '`': return stringSlice$2(str, 0, position);
+      case "'": return stringSlice$2(str, tailPos);
       case '<':
-        capture = namedCaptures[stringSlice$1(ch, 1, -1)];
+        capture = namedCaptures[stringSlice$2(ch, 1, -1)];
         break;
       default: // \d\d?
         var n = +ch;
@@ -2121,7 +2055,7 @@ var getSubstitution$1 = function (matched, str, position, captures, namedCapture
 
 var call$2 = functionCall;
 var anObject$2 = anObject$9;
-var isCallable$1 = isCallable$h;
+var isCallable$2 = isCallable$h;
 var classof$1 = classofRaw$1;
 var regexpExec = regexpExec$2;
 
@@ -2131,7 +2065,7 @@ var $TypeError$1 = TypeError;
 // https://tc39.es/ecma262/#sec-regexpexec
 var regexpExecAbstract = function (R, S) {
   var exec = R.exec;
-  if (isCallable$1(exec)) {
+  if (isCallable$2(exec)) {
     var result = call$2(exec, R, S);
     if (result !== null) anObject$2(result);
     return result;
@@ -2142,15 +2076,15 @@ var regexpExecAbstract = function (R, S) {
 
 var apply = functionApply;
 var call$1 = functionCall;
-var uncurryThis$1 = functionUncurryThis;
+var uncurryThis$2 = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
 var fails$2 = fails$i;
 var anObject$1 = anObject$9;
-var isCallable = isCallable$h;
+var isCallable$1 = isCallable$h;
 var isNullOrUndefined = isNullOrUndefined$3;
 var toIntegerOrInfinity = toIntegerOrInfinity$4;
 var toLength = toLength$2;
-var toString$1 = toString$5;
+var toString$2 = toString$5;
 var requireObjectCoercible$1 = requireObjectCoercible$5;
 var advanceStringIndex = advanceStringIndex$1;
 var getMethod = getMethod$2;
@@ -2161,10 +2095,10 @@ var wellKnownSymbol$2 = wellKnownSymbol$c;
 var REPLACE = wellKnownSymbol$2('replace');
 var max = Math.max;
 var min = Math.min;
-var concat = uncurryThis$1([].concat);
-var push = uncurryThis$1([].push);
-var stringIndexOf$1 = uncurryThis$1(''.indexOf);
-var stringSlice = uncurryThis$1(''.slice);
+var concat = uncurryThis$2([].concat);
+var push = uncurryThis$2([].push);
+var stringIndexOf$1 = uncurryThis$2(''.indexOf);
+var stringSlice$1 = uncurryThis$2(''.slice);
 
 var maybeToString = function (it) {
   return it === undefined ? it : String(it);
@@ -2208,13 +2142,13 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       var replacer = isNullOrUndefined(searchValue) ? undefined : getMethod(searchValue, REPLACE);
       return replacer
         ? call$1(replacer, searchValue, O, replaceValue)
-        : call$1(nativeReplace, toString$1(O), searchValue, replaceValue);
+        : call$1(nativeReplace, toString$2(O), searchValue, replaceValue);
     },
     // `RegExp.prototype[@@replace]` method
     // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
     function (string, replaceValue) {
       var rx = anObject$1(this);
-      var S = toString$1(string);
+      var S = toString$2(string);
 
       if (
         typeof replaceValue == 'string' &&
@@ -2225,8 +2159,8 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
         if (res.done) return res.value;
       }
 
-      var functionalReplace = isCallable(replaceValue);
-      if (!functionalReplace) replaceValue = toString$1(replaceValue);
+      var functionalReplace = isCallable$1(replaceValue);
+      if (!functionalReplace) replaceValue = toString$2(replaceValue);
 
       var global = rx.global;
       var fullUnicode;
@@ -2244,7 +2178,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
         push(results, result);
         if (!global) break;
 
-        var matchStr = toString$1(result[0]);
+        var matchStr = toString$2(result[0]);
         if (matchStr === '') rx.lastIndex = advanceStringIndex(S, toLength(rx.lastIndex), fullUnicode);
       }
 
@@ -2253,7 +2187,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       for (var i = 0; i < results.length; i++) {
         result = results[i];
 
-        var matched = toString$1(result[0]);
+        var matched = toString$2(result[0]);
         var position = max(min(toIntegerOrInfinity(result.index), S.length), 0);
         var captures = [];
         var replacement;
@@ -2267,17 +2201,17 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
         if (functionalReplace) {
           var replacerArgs = concat([matched], captures, position, S);
           if (namedCaptures !== undefined) push(replacerArgs, namedCaptures);
-          replacement = toString$1(apply(replaceValue, undefined, replacerArgs));
+          replacement = toString$2(apply(replaceValue, undefined, replacerArgs));
         } else {
           replacement = getSubstitution(matched, S, position, captures, namedCaptures, replaceValue);
         }
         if (position >= nextSourcePosition) {
-          accumulatedResult += stringSlice(S, nextSourcePosition, position) + replacement;
+          accumulatedResult += stringSlice$1(S, nextSourcePosition, position) + replacement;
           nextSourcePosition = position + matched.length;
         }
       }
 
-      return accumulatedResult + stringSlice(S, nextSourcePosition);
+      return accumulatedResult + stringSlice$1(S, nextSourcePosition);
     }
   ];
 }, !REPLACE_SUPPORTS_NAMED_GROUPS || !REPLACE_KEEPS_$0 || REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE);
@@ -2302,10 +2236,7 @@ const controlScopeMatchesLabel = (scope, label) => {
   // Get the property name in the string from the scope
   const splitIdName = (_c = (_b = (_a = scope.replace(' ', '').split('/')) === null || _a === void 0 ? void 0 : _a.at(-1)) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : '';
   const labelWithNoSpaces = label.replace(' ', '').toLowerCase();
-  if (splitIdName === labelWithNoSpaces) {
-    return true;
-  }
-  return false;
+  return splitIdName === labelWithNoSpaces;
 };
 /**
  * Gets the label text in sentence case
@@ -2370,6 +2301,43 @@ const isValidDate = function isValidDate(date) {
   }
 };
 
+const StepperContext = /*#__PURE__*/createContext({
+  updateStatus: status => {},
+  // return true because in the default case we don't want the
+  // input controls to take action if it is false.
+  isInitialized: _ => true,
+  stepId: 0
+});
+const isEmpty = value => {
+  return value === undefined || value === null || typeof value === 'string' && value.length < 1;
+};
+const getCompletionStatus = (table, step) => {
+  const nonEmptyCount = getNonEmptyCount(table, step);
+  if (nonEmptyCount === 0) {
+    return undefined;
+  }
+  const requiredCount = getRequiredCount(table, step);
+  const requiredNonEmptyCount = getNonEmptyRequiredCount(table, step);
+  if (requiredNonEmptyCount === requiredCount) {
+    return 'complete';
+  }
+  return 'incomplete';
+};
+const getNonEmptyCount = (table, step) => {
+  const nonEmptyStatuses = Object.keys(table).filter(k => table[k].step === step && !isEmpty(table[k].value));
+  return nonEmptyStatuses.length;
+};
+const getRequiredCount = (table, step) => {
+  const requiredStatuses = Object.keys(table).filter(k => {
+    return table[k].step === step && table[k].required;
+  });
+  return requiredStatuses.length;
+};
+const getNonEmptyRequiredCount = (table, step) => {
+  const requiredNonEmptyStatuses = Object.keys(table).filter(k => table[k].step === step && table[k].required && !isEmpty(table[k].value));
+  return requiredNonEmptyStatuses.length;
+};
+
 // Used locally for callout presentation
 const callout = props => {
   const componentProps = Object.assign({
@@ -2748,25 +2716,43 @@ const Visible = styled.div(_t2$4 || (_t2$4 = _$6`
 
 const GoAInputBaseControl = props => {
   var _a, _b, _c;
-  // eslint-disable-next-line
   const {
-    id,
-    description,
-    errors,
     uischema,
     visible,
-    config,
     label,
     input,
     required
   } = props;
-  errors.length === 0;
   const InnerComponent = input;
   const labelToUpdate = getLabelText(uischema.scope, label || '');
   let modifiedErrors = checkFieldValidity(props);
   if (modifiedErrors === 'should be equal to one of the allowed values' && ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.enumContext)) {
     modifiedErrors = '';
   }
+  const getStepStatus = (props, value) => {
+    return {
+      id: props.id,
+      value: value,
+      required: props.required || false,
+      type: props.schema.type,
+      step: stepperContext.stepId
+    };
+  };
+  const stepperContext = useContext(StepperContext);
+  const handlerWithStepperUpdate = (path, value) => {
+    stepperContext.updateStatus(getStepStatus(props, value));
+    props.handleChange(path, value);
+  };
+  const modifiedProps = Object.assign(Object.assign({}, props), {
+    handleChange: handlerWithStepperUpdate
+  });
+  useEffect(() => {
+    if (!stepperContext.isInitialized(props.id)) {
+      const status = getStepStatus(props, props.data);
+      stepperContext.updateStatus(status);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return jsx(Visible, {
     visible: visible,
     children: jsx(FormFieldWrapper, {
@@ -2775,12 +2761,78 @@ const GoAInputBaseControl = props => {
         error: modifiedErrors,
         label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
         helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
-        children: jsx(InnerComponent, Object.assign({}, props))
+        children: jsx(InnerComponent, Object.assign({}, modifiedProps))
       })
     })
   });
 };
 
+var makeBuiltIn = makeBuiltIn$3.exports;
+var defineProperty = objectDefineProperty;
+
+var defineBuiltInAccessor$1 = function (target, name, descriptor) {
+  if (descriptor.get) makeBuiltIn(descriptor.get, name, { getter: true });
+  if (descriptor.set) makeBuiltIn(descriptor.set, name, { setter: true });
+  return defineProperty.f(target, name, descriptor);
+};
+
+var $$2 = _export;
+var DESCRIPTORS = descriptors;
+var global$1 = global$f;
+var uncurryThis$1 = functionUncurryThis;
+var hasOwn$1 = hasOwnProperty_1;
+var isCallable = isCallable$h;
+var isPrototypeOf$1 = objectIsPrototypeOf;
+var toString$1 = toString$5;
+var defineBuiltInAccessor = defineBuiltInAccessor$1;
+var copyConstructorProperties = copyConstructorProperties$2;
+
+var NativeSymbol = global$1.Symbol;
+var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+
+if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
+  // Safari 12 bug
+  NativeSymbol().description !== undefined
+)) {
+  var EmptyStringDescriptionStore = {};
+  // wrap Symbol constructor for correct work with undefined description
+  var SymbolWrapper = function Symbol() {
+    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$1(arguments[0]);
+    var result = isPrototypeOf$1(SymbolPrototype, this)
+      ? new NativeSymbol(description)
+      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
+      : description === undefined ? NativeSymbol() : NativeSymbol(description);
+    if (description === '') EmptyStringDescriptionStore[result] = true;
+    return result;
+  };
+
+  copyConstructorProperties(SymbolWrapper, NativeSymbol);
+  SymbolWrapper.prototype = SymbolPrototype;
+  SymbolPrototype.constructor = SymbolWrapper;
+
+  var NATIVE_SYMBOL = String(NativeSymbol('description detection')) === 'Symbol(description detection)';
+  var thisSymbolValue = uncurryThis$1(SymbolPrototype.valueOf);
+  var symbolDescriptiveString = uncurryThis$1(SymbolPrototype.toString);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis$1(''.replace);
+  var stringSlice = uncurryThis$1(''.slice);
+
+  defineBuiltInAccessor(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = thisSymbolValue(this);
+      if (hasOwn$1(EmptyStringDescriptionStore, symbol)) return '';
+      var string = symbolDescriptiveString(symbol);
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      return desc === '' ? undefined : desc;
+    }
+  });
+
+  $$2({ global: true, constructor: true, forced: true }, {
+    Symbol: SymbolWrapper
+  });
+}
+
 const GoAInputText = props => {
   var _a, _b, _c, _d, _e, _f, _g;
   const {
@@ -2789,10 +2841,6 @@ const GoAInputText = props => {
     id,
     enabled,
     uischema,
-    isValid,
-    errors,
-    path,
-    handleChange,
     schema,
     label
   } = props;
@@ -2812,9 +2860,9 @@ const GoAInputText = props => {
     // maxLength={appliedUiSchemaOptions?.maxLength}
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
+    // Don't use handleChange in the onChange event, use the keyPress or onBlur.
     // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldnt.
+    // side effect that causes the validation to render when it shouldn't.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
       onKeyPressForTextControl({
@@ -3277,14 +3325,16 @@ function addDataByOptions(key, url, location, type, values) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const enumValues = new Map();
 const enumFunctions = new Map();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const enumSubmitFunctions = new Map();
 const baseEnumerator = {
   data: enumValues,
-  functions: enumFunctions
+  functions: enumFunctions,
+  submitFunction: enumSubmitFunctions
 };
 const JsonFormContext = /*#__PURE__*/createContext(baseEnumerator);
 function ContextProvider(props) {
   var _a;
-  React.useContext(JsonFormContext);
   if (props.fileManagement) {
     const {
       fileList,
@@ -3301,6 +3351,13 @@ function ContextProvider(props) {
     enumFunctions.set('download-file', () => downloadFileFunction);
     enumFunctions.set('delete-file', () => deleteFileFunction);
   }
+  if (props.submit) {
+    const {
+      submitForm
+    } = props.submit;
+    const submitFunction = submitForm ? submitForm : () => {};
+    enumSubmitFunctions.set('submit-form', () => submitFunction);
+  }
   if (props.data) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_a = props.data) === null || _a === void 0 ? void 0 : _a.forEach(item => {
@@ -3319,6 +3376,8 @@ function ContextProvider(props) {
  * Grabs data stored under a given key
  *
  */
+// FIXME give some clue as to what data is being fetched.
+// e.g.is it getFormContextData?
 function getData(key) {
   const dataFunction = baseEnumerator.data.get(key);
   return dataFunction && dataFunction();
@@ -3407,7 +3466,7 @@ const GoAEnumControlTester = rankWith(2, isEnumControl);
 const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(numControl), true);
 
 const EnumSelectAutoComplete = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const {
     data,
     schema,
@@ -3432,22 +3491,31 @@ const EnumSelectAutoComplete = props => {
     // eslint-disable-next-line
     enumData = newData;
   }
-  return jsx(GoADropdown, {
-    value: data,
-    onChange: (name, value) => {
-      handleChange(path, value);
-    },
-    testId: `autocomplete-dropdown-${label}`,
-    id: `autocomplete-dropdown-${label}`,
-    width: "100%",
-    filterable: true,
-    relative: true,
-    ariaLabel: label,
-    children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
-      return jsx(GoADropdownItem, {
-        value: item,
-        label: item
-      }, `autocomplete-${item}`);
+  const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
+  return jsx("div", {
+    children: readOnly ? jsx("div", {
+      children: jsx(GoADropdown, {
+        disabled: true,
+        placeholder: data,
+        onChange: () => {}
+      })
+    }) : jsx(GoADropdown, {
+      value: data,
+      onChange: (name, value) => {
+        handleChange(path, value);
+      },
+      testId: `autocomplete-dropdown-${label}`,
+      id: `autocomplete-dropdown-${label}`,
+      width: "100%",
+      filterable: true,
+      relative: true,
+      ariaLabel: label,
+      children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
+        return jsx(GoADropdownItem, {
+          value: item,
+          label: item
+        }, `autocomplete-${item}`);
+      })
     })
   });
 };
@@ -3670,7 +3738,7 @@ const GridItem = styled.div(_t2$3 || (_t2$3 = _$5`
 let _$4 = t => t,
   _t$4,
   _t2$2,
-  _t3$1,
+  _t3$2,
   _t4$1,
   _t5,
   _t6,
@@ -3693,7 +3761,7 @@ const ReviewItemSection = styled.div(_t2$2 || (_t2$2 = _$4`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
 `));
-const ReviewItemHeader = styled.div(_t3$1 || (_t3$1 = _$4`
+const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$4`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3859,53 +3927,100 @@ requiredFields) => elements.map((element, index) => {
   return null;
 });
 
-const FormStepper = ({
-  uischema,
-  data,
-  schema,
-  // eslint-disable-next-line
-  ajv,
-  path,
-  cells,
-  renderers,
-  config,
-  visible,
-  enabled,
-  t
-}) => {
+const RenderStepElements = props => {
+  return (
+    /*
+      [Mar-04-2024][Paul Li] the GoAPages internal state cannot handle the hidden/display well. We need extra hide/display control to it appropriately.
+     */
+    jsx(Visible, {
+      visible: props.categoryIndex === props.step - 1,
+      children: props.category.elements.map((uiSchema, index) => {
+        return jsx(JsonFormsDispatch, {
+          schema: props.schema,
+          uischema: uiSchema,
+          renderers: props.renderers,
+          cells: props.cells,
+          path: props.path,
+          visible: props.visible,
+          enabled: props.enabled && !props.disabledCategoryMap[props.categoryIndex]
+        }, index);
+      })
+    })
+  );
+};
+
+const FormStepper = props => {
+  var _a, _b, _c, _d;
+  const {
+    uischema,
+    data,
+    schema,
+    ajv,
+    path,
+    cells,
+    renderers,
+    visible,
+    enabled,
+    t
+  } = props;
+  const enumerators = useContext(JsonFormContext);
+  const submitFormFunction = enumerators.submitFunction.get('submit-form');
+  const submitForm = submitFormFunction && submitFormFunction();
   const categorization = uischema;
   const rawCategories = JSON.parse(JSON.stringify(categorization));
-  const [step, setStep] = useState(1);
-  const [isFormValid, setIsFormValid] = useState(false);
-  const [showNextBtn, setShowNextBtn] = useState(true);
-  const [isOpen, setIsOpen] = useState(false);
-  const [categories, setCategories] = useState(categorization.elements);
+  const [step, setStep] = React.useState(0);
+  const [isFormValid, setIsFormValid] = React.useState(false);
+  const [showNextBtn, setShowNextBtn] = React.useState(true);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [categories, setCategories] = React.useState(categorization.elements);
+  const [inputStatuses, setInputStatuses] = React.useState({});
+  const [stepStatuses, setStepStatuses] = React.useState([]);
   useEffect(() => {
-    const cates = categorization.elements.filter(category => isVisible(category, data, '', ajv));
-    setCategories(cates);
+    const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
+    setCategories(cats);
   }, [categorization, data, ajv]);
   const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
   const handleSubmit = () => {
-    setIsOpen(true);
-    console.log('submitted', data);
+    if (submitForm) {
+      submitForm(data);
+    } else {
+      setIsOpen(true);
+    }
   };
   const onSubmit = () => {
     setIsOpen(false);
-    console.log('submitted', data);
   };
   const CategoryLabels = useMemo(() => {
-    return categories.map(e => deriveLabelForUISchemaElement(e, t));
+    return categories.map(c => deriveLabelForUISchemaElement(c, t));
   }, [categories, t]);
   useEffect(() => {}, [categories.length]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vslidateFormData = formData => {
-    const validate = ajv.compile(schema);
-    return validate(formData);
-  };
   useEffect(() => {
-    const valid = vslidateFormData(data);
-    setIsFormValid(valid);
-  }, [data, vslidateFormData]);
+    const statuses = Array(categories.length);
+    categories.forEach((_, i) => {
+      statuses[i] = getCompletionStatus(inputStatuses, i + 1);
+    });
+    setStepStatuses(statuses);
+  }, [inputStatuses, categories]);
+  useEffect(() => {
+    const newSchema = JSON.parse(JSON.stringify(schema));
+    Object.keys(newSchema.properties || {}).forEach(propertyName => {
+      var _a;
+      const property = newSchema.properties || {};
+      property[propertyName].enum = getData(propertyName);
+      if (((_a = property[propertyName]) === null || _a === void 0 ? void 0 : _a.format) === 'file-urn') {
+        delete property[propertyName].format;
+      }
+    });
+    const validate = ajv.compile(newSchema);
+    setIsFormValid(validate(data));
+  }, [ajv, data, schema]);
+  useEffect(() => {
+    var _a, _b;
+    // Override the "controlled Navigation", if property is supplied
+    // Default: no controlled nav.
+    setStep(((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.controlledNav) ? 1 : 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
     // eslint-disable-next-line
     return jsx(Fragment, {});
@@ -3924,159 +4039,168 @@ const FormStepper = ({
     }
     setPage(page);
   }
-  function setTab(page) {
+  const getNextStep = step => {
     const rawCategoryLabels = rawCategories.elements.map(category => category.label);
     if (rawCategoryLabels.length !== CategoryLabels.length) {
-      if (page > 1 && page <= rawCategoryLabels.length) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const selectedTabLabel = rawCategoryLabels[page - 1];
+      if (step > 1 && step <= rawCategoryLabels.length) {
+        const selectedTabLabel = rawCategoryLabels[step - 1];
         const selectedTab = CategoryLabels.indexOf(selectedTabLabel);
-        const newStep = selectedTab !== -1 ? selectedTab + 1 : page;
-        page = newStep;
+        const newStep = selectedTab !== -1 ? selectedTab + 1 : step;
+        return newStep;
       }
-      if (page > rawCategoryLabels.length) {
-        page = page - 1;
+      if (step > rawCategoryLabels.length) {
+        return step - 1;
       }
     }
+    return step;
+  };
+  function setTab(page) {
+    page = getNextStep(page);
     setStep(page);
     if (page < 1 || page > categories.length + 1) return;
-    if (categories.length + 1 === page) {
-      setShowNextBtn(false);
-    } else {
-      setShowNextBtn(true);
-    }
+    setShowNextBtn(categories.length + 1 !== page);
   }
   function setPage(page) {
     setStep(page);
     if (page < 1 || page > categories.length + 1) return;
-    if (categories.length + 1 === page) {
-      setShowNextBtn(false);
-    } else {
-      setShowNextBtn(true);
-    }
+    setShowNextBtn(categories.length + 1 !== page);
   }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    setStep(0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const renderStepElements = (category, indexOfCategory) => {
-    return (
-      /*
-        [Mar-04-2024][Paul Li] the GoAPages internal state cannot handle the hidden/display well. We need extra hide/display control to it appropriately.
-       */
-      jsx(Visible, {
-        visible: indexOfCategory === step - 1,
-        children: category.elements.map((elementUiSchema, index) => {
-          return jsx(JsonFormsDispatch, {
-            schema: schema,
-            uischema: elementUiSchema,
-            renderers: renderers,
-            cells: cells,
-            path: path,
-            visible: visible,
-            enabled: enabled && !disabledCategoryMap[indexOfCategory]
-          }, index);
-        })
-      })
-    );
-  };
-  const handleEdit = index => {
+  const changePage = index => {
     setPage(index + 1);
   };
-  return jsx(Visible, {
-    visible: visible,
-    children: jsxs("div", {
-      id: `${path || `goa`}-form-stepper`,
-      className: "formStepper",
-      children: [jsxs(GoAFormStepper, {
-        testId: "form-stepper-test",
-        step: step,
-        onChange: step => {
-          setTab(step);
-        },
-        children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-          return jsx(GoAFormStep, {
-            text: `${CategoryLabels[index]}`,
-            status: 'incomplete'
-          }, `${CategoryLabels[index]}-tab`);
-        }), jsx(GoAFormStep, {
-          text: "Review",
-          status: "incomplete"
-        })]
-      }), jsxs(GoAPages, {
-        current: step,
-        mb: "xl",
-        children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-          return jsx("div", {
-            "data-testid": `step_${index}-content`,
-            children: renderStepElements(category, index)
-          }, `${CategoryLabels[index]}`);
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            style: {
-              flex: 1
-            },
-            children: "Summary"
-          }), jsx(ReviewItem, {
-            children: categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
-              const categoryLabel = category.label || category.i18n || 'Unknown Category';
-              const requiredFields = getAllRequiredFields(schema);
-              return jsxs(ReviewItemSection, {
-                children: [jsxs(ReviewItemHeader, {
-                  children: [jsx(ReviewItemTitle, {
-                    children: categoryLabel
-                  }), jsx(Anchor, {
-                    onClick: () => handleEdit(index),
-                    children: "Edit"
+  const updateInputStatus = inputStatus => {
+    inputStatuses[inputStatus.id] = inputStatus;
+    setInputStatuses(Object.assign({}, inputStatuses));
+  };
+  const isInputInitialized = inputId => {
+    return inputId in inputStatuses;
+  };
+  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  return jsx("div", {
+    "data-testid": "form-stepper-test-wrapper",
+    children: jsx(Visible, {
+      visible: visible,
+      children: jsxs("div", {
+        id: `${path || `goa`}-form-stepper`,
+        className: "formStepper",
+        children: [jsxs(GoAFormStepper, {
+          testId: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.testId) || 'form-stepper-test',
+          step: step,
+          onChange: step => {
+            setTab(step);
+          },
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((_, index) => {
+            return jsx(GoAFormStep, {
+              text: `${CategoryLabels[index]}`,
+              status: stepStatuses[index]
+            }, `${CategoryLabels[index]}-tab`);
+          }), jsx(GoAFormStep, {
+            text: "Review"
+          })]
+        }), jsxs(GoAPages, {
+          current: step,
+          mb: "xl",
+          children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
+            const props = {
+              category,
+              categoryIndex: index,
+              step: index + 1,
+              schema,
+              enabled,
+              visible,
+              path,
+              disabledCategoryMap,
+              renderers,
+              cells
+            };
+            return jsx("div", {
+              "data-testid": `step_${index}-content`,
+              style: {
+                marginTop: '1.5rem'
+              },
+              children: jsx(StepperContext.Provider, {
+                value: {
+                  stepId: index + 1,
+                  updateStatus: updateInputStatus,
+                  isInitialized: isInputInitialized
+                },
+                children: RenderStepElements(props)
+              })
+            }, `${CategoryLabels[index]}`);
+          }), jsxs("div", {
+            "data-testid": "summary_step-content",
+            children: [jsx("h3", {
+              style: {
+                flex: 1,
+                marginBottom: '1rem'
+              },
+              children: "Summary"
+            }), jsx(ReviewItem, {
+              children: categories.map((category, index) => {
+                const categoryLabel = category.label || category.i18n || 'Unknown Category';
+                const requiredFields = getAllRequiredFields(schema);
+                return jsxs(ReviewItemSection, {
+                  children: [jsxs(ReviewItemHeader, {
+                    children: [jsx(ReviewItemTitle, {
+                      children: categoryLabel
+                    }), jsx(Anchor, {
+                      onClick: () => changePage(index),
+                      children: readOnly ? 'View' : 'Edit'
+                    })]
+                  }), jsx(Grid, {
+                    children: renderFormFields(category.elements, data, requiredFields)
                   })]
-                }), jsx(Grid, {
-                  children: renderFormFields(category.elements, data, requiredFields)
-                })]
-              }, index);
-            })
+                }, index);
+              })
+            })]
           })]
-        })]
-      }), step && step !== 0 && jsxs(GoAGrid, {
-        minChildWidth: "100px",
-        children: [jsx("div", {
-          children: step !== 1 && jsx(GoAButton, {
-            type: "secondary",
-            disabled: disabledCategoryMap[step - 1] || !enabled,
-            onClick: () => prevPage(step, disabledCategoryMap),
-            children: "Previous"
-          })
-        }), jsxs(RightAlignmentDiv, {
-          children: [step !== null && showNextBtn && jsx(GoAButton, {
-            type: "primary",
-            disabled: disabledCategoryMap[step - 1] || !enabled,
-            onClick: () => nextPage(step, disabledCategoryMap),
-            children: "Next"
-          }), !showNextBtn && jsx(GoAButton, {
-            type: "primary",
-            onClick: handleSubmit,
-            disabled: !isFormValid || !enabled,
-            children: "Submit"
+        }), step && step !== 0 && jsxs(GoAGrid, {
+          minChildWidth: "100px",
+          children: [jsx("div", {
+            children: step !== 1 ? jsx(GoAButton, {
+              type: "secondary",
+              disabled: disabledCategoryMap[step - 1] || !enabled,
+              onClick: () => prevPage(step, disabledCategoryMap),
+              testId: "prev-button",
+              children: "Previous"
+            }) : jsx("div", {})
+          }), jsxs(RightAlignmentDiv, {
+            children: [step !== null && showNextBtn && jsx(GoAButton, {
+              type: "primary",
+              disabled: disabledCategoryMap[step - 1] || !enabled,
+              onClick: () => nextPage(step, disabledCategoryMap),
+              testId: "next-button",
+              children: "Next"
+            }), !showNextBtn && jsx("div", {
+              children: jsx(GoAButton, {
+                type: "primary",
+                onClick: handleSubmit,
+                disabled: !isFormValid || !enabled,
+                children: "Submit"
+              })
+            })]
           })]
-        })]
-      }), jsxs(GoAModal, {
-        testId: "submit-confirmation",
-        open: isOpen,
-        heading: 'Form Submitted',
-        width: "640px",
-        actions: jsx(GoAButtonGroup, {
-          alignment: "end",
-          children: jsx(GoAButton, {
-            type: "primary",
-            testId: "submit-form",
-            onClick: onSubmit,
-            children: "Close"
+        }), jsx(GoAModal, {
+          testId: "submit-confirmation",
+          open: isOpen,
+          heading: 'Form Submitted',
+          width: "640px",
+          actions: jsxs(GoAButtonGroup, {
+            alignment: "end",
+            children: [jsx(GoAButton, {
+              type: "primary",
+              testId: "submit-form",
+              onClick: onSubmit,
+              children: "Close"
+            }), !showNextBtn && jsx(GoAButton, {
+              type: "primary",
+              onClick: handleSubmit,
+              disabled: !isFormValid || !enabled,
+              children: "Submit"
+            })]
           })
-        }),
-        children: [jsx("b", {
-          children: "Submit is a test for preview purposes "
-        }), "(i.e. no actual form is being submitted)"]
-      })]
+        })]
+      })
     })
   });
 };
@@ -4192,11 +4316,12 @@ const DeleteFileModal = ({
 
 let _$2 = t => t,
   _t$2,
-  _t2$1;
+  _t2$1,
+  _t3$1;
 const DELAY_UPLOAD_TIMEOUT_MS = 200;
 const DELAY_DELETE_TIMEOUT_MS = 80;
 const FileUploader = _a => {
-  var _b;
+  var _b, _c, _d, _e;
   var {
       data,
       path,
@@ -4260,6 +4385,7 @@ const FileUploader = _a => {
     const timeoutId = setTimeout(delayedFunction, 1);
     return () => clearTimeout(timeoutId);
   }, [handleChange, fileList, propertyId]);
+  const readOnly = (_e = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) !== null && _e !== void 0 ? _e : false;
   return jsxs(FileUploaderStyle, {
     id: "file-upload",
     className: "FileUploader",
@@ -4269,7 +4395,7 @@ const FileUploader = _a => {
     }) : jsx("div", {
       className: "label",
       children: props.label
-    }), jsx("div", {
+    }), !readOnly && jsx("div", {
       className: "file-upload",
       children: jsx(GoAFileUploadInput, {
         variant: variant,
@@ -4287,43 +4413,61 @@ const FileUploader = _a => {
           })
         })
       }) : jsx("div", {
-        children: fileList && getFile() && jsxs(AttachmentBorder, {
-          children: [jsx("div", {
-            children: getFileName()
-          }), jsxs(GoAContextMenu, {
-            children: [jsx(GoAContextMenuIcon, {
+        children: fileList && getFile() && jsx("div", {
+          children: readOnly ? jsxs(AttachmentBorderDisabled, {
+            children: [getFileName(), ' ', jsx(GoAContextMenuIcon, {
               testId: "download-icon",
               title: "Download",
               type: "download",
               onClick: () => downloadFile(getFile())
-            }), jsx(GoAContextMenuIcon, {
-              "data-testid": "delete-icon",
-              title: "Delete",
-              type: "trash",
-              onClick: () => {
-                setShowFileDeleteConfirmation(true);
+            })]
+          }) : jsxs(AttachmentBorder, {
+            children: [jsx("div", {
+              children: getFileName()
+            }), jsxs(GoAContextMenu, {
+              children: [jsx(GoAContextMenuIcon, {
+                testId: "download-icon",
+                title: "Download",
+                type: "download",
+                onClick: () => downloadFile(getFile())
+              }), jsx(GoAContextMenuIcon, {
+                "data-testid": "delete-icon",
+                title: "Delete",
+                type: "trash",
+                onClick: () => {
+                  setShowFileDeleteConfirmation(true);
+                }
+              })]
+            }), jsx(DeleteFileModal, {
+              isOpen: showFileDeleteConfirmation,
+              title: "Delete file",
+              content: `Delete file ${getFile().filename} ?`,
+              onCancel: () => setShowFileDeleteConfirmation(false),
+              onDelete: () => {
+                setShowFileDeleteConfirmation(false);
+                deleteFile(getFile());
+                const handleFunction = () => {
+                  handleChange(propertyId, '');
+                };
+                setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
               }
             })]
-          }), jsx(DeleteFileModal, {
-            isOpen: showFileDeleteConfirmation,
-            title: "Delete file",
-            content: `Delete file ${getFile().filename} ?`,
-            onCancel: () => setShowFileDeleteConfirmation(false),
-            onDelete: () => {
-              setShowFileDeleteConfirmation(false);
-              deleteFile(getFile());
-              const handleFunction = () => {
-                handleChange(propertyId, '');
-              };
-              setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
-            }
-          })]
+          })
         })
       })
     })]
   });
 };
-const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
+const AttachmentBorderDisabled = styled.div(_t$2 || (_t$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;
+  background-color: #f1f1f1;
+`));
+const AttachmentBorder = styled.div(_t2$1 || (_t2$1 = _$2`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -4332,7 +4476,7 @@ const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t2$1 || (_t2$1 = _$2`
+const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$2`
   .label {
     display: block;
     font-weight: var(--goa-font-weight-bold);
@@ -4535,7 +4679,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
 const NonEmptyCell = ownProps => {
   const ctx = useJsonForms();
   const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
-  const isValid = isEmpty(emptyCellProps.errors);
+  const isValid = isEmpty$1(emptyCellProps.errors);
   return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
     isValid: isValid
   }));
@@ -4800,7 +4944,7 @@ const LayoutRenderer = ({
   cells,
   visible
 }) => {
-  if (isEmpty(elements)) {
+  if (isEmpty$1(elements)) {
     return null;
   } else {
     if (direction === 'row') {
@@ -5125,7 +5269,7 @@ const getUISchemaErrors = (uiSchema, schema) => {
       const invalidCategorizations = [];
       const invalidCategories = [];
       uiSchema.elements.forEach(e => {
-        if (e.type !== 'Category') {
+        if (e.type !== 'Category' && e.type !== 'Categorization') {
           invalidCategorizations.push(e.type);
         }
         if (!hasElements(e) || isEmptyElements(e)) {