@abgov/jsonforms-components 2.78.3 → 2.79.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useRef, useEffect, useContext, useReducer, useMemo, createContext, useCallback, useState, useLayoutEffect } from 'react';
 import Ajv from 'ajv';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { toDataPath, INIT, UPDATE_CORE, isEnabled, isVisible, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, or, isOneOfEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, schemaTypeIs, formatIs, getAjv, schemaMatches, isObjectArrayControl, isPrimitiveArrayControl, composePaths, hasType, isCategorization, isLayout } from '@jsonforms/core';
@@ -6050,14 +6050,14 @@ const ensureGoaDatePointerCursor = host => {
 
 let _$b = t => t,
   _t$c,
-  _t2$6;
+  _t2$7;
 styled.div(_t$c || (_t$c = _$b`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$6 || (_t2$6 = _$b`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
   display: ${0};
   width: 100%;
 `), p => p.$visible !== false ? 'block' : 'none');
@@ -7549,7 +7549,7 @@ const useRegisterUser = () => {
 
 let _$a = t => t,
   _t$b,
-  _t2$5,
+  _t2$6,
   _t3$4,
   _t4$4,
   _t5$3,
@@ -7565,7 +7565,7 @@ let _$a = t => t,
 const FormFieldWrapper$1 = styled.div(_t$b || (_t$b = _$a`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$5 || (_t2$5 = _$a`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
   display: flex;
   align-items: flex-start;
   gap: var(--goa-space-2xs);
@@ -8779,9 +8779,15 @@ const stepperReducer = (state, action) => {
         } = action.payload;
         const newActive = id;
         const isOnReview = newActive === lastId + 1;
+        // A scope means the user came from a review Change button or a host's deep link, i.e. back to
+        // fix an answer. The form may have just mounted — a summary on a separate page — so nothing
+        // else has marked the step, and without this an emptied required field would stay quiet.
+        const newCategories = targetScope ? categories.map(c => c.id === id && c.isNavigatedAway !== true ? Object.assign({}, c, {
+          isNavigatedAway: true
+        }) : c) : categories;
         return Object.assign({}, state, {
           activeId: newActive,
-          categories: categories,
+          categories: newCategories,
           isOnReview,
           hasNextButton: !isOnReview,
           hasPrevButton: newActive !== 0,
@@ -12465,7 +12471,7 @@ $$6({ target: 'Array', proto: true, arity: 1, forced: FORCED$1 }, {
 
 let _$8 = t => t,
   _t$9,
-  _t2$4,
+  _t2$5,
   _t3$3,
   _t4$3,
   _t5$2,
@@ -12499,7 +12505,7 @@ let _$8 = t => t,
 const DeleteDialogContent = styled.div(_t$9 || (_t$9 = _$8`
   margin-bottom: var(--goa-space-m);
 `));
-const MarginTop = styled.div(_t2$4 || (_t2$4 = _$8`
+const MarginTop = styled.div(_t2$5 || (_t2$5 = _$8`
   margin-top: var(--goa-space-l);
 `));
 const NonEmptyCellStyle = styled.div(_t3$3 || (_t3$3 = _$8`
@@ -13935,6 +13941,71 @@ const useReviewChange = () => {
   }, [stepperContext, reviewContext]);
 };
 
+let _$7 = t => t,
+  _t$8,
+  _t2$4;
+const StyledBackButton = styled.button(_t$8 || (_t$8 = _$7`
+  align-items: center;
+  background: none;
+  border: 0;
+  color: var(--goa-color-interactive-default, #0070c4);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+
+  &:hover,
+  &:visited {
+    color: #004f84;
+  }
+
+  &:focus {
+    outline: 2px solid var(--goa-color-interactive-default, #0070c4);
+    outline-offset: 2px;
+  }
+
+  ${0}
+`), ({
+  $showBackIcon
+}) => $showBackIcon && css(_t2$4 || (_t2$4 = _$7`
+      margin-top: var(--goa-space-m);
+      margin-bottom: var(--goa-space-m);
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 42px;
+        height: 24px;
+        vertical-align: middle;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+          center center no-repeat;
+      }
+
+      &:hover::before,
+      &:visited::before {
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+          center center no-repeat;
+      }
+    `)));
+const BackButton = ({
+  text,
+  testId,
+  link,
+  showBackIcon: _showBackIcon = true
+}) => {
+  return jsx(StyledBackButton, {
+    type: "button",
+    "$showBackIcon": _showBackIcon,
+    "data-testid": testId || 'back-button-click',
+    onClick: link,
+    children: text
+  });
+};
+
 const GoAInputBaseTableReview = props => {
   var _uischema$options, _uischema$scope2, _jsonForms$core, _uischema$options4, _uischema$options5, _uischema$options6;
   const {
@@ -14135,11 +14206,10 @@ const GoAInputBaseTableReview = props => {
           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(GoabButton, {
-          type: "text",
-          size: "compact",
-          onClick: handleChangeClick,
-          children: "Change"
+        }), 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
         })]
       }), jsxs(ReviewValue, {
         children: [showInlineValue ? jsx("div", {
@@ -14270,8 +14340,8 @@ const GoAEmailControl = props => jsx(GoAEmailInput, Object.assign({}, props));
 const GoAEmailControlTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('email')));
 const GoAInputEmailControl = withJsonFormsControlProps(GoAEmailControl);
 
-let _$7 = t => t,
-  _t$8;
+let _$6 = t => t,
+  _t$7;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx(JsonFormsDispatch, {
     uischema: child,
@@ -14350,14 +14420,14 @@ const ReviewLayoutRenderer = ({
     }
   }
 };
-const ReviewGrid = styled.div(_t$8 || (_t$8 = _$7`
+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 _$6 = t => t,
-  _t$7,
+let _$5 = t => t,
+  _t$6,
   _t2$3,
   _t3$2,
   _t4$2,
@@ -14387,11 +14457,11 @@ let _$6 = t => t,
   _t26,
   _t27,
   _t28;
-const ReviewItem = styled.div(_t$7 || (_t$7 = _$6`
+const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
   display: flex;
   flex-direction: column;
 `));
-const CompletionStatus = styled.div(_t2$3 || (_t2$3 = _$6`
+const CompletionStatus = styled.div(_t2$3 || (_t2$3 = _$5`
   padding: 0;
   margin: 0;
   padding-top: var(--goa-space-xl);
@@ -14399,14 +14469,14 @@ const CompletionStatus = styled.div(_t2$3 || (_t2$3 = _$6`
   display: flex;
   flex-direction: column;
 `));
-const BarTop = styled.div(_t3$2 || (_t3$2 = _$6`
+const BarTop = styled.div(_t3$2 || (_t3$2 = _$5`
   display: flex;
 
   .progress-text {
     margin-left: auto;
   }
 `));
-const Bar = styled.div(_t4$2 || (_t4$2 = _$6`
+const Bar = styled.div(_t4$2 || (_t4$2 = _$5`
   display: flex;
   flex-direction: row;
 
@@ -14436,15 +14506,15 @@ const Bar = styled.div(_t4$2 || (_t4$2 = _$6`
     box-sizing: border-box;
   }
 `));
-styled.div(_t5$1 || (_t5$1 = _$6``));
-const BadgeWrapper = styled.div(_t6$1 || (_t6$1 = _$6`
+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 = _$6`
+const CompletionTextHeader = styled.h3(_t7 || (_t7 = _$5`
   display: flex;
 `));
-const ReviewItemSection = styled.div(_t8 || (_t8 = _$6`
+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);
@@ -14454,18 +14524,18 @@ const ReviewItemSection = styled.div(_t8 || (_t8 = _$6`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t9 || (_t9 = _$6`
+const ReviewItemHeader = styled.div(_t9 || (_t9 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t0 || (_t0 = _$6`
+const ReviewItemTitle = styled.div(_t0 || (_t0 = _$5`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-styled.div(_t1 || (_t1 = _$6`
+styled.div(_t1 || (_t1 = _$5`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -14476,20 +14546,20 @@ styled.div(_t1 || (_t1 = _$6`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t10 || (_t10 = _$6`
+styled.div(_t10 || (_t10 = _$5`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t11 || (_t11 = _$6`
+styled.div(_t11 || (_t11 = _$5`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t12 || (_t12 = _$6`
+styled.div(_t12 || (_t12 = _$5`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t13 || (_t13 = _$6`
+styled.h3(_t13 || (_t13 = _$5`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$6`
+const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$5`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -14499,50 +14569,50 @@ const RightAlignmentDiv = styled.div(_t14 || (_t14 = _$6`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$6`
+const FormStepperSummaryH3 = styled.h3(_t15 || (_t15 = _$5`
   flex: 1;
   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-regular);
 `));
-const PageRenderPadding = styled.div(_t16 || (_t16 = _$6`
+const PageRenderPadding = styled.div(_t16 || (_t16 = _$5`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t17 || (_t17 = _$6`
+styled.div(_t17 || (_t17 = _$5`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.div(_t18 || (_t18 = _$6`
+const PageBorder = styled.div(_t18 || (_t18 = _$5`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-styled.div(_t19 || (_t19 = _$6`
+styled.div(_t19 || (_t19 = _$5`
   .element-style {
     max-width: 1600px;
   }
 `));
-styled.div(_t20 || (_t20 = _$6`
+styled.div(_t20 || (_t20 = _$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(_t21 || (_t21 = _$6`
+styled.div(_t21 || (_t21 = _$5`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-styled.h3(_t22 || (_t22 = _$6`
+styled.h3(_t22 || (_t22 = _$5`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t23 || (_t23 = _$6`
+const CategoryStatus = styled.td(_t23 || (_t23 = _$5`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
   align-content: center;
 `));
-const Center = styled.div(_t24 || (_t24 = _$6`
+const Center = styled.div(_t24 || (_t24 = _$5`
   padding-top: 5px;
 `));
-const PageStepperRow = styled.tr(_t25 || (_t25 = _$6`
+const PageStepperRow = styled.tr(_t25 || (_t25 = _$5`
   ${0}
 `), ({
   disabled
@@ -14567,7 +14637,7 @@ const PageStepperRow = styled.tr(_t25 || (_t25 = _$6`
             outline: 3px solid var(--goa-color-interactive-focus);
           }
         `);
-const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$6`
+const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$5`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
@@ -14579,7 +14649,7 @@ const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$6`
     border-top: none !important;
   }
 `));
-const SummaryRowLink = styled.a(_t27 || (_t27 = _$6`
+const SummaryRowLink = styled.a(_t27 || (_t27 = _$5`
   position: relative;
   top: var(--goa-space-xs);
   &:focus-visible {
@@ -14588,7 +14658,7 @@ const SummaryRowLink = styled.a(_t27 || (_t27 = _$6`
   }
   padding: 0 var(--goa-space-s) var(--goa-space-xs); var(--goa-space-s);
 `));
-const SummaryTd = styled.td(_t28 || (_t28 = _$6`
+const SummaryTd = styled.td(_t28 || (_t28 = _$5`
   border: 0 !important;
   padding: 0 !important;
 `));
@@ -14687,12 +14757,11 @@ const FullNameControlReview = props => {
             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(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => reportChange(stepId, uischema.scope),
+          }), 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`,
-            children: "Change"
+            showBackIcon: false
           })]
         }), jsxs(ReviewValue, {
           children: [jsx("div", {
@@ -14737,12 +14806,11 @@ const FullNameDobReviewControl = props => {
             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(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => reportChange(stepId, uischema.scope),
+          }), 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`,
-            children: "Change"
+            showBackIcon: false
           })]
         }), jsxs(ReviewValue, {
           children: [jsx("div", {
@@ -14893,14 +14961,14 @@ const GoAPhoneNumberControl = withJsonFormsControlProps(PhoneNumberControl);
 
 const PhoneNumberTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('phone')));
 
-let _$5 = t => t,
-  _t$6,
+let _$4 = t => t,
+  _t$5,
   _t2$2,
   _t3$1,
   _t4$1,
   _t5,
   _t6;
-const SearchBox = styled.div(_t$6 || (_t$6 = _$5`
+const SearchBox = styled.div(_t$5 || (_t$5 = _$4`
   position: relative;
 
   .suggestions {
@@ -14942,7 +15010,7 @@ const SearchBox = styled.div(_t$6 || (_t$6 = _$5`
     pointer-events: none; /* Prevent spinner from interfering with clicks */
   }
 `));
-const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$5`
+const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$4`
   margin: 0 0 var(--goa-space-m) 0;
   text-wrap: wrap;
   word-break: break-word;
@@ -14950,15 +15018,15 @@ const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$5`
   border-radius: var(--goa-border-radius-xl);
   padding: var(--goa-space-l);
 `));
-const TextWrap = styled.p(_t3$1 || (_t3$1 = _$5`
+const TextWrap = styled.p(_t3$1 || (_t3$1 = _$4`
   text-wrap: auto;
   word-break: break-word;
 `));
-const TextWrapDiv = styled.div(_t4$1 || (_t4$1 = _$5`
+const TextWrapDiv = styled.div(_t4$1 || (_t4$1 = _$4`
   text-wrap: auto;
   word-break: break-word;
 `));
-const LabelDiv = styled.div(_t5 || (_t5 = _$5`
+const LabelDiv = styled.div(_t5 || (_t5 = _$4`
   color: var(--goa-color-text-default);
   font: var(--goa-typography-body-m);
   min-height: 2.625rem;
@@ -14968,7 +15036,7 @@ const LabelDiv = styled.div(_t5 || (_t5 = _$5`
   word-break: break-word;
 `));
 /* istanbul ignore next */
-const ListItem = styled.li(_t6 || (_t6 = _$5`
+const ListItem = styled.li(_t6 || (_t6 = _$4`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -15005,9 +15073,9 @@ const PhoneNumberReviewControl = props => {
 };
 const GoabInputBasePhoneNumberReviewControl = withJsonFormsAllOfProps(PhoneNumberReviewControl);
 
-let _$4 = t => t,
-  _t$5;
-const PhoneGrid = styled.div(_t$5 || (_t$5 = _$4`
+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;
@@ -15122,9 +15190,9 @@ const PhoneNumberWithTypeReviewControl = props => {
 };
 const GoabInputBasePhoneNumberWithTypeReviewControl = withJsonFormsAllOfProps(PhoneNumberWithTypeReviewControl);
 
-let _$3 = t => t,
-  _t$4;
-const FormFieldWrapper = styled.div(_t$4 || (_t$4 = _$3`
+let _$2 = t => t,
+  _t$3;
+const FormFieldWrapper = styled.div(_t$3 || (_t$3 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 
@@ -15215,12 +15283,11 @@ const ContractInfoControlReview = props => {
         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(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => reportChange(stepId, uischema.scope),
+          }), 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`,
-            children: "Change"
+            showBackIcon: false
           })]
         }), jsxs(ReviewValue, {
           children: [jsx("div", {
@@ -16030,14 +16097,13 @@ const ObjectArrayControl = props => {
               },
               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(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => {
+          }), 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);
             },
-            children: "Change"
+            showBackIcon: false
           })]
         }) : null, jsx(ObjectArrayList, Object.assign({
           path: path,
@@ -16547,9 +16613,7 @@ const AddressLoopUpControlTableReview = props => {
     data,
     schema,
     uischema,
-    path,
-    label,
-    required
+    path
   } = props;
   const jsonForms = useJsonForms();
   const stepId = (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.stepId;
@@ -16647,6 +16711,9 @@ const AddressLoopUpControlTableReview = props => {
   };
   // Build the target scope for the address control
   const targetScope = (uischema == null ? void 0 : uischema.scope) || (path ? `#/properties/${path}` : undefined);
+  const handleChangeClick = (changeStepId, scope) => {
+    reportChange(changeStepId, scope);
+  };
   const renderRow = (label, value, propName, showButton = false) => {
     var _uischema$options2;
     let error = getError(propName);
@@ -16663,12 +16730,11 @@ const AddressLoopUpControlTableReview = props => {
             children: [label, required && jsx(RequiredTextLabel, {
               children: " (required)"
             })]
-          }), showButton && showChangeButtons && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => reportChange(stepId, targetScope),
+          }), showButton && showChangeButtons && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(BackButton, {
+            text: "Change",
+            link: () => handleChangeClick(stepId, targetScope),
             testId: "address-change-btn",
-            children: "Change"
+            showBackIcon: false
           })]
         }), jsxs(ReviewValue, {
           children: [!value ? jsx(NoneGivenText, {
@@ -16689,12 +16755,11 @@ const AddressLoopUpControlTableReview = props => {
         children: jsxs(ReviewHeader, {
           children: [jsx(ReviewLabel, {
             children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
-          }), showChangeButtons && stepId !== undefined && !((_uischema$options3 = uischema.options) != null && (_uischema$options3 = _uischema$options3.componentProps) != null && _uischema$options3.readOnly) && jsx(GoabButton, {
-            type: "text",
-            size: "compact",
-            onClick: () => reportChange(stepId, targetScope),
+          }), showChangeButtons && stepId !== undefined && !((_uischema$options3 = uischema.options) != null && (_uischema$options3 = _uischema$options3.componentProps) != null && _uischema$options3.readOnly) && jsx(BackButton, {
+            text: "Change",
+            link: () => handleChangeClick(stepId, targetScope),
             testId: "address-change-btn",
-            children: "Change"
+            showBackIcon: false
           })]
         })
       })
@@ -16858,10 +16923,10 @@ const GoAGroupReviewControlComponent = props => {
 const GoAGroupReviewLayoutTester = rankWith(1, uiTypeIs('Group'));
 const GoAGroupReviewControl = withJsonFormsLayoutProps(GoAGroupReviewControlComponent, true);
 
-let _$2 = t => t,
-  _t$3,
+let _$1 = t => t,
+  _t$2,
   _t2$1;
-const HelpContentDiv = styled.div(_t$3 || (_t$3 = _$2`
+const HelpContentDiv = styled.div(_t$2 || (_t$2 = _$1`
   .parent-label {
     font-size: 24px;
     margin-bottom: var(--goa-space-m);
@@ -16949,12 +17014,12 @@ const HelpContentDiv = styled.div(_t$3 || (_t$3 = _$2`
     text-decoration: underline;
   }
 `));
-const InvalidMarkdown = styled.div(_t2$1 || (_t2$1 = _$2`
+const InvalidMarkdown = styled.div(_t2$1 || (_t2$1 = _$1`
   color: var(--goa-color-interactive-error);
 `));
 
-let _$1 = t => t,
-  _t$2;
+let _ = t => t,
+  _t$1;
 const GoAContextMenuIcon = props => {
   return jsx(GoabIconButton, {
     icon: props.type,
@@ -16965,7 +17030,7 @@ const GoAContextMenuIcon = props => {
     disabled: props.disabled
   });
 };
-const GoAContextMenu = styled.div(_t$2 || (_t$2 = _$1`
+const GoAContextMenu = styled.div(_t$1 || (_t$1 = _`
   display: flex;
   align-items: center;
   background-color: #fff;
@@ -18065,62 +18130,6 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-let _ = t => t,
-  _t$1;
-const BackButtonWrapper = styled.span(_t$1 || (_t$1 = _`
-  .back-link::before {
-    content: '';
-    display: inline-block;
-    width: 42px;
-    height: 24px;
-    vertical-align: middle;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link:visited::before,
-  .back-link:hover::before {
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link {
-    margin-top: var(--goa-space-m);
-    color: var(--goa-color-interactive-default);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    text-decoration-color: currentColor;
-    display: inline-block;
-  }
-  display: inline-block;
-  color: var(--goa-color-interactive-default);
-  cursor: pointer;
-  margin-bottom: var(--goa-space-m);
-
-  on .goa-icon {
-    display: inline-block !important;
-    position: relative;
-    top: 3px;
-    right: 2px;
-    color: var(--goa-color-interactive-default);
-    margin-left: 4px;
-  }
-`));
-const BackButton = ({
-  text,
-  testId,
-  link
-}) => {
-  return jsx(BackButtonWrapper, {
-    "data-testid": "back-button-click",
-    onClick: link,
-    children: jsx("div", {
-      className: "back-link",
-      children: text
-    })
-  });
-};
-
 const RenderPages = props => {
   var _props$categoryProps$, _props$categoryProps$2, _props$categoryProps$3, _props$categoryProps$4, _props$categoryProps$5, _props$categoryProps$6, _props$categoryProps$7;
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.78.3",
+  "version": "2.79.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-24T16:54:07.414Z",
-  "sourceCommit": "6e29aac20db75925ddab749fa1d9ed84bba71548",
+  "generatedAt": "2026-09-28T19:31:18.430Z",
+  "sourceCommit": "0a1065be074a95a231cbb92837dab05bedd44bf2",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 23,
   "renderers": [

package/src/lib/Controls/FormStepper/BackButton.d.ts

@@ -2,6 +2,7 @@ interface ExternalLinkProps {
     text: string;
     link: () => void;
     testId?: string;
+    showBackIcon?: boolean;
 }
-export declare const BackButton: ({ text, testId, link }: ExternalLinkProps) => JSX.Element;
+export declare const BackButton: ({ text, testId, link, showBackIcon }: ExternalLinkProps) => JSX.Element;
 export {};