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

package/experimental/scrollable/scrollable.component.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { TestProps } from '../common';
+import './scrollable.css';
+interface Props {
+    vertical?: boolean;
+    horizontal?: boolean;
+    hPadding?: number;
+    vPadding?: number;
+    height?: number;
+}
+export declare const GoAScrollable: FC<Props & TestProps>;
+export default GoAScrollable;

package/experimental/transitions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './transitionSequence';
+export * from './transition';

package/experimental/transitions/transition.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import './transitions.css';
+export interface GoATransitionProps {
+    name: string;
+    active: boolean;
+    onComplete?: () => void;
+}
+export declare const GoATransition: FC<GoATransitionProps>;
+export default GoATransition;

package/experimental/transitions/transitionSequence.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+declare type TransitionType = 'fade-in' | 'fade-out' | 'slide-in-up' | 'slide-out-up' | 'slide-in-down' | 'slide-out-down' | 'slide-in-left' | 'slide-out-left' | 'slide-in-right' | 'slide-out-right';
+interface Props {
+    transitions: string[] | TransitionType[];
+    transitionIndex: number;
+    onComplete?: (index: number, done: boolean) => void;
+}
+export declare const GoATransitionSequence: FC<Props>;
+export {};

package/index.d.ts

@@ -1,15 +1,22 @@
+/**
+ * IMPORTANT: Do NOT export experimental components in this file.
+ */
 import GoACallout from './lib/callout/callout';
 import GoANotification from './lib/notification/notification';
 import GoAButton from './lib/button/button';
 import GoAHeader from './lib/header/header';
 import GoAMicrositeLogo from './lib/microsite-logo/microsite-logo';
 import GoAHeroBanner from './lib/hero-banner/hero-banner.component';
-import GoAHeroBannerContent from './lib/hero-banner/content/hero-banner-content.component';
-import GoAHeroBannerLink from './lib/hero-banner/link/hero-banner-link.component';
-import GoACard from './lib/card/card.component';
+import { GoADropdown, GoAOption, GoAOptionGroup } from './lib/dropdown/dropdown.component';
 import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
+import { GoASkeletonContent } from './lib/skeleton/skeleton-titled-content';
+import { GoASkeletonGridColumnContent } from './lib/skeleton/skeleton-grid-column';
+import { GoASkeletonImageContent } from './lib/skeleton/skeleton-image-content';
+import GoACard from './lib/card/card.component';
 import GoACardGroup from './lib/card-group/card.group.component';
-import { GoADropdown, GoAOption, GoAOptionGroup } from './lib/dropdown/dropdown.component';
 import GoACheckbox from './lib/checkbox/checkbox';
-import { GoABadge, GoAPageLoader, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoAFormItem, GoAFormButton, GoAFormContainer, GoAForm, GoAInput } from './experimental';
-export { GoABadge, GoAPageLoader, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoAFormItem, GoAFormButton, GoAForm, GoAInput, GoAFormContainer, GoANotification, GoARadioGroup, GoARadio, GoACallout, GoAButton, GoAHeader, GoAMicrositeLogo, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoACard, GoACardGroup, GoADropdown, GoAOption, GoAOptionGroup, GoACheckbox, };
+import GoAHeroBannerContent from './lib/hero-banner/content/hero-banner-content.component';
+import GoAHeroBannerLink from './lib/hero-banner/link/hero-banner-link.component';
+import GoAPageLoader from './lib/page-loader/page-loader';
+import { GoAElementLoader } from './lib/element-loader/element-loader';
+export { GoAPageLoader, GoAElementLoader, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent, GoANotification, GoARadioGroup, GoARadio, GoACallout, GoAButton, GoAHeader, GoAMicrositeLogo, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoACard, GoACardGroup, GoADropdown, GoAOption, GoAOptionGroup, GoACheckbox, };

package/lib/_common/errorState.d.ts

@@ -0,0 +1,5 @@
+declare type FormInputState = 'error' | 'valid';
+export interface ErrorProps {
+    state?: FormInputState;
+}
+export {};

package/{experimental/experimental → lib}/element-loader/element-loader.d.ts

@@ -5,7 +5,7 @@ export interface ElementLoaderProps {
     visible?: boolean;
     baseColour: string;
     spinnerColour: string;
-    size: number;
+    size?: string;
 }
 export declare const GoAElementLoader: {
     ({ visible, baseColour, spinnerColour, size, }: ElementLoaderProps): JSX.Element;

package/lib/radio-group/radio-group.d.ts

@@ -1,51 +1,26 @@
-import React, { ReactNode, FC } from 'react';
-import { Data as RadioItem, LabelPosition } from './radio/radio';
-import './radio-group.scss';
-export * from './radio/radio';
+import { FC } from 'react';
+export * from './radio';
 interface Props {
-    children?: ReactNode;
     /**
      * Name of the form value
      */
     name: string;
-    /**
-     * Help text of the radio item
-     */
-    helperText?: string;
-    /**
-     * List of radio buttons to select
-     */
-    items?: RadioItem[];
-    /**
-     * Is the radio button selection required.
-     */
-    required?: boolean;
-    /**
-     * Error messages
-     */
-    requiredErrorMessage?: string;
-    /**
-     * Title of the radio item
-     */
-    title?: string;
     /**
      * Initial data value
      */
     value?: string;
-    /**
-     * Where is the label positioned
-     */
-    labelPosition?: LabelPosition;
     /**
      * Disable radio buttons
      */
     disabled?: boolean;
+    /**
+     * Orientation of the radio buttons
+     */
+    orientation: 'horizontal' | 'vertical';
     /**
      * Callback function containing the newly selected value
      */
     onChange: (value: string) => void;
 }
-export declare const RadioContext: React.Context<string>;
-export declare const RadioUpdateContext: React.Context<(value: string) => void>;
 export declare const GoARadioGroup: FC<Props>;
 export default GoARadioGroup;

package/lib/radio-group/radio.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import './radio.scss';
+import { ErrorProps } from '../_common/errorState';
+import { TestProps } from '../../experimental/common';
+interface Props {
+    value: string;
+    name?: string;
+    disabled?: boolean;
+    checked: boolean;
+    onChange?: (value: string) => void;
+}
+export declare const GoARadio: FC<Props & ErrorProps & TestProps>;
+export default GoARadio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "3.4.0-beta.2",
+  "version": "3.4.0-beta.23",
   "description": "Government of Alberta - DIO - Shared UI components for React JS",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment as Fragment$1, useContext, Children, createContext, useEffect, useRef } from 'react';
+import React, { useState, Fragment as Fragment$1, createContext, useContext, useEffect, Children, useRef } from 'react';
 import classnames from 'classnames';
 
 function _defineProperty(obj, key, value) {
@@ -90,22 +90,10 @@ function _slicedToArray(arr, i) {
   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 = [];
@@ -150,10 +138,6 @@ function _arrayLikeToArray(arr, len) {
   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.");
 }
@@ -1528,249 +1512,13 @@ GoAHeroBanner.defaultProps = {
   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 = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      imgHeight = _useState2[0],
-      setImgHeight = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: "goa-card",
-    "data-testid": "card-container",
-    style: {
-      minWidth: minWidth,
-      maxWidth: maxWidth
-    }
-  }, other), cardImageUrl && /*#__PURE__*/React.createElement("div", {
-    className: "goa-poster-image",
-    "data-testid": "card-img"
-  }, /*#__PURE__*/React.createElement("img", {
-    height: imgHeight,
-    src: cardImageUrl,
-    alt: "Card cardImageUrl"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "card-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-title",
-    "data-testid": "card-title"
-  }, titleUrl ? /*#__PURE__*/React.createElement("a", {
-    href: titleUrl,
-    "data-testid": "card-title-link"
-  }, title) : /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("p", {
-    className: "goa-text",
-    "data-testid": "card-content"
-  }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React.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 = useContext(RadioContext);
-  var updateSelectedValue = 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.createElement("div", {
-    className: getRootCssClasses()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-radio-inline-block"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "goa-radio-layout"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: getSelectedCss()
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    name: name,
-    value: value,
-    checked: isChecked(),
-    disabled: disabled,
-    onChange: onRadioChange
-  }), isChecked() && /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "6",
-    cy: "6",
-    r: "6",
-    fill: "#fff"
-  }))), /*#__PURE__*/React.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.createContext('');
-var RadioUpdateContext = React.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 = 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 Children.map(children, function (child) {
-        var key = "".concat(childAttrs.name, "-").concat(child.props.value);
-        return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
-          key: key,
-          required: required
-        }));
-      });
-    }
-
-    return items.map(function (item) {
-      return /*#__PURE__*/React.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.createElement("div", {
-    className: "goa-radio-group"
-  }, title && /*#__PURE__*/React.createElement("span", {
-    className: "radio-group-title"
-  }, title), required && /*#__PURE__*/React.createElement("span", {
-    className: "required-label"
-  }, "(Required)"), helperText && /*#__PURE__*/React.createElement("div", {
-    className: "helper-text"
-  }, helperText), /*#__PURE__*/React.createElement(RadioContext.Provider, {
-    value: selectedValue
-  }, /*#__PURE__*/React.createElement(RadioUpdateContext.Provider, {
-    value: handleOnChange
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-radios"
-  }, getChildren()))), hasError() && /*#__PURE__*/React.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.createElement(GoACard, Object.assign({}, item, {
-        key: index
-      }), item.children);
-    });
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-card-group"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "card-group-title"
-  }, title), /*#__PURE__*/React.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 = 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,
@@ -1930,7 +1678,7 @@ var GoADropdown = function GoADropdown(_ref) {
     value: {
       selectionChanged: selectionChanged
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, canOpen(isOpen, open) && /*#__PURE__*/React.createElement("div", {
     className: "dropdown-overlay",
     "data-testid": "dropdown-container",
     ref: overlayRef,
@@ -1982,530 +1730,301 @@ GoADropdown.defaultProps = {
   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.createElement("div", {
-    className: rootCss()
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "goa-checkbox-layout"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: checkboxCss()
+  return /*#__PURE__*/React.createElement("label", {
+    className: getCss()
   }, /*#__PURE__*/React.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.createElement("svg", {
-    id: "dashmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 2",
-    className: "goa-indeterminate"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "15",
-    height: "2"
-  })), !indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
-    id: "checkmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 12.18",
-    className: "goa-checkmark"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
-  }))), /*#__PURE__*/React.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.createElement("div", {
-    className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-  }, icon, /*#__PURE__*/React.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.createElement("div", {
+    className: "goa-radio-icon"
+  }), /*#__PURE__*/React.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 Children.map(children, function (child) {
+      var key = "".concat(childAttrs.name, "-").concat(child.props.value);
+      return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
+        checked: child.props.value === value,
+        onChange: onChange,
+        key: key
+      }));
+    });
   }
 
-  return visible && /*#__PURE__*/React.createElement("svg", {
-    className: "circular-loader",
-    fill: "none",
-    viewBox: boxView(),
-    width: "".concat(size),
-    height: "".concat(size),
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "".concat(radius),
-    cy: "".concat(radius),
-    stroke: "".concat(baseColour),
-    strokeWidth: "7",
-    r: "".concat(radius - 7 / 2)
-  }), /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.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 = 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.createElement("div", {
+    className: classes
+  });
+};
 
-  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.createElement(GoASkeletonElement, {
+      type: "text"
+    }));
+  }
 
-    if (onChange) {
-      onChange(val);
-    }
-  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "skeleton-content"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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 Children.map(children, function (child) {
-      if (child.props.originalType !== 'label') {
-        return React.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.createElement(GoASkeletonElement, {
+      type: "text"
+    }));
   }
 
   return /*#__PURE__*/React.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.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.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.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.createElement("div", {
-    className: "goa-form-container"
-  }, children);
+    className: "skeleton-image-content"
+  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
+    type: "thumbnail"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "skeleton-image-content__text"
+  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
+    type: "title"
+  }), elements));
 };
 
-var initState = {
-  data: {},
-  validators: {},
-  errors: {},
-  navigator: {}
-};
-var FormContext;
-
-var _FormContext = FormContext = React.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 = useState(initState),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      formState = _useState2[0],
-      setFormState = _useState2[1];
-
-  var _useState3 = 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.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.createElement("div", {
+    className: "goa-poster-image",
+    "data-testid": "card-img"
+  }, /*#__PURE__*/React.createElement("img", {
+    height: imgHeight,
+    src: cardImageUrl,
+    alt: "Card cardImageUrl"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "goa-title",
+    "data-testid": "card-title"
+  }, titleUrl ? /*#__PURE__*/React.createElement("a", {
+    href: titleUrl,
+    "data-testid": "card-title-link"
+  }, title) : /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("p", {
+    className: "goa-text",
+    "data-testid": "card-content"
+  }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React.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.createElement(GoACard, Object.assign({}, item, {
+        key: index
+      }), item.children);
     });
   }
 
-  var renderErrorList = function renderErrorList() {
-    return /*#__PURE__*/React.createElement(GoACallout, {
-      type: "emergency",
-      title: "Please fix following errors:"
-    }, /*#__PURE__*/React.createElement("ul", null, formErrors.map(function (error) {
-      return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
-        href: "#".concat(error),
-        onClick: function onClick() {
-          return addNavigator(error);
-        }
-      }, error));
-    })));
-  };
-
-  return /*#__PURE__*/React.createElement(Provider, {
-    value: formProviderValue
+  return /*#__PURE__*/React.createElement("div", {
+    className: "goa-card-group"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-form"
-  }, /*#__PURE__*/React.createElement("h2", null, formTitle), /*#__PURE__*/React.createElement("p", null, formDescription), onFormSubmit ? /*#__PURE__*/React.createElement("form", {
-    onSubmit: onSubmit
-  }, children, formErrors.length > 0 && renderErrorList(), /*#__PURE__*/React.createElement(GoAFormButton, null, /*#__PURE__*/React.createElement(GoAButton, {
-    buttonType: "tertiary",
-    type: "button"
-  }, "Cancel"), /*#__PURE__*/React.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.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 = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      valid = _useState2[0],
-      setValid = _useState2[1];
-
-  var _useState3 = 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.createElement("div", null, multiLine ? /*#__PURE__*/React.createElement("textarea", {
-    placeholder: name,
-    onChange: handleInput,
-    className: inputFieldClass
-  }, value) : /*#__PURE__*/React.createElement("input", {
-    type: type,
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootCss()
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "goa-checkbox-layout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: checkboxCss()
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: checked,
+    disabled: disabled,
     required: required,
-    name: name,
     value: value,
-    onChange: handleInput,
-    className: inputFieldClass,
-    placeholder: name
-  }), message && /*#__PURE__*/React.createElement("p", {
-    className: "goa-input-error-message"
-  }, message), helpText && /*#__PURE__*/React.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.createElement("svg", {
+    id: "dashmark",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 15 2",
+    className: "goa-indeterminate"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "15",
+    height: "2"
+  })), !indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
+    id: "checkmark",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 12.18",
+    className: "goa-checkmark"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
+  }))), /*#__PURE__*/React.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,
@@ -2604,72 +2123,84 @@ GoAPageLoader.propTypes = {
   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.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.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.createElement("div", {
-    className: "skeleton-content"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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.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.createElement("div", {
-    className: "skeleton-content"
-  }, /*#__PURE__*/React.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.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.createElement("div", {
-    className: "skeleton-image-content"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "thumbnail"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-image-content__text"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "title"
-  }), elements));
+  return visible && /*#__PURE__*/React.createElement("svg", {
+    className: "circular-loader",
+    fill: "none",
+    viewBox: boxView,
+    width: radius,
+    height: radius,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: radius,
+    cy: radius,
+    stroke: baseColour,
+    strokeWidth: "7",
+    r: radius - 4
+  }), /*#__PURE__*/React.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
 };
 
-export { GoABadge, GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoAElementLoader, GoAForm, GoAFormButton, GoAFormContainer, GoAFormItem, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoAInput, MicrositeLogo as GoAMicrositeLogo, GoANotification, GoAOption, GoAOptionGroup, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
+export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, MicrositeLogo as GoAMicrositeLogo, GoANotification, GoAOption, GoAOptionGroup, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };