@abgov/react-components 3.4.0-beta.61 → 3.4.0-beta.65

package/experimental/react-components.umd.js

@@ -1,969 +1,941 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames'], factory) :
-  (global = global || self, factory(global.ReactComponents = {}, global.React, global.classnames));
-}(this, (function (exports, React, classnames) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  classnames = classnames && classnames.hasOwnProperty('default') ? classnames['default'] : classnames;
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('classnames'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'classnames', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, global.jsxRuntime, global.classnames, global.React));
+})(this, (function (exports, jsxRuntime, classnames, React) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
 
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
 
-    if (!css || typeof document === 'undefined') { return; }
+      if (!css || typeof document === 'undefined') { return; }
 
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
 
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
+        }
       } else {
         head.appendChild(style);
       }
-    } else {
-      head.appendChild(style);
-    }
 
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n.goa-badge-icon {\n  font-size: var(--fs-sm); }\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding: 0 0.5rem;\n  gap: 0.25rem; }\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n  margin-left: 0.25rem; }\n\n.badge-module_goa-badge-content__3UN-3 {\n  text-transform: capitalize;\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-regular);\n  line-height: var(--lh-base); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: var(--color-gray-100);\n  color: var(--color-tealblue-900); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: var(--color-green-500);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: var(--color-orange-500);\n  color: var(--color-black); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: var(--color-red-500);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: var(--color-black);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: var(--color-gray-600);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: var(--color-white);\n  color: var(--color-black); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: var(--color-white);\n  color: var(--color-black); }\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);
-
-  var css_248z$1 = ".goa-icon {\n  display: flex; }\n\n.goa-icon-button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center; }\n\n/* Primary */\n.goa-icon-button-primary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  color: var(--color-blue-500);\n  fill: var(--color-blue-500);\n  cursor: pointer;\n  transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-primary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-primary:hover {\n  background-color: var(--color-blue-100); }\n\n/* Secondary */\n.goa-icon-button-secondary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer; }\n\n.goa-icon-button-secondary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-secondary:hover {\n  background: rgba(0, 0, 0, 0.1);\n  color: #000;\n  fill: #000; }\n\n/* tertiary */\n.goa-icon-button-tertiary {\n  padding: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer; }\n\n.goa-icon-button-tertiary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-tertiary:hover {\n  color: #000;\n  fill: #000; }\n";
-  styleInject(css_248z$1);
-
-  function GoAIcon(_ref) {
-    var type = _ref.type,
-        _ref$style = _ref.style,
-        style = _ref$style === void 0 ? 'outline' : _ref$style,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 'medium' : _ref$size;
-
-    var _size = getSize(size);
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        width: _size
-      },
-      className: "goa-icon",
-      "data-testid": "icon-".concat(type)
-    }, /*#__PURE__*/React__default.createElement("ion-icon", {
-      style: {
-        fontSize: _size
-      },
-      name: style === 'filled' ? type : "".concat(type, "-").concat(style)
-    }));
-  }
-
-  function getSize(size) {
-    switch (size) {
-      case 'small':
-        return "14px";
-
-      case 'medium':
-        return "18px";
-
-      case 'large':
-        return "24px";
-
-      case 'xlarge':
-        return "32px";
-    }
-  }
-
-  function GoAIconButton(_ref) {
-    var type = _ref.type,
-        _ref$variant = _ref.variant,
-        variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-        onClick = _ref.onClick,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 'medium' : _ref$size,
-        title = _ref.title,
-        testId = _ref.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      title: title,
-      className: "goa-icon-button goa-icon-button-".concat(variant),
-      "data-testid": testId,
-      onClick: onClick
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: type,
-      size: size
-    }));
-  }
-
-  var GoABadge = function GoABadge(_ref) {
-    var type = _ref.type,
-        content = _ref.content,
-        icon = _ref.icon,
-        testId = _ref.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-    }, icon && /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: icon
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAInfoBadge = function GoAInfoBadge(_ref2) {
-    var content = _ref2.content,
-        testId = _ref2.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-information"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "information-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoASuccessBadge = function GoASuccessBadge(_ref3) {
-    var content = _ref3.content,
-        testId = _ref3.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-success"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "checkmark-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAWarningBadge = function GoAWarningBadge(_ref4) {
-    var content = _ref4.content,
-        testId = _ref4.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-warning"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "warning"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAEmergencyBadge = function GoAEmergencyBadge(_ref5) {
-    var content = _ref5.content,
-        testId = _ref5.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-emergency"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "alert-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
     }
 
-    return obj;
-  }
+    var css_248z$b = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n.goa-badge-icon {\n  font-size: var(--fs-sm);\n}\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding: 0 0.5rem;\n  gap: 0.25rem;\n}\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n  margin-left: 0.25rem;\n}\n\n.badge-module_goa-badge-content__3UN-3 {\n  text-transform: capitalize;\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-regular);\n  line-height: var(--lh-base);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: var(--color-gray-100);\n  color: var(--color-tealblue-900);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: var(--color-green-500);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: var(--color-orange-500);\n  color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: var(--color-red-500);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: var(--color-black);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: var(--color-gray-600);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: var(--color-white);\n  color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: var(--color-white);\n  color: var(--color-black);\n}";
+    var styles$2 = {"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$b);
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
+    var css_248z$a = ".goa-icon {\n  display: flex;\n}\n\n.goa-icon-button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n}\n\n/* Primary */\n.goa-icon-button-primary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  color: var(--color-blue-500);\n  fill: var(--color-blue-500);\n  cursor: pointer;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n}\n\n.goa-icon-button-primary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-primary:hover {\n  background-color: var(--color-blue-100);\n}\n\n/* Secondary */\n.goa-icon-button-secondary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer;\n}\n\n.goa-icon-button-secondary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-secondary:hover {\n  background: rgba(0, 0, 0, 0.1);\n  color: #000;\n  fill: #000;\n}\n\n/* tertiary */\n.goa-icon-button-tertiary {\n  padding: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer;\n}\n\n.goa-icon-button-tertiary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-tertiary:hover {\n  color: #000;\n  fill: #000;\n}";
+    styleInject(css_248z$a);
 
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
+    function GoAIcon(_a) {
+      var type = _a.type,
+          _b = _a.style,
+          style = _b === void 0 ? 'outline' : _b,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c;
+
+      var _size = getSize(size);
+
+      return jsxRuntime.jsx("div", __assign({
+        style: {
+          width: _size
+        },
+        className: "goa-icon",
+        "data-testid": "icon-" + type
+      }, {
+        children: jsxRuntime.jsx("ion-icon", {
+          style: {
+            fontSize: _size
+          },
+          name: style === 'filled' ? type : type + "-" + style
+        }, void 0)
+      }), void 0);
     }
 
-    return keys;
-  }
+    function getSize(size) {
+      switch (size) {
+        case 'small':
+          return "14px";
 
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
+        case 'medium':
+          return "18px";
 
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
+        case 'large':
+          return "24px";
+
+        case 'xlarge':
+          return "32px";
       }
     }
 
