@abgov/jsonforms-components 2.69.0 → 2.70.1

package/index.esm.js

@@ -1,6 +1,5 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { useContext, useReducer, useMemo, useEffect, createContext, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabDropdown, GoabDropdownItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabTable, GoabGrid, GoabIconButton, GoabModal, GoabButtonGroup, GoabContainer, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+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 axios from 'axios';
@@ -12,6 +11,7 @@ import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTr
 import dompurify from 'dompurify';
 import * as xss from 'xss';
 import merge from 'lodash/merge';
+import { GoabRadioGroup as GoabRadioGroup$1, GoabRadioItem as GoabRadioItem$1, GoabTable as GoabTable$1, GoabGrid as GoabGrid$1, GoabContainer as GoabContainer$1 } from '@abgov/react-components';
 import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
 import pluralize from 'pluralize';
@@ -1826,6 +1826,759 @@ $$J({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
   }
 });
 
+const lowercase = (input) => input.toLowerCase();
+function transformProps(props, transform = lowercase) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key.startsWith("data-")) {
+      result[key] = value;
+    } else {
+      result[transform(key)] = value;
+    }
+  }
+  return result;
+}
+
+function getIconValue(icon, iconType) {
+  if (icon !== void 0) {
+    return icon ? "true" : "false";
+  }
+  return iconType ? "true" : "false";
+}
+function GoabBadge({ icon, iconType, ...rest }) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-badge",
+    {
+      icon: getIconValue(icon, iconType),
+      icontype: iconType,
+      ..._props
+    }
+  );
+}
+function GoabButton({
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    current.addEventListener("_click", listener);
+    return () => {
+      current.removeEventListener("_click", listener);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-button",
+    {
+      ref: el,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
+    }
+  );
+}
+function GoabButtonGroup({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-button-group", { ..._props, children });
+}
+const GoabCallout = ({
+  type = "information",
+  iconTheme = "outline",
+  size = "large",
+  ariaLive = "off",
+  children,
+  ...rest
+}) => {
+  const _props = transformProps(
+    { type, icontheme: iconTheme, size, arialive: ariaLive, ...rest },
+    lowercase
+  );
+  return /* @__PURE__ */ jsx("goa-callout", { ..._props, children });
+};
+function GoabCheckbox({
+  error,
+  checked,
+  indeterminate,
+  disabled,
+  value,
+  description,
+  reveal,
+  onChange,
+  name,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsxs(
+    "goa-checkbox",
+    {
+      ref: el,
+      ..._props,
+      name,
+      error: error ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      indeterminate: indeterminate ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      value: typeof value === "boolean" ? value ? "true" : void 0 : value,
+      description: typeof description === "string" ? description : void 0,
+      children: [
+        children,
+        typeof description !== "string" && description && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal })
+      ]
+    }
+  );
+}
+const GoabCircularProgress = ({
+  visible,
+  message,
+  progress,
+  variant,
+  size,
+  testId
+}) => {
+  return /* @__PURE__ */ jsx(
+    "goa-circular-progress",
+    {
+      visible: visible ? "true" : void 0,
+      message,
+      progress,
+      variant,
+      size,
+      testid: testId
+    }
+  );
+};
+function GoabContainer({
+  heading,
+  title,
+  actions,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  const headingContent = heading || title;
+  return /* @__PURE__ */ jsxs("goa-container", { ..._props, children: [
+    headingContent && /* @__PURE__ */ jsx("div", { slot: "title", children: headingContent }),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions })
+  ] });
+}
+function GoabDetails({
+  open,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-details",
+    {
+      open: open ? "true" : void 0,
+      ..._props,
+      children
+    }
+  );
+}
+function stringify(value) {
+  if (typeof value === "undefined") {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+}
+function GoabDropdown({
+  value,
+  onChange,
+  disabled,
+  error,
+  filterable,
+  multiselect,
+  native,
+  relative,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    if (onChange) {
+      current.addEventListener("_change", handler);
+    }
+    return () => {
+      if (onChange) {
+        current.removeEventListener("_change", handler);
+      }
+    };
+  }, [el, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown",
+    {
+      ref: el,
+      value: stringify(value),
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      filterable: filterable ? "true" : void 0,
+      multiselect: multiselect ? "true" : void 0,
+      native: native ? "true" : void 0,
+      relative: relative ? "true" : void 0,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabDropdownItem({
+  value,
+  label,
+  filter,
+  name,
+  mountType = "append"
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown-item",
+    {
+      value,
+      label,
+      filter,
+      name,
+      mount: mountType
+    }
+  );
+}
+function GoabFileUploadInput({
+  onSelectFile,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onSelectFile({ ...detail, event: e });
+    };
+    current.addEventListener("_selectFile", handler);
+    return () => {
+      current.removeEventListener("_selectFile", handler);
+    };
+  }, [el, onSelectFile]);
+  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props });
+}
+function GoabFormItem({
+  error,
+  helpText,
+  publicFormSummaryOrder,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxs(
+    "goa-form-item",
+    {
+      error: typeof error === "string" ? error : void 0,
+      helptext: typeof helpText === "string" ? helpText : void 0,
+      "public-form-summary-order": publicFormSummaryOrder,
+      ..._props,
+      children: [
+        error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
+        helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
+        children
+      ]
+    }
+  );
+}
+function GoabFormStep(props) {
+  return /* @__PURE__ */ jsx("goa-form-step", { text: props.text, status: props.status });
+}
+function GoabFormStepper({
+  testId,
+  step,
+  mt,
+  mb,
+  ml,
+  mr,
+  onChange,
+  children
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange(detail);
+    };
+    current.addEventListener("_change", changeListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+    };
+  }, [ref, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-form-stepper",
+    {
+      ref,
+      testid: testId,
+      step,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
+function GoabGrid({
+  gap,
+  minChildWidth,
+  mt,
+  mr,
+  mb,
+  ml,
+  testId,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-grid",
+    {
+      gap,
+      minchildwidth: minChildWidth,
+      mt,
+      mr,
+      mb,
+      ml,
+      testid: testId,
+      children
+    }
+  );
+}
+function GoabIconButton({
+  variant = "color",
+  size = "medium",
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(
+    { variant, size, ...rest },
+    lowercase
+  );
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!onClick) {
+      return;
+    }
+    const current = ref.current;
+    const listener = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    current.addEventListener("_click", listener);
+    return () => {
+      current.removeEventListener("_click", listener);
+    };
+  }, [ref, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-icon-button",
+    {
+      ref,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
+    }
+  );
+}
+function GoabIcon({
+  inverted,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-icon",
+    {
+      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
+      ..._props
+    }
+  );
+}
+function GoabInput({
+  variant = "goa",
+  textAlign = "left",
+  focused,
+  disabled,
+  readonly,
+  error,
+  leadingContent,
+  trailingContent,
+  onTrailingIconClick,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyPress,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps({ variant, textalign: textAlign, ...rest }, lowercase);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const clickListener = () => {
+      onTrailingIconClick == null ? void 0 : onTrailingIconClick();
+    };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_trailingIconClick", clickListener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
+    current.addEventListener("_keyPress", keypressListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_trailingIconClick", clickListener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
+      current.removeEventListener("_keyPress", keypressListener);
+    };
+  }, [ref, onChange, onTrailingIconClick, onFocus, onBlur, onKeyPress]);
+  return /* @__PURE__ */ jsxs(
+    "goa-input",
+    {
+      ref,
+      ..._props,
+      focused: focused ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      readonly: readonly ? "true" : void 0,
+      error: error ? "true" : void 0,
+      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      children: [
+        leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
+        trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
+      ]
+    }
+  );
+}
+function GoabModal({
+  heading,
+  children,
+  maxWidth,
+  open,
+  actions,
+  transition,
+  calloutVariant,
+  onClose,
+  testId
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onClose == null ? void 0 : onClose();
+    };
+    current.addEventListener("_close", listener);
+    return () => {
+      current.removeEventListener("_close", listener);
+    };
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "goa-modal",
+    {
+      ref: el,
+      open: open ? "true" : void 0,
+      closable: onClose ? "true" : "false",
+      heading: typeof heading === "string" ? heading : void 0,
+      maxwidth: maxWidth,
+      transition,
+      calloutvariant: calloutVariant,
+      testid: testId,
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
+}
+function GoabPages(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-pages",
+    {
+      current: props.current,
+      ml: props.ml,
+      mr: props.mr,
+      mt: props.mt,
+      mb: props.mb,
+      children: props.children
+    }
+  );
+}
+function GoabRadioItem({
+  name,
+  label,
+  value,
+  description,
+  reveal,
+  revealAriaLabel,
+  maxWidth,
+  disabled,
+  checked,
+  error,
+  ariaLabel,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  return /* @__PURE__ */ jsxs(
+    "goa-radio-item",
+    {
+      name,
+      label,
+      value,
+      description: typeof description === "string" ? description : void 0,
+      maxwidth: maxWidth,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
+      mt,
+      mr,
+      mb,
+      ml,
+      children: [
+        description && typeof description !== "string" && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal }),
+        children
+      ]
+    }
+  );
+}
+function GoabRadioGroup({
+  disabled,
+  error,
+  onChange,
+  name,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const currentEl = el.current;
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
+    }
+    return () => {
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-radio-group",
+    {
+      ref: el,
+      ..._props,
+      name,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      children
+    }
+  );
+}
+function GoabSpinner({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-spinner",
+    {
+      type,
+      size,
+      progress,
+      invert: invert ? "true" : void 0,
+      testid: testId
+    }
+  );
+}
+function GoabTable({ onSort, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const sortListener = (e) => {
+      const detail = e.detail;
+      onSort == null ? void 0 : onSort(detail);
+    };
+    current.addEventListener("_sort", sortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+    };
+  }, [ref, onSort]);
+  return /* @__PURE__ */ jsx(
+    "goa-table",
+    {
+      ref,
+      width: props.width,
+      variant: props.variant,
+      testid: props.testId,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: props.children })
+    }
+  );
+}
+function GoabText({
+  as,
+  tag,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-text",
+    {
+      as: tag || as,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabTextArea({
+  readOnly,
+  disabled,
+  error,
+  onChange,
+  onKeyPress,
+  onBlur,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_blur", blurListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_blur", blurListener);
+    };
+  }, [el, onChange, onKeyPress, onBlur]);
+  return /* @__PURE__ */ jsx(
+    "goa-textarea",
+    {
+      ref: el,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      ..._props
+    }
+  );
+}
+
 var NATIVE_BIND$1 = functionBindNative;
 
 var FunctionPrototype = Function.prototype;
@@ -8441,7 +9194,6 @@ const RadioGroup = props => {
     uischema,
     path,
     handleChange,
-    options,
     config,
     label,
     isVisited,
@@ -8458,8 +9210,12 @@ const RadioGroup = props => {
     value: String(value),
     label: String(value)
   }));
-  const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
-  return jsx(GoabRadioGroup, Object.assign({
+  // Merge only UI-schema level options (config + uischema.options). The enum data
+  // `options` array must NOT be merged here: lodash.merge folds its indices in as
+  // numeric keys (0, 1, 2, ...), which then get spread onto <goa-radio-group> below
+  // and trigger React's "Invalid attribute name: `3`" warning (CS ticket).
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+  return jsx(GoabRadioGroup$1, Object.assign({
     error: isVisited && errors.length > 0,
     name: `${path || appliedUiSchemaOptions.label}`,
     testId: `${path || id || label}-radio-group`,
@@ -8468,7 +9224,7 @@ const RadioGroup = props => {
   }, appliedUiSchemaOptions, {
     onChange: detail => handleChange(path, detail.value)
   }, uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.componentProps, {
-    children: items.map((item, index) => jsx(GoabRadioItem, {
+    children: items.map((item, index) => jsx(GoabRadioItem$1, {
       name: item.value,
       value: item.value,
       label: item.label
@@ -8647,13 +9403,15 @@ const CheckboxGroup = props => {
     uischema,
     path,
     handleChange,
-    options,
     config,
     label,
     enabled
   } = props;
   const enumOptions = getEnumOptions(schema);
-  const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
+  // Merge only UI-schema level options. The enum data `options` array must NOT be merged
+  // here: lodash.merge folds its indices in as numeric keys (0, 1, 2, ...) that then get
+  // spread onto <goa-checkbox> below and trigger React's "Invalid attribute name" warning.
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   return jsx(Checkboxes, {
     orientation: (_uischema$options = uischema.options) != null && _uischema$options.orientation ? (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.orientation : 'vertical',
     testId: `${label || id}-jsonforms-checkboxes`,
@@ -8678,7 +9436,8 @@ const CheckboxGroup = props => {
             newData = newData.filter(item => item !== enumValue);
           }
           handleChange(path, newData.length === 0 ? undefined : newData);
-        }
+        },
+        mt: "s"
       }), enumValue);
     })
   });
@@ -9317,7 +10076,7 @@ const DataTable = ({
   columnLabels
 }) => {
   var _Object$keys;
-  return jsxs(GoabTable, {
+  return jsxs(GoabTable$1, {
     width: "100%",
     children: [jsx("thead", {
       children: jsx("tr", {
@@ -10662,7 +11421,6 @@ const GoAInputBaseTableReview = props => {
           })]
         }), stepId !== undefined && !((_uischema$options6 = uischema.options) != null && (_uischema$options6 = _uischema$options6.componentProps) != null && _uischema$options6.readOnly) && jsx(GoabButton, {
           type: "tertiary",
-          size: "compact",
           onClick: handleChangeClick,
           children: "Change"
         })]
@@ -10944,7 +11702,7 @@ const LayoutRenderer = ({
     if (direction === 'row') {
       return jsx(Visible, {
         "$visible": visible,
-        children: jsx(GoabGrid, {
+        children: jsx(GoabGrid$1, {
           minChildWidth: width || '10ch',
           children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
         })
@@ -11455,8 +12213,7 @@ const FullNameControlReview = props => {
               children: " (required)"
             })]
           }), stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -11504,8 +12261,7 @@ const FullNameDobReviewControl = props => {
               children: " (required)"
             })]
           }), stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -11894,8 +12650,7 @@ const ContractInfoControlReview = props => {
           children: [jsx(ReviewLabel, {
             children: fieldLabel
           }), stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -13071,6 +13826,7 @@ const PrimitiveArrayControl = props => {
             checked: checked,
             disabled: !enabled,
             testId: `${value}-checkbox`,
+            mt: "s",
             onChange: detail => {
               let newValue = [...items];
               if (detail.value) {
@@ -13500,7 +14256,7 @@ const AddressLoopUpControlTableReview = props => {
               children: " (required)"
             })]
           }), showButton && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
+            type: "text",
             size: "compact",
             onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId, targetScope),
             testId: "address-change-btn",
@@ -13526,7 +14282,7 @@ const AddressLoopUpControlTableReview = props => {
           children: [jsx(ReviewLabel, {
             children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
           }), stepId !== undefined && !((_uischema$options3 = uischema.options) != null && (_uischema$options3 = _uischema$options3.componentProps) != null && _uischema$options3.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
+            type: "text",
             size: "compact",
             onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId, targetScope),
             testId: "address-change-btn",
@@ -13656,20 +14412,20 @@ const GoAGroupControlComponent = props => {
   const accent = componentProps == null ? void 0 : componentProps.accent;
   return jsxs(Visible, {
     "$visible": visible,
-    children: [accent === 'thick' && jsx(GoabContainer, Object.assign({
+    children: [accent === 'thick' && jsx(GoabContainer$1, Object.assign({
       heading: group.label
     }, componentProps, {
       children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
     })), (accent === 'thin' || accent === 'filled') && jsxs("div", {
       children: [group.label && jsx("h3", {
         children: group.label
-      }), jsx(GoabContainer, Object.assign({}, componentProps, {
+      }), jsx(GoabContainer$1, Object.assign({}, componentProps, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       }))]
     }), componentProps && !accent && jsxs("div", {
       children: [group.label && jsx("h3", {
         children: group.label
-      }), jsx(GoabContainer, Object.assign({}, componentProps, {
+      }), jsx(GoabContainer$1, Object.assign({}, componentProps, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       }))]
     }), !componentProps && jsxs("div", {
@@ -13677,7 +14433,7 @@ const GoAGroupControlComponent = props => {
         children: group.label
       }), isStepperReview ? jsx(Fragment, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
-      }) : jsx(GoabContainer, {
+      }) : jsx(GoabContainer$1, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       })]
     })]

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.69.0",
+  "version": "2.70.1",
   "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",
   "peerDependencies": {
     "@abgov/react-components": "^6.9.3",
-    "@abgov/ui-components-common": "1.9.1",
+    "@abgov/ui-components-common": "2.2.1",
     "@jsonforms/core": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
     "react": "^18.0.0",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-07-22T15:10:21.951Z",
-  "sourceCommit": "813cb678891e28cf6ee0066498302eb66248289f",
+  "generatedAt": "2026-07-24T15:27:00.393Z",
+  "sourceCommit": "8a81c2092c7077517f68eff20e8351c2a681f841",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [