@abgov/react-components 3.4.0-alpha.1 → 3.4.0-alpha.5

package/react-components.esm.js

@@ -1,5 +1,19 @@
-import React, { useState, Fragment as Fragment$1, useEffect, Children } from 'react';
-import classnames from 'classnames';
+import '@abgov/web-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+
+const GoAAppHeader = ({
+  title,
+  url,
+  children
+}) => {
+  return jsx("goa-app-header", Object.assign({
+    title: title,
+    url: url
+  }, {
+    children: children
+  }), void 0);
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -28,2325 +42,735 @@ function styleInject(css, ref) {
   }
 }
 
-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-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\nbody,\ninput,\nbutton,\ntextarea {\n  background: #fff;\n  font-family: acumin-pro-semi-condensed, sans-serif;\n  font-weight: 400;\n  font-size: var(--fs-base);\n  color: #333; }\n\nbody {\n  margin: 0;\n  scroll-behavior: smooth; }\n\n*,\n*:before,\n*:after {\n  box-sizing: border-box; }\n\np {\n  margin: 0;\n  margin-bottom: 1rem; }\n\nhr {\n  border-width: 0;\n  border-top: 1px solid #ccc;\n  padding: 0;\n  margin: 0; }\n\nul,\nol {\n  padding-left: 0;\n  padding-left: 1rem; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n  padding-left: 0;\n  margin-top: 0; }\n\ndl {\n  margin-top: 0; }\n\ndd {\n  margin-left: 0.5rem; }\n\na {\n  color: var(--color-blue-500);\n  cursor: pointer; }\n\na:hover {\n  color: var(--color-blue-600); }\n\na:focus {\n  outline-width: thin;\n  outline-style: solid;\n  outline-color: var(--color-blue-600);\n  outline-offset: 0px; }\n\n::-moz-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n:-ms-input-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n::placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: #999; }\n\n::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: #999; }\n";
-styleInject(css_248z);
-
-var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 400; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 400; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 700; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 700; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 600; }\n";
-styleInject(css_248z$1);
-
-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;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  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);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    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));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    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];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
+var css_248z$3 = "goa-badge {\n  margin-left: 0.25rem;\n}";
+styleInject(css_248z$3);
 
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+const GoABadge = ({
+  type,
+  content,
+  icon,
+  testId
+}) => {
+  return jsx("goa-badge", {
+    type: type,
+    content: content,
+    icon: icon,
+    testid: testId
+  }, void 0);
+};
+const GoAInfoBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "information",
+    icon: "information-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoASuccessBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "success",
+    icon: "checkmark-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoAWarningBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "warning",
+    icon: "warning",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+const GoAEmergencyBadge = ({
+  content,
+  testId
+}) => {
+  return jsx(GoABadge, {
+    type: "emergency",
+    icon: "alert-circle",
+    content: content,
+    testId: testId
+  }, void 0);
+};
+
+var css_248z$2 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
+styleInject(css_248z$2);
 
-      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;
+const GoAButton = ({
+  title,
+  disabled: _disabled = false,
+  type: _type = 'primary',
+  size: _size = 'medium',
+  variant: _variant = 'default',
+  children,
+  onClick
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
     }
-  }
-
-  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 _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+    const current = el.current;
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+    const listener = e => {
+      onClick();
+    };
 
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
-var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
-var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
-
-var reactIs_production_min = {
-	AsyncMode: AsyncMode,
-	ConcurrentMode: ConcurrentMode,
-	ContextConsumer: ContextConsumer,
-	ContextProvider: ContextProvider,
-	Element: Element,
-	ForwardRef: ForwardRef,
-	Fragment: Fragment,
-	Lazy: Lazy,
-	Memo: Memo,
-	Portal: Portal,
-	Profiler: Profiler,
-	StrictMode: StrictMode,
-	Suspense: Suspense,
-	isAsyncMode: isAsyncMode,
-	isConcurrentMode: isConcurrentMode,
-	isContextConsumer: isContextConsumer,
-	isContextProvider: isContextProvider,
-	isElement: isElement,
-	isForwardRef: isForwardRef,
-	isFragment: isFragment,
-	isLazy: isLazy,
-	isMemo: isMemo,
-	isPortal: isPortal,
-	isProfiler: isProfiler,
-	isStrictMode: isStrictMode,
-	isSuspense: isSuspense,
-	isValidElementType: isValidElementType,
-	typeOf: typeOf
+    current.addEventListener('_click', listener);
+    return () => {
+      current.removeEventListener('_click', listener);
+    };
+  }, [el, onClick]);
+  return jsx("goa-button", Object.assign({
+    ref: el,
+    type: _type,
+    size: _size,
+    variant: _variant,
+    disabled: _disabled,
+    title: title
+  }, {
+    children: children
+  }), void 0);
 };
 
-var reactIs_development = createCommonjsModule(function (module, exports) {
-
-
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-// (unstable) APIs that have been removed. Can we remove the symbols?
-
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-
-function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-}
-
-function typeOf(object) {
-  if (typeof object === 'object' && object !== null) {
-    var $$typeof = object.$$typeof;
-
-    switch ($$typeof) {
-      case REACT_ELEMENT_TYPE:
-        var type = object.type;
-
-        switch (type) {
-          case REACT_ASYNC_MODE_TYPE:
-          case REACT_CONCURRENT_MODE_TYPE:
-          case REACT_FRAGMENT_TYPE:
-          case REACT_PROFILER_TYPE:
-          case REACT_STRICT_MODE_TYPE:
-          case REACT_SUSPENSE_TYPE:
-            return type;
-
-          default:
-            var $$typeofType = type && type.$$typeof;
-
-            switch ($$typeofType) {
-              case REACT_CONTEXT_TYPE:
-              case REACT_FORWARD_REF_TYPE:
-              case REACT_LAZY_TYPE:
-              case REACT_MEMO_TYPE:
-              case REACT_PROVIDER_TYPE:
-                return $$typeofType;
-
-              default:
-                return $$typeof;
-            }
-
-        }
-
-      case REACT_PORTAL_TYPE:
-        return $$typeof;
-    }
-  }
+var css_248z$1 = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+styleInject(css_248z$1);
 
-  return undefined;
-} // AsyncMode is deprecated along with isAsyncMode
-
-var AsyncMode = REACT_ASYNC_MODE_TYPE;
-var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-var ContextConsumer = REACT_CONTEXT_TYPE;
-var ContextProvider = REACT_PROVIDER_TYPE;
-var Element = REACT_ELEMENT_TYPE;
-var ForwardRef = REACT_FORWARD_REF_TYPE;
-var Fragment = REACT_FRAGMENT_TYPE;
-var Lazy = REACT_LAZY_TYPE;
-var Memo = REACT_MEMO_TYPE;
-var Portal = REACT_PORTAL_TYPE;
-var Profiler = REACT_PROFILER_TYPE;
-var StrictMode = REACT_STRICT_MODE_TYPE;
-var Suspense = REACT_SUSPENSE_TYPE;
-var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-function isAsyncMode(object) {
-  {
-    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+const GoAButtonGroup = ({
+  alignment,
+  children
+}) => {
+  return jsx("goa-button-group", Object.assign({
+    alignment: alignment
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoACallout = ({
+  title,
+  type: _type = "information",
+  children
+}) => {
+  return jsx("goa-callout", Object.assign({
+    title: title,
+    type: _type
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoACheckbox = ({
+  name,
+  testId,
+  error,
+  disabled,
+  checked,
+  indeterminate,
+  value: _value = true,
+  text,
+  children,
+  onChange
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
     }
-  }
-
-  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-}
-function isConcurrentMode(object) {
-  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-}
-function isContextConsumer(object) {
-  return typeOf(object) === REACT_CONTEXT_TYPE;
-}
-function isContextProvider(object) {
-  return typeOf(object) === REACT_PROVIDER_TYPE;
-}
-function isElement(object) {
-  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-}
-function isForwardRef(object) {
-  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-}
-function isFragment(object) {
-  return typeOf(object) === REACT_FRAGMENT_TYPE;
-}
-function isLazy(object) {
-  return typeOf(object) === REACT_LAZY_TYPE;
-}
-function isMemo(object) {
-  return typeOf(object) === REACT_MEMO_TYPE;
-}
-function isPortal(object) {
-  return typeOf(object) === REACT_PORTAL_TYPE;
-}
-function isProfiler(object) {
-  return typeOf(object) === REACT_PROFILER_TYPE;
-}
-function isStrictMode(object) {
-  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-}
-function isSuspense(object) {
-  return typeOf(object) === REACT_SUSPENSE_TYPE;
-}
 
-exports.AsyncMode = AsyncMode;
-exports.ConcurrentMode = ConcurrentMode;
-exports.ContextConsumer = ContextConsumer;
-exports.ContextProvider = ContextProvider;
-exports.Element = Element;
-exports.ForwardRef = ForwardRef;
-exports.Fragment = Fragment;
-exports.Lazy = Lazy;
-exports.Memo = Memo;
-exports.Portal = Portal;
-exports.Profiler = Profiler;
-exports.StrictMode = StrictMode;
-exports.Suspense = Suspense;
-exports.isAsyncMode = isAsyncMode;
-exports.isConcurrentMode = isConcurrentMode;
-exports.isContextConsumer = isContextConsumer;
-exports.isContextProvider = isContextProvider;
-exports.isElement = isElement;
-exports.isForwardRef = isForwardRef;
-exports.isFragment = isFragment;
-exports.isLazy = isLazy;
-exports.isMemo = isMemo;
-exports.isPortal = isPortal;
-exports.isProfiler = isProfiler;
-exports.isStrictMode = isStrictMode;
-exports.isSuspense = isSuspense;
-exports.isValidElementType = isValidElementType;
-exports.typeOf = typeOf;
-  })();
-}
-});
-var reactIs_development_1 = reactIs_development.AsyncMode;
-var reactIs_development_2 = reactIs_development.ConcurrentMode;
-var reactIs_development_3 = reactIs_development.ContextConsumer;
-var reactIs_development_4 = reactIs_development.ContextProvider;
-var reactIs_development_5 = reactIs_development.Element;
-var reactIs_development_6 = reactIs_development.ForwardRef;
-var reactIs_development_7 = reactIs_development.Fragment;
-var reactIs_development_8 = reactIs_development.Lazy;
-var reactIs_development_9 = reactIs_development.Memo;
-var reactIs_development_10 = reactIs_development.Portal;
-var reactIs_development_11 = reactIs_development.Profiler;
-var reactIs_development_12 = reactIs_development.StrictMode;
-var reactIs_development_13 = reactIs_development.Suspense;
-var reactIs_development_14 = reactIs_development.isAsyncMode;
-var reactIs_development_15 = reactIs_development.isConcurrentMode;
-var reactIs_development_16 = reactIs_development.isContextConsumer;
-var reactIs_development_17 = reactIs_development.isContextProvider;
-var reactIs_development_18 = reactIs_development.isElement;
-var reactIs_development_19 = reactIs_development.isForwardRef;
-var reactIs_development_20 = reactIs_development.isFragment;
-var reactIs_development_21 = reactIs_development.isLazy;
-var reactIs_development_22 = reactIs_development.isMemo;
-var reactIs_development_23 = reactIs_development.isPortal;
-var reactIs_development_24 = reactIs_development.isProfiler;
-var reactIs_development_25 = reactIs_development.isStrictMode;
-var reactIs_development_26 = reactIs_development.isSuspense;
-var reactIs_development_27 = reactIs_development.isValidElementType;
-var reactIs_development_28 = reactIs_development.typeOf;
-
-var reactIs = createCommonjsModule(function (module) {
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = reactIs_production_min;
-} else {
-  module.exports = reactIs_development;
-}
-});
+    const current = el.current;
 
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-/* eslint-disable no-unused-vars */
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
-function toObject(val) {
-	if (val === null || val === undefined) {
-		throw new TypeError('Object.assign cannot be called with null or undefined');
-	}
-
-	return Object(val);
-}
-
-function shouldUseNative() {
-	try {
-		if (!Object.assign) {
-			return false;
-		}
-
-		// Detect buggy property enumeration order in older V8 versions.
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
-		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
-		test1[5] = 'de';
-		if (Object.getOwnPropertyNames(test1)[0] === '5') {
-			return false;
-		}
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
-		var test2 = {};
-		for (var i = 0; i < 10; i++) {
-			test2['_' + String.fromCharCode(i)] = i;
-		}
-		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
-			return test2[n];
-		});
-		if (order2.join('') !== '0123456789') {
-			return false;
-		}
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
-		var test3 = {};
-		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
-			test3[letter] = letter;
-		});
-		if (Object.keys(Object.assign({}, test3)).join('') !==
-				'abcdefghijklmnopqrst') {
-			return false;
-		}
-
-		return true;
-	} catch (err) {
-		// We don't expect any of the above to throw, but better to be safe.
-		return false;
-	}
-}
+    const listener = e => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(name, e.detail.checked, e.detail.value);
+    };
 
-var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
-	var from;
-	var to = toObject(target);
-	var symbols;
-
-	for (var s = 1; s < arguments.length; s++) {
-		from = Object(arguments[s]);
-
-		for (var key in from) {
-			if (hasOwnProperty.call(from, key)) {
-				to[key] = from[key];
-			}
-		}
-
-		if (getOwnPropertySymbols) {
-			symbols = getOwnPropertySymbols(from);
-			for (var i = 0; i < symbols.length; i++) {
-				if (propIsEnumerable.call(from, symbols[i])) {
-					to[symbols[i]] = from[symbols[i]];
-				}
-			}
-		}
-	}
-
-	return to;
+    current.addEventListener('_change', listener);
+    return () => {
+      current.removeEventListener('_change', listener);
+    };
+  }, []);
+  return jsx("goa-checkbox", Object.assign({
+    "data-testid": testId,
+    ref: el,
+    name: name,
+    error: error,
+    checked: checked,
+    disabled: disabled,
+    indeterminate: indeterminate,
+    text: text,
+    value: _value
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAContainer = ({
+  headingSize,
+  title,
+  children,
+  actions,
+  variant: _variant = 'primary'
+}) => {
+  return jsxs("goa-container", Object.assign({
+    variant: _variant,
+    headingsize: headingSize
+  }, {
+    children: [title && jsx("div", Object.assign({
+      slot: "title"
+    }, {
+      children: title
+    }), void 0), children, actions && jsx("div", Object.assign({
+      slot: "actions"
+    }, {
+      children: actions
+    }), void 0)]
+  }), void 0);
+};
+
+const GoADropdownOption = props => {
+  return jsx("goa-dropdown-item", Object.assign({
+    "data-testid": props.testId,
+    name: props.name,
+    value: props.value,
+    label: props.label
+  }, {
+    children: props.children
+  }), void 0);
 };
 
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-var ReactPropTypesSecret_1 = ReactPropTypesSecret;
-
-var printWarning = function() {};
-
-if (process.env.NODE_ENV !== 'production') {
-  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
-  var loggedTypeFailures = {};
-  var has = Function.call.bind(Object.prototype.hasOwnProperty);
-
-  printWarning = function(text) {
-    var message = 'Warning: ' + text;
-    if (typeof console !== 'undefined') {
-      console.error(message);
-    }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      throw new Error(message);
-    } catch (x) {}
-  };
-}
-
-/**
- * Assert that the values match with the type specs.
- * Error messages are memorized and will only be shown once.
- *
- * @param {object} typeSpecs Map of name to a ReactPropType
- * @param {object} values Runtime values that need to be type-checked
- * @param {string} location e.g. "prop", "context", "child context"
- * @param {string} componentName Name of the component for error messages.
- * @param {?Function} getStack Returns the component stack.
- * @private
- */
-function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
-  if (process.env.NODE_ENV !== 'production') {
-    for (var typeSpecName in typeSpecs) {
-      if (has(typeSpecs, typeSpecName)) {
-        var error;
-        // Prop type validation may throw. In case they do, we don't want to
-        // fail the render phase where it didn't fail before. So we log it.
-        // After these have been cleaned up, we'll let them throw.
-        try {
-          // This is intentionally an invariant that gets caught. It's the same
-          // behavior as without this statement except with a better message.
-          if (typeof typeSpecs[typeSpecName] !== 'function') {
-            var err = Error(
-              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
-            );
-            err.name = 'Invariant Violation';
-            throw err;
-          }
-          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
-        } catch (ex) {
-          error = ex;
-        }
-        if (error && !(error instanceof Error)) {
-          printWarning(
-            (componentName || 'React class') + ': type specification of ' +
-            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
-            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
-            'You may have forgotten to pass an argument to the type checker ' +
-            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
-            'shape all require an argument).'
-          );
-        }
-        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
-          // Only monitor this failure once because there tends to be a lot of the
-          // same error.
-          loggedTypeFailures[error.message] = true;
-
-          var stack = getStack ? getStack() : '';
-
-          printWarning(
-            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
-          );
-        }
-      }
+const GoADropdown = props => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
     }
-  }
-}
-
-/**
- * Resets warning cache when testing.
- *
- * @private
- */
-checkPropTypes.resetWarningCache = function() {
-  if (process.env.NODE_ENV !== 'production') {
-    loggedTypeFailures = {};
-  }
-};
 
-var checkPropTypes_1 = checkPropTypes;
+    const current = el.current;
 
-var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
-var printWarning$1 = function() {};
+    const handler = state => {
+      const {
+        name,
+        value
+      } = state.detail.data;
+      props.onChange(name, value);
+    };
 
-if (process.env.NODE_ENV !== 'production') {
-  printWarning$1 = function(text) {
-    var message = 'Warning: ' + text;
-    if (typeof console !== 'undefined') {
-      console.error(message);
-    }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      throw new Error(message);
-    } catch (x) {}
-  };
-}
-
-function emptyFunctionThatReturnsNull() {
-  return null;
-}
+    current.addEventListener('_change', handler);
+    return () => {
+      current.removeEventListener('_change', handler);
+    };
+  }, [el, props]);
+  return jsx("goa-dropdown", Object.assign({
+    ref: el,
+    name: props.name,
+    values: JSON.stringify(props.selectedValues),
+    leadingicon: props.leadingIcon,
+    maxheight: props.maxHeight,
+    placeholder: props.placeholder,
+    autocomplete: props.autoComplete,
+    disabled: props.disabled,
+    multiselect: props.multiSelect,
+    "data-testid": props.testId
+  }, {
+    children: props.children
+  }), void 0);
+};
 
-var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
-  /* global Symbol */
-  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
-  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
-
-  /**
-   * Returns the iterator method function contained on the iterable object.
-   *
-   * Be sure to invoke the function with the iterable as context:
-   *
-   *     var iteratorFn = getIteratorFn(myIterable);
-   *     if (iteratorFn) {
-   *       var iterator = iteratorFn.call(myIterable);
-   *       ...
-   *     }
-   *
-   * @param {?object} maybeIterable
-   * @return {?function}
-   */
-  function getIteratorFn(maybeIterable) {
-    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
-    if (typeof iteratorFn === 'function') {
-      return iteratorFn;
-    }
-  }
+var css_248z = "";
+styleInject(css_248z);
 
-  /**
-   * Collection of methods that allow declaration and validation of props that are
-   * supplied to React components. Example usage:
-   *
-   *   var Props = require('ReactPropTypes');
-   *   var MyArticle = React.createClass({
-   *     propTypes: {
-   *       // An optional string prop named "description".
-   *       description: Props.string,
-   *
-   *       // A required enum prop named "category".
-   *       category: Props.oneOf(['News','Photos']).isRequired,
-   *
-   *       // A prop named "dialog" that requires an instance of Dialog.
-   *       dialog: Props.instanceOf(Dialog).isRequired
-   *     },
-   *     render: function() { ... }
-   *   });
-   *
-   * A more formal specification of how these methods are used:
-   *
-   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
-   *   decl := ReactPropTypes.{type}(.isRequired)?
-   *
-   * Each and every declaration produces a function with the same signature. This
-   * allows the creation of custom validation functions. For example:
-   *
-   *  var MyLink = React.createClass({
-   *    propTypes: {
-   *      // An optional string or URI prop named "href".
-   *      href: function(props, propName, componentName) {
-   *        var propValue = props[propName];
-   *        if (propValue != null && typeof propValue !== 'string' &&
-   *            !(propValue instanceof URI)) {
-   *          return new Error(
-   *            'Expected a string or an URI for ' + propName + ' in ' +
-   *            componentName
-   *          );
-   *        }
-   *      }
-   *    },
-   *    render: function() {...}
-   *  });
-   *
-   * @internal
-   */
-
-  var ANONYMOUS = '<<anonymous>>';
-
-  // Important!
-  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
-  var ReactPropTypes = {
-    array: createPrimitiveTypeChecker('array'),
-    bool: createPrimitiveTypeChecker('boolean'),
-    func: createPrimitiveTypeChecker('function'),
-    number: createPrimitiveTypeChecker('number'),
-    object: createPrimitiveTypeChecker('object'),
-    string: createPrimitiveTypeChecker('string'),
-    symbol: createPrimitiveTypeChecker('symbol'),
-
-    any: createAnyTypeChecker(),
-    arrayOf: createArrayOfTypeChecker,
-    element: createElementTypeChecker(),
-    elementType: createElementTypeTypeChecker(),
-    instanceOf: createInstanceTypeChecker,
-    node: createNodeChecker(),
-    objectOf: createObjectOfTypeChecker,
-    oneOf: createEnumTypeChecker,
-    oneOfType: createUnionTypeChecker,
-    shape: createShapeTypeChecker,
-    exact: createStrictShapeTypeChecker,
+const GoAFlexRow = ({
+  gap,
+  minWidth,
+  children
+}) => {
+  const style = {
+    gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
   };
 
-  /**
-   * inlined Object.is polyfill to avoid requiring consumers ship their own
-   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-   */
-  /*eslint-disable no-self-compare*/
-  function is(x, y) {
-    // SameValue algorithm
-    if (x === y) {
-      // Steps 1-5, 7-10
-      // Steps 6.b-6.e: +0 != -0
-      return x !== 0 || 1 / x === 1 / y;
-    } else {
-      // Step 6.a: NaN == NaN
-      return x !== x && y !== y;
-    }
-  }
-  /*eslint-enable no-self-compare*/
-
-  /**
-   * We use an Error-like object for backward compatibility as people may call
-   * PropTypes directly and inspect their output. However, we don't use real
-   * Errors anymore. We don't inspect their stack anyway, and creating them
-   * is prohibitively expensive if they are created too often, such as what
-   * happens in oneOfType() for any type before the one that matched.
-   */
-  function PropTypeError(message) {
-    this.message = message;
-    this.stack = '';
-  }
-  // Make `instanceof Error` still work for returned errors.
-  PropTypeError.prototype = Error.prototype;
-
-  function createChainableTypeChecker(validate) {
-    if (process.env.NODE_ENV !== 'production') {
-      var manualPropTypeCallCache = {};
-      var manualPropTypeWarningCount = 0;
-    }
-    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
-      componentName = componentName || ANONYMOUS;
-      propFullName = propFullName || propName;
-
-      if (secret !== ReactPropTypesSecret_1) {
-        if (throwOnDirectAccess) {
-          // New behavior only for users of `prop-types` package
-          var err = new Error(
-            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-            'Use `PropTypes.checkPropTypes()` to call them. ' +
-            'Read more at http://fb.me/use-check-prop-types'
-          );
-          err.name = 'Invariant Violation';
-          throw err;
-        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
-          // Old behavior for people using React.PropTypes
-          var cacheKey = componentName + ':' + propName;
-          if (
-            !manualPropTypeCallCache[cacheKey] &&
-            // Avoid spamming the console because they are often not actionable except for lib authors
-            manualPropTypeWarningCount < 3
-          ) {
-            printWarning$1(
-              'You are manually calling a React.PropTypes validation ' +
-              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
-              'and will throw in the standalone `prop-types` package. ' +
-              'You may be seeing this warning due to a third-party PropTypes ' +
-              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
-            );
-            manualPropTypeCallCache[cacheKey] = true;
-            manualPropTypeWarningCount++;
-          }
-        }
-      }
-      if (props[propName] == null) {
-        if (isRequired) {
-          if (props[propName] === null) {
-            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
-          }
-          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
-        }
-        return null;
-      } else {
-        return validate(props, propName, componentName, location, propFullName);
-      }
-    }
-
-    var chainedCheckType = checkType.bind(null, false);
-    chainedCheckType.isRequired = checkType.bind(null, true);
-
-    return chainedCheckType;
-  }
-
-  function createPrimitiveTypeChecker(expectedType) {
-    function validate(props, propName, componentName, location, propFullName, secret) {
-      var propValue = props[propName];
-      var propType = getPropType(propValue);
-      if (propType !== expectedType) {
-        // `propValue` being instance of, say, date/regexp, pass the 'object'
-        // check, but we can offer a more precise error message here rather than
-        // 'of type `object`'.
-        var preciseType = getPreciseType(propValue);
-
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createAnyTypeChecker() {
-    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
-  }
-
-  function createArrayOfTypeChecker(typeChecker) {
-    function validate(props, propName, componentName, location, propFullName) {
-      if (typeof typeChecker !== 'function') {
-        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
-      }
-      var propValue = props[propName];
-      if (!Array.isArray(propValue)) {
-        var propType = getPropType(propValue);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
-      }
-      for (var i = 0; i < propValue.length; i++) {
-        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
-        if (error instanceof Error) {
-          return error;
-        }
-      }
+  const getChildren = () => {
+    if (!children) {
       return null;
     }
-    return createChainableTypeChecker(validate);
-  }
 
-  function createElementTypeChecker() {
-    function validate(props, propName, componentName, location, propFullName) {
-      var propValue = props[propName];
-      if (!isValidElement(propValue)) {
-        var propType = getPropType(propValue);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createElementTypeTypeChecker() {
-    function validate(props, propName, componentName, location, propFullName) {
-      var propValue = props[propName];
-      if (!reactIs.isValidElementType(propValue)) {
-        var propType = getPropType(propValue);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createInstanceTypeChecker(expectedClass) {
-    function validate(props, propName, componentName, location, propFullName) {
-      if (!(props[propName] instanceof expectedClass)) {
-        var expectedClassName = expectedClass.name || ANONYMOUS;
-        var actualClassName = getClassName(props[propName]);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createEnumTypeChecker(expectedValues) {
-    if (!Array.isArray(expectedValues)) {
-      if (process.env.NODE_ENV !== 'production') {
-        if (arguments.length > 1) {
-          printWarning$1(
-            'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
-            'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
-          );
-        } else {
-          printWarning$1('Invalid argument supplied to oneOf, expected an array.');
-        }
-      }
-      return emptyFunctionThatReturnsNull;
-    }
-
-    function validate(props, propName, componentName, location, propFullName) {
-      var propValue = props[propName];
-      for (var i = 0; i < expectedValues.length; i++) {
-        if (is(propValue, expectedValues[i])) {
-          return null;
-        }
-      }
-
-      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
-        var type = getPreciseType(value);
-        if (type === 'symbol') {
-          return String(value);
-        }
-        return value;
+    return React.Children.map(children, child => {
+      return /*#__PURE__*/React.cloneElement(child, {
+        style: Object.assign({
+          flexBasis: minWidth
+        }, child.props.style)
       });
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createObjectOfTypeChecker(typeChecker) {
-    function validate(props, propName, componentName, location, propFullName) {
-      if (typeof typeChecker !== 'function') {
-        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
-      }
-      var propValue = props[propName];
-      var propType = getPropType(propValue);
-      if (propType !== 'object') {
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
-      }
-      for (var key in propValue) {
-        if (has$1(propValue, key)) {
-          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
-          if (error instanceof Error) {
-            return error;
-          }
-        }
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createUnionTypeChecker(arrayOfTypeCheckers) {
-    if (!Array.isArray(arrayOfTypeCheckers)) {
-      process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
-      return emptyFunctionThatReturnsNull;
-    }
-
-    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
-      var checker = arrayOfTypeCheckers[i];
-      if (typeof checker !== 'function') {
-        printWarning$1(
-          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
-          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
-        );
-        return emptyFunctionThatReturnsNull;
-      }
-    }
-
-    function validate(props, propName, componentName, location, propFullName) {
-      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
-        var checker = arrayOfTypeCheckers[i];
-        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
-          return null;
-        }
-      }
-
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createNodeChecker() {
-    function validate(props, propName, componentName, location, propFullName) {
-      if (!isNode(props[propName])) {
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createShapeTypeChecker(shapeTypes) {
-    function validate(props, propName, componentName, location, propFullName) {
-      var propValue = props[propName];
-      var propType = getPropType(propValue);
-      if (propType !== 'object') {
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
-      }
-      for (var key in shapeTypes) {
-        var checker = shapeTypes[key];
-        if (!checker) {
-          continue;
-        }
-        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
-        if (error) {
-          return error;
-        }
-      }
-      return null;
-    }
-    return createChainableTypeChecker(validate);
-  }
-
-  function createStrictShapeTypeChecker(shapeTypes) {
-    function validate(props, propName, componentName, location, propFullName) {
-      var propValue = props[propName];
-      var propType = getPropType(propValue);
-      if (propType !== 'object') {
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
-      }
-      // We need to check all keys in case some are required but missing from
-      // props.
-      var allKeys = objectAssign({}, props[propName], shapeTypes);
-      for (var key in allKeys) {
-        var checker = shapeTypes[key];
-        if (!checker) {
-          return new PropTypeError(
-            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
-            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
-          );
-        }
-        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
-        if (error) {
-          return error;
-        }
-      }
-      return null;
-    }
-
-    return createChainableTypeChecker(validate);
-  }
-
-  function isNode(propValue) {
-    switch (typeof propValue) {
-      case 'number':
-      case 'string':
-      case 'undefined':
-        return true;
-      case 'boolean':
-        return !propValue;
-      case 'object':
-        if (Array.isArray(propValue)) {
-          return propValue.every(isNode);
-        }
-        if (propValue === null || isValidElement(propValue)) {
-          return true;
-        }
-
-        var iteratorFn = getIteratorFn(propValue);
-        if (iteratorFn) {
-          var iterator = iteratorFn.call(propValue);
-          var step;
-          if (iteratorFn !== propValue.entries) {
-            while (!(step = iterator.next()).done) {
-              if (!isNode(step.value)) {
-                return false;
-              }
-            }
-          } else {
-            // Iterator will provide entry [k,v] tuples rather than values.
-            while (!(step = iterator.next()).done) {
-              var entry = step.value;
-              if (entry) {
-                if (!isNode(entry[1])) {
-                  return false;
-                }
-              }
-            }
-          }
-        } else {
-          return false;
-        }
-
-        return true;
-      default:
-        return false;
-    }
-  }
-
-  function isSymbol(propType, propValue) {
-    // Native Symbol.
-    if (propType === 'symbol') {
-      return true;
-    }
-
-    // falsy value can't be a Symbol
-    if (!propValue) {
-      return false;
-    }
-
-    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
-    if (propValue['@@toStringTag'] === 'Symbol') {
-      return true;
-    }
-
-    // Fallback for non-spec compliant Symbols which are polyfilled.
-    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
-      return true;
-    }
-
-    return false;
-  }
-
-  // Equivalent of `typeof` but with special handling for array and regexp.
-  function getPropType(propValue) {
-    var propType = typeof propValue;
-    if (Array.isArray(propValue)) {
-      return 'array';
-    }
-    if (propValue instanceof RegExp) {
-      // Old webkits (at least until Android 4.0) return 'function' rather than
-      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
-      // passes PropTypes.object.
-      return 'object';
-    }
-    if (isSymbol(propType, propValue)) {
-      return 'symbol';
-    }
-    return propType;
-  }
-
-  // This handles more types than `getPropType`. Only used for error messages.
-  // See `createPrimitiveTypeChecker`.
-  function getPreciseType(propValue) {
-    if (typeof propValue === 'undefined' || propValue === null) {
-      return '' + propValue;
-    }
-    var propType = getPropType(propValue);
-    if (propType === 'object') {
-      if (propValue instanceof Date) {
-        return 'date';
-      } else if (propValue instanceof RegExp) {
-        return 'regexp';
-      }
-    }
-    return propType;
-  }
-
-  // Returns a string that is postfixed to a warning about an invalid type.
-  // For example, "undefined" or "of type array"
-  function getPostfixForTypeWarning(value) {
-    var type = getPreciseType(value);
-    switch (type) {
-      case 'array':
-      case 'object':
-        return 'an ' + type;
-      case 'boolean':
-      case 'date':
-      case 'regexp':
-        return 'a ' + type;
-      default:
-        return type;
-    }
-  }
-
-  // Returns class name of the object, if any.
-  function getClassName(propValue) {
-    if (!propValue.constructor || !propValue.constructor.name) {
-      return ANONYMOUS;
-    }
-    return propValue.constructor.name;
-  }
-
-  ReactPropTypes.checkPropTypes = checkPropTypes_1;
-  ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
-  ReactPropTypes.PropTypes = ReactPropTypes;
-
-  return ReactPropTypes;
-};
-
-function emptyFunction() {}
-function emptyFunctionWithReset() {}
-emptyFunctionWithReset.resetWarningCache = emptyFunction;
-
-var factoryWithThrowingShims = function() {
-  function shim(props, propName, componentName, location, propFullName, secret) {
-    if (secret === ReactPropTypesSecret_1) {
-      // It is still safe when called from React.
-      return;
-    }
-    var err = new Error(
-      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-      'Use PropTypes.checkPropTypes() to call them. ' +
-      'Read more at http://fb.me/use-check-prop-types'
-    );
-    err.name = 'Invariant Violation';
-    throw err;
-  }  shim.isRequired = shim;
-  function getShim() {
-    return shim;
-  }  // Important!
-  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-  var ReactPropTypes = {
-    array: shim,
-    bool: shim,
-    func: shim,
-    number: shim,
-    object: shim,
-    string: shim,
-    symbol: shim,
-
-    any: shim,
-    arrayOf: getShim,
-    element: shim,
-    elementType: shim,
-    instanceOf: getShim,
-    node: shim,
-    objectOf: getShim,
-    oneOf: getShim,
-    oneOfType: getShim,
-    shape: getShim,
-    exact: getShim,
-
-    checkPropTypes: emptyFunctionWithReset,
-    resetWarningCache: emptyFunction
+    });
   };
 
-  ReactPropTypes.PropTypes = ReactPropTypes;
-
-  return ReactPropTypes;
+  return jsx("div", Object.assign({
+    className: "goa-flex-row",
+    style: style
+  }, {
+    children: getChildren()
+  }), void 0);
 };
 
-var propTypes = createCommonjsModule(function (module) {
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = reactIs;
-
-  // By explicitly using `prop-types` you are opting into new development behavior.
-  // http://fb.me/prop-types-in-prod
-  var throwOnDirectAccess = true;
-  module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
-} else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  module.exports = factoryWithThrowingShims();
-}
+var row = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  GoAFlexRow: GoAFlexRow,
+  'default': GoAFlexRow
 });
 
-var css_248z$2 = "/* Palette */\n/* Semantic usages */\n.goa-callout {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  margin: 24px 0 0;\n  padding: 23px 24px 23px 24px;\n  border-width: 0;\n  border-left-width: 48px;\n  border-style: solid;\n  border-color: #0070c4;\n  background: #f1f1f1;\n  /* variants ***/ }\n  .goa-callout *:first-child {\n    margin-top: 0; }\n  .goa-callout *:last-child {\n    margin-bottom: 0; }\n  .goa-callout.goa--important {\n    border-color: #feba35; }\n  .goa-callout.goa--emergency {\n    border-color: #EC040B; }\n  .goa-callout.goa--error {\n    border-color: #EC040B; }\n  .goa-callout.goa--success {\n    border-color: #00853f; }\n  .goa-callout:before {\n    position: absolute;\n    top: 28px;\n    left: -36px;\n    width: 24px;\n    height: 24px;\n    content: '';\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--emergency:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--error:before {\n    background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><rect class=\"a\" width=\"24\" height=\"24\"/><path class=\"b\" d=\"M48.1,23a11,11,0,1,0-11-11A10.968,10.968,0,0,0,48.1,23Zm0-20a9,9,0,1,1-9,9A8.963,8.963,0,0,1,48.1,3Z\" transform=\"translate(-36)\"/><path class=\"b\" d=\"M43.6,16.4a.967.967,0,0,0,1.4,0l3-3,3,3a.967.967,0,0,0,1.4,0,.967.967,0,0,0,0-1.4l-3-3,3-3A.99.99,0,0,0,51,7.6l-3,3-3-3A.99.99,0,0,0,43.6,9l3,3-3,3A1.2,1.2,0,0,0,43.6,16.4Z\" transform=\"translate(-36)\"/></svg>');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-callout.goa--important:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--event:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--event:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--success:before {\n    background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><g transform=\"translate(-23 -68)\"><rect class=\"a\" width=\"24\" height=\"24\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M12,23A11,11,0,1,0,1,12,10.968,10.968,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A8.963,8.963,0,0,1,12,3Z\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M10.9,16.4a.908.908,0,0,0,.7.3h.1a.842.842,0,0,0,.7-.4L17.6,9a.913.913,0,0,0-.2-1.4,1,1,0,0,0-1.4.3l-4.5,6.3L8,10.5a.99.99,0,0,0-1.4,1.4Z\" transform=\"translate(23 68)\"/></g></svg>');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-callout .messages {\n    margin-bottom: 0;\n    margin-top: 1em; }\n";
-styleInject(css_248z$2);
-
-var GoACallout = function GoACallout(_ref) {
-  var title = _ref.title,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "information" : _ref$type,
-      content = _ref.content,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      props = _objectWithoutProperties(_ref, ["title", "type", "content", "children"]);
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "goa-callout goa--".concat(type)
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-    "data-testid": "callout-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "messages",
-    "data-testid": "callout-content"
-  }, content || children))));
-};
-GoACallout.propTypes = {
-  title: propTypes.string,
-  type: propTypes.string.isRequired,
-  content: propTypes.string
-};
-
-var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.goa-notification {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  padding-left: 72px;\n  padding-right: 72px;\n  color: #fff;\n  background: #0070c4;\n  /* variants ***/ }\n  .goa-notification.dismissed {\n    display: none; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-notification {\n      padding-left: 24px;\n      padding-right: 24px; } }\n  @media screen and (max-width: 767px) {\n    .goa-notification {\n      padding-left: 24px;\n      padding-right: 24px; } }\n  .goa-notification .content {\n    box-sizing: border-box;\n    display: flex;\n    width: 100%;\n    margin: 0;\n    position: relative;\n    padding: 0 36px; }\n    .goa-notification .content .message {\n      flex: 1 0 0;\n      box-sizing: border-box;\n      min-height: 56px;\n      padding: 28px 0; }\n    .goa-notification .content .close {\n      flex: 0 1 auto;\n      color: #fff; }\n  .goa-notification a {\n    color: #fff; }\n    .goa-notification a:hover, .goa-notification a:focus {\n      color: #fff;\n      text-decoration: none; }\n  .goa-notification.goa--event {\n    background-color: #00853f; }\n  .goa-notification.goa--important {\n    background-color: #feba35; }\n    .goa-notification.goa--important .message {\n      color: #333; }\n    .goa-notification.goa--important a {\n      color: #333; }\n      .goa-notification.goa--important a:hover, .goa-notification.goa--important a:focus {\n        color: #333; }\n  .goa-notification.goa--emergency {\n    background-color: #EC040B; }\n  .goa-notification .close {\n    align-self: center;\n    position: absolute;\n    right: 12px;\n    cursor: pointer; }\n    .goa-notification .close svg {\n      fill: #fff;\n      color: #fff; }\n  .goa-notification .content:before {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    width: 24px;\n    height: 24px;\n    margin-top: -12px;\n    content: '';\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--emergency .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--important .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--event .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n";
-styleInject(css_248z$3);
-
-var css_248z$4 = ".goa-notifications .title {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  left: -10px;\n  width: 1px;\n  height: 1px;\n  white-space: nowrap; }\n\n.goa-notifications ul {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  list-style-type: none; }\n  .goa-notifications ul li {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    margin: 0;\n    padding: 0; }\n";
-styleInject(css_248z$4);
-
-var GoANotification = function GoANotification(_ref) {
-  var title = _ref.title,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "information" : _ref$type,
-      message = _ref.message,
-      notificationUrl = _ref.notificationUrl,
-      _ref$isDismissable = _ref.isDismissable,
-      isDismissable = _ref$isDismissable === void 0 ? true : _ref$isDismissable,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      onDismiss = _ref.onDismiss,
-      props = _objectWithoutProperties(_ref, ["title", "type", "message", "notificationUrl", "isDismissable", "children", "onDismiss"]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      dismissed = _useState2[0],
-      setDismissed = _useState2[1];
-
-  var dismissTrigger = function dismissTrigger(dismissAction) {
-    setDismissed(dismissAction);
-    onDismiss();
-  };
-
-  if (!dismissed) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "goa-notifications"
-    }, /*#__PURE__*/React.createElement("h2", {
-      className: "title"
-    }, title)), /*#__PURE__*/React.createElement("div", {
-      role: "notification",
-      className: "goa-notification goa--".concat(type)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "content"
-    }, notificationUrl ? /*#__PURE__*/React.createElement("a", {
-      className: "message",
-      role: "url",
-      href: notificationUrl
-    }, message || children) : /*#__PURE__*/React.createElement("span", {
-      className: "message"
-    }, message || children), isDismissable && /*#__PURE__*/React.createElement("a", {
-      role: "closeBox",
-      className: "close",
-      title: "Dismiss",
-      onClick: function onClick() {
-        return dismissTrigger(!dismissed);
-      }
-    }, /*#__PURE__*/React.createElement("svg", {
-      width: "16px",
-      height: "16px",
-      viewBox: "0 0 16 16"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M 15.99 14.54C 15.99 14.54 14.54 15.99 14.54 15.99 14.54 15.99 8 9.45 8 9.45 8 9.45 1.46 15.99 1.46 15.99 1.46 15.99 0.01 14.54 0.01 14.54 0.01 14.54 6.55 8 6.55 8 6.55 8 0.01 1.46 0.01 1.46 0.01 1.46 1.46 0.01 1.46 0.01 1.46 0.01 8 6.55 8 6.55 8 6.55 14.54 0.01 14.54 0.01 14.54 0.01 15.99 1.46 15.99 1.46 15.99 1.46 9.45 8 9.45 8 9.45 8 15.99 14.54 15.99 14.54Z"
-    }))))));
-  } else {
-    return null;
-  }
-};
-GoANotification.propTypes = {
-  title: propTypes.string,
-  type: propTypes.string.isRequired,
-  content: propTypes.string
-};
-
-var css_248z$5 = "/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\nbutton.goa-button,\ninput[type='button'].goa-button,\ninput[type='submit'].goa-button {\n  box-sizing: border-box;\n  min-width: 70px;\n  padding: 12px;\n  border: 2px solid #0070c4;\n  border-radius: 4px;\n  background: #0070c4;\n  cursor: pointer;\n  color: #fff;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em; }\n  button.goa-button.btn-small,\n  input[type='button'].goa-button.btn-small,\n  input[type='submit'].goa-button.btn-small {\n    font-size: 16px;\n    padding: 8px;\n    margin: 12px 12px 0 0; }\n  button.goa-button:last-of-type,\n  input[type='button'].goa-button:last-of-type,\n  input[type='submit'].goa-button:last-of-type {\n    margin-right: 0; }\n  button.goa-button:disabled, button.goa-button:disabled.goa--secondary, button.goa-button:disabled.goa--tertiary,\n  input[type='button'].goa-button:disabled,\n  input[type='button'].goa-button:disabled.goa--secondary,\n  input[type='button'].goa-button:disabled.goa--tertiary,\n  input[type='submit'].goa-button:disabled,\n  input[type='submit'].goa-button:disabled.goa--secondary,\n  input[type='submit'].goa-button:disabled.goa--tertiary {\n    pointer-events: none;\n    color: #666;\n    background-color: #f1f1f1;\n    border-color: #f1f1f1; }\n  button.goa-button:hover,\n  input[type='button'].goa-button:hover,\n  input[type='submit'].goa-button:hover {\n    border-color: #004f84;\n    background: #004f84; }\n  button.goa-button:focus, button.goa-button:active,\n  input[type='button'].goa-button:focus,\n  input[type='button'].goa-button:active,\n  input[type='submit'].goa-button:focus,\n  input[type='submit'].goa-button:active {\n    border-color: #004f84;\n    box-shadow: 0 0 0 3px #feba35;\n    background: #004f84;\n    outline: none; }\n  button.goa-button.goa--secondary,\n  input[type='button'].goa-button.goa--secondary,\n  input[type='submit'].goa-button.goa--secondary {\n    border: 2px solid #0070c4;\n    background: #fff;\n    color: #0070c4; }\n    button.goa-button.goa--secondary:hover,\n    input[type='button'].goa-button.goa--secondary:hover,\n    input[type='submit'].goa-button.goa--secondary:hover {\n      border-color: #004f84;\n      background: #fff;\n      color: #004f84; }\n    button.goa-button.goa--secondary:focus, button.goa-button.goa--secondary:active,\n    input[type='button'].goa-button.goa--secondary:focus,\n    input[type='button'].goa-button.goa--secondary:active,\n    input[type='submit'].goa-button.goa--secondary:focus,\n    input[type='submit'].goa-button.goa--secondary:active {\n      color: #004f84;\n      background-color: #fff;\n      border: 2px solid #004f84;\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  button.goa-button.goa--tertiary,\n  input[type='button'].goa-button.goa--tertiary,\n  input[type='submit'].goa-button.goa--tertiary {\n    border-color: #dcdcdc;\n    background: #fff;\n    color: #0070c4; }\n    button.goa-button.goa--tertiary:hover,\n    input[type='button'].goa-button.goa--tertiary:hover,\n    input[type='submit'].goa-button.goa--tertiary:hover {\n      background: #fff;\n      color: #004f84; }\n    button.goa-button.goa--tertiary:focus, button.goa-button.goa--tertiary:active,\n    input[type='button'].goa-button.goa--tertiary:focus,\n    input[type='button'].goa-button.goa--tertiary:active,\n    input[type='submit'].goa-button.goa--tertiary:focus,\n    input[type='submit'].goa-button.goa--tertiary:active {\n      border: 2px solid #004f84;\n      color: #004f84;\n      background-color: #fff;\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  button.goa-button.goa--borderless,\n  input[type='button'].goa-button.goa--borderless,\n  input[type='submit'].goa-button.goa--borderless {\n    background: none;\n    color: var(--color-blue-500);\n    border: none;\n    transition: transform 0.1s ease-in-out;\n    transform: scale(1); }\n    button.goa-button.goa--borderless:hover,\n    input[type='button'].goa-button.goa--borderless:hover,\n    input[type='submit'].goa-button.goa--borderless:hover {\n      background: var(--color-blue-100);\n      color: var(--color-blue-500); }\n    button.goa-button.goa--borderless:focus, button.goa-button.goa--borderless:active,\n    input[type='button'].goa-button.goa--borderless:focus,\n    input[type='button'].goa-button.goa--borderless:active,\n    input[type='submit'].goa-button.goa--borderless:focus,\n    input[type='submit'].goa-button.goa--borderless:active {\n      background-color: var(--color-blue-100);\n      outline: none;\n      box-shadow: none; }\n    button.goa-button.goa--borderless:active,\n    input[type='button'].goa-button.goa--borderless:active,\n    input[type='submit'].goa-button.goa--borderless:active {\n      transform: scale(0.95); }\n  button.goa-button.goa--red,\n  input[type='button'].goa-button.goa--red,\n  input[type='submit'].goa-button.goa--red {\n    color: var(--color-red-500);\n    background: none;\n    border: none;\n    transition: transform 0.1s ease-in-out;\n    transform: scale(1); }\n    button.goa-button.goa--red:hover,\n    input[type='button'].goa-button.goa--red:hover,\n    input[type='submit'].goa-button.goa--red:hover {\n      background: var(--color-red-100);\n      color: var(--color-red-500); }\n    button.goa-button.goa--red:focus, button.goa-button.goa--red:active,\n    input[type='button'].goa-button.goa--red:focus,\n    input[type='button'].goa-button.goa--red:active,\n    input[type='submit'].goa-button.goa--red:focus,\n    input[type='submit'].goa-button.goa--red:active {\n      background: var(--color-red-100);\n      color: var(--color-red-500);\n      outline: none;\n      box-shadow: none; }\n    button.goa-button.goa--red:active,\n    input[type='button'].goa-button.goa--red:active,\n    input[type='submit'].goa-button.goa--red:active {\n      transform: scale(0.95); }\n";
-styleInject(css_248z$5);
-
-var GoAButton = function GoAButton(_ref) {
-  var _ref$buttonType = _ref.buttonType,
-      buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
-      _ref$buttonSize = _ref.buttonSize,
-      buttonSize = _ref$buttonSize === void 0 ? 'normal' : _ref$buttonSize,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? null : _ref$title,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-      props = _objectWithoutProperties(_ref, ["buttonType", "buttonSize", "title", "children", "onClick"]);
-
-  var btnTypeClass = buttonType === 'primary' ? '' : "goa--".concat(buttonType);
-  var btnSize = buttonSize === 'small' ? 'btn-small' : '';
-  return /*#__PURE__*/React.createElement("button", Object.assign({
-    className: "goa-button ".concat(btnSize, " ").concat(btnTypeClass),
-    title: title,
-    onClick: onClick
-  }, props), children);
-};
-GoAButton.propTypes = {
-  buttonSize: propTypes.string,
-  buttonType: propTypes.string,
-  title: propTypes.string,
-  children: propTypes.node,
-  onClick: propTypes.func
-};
-
-var css_248z$6 = "/* Palette */\n/* Semantic usages */\n.goa-header {\n  display: flex;\n  align-items: center;\n  padding-left: 28px;\n  padding-right: 28px; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-header {\n      padding-left: 28px;\n      padding-right: 28px; } }\n  @media screen and (max-width: 767px) {\n    .goa-header {\n      padding-left: 28px;\n      padding-right: 28px; } }\n  .goa-header.goa-microsite-header,\n  .goa-header > .goa-microsite-header {\n    background-color: #fff;\n    top: 0;\n    display: flex;\n    justify-content: space-between; }\n  .goa-header.goa-official-site-header,\n  .goa-header > .goa-official-site-header {\n    font-size: 12px;\n    background-color: #f1f1f1;\n    line-height: 22px; }\n    .goa-header.goa-official-site-header .site-text,\n    .goa-header > .goa-official-site-header .site-text {\n      white-space: nowrap;\n      padding: 0 4px; }\n    .goa-header.goa-official-site-header .service-level,\n    .goa-header > .goa-official-site-header .service-level {\n      padding: 0 3px;\n      font-weight: bold;\n      vertical-align: baseline;\n      text-transform: capitalize; }\n    .goa-header.goa-official-site-header .service-level--alpha,\n    .goa-header > .goa-official-site-header .service-level--alpha {\n      background-color: #feba35;\n      color: #333; }\n    .goa-header.goa-official-site-header .service-level--beta,\n    .goa-header > .goa-official-site-header .service-level--beta {\n      background-color: #0081a2;\n      color: #fff; }\n    .goa-header.goa-official-site-header .service-level--live,\n    .goa-header > .goa-official-site-header .service-level--live {\n      height: 16px;\n      width: 16px;\n      padding: 0;\n      color: transparent;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center center; }\n  .goa-header .web-link {\n    color: #0070c4;\n    text-align: left; }\n";
-styleInject(css_248z$6);
-
-var css_248z$7 = "a.microsite-link {\n  color: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  height: 66px; }\n  a.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n    outline: none; }\n  a.microsite-link .image-desktop-tablet {\n    width: 150px;\n    height: 42px;\n    display: inline-block;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n    @media screen and (max-width: 767px) {\n      a.microsite-link .image-desktop-tablet {\n        display: none; } }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    a.microsite-link .image-mobile {\n      display: none; } }\n  @media screen and (min-width: 1200px) {\n    a.microsite-link .image-mobile {\n      display: none; } }\n  @media screen and (max-width: 767px) {\n    a.microsite-link .image-mobile {\n      width: 34px;\n      height: 34px;\n      display: inline-block;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center center; } }\n  a.microsite-link .name {\n    margin-left: 8px;\n    font-size: 16px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n    @media screen and (min-width: 1200px) {\n      a.microsite-link .name {\n        margin-left: 28px; } }\n    @media screen and (min-width: 768px) and (max-width: 1199px) {\n      a.microsite-link .name {\n        margin-left: 28px; } }\n";
-styleInject(css_248z$7);
-
-/* eslint-disable-next-line */
-
-var GoaMicrositeLogo = function GoaMicrositeLogo(props) {
-  return /*#__PURE__*/React.createElement("a", {
-    href: props.serviceHome,
-    "aria-label": props.serviceHome,
-    className: "microsite-link"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "image-desktop-tablet"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "image-mobile"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "name"
-  }, props.serviceName));
-};
-
-var GoAHeader = function GoAHeader(props) {
-  var serviceLevelCss = classnames('service-level', "service-level--".concat(props.serviceLevel.toString().toLowerCase()));
-
-  function serviceLevelFormatted() {
-    return props.serviceLevel.toLowerCase();
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
-    className: "goa-header goa-official-site-header"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-    className: serviceLevelCss
-  }, serviceLevelFormatted())), props.serviceLevel === 'live' && /*#__PURE__*/React.createElement("div", {
-    className: "site-text"
-  }, "An official site of the ", /*#__PURE__*/React.createElement("a", {
-    href: "https://www.alberta.ca/index.aspx",
-    className: "web-link"
-  }, "Alberta Government")), props.serviceLevel !== 'live' && /*#__PURE__*/React.createElement("div", {
-    className: "site-text"
-  }, "This is a new ", /*#__PURE__*/React.createElement("a", {
-    href: "https://www.alberta.ca/index.aspx",
-    className: "web-link"
-  }, "Alberta Government"), " service")), /*#__PURE__*/React.createElement("div", {
-    className: "goa-header goa-microsite-header"
-  }, /*#__PURE__*/React.createElement(GoaMicrositeLogo, {
-    serviceName: props.serviceName,
-    serviceHome: props.serviceHome
-  }), /*#__PURE__*/React.createElement("div", null, props.children)));
-};
-
-var css_248z$8 = ".goa-hero-banner-content {\n  font-size: 24px;\n  line-height: 32px;\n  margin: 0;\n  color: #fff; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-hero-banner-content {\n      width: 80%; } }\n  @media screen and (min-width: 1200px) {\n    .goa-hero-banner-content {\n      width: 40%; } }\n  .goa-hero-banner-content:last-of-type {\n    margin-bottom: 28px; }\n";
-styleInject(css_248z$8);
-
-var GoAHeroBannerContent = function GoAHeroBannerContent(_ref) {
-  var content = _ref.content,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("p", {
-    className: "goa-hero-banner-content",
-    role: "note"
-  }, children || content);
-};
-
-var css_248z$9 = "/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\n/* This style is from the alberta design system */\n.goa-link-button.goa-link-button {\n  display: inline-block;\n  text-decoration: none; }\n  .goa-link-button.goa-link-button {\n    box-sizing: border-box;\n    min-width: 70px;\n    padding: 12px;\n    border: 2px solid #0070c4;\n    border-radius: 4px;\n    background: #0070c4;\n    cursor: pointer;\n    color: #fff;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1em; }\n    .goa-link-button.goa-link-button.btn-small {\n      font-size: 16px;\n      padding: 8px;\n      margin: 12px 12px 0 0; }\n    .goa-link-button.goa-link-button:last-of-type {\n      margin-right: 0; }\n    .goa-link-button.goa-link-button:disabled, .goa-link-button.goa-link-button:disabled.goa--secondary, .goa-link-button.goa-link-button:disabled.goa--tertiary {\n      pointer-events: none;\n      color: #666;\n      background-color: #f1f1f1;\n      border-color: #f1f1f1; }\n    .goa-link-button.goa-link-button:hover {\n      border-color: #004f84;\n      background: #004f84; }\n    .goa-link-button.goa-link-button:focus, .goa-link-button.goa-link-button:active {\n      border-color: #004f84;\n      box-shadow: 0 0 0 3px #feba35;\n      background: #004f84;\n      outline: none; }\n    .goa-link-button.goa-link-button.goa--secondary {\n      border: 2px solid #0070c4;\n      background: #fff;\n      color: #0070c4; }\n      .goa-link-button.goa-link-button.goa--secondary:hover {\n        border-color: #004f84;\n        background: #fff;\n        color: #004f84; }\n      .goa-link-button.goa-link-button.goa--secondary:focus, .goa-link-button.goa-link-button.goa--secondary:active {\n        color: #004f84;\n        background-color: #fff;\n        border: 2px solid #004f84;\n        box-shadow: 0 0 0 3px #feba35;\n        outline: none; }\n    .goa-link-button.goa-link-button.goa--tertiary {\n      border-color: #dcdcdc;\n      background: #fff;\n      color: #0070c4; }\n      .goa-link-button.goa-link-button.goa--tertiary:hover {\n        background: #fff;\n        color: #004f84; }\n      .goa-link-button.goa-link-button.goa--tertiary:focus, .goa-link-button.goa-link-button.goa--tertiary:active {\n        border: 2px solid #004f84;\n        color: #004f84;\n        background-color: #fff;\n        box-shadow: 0 0 0 3px #feba35;\n        outline: none; }\n    .goa-link-button.goa-link-button.goa--borderless {\n      background: none;\n      color: var(--color-blue-500);\n      border: none;\n      transition: transform 0.1s ease-in-out;\n      transform: scale(1); }\n      .goa-link-button.goa-link-button.goa--borderless:hover {\n        background: var(--color-blue-100);\n        color: var(--color-blue-500); }\n      .goa-link-button.goa-link-button.goa--borderless:focus, .goa-link-button.goa-link-button.goa--borderless:active {\n        background-color: var(--color-blue-100);\n        outline: none;\n        box-shadow: none; }\n      .goa-link-button.goa-link-button.goa--borderless:active {\n        transform: scale(0.95); }\n    .goa-link-button.goa-link-button.goa--red {\n      color: var(--color-red-500);\n      background: none;\n      border: none;\n      transition: transform 0.1s ease-in-out;\n      transform: scale(1); }\n      .goa-link-button.goa-link-button.goa--red:hover {\n        background: var(--color-red-100);\n        color: var(--color-red-500); }\n      .goa-link-button.goa-link-button.goa--red:focus, .goa-link-button.goa-link-button.goa--red:active {\n        background: var(--color-red-100);\n        color: var(--color-red-500);\n        outline: none;\n        box-shadow: none; }\n      .goa-link-button.goa-link-button.goa--red:active {\n        transform: scale(0.95); }\n  .goa-link-button.goa-link-button.right-arrow::after {\n    color: #fff;\n    margin-left: 8px;\n    content: '\\2192'; }\n  .goa-link-button.goa-link-button.up-arrow::after {\n    color: #fff;\n    margin-left: 8px;\n    content: '\\2191'; }\n  .goa-link-button.goa-link-button:visited, .goa-link-button.goa-link-button:link {\n    color: #fff; }\n";
-styleInject(css_248z$9);
-
-var GoAHeroBannerLink = function GoAHeroBannerLink(_ref) {
-  var linkText = _ref.linkText,
-      linkUrl = _ref.linkUrl;
-  return linkText && linkUrl ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-    className: "goa-link-button right-arrow",
-    href: linkUrl,
-    role: "link"
-  }, linkText)) : /*#__PURE__*/React.createElement(Fragment$1, null);
-};
-
-var css_248z$a = "/* Palette */\n/* Semantic usages */\n.goa-hero {\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-end;\n  align-items: stretch;\n  flex-direction: column;\n  height: 600px;\n  border-bottom: 8px solid #0081a2;\n  color: #fff;\n  background-position: center center;\n  width: 100%;\n  padding: 56px 28px; }\n  .goa-hero h1 {\n    margin: 0 0 28px;\n    padding: 0;\n    font-size: 48px;\n    line-height: 56px;\n    font-weight: 700;\n    color: #fff; }\n";
-styleInject(css_248z$a);
-
-var GoAHeroBanner = function GoAHeroBanner(_ref) {
-  var title = _ref.title,
-      backgroundUrl = _ref.backgroundUrl,
-      content = _ref.content,
-      linkText = _ref.linkText,
-      linkUrl = _ref.linkUrl,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-hero",
-    style: {
-      backgroundImage: "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url('".concat(backgroundUrl, "')")
-    }
-  }, /*#__PURE__*/React.createElement("h1", {
-    role: "heading",
-    "aria-level": 1
-  }, title), children || /*#__PURE__*/React.createElement(Fragment$1, null, content && /*#__PURE__*/React.createElement(GoAHeroBannerContent, {
-    content: content
-  }), linkText && linkUrl && /*#__PURE__*/React.createElement(GoAHeroBannerLink, {
-    linkText: linkText,
-    linkUrl: linkUrl
-  })));
-};
-GoAHeroBanner.defaultProps = {
-  content: '',
-  linkText: '',
-  linkUrl: ''
-};
-
-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: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.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";
-styleInject(css_248z$b);
-
-var css_248z$c = ".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  border: none; }\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$c);
-
-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.createElement("div", {
-    style: {
-      width: _size
-    },
-    className: "goa-icon",
-    "data-testid": "icon-".concat(type)
-  }, /*#__PURE__*/React.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";
-  }
-}
+const GoAFormItem = ({
+  children,
+  helpText,
+  error,
+  optional,
+  name,
+  label
+}) => {
+  return jsx("goa-form-item", Object.assign({
+    name: name,
+    label: label,
+    error: error,
+    optional: optional,
+    helptext: helpText
+  }, {
+    children: children
+  }), void 0);
+};
+
+var formItem = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  GoAFormItem: GoAFormItem,
+  'default': GoAFormItem
+});
 
