@abgov/react-components 3.3.2-beta.3 → 3.4.0-alpha.4

package/react-components.umd.js

@@ -1,2678 +1,827 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames'], factory) :
-  (global = global || self, factory(global.ReactComponents = {}, global.React, global.classnames));
-}(this, (function (exports, React, classnames) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  classnames = classnames && classnames.hasOwnProperty('default') ? classnames['default'] : classnames;
-
-  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);
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abgov/web-components'), require('react/jsx-runtime'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@abgov/web-components', 'react/jsx-runtime', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, null, global.jsxRuntime, global.React));
+})(this, (function (exports, webComponents, jsxRuntime, React) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    var GoAAppHeader = function GoAAppHeader(_a) {
+      var title = _a.title,
+          url = _a.url,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-app-header", __assign({
+        title: title,
+        url: url
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
 
-    return keys;
-  }
+      if (!css || typeof document === 'undefined') { return; }
 
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
 
-      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));
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
+        }
       } 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;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        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;
+        head.appendChild(style);
       }
-    }
 
-    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.");
-  }
-
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
-  /** @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
-  };
-
-  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;
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
       }
     }
 
-    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.');
-      }
-    }
+    var css_248z$3 = "goa-badge {\n  margin-left: 0.25rem;\n}";
+    styleInject(css_248z$3);
 
-    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;
-  }
-  });
-
-  /*
-  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;
-  	}
-  }
-
-  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;
-  };
-
-  /**
-   * 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) {}
+    var GoABadge = function GoABadge(_a) {
+      var type = _a.type,
+          content = _a.content,
+          icon = _a.icon,
+          testId = _a.testId;
+      return jsxRuntime.jsx("goa-badge", {
+        type: type,
+        content: content,
+        icon: icon,
+        testid: testId
+      }, void 0);
+    };
+    var GoAInfoBadge = function GoAInfoBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsx(GoABadge, {
+        type: "information",
+        icon: "information-circle",
+        content: content,
+        testId: testId
+      }, void 0);
+    };
+    var GoASuccessBadge = function GoASuccessBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsx(GoABadge, {
+        type: "success",
+        icon: "checkmark-circle",
+        content: content,
+        testId: testId
+      }, void 0);
+    };
+    var GoAWarningBadge = function GoAWarningBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsx(GoABadge, {
+        type: "warning",
+        icon: "warning",
+        content: content,
+        testId: testId
+      }, void 0);
+    };
+    var GoAEmergencyBadge = function GoAEmergencyBadge(_a) {
+      var content = _a.content,
+          testId = _a.testId;
+      return jsxRuntime.jsx(GoABadge, {
+        type: "emergency",
+        icon: "alert-circle",
+        content: content,
+        testId: testId
+      }, void 0);
     };
-  }
-
-  /**
-   * 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 : '')
-            );
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * Resets warning cache when testing.
-   *
-   * @private
-   */
-  checkPropTypes.resetWarningCache = function() {
-    if (process.env.NODE_ENV !== 'production') {
-      loggedTypeFailures = {};
-    }
-  };
-
-  var checkPropTypes_1 = checkPropTypes;
 
-  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
-  var printWarning$1 = function() {};
+    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);
+
+    var GoAButton = function GoAButton(_a) {
+      var title = _a.title,
+          _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.type,
+          type = _c === void 0 ? 'primary' : _c,
+          _d = _a.size,
+          size = _d === void 0 ? 'medium' : _d,
+          _e = _a.variant,
+          variant = _e === void 0 ? 'default' : _e,
+          children = _a.children,
+          onClick = _a.onClick;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
+        }
 
-  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) {}
+        var current = el.current;
+
+        var listener = function listener(e) {
+          onClick();
+        };
+
+        current.addEventListener('_click', listener);
+        return function () {
+          current.removeEventListener('_click', listener);
+        };
+      }, [el, onClick]);
+      return jsxRuntime.jsx("goa-button", __assign({
+        ref: el,
+        type: type,
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        title: title
+      }, {
+        children: children
+      }), void 0);
     };
-  }
-
-  function emptyFunctionThatReturnsNull() {
-    return null;
-  }
-
-  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;
-      }
-    }
 
-    /**
-     * 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,
+    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);
+
+    var GoAButtonGroup = function GoAButtonGroup(_a) {
+      var alignment = _a.alignment,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-button-group", __assign({
+        alignment: alignment
+      }, {
+        children: children
+      }), void 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;
+    var GoACallout = function GoACallout(_a) {
+      var title = _a.title,
+          _b = _a.type,
+          type = _b === void 0 ? "information" : _b,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-callout", __assign({
+        title: title,
+        type: type
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    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++;
-            }
-          }
+    var GoACheckbox = function GoACheckbox(_a) {
+      var name = _a.name,
+          testId = _a.testId,
+          error = _a.error,
+          disabled = _a.disabled,
+          checked = _a.checked,
+          indeterminate = _a.indeterminate,
+          _b = _a.value,
+          value = _b === void 0 ? true : _b,
+          text = _a.text,
+          children = _a.children,
+          onChange = _a.onChange;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
         }
-        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);
+        var current = el.current;
 
-      return chainedCheckType;
-    }
+        var listener = function listener(e) {
+          onChange === null || onChange === void 0 ? void 0 : onChange(name, e.detail.checked, e.detail.value);
+        };
 
-    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);
-    }
+        current.addEventListener('_change', listener);
+        return function () {
+          current.removeEventListener('_change', listener);
+        };
+      }, []);
+      return jsxRuntime.jsx("goa-checkbox", __assign({
+        "data-testid": testId,
+        ref: el,
+        name: name,
+        error: error,
+        checked: checked,
+        disabled: disabled,
+        indeterminate: indeterminate,
+        text: text,
+        value: value
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    function createAnyTypeChecker() {
-      return createChainableTypeChecker(emptyFunctionThatReturnsNull);
-    }
+    var GoAContainer = function GoAContainer(_a) {
+      var headingSize = _a.headingSize,
+          title = _a.title,
+          children = _a.children,
+          actions = _a.actions,
+          _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b;
+      return jsxRuntime.jsxs("goa-container", __assign({
+        variant: variant,
+        headingsize: headingSize
+      }, {
+        children: [title && jsxRuntime.jsx("div", __assign({
+          slot: "title"
+        }, {
+          children: title
+        }), void 0), children, actions && jsxRuntime.jsx("div", __assign({
+          slot: "actions"
+        }, {
+          children: actions
+        }), void 0)]
+      }), void 0);
+    };
 
-    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;
-          }
-        }
-        return null;
-      }
-      return createChainableTypeChecker(validate);
-    }
+    var GoADropdownOption = function GoADropdownOption(props) {
+      return jsxRuntime.jsx("goa-dropdown-item", __assign({
+        "data-testid": props.testId,
+        name: props.name,
+        value: props.value,
+        label: props.label
+      }, {
+        children: props.children
+      }), void 0);
+    };
 
-    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.'));
+    var GoADropdown = function GoADropdown(props) {
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
         }
-        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);
-    }
+        var current = el.current;
+
+        var handler = function handler(state) {
+          var _a = state.detail.data,
+              name = _a.name,
+              value = _a.value;
+          props.onChange(name, value);
+        };
+
+        current.addEventListener('_change', handler);
+        return function () {
+          current.removeEventListener('_change', handler);
+        };
+      }, [el, props]);
+      return jsxRuntime.jsx("goa-dropdown", __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);
+    };
 
-    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);
-    }
+    var css_248z = "";
+    styleInject(css_248z);
 
-    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;
-      }
+    var GoAFlexRow = function GoAFlexRow(_a) {
+      var gap = _a.gap,
+          minWidth = _a.minWidth,
+          children = _a.children;
+      var style = {
+        gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
+      };
 
-      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 getChildren = function getChildren() {
+        if (!children) {
+          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__default["default"].Children.map(children, function (child) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            style: __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);
-    }
+      return jsxRuntime.jsx("div", __assign({
+        className: "goa-flex-row",
+        style: style
+      }, {
+        children: getChildren()
+      }), void 0);
+    };
 
-    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;
-      }
+    var row = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        GoAFlexRow: GoAFlexRow,
+        'default': GoAFlexRow
+    });
 
-      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;
-        }
-      }
+    var GoAFormItem = function GoAFormItem(_a) {
+      var children = _a.children,
+          helpText = _a.helpText,
+          error = _a.error,
+          optional = _a.optional,
+          name = _a.name,
+          label = _a.label;
+      return jsxRuntime.jsx("goa-form-item", __assign({
+        name: name,
+        label: label,
+        error: error,
+        optional: optional,
+        helptext: helpText
+      }, {
+        children: children
+      }), void 0);
+    };
 
-      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;
-          }
-        }
+    var formItem = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        GoAFormItem: GoAFormItem,
+        'default': GoAFormItem
+    });
 
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
-      }
-      return createChainableTypeChecker(validate);
-    }
+    var GoAHeroBanner = function GoAHeroBanner(_a) {
+      var title = _a.title,
+          backgroundUrl = _a.backgroundUrl,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-hero-banner", __assign({
+        title: title,
+        backgroundurl: backgroundUrl
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    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);
-    }
+    var GoAHeroBannerContent = function GoAHeroBannerContent(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("div", __assign({
+        slot: "content"
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    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);
-    }
+    var GoAHeroBannerActions = function GoAHeroBannerActions(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("div", __assign({
+        slot: "actions"
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    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;
-          }
+    function GoAIcon(_a) {
+      var type = _a.type,
+          _b = _a.theme,
+          theme = _b === void 0 ? 'outline' : _b,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c;
+      return jsxRuntime.jsx("goa-icon", {
+        type: type,
+        theme: theme,
+        size: size
+      }, void 0);
+    }
+
+    var GoAIconButton = function GoAIconButton(_a) {
+      var type = _a.type,
+          disabled = _a.disabled,
+          _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b,
+          onClick = _a.onClick,
+          _c = _a.size,
+          size = _c === void 0 ? 'medium' : _c,
+          title = _a.title,
+          children = _a.children;
+      var ref = React.useRef(null);
+      React.useEffect(function () {
+        if (!ref.current) {
+          return;
         }
-        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;
-    }
+        var current = ref.current;
+
+        var listener = function listener(e) {
+          onClick();
+        };
+
+        current.addEventListener('_click', listener);
+        return function () {
+          current.removeEventListener('_click', listener);
+        };
+      }, [ref, onClick]);
+      return jsxRuntime.jsx("goa-icon-button", __assign({
+        ref: ref,
+        type: type,
+        disabled: disabled,
+        variant: variant,
+        size: size,
+        title: title
+      }, {
+        children: children
+      }), void 0);
+    };
 
-    // 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';
+    var GoAInput = function GoAInput(_a) {
+      var id = _a.id,
+          name = _a.name,
+          type = _a.type,
+          leadingIcon = _a.leadingIcon,
+          trailingIcon = _a.trailingIcon,
+          _b = _a.variant,
+          variant = _b === void 0 ? 'goa' : _b;
+          _a.focused;
+          var disabled = _a.disabled,
+          readonly = _a.readonly,
+          value = _a.value,
+          placeholder = _a.placeholder,
+          error = _a.error,
+          onTrailingIconClick = _a.onTrailingIconClick,
+          onChange = _a.onChange;
+      var ref = React.useRef(null);
+      React.useEffect(function () {
+        if (!ref.current) {
+          return;
         }
-      }
-      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
+        var current = ref.current;
+
+        var changeListener = function changeListener(e) {
+          var _a = e.detail.data,
+              name = _a.name,
+              value = _a.value;
+          onChange(name, value);
+        }; // TODO: determinw the propery type of the e (CustomEvent does not work)
+
+
+        var clickListener = function clickListener(e) {
+          onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
+        };
+
+        current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
+
+        current.addEventListener('_ontrailingiconclick', clickListener);
+        return function () {
+          current.removeEventListener('_change', changeListener);
+          current.removeEventListener('_ontrailingiconclick', clickListener);
+        };
+      }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
+      //   if (focused) {
+      //     inputRef.current?.focus();
+      //   } else {
+      //     inputRef.current?.blur();
+      //   }
+      // }, [focused, inputRef]);
+
+      return jsxRuntime.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);
     };
-
-    ReactPropTypes.PropTypes = ReactPropTypes;
-
-    return ReactPropTypes;
-  };
-
-  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();
-  }
-  });
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = "/* 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\n/* This style is from the alberta design system */\nbody,\ninput,\nbutton,\ntextarea {\n  background: #fff;\n  font-family: acumin-pro-semi-condensed, sans-serif;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 28px; }\n\nh1 {\n  margin: 0;\n  padding: 0;\n  line-height: 56px;\n  font-size: 48px; }\n\nh2 {\n  margin: 24px 0 0;\n  padding: 0;\n  line-height: 44px;\n  color: #333;\n  font-size: 36px;\n  font-weight: 400; }\n\nh3 {\n  margin: 24px 0 0;\n  padding: 0;\n  line-height: 32px;\n  color: #333;\n  font-size: 24px;\n  font-weight: 400; }\n\nh4 {\n  margin: 23px 0 0;\n  padding: 0;\n  line-height: 28px;\n  color: #333;\n  font-size: 18px;\n  font-weight: 700; }\n\nh5 {\n  margin: 23px 0 0;\n  padding: 0;\n  line-height: 28px;\n  color: #333;\n  font-size: 18px;\n  font-weight: 700; }\n\nh6 {\n  margin: 23px 0 0;\n  padding: 0;\n  line-height: 28px;\n  color: #333;\n  font-size: 18px;\n  font-weight: 700; }\n\np {\n  margin: 23px 0 0;\n  font-size: 18px;\n  line-height: 28px; }\n\ndt {\n  font-weight: 700; }\n\nli {\n  margin: 13px 0 0 28px;\n  font-size: 18px;\n  line-height: 28px; }\n\nul {\n  list-style-type: disc;\n  margin-top: 28px; }\n\nul ul {\n  list-style-type: disc; }\n\na:link {\n  color: #0070c4; }\n\na:visited {\n  color: #756693; }\n\na:hover {\n  color: #004f84; }\n\na:focus {\n  outline-width: thin;\n  outline-style: solid;\n  outline-color: #004f84;\n  outline-offset: 0px; }\n\n/* anchors *******************************************************************/\nhtml:not([dir='rtl']) main a[target='_blank']:after {\n  display: inline-block;\n  width: 17px;\n  height: 16px;\n  margin: 0px 0px -2px 5px;\n  background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 22 20.51'%3E%3Cpath fill='%23333' d='M21,19.69a.58.58,0,0,1-.57.57H3.57A.58.58,0,0,1,3,19.69V4.31a.58.58,0,0,1,.57-.57H6.82v-2H3.57A2.58,2.58,0,0,0,1,4.31V19.69a2.58,2.58,0,0,0,2.57,2.57H20.43A2.58,2.58,0,0,0,23,19.69V16.44H21Z' transform='translate(-1 -1.74)'/%3E%3Cpath fill='%23333' d='M22,1.75H14.15a1,1,0,1,0,0,2h5.44l-7.41,7.41a1,1,0,0,0,.71,1.71,1,1,0,0,0,.7-.3L21,5.17V10.6a1,1,0,1,0,2,0V2.75A1,1,0,0,0,22,1.75Z' transform='translate(-1 -1.74)'/%3E%3C/svg%3E\") no-repeat center center;\n  content: ''; }\n\na[href$='.pdf']:after,\na[href$='.doc']:after,\na[href$='.docx']:after {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  margin: 0px 0px -3px 5px;\n  background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='geometricPrecision'%3E%3Cpath d='M0 16L16 16L16 14L0 14Z  M8 14L0 6L4 6L4 0L12 0L12 6L16 6Z' fill='%2336424a'/%3E%3C/svg%3E\") no-repeat center center;\n  content: ''; }\n";
-  styleInject(css_248z);
-
-  var css_248z$1 = "/* 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$1);
-
-  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__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-callout goa--".concat(type)
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h3", {
-      "data-testid": "callout-title"
-    }, title), /*#__PURE__*/React__default.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$2 = "/* 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  .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: currentColor; }\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$2);
-
-  var css_248z$3 = ".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$3);
-
-  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 = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        dismissed = _useState2[0],
-        setDismissed = _useState2[1];
-
-    var dismissTrigger = function dismissTrigger(dismissAction) {
-      setDismissed(dismissAction);
-      onDismiss();
+    var GoAInputText = function GoAInputText(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "text"
+      }), void 0);
     };
-
-    if (!dismissed) {
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-        className: "goa-notifications"
-      }, /*#__PURE__*/React__default.createElement("h2", {
-        className: "title"
-      }, title)), /*#__PURE__*/React__default.createElement("div", {
-        role: "notification",
-        className: "goa-notification goa--".concat(type)
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "content"
-      }, notificationUrl ? /*#__PURE__*/React__default.createElement("a", {
-        className: "message",
-        role: "url",
-        href: notificationUrl
-      }, message || children) : /*#__PURE__*/React__default.createElement("span", {
-        className: "message"
-      }, message || children), isDismissable && /*#__PURE__*/React__default.createElement("a", {
-        role: "closeBox",
-        className: "close",
-        title: "Dismiss",
-        onClick: function onClick() {
-          return dismissTrigger(!dismissed);
-        }
-      }, /*#__PURE__*/React__default.createElement("svg", {
-        width: "16px",
-        height: "16px",
-        viewBox: "0 0 16 16"
-      }, /*#__PURE__*/React__default.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$4 = "/* 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";
-  styleInject(css_248z$4);
-
-  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__default.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$5 = "/* 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$5);
-
-  var css_248z$6 = "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$6);
-
-  /* eslint-disable-next-line */
-
-  var MicrositeLogo = function MicrositeLogo(props) {
-    return /*#__PURE__*/React__default.createElement("a", {
-      href: props.serviceHome,
-      "aria-label": props.serviceHome,
-      className: "microsite-link"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "image-desktop-tablet"
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "image-mobile"
-    }), /*#__PURE__*/React__default.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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("header", {
-      className: "goa-header goa-official-site-header"
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
-      className: serviceLevelCss
-    }, serviceLevelFormatted())), props.serviceLevel === 'live' && /*#__PURE__*/React__default.createElement("div", {
-      className: "site-text"
-    }, "An official site of the ", /*#__PURE__*/React__default.createElement("a", {
-      href: "https://www.alberta.ca/index.aspx",
-      className: "web-link"
-    }, "Alberta Government")), props.serviceLevel !== 'live' && /*#__PURE__*/React__default.createElement("div", {
-      className: "site-text"
-    }, "This is a new ", /*#__PURE__*/React__default.createElement("a", {
-      href: "https://www.alberta.ca/index.aspx",
-      className: "web-link"
-    }, "Alberta Government"), " service")), /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-header goa-microsite-header"
-    }, /*#__PURE__*/React__default.createElement(MicrositeLogo, {
-      serviceName: props.serviceName,
-      serviceHome: props.serviceHome
-    }), /*#__PURE__*/React__default.createElement("div", null, props.children)));
-  };
-
-  var css_248z$7 = ".goa-hero-banner-content {\n  font-size: 18px;\n  line-height: 32px;\n  margin: 0; }\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$7);
-
-  var GoAHeroBannerContent = function GoAHeroBannerContent(_ref) {
-    var content = _ref.content,
-        children = _ref.children;
-    return /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-hero-banner-content",
-      role: "note"
-    }, children || content);
-  };
-
-  var css_248z$8 = "/* 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.right-arrow::after {\n    margin-left: 8px;\n    content: '\\2192'; }\n  .goa-link-button.goa-link-button.up-arrow::after {\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$8);
-
-  var GoAHeroBannerLink = function GoAHeroBannerLink(_ref) {
-    var linkText = _ref.linkText,
-        linkUrl = _ref.linkUrl;
-    return linkText && linkUrl ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("a", {
-      className: "goa-link-button right-arrow",
-      href: linkUrl,
-      role: "link"
-    }, linkText)) : /*#__PURE__*/React__default.createElement(React.Fragment, null);
-  };
-
-  var css_248z$9 = "/* 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";
-  styleInject(css_248z$9);
-
-  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__default.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__default.createElement("h1", {
-      role: "heading",
-      "aria-level": 1
-    }, title), children || /*#__PURE__*/React__default.createElement(React.Fragment, null, content && /*#__PURE__*/React__default.createElement(GoAHeroBannerContent, {
-      content: content
-    }), linkText && linkUrl && /*#__PURE__*/React__default.createElement(GoAHeroBannerLink, {
-      linkText: linkText,
-      linkUrl: linkUrl
-    })));
-  };
-  GoAHeroBanner.defaultProps = {
-    content: '',
-    linkText: '',
-    linkUrl: ''
-  };
-
-  var css_248z$a = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n\n.goa-card {\n  box-sizing: border-box;\n  background: #fff;\n  border: 1px solid #dcdcdc;\n  transition: opacity 300ms ease-in-out;\n  /* size variants ***/ }\n  .goa-card .card-content {\n    padding: 24px 16px;\n    border-top: 8px solid #0081a2; }\n    .goa-card .card-content .goa-title,\n    .goa-card .card-content .goa-text,\n    .goa-card .card-content .goa-content {\n      margin-bottom: 28px; }\n    .goa-card .card-content .goa-text {\n      color: #333;\n      font-size: var(--fs-base);\n      line-height: 28px; }\n    .goa-card .card-content .goa-footer {\n      font-size: var(--fs-base); }\n    .goa-card .card-content .goa-title {\n      font-size: var(--fs-xl);\n      font-weight: 400;\n      line-height: 32px; }\n  .goa-card .goa-poster {\n    position: relative;\n    display: block;\n    padding: 56.25% 0 0;\n    overflow: hidden;\n    background: #e5e5e5; }\n    .goa-card .goa-poster:empty {\n      display: none; }\n    .goa-card .goa-poster img,\n    .goa-card .goa-poster iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: none; }\n  .goa-card .goa-poster-image img {\n    display: block;\n    width: 100%;\n    -o-object-fit: cover;\n       object-fit: cover; }\n  .goa-card.card-auto {\n    width: auto; }\n    .goa-card.card-auto .card {\n      flex-basis: auto;\n      width: auto; }\n  .goa-card a:hover {\n    color: #004f84;\n    text-decoration: none; }\n  .goa-card a:focus {\n    outline: 3px solid #feba35;\n    outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  padding-bottom: 56.25%; }\n  .goa-card[data-skeleton] .goa-poster-image img {\n    display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n  margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  max-height: 1rem; }\n";
-  styleInject(css_248z$a);
-
-  var GoACard = function GoACard(_ref) {
-    var title = _ref.title,
-        content = _ref.content,
-        _ref$description = _ref.description,
-        description = _ref$description === void 0 ? null : _ref$description,
-        _ref$cardImageUrl = _ref.cardImageUrl,
-        cardImageUrl = _ref$cardImageUrl === void 0 ? null : _ref$cardImageUrl,
-        _ref$titleUrl = _ref.titleUrl,
-        titleUrl = _ref$titleUrl === void 0 ? null : _ref$titleUrl,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$minWidth = _ref.minWidth,
-        minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-        _ref$maxWidth = _ref.maxWidth,
-        maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
-        other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
-
-    var _useState = React.useState(null),
-        _useState2 = _slicedToArray(_useState, 2),
-        imgHeight = _useState2[0],
-        setImgHeight = _useState2[1];
-
-    return /*#__PURE__*/React__default.createElement("div", Object.assign({
-      className: "goa-card",
-      "data-testid": "card-container",
-      style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth
-      }
-    }, other), cardImageUrl && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-poster-image",
-      "data-testid": "card-img"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      height: imgHeight,
-      src: cardImageUrl,
-      alt: "Card cardImageUrl"
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "card-content"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-title",
-      "data-testid": "card-title"
-    }, titleUrl ? /*#__PURE__*/React__default.createElement("a", {
-      href: titleUrl,
-      "data-testid": "card-title-link"
-    }, title) : /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-text",
-      "data-testid": "card-content"
-    }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-footer",
-      "data-testid": "card-footer"
-    }, children)));
-  };
-
-  var css_248z$b = "/* Palette */\n/* Semantic usages */\n.goa-radio {\n  margin-bottom: 10px; }\n  .goa-radio input[type='radio'] {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    outline: 0;\n    -webkit-appearance: none; }\n  .goa-radio .goa-radio-label {\n    z-index: 2;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0 0 0 8px;\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none; }\n  .goa-radio.goa-radio-disabled {\n    opacity: 30%; }\n    .goa-radio.goa-radio-disabled .goa-radio-label {\n      cursor: default; }\n  .goa-radio.has-error .goa-radio-container {\n    border: solid 2px #fc1921;\n    color: #fc1921; }\n    .goa-radio.has-error .goa-radio-container svg {\n      fill: #fc1921; }\n  .goa-radio .goa-radio-container {\n    z-index: 2;\n    box-sizing: border-box;\n    margin: 0;\n    border: 1px solid #666;\n    border-radius: 12px;\n    height: 24px;\n    width: 24px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 3px; }\n    .goa-radio .goa-radio-container svg {\n      fill: #fff; }\n    .goa-radio .goa-radio-container.goa-radio-selected {\n      background-color: #0070c4; }\n      .goa-radio .goa-radio-container.goa-radio-selected .goa-radiomark {\n        display: block !important; }\n    .goa-radio .goa-radio-container:hover:not(.goa-radio-selected) {\n      background-color: #f1f1f1; }\n    .goa-radio .goa-radio-container:focus-within {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  .goa-radio.goa-radio-label-before .goa-radio-container {\n    order: 1;\n    margin-left: 8px;\n    margin-right: auto; }\n\n.goa-radio-layout {\n  display: flex;\n  flex-direction: row;\n  align-items: center; }\n\n.goa-radio-inline-block {\n  display: inline-block;\n  margin-bottom: 5px;\n  margin-top: 5px;\n  margin-left: 5px; }\n";
-  styleInject(css_248z$b);
-
-  var GoARadio = function GoARadio(_ref) {
-    var name = _ref.name,
-        value = _ref.value,
-        disabled = _ref.disabled,
-        _ref$labelPosition = _ref.labelPosition,
-        labelPosition = _ref$labelPosition === void 0 ? 'after' : _ref$labelPosition,
-        required = _ref.required,
-        children = _ref.children;
-    var selectedValue = React.useContext(RadioContext);
-    var updateSelectedValue = React.useContext(RadioUpdateContext);
-
-    function hasError() {
-      return required && !selectedValue;
-    }
-
-    function getSelectedCss() {
-      return classnames({
-        'goa-radio-container': true,
-        'goa-radio-selected': isChecked()
-      });
-    }
-
-    function getRootCssClasses() {
-      return classnames({
-        'goa-radio': true,
-        'goa-radio-disabled': disabled,
-        'has-error': hasError(),
-        'goa-radio-label-before': labelPosition === 'before'
-      });
-    }
-
-    function isChecked() {
-      return selectedValue === value;
-    }
-
-    function onRadioChange(e) {
-      updateSelectedValue(e.target.value);
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: getRootCssClasses()
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radio-inline-block"
-    }, /*#__PURE__*/React__default.createElement("label", {
-      className: "goa-radio-layout"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: getSelectedCss()
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "radio",
-      name: name,
-      value: value,
-      checked: isChecked(),
-      disabled: disabled,
-      onChange: onRadioChange
-    }), isChecked() && /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12"
-    }, /*#__PURE__*/React__default.createElement("circle", {
-      cx: "6",
-      cy: "6",
-      r: "6",
-      fill: "#fff"
-    }))), /*#__PURE__*/React__default.createElement("span", {
-      className: "goa-radio-label"
-    }, children))));
-  };
-
-  var css_248z$c = "/* Palette */\n/* Semantic usages */\n.goa-radio-group {\n  margin-top: 28px; }\n  .goa-radio-group.goa-radio-group-disabled.goa-radios {\n    opacity: 30%;\n    cursor: default; }\n  .goa-radio-group .radio-group-title {\n    font-size: 18px;\n    font-weight: bold;\n    color: #333;\n    line-height: 28px; }\n  .goa-radio-group .helper-text {\n    font-size: 14px;\n    font-weight: normal;\n    color: #333;\n    margin-bottom: 20px; }\n  .goa-radio-group .required-label {\n    margin-left: 8px;\n    font-size: 14px;\n    color: #666; }\n  .goa-radio-group .error-text {\n    color: #fc1921;\n    font-size: 14px;\n    margin-bottom: 20px; }\n";
-  styleInject(css_248z$c);
-
-  var RadioContext = React__default.createContext('');
-  var RadioUpdateContext = React__default.createContext( // eslint-disable-next-line @typescript-eslint/no-empty-function
-  function () {});
-  var GoARadioGroup = function GoARadioGroup(_ref) {
-    var helperText = _ref.helperText,
-        onChange = _ref.onChange,
-        required = _ref.required,
-        requiredErrorMessage = _ref.requiredErrorMessage,
-        title = _ref.title,
-        value = _ref.value,
-        items = _ref.items,
-        children = _ref.children,
-        childAttrs = _objectWithoutProperties(_ref, ["helperText", "onChange", "required", "requiredErrorMessage", "title", "value", "items", "children"]);
-
-    var _useState = React.useState(value),
-        _useState2 = _slicedToArray(_useState, 2),
-        selectedValue = _useState2[0],
-        setSelectedValue = _useState2[1];
-
-    function handleOnChange(val) {
-      setSelectedValue(val);
-      onChange(val);
-    }
-
-    function hasError() {
-      return required && !selectedValue;
-    }
-
-    function getChildren() {
-      if (children) {
-        return React.Children.map(children, function (child) {
-          var key = "".concat(childAttrs.name, "-").concat(child.props.value);
-          return React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
-            key: key,
-            required: required
-          }));
-        });
-      }
-
-      return items.map(function (item) {
-        return /*#__PURE__*/React__default.createElement(GoARadio, {
-          key: "".concat(childAttrs.name, "-").concat(item.value),
-          labelPosition: childAttrs.labelPosition,
-          name: childAttrs.name,
-          disabled: childAttrs.disabled,
-          value: item.value,
-          children: item.text,
-          required: required
-        });
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radio-group"
-    }, title && /*#__PURE__*/React__default.createElement("span", {
-      className: "radio-group-title"
-    }, title), required && /*#__PURE__*/React__default.createElement("span", {
-      className: "required-label"
-    }, "(Required)"), helperText && /*#__PURE__*/React__default.createElement("div", {
-      className: "helper-text"
-    }, helperText), /*#__PURE__*/React__default.createElement(RadioContext.Provider, {
-      value: selectedValue
-    }, /*#__PURE__*/React__default.createElement(RadioUpdateContext.Provider, {
-      value: handleOnChange
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-radios"
-    }, getChildren()))), hasError() && /*#__PURE__*/React__default.createElement("div", {
-      className: "error-text"
-    }, requiredErrorMessage));
-  };
-
-  var css_248z$d = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top; }\n  .goa-card-group .card-group-title {\n    font-size: 28px;\n    font-weight: bold;\n    color: #333; }\n  .goa-card-group .card-group-basic {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-basic-vue > div {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic-vue > div > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-column {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div {\n    margin: 14px; }\n  .goa-card-group .card-group-column-vue > div {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div > div {\n    margin: 14px; }\n";
-  styleInject(css_248z$d);
-
-  var GoACardGroup = function GoACardGroup(_ref) {
-    var _ref$title = _ref.title,
-        title = _ref$title === void 0 ? null : _ref$title,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$layout = _ref.layout,
-        layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
-        _ref$cardItems = _ref.cardItems,
-        cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
-
-    function getCards() {
-      if (children) {
-        return children;
-      }
-
-      return cardItems.map(function (item, index) {
-        return /*#__PURE__*/React__default.createElement(GoACard, Object.assign({}, item, {
-          key: index
-        }), item.children);
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-card-group"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "card-group-title"
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "card-group-".concat(layout)
-    }, getCards()));
-  };
-
-  /** Used to store the options in the dropdown */
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  var DropdownContext = React.createContext({});
-
-  var css_248z$e = "/* Palette */\n/* Semantic usages */\n/* This style is from the alberta design system */\n/* Palette */\n/* Semantic usages */\n.dropdown-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0; }\n\n.dropdown-menu {\n  border: solid 1px #dcdcdc;\n  border-radius: 4px;\n  background: #fff;\n  padding: 0;\n  margin-top: 3px;\n  width: 100%;\n  overflow-y: auto; }\n  .dropdown-menu .option-group .option-group-label {\n    font-weight: bold;\n    padding: 4px 12px; }\n  .dropdown-menu .option-group .option {\n    font-weight: normal;\n    padding: 4px 24px; }\n  .dropdown-menu .option {\n    padding: 4px 12px;\n    color: #0070c4;\n    border: 1px solid #f1f1f1; }\n    .dropdown-menu .option.selected {\n      background-color: #0070c4;\n      color: #fff; }\n    .dropdown-menu .option.selected.active {\n      background-color: #004f84;\n      color: #fff; }\n    .dropdown-menu .option.active {\n      background-color: #f1f1f1;\n      color: #333; }\n\n.goa-dropdown {\n  position: relative;\n  /* add chevron */ }\n  .goa-dropdown .dropdown-grouping input[type=text] {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding-right: 30px !important; }\n  .goa-dropdown .dropdown-grouping.disabled {\n    opacity: 30%; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox {\n    /* remove default arrow IE */ }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox.margin-override {\n    margin: 0; }\n  .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n    /* remove default arrow IE */\n    font-size: 14px !important;\n    border: none !important;\n    margin: 0 !important; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 8px 0 0;\n      padding: 12px;\n      padding-right: 8px;\n      border-radius: 4px;\n      border: 1px solid #666;\n      font-size: 18px;\n      font-weight: 400;\n      color: #0070c4;\n      /* removes default arrow */\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:disabled {\n      opacity: 0.3;\n      pointer-events: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter::-ms-expand {\n      display: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:hover {\n      border: 1px solid #0070c4; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n    .goa-dropdown .dropdown-grouping .dropdown-textbox-filter:focus {\n      box-shadow: none !important;\n      outline: none; }\n  .goa-dropdown i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='1' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center;\n    left: auto;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    pointer-events: none;\n    position: absolute;\n    margin-top: 16px;\n    color: #0070c4; }\n  .goa-dropdown.disabled i.goa-select-icon {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='' opacity='0.3' d='M11.29,15.7a1,1,0,0,0,1.41,0l6-6A1,1,0,1,0,17.29,8.3L12,13.58,6.71,8.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41Z'/%3E%3C/svg%3E%0A\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-dropdown.opened i.goa-select-icon {\n    transform: rotate(180deg); }\n  .goa-dropdown.has-error .dropdown-grouping .dropdown-textbox {\n    border: solid 2px #fc1921; }\n  .goa-dropdown .dropdown-label {\n    font-size: 18px;\n    font-weight: bold;\n    color: #333; }\n  .goa-dropdown .required-label {\n    margin-left: 8px;\n    font-size: 14px;\n    color: #666; }\n  .goa-dropdown .helper-text {\n    font-size: 14px;\n    font-weight: normal;\n    color: #333; }\n  .goa-dropdown .error-text {\n    color: #fc1921;\n    font-size: 14px; }\n";
-  styleInject(css_248z$e);
-
-  var GoAOption = function GoAOption(props) {
-    var label = props.label,
-        children = props.children,
-        selected = props.selected;
-
-    var _useState = React.useState(''),
-        _useState2 = _slicedToArray(_useState, 2),
-        isActive = _useState2[0],
-        setActive = _useState2[1];
-
-    var _useContext = React.useContext(DropdownContext),
-        selectionChanged = _useContext.selectionChanged;
-
-    function onClick(e) {
-      e.stopPropagation(); // Flip the props, since user click it
-
-      var selected = !props.selected;
-
-      if (selectionChanged) {
-        selectionChanged(_objectSpread2(_objectSpread2({}, props), {}, {
-          selected: selected
-        }));
-      }
-    }
-
-    function rootCss() {
-      return classnames({
-        option: true,
-        selected: selected,
-        active: isActive
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      role: "listitem",
-      className: rootCss(),
-      onClick: onClick,
-      onMouseEnter: function onMouseEnter() {
-        setActive('active');
-      },
-      onMouseLeave: function onMouseLeave() {
-        setActive('');
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-option"
-    }, children || label));
-  };
-  GoAOption.defaultProps = {
-    defaultSelected: false
-  };
-
-  var GoAOptionGroup = function GoAOptionGroup(_ref) {
-    var label = _ref.label,
-        children = _ref.children;
-
-    var _useState = React.useState([]),
-        _useState2 = _slicedToArray(_useState, 2),
-        itemLabels = _useState2[0],
-        setItemLabels = _useState2[1]; // Load the itemLabes state variable
-
-
-    React.useEffect(function () {
-      var allLabels = [];
-      React.Children.forEach(children, function (child) {
-        var _child$props, _child$props2;
-
-        if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.value && (_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.label) {
-          allLabels.push(child.props.label);
-        }
-      });
-      setItemLabels(allLabels);
-    }, []);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "option-group"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "option-group-label"
-    }, label), children);
-  };
-
-  var GoADropdown = function GoADropdown(_ref) {
-    var title = _ref.title,
-        subTitle = _ref.subTitle,
-        menuHeight = _ref.menuHeight,
-        multiple = _ref.multiple,
-        disabled = _ref.disabled,
-        description = _ref.description,
-        children = _ref.children,
-        errorMessage = _ref.errorMessage,
-        display = _ref.display,
-        selectionChanged = _ref.selectionChanged,
-        key = _ref.key,
-        rest = _objectWithoutProperties(_ref, ["title", "subTitle", "menuHeight", "multiple", "disabled", "description", "children", "errorMessage", "display", "selectionChanged", "key"]);
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        isOpen = _useState2[0],
-        setIsOpen = _useState2[1];
-
-    var _useState3 = React.useState(0),
-        _useState4 = _slicedToArray(_useState3, 2),
-        maxMenuHeight = _useState4[0],
-        setMaxMenuHeight = _useState4[1];
-
-    var menuRef = React.useRef();
-    var overlayRef = React.useRef();
-
-    var toggleOpen = function toggleOpen() {
-      if (!disabled) {
-        setIsOpen(!isOpen);
-      }
+    var GoAInputPassword = function GoAInputPassword(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "password"
+      }), void 0);
     };
-
-    var rootDropDownCss = function rootDropDownCss() {
-      return classnames({
-        'goa-dropdown': true,
-        'single-selection': !multiple,
-        'has-error': errorMessage && errorMessage.length > 0
-      });
+    var GoAInputDate = function GoAInputDate(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "date"
+      }), void 0);
     };
-
-    var dropDownGroupCss = function dropDownGroupCss() {
-      return classnames({
-        'dropdown-grouping': true,
-        'disabled': disabled
-      });
+    var GoAInputTime = function GoAInputTime(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "time"
+      }), void 0);
     };
-
-    React.useEffect(function () {
-      var _overlayRef$current, _menuRef$current;
-
-      var height = menuHeight > 0 ? menuHeight : ((_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.clientHeight) - ((_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.offsetTop) - 20 || 0;
-      setMaxMenuHeight(height);
-    });
-    return /*#__PURE__*/React__default.createElement(DropdownContext.Provider, {
-      value: {
-        selectionChanged: selectionChanged
-      }
-    }, isOpen && /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown-overlay",
-      ref: overlayRef,
-      onClick: toggleOpen
-    }), /*#__PURE__*/React__default.createElement("div", Object.assign({
-      className: rootDropDownCss()
-    }, rest), /*#__PURE__*/React__default.createElement("label", {
-      className: "dropdown-label",
-      htmlFor: "input-for-".concat(title)
-    }, title), subTitle && /*#__PURE__*/React__default.createElement("span", {
-      className: "required-label"
-    }, subTitle), /*#__PURE__*/React__default.createElement("div", {
-      className: dropDownGroupCss(),
-      onClick: toggleOpen
-    }, /*#__PURE__*/React__default.createElement("i", {
-      className: "goa-select-icon"
-    }), /*#__PURE__*/React__default.createElement("input", {
-      role: "searchbox",
-      className: "dropdown-textbox margin-override",
-      type: "text",
-      style: {
-        cursor: 'default'
-      },
-      id: "input-for-".concat(key),
-      placeholder: display ? display : description,
-      readOnly: !isOpen
-    }), isOpen && /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown-menu",
-      ref: menuRef,
-      style: {
-        position: 'absolute',
-        zIndex: 1000,
-        maxHeight: "".concat(maxMenuHeight, "px"),
-        overflow: 'auto'
-      }
-    }, children)), !description && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
-      className: "helper-text"
-    }, description)), errorMessage && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
-      className: "dropdown-label error-text"
-    }, errorMessage))));
-  };
-  GoADropdown.defaultProps = {
-    disabled: false,
-    description: null
-  };
-
-  var css_248z$f = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  outline: 0;\n  -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n  z-index: 2;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 0 0 8px;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  height: 46px;\n  display: flex;\n  align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n  opacity: 30%; }\n  .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n    cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n  border: solid 2px #fc1921;\n  color: #fc1921; }\n  .goa-checkbox.has-error .goa-checkbox-container svg {\n    fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n  box-sizing: border-box;\n  border: 1px solid #666;\n  border-radius: 2px;\n  height: 24px;\n  line-height: 24px;\n  width: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 3px; }\n  .goa-checkbox .goa-checkbox-container svg {\n    display: none;\n    flex: 1 1 auto;\n    fill: #fff; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n      display: block !important; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n      display: none !important; }\n  .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n    background-color: #0070c4; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n      display: none; }\n    .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n      display: block; }\n  .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n    background-color: #f1f1f1; }\n  .goa-checkbox .goa-checkbox-container:focus-within {\n    box-shadow: 0 0 0 3px #feba35;\n    outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n  order: 1;\n  margin-left: 8px;\n  margin-right: auto; }\n\n.goa-checkbox-layout {\n  display: inline-flex;\n  align-items: center; }\n";
-  styleInject(css_248z$f);
-
-  var GoACheckbox = function GoACheckbox(_ref) {
-    var _ref$checked = _ref.checked,
-        checked = _ref$checked === void 0 ? false : _ref$checked,
-        _ref$required = _ref.required,
-        required = _ref$required === void 0 ? false : _ref$required,
-        _ref$disabled = _ref.disabled,
-        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        _ref$indeterminate = _ref.indeterminate,
-        indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-        _ref$labelPosition = _ref.labelPosition,
-        labelPosition = _ref$labelPosition === void 0 ? 'before' : _ref$labelPosition,
-        _ref$value = _ref.value,
-        value = _ref$value === void 0 ? '' : _ref$value,
-        content = _ref.content,
-        children = _ref.children,
-        selectionChange = _ref.selectionChange;
-
-    var hasError = function hasError() {
-      return required && !checked;
+    var GoAInputDateTime = function GoAInputDateTime(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "datetime-local"
+      }), void 0);
     };
-
-    var rootCss = function rootCss() {
-      return classnames({
-        'goa-checkbox': true,
-        'goa-checkbox-disabled': disabled,
-        'has-error': hasError(),
-        'goa-checkbox-label-before': labelPosition === 'before'
-      });
+    var GoAInputEmail = function GoAInputEmail(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "email"
+      }), void 0);
     };
-
-    var checkboxCss = function checkboxCss() {
-      return classnames({
-        'goa-checkbox-container': true,
-        'goa-checkbox-selected': !indeterminate && checked,
-        'goa-checkbox-indeterminate': indeterminate && checked
-      });
+    var GoAInputSearch = function GoAInputSearch(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "text",
+        trailingIcon: "search"
+      }), void 0);
     };
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: rootCss()
-    }, /*#__PURE__*/React__default.createElement("label", {
-      className: "goa-checkbox-layout"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: checkboxCss()
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "checkbox",
-      checked: checked,
-      disabled: disabled,
-      required: required,
-      value: value,
-      onChange: function onChange(e) {
-        return selectionChange(e.target.checked);
-      }
-    }), indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
-      id: "dashmark",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 15 2",
-      className: "goa-indeterminate"
-    }, /*#__PURE__*/React__default.createElement("rect", {
-      width: "15",
-      height: "2"
-    })), !indeterminate && checked && /*#__PURE__*/React__default.createElement("svg", {
-      id: "checkmark",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 16 12.18",
-      className: "goa-checkmark"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
-    }))), /*#__PURE__*/React__default.createElement("span", {
-      className: "goa-checkbox-label"
-    }, content || children)));
-  };
-
-  var css_248z$g = "/* Palette */\n/* Semantic usages */\n.goa-badge-icon {\n  margin-left: 4px;\n  margin-right: 0px;\n  position: relative;\n  top: -5px;\n  height: 14px;\n  width: 14px;\n  font-size: 14px !important; }\n\n.badge-module_goa-badge__3F6Ve {\n  line-height: 24px;\n  font-size: 14px;\n  font-weight: 400 !important; }\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-block;\n  border-radius: 4px;\n  margin: 4px;\n  padding-top: 4px;\n  padding-left: 4px;\n  padding-right: 4px;\n  height: 20px; }\n  .badge-module_goa-badge__3F6Ve * {\n    margin-left: 4px;\n    margin-right: 4px; }\n  .badge-module_goa-badge__3F6Ve .badge-module_goa-badge-content__3UN-3 {\n    position: relative;\n    top: -5px;\n    height: 14px;\n    display: inline; }\n  .badge-module_goa-badge__3F6Ve mat-icon {\n    margin-left: 4px;\n    margin-right: 4px;\n    position: relative;\n    top: -3px;\n    height: 14px;\n    width: 14px;\n    font-size: 14px !important; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: #0070c4;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: #00853f;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: #feba35;\n  color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: #ec040b;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: #0070c4;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: #767676;\n  color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: #fff;\n  color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: #fff;\n  color: #333; }\n";
-  var styles = {"goa-badge":"badge-module_goa-badge__3F6Ve","goa-badge-content":"badge-module_goa-badge-content__3UN-3","badge-information":"badge-module_badge-information__2r_Eq","badge-success":"badge-module_badge-success__18wcm","badge-warning":"badge-module_badge-warning__20BNM","badge-emergency":"badge-module_badge-emergency__E4mHn","badge-dark":"badge-module_badge-dark__1thw-","badge-midtone":"badge-module_badge-midtone__1Gt4T","badge-light":"badge-module_badge-light__B8ZMt","badge-inactive":"badge-module_badge-inactive__35PEw"};
-  styleInject(css_248z$g);
-
-  var GoABadge = function GoABadge(_ref) {
-    var type = _ref.type,
-        content = _ref.content,
-        icon = _ref.icon;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-    }, icon, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  GoABadge.defaultProps = {
-    type: 'information'
-  };
-
-  var css_248z$h = "/* 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$h);
-
-  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') {
-        return;
-      }
-
-      if (progress === 0) {
-        strokeDashoffset = progressMaxValue;
-        return;
-      }
-
-      if (progress >= 100) {
-        return;
-      }
-
-      var value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
-      strokeDashoffset = value;
-    }
-
-    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');
-      }
-
-      if (type === 'progress') {
-        setProgress(value);
-      }
-
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "progress-container--".concat(displayType),
-        onKeyDown: function onKeyDown(event) {
-          event.preventDefault();
-        }
-      }, /*#__PURE__*/React__default.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__default.createElement("circle", {
-        className: "base-circle",
-        cx: "50",
-        cy: "50",
-        r: "45"
-      }), /*#__PURE__*/React__default.createElement("circle", {
-        className: "".concat(type === 'infinite' ? 'progress-circle--infinite' : 'progress-circle'),
-        cx: "50",
-        cy: "50",
-        r: "45",
+    var GoAInputUrl = function GoAInputUrl(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "url"
+      }), void 0);
+    };
+    var GoAInputTel = function GoAInputTel(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "tel"
+      }), void 0);
+    };
+    var GoAInputFile = function GoAInputFile(props) {
+      return jsxRuntime.jsx("input", {
+        id: props.id,
+        name: props.name,
+        type: "file",
+        onChange: function (e) {
+          return props.onChange(e.target.name, e.target.value);
+        },
         style: {
-          strokeDashoffset: strokeDashoffset
+          backgroundColor: 'revert'
         }
-      })), /*#__PURE__*/React__default.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$i = "/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n\n@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite; }\n";
-  styleInject(css_248z$i);
-
-  var GoAElementLoader = function GoAElementLoader(_ref) {
-    var _ref$visible = _ref.visible,
-        visible = _ref$visible === void 0 ? false : _ref$visible,
-        _ref$baseColour = _ref.baseColour,
-        baseColour = _ref$baseColour === void 0 ? '#c8eef9' : _ref$baseColour,
-        _ref$spinnerColour = _ref.spinnerColour,
-        spinnerColour = _ref$spinnerColour === void 0 ? '#0070c4' : _ref$spinnerColour,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 25 : _ref$size;
-    var radius = size;
-    var diameter = radius * 2;
-
-    var boxView = function boxView() {
-      return "0 0 ".concat(diameter, " ").concat(diameter);
+      }, void 0);
     };
-    /**
-     * 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__default.createElement("svg", {
-      className: "circular-loader",
-      fill: "none",
-      viewBox: boxView(),
-      width: "".concat(size),
-      height: "".concat(size),
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__default.createElement("circle", {
-      cx: "".concat(radius),
-      cy: "".concat(radius),
-      stroke: "".concat(baseColour),
-      strokeWidth: "7",
-      r: "".concat(radius - 7 / 2)
-    }), /*#__PURE__*/React__default.createElement("path", {
-      d: getArc(75, 100, radius - 7 / 2, radius, false),
-      strokeWidth: "7",
-      stroke: "".concat(spinnerColour),
-      strokeLinecap: "round"
-    }));
-  };
-  GoAElementLoader.propTypes = {
-    visible: propTypes.bool,
-    baseColour: propTypes.string,
-    spinnerColour: propTypes.string,
-    size: propTypes.number
-  };
-
-  var css_248z$j = "/* Palette */\n/* Semantic usages */\n.goa-form {\n  margin: auto;\n  width: 40.25rem; }\n\n.goa-form-container {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: stretch;\n  -moz-column-gap: 1rem;\n       column-gap: 1rem; }\n\n.goa-form-container > div {\n  margin: 0;\n  flex: 1;\n  width: 100%; }\n\n.goa-form-container > div + div {\n  margin-left: 1rem; }\n\n@media (max-width: 640px) {\n  .goa-form {\n    margin: auto;\n    width: 95%; }\n  .goa-form-container > div {\n    min-width: 100%; }\n  .goa-form-container > div + div {\n    margin-left: 0rem; } }\n\n.goa-form-items {\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem; }\n  .goa-form-items label {\n    display: block;\n    font-weight: bold;\n    color: #333; }\n  .goa-form-items input,\n  .goa-form-items textarea {\n    display: block;\n    width: 100%;\n    padding: 0.5rem; }\n\n.goa-form-button {\n  margin-top: 2rem; }\n  @media (min-width: 640px) {\n    .goa-form-button {\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end; }\n      .goa-form-button button {\n        min-width: 6rem; }\n      .goa-form-button button + button,\n      .goa-form-button button + .goa-link-button,\n      .goa-form-button .goa-link-button + button,\n      .goa-form-button .goa-link-button + .goa-link-button {\n        margin-left: 0.5rem; } }\n  .goa-form-button button {\n    margin: 0; }\n";
-  styleInject(css_248z$j);
-
-  var GoAFormItem = function GoAFormItem(_ref) {
-    var name = _ref.name,
-        _ref$validators = _ref.validators,
-        validators = _ref$validators === void 0 ? [] : _ref$validators,
-        _ref$onChange = _ref.onChange,
-        onChange = _ref$onChange === void 0 ? null : _ref$onChange,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
-
-    var _useContext = React.useContext(FormContext),
-        errors = _useContext.errors,
-        navigator = _useContext.navigator,
-        setFieldValue = _useContext.setFieldValue,
-        registerInput = _useContext.registerInput;
-
-    React.useEffect(function () {
-      return registerInput({
-        name: name,
-        validators: validators
-      });
-    }, []);
-
-    var handleChange = function handleChange(val) {
-      if (typeof val === 'string') {
-        setFieldValue(name, val);
-      } else {
-        setFieldValue(name, val.target.value);
-      }
-
-      if (onChange) {
-        onChange(val);
-      }
+    var GoAInputMonth = function GoAInputMonth(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "month"
+      }), void 0);
     };
-
-    var message = errors[name] || [];
-    var navigateTo = navigator && navigator.name && navigator.name === name;
-
-    function renderChildren() {
-      return React.Children.map(children, function (child) {
-        if (child.props.originalType !== 'label') {
-          return React__default.cloneElement(child, {
-            onChange: handleChange,
-            message: message.toString(),
-            id: name,
-            navigator: navigateTo
-          });
-        } else {
-          return child;
+    var GoAInputNumber = function GoAInputNumber(props) {
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "number"
+      }), void 0);
+    };
+    var GoAInputRange = function GoAInputRange(_a) {
+      _a.step;
+          var props = __rest(_a, ["step"]);
+
+      return jsxRuntime.jsx("input", __assign({}, props, {
+        type: "range",
+        onChange: function (e) {
+          return props.onChange(e.target.name, e.target.value);
         }
-      });
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      id: name,
-      className: "goa-form-items"
-    }, renderChildren());
-  };
-  GoAFormItem.propTypes = {
-    name: propTypes.string,
-    onChange: propTypes.func,
-    validators: propTypes.array
-  };
-
-  var GoAFormButton = function GoAFormButton(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-button"
-    }, children);
-  };
-
-  var GoAFormContainer = function GoAFormContainer(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-container"
-    }, children);
-  };
-
-  var initState = {
-    data: {},
-    validators: {},
-    errors: {},
-    navigator: {}
-  };
-  var FormContext;
-
-  var _FormContext = FormContext = React__default.createContext({}),
-      Provider = _FormContext.Provider;
-  var GoAForm = function GoAForm(_ref) {
-    var _ref$formTitle = _ref.formTitle,
-        formTitle = _ref$formTitle === void 0 ? '' : _ref$formTitle,
-        _ref$formDescription = _ref.formDescription,
-        formDescription = _ref$formDescription === void 0 ? '' : _ref$formDescription,
-        onFormSubmit = _ref.onFormSubmit,
-        _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        props = _objectWithoutProperties(_ref, ["formTitle", "formDescription", "onFormSubmit", "children"]);
-
-    var _useState = React.useState(initState),
-        _useState2 = _slicedToArray(_useState, 2),
-        formState = _useState2[0],
-        setFormState = _useState2[1];
-
-    var _useState3 = React.useState([]),
-        _useState4 = _slicedToArray(_useState3, 2),
-        formErrors = _useState4[0],
-        setFormErrors = _useState4[1];
-
-    var onSubmit = function onSubmit(e) {
-      e.preventDefault();
-
-      if (validate()) {
-        onFormSubmit(formState.data);
-      }
+      }), void 0);
     };
 
-    var validate = function validate() {
-      var validators = formState.validators;
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          errors: {}
-        });
-      });
-      var formErrors = Object.entries(validators).reduce(function (errors, _ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            name = _ref3[0],
-            validators = _ref3[1];
-
-        var data = formState.data;
-
-        if (validators.length > 0) {
-          var messages = validators.reduce(function (result, validator) {
-            var value = data[name];
-            var err = validator(value, data);
-            return [].concat(_toConsumableArray(result), _toConsumableArray(err));
-          }, []);
-
-          if (messages.length > 0) {
-            errors[name] = "".concat(messages, " ").concat(name.toLocaleLowerCase());
-          }
-
-          var errorNames = [];
-
-          for (var key in errors) {
-            if (errors[key].length > 0) {
-              errorNames.push(key);
-            }
-          }
-
-          setFormErrors(errorNames);
+    var GoAModal = function GoAModal(_a) {
+      var title = _a.title,
+          children = _a.children,
+          open = _a.open,
+          closable = _a.closable,
+          onClose = _a.onClose;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
         }
 
-        return errors;
-      }, {});
-
-      if (Object.keys(formErrors).length === 0) {
-        return true;
-      }
-
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          errors: formErrors
-        });
-      });
-      return false;
+        var current = el.current;
+
+        var listener = function listener(e) {
+          onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+
+        current.addEventListener('_close', listener);
+        return function () {
+          current.removeEventListener('_close', listener);
+        };
+      }, [el, onClose]);
+      return jsxRuntime.jsx("goa-modal", __assign({
+        ref: el,
+        title: title,
+        open: open,
+        closable: closable,
+        scrollable: true
+      }, {
+        children: children
+      }), void 0);
     };
 
-    var setFieldValue = function setFieldValue(name, value) {
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          data: _objectSpread2(_objectSpread2({}, state.data), {}, _defineProperty({}, name, value)),
-          errors: _objectSpread2(_objectSpread2({}, state.errors), {}, _defineProperty({}, name, []))
-        });
-      });
+    var GoANotification = function GoANotification(_a) {
+      var _b = _a.type,
+          type = _b === void 0 ? "information" : _b,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-notification", __assign({
+        type: type
+      }, {
+        children: children
+      }), void 0);
     };
 
-    var registerInput = function registerInput(_ref4) {
-      var name = _ref4.name,
-          validators = _ref4.validators;
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          validators: _objectSpread2(_objectSpread2({}, state.validators), {}, _defineProperty({}, name, validators || [])),
-          errors: _objectSpread2(_objectSpread2({}, state.errors), {}, _defineProperty({}, name, []))
-        });
-      });
-      return function () {
-        setFormState(function (state) {
-          var _state = _objectSpread2({}, state),
-              data = _state.data,
-              errors = _state.errors,
-              currentValidators = _state.validators,
-              navigator = _state.navigator;
-
-          delete data[name];
-          delete errors[name];
-          delete currentValidators[name];
-          delete navigator[name];
-          return {
-            data: data,
-            errors: errors,
-            validators: currentValidators,
-            navigator: navigator
-          };
-        });
-      };
+    var GoAPageLoader = function GoAPageLoader(_a) {
+      var type = _a.type,
+          visible = _a.visible,
+          message = _a.message,
+          progress = _a.progress,
+          variant = _a.variant;
+      return jsxRuntime.jsx("goa-page-loader", {
+        type: type,
+        visible: visible,
+        message: message,
+        progress: progress,
+        variant: variant
+      }, void 0);
     };
 
-    var formProviderValue = {
-      errors: formState.errors,
-      data: formState.data,
-      navigator: formState.navigator,
-      setFieldValue: setFieldValue,
-      registerInput: registerInput
+    var GoARadio = function GoARadio(_a) {
+      var name = _a.name,
+          label = _a.label,
+          value = _a.value,
+          disabled = _a.disabled,
+          checked = _a.checked,
+          error = _a.error,
+          testId = _a.testId,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-radio-item", __assign({
+        name: name,
+        label: label,
+        value: value,
+        error: error,
+        disabled: disabled,
+        checked: checked,
+        "data-testid": testId
+      }, {
+        children: children
+      }), void 0);
     };
 
-    function addNavigator(error) {
-      setFormState(function (state) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          navigator: {
-            name: error
-          }
-        });
-      });
-    }
+    var GoARadioGroup = function GoARadioGroup(_a) {
+      var name = _a.name,
+          value = _a.value,
+          children = _a.children,
+          _b = _a.orientation,
+          orientation = _b === void 0 ? 'vertical' : _b,
+          testId = _a.testId,
+          onChange = _a.onChange;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
+        }
 
-    var renderErrorList = function renderErrorList() {
-      return /*#__PURE__*/React__default.createElement(GoACallout, {
-        type: "emergency",
-        title: "Please fix following errors:"
-      }, /*#__PURE__*/React__default.createElement("ul", null, formErrors.map(function (error) {
-        return /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("a", {
-          href: "#".concat(error),
-          onClick: function onClick() {
-            return addNavigator(error);
-          }
-        }, error));
-      })));
+        var listener = function listener(e) {
+          onChange(name, e.detail.value);
+        };
+
+        var currentEl = el.current;
+        currentEl.addEventListener("_change", listener);
+        return function () {
+          currentEl.removeEventListener("_change", listener);
+        };
+      }, []);
+      return jsxRuntime.jsx("goa-radio-group", __assign({
+        "data-testid": testId,
+        ref: el,
+        name: name,
+        value: value,
+        orientation: orientation
+      }, {
+        children: children
+      }), void 0);
     };
 
-    return /*#__PURE__*/React__default.createElement(Provider, {
-      value: formProviderValue
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form"
-    }, /*#__PURE__*/React__default.createElement("h2", null, formTitle), /*#__PURE__*/React__default.createElement("p", null, formDescription), onFormSubmit ? /*#__PURE__*/React__default.createElement("form", {
-      onSubmit: onSubmit
-    }, children, formErrors.length > 0 && renderErrorList(), /*#__PURE__*/React__default.createElement(GoAFormButton, null, /*#__PURE__*/React__default.createElement(GoAButton, {
-      buttonType: "tertiary",
-      type: "button"
-    }, "Cancel"), /*#__PURE__*/React__default.createElement(GoAButton, {
-      buttonType: "primary",
-      type: "submit"
-    }, "Submit"))) : children));
-  };
-  GoAForm.propTypes = {
-    formTitle: propTypes.string,
-    formDescription: propTypes.string,
-    onSubmit: propTypes.func,
-    children: propTypes.node
-  };
-
-  var css_248z$k = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n";
-  styleInject(css_248z$k);
-
-  var GoASkeletonElement = function GoASkeletonElement(_ref) {
-    var _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'text' : _ref$type;
-    var classes = "skeleton ".concat(type);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes
-    });
-  };
-
-  var 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__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-content"
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.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__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-content"
-    }, /*#__PURE__*/React__default.createElement("div", null, elements));
-  };
-
-  var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
-    var _ref$rows = _ref.rows,
-        rows = _ref$rows === void 0 ? 1 : _ref$rows;
-    var elements = [];
-
-    for (var i = 0; i < rows; i++) {
-      elements.push( /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-        type: "text"
-      }));
-    }
+    var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
+      var level = _a.level;
+      return jsxRuntime.jsx("goa-service-level-header", {
+        level: level
+      }, void 0);
+    };
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-image-content"
-    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-      type: "thumbnail"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "skeleton-image-content__text"
-    }, /*#__PURE__*/React__default.createElement(GoASkeletonElement, {
-      type: "title"
-    }), elements));
-  };
-
-  var css_248z$l = "/* Palette */\n/* Semantic usages */\n.goa-input {\n  position: relative; }\n\n.goa-input-error-message {\n  font-size: var(--fs-sm);\n  font-weight: 300;\n  color: red;\n  margin: 0; }\n\n.goa-input-help-text-message {\n  font-size: var(--fs-sm);\n  font-weight: 200;\n  color: #333;\n  margin: 0; }\n\n.goa-input-field {\n  border: 1px solid #666666;\n  border-radius: 4px; }\n\n.goa-input-field-error {\n  border: 1px solid #ec040b;\n  border-radius: 4px; }\n\n.goa-input-highlight-error {\n  border: 4px solid #ec040b;\n  border-radius: 4px; }\n";
-  styleInject(css_248z$l);
-
-  var GoAInput = function GoAInput(_ref) {
-    var _ref$validate = _ref.validate,
-        validate = _ref$validate === void 0 ? null : _ref$validate,
-        _ref$name = _ref.name,
-        name = _ref$name === void 0 ? '' : _ref$name,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? '' : _ref$type,
-        _ref$message = _ref.message,
-        message = _ref$message === void 0 ? '' : _ref$message,
-        _ref$required = _ref.required,
-        required = _ref$required === void 0 ? false : _ref$required,
-        _ref$helpText = _ref.helpText,
-        helpText = _ref$helpText === void 0 ? '' : _ref$helpText,
-        _ref$multiLine = _ref.multiLine,
-        multiLine = _ref$multiLine === void 0 ? false : _ref$multiLine,
-        _ref$navigator = _ref.navigator,
-        navigator = _ref$navigator === void 0 ? false : _ref$navigator,
-        onChange = _ref.onChange;
-
-    var _useState = React.useState(true),
-        _useState2 = _slicedToArray(_useState, 2),
-        valid = _useState2[0],
-        setValid = _useState2[1];
-
-    var _useState3 = React.useState(''),
-        _useState4 = _slicedToArray(_useState3, 2),
-        value = _useState4[0],
-        setValue = _useState4[1];
-
-    var handleInput = function handleInput(e) {
-      var value = e.target.value;
-      setValue(value);
-
-      if (validate) {
-        setValid(validate(value));
-      }
+    var GoATextArea = function GoATextArea(_a) {
+      var name = _a.name,
+          value = _a.value,
+          placeholder = _a.placeholder,
+          rows = _a.rows,
+          disabled = _a.disabled,
+          onChange = _a.onChange;
+      var el = React.useRef(null);
+      React.useEffect(function () {
+        if (!el.current) {
+          return;
+        }
 
-      onChange(value);
+        var current = el.current;
+
+        var listener = function listener(e) {
+          var _a = e.detail.data,
+              name = _a.name,
+              value = _a.value;
+          onChange(name, value);
+        };
+
+        current.addEventListener('_change', listener);
+        return function () {
+          current.removeEventListener('_change', listener);
+        };
+      }, [el, onChange]);
+      return jsxRuntime.jsx("goa-textarea", {
+        ref: el,
+        name: name,
+        placeholder: placeholder,
+        value: value,
+        rows: rows,
+        disabled: disabled
+      }, void 0);
     };
 
-    var inputFieldClass = !message ? 'goa-input-field' : !navigator ? 'goa-input-field-error' : 'goa-input-highlight-error';
-    return /*#__PURE__*/React__default.createElement("div", null, multiLine ? /*#__PURE__*/React__default.createElement("textarea", {
-      placeholder: name,
-      onChange: handleInput,
-      className: inputFieldClass
-    }, value) : /*#__PURE__*/React__default.createElement("input", {
-      type: type,
-      required: required,
-      name: name,
-      value: value,
-      onChange: handleInput,
-      className: inputFieldClass,
-      placeholder: name
-    }), message && /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-input-error-message"
-    }, message), helpText && /*#__PURE__*/React__default.createElement("p", {
-      className: "goa-input-help-text-message"
-    }, helpText));
-  };
-  GoAInput.propTypes = {
-    validate: propTypes.func,
-    name: propTypes.string,
-    type: propTypes.string,
-    message: propTypes.string,
-    required: propTypes.bool,
-    helpText: propTypes.string,
-    multiLine: propTypes.bool,
-    navigator: propTypes.bool,
-    onChange: propTypes.func
-  };
-
-  exports.GoABadge = GoABadge;
-  exports.GoAButton = GoAButton;
-  exports.GoACallout = GoACallout;
-  exports.GoACard = GoACard;
-  exports.GoACardGroup = GoACardGroup;
-  exports.GoACheckbox = GoACheckbox;
-  exports.GoADropdown = GoADropdown;
-  exports.GoAElementLoader = GoAElementLoader;
-  exports.GoAForm = GoAForm;
-  exports.GoAFormButton = GoAFormButton;
-  exports.GoAFormContainer = GoAFormContainer;
-  exports.GoAFormItem = GoAFormItem;
-  exports.GoAHeader = GoAHeader;
-  exports.GoAHeroBanner = GoAHeroBanner;
-  exports.GoAHeroBannerContent = GoAHeroBannerContent;
-  exports.GoAHeroBannerLink = GoAHeroBannerLink;
-  exports.GoAInput = GoAInput;
-  exports.GoAMicrositeLogo = MicrositeLogo;
-  exports.GoANotification = GoANotification;
-  exports.GoAOption = GoAOption;
-  exports.GoAOptionGroup = GoAOptionGroup;
-  exports.GoAPageLoader = GoAPageLoader;
-  exports.GoARadio = GoARadio;
-  exports.GoARadioGroup = GoARadioGroup;
-  exports.GoASkeletonContent = GoASkeletonContent;
-  exports.GoASkeletonGridColumnContent = GoASkeletonGridColumnContent;
-  exports.GoASkeletonImageContent = GoASkeletonImageContent;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+    exports.GoAAppHeader = GoAAppHeader;
+    exports.GoABadge = GoABadge;
+    exports.GoAButton = GoAButton;
+    exports.GoAButtonGroup = GoAButtonGroup;
+    exports.GoACallout = GoACallout;
+    exports.GoACheckbox = GoACheckbox;
+    exports.GoAContainer = GoAContainer;
+    exports.GoADropdown = GoADropdown;
+    exports.GoADropdownOption = GoADropdownOption;
+    exports.GoAEmergencyBadge = GoAEmergencyBadge;
+    exports.GoAFlexRow = row;
+    exports.GoAFormItem = formItem;
+    exports.GoAHeroBanner = GoAHeroBanner;
+    exports.GoAHeroBannerActions = GoAHeroBannerActions;
+    exports.GoAHeroBannerContent = GoAHeroBannerContent;
+    exports.GoAIcon = GoAIcon;
+    exports.GoAIconButton = GoAIconButton;
+    exports.GoAInfoBadge = GoAInfoBadge;
+    exports.GoAInput = GoAInput;
+    exports.GoAInputDate = GoAInputDate;
+    exports.GoAInputDateTime = GoAInputDateTime;
+    exports.GoAInputEmail = GoAInputEmail;
+    exports.GoAInputFile = GoAInputFile;
+    exports.GoAInputMonth = GoAInputMonth;
+    exports.GoAInputNumber = GoAInputNumber;
+    exports.GoAInputPassword = GoAInputPassword;
+    exports.GoAInputRange = GoAInputRange;
+    exports.GoAInputSearch = GoAInputSearch;
+    exports.GoAInputTel = GoAInputTel;
+    exports.GoAInputText = GoAInputText;
+    exports.GoAInputTime = GoAInputTime;
+    exports.GoAInputUrl = GoAInputUrl;
+    exports.GoAModal = GoAModal;
+    exports.GoANotification = GoANotification;
+    exports.GoAPageLoader = GoAPageLoader;
+    exports.GoARadio = GoARadio;
+    exports.GoARadioGroup = GoARadioGroup;
+    exports.GoAServiceLevelHeader = GoAServiceLevelHeader;
+    exports.GoASuccessBadge = GoASuccessBadge;
+    exports.GoATextArea = GoATextArea;
+    exports.GoAWarningBadge = GoAWarningBadge;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));