-    return target;
-  }
+    function GoAIconButton(_a) {
+      var type = _a.type,
+          disabled = _a.disabled,
+          _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b,
+          onClick = _a.onClick,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c,
+          title = _a.title,
+          testId = _a.testId;
+      return jsxRuntime.jsx("button", __assign({
+        title: title,
+        disabled: disabled,
+        className: "goa-icon-button goa-icon-button-" + variant,
+        "data-testid": testId,
+        onClick: onClick
+      }, {
+        children: jsxRuntime.jsx(GoAIcon, {
+          type: type,
+          size: size
+        }, void 0)
+      }), void 0);
+    }
 
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+    var GoABadge = function GoABadge(_a) {
+      var type = _a.type,
+          content = _a.content,
+          icon = _a.icon,
+          testId = _a.testId;
+      return jsxRuntime.jsxs("div", __assign({
+        "data-testid": testId,
+        className: classnames__default["default"](styles$2['goa-badge'], styles$2["badge-" + type])
+      }, {
+        children: [icon && jsxRuntime.jsx(GoAIcon, {
+          type: icon
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: classnames__default["default"](styles$2['goa-badge-content'])
+        }, {
+          children: content
+        }), void 0)]
+      }), void 0);
+    };
+    var GoAInfoBadge = function GoAInfoBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsxs("div", __assign({
+        "data-testid": testId,
+        className: classnames__default["default"](styles$2['goa-badge'], styles$2["badge-information"])
+      }, {
+        children: [jsxRuntime.jsx(GoAIcon, {
+          type: "information-circle"
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: classnames__default["default"](styles$2['goa-badge-content'])
+        }, {
+          children: content
+        }), void 0)]
+      }), void 0);
+    };
+    var GoASuccessBadge = function GoASuccessBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsxs("div", __assign({
+        "data-testid": testId,
+        className: classnames__default["default"](styles$2['goa-badge'], styles$2["badge-success"])
+      }, {
+        children: [jsxRuntime.jsx(GoAIcon, {
+          type: "checkmark-circle"
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: classnames__default["default"](styles$2['goa-badge-content'])
+        }, {
+          children: content
+        }), void 0)]
+      }), void 0);
+    };
+    var GoAWarningBadge = function GoAWarningBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsxs("div", __assign({
+        "data-testid": testId,
+        className: classnames__default["default"](styles$2['goa-badge'], styles$2["badge-warning"])
+      }, {
+        children: [jsxRuntime.jsx(GoAIcon, {
+          type: "warning"
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: classnames__default["default"](styles$2['goa-badge-content'])
+        }, {
+          children: content
+        }), void 0)]
+      }), void 0);
+    };
+    var GoAEmergencyBadge = function GoAEmergencyBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsxs("div", __assign({
+        "data-testid": testId,
+        className: classnames__default["default"](styles$2['goa-badge'], styles$2["badge-emergency"])
+      }, {
+        children: [jsxRuntime.jsx(GoAIcon, {
+          type: "alert-circle"
+        }, void 0), jsxRuntime.jsx("div", __assign({
+          className: classnames__default["default"](styles$2['goa-badge-content'])
+        }, {
+          children: content
+        }), void 0)]
+      }), void 0);
+    };
 
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
+    var css_248z$9 = ".button-module_goa-button__fikCc {\n  border-radius: 0.25rem;\n  border: 2px solid var(--color-blue-500);\n  box-sizing: border-box;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em;\n  padding: 0 0.75rem;\n  transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n  transform: scale(1);\n}\n.button-module_goa-button__fikCc:disabled {\n  pointer-events: none;\n  color: var(--color-gray-700);\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n.button-module_goa-button__fikCc:active {\n  transform: scale(0.98);\n}\n\n.button-module_goa-button--primary__2V_nV {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-blue-500);\n  color: var(--color-white);\n}\n.button-module_goa-button--primary__2V_nV:hover {\n  border-color: var(--color-blue-600);\n  background: var(--color-blue-600);\n}\n.button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n  border-color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  background: var(--color-blue-600);\n  outline: none;\n}\n\n.button-module_goa-button--secondary__3_OjG {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-white);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--secondary__3_OjG:hover {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n}\n.button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  outline: none;\n}\n\n.button-module_goa-button--tertiary__3mvRP {\n  border-color: var(--color-gray-200);\n  background: var(--color-white);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--tertiary__3mvRP:hover {\n  color: var(--color-blue-600);\n}\n.button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  outline: none;\n}\n\n.button-module_goa-button--borderless__2PWz1 {\n  background: none;\n  color: var(--color-blue-500);\n  border: none;\n}\n.button-module_goa-button--borderless__2PWz1:hover {\n  background-color: var(--color-blue-100);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n  outline: none;\n  box-shadow: none;\n  background-color: var(--color-blue-100);\n}\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n  color: var(--color-white);\n  background: var(--color-red-500);\n  border-color: var(--color-red-500);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n  background: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n  background: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-red-500);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n  color: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-gray-200);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n  color: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\n\n.button-module_goa-button--large__1iRt7 {\n  font-size: var(--fs-lg);\n  line-height: 3rem;\n}\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(3rem + 4px);\n}\n\n.button-module_goa-button--medium__1xeCJ {\n  font-size: var(--fs-base);\n  line-height: 2.375rem;\n}\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(2.375rem + 4px);\n}\n\n.button-module_goa-button--small__1sl63 {\n  font-size: var(--fs-sm);\n  line-height: 1.75rem;\n}\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(1.75rem + 4px);\n}\n\n.button-module_goa-button__fikCc {\n  min-width: 100%;\n}\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n  margin: 0;\n  margin-top: 0.5rem;\n}\n\n@media (min-width: 480px) {\n  .button-module_goa-button__fikCc {\n    min-width: 4rem;\n  }\n\n  .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n    margin: 0;\n    margin-left: 0.5rem;\n  }\n}";
+    var styles$1 = {"goa-button":"button-module_goa-button__fikCc","goa-button--primary":"button-module_goa-button--primary__2V_nV","goa-button--secondary":"button-module_goa-button--secondary__3_OjG","goa-button--tertiary":"button-module_goa-button--tertiary__3mvRP","goa-button--borderless":"button-module_goa-button--borderless__2PWz1","goa-button--danger":"button-module_goa-button--danger__2jXqa","goa-button--large":"button-module_goa-button--large__1iRt7","goa-button--medium":"button-module_goa-button--medium__1xeCJ","goa-button--small":"button-module_goa-button--small__1sl63"};
+    styleInject(css_248z$9);
+
+    var GoAButton = function GoAButton(_a) {
+      var _b = _a.type,
+          type = _b === void 0 ? 'primary' : _b,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c,
+          _d = _a.variant,
+          variant = _d === void 0 ? 'default' : _d,
+          title = _a.title,
+          children = _a.children,
+          onClick = _a.onClick,
+          props = __rest(_a, ["type", "size", "variant", "title", "children", "onClick"]);
+
+      var css = [styles$1["goa-button--" + type], styles$1["goa-button--" + size], styles$1["goa-button--" + variant], styles$1['goa-button']].join(' ');
+      var buttonRef = React.useRef();
+      return jsxRuntime.jsx("button", __assign({
+        className: css,
+        ref: buttonRef,
+        title: title,
+        onClick: onClick
+      }, props, {
+        children: children
+      }), void 0);
+    };
 
-    return target;
-  }
+    var css_248z$8 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n  display: flex;\n  justify-content: center;\n  background-color: #dcdcdc;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n  display: flex;\n  flex: 1 1 auto;\n  margin: 0 24px;\n  max-width: 1200px;\n}\n@media (min-width: 768px) {\n  .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n    margin: 0 72px;\n  }\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n  padding-left: 20px;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n  margin-left: auto;\n  width: 20px;\n  text-align: right;\n  font-weight: bold;\n  font-size: small;\n  align-self: center;\n  cursor: pointer;\n  display: flex;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n  color: #0070c4;\n}";
+    var styles = {"goa-app-version-header":"app-version-header-module_goa-app-version-header__3ngyf","content-wrapper":"app-version-header-module_content-wrapper__15exd","environment-and-version":"app-version-header-module_environment-and-version__1-GPd","close":"app-version-header-module_close__1beXI"};
+    styleInject(css_248z$8);
+
+    var GoAAppVersionHeader = function GoAAppVersionHeader(_a) {
+      var isProdEnvironment = _a.isProdEnvironment,
+          environment = _a.environment,
+          version = _a.version;
+
+      var _b = React.useState(false),
+          closed = _b[0],
+          setClosed = _b[1];
+
+      if (closed || isProdEnvironment) return null;
+      return jsxRuntime.jsx("div", __assign({
+        className: classnames__default["default"](styles['goa-app-version-header'])
+      }, {
+        children: jsxRuntime.jsxs("span", __assign({
+          className: classnames__default["default"](styles['content-wrapper']),
+          "data-testid": 'content-wrapper'
+        }, {
+          children: [jsxRuntime.jsxs("span", __assign({
+            className: classnames__default["default"](styles['environment-and-version'])
+          }, {
+            children: [environment, " ", version]
+          }), void 0), jsxRuntime.jsx("span", __assign({
+            className: classnames__default["default"](styles['close']),
+            "data-testid": 'close',
+            onClick: function () {
+              return setClosed(true);
+            }
+          }, {
+            children: jsxRuntime.jsx(GoAIcon, {
+              type: "close"
+            }, void 0)
+          }), void 0)]
+        }), void 0)
+      }), void 0);
+    };
 
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
+    var css_248z$7 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n  margin-top: 0;\n}\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n  margin-bottom: 1rem;\n}\n\n/* Font sizes */\nh1 {\n  font-size: var(--fs-3xl);\n  line-height: var(--lh-2xl);\n  font-weight: var(--fw-bold);\n}\n\nh2 {\n  font-size: var(--fs-2xl);\n  line-height: var(--lh-xl);\n  font-weight: var(--fw-regular);\n}\n\nh3 {\n  font-size: var(--fs-xl);\n  line-height: var(--lh-lg);\n  font-weight: var(--fw-regular);\n}\n\nh4,\nh5,\nh6 {\n  font-size: var(--fs-base);\n  line-height: var(--lh-base);\n  font-weight: var(--fw-bold);\n}\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n  margin-top: 2rem;\n}\n\np {\n  margin-bottom: 1rem;\n  font-size: var(--fs-base);\n}\n\nhr + h1,\nhr + h2,\nhr + h3 {\n  margin-top: 0;\n}\n\nem {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  color: var(--color-gray);\n}\n\nsmall {\n  font-size: var(--fs-xs);\n  font-style: normal;\n  color: var(--color-gray);\n}\n\n.card-module_goa-card__OjjJX {\n  --card-spacing: 1rem;\n  --card-child-spacing: 0.5rem;\n  box-sizing: border-box;\n  background: var(--color-white);\n  transition: opacity 300ms ease-in-out;\n  border-radius: var(--border-radius);\n}\n.card-module_goa-card__OjjJX a:hover {\n  color: var(--color-blue-600);\n  text-decoration: none;\n}\n.card-module_goa-card__OjjJX a:focus {\n  outline: 3px solid var(--color-orange);\n  outline-offset: 0;\n}\n.card-module_goa-card__OjjJX h6 {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  font-weight: var(--fw-base);\n  color: var(--color-gray);\n  margin: 0;\n  padding: 0;\n}\n\n.card-module_goa-card--tertiary__1BV7k {\n  border-radius: var(--border-radius-sm);\n}\n\n.card-module_goa-card-top__RM4IA {\n  border-top-left-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  min-height: 0.5rem;\n}\n\n.card-module_goa-card-top--primary__g2XEU {\n  background-color: var(--color-tealblue-500);\n}\n\n.card-module_goa-card-top--secondary__mSrLl {\n  background-color: var(--color-gray-200);\n}\n\n.card-module_goa-card-top--tertiary__2fG-A {\n  display: none;\n}\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n  min-height: 0.2rem;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n  margin-top: 0;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n  font-size: var(--fs-lg);\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n  margin-top: 1rem;\n}\n\n.card-module_goa-card-content__3gE5R {\n  padding: var(--card-spacing);\n  border-top-width: 0;\n  border: 1px solid var(--color-gray-200);\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius);\n}\n\n.card-module_goa-card-content--tertiary__1dbYr {\n  border-radius: var(--border-radius-sm);\n  padding: calc(var(--card-spacing) / 2);\n}\n\n.card-module_goa-card-details__4KtfS ul {\n  margin-left: var(--card-spacing);\n}";
+    var css = {"goa-card":"card-module_goa-card__OjjJX","goa-card--tertiary":"card-module_goa-card--tertiary__1BV7k","goa-card-top":"card-module_goa-card-top__RM4IA","goa-card-top--primary":"card-module_goa-card-top--primary__g2XEU","goa-card-top--secondary":"card-module_goa-card-top--secondary__mSrLl","goa-card-top--tertiary":"card-module_goa-card-top--tertiary__2fG-A","goa-card-details":"card-module_goa-card-details__4KtfS","goa-card-content":"card-module_goa-card-content__3gE5R","goa-card-content--tertiary":"card-module_goa-card-content--tertiary__1dbYr"};
+    styleInject(css_248z$7);
+
+    var GoACard = function GoACard(_a) {
+      var title = _a.title,
+          children = _a.children,
+          _b = _a.type,
+          type = _b === void 0 ? 'primary' : _b,
+          _c = _a.minWidth,
+          minWidth = _c === void 0 ? 'auto' : _c,
+          _d = _a.maxWidth,
+          maxWidth = _d === void 0 ? 'auto' : _d,
+          other = __rest(_a, ["title", "children", "type", "minWidth", "maxWidth"]);
+
+      var dataProps = Object.entries(other).filter(function (item) {
+        return item[0].startsWith('data-');
+      }).reduce(function (previous, current) {
+        var _a;
+
+        return __assign(__assign({}, previous), (_a = {}, _a[current[0]] = current[1], _a));
+      }, {});
+      return jsxRuntime.jsxs("div", __assign({}, dataProps, {
+        className: classnames__default["default"](css['goa-card'], css["goa-card--" + type]),
+        "data-testid": 'card-container',
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        }
+      }, {
+        children: [jsxRuntime.jsx("div", {
+          className: classnames__default["default"](css['goa-card-top'], css["goa-card-top--" + type])
+        }, void 0), jsxRuntime.jsxs("div", __assign({
+          className: classnames__default["default"](css['goa-card-content'], css["goa-card-content--" + type])
+        }, {
+          children: [title && jsxRuntime.jsx("h3", __assign({
+            className: css['goa-card-title']
+          }, {
+            children: title
+          }), void 0), jsxRuntime.jsx("div", __assign({
+            className: css['goa-card-details'],
+            "data-testid": 'card-content'
+          }, {
+            children: children
+          }), void 0)]
+        }), void 0)]
+      }), void 0);
+    };
 
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var css_248z$6 = ".goa-flex-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: top;\n  margin-bottom: 1.5rem;\n}\n.goa-flex-row *:last-child {\n  margin-bottom: 0;\n}\n\n.goa-flex-row > * {\n  flex: 1 1 30ch;\n}";
+    styleInject(css_248z$6);
+
+    var GoAFlexRow = function GoAFlexRow(_a) {
+      var gap = _a.gap,
+          minWidth = _a.minWidth,
+          children = _a.children;
+      var style = {
+        gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
+      };
+
+      var getChildren = function getChildren() {
+        return React__default["default"].Children.map(children, function (child) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            style: __assign({
+              flexBasis: minWidth
+            }, child.props.style)
+          });
+        });
+      };
+
+      return jsxRuntime.jsx("div", __assign({
+        className: "goa-flex-row",
+        style: style
+      }, {
+        children: getChildren()
+      }), void 0);
+    };
 