-function GoAIconButton(_ref) {
-  var type = _ref.type,
-      disabled = _ref.disabled,
-      _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.createElement("button", {
+const GoAHeroBanner = ({
+  title,
+  backgroundUrl,
+  children
+}) => {
+  return jsx("goa-hero-banner", Object.assign({
     title: title,
-    disabled: disabled,
-    className: "goa-icon-button goa-icon-button-".concat(variant),
-    "data-testid": testId,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
+    backgroundurl: backgroundUrl
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAHeroBannerContent = ({
+  children
+}) => {
+  return jsx("div", Object.assign({
+    slot: "content"
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAHeroBannerActions = ({
+  children
+}) => {
+  return jsx("div", Object.assign({
+    slot: "actions"
+  }, {
+    children: children
+  }), void 0);
+};
+
+function GoAIcon({
+  type,
+  theme = 'outline',
+  size = 'medium'
+}) {
+  return jsx("goa-icon", {
     type: type,
+    theme: theme,
     size: size
-  }));
-}
-
-var css_248z$d = ".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";
-styleInject(css_248z$d);
-
-var css_248z$e = "/* 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";
-styleInject(css_248z$e);
-
-var css_248z$f = ":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: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";
-styleInject(css_248z$f);
-
-var css_248z$g = ".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$g);
-
-var css_248z$h = ":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-height: 2.625rem;\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$h);
-
-var css_248z$i = ":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: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  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  .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--disabled {\n  opacity: 0.5;\n  cursor: default;\n  border-color: var(--color-black); }\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  .goa-input--disabled input:hover {\n    cursor: default !important; }\n\n.goa-input .input--bare {\n  border: none; }\n\n.goa-state--error .goa-input {\n  border: 2px solid var(--color-red); }\n";
-styleInject(css_248z$i);
-
-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,
-      disabled = _ref.disabled,
-      readonly = _ref.readonly,
-      other = _objectWithoutProperties(_ref, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
-
-  var inputRef = React.useRef(null);
-  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;
-
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-    }
-  }, [focused, inputRef]);
-  var rootCss = classnames({
-    'goa-input': true,
-    'goa-input--disabled': disabled
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: rootCss
-  }, leadingIcon && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-leading-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: leadingIcon
-  })), /*#__PURE__*/React.createElement("input", Object.assign({
-    ref: inputRef,
-    className: classnames((_classNames = {}, _defineProperty(_classNames, "input--".concat(variant), true), _defineProperty(_classNames, 'input--leading-icon', leadingIcon), _classNames)),
-    readOnly: readonly,
-    disabled: disabled,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
+  }, void 0);
+}
+
+const GoAIconButton = ({
+  type,
+  disabled,
+  variant: _variant = 'primary',
+  onClick,
+  size: _size = 'medium',
+  title,
+  children
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
     }
-  }, other)), trailingIcon && !onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    size: "medium",
-    type: trailingIcon
-  })), trailingIcon && onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    onClick: onTrailingIconClick,
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIconButton, {
-    variant: "tertiary",
-    onClick: onTrailingIconClick,
-    disabled: disabled,
-    size: "medium",
-    type: trailingIcon,
-    testId: "".concat(name, "-input-trailing-button")
-  })));
-};
 
-var css_248z$j = ".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$j);
-
-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.createElement("div", {
-    className: "goa-scrollable",
-    style: style,
-    "data-testid": testId
-  }, children);
-};
-
-var css_248z$k = "/* 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$k);
+    const current = ref.current;
 
-var css_248z$l = "/* 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$l);
+    const listener = e => {
+      onClick();
+    };
 
-var css_248z$m = ":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: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  padding: 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$m);
-
-var css_248z$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: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/* Forms */\n.goa-dropdown-box {\n  position: relative; }\n\n.goa-dropdown-box input[readonly] {\n  cursor: pointer; }\n\n.goa-dropdown-background {\n  position: fixed;\n  inset: 0;\n  opacity: 1; }\n\n.goa-icon ~ input {\n  padding-left: 0.5rem; }\n\n.goa-dropdown-list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  padding: 0;\n  margin: 0;\n  margin-top: 3px;\n  list-style-type: none;\n  background: var(--color-white);\n  border-radius: var(--input-border-radius);\n  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.1);\n  z-index: 99; }\n\n.goa-dropdown-list hr {\n  border: none;\n  border-top: 1px solid var(--color-gray-100);\n  margin: 0; }\n\n.goa-dropdown-list label {\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-bold);\n  padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n  margin: 0;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--color-gray-900); }\n  .goa-dropdown-option:hover {\n    background: var(--color-gray-100);\n    color: var(--color-blue-600); }\n  .goa-dropdown-option:last-child:hover {\n    border-bottom-left-radius: var(--input-border-radius);\n    border-bottom-right-radius: var(--input-border-radius); }\n\n.goa-dropdown-option--disabled {\n  opacity: 0.5;\n  cursor: default; }\n  .goa-dropdown-option--disabled:hover {\n    cursor: default;\n    color: var(--color-gray-700); }\n\n.goa-dropdown-option--selected {\n  background: var(--color-blue-500);\n  color: var(--color-white); }\n  .goa-dropdown-option--selected:hover {\n    background: var(--color-blue-600);\n    color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n  padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n  border: 2px solid var(--color-red); }\n";
-styleInject(css_248z$n);
-
-var GoADropdownOption = function GoADropdownOption(props) {
-  var onClick = function onClick() {
-    if (!props.disabled) {
-      props.onClick(props.value);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement("li", {
-    key: props.value,
-    style: {
-      display: props.visible ? 'block' : 'none'
-    },
-    className: "\n        goa-dropdown-option\n        ".concat(props.disabled ? 'goa-dropdown-option--disabled' : '', "\n        ").concat(props.selected ? 'goa-dropdown-option--selected' : '', "\n      "),
-    "data-testid": props._testId,
-    onClick: onClick
-  }, props.children || props.label);
-};
-
-var MAX_HEIGHT = 300;
-var GoADropdown = function GoADropdown(_ref) {
-  var _ref$selectedValues = _ref.selectedValues,
-      selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
-      props = _objectWithoutProperties(_ref, ["selectedValues"]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMenuVisible = _useState2[0],
-      _setMenuVisibility = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filter = _useState4[0],
-      setFilter = _useState4[1];
-  /**
-   * Override the useState method to set the menu visibility to allow for conditional rendering
-   */
-
-
-  function setMenuVisibility(isVisible) {
-    if (!props.disabled) {
-      _setMenuVisibility(isVisible);
-    }
-  }
-  /**
-   * Binds the children with additional properties and events
-   */
-
-
-  function getChildren() {
-    var _filter = filter.toLowerCase();
-
-    return React.Children.map(props.children, function (child) {
-      if (child.props.value) {
-        var visible = !_filter || child.props.value.toLowerCase().includes(_filter) || child.props.label.toLowerCase().includes(_filter);
-        return React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
-          visible: visible,
-          onClick: handleSelection,
-          selected: selectedValues.includes(child.props.value),
-          _testId: "".concat(props.name, "-dropdown-option--").concat(child.props.value)
-        }));
-      }
-
-      if (filter) {
-        return;
-      }
-
-      return child;
-    });
-  }
-  /**
-   * Allows for conditional value relaying to the parent component and updates the selected labels
-   */
-
-
-  function handleSelection(value) {
-    var values;
-
-    if (props.multiSelect) {
-      if (selectedValues.includes(value)) {
-        values = selectedValues.filter(function (v) {
-          return v !== value;
-        });
-      } else {
-        values = [].concat(_toConsumableArray(selectedValues), [value]);
-      }
-    } else {
-      values = selectedValues.includes(value) ? [] : [value];
+    current.addEventListener('_click', listener);
+    return () => {
+      current.removeEventListener('_click', listener);
+    };
+  }, [ref, onClick]);
+  return jsx("goa-icon-button", Object.assign({
+    ref: ref,
+    type: type,
+    disabled: disabled,
+    variant: _variant,
+    size: _size,
+    title: title
+  }, {
+    children: children
+  }), void 0);
+};
+
+/*! *****************************************************************************
+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.
+***************************************************************************** */
+
+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;
+}
+
+const GoAInput = ({
+  id,
+  name,
+  type,
+  leadingIcon,
+  trailingIcon,
+  variant: _variant = 'goa',
+  focused,
+  disabled,
+  readonly,
+  value,
+  placeholder,
+  error,
+  onTrailingIconClick,
+  onChange
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
     }
 
-    props.onChange(props.name, values);
-    toggleMenuVisibility();
-  }
-  /**
-   * Controls whether the menu is hidden or not when clicked
-   */
-
-
-  function toggleMenuVisibility() {
-    // always show if hidden
-    if (!isMenuVisible) {
-      setMenuVisibility(true);
-    } // only hide if not multi select
+    const current = ref.current;
 
+    const changeListener = e => {
+      const {
+        name,
+        value
+      } = e.detail.data;
+      onChange(name, value);
+    }; // TODO: determinw the propery type of the e (CustomEvent does not work)
 
-    if (isMenuVisible && !props.multiSelect) {
-      setMenuVisibility(false);
-      setFilter('');
-    }
-  }
-  /**
-   * Generates a description of the selected options
-   */
-
-
-  function getSelectedLabel() {
-    var selectedLabels = React.Children.map(props.children, function (child) {
-      return child;
-    }).filter(function (child) {
-      return selectedValues.includes(child.props.value);
-    }).map(function (child) {
-      return child.props.label;
-    });
 
-    if (props.multiSelect && selectedLabels.length > 1) {
-      return "".concat(selectedLabels.length, " items selected");
-    }
+    const clickListener = e => {
+      onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
+    };
 
-    if (selectedLabels.length === 1) {
-      return selectedLabels[0];
-    }
+    current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
 
-    return '';
-  }
+    current.addEventListener('_ontrailingiconclick', clickListener);
+    return () => {
+      current.removeEventListener('_change', changeListener);
+      current.removeEventListener('_ontrailingiconclick', clickListener);
+    };
+  }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
+  //   if (focused) {
+  //     inputRef.current?.focus();
+  //   } else {
+  //     inputRef.current?.blur();
+  //   }
+  // }, [focused, inputRef]);
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-dropdown-box"
-  }, isMenuVisible && /*#__PURE__*/React.createElement("div", {
-    "data-testid": "".concat(props.name, "-dropdown-background"),
-    className: "goa-dropdown-background",
-    onClick: function onClick() {
-      return setMenuVisibility(false);
-    }
-  }), /*#__PURE__*/React.createElement("div", null, (!isMenuVisible || !props.autoComplete) && /*#__PURE__*/React.createElement("div", {
-    onClick: toggleMenuVisibility,
-    "data-testid": "".concat(props.name, "-dropdown")
-  }, /*#__PURE__*/React.createElement(GoAInput, {
-    type: "text",
-    disabled: props.disabled,
-    trailingIcon: "chevron-down",
-    leadingIcon: props.leadingIcon,
-    name: "search",
-    readonly: true,
-    onChange: null,
-    placeholder: props.placeholder,
-    value: getSelectedLabel()
-  })), isMenuVisible && /*#__PURE__*/React.createElement(React.Fragment, null, props.autoComplete && /*#__PURE__*/React.createElement(GoAInput, {
+  return jsx("goa-input", {
+    ref: ref,
+    type: type,
+    name: name,
+    id: id,
+    leadingicon: leadingIcon,
+    trailingicon: trailingIcon,
+    variant: _variant,
+    disabled: disabled,
+    readonly: readonly,
+    placeholder: placeholder,
+    error: error,
+    value: value,
+    handletrailingiconclick: !!onTrailingIconClick
+  }, void 0);
+};
+const GoAInputText = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "text"
+  }), void 0);
+};
+const GoAInputPassword = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "password"
+  }), void 0);
+};
+const GoAInputDate = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "date"
+  }), void 0);
+};
+const GoAInputTime = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "time"
+  }), void 0);
+};
+const GoAInputDateTime = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "datetime-local"
+  }), void 0);
+};
+const GoAInputEmail = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "email"
+  }), void 0);
+};
+const GoAInputSearch = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
     type: "text",
-    placeholder: "Filter",
-    focused: isMenuVisible,
-    variant: "goa",
-    name: "filter",
-    value: filter,
-    trailingIcon: filter.length > 0 ? 'close-circle' : 'search',
-    onTrailingIconClick: function onTrailingIconClick() {
-      return filter.length > 0 && setFilter('');
-    },
-    onChange: function onChange(_name, value) {
-      return setFilter(value);
-    }
-  }), /*#__PURE__*/React.createElement("ul", {
-    className: "goa-dropdown-list"
-  }, /*#__PURE__*/React.createElement(GoAScrollable, {
-    vertical: true,
-    height: props.maxHeight || MAX_HEIGHT
-  }, getChildren())))));
-};
-
-var css_248z$o = ":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/* Radio Group */\n.goa-radio-group--horizontal {\n  display: flex;\n  flex-direction: row; }\n\n.goa-radio-group--vertical {\n  display: inline-flex;\n  flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n  --goa-border-color: var(--color-gray-700);\n  --goa-border-color--checked: var(--color-blue-500);\n  --goa-radio-color--error: var(--color-red);\n  --goa-radio-outline-color: var(--color-orange);\n  --goa-radio-outline-width: 3px;\n  --goa-radio-diameter: 1.5rem;\n  --goa-radio-border-width: 1px;\n  --goa-radio-border-width--checked: 7px;\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: 3rem; }\n\n.goa-radio:hover {\n  cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n  box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n  display: none; }\n\n.goa-radio-label {\n  padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n  font-weight: var(--fw-regular); }\n\n.goa-radio-icon {\n  display: inline-block;\n  height: var(--goa-radio-diameter);\n  width: var(--goa-radio-diameter);\n  border-radius: 50%;\n  background-color: #fff;\n  transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n  box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n  cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color);\n  opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n  opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n  border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: 2px solid var(--goa-radio-color--error); }\n";
-styleInject(css_248z$o);
-
-var GoARadio = function GoARadio(props) {
-  function getCss() {
-    return classnames({
-      'goa-radio': true,
-      'goa-radio--disabled': props.disabled
-    });
-  }
-
-  function onRadioChange(e) {
-    props.onChange(e.target.value);
-  }
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: getCss()
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
+    trailingIcon: "search"
+  }), void 0);
+};
+const GoAInputUrl = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "url"
+  }), void 0);
+};
+const GoAInputTel = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "tel"
+  }), void 0);
+};
+const GoAInputFile = props => {
+  return jsx("input", {
+    id: props.id,
     name: props.name,
-    value: props.value,
-    checked: props.checked,
-    disabled: props.disabled,
-    onChange: onRadioChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "goa-radio-icon"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "goa-radio-label"
-  }, props.children || props.label));
-};
-
-var GoARadioGroup = function GoARadioGroup(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      children = _ref.children,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
-      onChange = _ref.onChange,
-      childAttrs = _objectWithoutProperties(_ref, ["name", "value", "children", "orientation", "onChange"]);
-
-  function onChangeHandler(value) {
-    onChange(name, value);
-  }
-
-  function getChildren() {
-    return Children.map(children, function (child) {
-      var key = "".concat(name, "-").concat(child.props.value);
-
-      var _name = "".concat(name, "-").concat(Date.now());
-
-      return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
-        name: _name,
-        checked: child.props.value === value,
-        onChange: onChangeHandler,
-        key: key
-      }));
-    });
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-radio-group--".concat(orientation)
-  }, getChildren());
-};
-
-var css_248z$p = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n";
-styleInject(css_248z$p);
-
-var GoASkeletonElement = function GoASkeletonElement(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
-  var classes = "skeleton ".concat(type);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes
-  });
-};
-
-var GoASkeletonContent = function GoASkeletonContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
-
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
-      type: "text"
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-content"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "title"
-  }), elements));
-};
-
-var GoASkeletonGridColumnContent = function GoASkeletonGridColumnContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
-
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
-      type: "text"
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-content"
-  }, /*#__PURE__*/React.createElement("div", null, elements));
-};
-
-var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
-
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
-      type: "text"
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-image-content"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "thumbnail"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-image-content__text"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "title"
-  }), elements));
-};
-
-var css_248z$q = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n\n.goa-card {\n  box-sizing: border-box;\n  background: #fff;\n  border: 1px solid #dcdcdc;\n  transition: opacity 300ms ease-in-out;\n  /* size variants ***/ }\n  .goa-card .card-content {\n    padding: 28px;\n    border-top: 8px solid #0081a2; }\n    .goa-card .card-content .goa-title,\n    .goa-card .card-content .goa-text,\n    .goa-card .card-content .goa-content {\n      margin-bottom: 28px; }\n    .goa-card .card-content .goa-text {\n      color: #333;\n      font-size: var(--fs-base);\n      line-height: 28px; }\n    .goa-card .card-content .goa-footer {\n      font-size: var(--fs-base); }\n    .goa-card .card-content .goa-title {\n      font-size: var(--fs-xl);\n      font-weight: 400;\n      line-height: 32px; }\n  .goa-card .goa-poster {\n    position: relative;\n    display: block;\n    padding: 56.25% 0 0;\n    overflow: hidden;\n    background: #e5e5e5; }\n    .goa-card .goa-poster:empty {\n      display: none; }\n    .goa-card .goa-poster img,\n    .goa-card .goa-poster iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: none; }\n  .goa-card .goa-poster-image img {\n    display: block;\n    width: 100%;\n    -o-object-fit: cover;\n       object-fit: cover; }\n  .goa-card.card-auto {\n    width: auto; }\n    .goa-card.card-auto .card {\n      flex-basis: auto;\n      width: auto; }\n  .goa-card a:hover {\n    color: #004f84;\n    text-decoration: none; }\n  .goa-card a:focus {\n    outline: 3px solid #feba35;\n    outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  padding-bottom: 56.25%; }\n  .goa-card[data-skeleton] .goa-poster-image img {\n    display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n  margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  max-height: 1rem; }\n";
-styleInject(css_248z$q);
-
-var GoACard = function GoACard(_ref) {
-  var title = _ref.title,
-      content = _ref.content,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? null : _ref$description,
-      _ref$cardImageUrl = _ref.cardImageUrl,
-      cardImageUrl = _ref$cardImageUrl === void 0 ? null : _ref$cardImageUrl,
-      _ref$titleUrl = _ref.titleUrl,
-      titleUrl = _ref$titleUrl === void 0 ? null : _ref$titleUrl,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$minWidth = _ref.minWidth,
-      minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
-      other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      imgHeight = _useState2[0],
-      setImgHeight = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: "goa-card",
-    "data-testid": "card-container",
+    type: "file",
+    onChange: e => props.onChange(e.target.name, e.target.value),
     style: {
-      minWidth: minWidth,
-      maxWidth: maxWidth
-    }
-  }, other), cardImageUrl && /*#__PURE__*/React.createElement("div", {
-    className: "goa-poster-image",
-    "data-testid": "card-img"
-  }, /*#__PURE__*/React.createElement("img", {
-    height: imgHeight,
-    src: cardImageUrl,
-    alt: "Card cardImageUrl"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "card-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-title",
-    "data-testid": "card-title"
-  }, titleUrl ? /*#__PURE__*/React.createElement("a", {
-    href: titleUrl,
-    "data-testid": "card-title-link"
-  }, title) : /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("p", {
-    className: "goa-text",
-    "data-testid": "card-content"
-  }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React.createElement("div", {
-    className: "goa-footer",
-    "data-testid": "card-footer"
-  }, children)));
-};
-
-var css_248z$r = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top; }\n  .goa-card-group .card-group-title {\n    font-size: 24px;\n    font-weight: bold;\n    color: #333; }\n  .goa-card-group .card-group-basic {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-basic-vue > div {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic-vue > div > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-column {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div {\n    margin: 14px; }\n  .goa-card-group .card-group-column-vue > div {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div > div {\n    margin: 14px; }\n";
-styleInject(css_248z$r);
-
-var GoACardGroup = function GoACardGroup(_ref) {
-  var _ref$title = _ref.title,
-      title = _ref$title === void 0 ? null : _ref$title,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
-      _ref$cardItems = _ref.cardItems,
-      cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
-
-  function getCards() {
-    if (children) {
-      return children;
+      backgroundColor: 'revert'
+    }
+  }, void 0);
+};
+const GoAInputMonth = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "month"
+  }), void 0);
+};
+const GoAInputNumber = props => {
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "number"
+  }), void 0);
+};
+const GoAInputRange = _a => {
+  var props = __rest(_a, ["step"]);
+
+  return jsx("input", Object.assign({}, props, {
+    type: "range",
+    onChange: e => props.onChange(e.target.name, e.target.value)
+  }), void 0);
+};
+
+const GoAModal = ({
+  title,
+  children,
+  open,
+  closable,
+  onClose
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
     }
 
-    return cardItems.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(GoACard, Object.assign({}, item, {
-        key: index
-      }), item.children);
-    });
-  }
+    const current = el.current;
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-card-group"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "card-group-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "card-group-".concat(layout)
-  }, getCards()));
-};
+    const listener = e => {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
 
-var css_248z$s = ":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.goa-checkbox {\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: calc(3rem - 4px); }\n  .goa-checkbox input[type='checkbox'] {\n    height: 0px;\n    width: 0px;\n    position: absolute; }\n\n.goa-checkbox--disabled {\n  opacity: 30%; }\n  .goa-checkbox--disabled .goa-checkbox-label {\n    cursor: default; }\n\n.goa-checkbox-container {\n  cursor: pointer;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 2px;\n  background-color: var(--color-white);\n  height: 1.5rem;\n  line-height: 1.5rem;\n  width: 1.5rem;\n  display: flex;\n  justify-content: center;\n  padding: 3px; }\n  .goa-checkbox-container svg {\n    fill: var(--color-white); }\n  .goa-checkbox-container.goa-checkbox--selected {\n    background-color: var(--color-blue-500); }\n  .goa-checkbox-container:hover:not(.goa-checkbox--selected) {\n    background-color: var(--color-gray-100); }\n  .goa-checkbox-container:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.goa-checkbox-text {\n  padding-left: 0.5rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n  font-weight: var(--fw-regular); }\n\n.goa-state--error .goa-checkbox-container {\n  border: 2px solid var(--color-red-500); }\n";
-styleInject(css_248z$s);
-
-/* eslint-disable-next-line */
-
-var GoACheckbox = function GoACheckbox(_ref) {
-  var name = _ref.name,
-      checked = _ref.checked,
-      disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? true : _ref$value,
-      content = _ref.content,
-      children = _ref.children,
-      _onChange = _ref.onChange;
-
-  var rootCss = function rootCss() {
-    return classnames({
-      'goa-checkbox': true,
-      'goa-checkbox--disabled': disabled
-    });
-  };
-
-  var checkboxCss = function checkboxCss() {
-    return classnames({
-      'goa-checkbox-container': true,
-      'goa-checkbox--selected': checked
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: rootCss()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: checkboxCss()
-  }, /*#__PURE__*/React.createElement("input", {
+    current.addEventListener('_close', listener);
+    return () => {
+      current.removeEventListener('_close', listener);
+    };
+  }, [el, onClose]);
+  return jsx("goa-modal", Object.assign({
+    ref: el,
+    title: title,
+    open: open,
+    closable: closable,
+    scrollable: true
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoANotification = ({
+  type: _type = "information",
+  children
+}) => {
+  return jsx("goa-notification", Object.assign({
+    type: _type
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAPageLoader = ({
+  type,
+  visible,
+  message,
+  progress,
+  variant
+}) => {
+  return jsx("goa-page-loader", {
+    type: type,
+    visible: visible,
+    message: message,
+    progress: progress,
+    variant: variant
+  }, void 0);
+};
+
+const GoARadio = ({
+  name,
+  label,
+  value,
+  disabled,
+  checked,
+  error,
+  testId,
+  children
+}) => {
+  return jsx("goa-radio-item", Object.assign({
     name: name,
-    type: "checkbox",
-    checked: checked,
+    label: label,
+    value: value,
+    error: error,
     disabled: disabled,
-    value: "".concat(value),
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.checked ? "".concat(value) : null);
-    }
-  }), indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
-    id: "dashmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 2"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "15",
-    height: "2"
-  })), !indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
-    id: "checkmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 12.18"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "goa-checkbox-text"
-  }, content || children));
-};
-
-var css_248z$t = "/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n";
-styleInject(css_248z$t);
-
-var GoAPageLoader = function GoAPageLoader(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'infinite' : _ref$type,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$message = _ref.message,
-      message = _ref$message === void 0 ? 'Loading...' : _ref$message,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 0 : _ref$value,
-      _ref$pagelock = _ref.pagelock,
-      pagelock = _ref$pagelock === void 0 ? true : _ref$pagelock,
-      _ref$displayType = _ref.displayType,
-      displayType = _ref$displayType === void 0 ? 'large' : _ref$displayType;
-
-  /**
-   * Set defaults
-   */
-  var progressMaxValue = 283;
-  var strokeDashoffset = 0;
-  /**
-   * Sets the progress if in progress mode.
-   * @param progress
-   * @returns
-   */
-
-  function setProgress(progress) {
-    if (type !== 'progress') {
+    checked: checked,
+    "data-testid": testId
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoARadioGroup = ({
+  name,
+  value,
+  children,
+  orientation: _orientation = 'vertical',
+  testId,
+  onChange
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
       return;
     }
 
-    if (progress === 0) {
-      strokeDashoffset = progressMaxValue;
-      return;
-    }
+    const listener = e => {
+      onChange(name, e.detail.value);
+    };
 
-    if (progress >= 100) {
+    const currentEl = el.current;
+    currentEl.addEventListener("_change", listener);
+    return () => {
+      currentEl.removeEventListener("_change", listener);
+    };
+  }, []);
+  return jsx("goa-radio-group", Object.assign({
+    "data-testid": testId,
+    ref: el,
+    name: name,
+    value: value,
+    orientation: _orientation
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAServiceLevelHeader = ({
+  level
+}) => {
+  return jsx("goa-service-level-header", {
+    level: level
+  }, void 0);
+};
+
+const GoATextArea = ({
+  name,
+  value,
+  placeholder,
+  rows,
+  disabled,
+  onChange
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
       return;
     }
 
-    var value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
-    strokeDashoffset = value;
-  }
+    const current = el.current;
 
-  if (visible) {
-    if (pagelock && displayType !== 'small') {
-      document.body.style.height = '100%';
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.removeProperty('height');
-      document.body.style.removeProperty('overflow');
-    }
+    const listener = e => {
+      const {
+        name,
+        value
+      } = e.detail.data;
+      onChange(name, value);
+    };
 
-    if (type === 'progress') {
-      setProgress(value);
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "progress-container--".concat(displayType),
-      onKeyDown: function onKeyDown(event) {
-        event.preventDefault();
-      }
-    }, /*#__PURE__*/React.createElement("svg", {
-      className: "".concat(displayType === 'large' ? 'svg' : "svg--small"),
-      fill: "none",
-      viewBox: "0 0 100 100",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("circle", {
-      className: "base-circle",
-      cx: "50",
-      cy: "50",
-      r: "45"
-    }), /*#__PURE__*/React.createElement("circle", {
-      className: "".concat(type === 'infinite' ? 'progress-circle--infinite' : 'progress-circle'),
-      cx: "50",
-      cy: "50",
-      r: "45",
-      style: {
-        strokeDashoffset: strokeDashoffset
-      }
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "progress-message--".concat(displayType)
-    }, message));
-  } else {
-    document.body.style.removeProperty('height');
-    document.body.style.removeProperty('overflow');
-    return null;
-  }
-};
-GoAPageLoader.propTypes = {
-  visible: propTypes.bool,
-  message: propTypes.string,
-  value: propTypes.number,
-  type: propTypes.string,
-  pagelock: propTypes.bool,
-  displayType: propTypes.string
-};
-
-var css_248z$u = "@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite; }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke-width: 7px; }\n\n.rotating-circle {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite;\n  display: block;\n  fill: transparent;\n  stroke-linecap: round;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n";
-styleInject(css_248z$u);
-
-var GoAElementLoader = function GoAElementLoader(_ref) {
-  var _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$baseColour = _ref.baseColour,
-      baseColour = _ref$baseColour === void 0 ? '#c8eef9' : _ref$baseColour,
-      _ref$spinnerColour = _ref.spinnerColour,
-      spinnerColour = _ref$spinnerColour === void 0 ? '#0070c4' : _ref$spinnerColour,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size;
-  var radius = size === 'small' ? 16 : 18;
-  var diameter = radius * 2;
-  var boxView = "0 0 ".concat(diameter, " ").concat(diameter);
-  /**
-   * Generates the value for an SVG arc.
-   * @param current       Current value.
-   * @param total         Maximum value.
-   * @param pathRadius    Radius of the SVG path.
-   * @param elementRadius Radius of the SVG container.
-   * @param isSemicircle  Whether the element should be a semicircle.
-   */
-
-  function getArc(current, total, pathRadius, elementRadius) {
-    var isSemicircle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    var value = Math.max(0, Math.min(current || 0, total));
-    var maxAngle = isSemicircle ? 180 : 359.9999;
-    var percentage = total === 0 ? maxAngle : value / total * maxAngle;
-
-    var start = _polarToCartesian(elementRadius, pathRadius, percentage);
-
-    var end = _polarToCartesian(elementRadius, pathRadius, 0);
-
-    var arcSweep = percentage <= 180 ? 0 : 1;
-    return "M ".concat(start, " A ").concat(pathRadius, " ").concat(pathRadius, " 0 ").concat(arcSweep, " 0 ").concat(end);
-  }
-
-  var DEGREE_IN_RADIANS = Math.PI / 180;
-  /**
-   * Converts polar cooradinates to Cartesian.
-   * @param elementRadius  Radius of the wrapper element.
-   * @param pathRadius     Radius of the path being described.
-   * @param angleInDegrees Degree to be converted.
-   */
-
-  function _polarToCartesian(elementRadius, pathRadius, angleInDegrees) {
-    var angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
-    var x = elementRadius + pathRadius * Math.cos(angleInRadians);
-    var y = elementRadius + pathRadius * Math.sin(angleInRadians);
-    return x + ' ' + y;
-  }
-
-  return visible && /*#__PURE__*/React.createElement("svg", {
-    className: "circular-loader",
-    fill: "none",
-    viewBox: boxView,
-    width: radius,
-    height: radius,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: radius,
-    cy: radius,
-    stroke: baseColour,
-    strokeWidth: "7",
-    r: radius - 4
-  }), /*#__PURE__*/React.createElement("path", {
-    d: getArc(75, 100, radius - 4, radius, false),
-    strokeWidth: "7",
-    stroke: spinnerColour,
-    strokeLinecap: "round"
-  }));
+    current.addEventListener('_change', listener);
+    return () => {
+      current.removeEventListener('_change', listener);
+    };
+  }, [el, onChange]);
+  return jsx("goa-textarea", {
+    ref: el,
+    name: name,
+    placeholder: placeholder,
+    value: value,
+    rows: rows,
+    disabled: disabled
+  }, void 0);
 };
 
-export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAHeroBannerContent, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge };