@abgov/react-components 3.4.0-beta.2 → 3.4.0-beta.23

package/react-components.umd.js

@@ -96,22 +96,10 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
 
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-  }
-
   function _iterableToArrayLimit(arr, i) {
     if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
     var _arr = [];
@@ -156,10 +144,6 @@
     return arr2;
   }
 
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -1534,249 +1518,13 @@
     linkUrl: ''
   };
 
-  var css_248z$a = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n\n.goa-card {\n  box-sizing: border-box;\n  background: #fff;\n  border: 1px solid #dcdcdc;\n  transition: opacity 300ms ease-in-out;\n  /* size variants ***/ }\n  .goa-card .card-content {\n    padding: 24px 16px;\n    border-top: 8px solid #0081a2; }\n    .goa-card .card-content .goa-title,\n    .goa-card .card-content .goa-text,\n    .goa-card .card-content .goa-content {\n      margin-bottom: 28px; }\n    .goa-card .card-content .goa-text {\n      color: #333;\n      font-size: var(--fs-base);\n      line-height: 28px; }\n    .goa-card .card-content .goa-footer {\n      font-size: var(--fs-base); }\n    .goa-card .card-content .goa-title {\n      font-size: var(--fs-xl);\n      font-weight: 400;\n      line-height: 32px; }\n  .goa-card .goa-poster {\n    position: relative;\n    display: block;\n    padding: 56.25% 0 0;\n    overflow: hidden;\n    background: #e5e5e5; }\n    .goa-card .goa-poster:empty {\n      display: none; }\n    .goa-card .goa-poster img,\n    .goa-card .goa-poster iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: none; }\n  .goa-card .goa-poster-image img {\n    display: block;\n    width: 100%;\n    -o-object-fit: cover;\n       object-fit: cover; }\n  .goa-card.card-auto {\n    width: auto; }\n    .goa-card.card-auto .card {\n      flex-basis: auto;\n      width: auto; }\n  .goa-card a:hover {\n    color: #004f84;\n    text-decoration: none; }\n  .goa-card a:focus {\n    outline: 3px solid #feba35;\n    outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  padding-bottom: 56.25%; }\n  .goa-card[data-skeleton] .goa-poster-image img {\n    display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n  margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  max-height: 1rem; }\n";
-  styleInject(css_248z$a);
-
-  var GoACard = function GoACard(_ref) {
-    var title = _ref.title,
-        content = _ref.content,
-        _ref$description = _ref.description,
-        description = _ref$description === void 0 ? null : _ref$description,
-        _ref$cardImageUrl = _ref.cardImageUrl,
-        cardImageUrl = _ref$cardImageUrl === void 0 ? null : _ref$cardImageUrl,
-        _ref$titleUrl = _ref.titleUrl,
-        titleUrl = _ref$titleUrl === void 0 ? null : _ref$titleUrl,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$minWidth = _ref.minWidth,
-        minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-        _ref$maxWidth = _ref.maxWidth,
-        maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
-        other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
-
-    var _useState = React.useState(null),
-        _useState2 = _slicedToArray(_useState, 2),
-        imgHeight = _useState2[0],
-        setImgHeight = _useState2[1];
-
-    return /*#__PURE__*/React__default.createElement("div", Object.assign({
-      className: "goa-card",
-      "data-testid": "card-container",
-      style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth
-      }
-    }, other), cardImageUrl && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-poster-image",
-      "data-testid": "card-img"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      height: imgHeight,
-      src: cardImageUrl,
-      alt: "Card cardImageUrl"
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "card-content"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-title",
-      "data-testid": "card-title"
-    }, titleUrl ? /*#__PURE__*/React__default.createElement("a", {
-      href: titleUrl,
-      "data-testid": "card-title-link"
-    }, title) : /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-text",
-      "data-testid": "card-content"
-    }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-footer",
-      "data-testid": "card-footer"
-    }, children)));
-  };
-
-  var css_248z$b = "/* Palette */\n/* Semantic usages */\n.goa-radio {\n  margin-bottom: 10px; }\n  .goa-radio input[type='radio'] {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    outline: 0;\n    -webkit-appearance: none; }\n  .goa-radio .goa-radio-label {\n    z-index: 2;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0 0 0 8px;\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none; }\n  .goa-radio.goa-radio-disabled {\n    opacity: 30%; }\n    .goa-radio.goa-radio-disabled .goa-radio-label {\n      cursor: default; }\n  .goa-radio.has-error .goa-radio-container {\n    border: solid 2px #fc1921;\n    color: #fc1921; }\n    .goa-radio.has-error .goa-radio-container svg {\n      fill: #fc1921; }\n  .goa-radio .goa-radio-container {\n    z-index: 2;\n    box-sizing: border-box;\n    margin: 0;\n    border: 1px solid #666;\n    border-radius: 12px;\n    height: 24px;\n    width: 24px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 3px; }\n    .goa-radio .goa-radio-container svg {\n      fill: #fff; }\n    .goa-radio .goa-radio-container.goa-radio-selected {\n      background-color: #0070c4; }\n      .goa-radio .goa-radio-container.goa-radio-selected .goa-radiomark {\n        display: block !important; }\n    .goa-radio .goa-radio-container:hover:not(.goa-radio-selected) {\n      background-color: #f1f1f1; }\n    .goa-radio .goa-radio-container:focus-within {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  .goa-radio.goa-radio-label-before .goa-radio-container {\n    order: 1;\n    margin-left: 8px;\n    margin-right: auto; }\n\n.goa-radio-layout {\n  display: flex;\n  flex-direction: row;\n  align-items: center; }\n\n.goa-radio-inline-block {\n  display: inline-block;\n  margin-bottom: 5px;\n  margin-top: 5px;\n  margin-left: 5px; }\n";
-  styleInject(css_248z$b);
-
-  var GoARadio = function GoARadio(_ref) {
-    var name = _ref.name,
-        value = _ref.value,
-        disabled = _ref.disabled,
-        _ref$labelPosition = _ref.labelPosition,
-        labelPosition = _ref$labelPosition === void 0 ? 'after' : _ref$labelPosition,
-        required = _ref.required,
-        children = _ref.children;
-    var selectedValue = React.useContext(RadioContext);
-    var updateSelectedValue = React.useContext(RadioUpdateContext);
-
-    function hasError() {
-      return required && !selectedValue;
-    }
-
-    function getSelectedCss() {
-      return classnames({
-        'goa-radio-container': true,
-        'goa-radio-selected': isChecked()
-      });
-    }
-
-    function getRootCssClasses() {
-      return classnames({
-        'goa-radio': true,
-        'goa-radio-disabled': disabled,
-        'has-error': hasError(),
-        'goa-radio-label-before': labelPosition === 'before'
-      });
-    }
-
-    function isChecked() {
-      return selectedValue === value;
-    }
-
-    function onRadioChange(e) {
-      updateSelectedValue(e.target.value);
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: getRootCssClasses()
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radio-inline-block"
-    }, /*#__PURE__*/React__default.createElement("label", {
-      className: "goa-radio-layout"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: getSelectedCss()
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "radio",
-      name: name,
-      value: value,
-      checked: isChecked(),
-      disabled: disabled,
-      onChange: onRadioChange
-    }), isChecked() && /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12"
-    }, /*#__PURE__*/React__default.createElement("circle", {
-      cx: "6",
-      cy: "6",
-      r: "6",
-      fill: "#fff"
-    }))), /*#__PURE__*/React__default.createElement("span", {
-      className: "goa-radio-label"
-    }, children))));
-  };
-
-  var css_248z$c = "/* Palette */\n/* Semantic usages */\n.goa-radio-group {\n  margin-top: 28px; }\n  .goa-radio-group.goa-radio-group-disabled.goa-radios {\n    opacity: 30%;\n    cursor: default; }\n  .goa-radio-group .radio-group-title {\n    font-size: 18px;\n    font-weight: bold;\n    color: #333;\n    line-height: 28px; }\n  .goa-radio-group .helper-text {\n    font-size: 14px;\n    font-weight: normal;\n    color: #333;\n    margin-bottom: 20px; }\n  .goa-radio-group .required-label {\n    margin-left: 8px;\n    font-size: 14px;\n    color: #666; }\n  .goa-radio-group .error-text {\n    color: #fc1921;\n    font-size: 14px;\n    margin-bottom: 20px; }\n";
-  styleInject(css_248z$c);
-
-  var RadioContext = React__default.createContext('');
-  var RadioUpdateContext = React__default.createContext( // eslint-disable-next-line @typescript-eslint/no-empty-function
-  function () {});
-  var GoARadioGroup = function GoARadioGroup(_ref) {
-    var helperText = _ref.helperText,
-        onChange = _ref.onChange,
-        required = _ref.required,
-        requiredErrorMessage = _ref.requiredErrorMessage,
-        title = _ref.title,
-        value = _ref.value,
-        items = _ref.items,
-        children = _ref.children,
-        childAttrs = _objectWithoutProperties(_ref, ["helperText", "onChange", "required", "requiredErrorMessage", "title", "value", "items", "children"]);
-
-    var _useState = React.useState(value),
-        _useState2 = _slicedToArray(_useState, 2),
-        selectedValue = _useState2[0],
-        setSelectedValue = _useState2[1];
-
-    function handleOnChange(val) {
-      setSelectedValue(val);
-      onChange(val);
-    }
-
-    function hasError() {
-      return required && !selectedValue;
-    }
-
-    function getChildren() {
-      if (children) {
-        return React.Children.map(children, function (child) {
-          var key = "".concat(childAttrs.name, "-").concat(child.props.value);
-          return React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
-            key: key,
-            required: required
-          }));
-        });
-      }
-
-      return items.map(function (item) {
-        return /*#__PURE__*/React__default.createElement(GoARadio, {
-          key: "".concat(childAttrs.name, "-").concat(item.value),
-          labelPosition: childAttrs.labelPosition,
-          name: childAttrs.name,
-          disabled: childAttrs.disabled,
-          value: item.value,
-          children: item.text,
-          required: required
-        });
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radio-group"
-    }, title && /*#__PURE__*/React__default.createElement("span", {
-      className: "radio-group-title"
-    }, title), required && /*#__PURE__*/React__default.createElement("span", {
-      className: "required-label"
-    }, "(Required)"), helperText && /*#__PURE__*/React__default.createElement("div", {
-      className: "helper-text"
-    }, helperText), /*#__PURE__*/React__default.createElement(RadioContext.Provider, {
-      value: selectedValue
-    }, /*#__PURE__*/React__default.createElement(RadioUpdateContext.Provider, {
-      value: handleOnChange
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radios"
-    }, getChildren()))), hasError() && /*#__PURE__*/React__default.createElement("div", {
-      className: "error-text"
-    }, requiredErrorMessage));
-  };
-
-  var css_248z$d = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top; }\n  .goa-card-group .card-group-title {\n    font-size: 28px;\n    font-weight: bold;\n    color: #333; }\n  .goa-card-group .card-group-basic {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-basic-vue > div {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic-vue > div > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-column {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div {\n    margin: 14px; }\n  .goa-card-group .card-group-column-vue > div {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div > div {\n    margin: 14px; }\n";
-  styleInject(css_248z$d);
-
-  var GoACardGroup = function GoACardGroup(_ref) {
-    var _ref$title = _ref.title,
-        title = _ref$title === void 0 ? null : _ref$title,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$layout = _ref.layout,
-        layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
-        _ref$cardItems = _ref.cardItems,
-        cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
-
-    function getCards() {
-      if (children) {
-        return children;
-      }
-
-      return cardItems.map(function (item, index) {
-        return /*#__PURE__*/React__default.createElement(GoACard, Object.assign({}, item, {
-          key: index
-        }), item.children);
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-card-group"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "card-group-title"
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "card-group-".concat(layout)
-    }, getCards()));
-  };
-
   /** Used to store the options in the dropdown */
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   var DropdownContext = React.createContext({});
 
-  var css_248z$e = "/* Palette */\n/* Semantic usages */\n/* This style is from the alberta design system */\n/* Palette */\n/* Semantic usages */\n.dropdown-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0; }\n\n.dropdown-menu {\n  border: solid 1px #dcdcdc;\n  border-radius: 4px;\n  background: #fff;\n  padding: 0;\n  margin-top: 3px;\n  width: 100%;\n  overflow-y: auto; }\n  .dropdown-menu .option-group .option-group-label {\n    font-weight: bold;\n    padding: 4px 12px; }\n  .dropdown-menu .option-group .option {\n    font-weight: normal;\n    padding: 4px 24px; }\n  .dropdown-menu .option {\n    padding: 4px 12px;\n    color: #0070c4;\n    border: 1px solid #f1f1f1; }\n    .dropdown-menu .option.selected {\n      background-color: #0070c4;\n      color: #fff; }\n    .dropdown-menu .option.selected.active {\n      background-color: #004f84;\n      color: #fff; }\n    .dropdown-menu .option.active {\n      background-color: #f1f1f1;\n      color: #333; }\n\n.goa-dropdown {\n  position: relative;\n  /* add chevron */ }\n  .goa-dropdown .dropdown-grouping input[type=text] {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding-right: 30px !important; }\n  .goa-dropdown .dropdown-grouping.disabled {\n    opacity: 30%; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox {\n    /* remove default arrow IE */ }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox.margin-override {\n    margin: 0; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n    /* remove default arrow IE */\n    font-size: 14px !important;\n    border: none !important;\n    margin: 0 !important; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: none !important;\n      outline: none; }\n  .goa-dropdown i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='1' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center;\n    left: auto;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    pointer-events: none;\n    position: absolute;\n    margin-top: 16px;\n    color: #0070c4; }\n  .goa-dropdown.disabled i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='0.3' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-dropdown.opened i.goa-select-icon {\n    transform: rotate(180deg); }\n  .goa-dropdown.has-error .dropdown-grouping .dropdown-textbox {\n    border: solid 2px #fc1921; }\n  .goa-dropdown .dropdown-label {\n    font-size: 18px;\n    font-weight: bold;\n    color: #333; }\n  .goa-dropdown .required-label {\n    margin-left: 8px;\n    font-size: 14px;\n    color: #666; }\n  .goa-dropdown .helper-text {\n    font-size: 14px;\n    font-weight: normal;\n    color: #333; }\n  .goa-dropdown .error-text {\n    color: #fc1921;\n    font-size: 14px; }\n";
-  styleInject(css_248z$e);
+  var css_248z$a = "/* Palette */\n/* Semantic usages */\n/* This style is from the alberta design system */\n/* Palette */\n/* Semantic usages */\n.dropdown-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0; }\n\n.dropdown-menu {\n  border: solid 1px #dcdcdc;\n  border-radius: 4px;\n  background: #fff;\n  padding: 0;\n  margin-top: 3px;\n  width: 100%;\n  overflow-y: auto; }\n  .dropdown-menu .option-group .option-group-label {\n    font-weight: bold;\n    padding: 4px 12px; }\n  .dropdown-menu .option-group .option {\n    font-weight: normal;\n    padding: 4px 24px; }\n  .dropdown-menu .option {\n    padding: 4px 12px;\n    color: #0070c4;\n    border: 1px solid #f1f1f1; }\n    .dropdown-menu .option.selected {\n      background-color: #0070c4;\n      color: #fff; }\n    .dropdown-menu .option.selected.active {\n      background-color: #004f84;\n      color: #fff; }\n    .dropdown-menu .option.active {\n      background-color: #f1f1f1;\n      color: #333; }\n\n.goa-dropdown {\n  position: relative;\n  /* add chevron */ }\n  .goa-dropdown .dropdown-grouping input[type=text] {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding-right: 30px !important; }\n  .goa-dropdown .dropdown-grouping.disabled {\n    opacity: 30%; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox {\n    /* remove default arrow IE */ }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox.margin-override {\n    margin: 0; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n    /* remove default arrow IE */\n    font-size: 14px !important;\n    border: none !important;\n    margin: 0 !important; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: none !important;\n      outline: none; }\n  .goa-dropdown i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='1' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center;\n    left: auto;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    pointer-events: none;\n    position: absolute;\n    margin-top: 16px;\n    color: #0070c4; }\n  .goa-dropdown.disabled i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='0.3' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-dropdown.opened i.goa-select-icon {\n    transform: rotate(180deg); }\n  .goa-dropdown.has-error .dropdown-grouping .dropdown-textbox {\n    border: solid 2px #fc1921; }\n  .goa-dropdown .dropdown-label {\n    font-size: 18px;\n    font-weight: bold;\n    color: #333; }\n  .goa-dropdown .required-label {\n    margin-left: 8px;\n    font-size: 14px;\n    color: #666; }\n  .goa-dropdown .helper-text {\n    font-size: 14px;\n    font-weight: normal;\n    color: #333; }\n  .goa-dropdown .error-text {\n    color: #fc1921;\n    font-size: 14px; }\n";
+  styleInject(css_248z$a);
 
   var GoAOption = function GoAOption(props) {
     var label = props.label,
@@ -1936,7 +1684,7 @@
       value: {
         selectionChanged: selectionChanged
       }
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, canOpen(isOpen, open) && /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown-overlay",
       "data-testid": "dropdown-container",
       ref: overlayRef,
@@ -1988,530 +1736,301 @@
     description: null
   };
 
-  var css_248z$f = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  outline: 0;\n  -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n  z-index: 2;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 0 0 8px;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  height: 46px;\n  display: flex;\n  align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n  opacity: 30%; }\n  .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n    cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n  border: solid 2px #fc1921;\n  color: #fc1921; }\n  .goa-checkbox.has-error .goa-checkbox-container svg {\n    fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n  box-sizing: border-box;\n  border: 1px solid #666;\n  border-radius: 2px;\n  height: 24px;\n  line-height: 24px;\n  width: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 3px; }\n  .goa-checkbox .goa-checkbox-container svg {\n    display: none;\n    flex: 1 1 auto;\n    fill: #fff; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n      display: block !important; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n      display: none !important; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n      display: none; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n      display: block; }\n  .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n    background-color: #f1f1f1; }\n  .goa-checkbox .goa-checkbox-container:focus-within {\n    box-shadow: 0 0 0 3px #feba35;\n    outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n  order: 1;\n  margin-left: 8px;\n  margin-right: auto; }\n\n.goa-checkbox-layout {\n  display: inline-flex;\n  align-items: center; }\n";
-  styleInject(css_248z$f);
-
-  var GoACheckbox = function GoACheckbox(_ref) {
-    var _ref$checked = _ref.checked,
-        checked = _ref$checked === void 0 ? false : _ref$checked,
-        _ref$required = _ref.required,
-        required = _ref$required === void 0 ? false : _ref$required,
-        _ref$disabled = _ref.disabled,
-        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        _ref$indeterminate = _ref.indeterminate,
-        indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-        _ref$labelPosition = _ref.labelPosition,
-        labelPosition = _ref$labelPosition === void 0 ? 'before' : _ref$labelPosition,
-        _ref$value = _ref.value,
-        value = _ref$value === void 0 ? '' : _ref$value,
-        content = _ref.content,
-        children = _ref.children,
-        selectionChange = _ref.selectionChange;
+  var css_248z$b = ":root {\n  /* base colors */\n  --color-gray-l5: hsla(0, 0%, 95%, 1);\n  /* #f1f1f1 */\n  --color-gray-l4: hsla(0, 0%, 90%, 1);\n  --color-gray-l3: hsla(0, 0%, 80%, 1);\n  /* #ccc */\n  --color-gray-l2: hsla(0, 0%, 70%, 1);\n  --color-gray-l1: hsla(0, 0%, 60%, 1);\n  /* #999 */\n  --color-gray: hsla(0, 0%, 50%, 1);\n  --color-gray-d1: hsla(0, 0%, 40%, 1);\n  /* #666 */\n  --color-gray-d2: hsla(0, 0%, 30%, 1);\n  --color-gray-d3: hsla(0, 0%, 20%, 1);\n  /* #333 */\n  --color-gray-d4: hsla(0, 0%, 10%, 1);\n  --color-gray-d5: hsla(0, 0%, 5%, 1);\n  --color-red-l2: hsla(0, 100%, 70%, 1);\n  --color-red-l1: hsla(0, 100%, 60%, 1);\n  --color-red: hsla(0, 100%, 50%, 1);\n  --color-red-d1: hsla(0, 100%, 40%, 1);\n  --color-red-d2: hsla(0, 100%, 30%, 1);\n  --color-orange-l2: hsla(40, 100%, 70%, 1);\n  --color-orange-l1: hsla(40, 100%, 60%, 1);\n  --color-orange: hsla(40, 100%, 50%, 1);\n  --color-orange-d1: hsla(40, 100%, 40%, 1);\n  --color-orange-d2: hsla(40, 100%, 30%, 1);\n  --color-primary-l2: hsla(206, 100%, 58%, 1);\n  --color-primary-l1: hsla(206, 100%, 48%, 1);\n  --color-primary: hsla(206, 100%, 38%, 1);\n  --color-primary-d1: hsla(206, 100%, 26%, 1);\n  --color-primary-d2: hsla(206, 100%, 16%, 1);\n  /* named colors */\n  --color-primary--hover: var(--color-primary-d1);\n  --color-text: var(--color-gray-d3);\n  --color-error: var(--color-red);\n  --color-disabled: var(--color-gray-l5);\n  --color-input-border: var(--color-gray-d1);\n  --color-input--focused: var(--color-orange);\n  --color-button-primary: var(--color-primary);\n  --color-button-primary--hover: var(--color-primary-d1);\n  --color-button-tertiary: var(--color-gray-l4);\n  --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n  display: flex;\n  flex-direction: row; }\n\n.goa-radio-group--vertical {\n  display: inline-flex;\n  flex-direction: column; }\n\n/* Radio */\n.goa-radio {\n  --goa-border-color: var(--color-input-border);\n  --goa-border-color--checked: var(--color-primary);\n  --goa-radio-color--error: var(--color-error);\n  --goa-radio-outline-color: var(--color-input--focused);\n  --goa-radio-outline-width: 3px;\n  --goa-radio-diameter: 1.5rem;\n  --goa-radio-border-width: 1px;\n  --goa-radio-border-width--checked: 7px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  min-height: 3rem; }\n\n.goa-radio:hover {\n  cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n  box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n  display: none; }\n\n.goa-radio-label {\n  padding: 0.5rem 1.5rem 0.5rem 0.5rem; }\n\n.goa-radio-icon {\n  display: inline-block;\n  height: var(--goa-radio-diameter);\n  width: var(--goa-radio-diameter);\n  border-radius: 50%;\n  transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n  box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n  cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color);\n  opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n  opacity: 0.3; }\n\n/* Error */\n.goa-error input[type='radio']:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-radio-color--error); }\n\n.goa-error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-radio-color--error); }\n";
+  styleInject(css_248z$b);
 
-    var hasError = function hasError() {
-      return required && !checked;
-    };
+  var GoARadio = function GoARadio(_ref) {
+    var _ref$state = _ref.state,
+        state = _ref$state === void 0 ? 'valid' : _ref$state,
+        props = _objectWithoutProperties(_ref, ["state"]);
 
-    var rootCss = function rootCss() {
+    function getCss() {
       return classnames({
-        'goa-checkbox': true,
-        'goa-checkbox-disabled': disabled,
-        'has-error': hasError(),
-        'goa-checkbox-label-before': labelPosition === 'before'
+        'goa-radio': true,
+        'goa-radio--disabled': props.disabled,
+        'goa-error': state === 'error'
       });
-    };
+    }
 
-    var checkboxCss = function checkboxCss() {
-      return classnames({
-        'goa-checkbox-container': true,
-        'goa-checkbox-selected': !indeterminate && checked,
-        'goa-checkbox-indeterminate': indeterminate && checked
-      });
-    };
+    function onRadioChange(e) {
+      props.onChange(e.target.value);
+    }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: rootCss()
-    }, /*#__PURE__*/React__default.createElement("label", {
-      className: "goa-checkbox-layout"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: checkboxCss()
+    return /*#__PURE__*/React__default.createElement("label", {
+      className: getCss()
     }, /*#__PURE__*/React__default.createElement("input", {
-      type: "checkbox",
-      checked: checked,
-      disabled: disabled,
-      required: required,
-      value: value,
-      onChange: function onChange(e) {
-        return selectionChange(e.target.checked);
-      }
-    }), indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
-      id: "dashmark",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 15 2",
-      className: "goa-indeterminate"
-    }, /*#__PURE__*/React__default.createElement("rect", {
-      width: "15",
-      height: "2"
-    })), !indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
-      id: "checkmark",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 16 12.18",
-      className: "goa-checkmark"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
-    }))), /*#__PURE__*/React__default.createElement("span", {
-      className: "goa-checkbox-label"
-    }, content || children)));
-  };
-
-  var css_248z$g = "/* Palette */\n/* Semantic usages */\n.goa-badge-icon {\n  margin-left: 4px;\n  margin-right: 0px;\n  position: relative;\n  top: -5px;\n  height: 14px;\n  width: 14px;\n  font-size: 14px !important; }\n\n.badge-module_goa-badge__3F6Ve {\n  line-height: 24px;\n  font-size: 14px;\n  font-weight: 400 !important; }\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-block;\n  border-radius: 4px;\n  margin: 4px;\n  padding-top: 4px;\n  padding-left: 4px;\n  padding-right: 4px;\n  height: 20px; }\n  .badge-module_goa-badge__3F6Ve * {\n    margin-left: 4px;\n    margin-right: 4px; }\n  .badge-module_goa-badge__3F6Ve .badge-module_goa-badge-content__3UN-3 {\n    position: relative;\n    top: -5px;\n    height: 14px;\n    display: inline; }\n  .badge-module_goa-badge__3F6Ve mat-icon {\n    margin-left: 4px;\n    margin-right: 4px;\n    position: relative;\n    top: -3px;\n    height: 14px;\n    width: 14px;\n    font-size: 14px !important; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: #0070c4;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: #00853f;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: #feba35;\n  color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: #ec040b;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: #0070c4;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: #767676;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: #fff;\n  color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: #fff;\n  color: #333; }\n";
-  var styles = {"goa-badge":"badge-module_goa-badge__3F6Ve","goa-badge-content":"badge-module_goa-badge-content__3UN-3","badge-information":"badge-module_badge-information__2r_Eq","badge-success":"badge-module_badge-success__18wcm","badge-warning":"badge-module_badge-warning__20BNM","badge-emergency":"badge-module_badge-emergency__E4mHn","badge-dark":"badge-module_badge-dark__1thw-","badge-midtone":"badge-module_badge-midtone__1Gt4T","badge-light":"badge-module_badge-light__B8ZMt","badge-inactive":"badge-module_badge-inactive__35PEw"};
-  styleInject(css_248z$g);
-
-  var GoABadge = function GoABadge(_ref) {
-    var type = _ref.type,
-        content = _ref.content,
-        icon = _ref.icon;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-    }, icon, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  GoABadge.defaultProps = {
-    type: 'information'
+      type: "radio",
+      name: props.name,
+      value: props.value,
+      checked: props.checked,
+      disabled: props.disabled,
+      onChange: onRadioChange
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-radio-icon"
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "goa-radio-label"
+    }, props.children));
   };
 