-    var key, i;
+    var GoAFormItem = function GoAFormItem(_a) {
+      var children = _a.children,
+          helpText = _a.helpText,
+          error = _a.error;
+      var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
+      return jsxRuntime.jsxs("div", __assign({
+        className: className
+      }, {
+        children: [children, error && jsxRuntime.jsx("div", __assign({
+          className: "error-msg"
+        }, {
+          children: error
+        }), void 0), helpText && jsxRuntime.jsx("div", __assign({
+          id: "helpText",
+          className: "help-msg"
+        }, {
+          children: helpText
+        }), void 0)]
+      }), void 0);
+    };
 
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    var GoAFormActions = function GoAFormActions(_a) {
+      var _b = _a.alignment,
+          alignment = _b === void 0 ? 'left' : _b,
+          children = _a.children;
+      return jsxRuntime.jsx("div", __assign({
+        className: "goa-form-actions goa-form-actions--" + alignment
+      }, {
+        children: children
+      }), void 0);
+    };
 
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
+    var css_248z$5 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n.goa-form {\n  box-sizing: border-box;\n}\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n  box-sizing: inherit;\n}\n\n.goa-form-row {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n@media screen and (min-width: 640px) {\n  .goa-form-row {\n    gap: 1.75rem;\n    flex-direction: row;\n  }\n}\n.goa-form-item {\n  flex: 1 1 auto;\n  margin-bottom: 1rem;\n}\n.goa-form-item label {\n  display: block;\n  font-weight: bold;\n  color: #333;\n  font-size: var(--fs-base);\n  line-height: calc(var(--fs-base) + 1rem);\n}\n.goa-form-item label em {\n  color: var(--color-gray-700);\n  font-weight: var(--fw-regular);\n  font-size: var(--fs-sm);\n}\n.goa-form-item input,\n.goa-form-item textarea {\n  display: block;\n  width: 100%;\n  font-size: var(--fs-base);\n}\n.goa-form-item.goa-state--error .error-msg {\n  font-size: var(--fs-sm);\n  line-height: calc(var(--fs-sm) + 0.5rem);\n  color: var(--color-red);\n}\n\n.help-msg {\n  font-size: var(--fs-sm);\n  color: var(--color-gray-900);\n  line-height: calc(var(--fs-sm) + 0.5rem);\n}\n\n.goa-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 2rem;\n}\n.goa-form-actions button,\n.goa-form-actions .goa-link-button {\n  margin: 0;\n}\n@media (max-width: 639px) {\n  .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n    width: 100%;\n  }\n  .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n    margin-top: 0.5rem;\n  }\n}\n@media (min-width: 640px) {\n  .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n    min-width: 6rem;\n  }\n  .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n    margin-left: 0.5rem;\n  }\n}\n\n.goa-form-actions--left {\n  justify-content: flex-start;\n}\n\n.goa-form-actions--right {\n  justify-content: flex-end;\n}";
+    styleInject(css_248z$5);
 
-    return target;
-  }
+    var GoAForm = function GoAForm(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("div", __assign({
+        className: "goa-form"
+      }, {
+        children: children
+      }), void 0);
+    };
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
+    var css_248z$4 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-input {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: flex;\n  align-content: center;\n  line-height: var(--input-height);\n  height: var(--input-height);\n}\n.goa-input:hover {\n  border-color: var(--color-blue-600);\n}\n.goa-input:active, .goa-input:focus, .goa-input:focus-within {\n  box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-input:disabled {\n  border-color: var(--color-gray-500);\n}\n.goa-input:disabled:hover {\n  border-color: var(--color-gray-500);\n}\n.goa-input:disabled:focus {\n  box-shadow: none;\n}\n\n.goa-input-leading-icon {\n  display: flex;\n  align-items: center;\n}\n\n.goa-input-leading-icon ~ input {\n  padding-left: 0.25rem;\n}\n\n.goa-input-trailing-icon {\n  display: flex;\n  align-items: center;\n}\n\n.goa-input-trailing-icon > .goa-icon-button {\n  margin-right: -0.5rem;\n}\n\ninput.input--goa {\n  display: block;\n  border: none;\n  flex: 1 1 auto;\n}\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n  display: block;\n  width: 100%;\n  outline: none;\n  border: none;\n}\n\n.goa-input--disabled {\n  opacity: 0.5;\n  cursor: default;\n  border-color: var(--color-black);\n}\n.goa-input--disabled:hover, .goa-input--disabled:active, .goa-input--disabled:focus {\n  border-color: var(--color-black);\n  cursor: default;\n  box-shadow: none;\n}\n.goa-input--disabled input:hover {\n  cursor: default !important;\n}\n\n.goa-input .input--bare {\n  border: none;\n}\n\n.goa-state--error .goa-input {\n  border: 2px solid var(--color-red);\n}";
+    styleInject(css_248z$4);
+
+    var GoAInput = function GoAInput(_a) {
+      var _b;
+
+      var name = _a.name,
+          onTrailingIconClick = _a.onTrailingIconClick,
+          onChange = _a.onChange,
+          leadingIcon = _a.leadingIcon,
+          trailingIcon = _a.trailingIcon,
+          _c = _a.variant,
+          variant = _c === void 0 ? 'goa' : _c,
+          focused = _a.focused,
+          disabled = _a.disabled,
+          readonly = _a.readonly,
+          other = __rest(_a, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
+
+      var inputRef = React__default["default"].useRef(null);
+      React.useEffect(function () {
+        var _a, _b;
+
+        if (focused) {
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        } else {
+          (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        }
+      }, [focused, inputRef]);
+      var rootCss = classnames__default["default"]({
+        'goa-input': true,
+        'goa-input--disabled': disabled
+      });
+      return jsxRuntime.jsxs("div", __assign({
+        className: rootCss
+      }, {
+        children: [leadingIcon && jsxRuntime.jsx("div", __assign({
+          className: "goa-input-leading-icon"
+        }, {
+          children: jsxRuntime.jsx(GoAIcon, {
+            type: leadingIcon
+          }, void 0)
+        }), void 0), jsxRuntime.jsx("input", __assign({
+          ref: inputRef,
+          className: classnames__default["default"]((_b = {}, _b["input--" + variant] = true, _b['input--leading-icon'] = leadingIcon, _b)),
+          readOnly: readonly,
+          disabled: disabled,
+          onChange: function (e) {
+            return onChange(name, e.target.value);
+          }
+        }, other), void 0), trailingIcon && !onTrailingIconClick && jsxRuntime.jsx("div", __assign({
+          className: "goa-input-trailing-icon"
+        }, {
+          children: jsxRuntime.jsx(GoAIcon, {
+            size: "medium",
+            type: trailingIcon
+          }, void 0)
+        }), void 0), trailingIcon && onTrailingIconClick && jsxRuntime.jsx("div", __assign({
+          onClick: onTrailingIconClick,
+          className: "goa-input-trailing-icon"
+        }, {
+          children: jsxRuntime.jsx(GoAIconButton, {
+            variant: "tertiary",
+            onClick: onTrailingIconClick,
+            disabled: disabled,
+            size: "medium",
+            type: trailingIcon,
+            testId: name + "-input-trailing-button"
+          }, void 0)
+        }), void 0)]
+      }), void 0);
+    };
+    var GoAInputText = function GoAInputText(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "text"
+      }), void 0);
+    };
+    var GoAInputPassword = function GoAInputPassword(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "password"
+      }), void 0);
+    };
+    var GoAInputDate = function GoAInputDate(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "date",
+        trailingIcon: "calendar"
+      }), void 0);
+    };
+    var GoAInputTime = function GoAInputTime(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "time"
+      }), void 0);
+    };
+    var GoAInputDateTime = function GoAInputDateTime(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "datetime-local",
+        trailingIcon: "calendar"
+      }), void 0);
+    };
+    var GoAInputEmail = function GoAInputEmail(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "email"
+      }), void 0);
+    };
+    var GoAInputSearch = function GoAInputSearch(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "text",
+        trailingIcon: "search"
+      }), void 0);
+    };
+    var GoAInputUrl = function GoAInputUrl(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "url"
+      }), void 0);
+    };
+    var GoAInputTel = function GoAInputTel(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "tel"
+      }), void 0);
+    };
+    var GoAInputFile = function GoAInputFile(props) {
+      return jsxRuntime.jsx("input", {
+        id: props.id,
+        name: props.name,
+        type: "file",
+        onChange: function (e) {
+          return props.onChange(e.target.name, e.target.value);
+        },
+        style: {
+          backgroundColor: 'revert'
+        }
+      }, void 0);
+    };
+    var GoAInputMonth = function GoAInputMonth(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "month",
+        trailingIcon: "calendar"
+      }), void 0);
+    };
+    var GoAInputNumber = function GoAInputNumber(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "number"
+      }), void 0);
+    };
+    var GoAInputRange = function GoAInputRange(_a) {
+      _a.step;
+          var props = __rest(_a, ["step"]);
+
+      return jsxRuntime.jsx("input", __assign({}, props, {
+        type: "range",
+        onChange: function (e) {
+          return props.onChange(e.target.name, e.target.value);
+        }
+      }), void 0);
+    };
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
+    var css_248z$3 = ".goa-scrollable {\n  scroll-behavior: smooth;\n}\n\n.goa-scrollable::-webkit-scrollbar {\n  width: 6px;\n}\n\n.goa-scrollable::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n  background: #888;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}";
+    styleInject(css_248z$3);
+
+    var GoAScrollable = function GoAScrollable(_a) {
+      var vertical = _a.vertical,
+          horizontal = _a.horizontal,
+          hPadding = _a.hPadding,
+          vPadding = _a.vPadding,
+          height = _a.height,
+          children = _a.children,
+          testId = _a.testId;
+      var style = {
+        overflowY: vertical ? 'auto' : 'hidden',
+        overflowX: horizontal ? 'auto' : 'hidden',
+        maxHeight: height !== null && height !== void 0 ? height : '100%',
+        padding: (vPadding !== null && vPadding !== void 0 ? vPadding : 0) + "rem " + (hPadding !== null && hPadding !== void 0 ? hPadding : 0) + "rem"
+      };
+      return jsxRuntime.jsx("div", __assign({
+        className: 'goa-scrollable',
+        style: style,
+        "data-testid": testId
+      }, {
+        children: children
+      }), void 0);
+    };
 