-  var css_248z$h = "/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n\n@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite; }\n";
-  styleInject(css_248z$h);
+  var GoARadioGroup = function GoARadioGroup(_ref) {
+    var onChange = _ref.onChange,
+        value = _ref.value,
+        children = _ref.children,
+        orientation = _ref.orientation,
+        childAttrs = _objectWithoutProperties(_ref, ["onChange", "value", "children", "orientation"]);
 
-  var GoAElementLoader = function GoAElementLoader(_ref) {
-    var _ref$visible = _ref.visible,
-        visible = _ref$visible === void 0 ? false : _ref$visible,
-        _ref$baseColour = _ref.baseColour,
-        baseColour = _ref$baseColour === void 0 ? '#c8eef9' : _ref$baseColour,
-        _ref$spinnerColour = _ref.spinnerColour,
-        spinnerColour = _ref$spinnerColour === void 0 ? '#0070c4' : _ref$spinnerColour,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 25 : _ref$size;
-    var radius = size;
-    var diameter = radius * 2;
-
-    var boxView = function boxView() {
-      return "0 0 ".concat(diameter, " ").concat(diameter);
-    };
-    /**
-     * Generates the value for an SVG arc.
-     * @param current       Current value.
-     * @param total         Maximum value.
-     * @param pathRadius    Radius of the SVG path.
-     * @param elementRadius Radius of the SVG container.
-     * @param isSemicircle  Whether the element should be a semicircle.
-     */
-
-
-    function getArc(current, total, pathRadius, elementRadius) {
-      var isSemicircle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      var value = Math.max(0, Math.min(current || 0, total));
-      var maxAngle = isSemicircle ? 180 : 359.9999;
-      var percentage = total === 0 ? maxAngle : value / total * maxAngle;
-
-      var start = _polarToCartesian(elementRadius, pathRadius, percentage);
-
-      var end = _polarToCartesian(elementRadius, pathRadius, 0);
-
-      var arcSweep = percentage <= 180 ? 0 : 1;
-      return "M ".concat(start, " A ").concat(pathRadius, " ").concat(pathRadius, " 0 ").concat(arcSweep, " 0 ").concat(end);
-    }
-
-    var DEGREE_IN_RADIANS = Math.PI / 180;
-    /**
-     * Converts polar cooradinates to Cartesian.
-     * @param elementRadius  Radius of the wrapper element.
-     * @param pathRadius     Radius of the path being described.
-     * @param angleInDegrees Degree to be converted.
-     */
-
-    function _polarToCartesian(elementRadius, pathRadius, angleInDegrees) {
-      var angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
-      var x = elementRadius + pathRadius * Math.cos(angleInRadians);
-      var y = elementRadius + pathRadius * Math.sin(angleInRadians);
-      return x + ' ' + y;
+    function getChildren() {
+      return React.Children.map(children, function (child) {
+        var key = "".concat(childAttrs.name, "-").concat(child.props.value);
+        return React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
+          checked: child.props.value === value,
+          onChange: onChange,
+          key: key
+        }));
+      });
     }
 
-    return visible && /*#__PURE__*/React__default.createElement("svg", {
-      className: "circular-loader",
-      fill: "none",
-      viewBox: boxView(),
-      width: "".concat(size),
-      height: "".concat(size),
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__default.createElement("circle", {
-      cx: "".concat(radius),
-      cy: "".concat(radius),
-      stroke: "".concat(baseColour),
-      strokeWidth: "7",
-      r: "".concat(radius - 7 / 2)
-    }), /*#__PURE__*/React__default.createElement("path", {
-      d: getArc(75, 100, radius - 7 / 2, radius, false),
-      strokeWidth: "7",
-      stroke: "".concat(spinnerColour),
-      strokeLinecap: "round"
-    }));
-  };
-  GoAElementLoader.propTypes = {
-    visible: propTypes.bool,
-    baseColour: propTypes.string,
-    spinnerColour: propTypes.string,
-    size: propTypes.number
+    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-radio-group--".concat(orientation)
+    }, getChildren()));
   };
 
-  var css_248z$i = "/* Palette */\n/* Semantic usages */\n.goa-form {\n  margin: auto;\n  width: 40.25rem; }\n\n.goa-form-container {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: stretch;\n  -moz-column-gap: 1rem;\n       column-gap: 1rem; }\n\n.goa-form-container > div {\n  margin: 0;\n  flex: 1;\n  width: 100%; }\n\n.goa-form-container > div + div {\n  margin-left: 1rem; }\n\n@media (max-width: 640px) {\n  .goa-form {\n    margin: auto;\n    width: 95%; }\n  .goa-form-container > div {\n    min-width: 100%; }\n  .goa-form-container > div + div {\n    margin-left: 0rem; } }\n\n.goa-form-items {\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem; }\n  .goa-form-items label {\n    display: block;\n    font-weight: bold;\n    color: #333; }\n  .goa-form-items input,\n  .goa-form-items textarea {\n    display: block;\n    width: 100%;\n    padding: 0.5rem; }\n\n.goa-form-button {\n  margin-top: 2rem; }\n  @media (min-width: 640px) {\n    .goa-form-button {\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end; }\n      .goa-form-button button {\n        min-width: 6rem; }\n      .goa-form-button button + button,\n      .goa-form-button button + .goa-link-button,\n      .goa-form-button .goa-link-button + button,\n      .goa-form-button .goa-link-button + .goa-link-button {\n        margin-left: 0.5rem; } }\n  .goa-form-button button {\n    margin: 0; }\n";
-  styleInject(css_248z$i);
-
-  var GoAFormItem = function GoAFormItem(_ref) {
-    var name = _ref.name,
-        _ref$validators = _ref.validators,
-        validators = _ref$validators === void 0 ? [] : _ref$validators,
-        _ref$onChange = _ref.onChange,
-        onChange = _ref$onChange === void 0 ? null : _ref$onChange,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
+  var css_248z$c = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n";
+  styleInject(css_248z$c);
 
-    var _useContext = React.useContext(FormContext),
-        errors = _useContext.errors,
-        navigator = _useContext.navigator,
-        setFieldValue = _useContext.setFieldValue,
-        registerInput = _useContext.registerInput;
+  var GoASkeletonElement = function GoASkeletonElement(_ref) {
+    var _ref$type = _ref.type,
+        type = _ref$type === void 0 ? 'text' : _ref$type;
+    var classes = "skeleton ".concat(type);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classes
+    });
+  };
 
-    React.useEffect(function () {
-      return registerInput({
-        name: name,
-        validators: validators
-      });
-    }, []);
+  var GoASkeletonContent = function GoASkeletonContent(_ref) {
+    var _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? 1 : _ref$rows;
+    var elements = [];
 
-    var handleChange = function handleChange(val) {
-      if (typeof val === 'string') {
-        setFieldValue(name, val);
-      } else {
-        setFieldValue(name, val.target.value);
-      }
+    for (var i = 0; i < rows; i++) {
+      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+        type: "text"
+      }));
+    }
 
-      if (onChange) {
-        onChange(val);
-      }
-    };
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "skeleton-content"
+    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+      type: "title"
+    }), elements));
+  };
 
-    var message = errors[name] || [];
-    var navigateTo = navigator && navigator.name && navigator.name === name;
+  var GoASkeletonGridColumnContent = function GoASkeletonGridColumnContent(_ref) {
+    var _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? 1 : _ref$rows;
+    var elements = [];
 
-    function renderChildren() {
-      return React.Children.map(children, function (child) {
-        if (child.props.originalType !== 'label') {
-          return React__default.cloneElement(child, {
-            onChange: handleChange,
-            message: message.toString(),
-            id: name,
-            navigator: navigateTo
-          });
-        } else {
-          return child;
-        }
-      });
+    for (var i = 0; i < rows; i++) {
+      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+        type: "text"
+      }));
     }
 
     return /*#__PURE__*/React__default.createElement("div", {
-      id: name,
-      className: "goa-form-items"
-    }, renderChildren());
-  };
-  GoAFormItem.propTypes = {
-    name: propTypes.string,
-    onChange: propTypes.func,
-    validators: propTypes.array
+      className: "skeleton-content"
+    }, /*#__PURE__*/React__default.createElement("div", null, elements));
   };
 
-  var GoAFormButton = function GoAFormButton(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-button"
-    }, children);
-  };
+  var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
+    var _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? 1 : _ref$rows;
+    var elements = [];
+
+    for (var i = 0; i < rows; i++) {
+      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+        type: "text"
+      }));
+    }
 
-  var GoAFormContainer = function GoAFormContainer(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-container"
-    }, children);
+      className: "skeleton-image-content"
+    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+      type: "thumbnail"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "skeleton-image-content__text"
+    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
+      type: "title"
+    }), elements));
   };
 
-  var initState = {
-    data: {},
-    validators: {},
-    errors: {},
-    navigator: {}
-  };
-  var FormContext;
-
-  var _FormContext = FormContext = React__default.createContext({}),
-      Provider = _FormContext.Provider;
-  var GoAForm = function GoAForm(_ref) {
-    var _ref$formTitle = _ref.formTitle,
-        formTitle = _ref$formTitle === void 0 ? '' : _ref$formTitle,
-        _ref$formDescription = _ref.formDescription,
-        formDescription = _ref$formDescription === void 0 ? '' : _ref$formDescription,
-        onFormSubmit = _ref.onFormSubmit,
+  var css_248z$d = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n\n.goa-card {\n  box-sizing: border-box;\n  background: #fff;\n  border: 1px solid #dcdcdc;\n  transition: opacity 300ms ease-in-out;\n  /* size variants ***/ }\n  .goa-card .card-content {\n    padding: 28px 16px;\n    border-top: 8px solid #0081a2; }\n    .goa-card .card-content .goa-title,\n    .goa-card .card-content .goa-text,\n    .goa-card .card-content .goa-content {\n      margin-bottom: 28px; }\n    .goa-card .card-content .goa-text {\n      color: #333;\n      font-size: var(--fs-base);\n      line-height: 28px; }\n    .goa-card .card-content .goa-footer {\n      font-size: var(--fs-base); }\n    .goa-card .card-content .goa-title {\n      font-size: var(--fs-xl);\n      font-weight: 400;\n      line-height: 32px; }\n  .goa-card .goa-poster {\n    position: relative;\n    display: block;\n    padding: 56.25% 0 0;\n    overflow: hidden;\n    background: #e5e5e5; }\n    .goa-card .goa-poster:empty {\n      display: none; }\n    .goa-card .goa-poster img,\n    .goa-card .goa-poster iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: none; }\n  .goa-card .goa-poster-image img {\n    display: block;\n    width: 100%;\n    -o-object-fit: cover;\n       object-fit: cover; }\n  .goa-card.card-auto {\n    width: auto; }\n    .goa-card.card-auto .card {\n      flex-basis: auto;\n      width: auto; }\n  .goa-card a:hover {\n    color: #004f84;\n    text-decoration: none; }\n  .goa-card a:focus {\n    outline: 3px solid #feba35;\n    outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  padding-bottom: 56.25%; }\n  .goa-card[data-skeleton] .goa-poster-image img {\n    display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n  margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  max-height: 1rem; }\n";
+  styleInject(css_248z$d);
+
+  var GoACard = function GoACard(_ref) {
+    var title = _ref.title,
+        content = _ref.content,
+        _ref$description = _ref.description,
+        description = _ref$description === void 0 ? null : _ref$description,
+        _ref$cardImageUrl = _ref.cardImageUrl,
+        cardImageUrl = _ref$cardImageUrl === void 0 ? null : _ref$cardImageUrl,
+        _ref$titleUrl = _ref.titleUrl,
+        titleUrl = _ref$titleUrl === void 0 ? null : _ref$titleUrl,
         _ref$children = _ref.children,
         children = _ref$children === void 0 ? null : _ref$children,
-        props = _objectWithoutProperties(_ref, ["formTitle", "formDescription", "onFormSubmit", "children"]);
+        _ref$minWidth = _ref.minWidth,
+        minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
+        _ref$maxWidth = _ref.maxWidth,
+        maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
+        other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
 
-    var _useState = React.useState(initState),
+    var _useState = React.useState(null),
         _useState2 = _slicedToArray(_useState, 2),
-        formState = _useState2[0],
-        setFormState = _useState2[1];
-
-    var _useState3 = React.useState([]),
-        _useState4 = _slicedToArray(_useState3, 2),
-        formErrors = _useState4[0],
-        setFormErrors = _useState4[1];
-
-    var onSubmit = function onSubmit(e) {
-      e.preventDefault();
+        imgHeight = _useState2[0],
+        setImgHeight = _useState2[1];
 
-      if (validate()) {
-        onFormSubmit(formState.data);
+    return /*#__PURE__*/React__default.createElement("div", Object.assign({
+      className: "goa-card",
+      "data-testid": "card-container",
+      style: {
+        minWidth: minWidth,
+        maxWidth: maxWidth
       }
-    };
-
-    var validate = function validate() {
-      var validators = formState.validators;
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          errors: {}
-        });
-      });
-      var formErrors = Object.entries(validators).reduce(function (errors, _ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            name = _ref3[0],
-            validators = _ref3[1];
-
-        var data = formState.data;
-
-        if (validators.length > 0) {
-          var messages = validators.reduce(function (result, validator) {
-            var value = data[name];
-            var err = validator(value, data);
-            return [].concat(_toConsumableArray(result), _toConsumableArray(err));
-          }, []);
-
-          if (messages.length > 0) {
-            errors[name] = "".concat(messages, " ").concat(name.toLocaleLowerCase());
-          }
-
-          var errorNames = [];
-
-          for (var key in errors) {
-            if (errors[key].length > 0) {
-              errorNames.push(key);
-            }
-          }
+    }, other), cardImageUrl && /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-poster-image",
+      "data-testid": "card-img"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      height: imgHeight,
+      src: cardImageUrl,
+      alt: "Card cardImageUrl"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "card-content"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-title",
+      "data-testid": "card-title"
+    }, titleUrl ? /*#__PURE__*/React__default.createElement("a", {
+      href: titleUrl,
+      "data-testid": "card-title-link"
+    }, title) : /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("p", {
+      className: "goa-text",
+      "data-testid": "card-content"
+    }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-footer",
+      "data-testid": "card-footer"
+    }, children)));
+  };
 
-          setFormErrors(errorNames);
-        }
+  var css_248z$e = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top; }\n  .goa-card-group .card-group-title {\n    font-size: 24px;\n    font-weight: bold;\n    color: #333; }\n  .goa-card-group .card-group-basic {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-basic-vue > div {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic-vue > div > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-column {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div {\n    margin: 14px; }\n  .goa-card-group .card-group-column-vue > div {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div > div {\n    margin: 14px; }\n";
+  styleInject(css_248z$e);
 
-        return errors;
-      }, {});
+  var GoACardGroup = function GoACardGroup(_ref) {
+    var _ref$title = _ref.title,
+        title = _ref$title === void 0 ? null : _ref$title,
+        _ref$children = _ref.children,
+        children = _ref$children === void 0 ? null : _ref$children,
+        _ref$layout = _ref.layout,
+        layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
+        _ref$cardItems = _ref.cardItems,
+        cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
 
-      if (Object.keys(formErrors).length === 0) {
-        return true;
+    function getCards() {
+      if (children) {
+        return children;
       }
 
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          errors: formErrors
-        });
-      });
-      return false;
-    };
-
-    var setFieldValue = function setFieldValue(name, value) {
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          data: _objectSpread2(_objectSpread2({}, state.data), {}, _defineProperty({}, name, value)),
-          errors: _objectSpread2(_objectSpread2({}, state.errors), {}, _defineProperty({}, name, []))
-        });
-      });
-    };
-
-    var registerInput = function registerInput(_ref4) {
-      var name = _ref4.name,
-          validators = _ref4.validators;
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          validators: _objectSpread2(_objectSpread2({}, state.validators), {}, _defineProperty({}, name, validators || [])),
-          errors: _objectSpread2(_objectSpread2({}, state.errors), {}, _defineProperty({}, name, []))
-        });
-      });
-      return function () {
-        setFormState(function (state) {
-          var _state = _objectSpread2({}, state),
-              data = _state.data,
-              errors = _state.errors,
-              currentValidators = _state.validators,
-              navigator = _state.navigator;
-
-          delete data[name];
-          delete errors[name];
-          delete currentValidators[name];
-          delete navigator[name];
-          return {
-            data: data,
-            errors: errors,
-            validators: currentValidators,
-            navigator: navigator
-          };
-        });
-      };
-    };
-
-    var formProviderValue = {
-      errors: formState.errors,
-      data: formState.data,
-      navigator: formState.navigator,
-      setFieldValue: setFieldValue,
-      registerInput: registerInput
-    };
-
-    function addNavigator(error) {
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          navigator: {
-            name: error
-          }
-        });
+      return cardItems.map(function (item, index) {
+        return /*#__PURE__*/React__default.createElement(GoACard, Object.assign({}, item, {
+          key: index
+        }), item.children);
       });
     }
 
-    var renderErrorList = function renderErrorList() {
-      return /*#__PURE__*/React__default.createElement(GoACallout, {
-        type: "emergency",
-        title: "Please fix following errors:"
-      }, /*#__PURE__*/React__default.createElement("ul", null, formErrors.map(function (error) {
-        return /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("a", {
-          href: "#".concat(error),
-          onClick: function onClick() {
-            return addNavigator(error);
-          }
-        }, error));
-      })));
-    };
-
-    return /*#__PURE__*/React__default.createElement(Provider, {
-      value: formProviderValue
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "goa-card-group"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form"
-    }, /*#__PURE__*/React__default.createElement("h2", null, formTitle), /*#__PURE__*/React__default.createElement("p", null, formDescription), onFormSubmit ? /*#__PURE__*/React__default.createElement("form", {
-      onSubmit: onSubmit
-    }, children, formErrors.length > 0 && renderErrorList(), /*#__PURE__*/React__default.createElement(GoAFormButton, null, /*#__PURE__*/React__default.createElement(GoAButton, {
-      buttonType: "tertiary",
-      type: "button"
-    }, "Cancel"), /*#__PURE__*/React__default.createElement(GoAButton, {
-      buttonType: "primary",
-      type: "submit"
-    }, "Submit"))) : children));
-  };
-  GoAForm.propTypes = {
-    formTitle: propTypes.string,
-    formDescription: propTypes.string,
-    onSubmit: propTypes.func,
-    children: propTypes.node
+      className: "card-group-title"
+    }, title), /*#__PURE__*/React__default.createElement("div", {
+      className: "card-group-".concat(layout)
+    }, getCards()));
   };
 
-  var css_248z$j = "/* Palette */\n/* Semantic usages */\n.goa-input {\n  position: relative; }\n\n.goa-input-error-message {\n  font-size: var(--fs-sm);\n  font-weight: 300;\n  color: red;\n  margin: 0; }\n\n.goa-input-help-text-message {\n  font-size: var(--fs-sm);\n  font-weight: 200;\n  color: #333;\n  margin: 0; }\n\n.goa-input-field {\n  border: 1px solid #666666;\n  border-radius: 4px; }\n\n.goa-input-field-error {\n  border: 1px solid #ec040b;\n  border-radius: 4px; }\n\n.goa-input-highlight-error {\n  border: 4px solid #ec040b;\n  border-radius: 4px; }\n";
-  styleInject(css_248z$j);
+  var css_248z$f = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  outline: 0;\n  -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n  z-index: 2;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 0 0 8px;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  height: 46px;\n  display: flex;\n  align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n  opacity: 30%; }\n  .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n    cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n  border: solid 2px #fc1921;\n  color: #fc1921; }\n  .goa-checkbox.has-error .goa-checkbox-container svg {\n    fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n  box-sizing: border-box;\n  border: 1px solid #666;\n  border-radius: 2px;\n  height: 24px;\n  line-height: 24px;\n  width: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 3px; }\n  .goa-checkbox .goa-checkbox-container svg {\n    display: none;\n    flex: 1 1 auto;\n    fill: #fff; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n      display: block !important; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n      display: none !important; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n      display: none; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n      display: block; }\n  .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n    background-color: #f1f1f1; }\n  .goa-checkbox .goa-checkbox-container:focus-within {\n    box-shadow: 0 0 0 3px #feba35;\n    outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n  order: 1;\n  margin-left: 8px;\n  margin-right: auto; }\n\n.goa-checkbox-layout {\n  display: inline-flex;\n  align-items: center; }\n";
+  styleInject(css_248z$f);
 
-  var GoAInput = function GoAInput(_ref) {
-    var _ref$validate = _ref.validate,
-        validate = _ref$validate === void 0 ? null : _ref$validate,
-        _ref$name = _ref.name,
-        name = _ref$name === void 0 ? '' : _ref$name,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? '' : _ref$type,
-        _ref$message = _ref.message,
-        message = _ref$message === void 0 ? '' : _ref$message,
+  var GoACheckbox = function GoACheckbox(_ref) {
+    var _ref$checked = _ref.checked,
+        checked = _ref$checked === void 0 ? false : _ref$checked,
         _ref$required = _ref.required,
         required = _ref$required === void 0 ? false : _ref$required,
-        _ref$helpText = _ref.helpText,
-        helpText = _ref$helpText === void 0 ? '' : _ref$helpText,
-        _ref$multiLine = _ref.multiLine,
-        multiLine = _ref$multiLine === void 0 ? false : _ref$multiLine,
-        _ref$navigator = _ref.navigator,
-        navigator = _ref$navigator === void 0 ? false : _ref$navigator,
-        onChange = _ref.onChange;
-
-    var _useState = React.useState(true),
-        _useState2 = _slicedToArray(_useState, 2),
-        valid = _useState2[0],
-        setValid = _useState2[1];
-
-    var _useState3 = React.useState(''),
-        _useState4 = _slicedToArray(_useState3, 2),
-        value = _useState4[0],
-        setValue = _useState4[1];
+        _ref$disabled = _ref.disabled,
+        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$indeterminate = _ref.indeterminate,
+        indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+        _ref$labelPosition = _ref.labelPosition,
+        labelPosition = _ref$labelPosition === void 0 ? 'before' : _ref$labelPosition,
+        _ref$value = _ref.value,
+        value = _ref$value === void 0 ? '' : _ref$value,
+        content = _ref.content,
+        children = _ref.children,
+        selectionChange = _ref.selectionChange;
 
-    var handleInput = function handleInput(e) {
-      var value = e.target.value;
-      setValue(value);
+    var hasError = function hasError() {
+      return required && !checked;
+    };
 
-      if (validate) {
-        setValid(validate(value));
-      }
+    var rootCss = function rootCss() {
+      return classnames({
+        'goa-checkbox': true,
+        'goa-checkbox-disabled': disabled,
+        'has-error': hasError(),
+        'goa-checkbox-label-before': labelPosition === 'before'
+      });
+    };
 
-      onChange(value);
+    var checkboxCss = function checkboxCss() {
+      return classnames({
+        'goa-checkbox-container': true,
+        'goa-checkbox-selected': !indeterminate && checked,
+        'goa-checkbox-indeterminate': indeterminate && checked
+      });
     };
 
-    var inputFieldClass = !message ? 'goa-input-field' : !navigator ? 'goa-input-field-error' : 'goa-input-highlight-error';
-    return /*#__PURE__*/React__default.createElement("div", null, multiLine ? /*#__PURE__*/React__default.createElement("textarea", {
-      placeholder: name,
-      onChange: handleInput,
-      className: inputFieldClass
-    }, value) : /*#__PURE__*/React__default.createElement("input", {
-      type: type,
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: rootCss()
+    }, /*#__PURE__*/React__default.createElement("label", {
+      className: "goa-checkbox-layout"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: checkboxCss()
+    }, /*#__PURE__*/React__default.createElement("input", {
+      type: "checkbox",
+      checked: checked,
+      disabled: disabled,
       required: required,
-      name: name,
       value: value,
-      onChange: handleInput,
-      className: inputFieldClass,
-      placeholder: name
-    }), message && /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-input-error-message"
-    }, message), helpText && /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-input-help-text-message"
-    }, helpText));
-  };
-  GoAInput.propTypes = {
-    validate: propTypes.func,
-    name: propTypes.string,
-    type: propTypes.string,
-    message: propTypes.string,
-    required: propTypes.bool,
-    helpText: propTypes.string,
-    multiLine: propTypes.bool,
-    navigator: propTypes.bool,
-    onChange: propTypes.func
+      onChange: function onChange(e) {
+        return selectionChange(e.target.checked);
+      }
+    }), indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
+      id: "dashmark",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 15 2",
+      className: "goa-indeterminate"
+    }, /*#__PURE__*/React__default.createElement("rect", {
+      width: "15",
+      height: "2"
+    })), !indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
+      id: "checkmark",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 12.18",
+      className: "goa-checkmark"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
+    }))), /*#__PURE__*/React__default.createElement("span", {
+      className: "goa-checkbox-label"
+    }, content || children)));
   };
 
-  var css_248z$k = ".goa-scrollable {\n  overflow: hidden;\n  height: 100%;\n}\n\n.goa-scrollable > div::-webkit-scrollbar {\n  width: 6px;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb {\n  background: #888;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n";
-  styleInject(css_248z$k);
-
-  var css_248z$l = "/* Root ============================================================================== */\n\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100vw;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n  position: relative;\n  background: #fff;\n  transition: opacity 150ms ease-in;\n  z-index: 1001;\n}\n\n@media (max-width: 639px) {\n  .modal {\n    width: 100vw;\n    height: 100vh;\n  }\n}\n\n@media (min-width: 640px) {\n  .modal {\n    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n    border-radius: 4px;\n    margin: 1rem;\n    max-height: 80vh;\n    width: 600px;\n  }\n}\n@media (min-width: 1024px) {\n  .modal {\n    width: 65ch;\n  }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n  text-align: right;\n  margin: 1rem;\n}\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem;\n  }\n  .modal-actions button {\n    display: block;\n    width: 100%;\n  }\n}\n\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0;\n  }\n  .modal-actions > button + button {\n    margin-left: 0.5rem;\n  }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem;\n  margin-right: 40px; /*  close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n  position: fixed;\n  inset: 0;\n  opacity: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  transition: opacity 100ms ease-in;\n}\n\n/* Modal Close ============================================================================ */\n\n.modal-close {\n  padding: 0.5rem;\n  top: 0.5rem;\n  right: 0.5rem;\n  position: absolute;\n  cursor: pointer;\n  height: 20px;\n  width: 20px;\n  border-radius: 999px;\n  transition: background 200ms ease-in;\n}\n\n.modal-close:hover {\n  background: rgba(0, 0, 0, 0.1);\n}\n";
-  styleInject(css_248z$l);
-
-  var css_248z$m = "/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n";
-  styleInject(css_248z$m);
+  var css_248z$g = "/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n";
+  styleInject(css_248z$g);
 
   var GoAPageLoader = function GoAPageLoader(_ref) {
     var _ref$type = _ref.type,
@@ -2610,75 +2129,86 @@
     displayType: propTypes.string
   };
 
-  var css_248z$n = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n";
-  styleInject(css_248z$n);
-
-  var GoASkeletonElement = function GoASkeletonElement(_ref) {
-    var _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'text' : _ref$type;
-    var classes = "skeleton ".concat(type);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes
-    });
-  };
+  var css_248z$h = "@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite; }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke-width: 7px; }\n\n.rotating-circle {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite;\n  display: block;\n  fill: transparent;\n  stroke-linecap: round;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n";
+  styleInject(css_248z$h);
 
-  var GoASkeletonContent = function GoASkeletonContent(_ref) {
-    var _ref$rows = _ref.rows,
-        rows = _ref$rows === void 0 ? 1 : _ref$rows;
-    var elements = [];
+  var GoAElementLoader = function GoAElementLoader(_ref) {
+    var _ref$visible = _ref.visible,
+        visible = _ref$visible === void 0 ? false : _ref$visible,
+        _ref$baseColour = _ref.baseColour,
+        baseColour = _ref$baseColour === void 0 ? '#c8eef9' : _ref$baseColour,
+        _ref$spinnerColour = _ref.spinnerColour,
+        spinnerColour = _ref$spinnerColour === void 0 ? '#0070c4' : _ref$spinnerColour,
+        _ref$size = _ref.size,
+        size = _ref$size === void 0 ? 'default' : _ref$size;
+    var radius = size === 'small' ? 16 : 18;
+    var diameter = radius * 2;
+    var boxView = "0 0 ".concat(diameter, " ").concat(diameter);
+    /**
+     * Generates the value for an SVG arc.
+     * @param current       Current value.
+     * @param total         Maximum value.
+     * @param pathRadius    Radius of the SVG path.
+     * @param elementRadius Radius of the SVG container.
+     * @param isSemicircle  Whether the element should be a semicircle.
+     */
 
-    for (var i = 0; i < rows; i++) {
-      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
-    }
+    function getArc(current, total, pathRadius, elementRadius) {
+      var isSemicircle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var value = Math.max(0, Math.min(current || 0, total));
+      var maxAngle = isSemicircle ? 180 : 359.9999;
+      var percentage = total === 0 ? maxAngle : value / total * maxAngle;
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-content"
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-      type: "title"
-    }), elements));
-  };
+      var start = _polarToCartesian(elementRadius, pathRadius, percentage);
 
-  var GoASkeletonGridColumnContent = function GoASkeletonGridColumnContent(_ref) {
-    var _ref$rows = _ref.rows,
-        rows = _ref$rows === void 0 ? 1 : _ref$rows;
-    var elements = [];
+      var end = _polarToCartesian(elementRadius, pathRadius, 0);
 
-    for (var i = 0; i < rows; i++) {
-      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
+      var arcSweep = percentage <= 180 ? 0 : 1;
+      return "M ".concat(start, " A ").concat(pathRadius, " ").concat(pathRadius, " 0 ").concat(arcSweep, " 0 ").concat(end);
     }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-content"
-    }, /*#__PURE__*/React__default.createElement("div", null, elements));
-  };
-
-  var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
-    var _ref$rows = _ref.rows,
-        rows = _ref$rows === void 0 ? 1 : _ref$rows;
-    var elements = [];
+    var DEGREE_IN_RADIANS = Math.PI / 180;
+    /**
+     * Converts polar cooradinates to Cartesian.
+     * @param elementRadius  Radius of the wrapper element.
+     * @param pathRadius     Radius of the path being described.
+     * @param angleInDegrees Degree to be converted.
+     */
 
-    for (var i = 0; i < rows; i++) {
-      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
+    function _polarToCartesian(elementRadius, pathRadius, angleInDegrees) {
+      var angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
+      var x = elementRadius + pathRadius * Math.cos(angleInRadians);
+      var y = elementRadius + pathRadius * Math.sin(angleInRadians);
+      return x + ' ' + y;
     }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-image-content"
-    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-      type: "thumbnail"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-image-content__text"
-    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-      type: "title"
-    }), elements));
+    return visible && /*#__PURE__*/React__default.createElement("svg", {
+      className: "circular-loader",
+      fill: "none",
+      viewBox: boxView,
+      width: radius,
+      height: radius,
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__default.createElement("circle", {
+      cx: radius,
+      cy: radius,
+      stroke: baseColour,
+      strokeWidth: "7",
+      r: radius - 4
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: getArc(75, 100, radius - 4, radius, false),
+      strokeWidth: "7",
+      stroke: spinnerColour,
+      strokeLinecap: "round"
+    }));
+  };
+  GoAElementLoader.propTypes = {
+    visible: propTypes.bool,
+    baseColour: propTypes.string,
+    spinnerColour: propTypes.string,
+    size: propTypes.number
   };
 
-  exports.GoABadge = GoABadge;
   exports.GoAButton = GoAButton;
   exports.GoACallout = GoACallout;
   exports.GoACard = GoACard;
@@ -2686,15 +2216,10 @@
   exports.GoACheckbox = GoACheckbox;
   exports.GoADropdown = GoADropdown;
   exports.GoAElementLoader = GoAElementLoader;
-  exports.GoAForm = GoAForm;
-  exports.GoAFormButton = GoAFormButton;
-  exports.GoAFormContainer = GoAFormContainer;
-  exports.GoAFormItem = GoAFormItem;
   exports.GoAHeader = GoAHeader;
   exports.GoAHeroBanner = GoAHeroBanner;
   exports.GoAHeroBannerContent = GoAHeroBannerContent;
   exports.GoAHeroBannerLink = GoAHeroBannerLink;
-  exports.GoAInput = GoAInput;
   exports.GoAMicrositeLogo = MicrositeLogo;
   exports.GoANotification = GoANotification;
   exports.GoAOption = GoAOption;