-  function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
+    var css_248z$2 = "/* Fade in */\n.fade-in-init {\n  display: none;\n}\n\n.fade-in-start {\n  display: block;\n  opacity: 0;\n  transition: opacity 200ms ease-in;\n}\n\n.fade-in-active {\n  opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n  display: block;\n}\n\n.fade-out-start {\n  display: block;\n  opacity: 1;\n  transition: opacity 200ms ease-in;\n}\n\n.fade-out-active {\n  opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n  transition: translateY(0);\n  display: none;\n}\n\n.slide-in-up-start {\n  display: block;\n  transform: translateY(100vh);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-up-active {\n  transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n  transform: translateY(0);\n  display: block;\n}\n\n.slide-out-up-start {\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-up-active {\n  transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n  transition: translateY(0);\n  display: none;\n}\n\n.slide-in-down-start {\n  display: block;\n  transform: translateY(-100vh);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-down-active {\n  transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n  transform: translateY(0);\n  display: block;\n}\n\n.slide-out-down-start {\n  transform: translateY(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-down-active {\n  transform: translateY(100vh);\n}\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n  transition: translateX(0);\n  display: none;\n}\n\n.slide-in-left-start {\n  display: block;\n  transform: translateX(-100vw);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-left-active {\n  transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n  transform: translateX(0);\n  display: block;\n}\n\n.slide-out-left-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-left-active {\n  transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n  transition: translateX(0);\n  display: none;\n}\n\n.slide-in-right-start {\n  display: block;\n  transform: translateX(100vw);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-right-active {\n  transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n  transform: translateX(0);\n  display: block;\n}\n\n.slide-out-right-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-right-active {\n  transform: translateX(100vw);\n}";
+    styleInject(css_248z$2);
+
+    var GoATransition = function GoATransition(_a) {
+      var name = _a.name,
+          active = _a.active,
+          onComplete = _a.onComplete,
+          children = _a.children;
+
+      var _b = React.useState('init'),
+          state = _b[0],
+          setState = _b[1];
+
+      React.useEffect(function () {
+        if (active) {
+          setState('start');
+          setTimeout(function () {
+            return setState('active');
+          }, 100);
+          setTimeout(function () {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+          }, 500);
+        } else {
+          setState('init');
+        }
+      }, [active]); // `onComplete` in the dependencies results in an animation stutter
 
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
+      function getCss() {
+        switch (state) {
+          case 'init':
+            return name + "-init";
 
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
+          case 'start':
+            return name + "-start";
 
-    return _arr;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  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.");
-  }
-
-  var css_248z$2 = ".button-module_goa-button__fikCc {\n  border-radius: 0.25rem;\n  border: 2px solid var(--color-blue-500);\n  box-sizing: border-box;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em;\n  padding: 0 0.75rem;\n  transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n  transform: scale(1); }\n  .button-module_goa-button__fikCc:disabled {\n    pointer-events: none;\n    color: var(--color-gray-700);\n    background-color: var(--color-gray-100);\n    border-color: var(--color-gray-100); }\n  .button-module_goa-button__fikCc:active {\n    transform: scale(0.98); }\n\n.button-module_goa-button--primary__2V_nV {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-blue-500);\n  color: var(--color-white); }\n  .button-module_goa-button--primary__2V_nV:hover {\n    border-color: var(--color-blue-600);\n    background: var(--color-blue-600); }\n  .button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n    border-color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    background: var(--color-blue-600);\n    outline: none; }\n\n.button-module_goa-button--secondary__3_OjG {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--secondary__3_OjG:hover {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600); }\n  .button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--tertiary__3mvRP {\n  border-color: var(--color-gray-200);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--tertiary__3mvRP:hover {\n    color: var(--color-blue-600); }\n  .button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--borderless__2PWz1 {\n  background: none;\n  color: var(--color-blue-500);\n  border: none; }\n  .button-module_goa-button--borderless__2PWz1:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-blue-500); }\n  .button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n    outline: none;\n    box-shadow: none;\n    background-color: var(--color-blue-100); }\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n  color: var(--color-white);\n  background: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-gray-200); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n\n.button-module_goa-button--large__1iRt7 {\n  font-size: var(--fs-lg);\n  line-height: 3rem; }\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(3rem + 4px); }\n\n.button-module_goa-button--medium__1xeCJ {\n  font-size: var(--fs-base);\n  line-height: 2.375rem; }\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(2.375rem + 4px); }\n\n.button-module_goa-button--small__1sl63 {\n  font-size: var(--fs-sm);\n  line-height: 1.75rem; }\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(1.75rem + 4px); }\n\n.button-module_goa-button__fikCc {\n  min-width: 100%; }\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n  margin: 0;\n  margin-top: 0.5rem; }\n\n@media (min-width: 480px) {\n  .button-module_goa-button__fikCc {\n    min-width: 4rem; }\n  .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n    margin: 0;\n    margin-left: 0.5rem; } }\n";
-  var styles$1 = {"goa-button":"button-module_goa-button__fikCc","goa-button--primary":"button-module_goa-button--primary__2V_nV","goa-button--secondary":"button-module_goa-button--secondary__3_OjG","goa-button--tertiary":"button-module_goa-button--tertiary__3mvRP","goa-button--borderless":"button-module_goa-button--borderless__2PWz1","goa-button--danger":"button-module_goa-button--danger__2jXqa","goa-button--large":"button-module_goa-button--large__1iRt7","goa-button--medium":"button-module_goa-button--medium__1xeCJ","goa-button--small":"button-module_goa-button--small__1sl63"};
-  styleInject(css_248z$2);
-
-  var GoAButton = function GoAButton(_ref) {
-    var _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'primary' : _ref$type,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 'medium' : _ref$size,
-        _ref$variant = _ref.variant,
-        variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-        title = _ref.title,
-        children = _ref.children,
-        onClick = _ref.onClick,
-        props = _objectWithoutProperties(_ref, ["type", "size", "variant", "title", "children", "onClick"]);
-
-    var css = [styles$1["goa-button--".concat(type)], styles$1["goa-button--".concat(size)], styles$1["goa-button--".concat(variant)], styles$1['goa-button']].join(' ');
-    var buttonRef = React.useRef();
-    return /*#__PURE__*/React__default.createElement("button", Object.assign({
-      className: css,
-      ref: buttonRef,
-      title: title,
-      onClick: onClick
-    }, props), children);
-  };
-
-  var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n  display: flex;\n  justify-content: center;\n  background-color: #dcdcdc; }\n  .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n    display: flex;\n    flex: 1 1 auto;\n    margin: 0 24px;\n    max-width: 1200px; }\n    @media (min-width: 768px) {\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n        margin: 0 72px; } }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n      display: flex;\n      flex: 1 1 auto;\n      justify-content: center;\n      padding-left: 20px; }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n      margin-left: auto;\n      width: 20px;\n      text-align: right;\n      font-weight: bold;\n      font-size: small;\n      align-self: center;\n      cursor: pointer;\n      display: flex; }\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n        color: #0070c4; }\n";
-  var styles$2 = {"goa-app-version-header":"app-version-header-module_goa-app-version-header__3ngyf","content-wrapper":"app-version-header-module_content-wrapper__15exd","environment-and-version":"app-version-header-module_environment-and-version__1-GPd","close":"app-version-header-module_close__1beXI"};
-  styleInject(css_248z$3);
-
-  var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
-    var isProdEnvironment = _ref.isProdEnvironment,
-        environment = _ref.environment,
-        version = _ref.version;
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        closed = _useState2[0],
-        setClosed = _useState2[1];
-
-    if (closed || isProdEnvironment) return null;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$2['goa-app-version-header'])
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['content-wrapper']),
-      "data-testid": "content-wrapper"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['environment-and-version'])
-    }, environment, " ", version), /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['close']),
-      "data-testid": "close",
-      onClick: function onClick() {
-        return setClosed(true);
+          case 'active':
+            return name + "-start " + name + "-active";
+        }
       }
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "close"
-    }))));
-  };
-
-  var css_248z$4 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n  margin-top: 0; }\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n  margin-bottom: 1rem; }\n\n/* Font sizes */\nh1 {\n  font-size: var(--fs-3xl);\n  line-height: var(--lh-2xl);\n  font-weight: var(--fw-bold); }\n\nh2 {\n  font-size: var(--fs-2xl);\n  line-height: var(--lh-xl);\n  font-weight: var(--fw-regular); }\n\nh3 {\n  font-size: var(--fs-xl);\n  line-height: var(--lh-lg);\n  font-weight: var(--fw-regular); }\n\nh4,\nh5,\nh6 {\n  font-size: var(--fs-base);\n  line-height: var(--lh-base);\n  font-weight: var(--fw-bold); }\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n  margin-top: 2rem; }\n\np {\n  margin-bottom: 1rem;\n  font-size: var(--fs-base); }\n\nhr + h1,\nhr + h2,\nhr + h3 {\n  margin-top: 0; }\n\nem {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  color: var(--color-gray); }\n\nsmall {\n  font-size: var(--fs-xs);\n  font-style: normal;\n  color: var(--color-gray); }\n\n.card-module_goa-card__OjjJX {\n  --card-spacing: 1rem;\n  --card-child-spacing: 0.5rem;\n  box-sizing: border-box;\n  background: var(--color-white);\n  transition: opacity 300ms ease-in-out;\n  border-radius: var(--border-radius); }\n  .card-module_goa-card__OjjJX a:hover {\n    color: var(--color-blue-600);\n    text-decoration: none; }\n  .card-module_goa-card__OjjJX a:focus {\n    outline: 3px solid var(--color-orange);\n    outline-offset: 0; }\n  .card-module_goa-card__OjjJX h6 {\n    font-size: var(--fs-xs);\n    line-height: var(--lh-sm);\n    font-weight: var(--fw-base);\n    color: var(--color-gray);\n    margin: 0;\n    padding: 0; }\n\n.card-module_goa-card--tertiary__1BV7k {\n  border-radius: var(--border-radius-sm); }\n\n.card-module_goa-card-top__RM4IA {\n  border-top-left-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  min-height: 0.5rem; }\n\n.card-module_goa-card-top--primary__g2XEU {\n  background-color: var(--color-tealblue-500); }\n\n.card-module_goa-card-top--secondary__mSrLl {\n  background-color: var(--color-gray-200); }\n\n.card-module_goa-card-top--tertiary__2fG-A {\n  display: none; }\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n  min-height: 0.2rem; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n  margin-top: 0; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n  font-size: var(--fs-lg); }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n  margin-top: 1rem; }\n\n.card-module_goa-card-content__3gE5R {\n  padding: var(--card-spacing);\n  border-top-width: 0;\n  border: 1px solid var(--color-gray-200);\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius); }\n\n.card-module_goa-card-content--tertiary__1dbYr {\n  border-radius: var(--border-radius-sm);\n  padding: calc(var(--card-spacing) / 2); }\n\n.card-module_goa-card-details__4KtfS ul {\n  margin-left: var(--card-spacing); }\n";
-  var css = {"goa-card":"card-module_goa-card__OjjJX","goa-card--tertiary":"card-module_goa-card--tertiary__1BV7k","goa-card-top":"card-module_goa-card-top__RM4IA","goa-card-top--primary":"card-module_goa-card-top--primary__g2XEU","goa-card-top--secondary":"card-module_goa-card-top--secondary__mSrLl","goa-card-top--tertiary":"card-module_goa-card-top--tertiary__2fG-A","goa-card-details":"card-module_goa-card-details__4KtfS","goa-card-content":"card-module_goa-card-content__3gE5R","goa-card-content--tertiary":"card-module_goa-card-content--tertiary__1dbYr"};
-  styleInject(css_248z$4);
-
-  var GoACard = function GoACard(_ref) {
-    var title = _ref.title,
-        children = _ref.children,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'primary' : _ref$type,
-        _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", "children", "type", "minWidth", "maxWidth"]);
-
-    var dataProps = Object.entries(other).filter(function (item) {
-      return item[0].startsWith('data-');
-    }).reduce(function (previous, current) {
-      return _objectSpread2(_objectSpread2({}, previous), {}, _defineProperty({}, current[0], current[1]));
-    }, {});
-    return /*#__PURE__*/React__default.createElement("div", Object.assign({}, dataProps, {
-      className: classnames(css['goa-card'], css["goa-card--".concat(type)]),
-      "data-testid": "card-container",
-      style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth
+
+      return jsxRuntime.jsx("div", __assign({
+        className: getCss()
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var GoATransitionSequence = function GoATransitionSequence(props) {
+      function createTransition(props, children) {
+        return jsxRuntime.jsx(GoATransition, __assign({}, props, {
+          children: children
+        }), void 0);
       }
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(css['goa-card-top'], css["goa-card-top--".concat(type)])
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(css['goa-card-content'], css["goa-card-content--".concat(type)])
-    }, title && /*#__PURE__*/React__default.createElement("h3", {
-      className: css['goa-card-title']
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: css['goa-card-details'],
-      "data-testid": "card-content"
-    }, children)));
-  };
-
-  var css_248z$5 = ".goa-flex-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: top;\n  margin-bottom: 1.5rem; }\n  .goa-flex-row *:last-child {\n    margin-bottom: 0; }\n\n.goa-flex-row > * {\n  flex: 1 1 30ch; }\n";
-  styleInject(css_248z$5);
-
-  var GoAFlexRow = function GoAFlexRow(_ref) {
-    var gap = _ref.gap,
-        minWidth = _ref.minWidth,
-        children = _ref.children;
-    var style = {
-      gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-    };
-
-    var getChildren = function getChildren() {
-      return React__default.Children.map(children, function (child) {
-        return React__default.cloneElement(child, {
-          style: _objectSpread2({
-            flexBasis: minWidth
-          }, child.props.style)
+
+      return props.transitions // create components for the transitions
+      .map(function (state, index) {
+        return createTransition({
+          active: props.transitionIndex % (props.transitions.length + 1) > index,
+          name: state,
+          onComplete: function () {
+            return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
+          }
         });
-      });
+      }) // on `reduce` we need to start with the innermost child
+      .reverse() // create parent/child relationship between components
+      .reduce(function (child, parent) {
+        if (!child) {
+          // the original children (user defined content to be transitioned)
+          return /*#__PURE__*/React__default["default"].cloneElement(parent, {
+            children: props.children
+          });
+        }
+
+        return /*#__PURE__*/React__default["default"].cloneElement(parent, {
+          children: child
+        });
+      }, null);
     };
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-flex-row",
-      style: style
-    }, getChildren());
-  };
-
-  var GoAFormItem = function GoAFormItem(_ref) {
-    var children = _ref.children,
-        helpText = _ref.helpText,
-        error = _ref.error;
-    var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className
-    }, children, error && /*#__PURE__*/React__default.createElement("div", {
-      className: "error-msg"
-    }, error), helpText && /*#__PURE__*/React__default.createElement("div", {
-      id: "helpText",
-      className: "help-msg"
-    }, helpText));
-  };
-
-  var GoAFormActions = function GoAFormActions(_ref) {
-    var _ref$alignment = _ref.alignment,
-        alignment = _ref$alignment === void 0 ? 'left' : _ref$alignment,
-        children = _ref.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-actions goa-form-actions--".concat(alignment)
-    }, children);
-  };
-
-  var css_248z$6 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n.goa-form {\n  box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n  box-sizing: inherit; }\n\n.goa-form-row {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n  .goa-form-row {\n    gap: 1.75rem;\n    flex-direction: row; } }\n\n.goa-form-item {\n  flex: 1 1 auto;\n  margin-bottom: 1rem; }\n  .goa-form-item label {\n    display: block;\n    font-weight: bold;\n    color: #333;\n    font-size: var(--fs-base);\n    line-height: calc(var(--fs-base) + 1rem); }\n    .goa-form-item label em {\n      color: var(--color-gray-700);\n      font-weight: var(--fw-regular);\n      font-size: var(--fs-sm); }\n  .goa-form-item input,\n  .goa-form-item textarea {\n    display: block;\n    width: 100%;\n    font-size: var(--fs-base); }\n  .goa-form-item.goa-state--error .error-msg {\n    font-size: var(--fs-sm);\n    line-height: calc(var(--fs-sm) + 0.5rem);\n    color: var(--color-red); }\n\n.help-msg {\n  font-size: var(--fs-sm);\n  color: var(--color-gray-900);\n  line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 2rem; }\n  .goa-form-actions button,\n  .goa-form-actions .goa-link-button {\n    margin: 0; }\n  @media (max-width: 639px) {\n    .goa-form-actions button,\n    .goa-form-actions .goa-link-button {\n      width: 100%; }\n    .goa-form-actions button + button,\n    .goa-form-actions button + .goa-link-button,\n    .goa-form-actions .goa-link-button + button,\n    .goa-form-actions .goa-link-button + .goa-link-button {\n      margin-top: 0.5rem; } }\n  @media (min-width: 640px) {\n    .goa-form-actions button,\n    .goa-form-actions .goa-link-button {\n      min-width: 6rem; }\n    .goa-form-actions button + button,\n    .goa-form-actions button + .goa-link-button,\n    .goa-form-actions .goa-link-button + button,\n    .goa-form-actions .goa-link-button + .goa-link-button {\n      margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n  justify-content: flex-start; }\n\n.goa-form-actions--right {\n  justify-content: flex-end; }\n";
-  styleInject(css_248z$6);
-
-  var GoAForm = function GoAForm(_ref) {
-    var children = _ref.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form"
-    }, children);
-  };
-
-  var css_248z$7 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n/* Forms */\n.goa-input {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  line-height: 42px;\n  height: 42px;\n  padding: 0 var(--input-padding);\n  font-size: var(--input-font-size);\n  display: flex;\n  align-content: center; }\n  .goa-input:hover {\n    border-color: var(--color-blue-600); }\n  .goa-input:active, .goa-input:focus, .goa-input:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange); }\n  .goa-input:disabled {\n    border-color: var(--color-gray-500); }\n    .goa-input:disabled:hover {\n      border-color: var(--color-gray-500); }\n    .goa-input:disabled:focus {\n      box-shadow: none; }\n\n.goa-input-leading-icon {\n  display: flex;\n  align-items: center; }\n\n.goa-input-leading-icon ~ input {\n  padding-left: 0.25rem; }\n\n.goa-input-trailing-icon {\n  display: flex;\n  align-items: center; }\n\n.goa-input-trailing-icon > .goa-icon-button {\n  margin-right: -0.5rem; }\n\ninput.input--goa {\n  display: block;\n  border: none;\n  flex: 1 1 auto; }\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n  display: none; }\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n  display: block;\n  width: 100%;\n  outline: none;\n  border: none; }\n\n.goa-input .input--bare {\n  border: none; }\n\n.goa-state--error .goa-input input {\n  border: 2px solid var(--color-red); }\n";
-  styleInject(css_248z$7);
-
-  var GoAInput = function GoAInput(_ref) {
-    var _classNames;
-
-    var name = _ref.name,
-        onTrailingIconClick = _ref.onTrailingIconClick,
-        _onChange = _ref.onChange,
-        leadingIcon = _ref.leadingIcon,
-        trailingIcon = _ref.trailingIcon,
-        _ref$variant = _ref.variant,
-        variant = _ref$variant === void 0 ? 'goa' : _ref$variant,
-        focused = _ref.focused,
-        other = _objectWithoutProperties(_ref, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused"]);
-
-    var inputRef = React__default.useRef(null);
-    React.useEffect(function () {
-      if (focused) {
-        var _inputRef$current;
-
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      } else {
-        var _inputRef$current2;
+    var css_248z$1 = "/* Root ============================================================================== */\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  --modal-spacing: 1.75rem;\n  --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n.modal {\n  position: relative;\n  background: #fff;\n  z-index: 1002;\n  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n  .modal {\n    width: 90%;\n    max-height: 90%;\n  }\n}\n@media (min-width: 640px) {\n  .modal {\n    margin: 1rem;\n    max-height: 80%;\n    min-width: 60ch;\n  }\n}\n/* Modal Container =========================================================================== */\n.modal-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n  text-align: right;\n  margin: var(--modal-spacing);\n  flex: 0 0 auto;\n}\n\n.modal-actions button {\n  min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem;\n  }\n\n  .modal-actions button {\n    display: block;\n    width: 100%;\n  }\n}\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0;\n  }\n\n  .modal-actions > button + button {\n    margin-left: 0.5rem;\n  }\n}\n/* Modal Title ============================================================================ */\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem var(--modal-spacing);\n  margin-right: 40px;\n  /*  close icon spacing */\n  flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n.modal-background {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}";
+    styleInject(css_248z$1);
+
+    var TRANSITION_INIT = 0;
+    var TRANSITION_VISIBLE = 1;
+    var TRANSITION_HIDDEN = 2;
+    var GoAModal = function GoAModal(_a) {
+      var children = _a.children,
+          isOpen = _a.isOpen,
+          onClose = _a.onClose,
+          testId = _a.testId,
+          backgroundTestId = _a.backgroundTestId;
+
+      var _b = React.useState(TRANSITION_INIT),
+          transitionIndex = _b[0],
+          setTransitionIndex = _b[1];
+
+      React.useEffect(function () {
+        if (isOpen) {
+          show();
+        } else if (transitionIndex !== 0) {
+          // don't hide() on the when in the init state
+          hide();
+          return;
+        }
 
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-      }
-    }, [focused, inputRef]);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-input"
-    }, leadingIcon && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-input-leading-icon"
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: leadingIcon
-    })), /*#__PURE__*/React__default.createElement("input", Object.assign({
-      ref: inputRef,
-      className: classnames((_classNames = {}, _defineProperty(_classNames, "input--".concat(variant), true), _defineProperty(_classNames, 'input--leading-icon', leadingIcon), _classNames)),
-      onChange: function onChange(e) {
-        return _onChange(name, e.target.value);
-      }
-    }, other)), trailingIcon && /*#__PURE__*/React__default.createElement("div", {
-      onClick: function onClick() {
-        return onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
-      },
-      className: "goa-input-trailing-icon"
-    }, !onTrailingIconClick && /*#__PURE__*/React__default.createElement(GoAIcon, {
-      size: "medium",
-      type: trailingIcon
-    }), onTrailingIconClick && /*#__PURE__*/React__default.createElement(GoAIconButton, {
-      variant: "tertiary",
-      onClick: function onClick() {
-        return onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
-      },
-      size: "medium",
-      type: trailingIcon,
-      testId: "".concat(name, "-input-trailing-button")
-    })));
-  };
-  var GoAInputText = function GoAInputText(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "text"
-    }));
-  };
-  var GoAInputPassword = function GoAInputPassword(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "password"
-    }));
-  };
-  var GoAInputDate = function GoAInputDate(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "date",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputTime = function GoAInputTime(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "time"
-    }));
-  };
-  var GoAInputDateTime = function GoAInputDateTime(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "datetime-local",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputEmail = function GoAInputEmail(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "email"
-    }));
-  };
-  var GoAInputSearch = function GoAInputSearch(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "text",
-      trailingIcon: "search"
-    }));
-  };
-  var GoAInputUrl = function GoAInputUrl(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "url"
-    }));
-  };
-  var GoAInputTel = function GoAInputTel(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "tel"
-    }));
-  };
-  var GoAInputFile = function GoAInputFile(props) {
-    return /*#__PURE__*/React__default.createElement("input", {
-      id: props.id,
-      name: props.name,
-      type: "file",
-      onChange: function onChange(e) {
-        return props.onChange(e.target.name, e.target.value);
-      },
-      style: {
-        backgroundColor: 'revert'
-      }
-    });
-  };
-  var GoAInputMonth = function GoAInputMonth(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "month",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputNumber = function GoAInputNumber(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "number"
-    }));
-  };
-  var GoAInputRange = function GoAInputRange(_ref2) {
-    var _ref2$step = _ref2.step,
-        step = _ref2$step === void 0 ? 1 : _ref2$step,
-        props = _objectWithoutProperties(_ref2, ["step"]);
-
-    return /*#__PURE__*/React__default.createElement("input", {
-      id: props.id,
-      min: props.min,
-      max: props.max,
-      step: step,
-      name: props.name,
-      type: "range",
-      onChange: function onChange(e) {
-        return props.onChange(e.target.name, e.target.value);
+        if (isOpen) {
+          return hide;
+        }
+      }, [isOpen]);
+
+      function hideScrollbars() {
+        var scrollbarWidth = calculateScrollbarWidth();
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = scrollbarWidth + 'px';
       }
-    });
-  };
-
-  var css_248z$8 = ".goa-scrollable {\n  scroll-behavior: smooth; }\n\n.goa-scrollable::-webkit-scrollbar {\n  width: 6px; }\n\n.goa-scrollable::-webkit-scrollbar-track {\n  background: #f1f1f1; }\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n  background: #888; }\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n  background: #555; }\n";
-  styleInject(css_248z$8);
-
-  var GoAScrollable = function GoAScrollable(_ref) {
-    var vertical = _ref.vertical,
-        horizontal = _ref.horizontal,
-        hPadding = _ref.hPadding,
-        vPadding = _ref.vPadding,
-        height = _ref.height,
-        children = _ref.children,
-        testId = _ref.testId;
-    var style = {
-      overflowY: vertical ? 'auto' : 'hidden',
-      overflowX: horizontal ? 'auto' : 'hidden',
-      maxHeight: height !== null && height !== void 0 ? height : '100%',
-      padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
-    };
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-scrollable",
-      style: style,
-      "data-testid": testId
-    }, children);
-  };
-
-  var css_248z$9 = "/* Fade in */\n.fade-in-init {\n  display: none; }\n\n.fade-in-start {\n  display: block;\n  opacity: 0;\n  transition: opacity 200ms ease-in; }\n\n.fade-in-active {\n  opacity: 1; }\n\n/* Fade out */\n.fade-out-init {\n  display: block; }\n\n.fade-out-start {\n  display: block;\n  opacity: 1;\n  transition: opacity 200ms ease-in; }\n\n.fade-out-active {\n  opacity: 0; }\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-up-start {\n  display: block;\n  transform: translateY(100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-up-active {\n  transform: translateY(0); }\n\n/* Slide out up */\n.slide-out-up-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-up-start {\n  transition: transform 300ms ease-in; }\n\n.slide-out-up-active {\n  transform: translateY(-100vh); }\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-down-start {\n  display: block;\n  transform: translateY(-100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-down-active {\n  transform: translateY(0); }\n\n/* Slide out down */\n.slide-out-down-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-down-start {\n  transform: translateY(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-down-active {\n  transform: translateY(100vh); }\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-left-start {\n  display: block;\n  transform: translateX(-100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-left-active {\n  transform: translateX(0); }\n\n/* Slide out left */\n.slide-out-left-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-left-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-left-active {\n  transform: translateX(-100vw); }\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-right-start {\n  display: block;\n  transform: translateX(100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-right-active {\n  transform: translateX(0); }\n\n/* Slide out right */\n.slide-out-right-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-right-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-right-active {\n  transform: translateX(100vw); }\n";
-  styleInject(css_248z$9);
-
-  var GoATransition = function GoATransition(_ref) {
-    var name = _ref.name,
-        active = _ref.active,
-        onComplete = _ref.onComplete,
-        children = _ref.children;
-
-    var _useState = React.useState('init'),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    React.useEffect(function () {
-      if (active) {
-        setState('start');
-        setTimeout(function () {
-          return setState('active');
-        }, 100);
+
+      function resetScrollbars() {
+        // need to perform on the next render cycle to allow the css transitions to take place
         setTimeout(function () {
-          onComplete === null || onComplete === void 0 ? void 0 : onComplete();
-        }, 500);
-      } else {
-        setState('init');
+          document.body.style.overflow = '';
+          document.body.style.paddingRight = '0';
+        }, 300); // 300ms allows for any close animations to complete
       }
-    }, [active]); // `onComplete` in the dependencies results in an animation stutter
 
-    function getCss() {
-      switch (state) {
-        case 'init':
-          return "".concat(name, "-init");
-
-        case 'start':
-          return "".concat(name, "-start");
-
-        case 'active':
-          return "".concat(name, "-start ").concat(name, "-active");
+      function show() {
+        setTransitionIndex(TRANSITION_VISIBLE);
+        hideScrollbars();
       }
-    }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: getCss()
-    }, children);
-  };
+      function hide() {
+        setTransitionIndex(TRANSITION_HIDDEN);
+        resetScrollbars();
+      } // allows the current state to be easily determined within tests
 
-  var GoATransitionSequence = function GoATransitionSequence(props) {
-    function createTransition(props, children) {
-      return /*#__PURE__*/React__default.createElement(GoATransition, props, children);
-    }
-
-    return props.transitions // create components for the transitions
-    .map(function (state, index) {
-      return createTransition({
-        active: props.transitionIndex % (props.transitions.length + 1) > index,
-        name: state,
-        onComplete: function onComplete() {
-          return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
-        }
-      });
-    }) // on `reduce` we need to start with the innermost child
-    .reverse() // create parent/child relationship between components
-    .reduce(function (child, parent) {
-      if (!child) {
-        // the original children (user defined content to be transitioned)
-        return React__default.cloneElement(parent, {
-          children: props.children
-        });
-      }
 
-      return React__default.cloneElement(parent, {
-        children: child
-      });
-    }, null);
-  };
-
-  var css_248z$a = "/* Root ============================================================================== */\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  --modal-spacing: 1.75rem;\n  --button-min-width: 5rem; }\n\n/* Modal ============================================================================== */\n.modal {\n  position: relative;\n  background: #fff;\n  z-index: 1002;\n  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n  border-radius: 4px; }\n\n@media (max-width: 639px) {\n  .modal {\n    width: 90%;\n    max-height: 90%; } }\n\n@media (min-width: 640px) {\n  .modal {\n    margin: 1rem;\n    max-height: 80%;\n    width: 600px; } }\n\n@media (min-width: 1024px) {\n  .modal {\n    width: 65ch; } }\n\n/* Modal Container =========================================================================== */\n.modal-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%; }\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n  text-align: right;\n  margin: var(--modal-spacing);\n  flex: 0 0 auto; }\n\n.modal-actions button {\n  min-width: var(--button-min-width); }\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem; }\n  .modal-actions button {\n    display: block;\n    width: 100%; } }\n\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0; }\n  .modal-actions > button + button {\n    margin-left: 0.5rem; } }\n\n/* Modal Title ============================================================================ */\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem var(--modal-spacing);\n  margin-right: 40px;\n  /*  close icon spacing */\n  flex: 0 0 auto; }\n\n/* Modal Background ======================================================================= */\n.modal-background {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001; }\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem; }\n";
-  styleInject(css_248z$a);
-
-  /**
-   * Modal - Main Component
-   */
-
-  var TRANSITION_INIT = 0;
-  var TRANSITION_VISIBLE = 1;
-  var TRANSITION_HIDDEN = 2;
-  var GoAModal = function GoAModal(_ref) {
-    var children = _ref.children,
-        isOpen = _ref.isOpen,
-        onClose = _ref.onClose,
-        testId = _ref.testId,
-        backgroundTestId = _ref.backgroundTestId;
-
-    var _useState = React.useState(TRANSITION_INIT),
-        _useState2 = _slicedToArray(_useState, 2),
-        transitionIndex = _useState2[0],
-        setTransitionIndex = _useState2[1];
-
-    React.useEffect(function () {
-      if (isOpen) {
-        show();
-      } else if (transitionIndex !== 0) {
-        // don't hide() on the when in the init state
-        hide();
-        return;
+      function getState() {
+        return ['init', 'visible', 'hidden'][transitionIndex];
       }
 
-      if (isOpen) {
-        return hide;
+      return jsxRuntime.jsx(GoATransitionSequence, __assign({
+        transitions: ['fade-in', 'fade-out'],
+        transitionIndex: transitionIndex,
+        onTransitionComplete: function (_index, done) {
+          return done && setTransitionIndex(0);
+        }
+      }, {
+        children: jsxRuntime.jsxs("div", __assign({
+          className: "modal-root",
+          "data-testid": testId,
+          "data-state": getState()
+        }, {
+          children: [jsxRuntime.jsx(Container, __assign({
+            onClick: onClose
+          }, {
+            children: children
+          }), void 0), jsxRuntime.jsx(Background, {
+            onClick: function () {
+              return onClose === null || onClose === void 0 ? void 0 : onClose();
+            },
+            testId: backgroundTestId
+          }, void 0)]
+        }), void 0)
+      }), void 0);
+    };
+    // Public Child Components
+    // ******************************************************************************
+    // ***************
+    // GoAModalActions
+    // ***************
+
+    var GoAModalActions = function GoAModalActions(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("div", __assign({
+        className: "modal-actions"
+      }, {
+        children: children
+      }), void 0);
+    };
+    var GoAModalContent = function GoAModalContent(_a) {
+      var disableScroll = _a.disableScroll,
+          children = _a.children,
+          testId = _a.testId;
+
+      if (disableScroll) {
+        return jsxRuntime.jsx("div", __assign({
+          "data-testid": testId,
+          style: {
+            padding: "0 1.75rem"
+          }
+        }, {
+          children: children
+        }), void 0);
       }
-    }, [isOpen]);
 
-    function hideScrollbars() {
-      var scrollbarWidth = calculateScrollbarWidth();
-      document.body.style.overflow = 'hidden';
-      document.body.style.paddingRight = scrollbarWidth + 'px';
-    }
+      return jsxRuntime.jsx(GoAScrollable, __assign({
+        testId: testId,
+        vertical: true,
+        hPadding: 1.75
+      }, {
+        children: children
+      }), void 0);
+    }; // *************
+    // GoAModalTitle
+    // *************
+
+    var GoAModalTitle = function GoAModalTitle(_a) {
+      var children = _a.children,
+          testId = _a.testId;
+      return jsxRuntime.jsx("div", __assign({
+        "data-testid": testId,
+        className: "modal-title"
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    function resetScrollbars() {
-      // need to perform on the next render cycle to allow the css transitions to take place
-      setTimeout(function () {
-        document.body.style.overflow = '';
-        document.body.style.paddingRight = '0';
-      }, 300); // 300ms allows for any close animations to complete
-    }
+    var Container = function Container(_a) {
+      var children = _a.children,
+          onClick = _a.onClick;
+      return jsxRuntime.jsxs("div", __assign({
+        className: "modal"
+      }, {
+        children: [onClick && jsxRuntime.jsx("div", __assign({
+          className: "modal-close"
+        }, {
+          children: jsxRuntime.jsx(GoAIconButton, {
+            type: 'close',
+            onClick: onClick
+          }, void 0)
+        }), void 0), jsxRuntime.jsx("div", __assign({
+          className: "modal-container"
+        }, {
+          children: children
+        }), void 0), onClick && jsxRuntime.jsx("div", {
+          style: {
+            minHeight: '1.75rem'
+          }
+        }, void 0)]
+      }), void 0);
+    };
 
-    function show() {
-      setTransitionIndex(TRANSITION_VISIBLE);
-      hideScrollbars();
-    }
+    var Background = function Background(_a) {
+      var onClick = _a.onClick,
+          testId = _a.testId;
+      return jsxRuntime.jsx("div", {
+        className: "modal-background",
+        onClick: onClick,
+        "data-testid": testId
+      }, void 0);
+    }; // *******
+    // Helpers
+    // *******
+
+    /**
+     * Based on the an invisible container and the window width it calculates the scrollbar width
+     */
+
+
+    function calculateScrollbarWidth() {
+      // no scrollbars present
+      if (document.body.clientHeight <= document.documentElement.clientHeight) {
+        return 0;
+      }
 
-    function hide() {
-      setTransitionIndex(TRANSITION_HIDDEN);
-      resetScrollbars();
-    } // allows the current state to be easily determined within tests
+      var outer = document.createElement('div');
+      outer.style.visibility = 'hidden';
+      outer.style.overflow = 'scroll';
+      document.body.appendChild(outer); // Creating inner element and placing it in the container
 
+      var inner = document.createElement('div');
+      outer.appendChild(inner); // Calculating difference between container's full width and the child width
 
-    function getState() {
-      return ['init', 'visible', 'hidden'][transitionIndex];
-    }
+      var scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
 
-    return /*#__PURE__*/React__default.createElement(GoATransitionSequence, {
-      transitions: ['fade-in', 'fade-out'],
-      transitionIndex: transitionIndex,
-      onTransitionComplete: function onTransitionComplete(_index, done) {
-        return done && setTransitionIndex(0);
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-root",
-      "data-testid": testId,
-      "data-state": getState()
-    }, /*#__PURE__*/React__default.createElement(Container, {
-      onClick: onClose
-    }, children), /*#__PURE__*/React__default.createElement(Background, {
-      onClick: function onClick() {
-        return onClose === null || onClose === void 0 ? void 0 : onClose();
-      },
-      testId: backgroundTestId
-    })));
-  };
-  // Public Child Components
-  // ******************************************************************************
-  // ***************
-  // GoAModalActions
-  // ***************
-
-  var GoAModalActions = function GoAModalActions(_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-actions"
-    }, children);
-  }; // ***************
-  // GoAModalContent
-  // ***************
-
-  var GoAModalContent = function GoAModalContent(_ref3) {
-    var disableScroll = _ref3.disableScroll,
-        children = _ref3.children,
-        testId = _ref3.testId;
-
-    if (disableScroll) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        "data-testid": testId,
-        style: {
-          padding: "0 1.75rem"
-        }
-      }, children);
+      outer.parentNode.removeChild(outer);
+      return scrollbarWidth;
     }
 
-    return /*#__PURE__*/React__default.createElement(GoAScrollable, {
-      testId: testId,
-      vertical: true,
-      hPadding: 1.75
-    }, children);
-  }; // *************
-  // GoAModalTitle
-  // *************
-
-  var GoAModalTitle = function GoAModalTitle(_ref4) {
-    var children = _ref4.children,
-        testId = _ref4.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: "modal-title"
-    }, children);
-  }; // ******************************************************************************
-  // Private Components
-  // ******************************************************************************
-  // ******************************************
-  // Container - Contains all the content items
-  // ******************************************
-
-  var Container = function Container(_ref5) {
-    var children = _ref5.children,
-        onClick = _ref5.onClick;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal"
-    }, onClick && /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-close"
-    }, /*#__PURE__*/React__default.createElement(GoAIconButton, {
-      type: "close",
-      onClick: onClick
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-container"
-    }, children), onClick && /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        minHeight: '1.75rem'
-      }
-    }));
-  }; // ****************
-  // Background
-  // ****************
-
-
-  var Background = function Background(_ref6) {
-    var onClick = _ref6.onClick,
-        testId = _ref6.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-background",
-      onClick: onClick,
-      "data-testid": testId
-    });
-  }; // *******
-  // Helpers
-  // *******
-
-  /**
-   * Based on the an invisible container and the window width it calculates the scrollbar width
-   */
-
-
-  function calculateScrollbarWidth() {
-    // no scrollbars present
-    if (document.body.clientHeight <= document.documentElement.clientHeight) {
-      return 0;
-    }
+    var css_248z = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-textarea {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: block;\n  width: 100%;\n}\n.goa-textarea:hover {\n  border-color: var(--color-blue-600);\n}\n.goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n  box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-textarea:disabled {\n  border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:hover {\n  border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:focus {\n  box-shadow: none;\n}\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n  border: 2px solid var(--color-red);\n}";
+    styleInject(css_248z);
+
+    var GoATextArea = function GoATextArea(_a) {
+      var id = _a.id,
+          name = _a.name,
+          value = _a.value,
+          placeholder = _a.placeholder,
+          onChange = _a.onChange;
+      return jsxRuntime.jsx("textarea", {
+        id: id,
+        name: name,
+        className: "goa-textarea",
+        placeholder: placeholder,
+        onChange: function (e) {
+          return onChange(name, e.target.value);
+        },
+        value: value
+      }, void 0);
+    };
 
-    var outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll';
-    document.body.appendChild(outer); // Creating inner element and placing it in the container
-
-    var inner = document.createElement('div');
-    outer.appendChild(inner); // Calculating difference between container's full width and the child width
-
-    var scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
-
-    outer.parentNode.removeChild(outer);
-    return scrollbarWidth;
-  }
-
-  var css_248z$b = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n/* Forms */\n.goa-textarea {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  line-height: 42px;\n  height: 42px;\n  padding: 0 var(--input-padding);\n  font-size: var(--input-font-size);\n  display: block;\n  width: 100%; }\n  .goa-textarea:hover {\n    border-color: var(--color-blue-600); }\n  .goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange); }\n  .goa-textarea:disabled {\n    border-color: var(--color-gray-500); }\n    .goa-textarea:disabled:hover {\n      border-color: var(--color-gray-500); }\n    .goa-textarea:disabled:focus {\n      box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n  border: 2px solid var(--color-red); }\n";
-  styleInject(css_248z$b);
-
-  var GoATextArea = function GoATextArea(_ref) {
-    var id = _ref.id,
-        name = _ref.name,
-        value = _ref.value,
-        placeholder = _ref.placeholder,
-        _onChange = _ref.onChange;
-    return /*#__PURE__*/React__default.createElement("textarea", {
-      id: id,
-      name: name,
-      className: "goa-textarea",
-      placeholder: placeholder,
-      onChange: function onChange(e) {
-        return _onChange(name, e.target.value);
-      },
-      value: value
-    });
-  };
-
-  exports.GoAAppVersionHeader = GoAAppVersionHeader;
-  exports.GoABadge = GoABadge;
-  exports.GoAButton = GoAButton;
-  exports.GoACard = GoACard;
-  exports.GoAEmergencyBadge = GoAEmergencyBadge;
-  exports.GoAFlexRow = GoAFlexRow;
-  exports.GoAForm = GoAForm;
-  exports.GoAFormActions = GoAFormActions;
-  exports.GoAFormItem = GoAFormItem;
-  exports.GoAIcon = GoAIcon;
-  exports.GoAIconButton = GoAIconButton;
-  exports.GoAInfoBadge = GoAInfoBadge;
-  exports.GoAInput = GoAInput;
-  exports.GoAInputDate = GoAInputDate;
-  exports.GoAInputDateTime = GoAInputDateTime;
-  exports.GoAInputEmail = GoAInputEmail;
-  exports.GoAInputFile = GoAInputFile;
-  exports.GoAInputMonth = GoAInputMonth;
-  exports.GoAInputNumber = GoAInputNumber;
-  exports.GoAInputPassword = GoAInputPassword;
-  exports.GoAInputRange = GoAInputRange;
-  exports.GoAInputSearch = GoAInputSearch;
-  exports.GoAInputTel = GoAInputTel;
-  exports.GoAInputText = GoAInputText;
-  exports.GoAInputTime = GoAInputTime;
-  exports.GoAInputUrl = GoAInputUrl;
-  exports.GoAModal = GoAModal;
-  exports.GoAModalActions = GoAModalActions;
-  exports.GoAModalContent = GoAModalContent;
-  exports.GoAModalTitle = GoAModalTitle;
-  exports.GoAScrollable = GoAScrollable;
-  exports.GoASuccessBadge = GoASuccessBadge;
-  exports.GoATextArea = GoATextArea;
-  exports.GoATransition = GoATransition;
-  exports.GoATransitionSequence = GoATransitionSequence;
-  exports.GoAWarningBadge = GoAWarningBadge;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+    exports.GoAAppVersionHeader = GoAAppVersionHeader;
+    exports.GoABadge = GoABadge;
+    exports.GoAButton = GoAButton;
+    exports.GoACard = GoACard;
+    exports.GoAEmergencyBadge = GoAEmergencyBadge;
+    exports.GoAFlexRow = GoAFlexRow;
+    exports.GoAForm = GoAForm;
+    exports.GoAFormActions = GoAFormActions;
+    exports.GoAFormItem = GoAFormItem;
+    exports.GoAIcon = GoAIcon;
+    exports.GoAIconButton = GoAIconButton;
+    exports.GoAInfoBadge = GoAInfoBadge;
+    exports.GoAInput = GoAInput;
+    exports.GoAInputDate = GoAInputDate;
+    exports.GoAInputDateTime = GoAInputDateTime;
+    exports.GoAInputEmail = GoAInputEmail;
+    exports.GoAInputFile = GoAInputFile;
+    exports.GoAInputMonth = GoAInputMonth;
+    exports.GoAInputNumber = GoAInputNumber;
+    exports.GoAInputPassword = GoAInputPassword;
+    exports.GoAInputRange = GoAInputRange;
+    exports.GoAInputSearch = GoAInputSearch;
+    exports.GoAInputTel = GoAInputTel;
+    exports.GoAInputText = GoAInputText;
+    exports.GoAInputTime = GoAInputTime;
+    exports.GoAInputUrl = GoAInputUrl;
+    exports.GoAModal = GoAModal;
+    exports.GoAModalActions = GoAModalActions;
+    exports.GoAModalContent = GoAModalContent;
+    exports.GoAModalTitle = GoAModalTitle;
+    exports.GoAScrollable = GoAScrollable;
+    exports.GoASuccessBadge = GoASuccessBadge;
+    exports.GoATextArea = GoATextArea;
+    exports.GoATransition = GoATransition;
+    exports.GoATransitionSequence = GoATransitionSequence;
+    exports.GoAWarningBadge = GoAWarningBadge;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));