@abgov/react-components 3.4.0-beta.63 → 3.4.0-beta.64

package/react-components.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, Fragment as Fragment$1, useEffect, Children } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, Fragment as Fragment$1, useEffect, Children, createElement } from 'react';
 import classnames from 'classnames';
 
 function styleInject(css, ref) {
@@ -28,172 +29,44 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\nbody,\ninput,\nbutton,\ntextarea {\n  background: #fff;\n  font-family: acumin-pro-semi-condensed, sans-serif;\n  font-weight: 400;\n  font-size: var(--fs-base);\n  color: #333; }\n\nbody {\n  margin: 0;\n  scroll-behavior: smooth; }\n\n*,\n*:before,\n*:after {\n  box-sizing: border-box; }\n\np {\n  margin: 0;\n  margin-bottom: 1rem; }\n\nhr {\n  border-width: 0;\n  border-top: 1px solid #ccc;\n  padding: 0;\n  margin: 0; }\n\nul,\nol {\n  padding-left: 0;\n  padding-left: 1rem; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n  padding-left: 0;\n  margin-top: 0; }\n\ndl {\n  margin-top: 0; }\n\ndd {\n  margin-left: 0.5rem; }\n\na {\n  color: var(--color-blue-500);\n  cursor: pointer; }\n\na:hover {\n  color: var(--color-blue-600); }\n\na:focus {\n  outline-width: thin;\n  outline-style: solid;\n  outline-color: var(--color-blue-600);\n  outline-offset: 0px; }\n\n::-moz-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n:-ms-input-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n::placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */ }\n\n:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: #999; }\n\n::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: #999; }\n";
-styleInject(css_248z);
-
-var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 400; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 400; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 700; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 700; }\n\n@font-face {\n  font-family: 'acumin-pro-semi-condensed';\n  src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 600; }\n";
-styleInject(css_248z$1);
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  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;
-    }
-  }
-
-  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;
+var css_248z$u = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\nbody,\ninput,\nbutton,\ntextarea {\n  background: #fff;\n  font-family: acumin-pro-semi-condensed, sans-serif;\n  font-weight: 400;\n  font-size: var(--fs-base);\n  color: #333;\n}\n\nbody {\n  margin: 0;\n  scroll-behavior: smooth;\n}\n\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\np {\n  margin: 0;\n  margin-bottom: 1rem;\n}\n\nhr {\n  border-width: 0;\n  border-top: 1px solid #ccc;\n  padding: 0;\n  margin: 0;\n}\n\nul,\nol {\n  padding-left: 0;\n  padding-left: 1rem;\n}\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n  padding-left: 0;\n  margin-top: 0;\n}\n\ndl {\n  margin-top: 0;\n}\n\ndd {\n  margin-left: 0.5rem;\n}\n\na {\n  color: var(--color-blue-500);\n  cursor: pointer;\n}\n\na:hover {\n  color: var(--color-blue-600);\n}\n\na:focus {\n  outline-width: thin;\n  outline-style: solid;\n  outline-color: var(--color-blue-600);\n  outline-offset: 0px;\n}\n\n::-moz-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */\n}\n\n:-ms-input-placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */\n}\n\n::placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: #999;\n  opacity: 1;\n  /* Firefox */\n}\n\n:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: #999;\n}\n\n::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: #999;\n}";
+styleInject(css_248z$u);
 
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+var css_248z$t = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n  font-family: \"acumin-pro-semi-condensed\";\n  src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 400;\n}\n@font-face {\n  font-family: \"acumin-pro-semi-condensed\";\n  src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 400;\n}\n@font-face {\n  font-family: \"acumin-pro-semi-condensed\";\n  src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 700;\n}\n@font-face {\n  font-family: \"acumin-pro-semi-condensed\";\n  src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n  font-style: italic;\n  font-weight: 700;\n}\n@font-face {\n  font-family: \"acumin-pro-semi-condensed\";\n  src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n  font-style: normal;\n  font-weight: 600;\n}";
+styleInject(css_248z$t);
 
-  return arr2;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 }
 
-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.");
-}
+var propTypes = {exports: {}};
 
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+var reactIs = {exports: {}};
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+var reactIs_production_min = {};
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -205,43 +78,21 @@ function createCommonjsModule(fn, module) {
  */
 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
-};
+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}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+reactIs_production_min.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)};reactIs_production_min.typeOf=z;
 
-var reactIs_development = createCommonjsModule(function (module, exports) {
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.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.
+ */
 
 
 
@@ -382,74 +233,42 @@ 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;
+reactIs_development.AsyncMode = AsyncMode;
+reactIs_development.ConcurrentMode = ConcurrentMode;
+reactIs_development.ContextConsumer = ContextConsumer;
+reactIs_development.ContextProvider = ContextProvider;
+reactIs_development.Element = Element;
+reactIs_development.ForwardRef = ForwardRef;
+reactIs_development.Fragment = Fragment;
+reactIs_development.Lazy = Lazy;
+reactIs_development.Memo = Memo;
+reactIs_development.Portal = Portal;
+reactIs_development.Profiler = Profiler;
+reactIs_development.StrictMode = StrictMode;
+reactIs_development.Suspense = Suspense;
+reactIs_development.isAsyncMode = isAsyncMode;
+reactIs_development.isConcurrentMode = isConcurrentMode;
+reactIs_development.isContextConsumer = isContextConsumer;
+reactIs_development.isContextProvider = isContextProvider;
+reactIs_development.isElement = isElement;
+reactIs_development.isForwardRef = isForwardRef;
+reactIs_development.isFragment = isFragment;
+reactIs_development.isLazy = isLazy;
+reactIs_development.isMemo = isMemo;
+reactIs_development.isPortal = isPortal;
+reactIs_development.isProfiler = isProfiler;
+reactIs_development.isStrictMode = isStrictMode;
+reactIs_development.isSuspense = isSuspense;
+reactIs_development.isValidElementType = isValidElementType;
+reactIs_development.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;
+  reactIs.exports = reactIs_production_min;
 } else {
-  module.exports = reactIs_development;
+  reactIs.exports = reactIs_development;
 }
-});
 
 /*
 object-assign
@@ -547,18 +366,25 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
  * LICENSE file in the root directory of this source tree.
  */
 
-var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
-var ReactPropTypesSecret_1 = ReactPropTypesSecret;
+var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
 
-var printWarning = function() {};
+/**
+ * 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 printWarning$1 = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+  var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
   var loggedTypeFailures = {};
-  var has = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
 
-  printWarning = function(text) {
+  printWarning$1 = function(text) {
     var message = 'Warning: ' + text;
     if (typeof console !== 'undefined') {
       console.error(message);
@@ -583,10 +409,10 @@ if (process.env.NODE_ENV !== 'production') {
  * @param {?Function} getStack Returns the component stack.
  * @private
  */
-function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
   if (process.env.NODE_ENV !== 'production') {
     for (var typeSpecName in typeSpecs) {
-      if (has(typeSpecs, typeSpecName)) {
+      if (has$1(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.
@@ -602,12 +428,12 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
             err.name = 'Invariant Violation';
             throw err;
           }
-          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
+          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$2);
         } catch (ex) {
           error = ex;
         }
         if (error && !(error instanceof Error)) {
-          printWarning(
+          printWarning$1(
             (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 + '. ' +
@@ -623,7 +449,7 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
 
           var stack = getStack ? getStack() : '';
 
-          printWarning(
+          printWarning$1(
             'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
           );
         }
@@ -637,19 +463,32 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
  *
  * @private
  */
-checkPropTypes.resetWarningCache = function() {
+checkPropTypes$1.resetWarningCache = function() {
   if (process.env.NODE_ENV !== 'production') {
     loggedTypeFailures = {};
   }
 };
 
-var checkPropTypes_1 = checkPropTypes;
+var checkPropTypes_1 = checkPropTypes$1;
 
-var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
-var printWarning$1 = function() {};
+/**
+ * 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 ReactIs$1 = reactIs.exports;
+var assign = objectAssign;
+
+var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+var checkPropTypes = checkPropTypes_1;
+
+var has = Function.call.bind(Object.prototype.hasOwnProperty);
+var printWarning = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
-  printWarning$1 = function(text) {
+  printWarning = function(text) {
     var message = 'Warning: ' + text;
     if (typeof console !== 'undefined') {
       console.error(message);
@@ -807,7 +646,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       componentName = componentName || ANONYMOUS;
       propFullName = propFullName || propName;
 
-      if (secret !== ReactPropTypesSecret_1) {
+      if (secret !== ReactPropTypesSecret$1) {
         if (throwOnDirectAccess) {
           // New behavior only for users of `prop-types` package
           var err = new Error(
@@ -825,7 +664,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
             // Avoid spamming the console because they are often not actionable except for lib authors
             manualPropTypeWarningCount < 3
           ) {
-            printWarning$1(
+            printWarning(
               '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. ' +
@@ -888,7 +727,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         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);
+        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret$1);
         if (error instanceof Error) {
           return error;
         }
@@ -913,7 +752,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
   function createElementTypeTypeChecker() {
     function validate(props, propName, componentName, location, propFullName) {
       var propValue = props[propName];
-      if (!reactIs.isValidElementType(propValue)) {
+      if (!ReactIs$1.isValidElementType(propValue)) {
         var propType = getPropType(propValue);
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
       }
@@ -938,12 +777,12 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     if (!Array.isArray(expectedValues)) {
       if (process.env.NODE_ENV !== 'production') {
         if (arguments.length > 1) {
-          printWarning$1(
+          printWarning(
             '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.');
+          printWarning('Invalid argument supplied to oneOf, expected an array.');
         }
       }
       return emptyFunctionThatReturnsNull;
@@ -980,8 +819,8 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         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 (has(propValue, key)) {
+          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
           if (error instanceof Error) {
             return error;
           }
@@ -994,14 +833,14 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
 
   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;
+      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
       return emptyFunctionThatReturnsNull;
     }
 
     for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
       var checker = arrayOfTypeCheckers[i];
       if (typeof checker !== 'function') {
-        printWarning$1(
+        printWarning(
           'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
           'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
         );
@@ -1012,7 +851,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     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) {
+        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1) == null) {
           return null;
         }
       }
@@ -1044,7 +883,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         if (!checker) {
           continue;
         }
-        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
         if (error) {
           return error;
         }
@@ -1063,7 +902,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       }
       // We need to check all keys in case some are required but missing from
       // props.
-      var allKeys = objectAssign({}, props[propName], shapeTypes);
+      var allKeys = assign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
         if (!checker) {
@@ -1073,7 +912,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
             '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
           );
         }
-        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
         if (error) {
           return error;
         }
@@ -1215,20 +1054,29 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     return propValue.constructor.name;
   }
 
-  ReactPropTypes.checkPropTypes = checkPropTypes_1;
-  ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
+  ReactPropTypes.checkPropTypes = checkPropTypes;
+  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
   ReactPropTypes.PropTypes = ReactPropTypes;
 
   return ReactPropTypes;
 };
 
+/**
+ * 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 = ReactPropTypesSecret_1;
+
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
 emptyFunctionWithReset.resetWarningCache = emptyFunction;
 
 var factoryWithThrowingShims = function() {
   function shim(props, propName, componentName, location, propFullName, secret) {
-    if (secret === ReactPropTypesSecret_1) {
+    if (secret === ReactPropTypesSecret) {
       // It is still safe when called from React.
       return;
     }
@@ -1274,7 +1122,6 @@ var factoryWithThrowingShims = function() {
   return ReactPropTypes;
 };
 
-var propTypes = createCommonjsModule(function (module) {
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -1283,247 +1130,306 @@ var propTypes = createCommonjsModule(function (module) {
  */
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = reactIs;
+  var ReactIs = reactIs.exports;
 
   // 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);
+  propTypes.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();
+  propTypes.exports = factoryWithThrowingShims();
 }
-});
 
-var css_248z$2 = "/* Palette */\n/* Semantic usages */\n.goa-callout {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  margin: 24px 0 0;\n  padding: 23px 24px 23px 24px;\n  border-width: 0;\n  border-left-width: 48px;\n  border-style: solid;\n  border-color: #0070c4;\n  background: #f1f1f1;\n  /* variants ***/ }\n  .goa-callout *:first-child {\n    margin-top: 0; }\n  .goa-callout *:last-child {\n    margin-bottom: 0; }\n  .goa-callout.goa--important {\n    border-color: #feba35; }\n  .goa-callout.goa--emergency {\n    border-color: #EC040B; }\n  .goa-callout.goa--error {\n    border-color: #EC040B; }\n  .goa-callout.goa--success {\n    border-color: #00853f; }\n  .goa-callout:before {\n    position: absolute;\n    top: 28px;\n    left: -36px;\n    width: 24px;\n    height: 24px;\n    content: '';\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--emergency:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--error:before {\n    background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><rect class=\"a\" width=\"24\" height=\"24\"/><path class=\"b\" d=\"M48.1,23a11,11,0,1,0-11-11A10.968,10.968,0,0,0,48.1,23Zm0-20a9,9,0,1,1-9,9A8.963,8.963,0,0,1,48.1,3Z\" transform=\"translate(-36)\"/><path class=\"b\" d=\"M43.6,16.4a.967.967,0,0,0,1.4,0l3-3,3,3a.967.967,0,0,0,1.4,0,.967.967,0,0,0,0-1.4l-3-3,3-3A.99.99,0,0,0,51,7.6l-3,3-3-3A.99.99,0,0,0,43.6,9l3,3-3,3A1.2,1.2,0,0,0,43.6,16.4Z\" transform=\"translate(-36)\"/></svg>');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-callout.goa--important:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--event:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--event:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-callout.goa--success:before {\n    background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><g transform=\"translate(-23 -68)\"><rect class=\"a\" width=\"24\" height=\"24\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M12,23A11,11,0,1,0,1,12,10.968,10.968,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A8.963,8.963,0,0,1,12,3Z\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M10.9,16.4a.908.908,0,0,0,.7.3h.1a.842.842,0,0,0,.7-.4L17.6,9a.913.913,0,0,0-.2-1.4,1,1,0,0,0-1.4.3l-4.5,6.3L8,10.5a.99.99,0,0,0-1.4,1.4Z\" transform=\"translate(23 68)\"/></g></svg>');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n  .goa-callout .messages {\n    margin-bottom: 0;\n    margin-top: 1em; }\n";
-styleInject(css_248z$2);
+var PropTypes = propTypes.exports;
+
+var css_248z$s = "/* 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}\n.goa-callout *:first-child {\n  margin-top: 0;\n}\n.goa-callout *:last-child {\n  margin-bottom: 0;\n}\n.goa-callout.goa--important {\n  border-color: #feba35;\n}\n.goa-callout.goa--emergency {\n  border-color: #EC040B;\n}\n.goa-callout.goa--error {\n  border-color: #EC040B;\n}\n.goa-callout.goa--success {\n  border-color: #00853f;\n}\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}\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}\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}\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}\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}\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}\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}\n.goa-callout .messages {\n  margin-bottom: 0;\n  margin-top: 1em;\n}";
+styleInject(css_248z$s);
 
-var GoACallout = function GoACallout(_ref) {
-  var title = _ref.title,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "information" : _ref$type,
-      content = _ref.content,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      props = _objectWithoutProperties(_ref, ["title", "type", "content", "children"]);
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "goa-callout goa--".concat(type)
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-    "data-testid": "callout-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "messages",
-    "data-testid": "callout-content"
-  }, content || children))));
+const GoACallout = _a => {
+  var {
+    title,
+    type = "information",
+    content,
+    children = null
+  } = _a;
+      __rest(_a, ["title", "type", "content", "children"]);
+
+  return jsx("div", {
+    children: jsx("div", Object.assign({
+      className: `goa-callout goa--${type}`
+    }, {
+      children: jsxs("div", {
+        children: [jsx("h3", Object.assign({
+          "data-testid": 'callout-title'
+        }, {
+          children: title
+        }), void 0), jsx("div", Object.assign({
+          className: "messages",
+          "data-testid": 'callout-content'
+        }, {
+          children: content || children
+        }), void 0)]
+      }, void 0)
+    }), void 0)
+  }, void 0);
 };
 GoACallout.propTypes = {
-  title: propTypes.string,
-  type: propTypes.string.isRequired,
-  content: propTypes.string
+  title: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  content: PropTypes.string
 };
 
-var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.goa-notification {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  padding-left: 72px;\n  padding-right: 72px;\n  color: #fff;\n  background: #0070c4;\n  /* variants ***/ }\n  .goa-notification.dismissed {\n    display: none; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-notification {\n      padding-left: 24px;\n      padding-right: 24px; } }\n  @media screen and (max-width: 767px) {\n    .goa-notification {\n      padding-left: 24px;\n      padding-right: 24px; } }\n  .goa-notification .content {\n    box-sizing: border-box;\n    display: flex;\n    width: 100%;\n    margin: 0;\n    position: relative;\n    padding: 0 36px; }\n    .goa-notification .content .message {\n      flex: 1 0 0;\n      box-sizing: border-box;\n      min-height: 56px;\n      padding: 28px 0; }\n    .goa-notification .content .close {\n      flex: 0 1 auto;\n      color: #fff; }\n  .goa-notification a {\n    color: #fff; }\n    .goa-notification a:hover, .goa-notification a:focus {\n      color: #fff;\n      text-decoration: none; }\n  .goa-notification.goa--event {\n    background-color: #00853f; }\n  .goa-notification.goa--important {\n    background-color: #feba35; }\n    .goa-notification.goa--important .message {\n      color: #333; }\n    .goa-notification.goa--important a {\n      color: #333; }\n      .goa-notification.goa--important a:hover, .goa-notification.goa--important a:focus {\n        color: #333; }\n  .goa-notification.goa--emergency {\n    background-color: #EC040B; }\n  .goa-notification .close {\n    align-self: center;\n    position: absolute;\n    right: 12px;\n    cursor: pointer; }\n    .goa-notification .close svg {\n      fill: #fff;\n      color: #fff; }\n  .goa-notification .content:before {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    width: 24px;\n    height: 24px;\n    margin-top: -12px;\n    content: '';\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--emergency .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--important .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n  .goa-notification.goa--event .content:before {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center center; }\n";
-styleInject(css_248z$3);
+var css_248z$r = "/* 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}\n.goa-notification.dismissed {\n  display: none;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n  .goa-notification {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n}\n@media screen and (max-width: 767px) {\n  .goa-notification {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n}\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}\n.goa-notification .content .message {\n  flex: 1 0 0;\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 28px 0;\n}\n.goa-notification .content .close {\n  flex: 0 1 auto;\n  color: #fff;\n}\n.goa-notification a {\n  color: #fff;\n}\n.goa-notification a:hover, .goa-notification a:focus {\n  color: #fff;\n  text-decoration: none;\n}\n.goa-notification.goa--event {\n  background-color: #00853f;\n}\n.goa-notification.goa--important {\n  background-color: #feba35;\n}\n.goa-notification.goa--important .message {\n  color: #333;\n}\n.goa-notification.goa--important a {\n  color: #333;\n}\n.goa-notification.goa--important a:hover, .goa-notification.goa--important a:focus {\n  color: #333;\n}\n.goa-notification.goa--emergency {\n  background-color: #EC040B;\n}\n.goa-notification .close {\n  align-self: center;\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n}\n.goa-notification .close svg {\n  fill: #fff;\n  color: #fff;\n}\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}\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}\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}\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$r);
 
-var css_248z$4 = ".goa-notifications .title {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  left: -10px;\n  width: 1px;\n  height: 1px;\n  white-space: nowrap; }\n\n.goa-notifications ul {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  list-style-type: none; }\n  .goa-notifications ul li {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    margin: 0;\n    padding: 0; }\n";
-styleInject(css_248z$4);
+var css_248z$q = ".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}\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$q);
 
-var GoANotification = function GoANotification(_ref) {
-  var title = _ref.title,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "information" : _ref$type,
-      message = _ref.message,
-      notificationUrl = _ref.notificationUrl,
-      _ref$isDismissable = _ref.isDismissable,
-      isDismissable = _ref$isDismissable === void 0 ? true : _ref$isDismissable,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      onDismiss = _ref.onDismiss,
-      props = _objectWithoutProperties(_ref, ["title", "type", "message", "notificationUrl", "isDismissable", "children", "onDismiss"]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      dismissed = _useState2[0],
-      setDismissed = _useState2[1];
-
-  var dismissTrigger = function dismissTrigger(dismissAction) {
+const GoANotification = _a => {
+  var {
+    title,
+    type = "information",
+    message,
+    notificationUrl,
+    isDismissable = true,
+    children = null,
+    onDismiss
+  } = _a;
+      __rest(_a, ["title", "type", "message", "notificationUrl", "isDismissable", "children", "onDismiss"]);
+
+  const [dismissed, setDismissed] = useState(false);
+
+  const dismissTrigger = dismissAction => {
     setDismissed(dismissAction);
     onDismiss();
   };
 
   if (!dismissed) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "goa-notifications"
-    }, /*#__PURE__*/React.createElement("h2", {
-      className: "title"
-    }, title)), /*#__PURE__*/React.createElement("div", {
-      role: "notification",
-      className: "goa-notification goa--".concat(type)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "content"
-    }, notificationUrl ? /*#__PURE__*/React.createElement("a", {
-      className: "message",
-      role: "url",
-      href: notificationUrl
-    }, message || children) : /*#__PURE__*/React.createElement("span", {
-      className: "message"
-    }, message || children), isDismissable && /*#__PURE__*/React.createElement("a", {
-      role: "closeBox",
-      className: "close",
-      title: "Dismiss",
-      onClick: function onClick() {
-        return dismissTrigger(!dismissed);
-      }
-    }, /*#__PURE__*/React.createElement("svg", {
-      width: "16px",
-      height: "16px",
-      viewBox: "0 0 16 16"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M 15.99 14.54C 15.99 14.54 14.54 15.99 14.54 15.99 14.54 15.99 8 9.45 8 9.45 8 9.45 1.46 15.99 1.46 15.99 1.46 15.99 0.01 14.54 0.01 14.54 0.01 14.54 6.55 8 6.55 8 6.55 8 0.01 1.46 0.01 1.46 0.01 1.46 1.46 0.01 1.46 0.01 1.46 0.01 8 6.55 8 6.55 8 6.55 14.54 0.01 14.54 0.01 14.54 0.01 15.99 1.46 15.99 1.46 15.99 1.46 9.45 8 9.45 8 9.45 8 15.99 14.54 15.99 14.54Z"
-    }))))));
+    return jsxs("div", {
+      children: [jsx("div", Object.assign({
+        className: "goa-notifications"
+      }, {
+        children: jsx("h2", Object.assign({
+          className: "title"
+        }, {
+          children: title
+        }), void 0)
+      }), void 0), jsx("div", Object.assign({
+        role: "notification",
+        className: `goa-notification goa--${type}`
+      }, {
+        children: jsxs("div", Object.assign({
+          className: 'content'
+        }, {
+          children: [notificationUrl ? jsx("a", Object.assign({
+            className: "message",
+            role: "url",
+            href: notificationUrl
+          }, {
+            children: message || children
+          }), void 0) : jsx("span", Object.assign({
+            className: "message"
+          }, {
+            children: message || children
+          }), void 0), isDismissable && jsx("a", Object.assign({
+            role: "closeBox",
+            className: "close",
+            title: "Dismiss",
+            onClick: () => dismissTrigger(!dismissed)
+          }, {
+            children: jsx("svg", Object.assign({
+              width: "16px",
+              height: "16px",
+              viewBox: "0 0 16 16"
+            }, {
+              children: jsx("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"
+              }, void 0)
+            }), void 0)
+          }), void 0)]
+        }), void 0)
+      }), void 0)]
+    }, void 0);
   } else {
     return null;
   }
 };
 GoANotification.propTypes = {
-  title: propTypes.string,
-  type: propTypes.string.isRequired,
-  content: propTypes.string
+  title: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  content: PropTypes.string
 };
 
-var css_248z$5 = "/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\nbutton.goa-button,\ninput[type='button'].goa-button,\ninput[type='submit'].goa-button {\n  box-sizing: border-box;\n  min-width: 70px;\n  padding: 12px;\n  border: 2px solid #0070c4;\n  border-radius: 4px;\n  background: #0070c4;\n  cursor: pointer;\n  color: #fff;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em; }\n  button.goa-button.btn-small,\n  input[type='button'].goa-button.btn-small,\n  input[type='submit'].goa-button.btn-small {\n    font-size: 16px;\n    padding: 8px;\n    margin: 12px 12px 0 0; }\n  button.goa-button:last-of-type,\n  input[type='button'].goa-button:last-of-type,\n  input[type='submit'].goa-button:last-of-type {\n    margin-right: 0; }\n  button.goa-button:disabled, button.goa-button:disabled.goa--secondary, button.goa-button:disabled.goa--tertiary,\n  input[type='button'].goa-button:disabled,\n  input[type='button'].goa-button:disabled.goa--secondary,\n  input[type='button'].goa-button:disabled.goa--tertiary,\n  input[type='submit'].goa-button:disabled,\n  input[type='submit'].goa-button:disabled.goa--secondary,\n  input[type='submit'].goa-button:disabled.goa--tertiary {\n    pointer-events: none;\n    color: #666;\n    background-color: #f1f1f1;\n    border-color: #f1f1f1; }\n  button.goa-button:hover,\n  input[type='button'].goa-button:hover,\n  input[type='submit'].goa-button:hover {\n    border-color: #004f84;\n    background: #004f84; }\n  button.goa-button:focus, button.goa-button:active,\n  input[type='button'].goa-button:focus,\n  input[type='button'].goa-button:active,\n  input[type='submit'].goa-button:focus,\n  input[type='submit'].goa-button:active {\n    border-color: #004f84;\n    box-shadow: 0 0 0 3px #feba35;\n    background: #004f84;\n    outline: none; }\n  button.goa-button.goa--secondary,\n  input[type='button'].goa-button.goa--secondary,\n  input[type='submit'].goa-button.goa--secondary {\n    border: 2px solid #0070c4;\n    background: #fff;\n    color: #0070c4; }\n    button.goa-button.goa--secondary:hover,\n    input[type='button'].goa-button.goa--secondary:hover,\n    input[type='submit'].goa-button.goa--secondary:hover {\n      border-color: #004f84;\n      background: #fff;\n      color: #004f84; }\n    button.goa-button.goa--secondary:focus, button.goa-button.goa--secondary:active,\n    input[type='button'].goa-button.goa--secondary:focus,\n    input[type='button'].goa-button.goa--secondary:active,\n    input[type='submit'].goa-button.goa--secondary:focus,\n    input[type='submit'].goa-button.goa--secondary:active {\n      color: #004f84;\n      background-color: #fff;\n      border: 2px solid #004f84;\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  button.goa-button.goa--tertiary,\n  input[type='button'].goa-button.goa--tertiary,\n  input[type='submit'].goa-button.goa--tertiary {\n    border-color: #dcdcdc;\n    background: #fff;\n    color: #0070c4; }\n    button.goa-button.goa--tertiary:hover,\n    input[type='button'].goa-button.goa--tertiary:hover,\n    input[type='submit'].goa-button.goa--tertiary:hover {\n      background: #fff;\n      color: #004f84; }\n    button.goa-button.goa--tertiary:focus, button.goa-button.goa--tertiary:active,\n    input[type='button'].goa-button.goa--tertiary:focus,\n    input[type='button'].goa-button.goa--tertiary:active,\n    input[type='submit'].goa-button.goa--tertiary:focus,\n    input[type='submit'].goa-button.goa--tertiary:active {\n      border: 2px solid #004f84;\n      color: #004f84;\n      background-color: #fff;\n      box-shadow: 0 0 0 3px #feba35;\n      outline: none; }\n  button.goa-button.goa--borderless,\n  input[type='button'].goa-button.goa--borderless,\n  input[type='submit'].goa-button.goa--borderless {\n    background: none;\n    color: var(--color-blue-500);\n    border: none;\n    transition: transform 0.1s ease-in-out;\n    transform: scale(1); }\n    button.goa-button.goa--borderless:hover,\n    input[type='button'].goa-button.goa--borderless:hover,\n    input[type='submit'].goa-button.goa--borderless:hover {\n      background: var(--color-blue-100);\n      color: var(--color-blue-500); }\n    button.goa-button.goa--borderless:focus, button.goa-button.goa--borderless:active,\n    input[type='button'].goa-button.goa--borderless:focus,\n    input[type='button'].goa-button.goa--borderless:active,\n    input[type='submit'].goa-button.goa--borderless:focus,\n    input[type='submit'].goa-button.goa--borderless:active {\n      background-color: var(--color-blue-100);\n      outline: none;\n      box-shadow: none; }\n    button.goa-button.goa--borderless:active,\n    input[type='button'].goa-button.goa--borderless:active,\n    input[type='submit'].goa-button.goa--borderless:active {\n      transform: scale(0.95); }\n  button.goa-button.goa--red,\n  input[type='button'].goa-button.goa--red,\n  input[type='submit'].goa-button.goa--red {\n    color: var(--color-red-500);\n    background: none;\n    border: none;\n    transition: transform 0.1s ease-in-out;\n    transform: scale(1); }\n    button.goa-button.goa--red:hover,\n    input[type='button'].goa-button.goa--red:hover,\n    input[type='submit'].goa-button.goa--red:hover {\n      background: var(--color-red-100);\n      color: var(--color-red-500); }\n    button.goa-button.goa--red:focus, button.goa-button.goa--red:active,\n    input[type='button'].goa-button.goa--red:focus,\n    input[type='button'].goa-button.goa--red:active,\n    input[type='submit'].goa-button.goa--red:focus,\n    input[type='submit'].goa-button.goa--red:active {\n      background: var(--color-red-100);\n      color: var(--color-red-500);\n      outline: none;\n      box-shadow: none; }\n    button.goa-button.goa--red:active,\n    input[type='button'].goa-button.goa--red:active,\n    input[type='submit'].goa-button.goa--red:active {\n      transform: scale(0.95); }\n";
-styleInject(css_248z$5);
+var css_248z$p = "/* 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}\nbutton.goa-button.btn-small,\ninput[type=button].goa-button.btn-small,\ninput[type=submit].goa-button.btn-small {\n  font-size: 16px;\n  padding: 8px;\n  margin: 12px 12px 0 0;\n}\nbutton.goa-button:last-of-type,\ninput[type=button].goa-button:last-of-type,\ninput[type=submit].goa-button:last-of-type {\n  margin-right: 0;\n}\nbutton.goa-button:disabled, button.goa-button:disabled.goa--secondary, button.goa-button:disabled.goa--tertiary,\ninput[type=button].goa-button:disabled,\ninput[type=button].goa-button:disabled.goa--secondary,\ninput[type=button].goa-button:disabled.goa--tertiary,\ninput[type=submit].goa-button:disabled,\ninput[type=submit].goa-button:disabled.goa--secondary,\ninput[type=submit].goa-button:disabled.goa--tertiary {\n  pointer-events: none;\n  color: #666;\n  background-color: #f1f1f1;\n  border-color: #f1f1f1;\n}\nbutton.goa-button:hover,\ninput[type=button].goa-button:hover,\ninput[type=submit].goa-button:hover {\n  border-color: #004f84;\n  background: #004f84;\n}\nbutton.goa-button:focus, button.goa-button:active,\ninput[type=button].goa-button:focus,\ninput[type=button].goa-button:active,\ninput[type=submit].goa-button:focus,\ninput[type=submit].goa-button:active {\n  border-color: #004f84;\n  box-shadow: 0 0 0 3px #feba35;\n  background: #004f84;\n  outline: none;\n}\nbutton.goa-button.goa--secondary,\ninput[type=button].goa-button.goa--secondary,\ninput[type=submit].goa-button.goa--secondary {\n  border: 2px solid #0070c4;\n  background: #fff;\n  color: #0070c4;\n}\nbutton.goa-button.goa--secondary:hover,\ninput[type=button].goa-button.goa--secondary:hover,\ninput[type=submit].goa-button.goa--secondary:hover {\n  border-color: #004f84;\n  background: #fff;\n  color: #004f84;\n}\nbutton.goa-button.goa--secondary:focus, button.goa-button.goa--secondary:active,\ninput[type=button].goa-button.goa--secondary:focus,\ninput[type=button].goa-button.goa--secondary:active,\ninput[type=submit].goa-button.goa--secondary:focus,\ninput[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}\nbutton.goa-button.goa--tertiary,\ninput[type=button].goa-button.goa--tertiary,\ninput[type=submit].goa-button.goa--tertiary {\n  border-color: #dcdcdc;\n  background: #fff;\n  color: #0070c4;\n}\nbutton.goa-button.goa--tertiary:hover,\ninput[type=button].goa-button.goa--tertiary:hover,\ninput[type=submit].goa-button.goa--tertiary:hover {\n  background: #fff;\n  color: #004f84;\n}\nbutton.goa-button.goa--tertiary:focus, button.goa-button.goa--tertiary:active,\ninput[type=button].goa-button.goa--tertiary:focus,\ninput[type=button].goa-button.goa--tertiary:active,\ninput[type=submit].goa-button.goa--tertiary:focus,\ninput[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}\nbutton.goa-button.goa--borderless,\ninput[type=button].goa-button.goa--borderless,\ninput[type=submit].goa-button.goa--borderless {\n  background: none;\n  color: var(--color-blue-500);\n  border: none;\n  transition: transform 0.1s ease-in-out;\n  transform: scale(1);\n}\nbutton.goa-button.goa--borderless:hover,\ninput[type=button].goa-button.goa--borderless:hover,\ninput[type=submit].goa-button.goa--borderless:hover {\n  background: var(--color-blue-100);\n  color: var(--color-blue-500);\n}\nbutton.goa-button.goa--borderless:focus, button.goa-button.goa--borderless:active,\ninput[type=button].goa-button.goa--borderless:focus,\ninput[type=button].goa-button.goa--borderless:active,\ninput[type=submit].goa-button.goa--borderless:focus,\ninput[type=submit].goa-button.goa--borderless:active {\n  background-color: var(--color-blue-100);\n  outline: none;\n  box-shadow: none;\n}\nbutton.goa-button.goa--borderless:active,\ninput[type=button].goa-button.goa--borderless:active,\ninput[type=submit].goa-button.goa--borderless:active {\n  transform: scale(0.95);\n}\nbutton.goa-button.goa--red,\ninput[type=button].goa-button.goa--red,\ninput[type=submit].goa-button.goa--red {\n  color: var(--color-red-500);\n  background: none;\n  border: none;\n  transition: transform 0.1s ease-in-out;\n  transform: scale(1);\n}\nbutton.goa-button.goa--red:hover,\ninput[type=button].goa-button.goa--red:hover,\ninput[type=submit].goa-button.goa--red:hover {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\nbutton.goa-button.goa--red:focus, button.goa-button.goa--red:active,\ninput[type=button].goa-button.goa--red:focus,\ninput[type=button].goa-button.goa--red:active,\ninput[type=submit].goa-button.goa--red:focus,\ninput[type=submit].goa-button.goa--red:active {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n  outline: none;\n  box-shadow: none;\n}\nbutton.goa-button.goa--red:active,\ninput[type=button].goa-button.goa--red:active,\ninput[type=submit].goa-button.goa--red:active {\n  transform: scale(0.95);\n}";
+styleInject(css_248z$p);
 
-var GoAButton = function GoAButton(_ref) {
-  var _ref$buttonType = _ref.buttonType,
-      buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
-      _ref$buttonSize = _ref.buttonSize,
-      buttonSize = _ref$buttonSize === void 0 ? 'normal' : _ref$buttonSize,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? null : _ref$title,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-      props = _objectWithoutProperties(_ref, ["buttonType", "buttonSize", "title", "children", "onClick"]);
-
-  var btnTypeClass = buttonType === 'primary' ? '' : "goa--".concat(buttonType);
-  var btnSize = buttonSize === 'small' ? 'btn-small' : '';
-  return /*#__PURE__*/React.createElement("button", Object.assign({
-    className: "goa-button ".concat(btnSize, " ").concat(btnTypeClass),
+const GoAButton = _a => {
+  var {
+    buttonType = 'primary',
+    buttonSize = 'normal',
+    title = null,
+    children = null,
+    onClick = null
+  } = _a,
+      props = __rest(_a, ["buttonType", "buttonSize", "title", "children", "onClick"]);
+
+  const btnTypeClass = buttonType === 'primary' ? '' : `goa--${buttonType}`;
+  const btnSize = buttonSize === 'small' ? 'btn-small' : '';
+  return jsx("button", Object.assign({
+    className: `goa-button ${btnSize} ${btnTypeClass}`,
     title: title,
     onClick: onClick
-  }, props), children);
+  }, props, {
+    children: children
+  }), void 0);
 };
 GoAButton.propTypes = {
-  buttonSize: propTypes.string,
-  buttonType: propTypes.string,
-  title: propTypes.string,
-  children: propTypes.node,
-  onClick: propTypes.func
+  buttonSize: PropTypes.string,
+  buttonType: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.node,
+  onClick: PropTypes.func
 };
 
-var css_248z$6 = "/* Palette */\n/* Semantic usages */\n.goa-header {\n  display: flex;\n  align-items: center;\n  padding-left: 28px;\n  padding-right: 28px; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-header {\n      padding-left: 28px;\n      padding-right: 28px; } }\n  @media screen and (max-width: 767px) {\n    .goa-header {\n      padding-left: 28px;\n      padding-right: 28px; } }\n  .goa-header.goa-microsite-header,\n  .goa-header > .goa-microsite-header {\n    background-color: #fff;\n    top: 0;\n    display: flex;\n    justify-content: space-between; }\n  .goa-header.goa-official-site-header,\n  .goa-header > .goa-official-site-header {\n    font-size: 12px;\n    background-color: #f1f1f1;\n    line-height: 22px; }\n    .goa-header.goa-official-site-header .site-text,\n    .goa-header > .goa-official-site-header .site-text {\n      white-space: nowrap;\n      padding: 0 4px; }\n    .goa-header.goa-official-site-header .service-level,\n    .goa-header > .goa-official-site-header .service-level {\n      padding: 0 3px;\n      font-weight: bold;\n      vertical-align: baseline;\n      text-transform: capitalize; }\n    .goa-header.goa-official-site-header .service-level--alpha,\n    .goa-header > .goa-official-site-header .service-level--alpha {\n      background-color: #feba35;\n      color: #333; }\n    .goa-header.goa-official-site-header .service-level--beta,\n    .goa-header > .goa-official-site-header .service-level--beta {\n      background-color: #0081a2;\n      color: #fff; }\n    .goa-header.goa-official-site-header .service-level--live,\n    .goa-header > .goa-official-site-header .service-level--live {\n      height: 16px;\n      width: 16px;\n      padding: 0;\n      color: transparent;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center center; }\n  .goa-header .web-link {\n    color: #0070c4;\n    text-align: left; }\n";
-styleInject(css_248z$6);
-
-var css_248z$7 = "a.microsite-link {\n  color: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  height: 66px; }\n  a.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n    outline: none; }\n  a.microsite-link .image-desktop-tablet {\n    width: 150px;\n    height: 42px;\n    display: inline-block;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center center; }\n    @media screen and (max-width: 767px) {\n      a.microsite-link .image-desktop-tablet {\n        display: none; } }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    a.microsite-link .image-mobile {\n      display: none; } }\n  @media screen and (min-width: 1200px) {\n    a.microsite-link .image-mobile {\n      display: none; } }\n  @media screen and (max-width: 767px) {\n    a.microsite-link .image-mobile {\n      width: 34px;\n      height: 34px;\n      display: inline-block;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center center; } }\n  a.microsite-link .name {\n    margin-left: 8px;\n    font-size: 16px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n    @media screen and (min-width: 1200px) {\n      a.microsite-link .name {\n        margin-left: 28px; } }\n    @media screen and (min-width: 768px) and (max-width: 1199px) {\n      a.microsite-link .name {\n        margin-left: 28px; } }\n";
-styleInject(css_248z$7);
+var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-header {\n  display: flex;\n  align-items: center;\n  padding-left: 28px;\n  padding-right: 28px;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n  .goa-header {\n    padding-left: 28px;\n    padding-right: 28px;\n  }\n}\n@media screen and (max-width: 767px) {\n  .goa-header {\n    padding-left: 28px;\n    padding-right: 28px;\n  }\n}\n.goa-header.goa-microsite-header, .goa-header > .goa-microsite-header {\n  background-color: #fff;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n}\n.goa-header.goa-official-site-header, .goa-header > .goa-official-site-header {\n  font-size: 12px;\n  background-color: #f1f1f1;\n  line-height: 22px;\n}\n.goa-header.goa-official-site-header .site-text, .goa-header > .goa-official-site-header .site-text {\n  white-space: nowrap;\n  padding: 0 4px;\n}\n.goa-header.goa-official-site-header .service-level, .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}\n.goa-header.goa-official-site-header .service-level--alpha, .goa-header > .goa-official-site-header .service-level--alpha {\n  background-color: #feba35;\n  color: #333;\n}\n.goa-header.goa-official-site-header .service-level--beta, .goa-header > .goa-official-site-header .service-level--beta {\n  background-color: #0081a2;\n  color: #fff;\n}\n.goa-header.goa-official-site-header .service-level--live, .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}\n.goa-header .web-link {\n  color: #0070c4;\n  text-align: left;\n}";
+styleInject(css_248z$o);
 
-/* eslint-disable-next-line */
+var css_248z$n = "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}\na.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n  outline: none;\n}\na.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}\n@media screen and (max-width: 767px) {\n  a.microsite-link .image-desktop-tablet {\n    display: none;\n  }\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n  a.microsite-link .image-mobile {\n    display: none;\n  }\n}\n@media screen and (min-width: 1200px) {\n  a.microsite-link .image-mobile {\n    display: none;\n  }\n}\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  }\n}\na.microsite-link .name {\n  margin-left: 8px;\n  font-size: 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n@media screen and (min-width: 1200px) {\n  a.microsite-link .name {\n    margin-left: 28px;\n  }\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n  a.microsite-link .name {\n    margin-left: 28px;\n  }\n}";
+styleInject(css_248z$n);
 
-var GoaMicrositeLogo = function GoaMicrositeLogo(props) {
-  return /*#__PURE__*/React.createElement("a", {
+const GoaMicrositeLogo = props => {
+  return jsxs("a", Object.assign({
     href: props.serviceHome,
     "aria-label": props.serviceHome,
     className: "microsite-link"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "image-desktop-tablet"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "image-mobile"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "name"
-  }, props.serviceName));
+  }, {
+    children: [jsx("span", {
+      className: "image-desktop-tablet"
+    }, void 0), jsx("span", {
+      className: "image-mobile"
+    }, void 0), jsx("span", Object.assign({
+      className: "name"
+    }, {
+      children: props.serviceName
+    }), void 0)]
+  }), void 0);
 };
 
-var GoAHeader = function GoAHeader(props) {
-  var serviceLevelCss = classnames('service-level', "service-level--".concat(props.serviceLevel.toString().toLowerCase()));
+const GoAHeader = props => {
+  const serviceLevelCss = classnames('service-level', `service-level--${props.serviceLevel.toString().toLowerCase()}`);
 
   function serviceLevelFormatted() {
     return props.serviceLevel.toLowerCase();
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
-    className: "goa-header goa-official-site-header"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-    className: serviceLevelCss
-  }, serviceLevelFormatted())), props.serviceLevel === 'live' && /*#__PURE__*/React.createElement("div", {
-    className: "site-text"
-  }, "An official site of the ", /*#__PURE__*/React.createElement("a", {
-    href: "https://www.alberta.ca/index.aspx",
-    className: "web-link"
-  }, "Alberta Government")), props.serviceLevel !== 'live' && /*#__PURE__*/React.createElement("div", {
-    className: "site-text"
-  }, "This is a new ", /*#__PURE__*/React.createElement("a", {
-    href: "https://www.alberta.ca/index.aspx",
-    className: "web-link"
-  }, "Alberta Government"), " service")), /*#__PURE__*/React.createElement("div", {
-    className: "goa-header goa-microsite-header"
-  }, /*#__PURE__*/React.createElement(GoaMicrositeLogo, {
-    serviceName: props.serviceName,
-    serviceHome: props.serviceHome
-  }), /*#__PURE__*/React.createElement("div", null, props.children)));
+  return jsxs(Fragment, {
+    children: [jsxs("header", Object.assign({
+      className: "goa-header goa-official-site-header"
+    }, {
+      children: [jsx("div", {
+        children: jsx("span", Object.assign({
+          className: serviceLevelCss
+        }, {
+          children: serviceLevelFormatted()
+        }), void 0)
+      }, void 0), props.serviceLevel === 'live' && jsxs("div", Object.assign({
+        className: "site-text"
+      }, {
+        children: ["An official site of the ", jsx("a", Object.assign({
+          href: "https://www.alberta.ca/index.aspx",
+          className: "web-link"
+        }, {
+          children: "Alberta Government"
+        }), void 0)]
+      }), void 0), props.serviceLevel !== 'live' && jsxs("div", Object.assign({
+        className: "site-text"
+      }, {
+        children: ["This is a new ", jsx("a", Object.assign({
+          href: "https://www.alberta.ca/index.aspx",
+          className: "web-link"
+        }, {
+          children: "Alberta Government"
+        }), void 0), " service"]
+      }), void 0)]
+    }), void 0), jsxs("div", Object.assign({
+      className: "goa-header goa-microsite-header"
+    }, {
+      children: [jsx(GoaMicrositeLogo, {
+        serviceName: props.serviceName,
+        serviceHome: props.serviceHome
+      }, void 0), jsx("div", {
+        children: props.children
+      }, void 0)]
+    }), void 0)]
+  }, void 0);
 };
 
-var css_248z$8 = ".goa-hero-banner-content {\n  font-size: 24px;\n  line-height: 32px;\n  margin: 0;\n  color: #fff; }\n  @media screen and (min-width: 768px) and (max-width: 1199px) {\n    .goa-hero-banner-content {\n      width: 80%; } }\n  @media screen and (min-width: 1200px) {\n    .goa-hero-banner-content {\n      width: 40%; } }\n  .goa-hero-banner-content:last-of-type {\n    margin-bottom: 28px; }\n";
-styleInject(css_248z$8);
+var css_248z$m = ".goa-hero-banner-content {\n  font-size: 24px;\n  line-height: 32px;\n  margin: 0;\n  color: #fff;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n  .goa-hero-banner-content {\n    width: 80%;\n  }\n}\n@media screen and (min-width: 1200px) {\n  .goa-hero-banner-content {\n    width: 40%;\n  }\n}\n.goa-hero-banner-content:last-of-type {\n  margin-bottom: 28px;\n}";
+styleInject(css_248z$m);
 
-var GoAHeroBannerContent = function GoAHeroBannerContent(_ref) {
-  var content = _ref.content,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("p", {
+const GoAHeroBannerContent = ({
+  content,
+  children
+}) => {
+  return jsx("p", Object.assign({
     className: "goa-hero-banner-content",
     role: "note"
-  }, children || content);
+  }, {
+    children: children || content
+  }), void 0);
 };
 
-var css_248z$9 = "/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\n/* This style is from the alberta design system */\n.goa-link-button.goa-link-button {\n  display: inline-block;\n  text-decoration: none; }\n  .goa-link-button.goa-link-button {\n    box-sizing: border-box;\n    min-width: 70px;\n    padding: 12px;\n    border: 2px solid #0070c4;\n    border-radius: 4px;\n    background: #0070c4;\n    cursor: pointer;\n    color: #fff;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1em; }\n    .goa-link-button.goa-link-button.btn-small {\n      font-size: 16px;\n      padding: 8px;\n      margin: 12px 12px 0 0; }\n    .goa-link-button.goa-link-button:last-of-type {\n      margin-right: 0; }\n    .goa-link-button.goa-link-button:disabled, .goa-link-button.goa-link-button:disabled.goa--secondary, .goa-link-button.goa-link-button:disabled.goa--tertiary {\n      pointer-events: none;\n      color: #666;\n      background-color: #f1f1f1;\n      border-color: #f1f1f1; }\n    .goa-link-button.goa-link-button:hover {\n      border-color: #004f84;\n      background: #004f84; }\n    .goa-link-button.goa-link-button:focus, .goa-link-button.goa-link-button:active {\n      border-color: #004f84;\n      box-shadow: 0 0 0 3px #feba35;\n      background: #004f84;\n      outline: none; }\n    .goa-link-button.goa-link-button.goa--secondary {\n      border: 2px solid #0070c4;\n      background: #fff;\n      color: #0070c4; }\n      .goa-link-button.goa-link-button.goa--secondary:hover {\n        border-color: #004f84;\n        background: #fff;\n        color: #004f84; }\n      .goa-link-button.goa-link-button.goa--secondary:focus, .goa-link-button.goa-link-button.goa--secondary:active {\n        color: #004f84;\n        background-color: #fff;\n        border: 2px solid #004f84;\n        box-shadow: 0 0 0 3px #feba35;\n        outline: none; }\n    .goa-link-button.goa-link-button.goa--tertiary {\n      border-color: #dcdcdc;\n      background: #fff;\n      color: #0070c4; }\n      .goa-link-button.goa-link-button.goa--tertiary:hover {\n        background: #fff;\n        color: #004f84; }\n      .goa-link-button.goa-link-button.goa--tertiary:focus, .goa-link-button.goa-link-button.goa--tertiary:active {\n        border: 2px solid #004f84;\n        color: #004f84;\n        background-color: #fff;\n        box-shadow: 0 0 0 3px #feba35;\n        outline: none; }\n    .goa-link-button.goa-link-button.goa--borderless {\n      background: none;\n      color: var(--color-blue-500);\n      border: none;\n      transition: transform 0.1s ease-in-out;\n      transform: scale(1); }\n      .goa-link-button.goa-link-button.goa--borderless:hover {\n        background: var(--color-blue-100);\n        color: var(--color-blue-500); }\n      .goa-link-button.goa-link-button.goa--borderless:focus, .goa-link-button.goa-link-button.goa--borderless:active {\n        background-color: var(--color-blue-100);\n        outline: none;\n        box-shadow: none; }\n      .goa-link-button.goa-link-button.goa--borderless:active {\n        transform: scale(0.95); }\n    .goa-link-button.goa-link-button.goa--red {\n      color: var(--color-red-500);\n      background: none;\n      border: none;\n      transition: transform 0.1s ease-in-out;\n      transform: scale(1); }\n      .goa-link-button.goa-link-button.goa--red:hover {\n        background: var(--color-red-100);\n        color: var(--color-red-500); }\n      .goa-link-button.goa-link-button.goa--red:focus, .goa-link-button.goa-link-button.goa--red:active {\n        background: var(--color-red-100);\n        color: var(--color-red-500);\n        outline: none;\n        box-shadow: none; }\n      .goa-link-button.goa-link-button.goa--red:active {\n        transform: scale(0.95); }\n  .goa-link-button.goa-link-button.right-arrow::after {\n    color: #fff;\n    margin-left: 8px;\n    content: '\\2192'; }\n  .goa-link-button.goa-link-button.up-arrow::after {\n    color: #fff;\n    margin-left: 8px;\n    content: '\\2191'; }\n  .goa-link-button.goa-link-button:visited, .goa-link-button.goa-link-button:link {\n    color: #fff; }\n";
-styleInject(css_248z$9);
+var css_248z$l = "@charset \"UTF-8\";\n/* 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}\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}\n.goa-link-button.goa-link-button.btn-small {\n  font-size: 16px;\n  padding: 8px;\n  margin: 12px 12px 0 0;\n}\n.goa-link-button.goa-link-button:last-of-type {\n  margin-right: 0;\n}\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}\n.goa-link-button.goa-link-button:hover {\n  border-color: #004f84;\n  background: #004f84;\n}\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}\n.goa-link-button.goa-link-button.goa--secondary {\n  border: 2px solid #0070c4;\n  background: #fff;\n  color: #0070c4;\n}\n.goa-link-button.goa-link-button.goa--secondary:hover {\n  border-color: #004f84;\n  background: #fff;\n  color: #004f84;\n}\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}\n.goa-link-button.goa-link-button.goa--tertiary {\n  border-color: #dcdcdc;\n  background: #fff;\n  color: #0070c4;\n}\n.goa-link-button.goa-link-button.goa--tertiary:hover {\n  background: #fff;\n  color: #004f84;\n}\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}\n.goa-link-button.goa-link-button.goa--borderless {\n  background: none;\n  color: var(--color-blue-500);\n  border: none;\n  transition: transform 0.1s ease-in-out;\n  transform: scale(1);\n}\n.goa-link-button.goa-link-button.goa--borderless:hover {\n  background: var(--color-blue-100);\n  color: var(--color-blue-500);\n}\n.goa-link-button.goa-link-button.goa--borderless:focus, .goa-link-button.goa-link-button.goa--borderless:active {\n  background-color: var(--color-blue-100);\n  outline: none;\n  box-shadow: none;\n}\n.goa-link-button.goa-link-button.goa--borderless:active {\n  transform: scale(0.95);\n}\n.goa-link-button.goa-link-button.goa--red {\n  color: var(--color-red-500);\n  background: none;\n  border: none;\n  transition: transform 0.1s ease-in-out;\n  transform: scale(1);\n}\n.goa-link-button.goa-link-button.goa--red:hover {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\n.goa-link-button.goa-link-button.goa--red:focus, .goa-link-button.goa-link-button.goa--red:active {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n  outline: none;\n  box-shadow: none;\n}\n.goa-link-button.goa-link-button.goa--red:active {\n  transform: scale(0.95);\n}\n.goa-link-button.goa-link-button.right-arrow::after {\n  color: #fff;\n  margin-left: 8px;\n  content: \"→\";\n}\n.goa-link-button.goa-link-button.up-arrow::after {\n  color: #fff;\n  margin-left: 8px;\n  content: \"↑\";\n}\n.goa-link-button.goa-link-button:visited, .goa-link-button.goa-link-button:link {\n  color: #fff;\n}";
+styleInject(css_248z$l);
 
-var GoAHeroBannerLink = function GoAHeroBannerLink(_ref) {
-  var linkText = _ref.linkText,
-      linkUrl = _ref.linkUrl;
-  return linkText && linkUrl ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-    className: "goa-link-button right-arrow",
-    href: linkUrl,
-    role: "link"
-  }, linkText)) : /*#__PURE__*/React.createElement(Fragment$1, null);
+const GoAHeroBannerLink = ({
+  linkText,
+  linkUrl
+}) => {
+  return linkText && linkUrl ? jsx("div", {
+    children: jsx("a", Object.assign({
+      className: "goa-link-button right-arrow",
+      href: linkUrl,
+      role: "link"
+    }, {
+      children: linkText
+    }), void 0)
+  }, void 0) : jsx(Fragment$1, {}, void 0);
 };
 
-var css_248z$a = "/* Palette */\n/* Semantic usages */\n.goa-hero {\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-end;\n  align-items: stretch;\n  flex-direction: column;\n  height: 600px;\n  border-bottom: 8px solid #0081a2;\n  color: #fff;\n  background-position: center center;\n  width: 100%;\n  padding: 56px 28px; }\n  .goa-hero h1 {\n    margin: 0 0 28px;\n    padding: 0;\n    font-size: 48px;\n    line-height: 56px;\n    font-weight: 700;\n    color: #fff; }\n";
-styleInject(css_248z$a);
+var css_248z$k = "/* 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}\n.goa-hero h1 {\n  margin: 0 0 28px;\n  padding: 0;\n  font-size: 48px;\n  line-height: 56px;\n  font-weight: 700;\n  color: #fff;\n}";
+styleInject(css_248z$k);
 
-var GoAHeroBanner = function GoAHeroBanner(_ref) {
-  var title = _ref.title,
-      backgroundUrl = _ref.backgroundUrl,
-      content = _ref.content,
-      linkText = _ref.linkText,
-      linkUrl = _ref.linkUrl,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+const GoAHeroBanner = ({
+  title,
+  backgroundUrl,
+  content,
+  linkText,
+  linkUrl,
+  children
+}) => {
+  return jsxs("div", Object.assign({
     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, "')")
+      backgroundImage: `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url('${backgroundUrl}')`
     }
-  }, /*#__PURE__*/React.createElement("h1", {
-    role: "heading",
-    "aria-level": 1
-  }, title), children || /*#__PURE__*/React.createElement(Fragment$1, null, content && /*#__PURE__*/React.createElement(GoAHeroBannerContent, {
-    content: content
-  }), linkText && linkUrl && /*#__PURE__*/React.createElement(GoAHeroBannerLink, {
-    linkText: linkText,
-    linkUrl: linkUrl
-  })));
+  }, {
+    children: [jsx("h1", Object.assign({
+      role: "heading",
+      "aria-level": 1
+    }, {
+      children: title
+    }), void 0), children || jsxs(Fragment$1, {
+      children: [content && jsx(GoAHeroBannerContent, {
+        content: content
+      }, void 0), linkText && linkUrl && jsx(GoAHeroBannerLink, {
+        linkText: linkText,
+        linkUrl: linkUrl
+      }, void 0)]
+    }, void 0)]
+  }), void 0);
 };
 GoAHeroBanner.defaultProps = {
   content: '',
@@ -1531,33 +1437,33 @@ GoAHeroBanner.defaultProps = {
   linkUrl: ''
 };
 
-var css_248z$b = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n.goa-badge-icon {\n  font-size: var(--fs-sm); }\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding: 0 0.5rem;\n  gap: 0.25rem; }\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n  margin-left: 0.25rem; }\n\n.badge-module_goa-badge-content__3UN-3 {\n  text-transform: capitalize;\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-regular);\n  line-height: var(--lh-base); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: var(--color-gray-100);\n  color: var(--color-tealblue-900); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: var(--color-green-500);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: var(--color-orange-500);\n  color: var(--color-black); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: var(--color-red-500);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: var(--color-black);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: var(--color-gray-600);\n  color: var(--color-white); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: var(--color-white);\n  color: var(--color-black); }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: var(--color-white);\n  color: var(--color-black); }\n";
-styleInject(css_248z$b);
-
-var css_248z$c = ".goa-icon {\n  display: flex; }\n\n.goa-icon-button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none; }\n\n/* Primary */\n.goa-icon-button-primary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  color: var(--color-blue-500);\n  fill: var(--color-blue-500);\n  cursor: pointer;\n  transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-primary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-primary:hover {\n  background-color: var(--color-blue-100); }\n\n/* Secondary */\n.goa-icon-button-secondary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer; }\n\n.goa-icon-button-secondary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-secondary:hover {\n  background: rgba(0, 0, 0, 0.1);\n  color: #000;\n  fill: #000; }\n\n/* tertiary */\n.goa-icon-button-tertiary {\n  padding: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer; }\n\n.goa-icon-button-tertiary:active {\n  transform: scale(0.9); }\n\n.goa-icon-button-tertiary:hover {\n  color: #000;\n  fill: #000; }\n";
-styleInject(css_248z$c);
+var css_248z$j = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n.goa-badge-icon {\n  font-size: var(--fs-sm);\n}\n\n.badge-module_goa-badge__3F6Ve {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding: 0 0.5rem;\n  gap: 0.25rem;\n}\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n  margin-left: 0.25rem;\n}\n\n.badge-module_goa-badge-content__3UN-3 {\n  text-transform: capitalize;\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-regular);\n  line-height: var(--lh-base);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n  background-color: var(--color-gray-100);\n  color: var(--color-tealblue-900);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n  background-color: var(--color-green-500);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n  background-color: var(--color-orange-500);\n  color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n  background-color: var(--color-red-500);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n  background-color: var(--color-black);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n  background-color: var(--color-gray-600);\n  color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n  background-color: var(--color-white);\n  color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n  background-color: var(--color-white);\n  color: var(--color-black);\n}";
+styleInject(css_248z$j);
 
-function GoAIcon(_ref) {
-  var type = _ref.type,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? 'outline' : _ref$style,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size;
+var css_248z$i = ".goa-icon {\n  display: flex;\n}\n\n.goa-icon-button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n}\n\n/* Primary */\n.goa-icon-button-primary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  color: var(--color-blue-500);\n  fill: var(--color-blue-500);\n  cursor: pointer;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n}\n\n.goa-icon-button-primary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-primary:hover {\n  background-color: var(--color-blue-100);\n}\n\n/* Secondary */\n.goa-icon-button-secondary {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer;\n}\n\n.goa-icon-button-secondary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-secondary:hover {\n  background: rgba(0, 0, 0, 0.1);\n  color: #000;\n  fill: #000;\n}\n\n/* tertiary */\n.goa-icon-button-tertiary {\n  padding: 0.5rem;\n  transition: background-color 100ms ease-in, transform 100ms ease-in;\n  cursor: pointer;\n}\n\n.goa-icon-button-tertiary:active {\n  transform: scale(0.9);\n}\n\n.goa-icon-button-tertiary:hover {\n  color: #000;\n  fill: #000;\n}";
+styleInject(css_248z$i);
 
-  var _size = getSize(size);
+function GoAIcon({
+  type,
+  style = 'outline',
+  size = 'medium'
+}) {
+  const _size = getSize(size);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", Object.assign({
     style: {
       width: _size
     },
     className: "goa-icon",
-    "data-testid": "icon-".concat(type)
-  }, /*#__PURE__*/React.createElement("ion-icon", {
-    style: {
-      fontSize: _size
-    },
-    name: style === 'filled' ? type : "".concat(type, "-").concat(style)
-  }));
+    "data-testid": `icon-${type}`
+  }, {
+    children: jsx("ion-icon", {
+      style: {
+        fontSize: _size
+      },
+      name: style === 'filled' ? type : `${type}-${style}`
+    }, void 0)
+  }), void 0);
 }
 
 function getSize(size) {
@@ -1576,204 +1482,212 @@ function getSize(size) {
   }
 }
 
-function GoAIconButton(_ref) {
-  var type = _ref.type,
-      disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      title = _ref.title,
-      testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("button", {
+function GoAIconButton({
+  type,
+  disabled,
+  variant = 'primary',
+  onClick,
+  size = 'medium',
+  title,
+  testId
+}) {
+  return jsx("button", Object.assign({
     title: title,
     disabled: disabled,
-    className: "goa-icon-button goa-icon-button-".concat(variant),
+    className: `goa-icon-button goa-icon-button-${variant}`,
     "data-testid": testId,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: type,
-    size: size
-  }));
+  }, {
+    children: jsx(GoAIcon, {
+      type: type,
+      size: size
+    }, void 0)
+  }), void 0);
 }
 
-var css_248z$d = ".button-module_goa-button__fikCc {\n  border-radius: 0.25rem;\n  border: 2px solid var(--color-blue-500);\n  box-sizing: border-box;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em;\n  padding: 0 0.75rem;\n  transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n  transform: scale(1); }\n  .button-module_goa-button__fikCc:disabled {\n    pointer-events: none;\n    color: var(--color-gray-700);\n    background-color: var(--color-gray-100);\n    border-color: var(--color-gray-100); }\n  .button-module_goa-button__fikCc:active {\n    transform: scale(0.98); }\n\n.button-module_goa-button--primary__2V_nV {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-blue-500);\n  color: var(--color-white); }\n  .button-module_goa-button--primary__2V_nV:hover {\n    border-color: var(--color-blue-600);\n    background: var(--color-blue-600); }\n  .button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n    border-color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    background: var(--color-blue-600);\n    outline: none; }\n\n.button-module_goa-button--secondary__3_OjG {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--secondary__3_OjG:hover {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600); }\n  .button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--tertiary__3mvRP {\n  border-color: var(--color-gray-200);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--tertiary__3mvRP:hover {\n    color: var(--color-blue-600); }\n  .button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--borderless__2PWz1 {\n  background: none;\n  color: var(--color-blue-500);\n  border: none; }\n  .button-module_goa-button--borderless__2PWz1:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-blue-500); }\n  .button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n    outline: none;\n    box-shadow: none;\n    background-color: var(--color-blue-100); }\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n  color: var(--color-white);\n  background: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-gray-200); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n\n.button-module_goa-button--large__1iRt7 {\n  font-size: var(--fs-lg);\n  line-height: 3rem; }\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(3rem + 4px); }\n\n.button-module_goa-button--medium__1xeCJ {\n  font-size: var(--fs-base);\n  line-height: 2.375rem; }\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(2.375rem + 4px); }\n\n.button-module_goa-button--small__1sl63 {\n  font-size: var(--fs-sm);\n  line-height: 1.75rem; }\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(1.75rem + 4px); }\n\n.button-module_goa-button__fikCc {\n  min-width: 100%; }\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n  margin: 0;\n  margin-top: 0.5rem; }\n\n@media (min-width: 480px) {\n  .button-module_goa-button__fikCc {\n    min-width: 4rem; }\n  .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n    margin: 0;\n    margin-left: 0.5rem; } }\n";
-styleInject(css_248z$d);
+var css_248z$h = ".button-module_goa-button__fikCc {\n  border-radius: 0.25rem;\n  border: 2px solid var(--color-blue-500);\n  box-sizing: border-box;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em;\n  padding: 0 0.75rem;\n  transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n  transform: scale(1);\n}\n.button-module_goa-button__fikCc:disabled {\n  pointer-events: none;\n  color: var(--color-gray-700);\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n.button-module_goa-button__fikCc:active {\n  transform: scale(0.98);\n}\n\n.button-module_goa-button--primary__2V_nV {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-blue-500);\n  color: var(--color-white);\n}\n.button-module_goa-button--primary__2V_nV:hover {\n  border-color: var(--color-blue-600);\n  background: var(--color-blue-600);\n}\n.button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n  border-color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  background: var(--color-blue-600);\n  outline: none;\n}\n\n.button-module_goa-button--secondary__3_OjG {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-white);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--secondary__3_OjG:hover {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n}\n.button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  outline: none;\n}\n\n.button-module_goa-button--tertiary__3mvRP {\n  border-color: var(--color-gray-200);\n  background: var(--color-white);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--tertiary__3mvRP:hover {\n  color: var(--color-blue-600);\n}\n.button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n  border-color: var(--color-blue-600);\n  color: var(--color-blue-600);\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  outline: none;\n}\n\n.button-module_goa-button--borderless__2PWz1 {\n  background: none;\n  color: var(--color-blue-500);\n  border: none;\n}\n.button-module_goa-button--borderless__2PWz1:hover {\n  background-color: var(--color-blue-100);\n  color: var(--color-blue-500);\n}\n.button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n  outline: none;\n  box-shadow: none;\n  background-color: var(--color-blue-100);\n}\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n  color: var(--color-white);\n  background: var(--color-red-500);\n  border-color: var(--color-red-500);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n  background: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n  background: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-red-500);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n  color: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-gray-200);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n  border-color: var(--color-red-600);\n  color: var(--color-red-600);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n  color: var(--color-red-600);\n  border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n  background: var(--color-red-100);\n  color: var(--color-red-500);\n}\n\n.button-module_goa-button--large__1iRt7 {\n  font-size: var(--fs-lg);\n  line-height: 3rem;\n}\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(3rem + 4px);\n}\n\n.button-module_goa-button--medium__1xeCJ {\n  font-size: var(--fs-base);\n  line-height: 2.375rem;\n}\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(2.375rem + 4px);\n}\n\n.button-module_goa-button--small__1sl63 {\n  font-size: var(--fs-sm);\n  line-height: 1.75rem;\n}\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(1.75rem + 4px);\n}\n\n.button-module_goa-button__fikCc {\n  min-width: 100%;\n}\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n  margin: 0;\n  margin-top: 0.5rem;\n}\n\n@media (min-width: 480px) {\n  .button-module_goa-button__fikCc {\n    min-width: 4rem;\n  }\n\n  .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n    margin: 0;\n    margin-left: 0.5rem;\n  }\n}";
+styleInject(css_248z$h);
 
-var css_248z$e = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n  display: flex;\n  justify-content: center;\n  background-color: #dcdcdc; }\n  .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n    display: flex;\n    flex: 1 1 auto;\n    margin: 0 24px;\n    max-width: 1200px; }\n    @media (min-width: 768px) {\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n        margin: 0 72px; } }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n      display: flex;\n      flex: 1 1 auto;\n      justify-content: center;\n      padding-left: 20px; }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n      margin-left: auto;\n      width: 20px;\n      text-align: right;\n      font-weight: bold;\n      font-size: small;\n      align-self: center;\n      cursor: pointer;\n      display: flex; }\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n        color: #0070c4; }\n";
-styleInject(css_248z$e);
+var css_248z$g = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n  display: flex;\n  justify-content: center;\n  background-color: #dcdcdc;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n  display: flex;\n  flex: 1 1 auto;\n  margin: 0 24px;\n  max-width: 1200px;\n}\n@media (min-width: 768px) {\n  .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n    margin: 0 72px;\n  }\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n  padding-left: 20px;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n  margin-left: auto;\n  width: 20px;\n  text-align: right;\n  font-weight: bold;\n  font-size: small;\n  align-self: center;\n  cursor: pointer;\n  display: flex;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n  color: #0070c4;\n}";
+styleInject(css_248z$g);
 
-var css_248z$f = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n  margin-top: 0; }\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n  margin-bottom: 1rem; }\n\n/* Font sizes */\nh1 {\n  font-size: var(--fs-3xl);\n  line-height: var(--lh-2xl);\n  font-weight: var(--fw-bold); }\n\nh2 {\n  font-size: var(--fs-2xl);\n  line-height: var(--lh-xl);\n  font-weight: var(--fw-regular); }\n\nh3 {\n  font-size: var(--fs-xl);\n  line-height: var(--lh-lg);\n  font-weight: var(--fw-regular); }\n\nh4,\nh5,\nh6 {\n  font-size: var(--fs-base);\n  line-height: var(--lh-base);\n  font-weight: var(--fw-bold); }\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n  margin-top: 2rem; }\n\np {\n  margin-bottom: 1rem;\n  font-size: var(--fs-base); }\n\nhr + h1,\nhr + h2,\nhr + h3 {\n  margin-top: 0; }\n\nem {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  color: var(--color-gray); }\n\nsmall {\n  font-size: var(--fs-xs);\n  font-style: normal;\n  color: var(--color-gray); }\n\n.card-module_goa-card__OjjJX {\n  --card-spacing: 1rem;\n  --card-child-spacing: 0.5rem;\n  box-sizing: border-box;\n  background: var(--color-white);\n  transition: opacity 300ms ease-in-out;\n  border-radius: var(--border-radius); }\n  .card-module_goa-card__OjjJX a:hover {\n    color: var(--color-blue-600);\n    text-decoration: none; }\n  .card-module_goa-card__OjjJX a:focus {\n    outline: 3px solid var(--color-orange);\n    outline-offset: 0; }\n  .card-module_goa-card__OjjJX h6 {\n    font-size: var(--fs-xs);\n    line-height: var(--lh-sm);\n    font-weight: var(--fw-base);\n    color: var(--color-gray);\n    margin: 0;\n    padding: 0; }\n\n.card-module_goa-card--tertiary__1BV7k {\n  border-radius: var(--border-radius-sm); }\n\n.card-module_goa-card-top__RM4IA {\n  border-top-left-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  min-height: 0.5rem; }\n\n.card-module_goa-card-top--primary__g2XEU {\n  background-color: var(--color-tealblue-500); }\n\n.card-module_goa-card-top--secondary__mSrLl {\n  background-color: var(--color-gray-200); }\n\n.card-module_goa-card-top--tertiary__2fG-A {\n  display: none; }\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n  min-height: 0.2rem; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n  margin-top: 0; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n  font-size: var(--fs-lg); }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n  margin-top: 1rem; }\n\n.card-module_goa-card-content__3gE5R {\n  padding: var(--card-spacing);\n  border-top-width: 0;\n  border: 1px solid var(--color-gray-200);\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius); }\n\n.card-module_goa-card-content--tertiary__1dbYr {\n  border-radius: var(--border-radius-sm);\n  padding: calc(var(--card-spacing) / 2); }\n\n.card-module_goa-card-details__4KtfS ul {\n  margin-left: var(--card-spacing); }\n";
+var css_248z$f = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n  margin-top: 0;\n}\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n  margin-bottom: 1rem;\n}\n\n/* Font sizes */\nh1 {\n  font-size: var(--fs-3xl);\n  line-height: var(--lh-2xl);\n  font-weight: var(--fw-bold);\n}\n\nh2 {\n  font-size: var(--fs-2xl);\n  line-height: var(--lh-xl);\n  font-weight: var(--fw-regular);\n}\n\nh3 {\n  font-size: var(--fs-xl);\n  line-height: var(--lh-lg);\n  font-weight: var(--fw-regular);\n}\n\nh4,\nh5,\nh6 {\n  font-size: var(--fs-base);\n  line-height: var(--lh-base);\n  font-weight: var(--fw-bold);\n}\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n  margin-top: 2rem;\n}\n\np {\n  margin-bottom: 1rem;\n  font-size: var(--fs-base);\n}\n\nhr + h1,\nhr + h2,\nhr + h3 {\n  margin-top: 0;\n}\n\nem {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  color: var(--color-gray);\n}\n\nsmall {\n  font-size: var(--fs-xs);\n  font-style: normal;\n  color: var(--color-gray);\n}\n\n.card-module_goa-card__OjjJX {\n  --card-spacing: 1rem;\n  --card-child-spacing: 0.5rem;\n  box-sizing: border-box;\n  background: var(--color-white);\n  transition: opacity 300ms ease-in-out;\n  border-radius: var(--border-radius);\n}\n.card-module_goa-card__OjjJX a:hover {\n  color: var(--color-blue-600);\n  text-decoration: none;\n}\n.card-module_goa-card__OjjJX a:focus {\n  outline: 3px solid var(--color-orange);\n  outline-offset: 0;\n}\n.card-module_goa-card__OjjJX h6 {\n  font-size: var(--fs-xs);\n  line-height: var(--lh-sm);\n  font-weight: var(--fw-base);\n  color: var(--color-gray);\n  margin: 0;\n  padding: 0;\n}\n\n.card-module_goa-card--tertiary__1BV7k {\n  border-radius: var(--border-radius-sm);\n}\n\n.card-module_goa-card-top__RM4IA {\n  border-top-left-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  min-height: 0.5rem;\n}\n\n.card-module_goa-card-top--primary__g2XEU {\n  background-color: var(--color-tealblue-500);\n}\n\n.card-module_goa-card-top--secondary__mSrLl {\n  background-color: var(--color-gray-200);\n}\n\n.card-module_goa-card-top--tertiary__2fG-A {\n  display: none;\n}\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n  min-height: 0.2rem;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n  margin-top: 0;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n  font-size: var(--fs-lg);\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n  margin-top: 1rem;\n}\n\n.card-module_goa-card-content__3gE5R {\n  padding: var(--card-spacing);\n  border-top-width: 0;\n  border: 1px solid var(--color-gray-200);\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius);\n}\n\n.card-module_goa-card-content--tertiary__1dbYr {\n  border-radius: var(--border-radius-sm);\n  padding: calc(var(--card-spacing) / 2);\n}\n\n.card-module_goa-card-details__4KtfS ul {\n  margin-left: var(--card-spacing);\n}";
 styleInject(css_248z$f);
 
-var css_248z$g = ".goa-flex-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: top;\n  margin-bottom: 1.5rem; }\n  .goa-flex-row *:last-child {\n    margin-bottom: 0; }\n\n.goa-flex-row > * {\n  flex: 1 1 30ch; }\n";
-styleInject(css_248z$g);
+var css_248z$e = ".goa-flex-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: top;\n  margin-bottom: 1.5rem;\n}\n.goa-flex-row *:last-child {\n  margin-bottom: 0;\n}\n\n.goa-flex-row > * {\n  flex: 1 1 30ch;\n}";
+styleInject(css_248z$e);
 
-var css_248z$h = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n.goa-form {\n  box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n  box-sizing: inherit; }\n\n.goa-form-row {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n  .goa-form-row {\n    gap: 1.75rem;\n    flex-direction: row; } }\n\n.goa-form-item {\n  flex: 1 1 auto;\n  margin-bottom: 1rem; }\n  .goa-form-item label {\n    display: block;\n    font-weight: bold;\n    color: #333;\n    font-size: var(--fs-base);\n    line-height: calc(var(--fs-base) + 1rem); }\n    .goa-form-item label em {\n      color: var(--color-gray-700);\n      font-weight: var(--fw-regular);\n      font-size: var(--fs-sm); }\n  .goa-form-item input,\n  .goa-form-item textarea {\n    display: block;\n    width: 100%;\n    font-size: var(--fs-base); }\n  .goa-form-item.goa-state--error .error-msg {\n    font-size: var(--fs-sm);\n    line-height: calc(var(--fs-sm) + 0.5rem);\n    color: var(--color-red); }\n\n.help-msg {\n  font-size: var(--fs-sm);\n  color: var(--color-gray-900);\n  line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 2rem; }\n  .goa-form-actions button,\n  .goa-form-actions .goa-link-button {\n    margin: 0; }\n  @media (max-width: 639px) {\n    .goa-form-actions button,\n    .goa-form-actions .goa-link-button {\n      width: 100%; }\n    .goa-form-actions button + button,\n    .goa-form-actions button + .goa-link-button,\n    .goa-form-actions .goa-link-button + button,\n    .goa-form-actions .goa-link-button + .goa-link-button {\n      margin-top: 0.5rem; } }\n  @media (min-width: 640px) {\n    .goa-form-actions button,\n    .goa-form-actions .goa-link-button {\n      min-width: 6rem; }\n    .goa-form-actions button + button,\n    .goa-form-actions button + .goa-link-button,\n    .goa-form-actions .goa-link-button + button,\n    .goa-form-actions .goa-link-button + .goa-link-button {\n      margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n  justify-content: flex-start; }\n\n.goa-form-actions--right {\n  justify-content: flex-end; }\n";
-styleInject(css_248z$h);
+var css_248z$d = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n.goa-form {\n  box-sizing: border-box;\n}\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n  box-sizing: inherit;\n}\n\n.goa-form-row {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n@media screen and (min-width: 640px) {\n  .goa-form-row {\n    gap: 1.75rem;\n    flex-direction: row;\n  }\n}\n.goa-form-item {\n  flex: 1 1 auto;\n  margin-bottom: 1rem;\n}\n.goa-form-item label {\n  display: block;\n  font-weight: bold;\n  color: #333;\n  font-size: var(--fs-base);\n  line-height: calc(var(--fs-base) + 1rem);\n}\n.goa-form-item label em {\n  color: var(--color-gray-700);\n  font-weight: var(--fw-regular);\n  font-size: var(--fs-sm);\n}\n.goa-form-item input,\n.goa-form-item textarea {\n  display: block;\n  width: 100%;\n  font-size: var(--fs-base);\n}\n.goa-form-item.goa-state--error .error-msg {\n  font-size: var(--fs-sm);\n  line-height: calc(var(--fs-sm) + 0.5rem);\n  color: var(--color-red);\n}\n\n.help-msg {\n  font-size: var(--fs-sm);\n  color: var(--color-gray-900);\n  line-height: calc(var(--fs-sm) + 0.5rem);\n}\n\n.goa-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 2rem;\n}\n.goa-form-actions button,\n.goa-form-actions .goa-link-button {\n  margin: 0;\n}\n@media (max-width: 639px) {\n  .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n    width: 100%;\n  }\n  .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n    margin-top: 0.5rem;\n  }\n}\n@media (min-width: 640px) {\n  .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n    min-width: 6rem;\n  }\n  .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n    margin-left: 0.5rem;\n  }\n}\n\n.goa-form-actions--left {\n  justify-content: flex-start;\n}\n\n.goa-form-actions--right {\n  justify-content: flex-end;\n}";
+styleInject(css_248z$d);
 
-var css_248z$i = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n/* Forms */\n.goa-input {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: flex;\n  align-content: center;\n  line-height: var(--input-height);\n  height: var(--input-height); }\n  .goa-input:hover {\n    border-color: var(--color-blue-600); }\n  .goa-input:active, .goa-input:focus, .goa-input:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange); }\n  .goa-input:disabled {\n    border-color: var(--color-gray-500); }\n    .goa-input:disabled:hover {\n      border-color: var(--color-gray-500); }\n    .goa-input:disabled:focus {\n      box-shadow: none; }\n\n.goa-input-leading-icon {\n  display: flex;\n  align-items: center; }\n\n.goa-input-leading-icon ~ input {\n  padding-left: 0.25rem; }\n\n.goa-input-trailing-icon {\n  display: flex;\n  align-items: center; }\n\n.goa-input-trailing-icon > .goa-icon-button {\n  margin-right: -0.5rem; }\n\ninput.input--goa {\n  display: block;\n  border: none;\n  flex: 1 1 auto; }\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n  display: none; }\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n  display: block;\n  width: 100%;\n  outline: none;\n  border: none; }\n\n.goa-input--disabled {\n  opacity: 0.5;\n  cursor: default;\n  border-color: var(--color-black); }\n  .goa-input--disabled:hover, .goa-input--disabled:active, .goa-input--disabled:focus {\n    border-color: var(--color-black);\n    cursor: default;\n    box-shadow: none; }\n  .goa-input--disabled input:hover {\n    cursor: default !important; }\n\n.goa-input .input--bare {\n  border: none; }\n\n.goa-state--error .goa-input {\n  border: 2px solid var(--color-red); }\n";
-styleInject(css_248z$i);
+var css_248z$c = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-input {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: flex;\n  align-content: center;\n  line-height: var(--input-height);\n  height: var(--input-height);\n}\n.goa-input:hover {\n  border-color: var(--color-blue-600);\n}\n.goa-input:active, .goa-input:focus, .goa-input:focus-within {\n  box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-input:disabled {\n  border-color: var(--color-gray-500);\n}\n.goa-input:disabled:hover {\n  border-color: var(--color-gray-500);\n}\n.goa-input:disabled:focus {\n  box-shadow: none;\n}\n\n.goa-input-leading-icon {\n  display: flex;\n  align-items: center;\n}\n\n.goa-input-leading-icon ~ input {\n  padding-left: 0.25rem;\n}\n\n.goa-input-trailing-icon {\n  display: flex;\n  align-items: center;\n}\n\n.goa-input-trailing-icon > .goa-icon-button {\n  margin-right: -0.5rem;\n}\n\ninput.input--goa {\n  display: block;\n  border: none;\n  flex: 1 1 auto;\n}\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n  display: block;\n  width: 100%;\n  outline: none;\n  border: none;\n}\n\n.goa-input--disabled {\n  opacity: 0.5;\n  cursor: default;\n  border-color: var(--color-black);\n}\n.goa-input--disabled:hover, .goa-input--disabled:active, .goa-input--disabled:focus {\n  border-color: var(--color-black);\n  cursor: default;\n  box-shadow: none;\n}\n.goa-input--disabled input:hover {\n  cursor: default !important;\n}\n\n.goa-input .input--bare {\n  border: none;\n}\n\n.goa-state--error .goa-input {\n  border: 2px solid var(--color-red);\n}";
+styleInject(css_248z$c);
 
-var GoAInput = function GoAInput(_ref) {
-  var _classNames;
-
-  var name = _ref.name,
-      onTrailingIconClick = _ref.onTrailingIconClick,
-      _onChange = _ref.onChange,
-      leadingIcon = _ref.leadingIcon,
-      trailingIcon = _ref.trailingIcon,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'goa' : _ref$variant,
-      focused = _ref.focused,
-      disabled = _ref.disabled,
-      readonly = _ref.readonly,
-      other = _objectWithoutProperties(_ref, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
-
-  var inputRef = React.useRef(null);
-  useEffect(function () {
-    if (focused) {
-      var _inputRef$current;
+const GoAInput = _a => {
+  var {
+    name,
+    onTrailingIconClick,
+    onChange,
+    leadingIcon,
+    trailingIcon,
+    variant = 'goa',
+    focused,
+    disabled,
+    readonly
+  } = _a,
+      other = __rest(_a, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
+
+  const inputRef = React.useRef(null);
+  useEffect(() => {
+    var _a, _b;
 
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    if (focused) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     } else {
-      var _inputRef$current2;
-
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
     }
   }, [focused, inputRef]);
-  var rootCss = classnames({
+  const rootCss = classnames({
     'goa-input': true,
     'goa-input--disabled': disabled
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return jsxs("div", Object.assign({
     className: rootCss
-  }, leadingIcon && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-leading-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: leadingIcon
-  })), /*#__PURE__*/React.createElement("input", Object.assign({
-    ref: inputRef,
-    className: classnames((_classNames = {}, _defineProperty(_classNames, "input--".concat(variant), true), _defineProperty(_classNames, 'input--leading-icon', leadingIcon), _classNames)),
-    readOnly: readonly,
-    disabled: disabled,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    }
-  }, other)), trailingIcon && !onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    size: "medium",
-    type: trailingIcon
-  })), trailingIcon && onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    onClick: onTrailingIconClick,
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIconButton, {
-    variant: "tertiary",
-    onClick: onTrailingIconClick,
-    disabled: disabled,
-    size: "medium",
-    type: trailingIcon,
-    testId: "".concat(name, "-input-trailing-button")
-  })));
+  }, {
+    children: [leadingIcon && jsx("div", Object.assign({
+      className: "goa-input-leading-icon"
+    }, {
+      children: jsx(GoAIcon, {
+        type: leadingIcon
+      }, void 0)
+    }), void 0), jsx("input", Object.assign({
+      ref: inputRef,
+      className: classnames({
+        [`input--${variant}`]: true,
+        'input--leading-icon': leadingIcon
+      }),
+      readOnly: readonly,
+      disabled: disabled,
+      onChange: e => onChange(name, e.target.value)
+    }, other), void 0), trailingIcon && !onTrailingIconClick && jsx("div", Object.assign({
+      className: "goa-input-trailing-icon"
+    }, {
+      children: jsx(GoAIcon, {
+        size: "medium",
+        type: trailingIcon
+      }, void 0)
+    }), void 0), trailingIcon && onTrailingIconClick && jsx("div", Object.assign({
+      onClick: onTrailingIconClick,
+      className: "goa-input-trailing-icon"
+    }, {
+      children: jsx(GoAIconButton, {
+        variant: "tertiary",
+        onClick: onTrailingIconClick,
+        disabled: disabled,
+        size: "medium",
+        type: trailingIcon,
+        testId: `${name}-input-trailing-button`
+      }, void 0)
+    }), void 0)]
+  }), void 0);
 };
 
-var css_248z$j = ".goa-scrollable {\n  scroll-behavior: smooth; }\n\n.goa-scrollable::-webkit-scrollbar {\n  width: 6px; }\n\n.goa-scrollable::-webkit-scrollbar-track {\n  background: #f1f1f1; }\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n  background: #888; }\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n  background: #555; }\n";
-styleInject(css_248z$j);
+var css_248z$b = ".goa-scrollable {\n  scroll-behavior: smooth;\n}\n\n.goa-scrollable::-webkit-scrollbar {\n  width: 6px;\n}\n\n.goa-scrollable::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n  background: #888;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}";
+styleInject(css_248z$b);
 
-var GoAScrollable = function GoAScrollable(_ref) {
-  var vertical = _ref.vertical,
-      horizontal = _ref.horizontal,
-      hPadding = _ref.hPadding,
-      vPadding = _ref.vPadding,
-      height = _ref.height,
-      children = _ref.children,
-      testId = _ref.testId;
-  var style = {
+const GoAScrollable = ({
+  vertical,
+  horizontal,
+  hPadding,
+  vPadding,
+  height,
+  children,
+  testId
+}) => {
+  const style = {
     overflowY: vertical ? 'auto' : 'hidden',
     overflowX: horizontal ? 'auto' : 'hidden',
     maxHeight: height !== null && height !== void 0 ? height : '100%',
-    padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
+    padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-scrollable",
+  return jsx("div", Object.assign({
+    className: 'goa-scrollable',
     style: style,
     "data-testid": testId
-  }, children);
+  }, {
+    children: children
+  }), void 0);
 };
 
-var css_248z$k = "/* Fade in */\n.fade-in-init {\n  display: none; }\n\n.fade-in-start {\n  display: block;\n  opacity: 0;\n  transition: opacity 200ms ease-in; }\n\n.fade-in-active {\n  opacity: 1; }\n\n/* Fade out */\n.fade-out-init {\n  display: block; }\n\n.fade-out-start {\n  display: block;\n  opacity: 1;\n  transition: opacity 200ms ease-in; }\n\n.fade-out-active {\n  opacity: 0; }\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-up-start {\n  display: block;\n  transform: translateY(100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-up-active {\n  transform: translateY(0); }\n\n/* Slide out up */\n.slide-out-up-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-up-start {\n  transition: transform 300ms ease-in; }\n\n.slide-out-up-active {\n  transform: translateY(-100vh); }\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-down-start {\n  display: block;\n  transform: translateY(-100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-down-active {\n  transform: translateY(0); }\n\n/* Slide out down */\n.slide-out-down-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-down-start {\n  transform: translateY(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-down-active {\n  transform: translateY(100vh); }\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-left-start {\n  display: block;\n  transform: translateX(-100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-left-active {\n  transform: translateX(0); }\n\n/* Slide out left */\n.slide-out-left-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-left-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-left-active {\n  transform: translateX(-100vw); }\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-right-start {\n  display: block;\n  transform: translateX(100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-right-active {\n  transform: translateX(0); }\n\n/* Slide out right */\n.slide-out-right-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-right-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-right-active {\n  transform: translateX(100vw); }\n";
-styleInject(css_248z$k);
+var css_248z$a = "/* Fade in */\n.fade-in-init {\n  display: none;\n}\n\n.fade-in-start {\n  display: block;\n  opacity: 0;\n  transition: opacity 200ms ease-in;\n}\n\n.fade-in-active {\n  opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n  display: block;\n}\n\n.fade-out-start {\n  display: block;\n  opacity: 1;\n  transition: opacity 200ms ease-in;\n}\n\n.fade-out-active {\n  opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n  transition: translateY(0);\n  display: none;\n}\n\n.slide-in-up-start {\n  display: block;\n  transform: translateY(100vh);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-up-active {\n  transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n  transform: translateY(0);\n  display: block;\n}\n\n.slide-out-up-start {\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-up-active {\n  transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n  transition: translateY(0);\n  display: none;\n}\n\n.slide-in-down-start {\n  display: block;\n  transform: translateY(-100vh);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-down-active {\n  transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n  transform: translateY(0);\n  display: block;\n}\n\n.slide-out-down-start {\n  transform: translateY(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-down-active {\n  transform: translateY(100vh);\n}\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n  transition: translateX(0);\n  display: none;\n}\n\n.slide-in-left-start {\n  display: block;\n  transform: translateX(-100vw);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-left-active {\n  transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n  transform: translateX(0);\n  display: block;\n}\n\n.slide-out-left-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-left-active {\n  transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n  transition: translateX(0);\n  display: none;\n}\n\n.slide-in-right-start {\n  display: block;\n  transform: translateX(100vw);\n  transition: transform 300ms ease-out;\n}\n\n.slide-in-right-active {\n  transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n  transform: translateX(0);\n  display: block;\n}\n\n.slide-out-right-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in;\n}\n\n.slide-out-right-active {\n  transform: translateX(100vw);\n}";
+styleInject(css_248z$a);
 
-var css_248z$l = "/* Root ============================================================================== */\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  --modal-spacing: 1.75rem;\n  --button-min-width: 5rem; }\n\n/* Modal ============================================================================== */\n.modal {\n  position: relative;\n  background: #fff;\n  z-index: 1002;\n  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n  border-radius: 4px; }\n\n@media (max-width: 639px) {\n  .modal {\n    width: 90%;\n    max-height: 90%; } }\n\n@media (min-width: 640px) {\n  .modal {\n    margin: 1rem;\n    max-height: 80%;\n    width: 600px; } }\n\n@media (min-width: 1024px) {\n  .modal {\n    width: 65ch; } }\n\n/* Modal Container =========================================================================== */\n.modal-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%; }\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n  text-align: right;\n  margin: var(--modal-spacing);\n  flex: 0 0 auto; }\n\n.modal-actions button {\n  min-width: var(--button-min-width); }\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem; }\n  .modal-actions button {\n    display: block;\n    width: 100%; } }\n\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0; }\n  .modal-actions > button + button {\n    margin-left: 0.5rem; } }\n\n/* Modal Title ============================================================================ */\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem var(--modal-spacing);\n  margin-right: 40px;\n  /*  close icon spacing */\n  flex: 0 0 auto; }\n\n/* Modal Background ======================================================================= */\n.modal-background {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001; }\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem; }\n";
-styleInject(css_248z$l);
+var css_248z$9 = "/* Root ============================================================================== */\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  --modal-spacing: 1.75rem;\n  --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n.modal {\n  position: relative;\n  background: #fff;\n  z-index: 1002;\n  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n  .modal {\n    width: 90%;\n    max-height: 90%;\n  }\n}\n@media (min-width: 640px) {\n  .modal {\n    margin: 1rem;\n    max-height: 80%;\n    min-width: 60ch;\n  }\n}\n/* Modal Container =========================================================================== */\n.modal-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n  text-align: right;\n  margin: var(--modal-spacing);\n  flex: 0 0 auto;\n}\n\n.modal-actions button {\n  min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem;\n  }\n\n  .modal-actions button {\n    display: block;\n    width: 100%;\n  }\n}\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0;\n  }\n\n  .modal-actions > button + button {\n    margin-left: 0.5rem;\n  }\n}\n/* Modal Title ============================================================================ */\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem var(--modal-spacing);\n  margin-right: 40px;\n  /*  close icon spacing */\n  flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n.modal-background {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}";
+styleInject(css_248z$9);
 
-var css_248z$m = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n/* Forms */\n.goa-textarea {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: block;\n  width: 100%; }\n  .goa-textarea:hover {\n    border-color: var(--color-blue-600); }\n  .goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange); }\n  .goa-textarea:disabled {\n    border-color: var(--color-gray-500); }\n    .goa-textarea:disabled:hover {\n      border-color: var(--color-gray-500); }\n    .goa-textarea:disabled:focus {\n      box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n  border: 2px solid var(--color-red); }\n";
-styleInject(css_248z$m);
+var css_248z$8 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-textarea {\n  outline: none;\n  transition: box-shadow 0.1s ease-in;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 3px;\n  background: white;\n  color: var(--color-gray-900);\n  padding: var(--input-padding);\n  font-size: var(--input-font-size);\n  display: block;\n  width: 100%;\n}\n.goa-textarea:hover {\n  border-color: var(--color-blue-600);\n}\n.goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n  box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-textarea:disabled {\n  border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:hover {\n  border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:focus {\n  box-shadow: none;\n}\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n  border: 2px solid var(--color-red);\n}";
+styleInject(css_248z$8);
 
-var css_248z$n = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base); }\n\n/* Forms */\n.goa-dropdown-box {\n  position: relative; }\n\n.goa-dropdown-box input[readonly] {\n  cursor: pointer; }\n\n.goa-dropdown-background {\n  position: fixed;\n  inset: 0;\n  opacity: 1; }\n\n.goa-icon ~ input {\n  padding-left: 0.5rem; }\n\n.goa-dropdown-list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  padding: 0;\n  margin: 0;\n  margin-top: 3px;\n  list-style-type: none;\n  background: var(--color-white);\n  border-radius: var(--input-border-radius);\n  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.1);\n  z-index: 99; }\n\n.goa-dropdown-list hr {\n  border: none;\n  border-top: 1px solid var(--color-gray-100);\n  margin: 0; }\n\n.goa-dropdown-list label {\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-bold);\n  padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n  margin: 0;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--color-gray-900); }\n  .goa-dropdown-option:hover {\n    background: var(--color-gray-100);\n    color: var(--color-blue-600); }\n  .goa-dropdown-option:last-child:hover {\n    border-bottom-left-radius: var(--input-border-radius);\n    border-bottom-right-radius: var(--input-border-radius); }\n\n.goa-dropdown-option--disabled {\n  opacity: 0.5;\n  cursor: default; }\n  .goa-dropdown-option--disabled:hover {\n    cursor: default;\n    color: var(--color-gray-700); }\n\n.goa-dropdown-option--selected {\n  background: var(--color-blue-500);\n  color: var(--color-white); }\n  .goa-dropdown-option--selected:hover {\n    background: var(--color-blue-600);\n    color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n  padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n  border: 2px solid var(--color-red); }\n";
-styleInject(css_248z$n);
+var css_248z$7 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-height: 2.625rem;\n  --input-padding: 0.5rem;\n  --input-border-radius: 0.25rem;\n  --input-font-size: var(--fs-base);\n}\n\n/* Forms */\n.goa-dropdown-box {\n  position: relative;\n}\n\n.goa-dropdown-box input[readonly] {\n  cursor: pointer;\n}\n\n.goa-dropdown-background {\n  position: fixed;\n  inset: 0;\n  opacity: 1;\n}\n\n.goa-icon ~ input {\n  padding-left: 0.5rem;\n}\n\n.goa-dropdown-list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  padding: 0;\n  margin: 0;\n  margin-top: 3px;\n  list-style-type: none;\n  background: var(--color-white);\n  border-radius: var(--input-border-radius);\n  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.1);\n  z-index: 99;\n}\n\n.goa-dropdown-list hr {\n  border: none;\n  border-top: 1px solid var(--color-gray-100);\n  margin: 0;\n}\n\n.goa-dropdown-list label {\n  font-size: var(--fs-sm);\n  font-weight: var(--fw-bold);\n  padding-left: 0.5rem;\n}\n\n.goa-dropdown-option {\n  margin: 0;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--color-gray-900);\n}\n.goa-dropdown-option:hover {\n  background: var(--color-gray-100);\n  color: var(--color-blue-600);\n}\n.goa-dropdown-option:last-child:hover {\n  border-bottom-left-radius: var(--input-border-radius);\n  border-bottom-right-radius: var(--input-border-radius);\n}\n\n.goa-dropdown-option--disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.goa-dropdown-option--disabled:hover {\n  cursor: default;\n  color: var(--color-gray-700);\n}\n\n.goa-dropdown-option--selected {\n  background: var(--color-blue-500);\n  color: var(--color-white);\n}\n.goa-dropdown-option--selected:hover {\n  background: var(--color-blue-600);\n  color: var(--color-white);\n}\n\n.dropdown-group-content .goa-dropdown-option {\n  padding-left: 1.5rem;\n}\n\n.goa-state--error .goa-dropdown-input {\n  border: 2px solid var(--color-red);\n}";
+styleInject(css_248z$7);
 
-var GoADropdownOption = function GoADropdownOption(props) {
-  var onClick = function onClick() {
+const GoADropdownOption = props => {
+  const onClick = () => {
     if (!props.disabled) {
       props.onClick(props.value);
     }
   };
 
-  return /*#__PURE__*/React.createElement("li", {
-    key: props.value,
+  return jsx("li", Object.assign({
     style: {
       display: props.visible ? 'block' : 'none'
     },
-    className: "\n        goa-dropdown-option\n        ".concat(props.disabled ? 'goa-dropdown-option--disabled' : '', "\n        ").concat(props.selected ? 'goa-dropdown-option--selected' : '', "\n      "),
+    className: `
+        goa-dropdown-option
+        ${props.disabled ? 'goa-dropdown-option--disabled' : ''}
+        ${props.selected ? 'goa-dropdown-option--selected' : ''}
+      `,
     "data-testid": props._testId,
     onClick: onClick
-  }, props.children || props.label);
+  }, {
+    children: props.children || props.label
+  }), props.value);
 };
 
-var MAX_HEIGHT = 300;
-var GoADropdown = function GoADropdown(_ref) {
-  var _ref$selectedValues = _ref.selectedValues,
-      selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
-      props = _objectWithoutProperties(_ref, ["selectedValues"]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMenuVisible = _useState2[0],
-      _setMenuVisibility = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filter = _useState4[0],
-      setFilter = _useState4[1];
-  /**
-   * Override the useState method to set the menu visibility to allow for conditional rendering
+const MAX_HEIGHT = 300;
+const GoADropdown = _a => {
+  var {
+    selectedValues = []
+  } = _a,
+      props = __rest(_a, ["selectedValues"]);
+
+  const [isMenuVisible, _setMenuVisibility] = useState(false);
+  const [filter, setFilter] = useState('');
+  /**
+   * Override the useState method to set the menu visibility to allow for conditional rendering
    */
 
-
   function setMenuVisibility(isVisible) {
     if (!props.disabled) {
       _setMenuVisibility(isVisible);
     }
   }
-  /**
-   * Binds the children with additional properties and events
+  /**
+   * Binds the children with additional properties and events
    */
 
 
   function getChildren() {
-    var _filter = filter.toLowerCase();
+    const _filter = filter.toLowerCase();
 
-    return React.Children.map(props.children, function (child) {
+    return React.Children.map(props.children, child => {
       if (child.props.value) {
-        var visible = !_filter || child.props.value.toLowerCase().includes(_filter) || child.props.label.toLowerCase().includes(_filter);
-        return React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
+        const visible = !_filter || child.props.value.toLowerCase().includes(_filter) || child.props.label.toLowerCase().includes(_filter);
+        return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
           visible: visible,
           onClick: handleSelection,
           selected: selectedValues.includes(child.props.value),
-          _testId: "".concat(props.name, "-dropdown-option--").concat(child.props.value)
+          _testId: `${props.name}-dropdown-option--${child.props.value}`
         }));
       }
 
@@ -1784,21 +1698,19 @@ var GoADropdown = function GoADropdown(_ref) {
       return child;
     });
   }
-  /**
-   * Allows for conditional value relaying to the parent component and updates the selected labels
+  /**
+   * Allows for conditional value relaying to the parent component and updates the selected labels
    */
 
 
   function handleSelection(value) {
-    var values;
+    let values;
 
     if (props.multiSelect) {
       if (selectedValues.includes(value)) {
-        values = selectedValues.filter(function (v) {
-          return v !== value;
-        });
+        values = selectedValues.filter(v => v !== value);
       } else {
-        values = [].concat(_toConsumableArray(selectedValues), [value]);
+        values = [...selectedValues, value];
       }
     } else {
       values = selectedValues.includes(value) ? [] : [value];
@@ -1807,8 +1719,8 @@ var GoADropdown = function GoADropdown(_ref) {
     props.onChange(props.name, values);
     toggleMenuVisibility();
   }
-  /**
-   * Controls whether the menu is hidden or not when clicked
+  /**
+   * Controls whether the menu is hidden or not when clicked
    */
 
 
@@ -1824,22 +1736,16 @@ var GoADropdown = function GoADropdown(_ref) {
       setFilter('');
     }
   }
-  /**
-   * Generates a description of the selected options
+  /**
+   * Generates a description of the selected options
    */
 
 
   function getSelectedLabel() {
-    var selectedLabels = React.Children.map(props.children, function (child) {
-      return child;
-    }).filter(function (child) {
-      return selectedValues.includes(child.props.value);
-    }).map(function (child) {
-      return child.props.label;
-    });
+    const selectedLabels = React.Children.map(props.children, child => child).filter(child => selectedValues.includes(child.props.value)).map(child => child.props.label);
 
     if (props.multiSelect && selectedLabels.length > 1) {
-      return "".concat(selectedLabels.length, " items selected");
+      return `${selectedLabels.length} items selected`;
     }
 
     if (selectedLabels.length === 1) {
@@ -1849,53 +1755,59 @@ var GoADropdown = function GoADropdown(_ref) {
     return '';
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsxs("div", Object.assign({
     className: "goa-dropdown-box"
-  }, isMenuVisible && /*#__PURE__*/React.createElement("div", {
-    "data-testid": "".concat(props.name, "-dropdown-background"),
-    className: "goa-dropdown-background",
-    onClick: function onClick() {
-      return setMenuVisibility(false);
-    }
-  }), /*#__PURE__*/React.createElement("div", null, (!isMenuVisible || !props.autoComplete) && /*#__PURE__*/React.createElement("div", {
-    onClick: toggleMenuVisibility,
-    "data-testid": "".concat(props.name, "-dropdown")
-  }, /*#__PURE__*/React.createElement(GoAInput, {
-    type: "text",
-    disabled: props.disabled,
-    trailingIcon: "chevron-down",
-    leadingIcon: props.leadingIcon,
-    name: "search",
-    readonly: true,
-    onChange: null,
-    placeholder: props.placeholder,
-    value: getSelectedLabel()
-  })), isMenuVisible && /*#__PURE__*/React.createElement(React.Fragment, null, props.autoComplete && /*#__PURE__*/React.createElement(GoAInput, {
-    type: "text",
-    placeholder: "Filter",
-    focused: isMenuVisible,
-    variant: "goa",
-    name: "filter",
-    value: filter,
-    trailingIcon: filter.length > 0 ? 'close-circle' : 'search',
-    onTrailingIconClick: function onTrailingIconClick() {
-      return filter.length > 0 && setFilter('');
-    },
-    onChange: function onChange(_name, value) {
-      return setFilter(value);
-    }
-  }), /*#__PURE__*/React.createElement("ul", {
-    className: "goa-dropdown-list"
-  }, /*#__PURE__*/React.createElement(GoAScrollable, {
-    vertical: true,
-    height: props.maxHeight || MAX_HEIGHT
-  }, getChildren())))));
+  }, {
+    children: [isMenuVisible && jsx("div", {
+      "data-testid": `${props.name}-dropdown-background`,
+      className: "goa-dropdown-background",
+      onClick: () => setMenuVisibility(false)
+    }, void 0), jsxs("div", {
+      children: [(!isMenuVisible || !props.autoComplete) && jsx("div", Object.assign({
+        onClick: toggleMenuVisibility,
+        "data-testid": `${props.name}-dropdown`
+      }, {
+        children: jsx(GoAInput, {
+          type: "text",
+          disabled: props.disabled,
+          trailingIcon: "chevron-down",
+          leadingIcon: props.leadingIcon,
+          name: "search",
+          readonly: true,
+          onChange: null,
+          placeholder: props.placeholder,
+          value: getSelectedLabel()
+        }, void 0)
+      }), void 0), isMenuVisible && jsxs(Fragment, {
+        children: [props.autoComplete && jsx(GoAInput, {
+          type: "text",
+          placeholder: "Filter",
+          focused: isMenuVisible,
+          variant: "goa",
+          name: "filter",
+          value: filter,
+          trailingIcon: filter.length > 0 ? 'close-circle' : 'search',
+          onTrailingIconClick: () => filter.length > 0 && setFilter(''),
+          onChange: (_name, value) => setFilter(value)
+        }, void 0), jsx("ul", Object.assign({
+          className: "goa-dropdown-list"
+        }, {
+          children: jsx(GoAScrollable, Object.assign({
+            vertical: true,
+            height: props.maxHeight || MAX_HEIGHT
+          }, {
+            children: getChildren()
+          }), void 0)
+        }), void 0)]
+      }, void 0)]
+    }, void 0)]
+  }), void 0);
 };
 
-var css_248z$o = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n  display: flex;\n  flex-direction: row; }\n\n.goa-radio-group--vertical {\n  display: inline-flex;\n  flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n  --goa-border-color: var(--color-gray-700);\n  --goa-border-color--checked: var(--color-blue-500);\n  --goa-radio-color--error: var(--color-red);\n  --goa-radio-outline-color: var(--color-orange);\n  --goa-radio-outline-width: 3px;\n  --goa-radio-diameter: 1.5rem;\n  --goa-radio-border-width: 1px;\n  --goa-radio-border-width--checked: 7px;\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: 3rem; }\n\n.goa-radio:hover {\n  cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n  box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n  display: none; }\n\n.goa-radio-label {\n  padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n  font-weight: var(--fw-regular); }\n\n.goa-radio-icon {\n  display: inline-block;\n  height: var(--goa-radio-diameter);\n  width: var(--goa-radio-diameter);\n  border-radius: 50%;\n  background-color: #fff;\n  transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n  box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n  cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color);\n  opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n  opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n  border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n  border: 2px solid var(--goa-radio-color--error); }\n";
-styleInject(css_248z$o);
+var css_248z$6 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n  display: flex;\n  flex-direction: row;\n}\n\n.goa-radio-group--vertical {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Radio */\nlabel.goa-radio {\n  --goa-border-color: var(--color-gray-700);\n  --goa-border-color--checked: var(--color-blue-500);\n  --goa-radio-color--error: var(--color-red);\n  --goa-radio-outline-color: var(--color-orange);\n  --goa-radio-outline-width: 3px;\n  --goa-radio-diameter: 1.5rem;\n  --goa-radio-border-width: 1px;\n  --goa-radio-border-width--checked: 7px;\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: 3rem;\n}\n\n.goa-radio:hover {\n  cursor: pointer;\n}\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n  box-sizing: border-box;\n}\n\n.goa-radio input[type=radio] {\n  display: none;\n}\n\n.goa-radio-label {\n  padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n  font-weight: var(--fw-regular);\n}\n\n.goa-radio-icon {\n  display: inline-block;\n  height: var(--goa-radio-diameter);\n  width: var(--goa-radio-diameter);\n  border-radius: 50%;\n  background-color: #fff;\n  transition: box-shadow 100ms ease-in-out;\n}\n\n.goa-radio:focus > input:not(:disabled) ~ .goa-radio-icon {\n  box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color);\n}\n\n.goa-radio--disabled:hover {\n  cursor: default;\n}\n\n/* States */\n/* Checked */\ninput[type=radio]:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n}\n\n/* Not checked */\ninput[type=radio]:not(:checked) ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color);\n}\n\n/* Disabled */\ninput[type=radio]:disabled ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width) solid var(--goa-border-color);\n  opacity: 0.3;\n}\n\n/* Disabled and checked */\ninput[type=radio]:disabled:checked ~ .goa-radio-icon {\n  border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n  opacity: 0.3;\n}\n\n/* Error */\n.goa-state--error input[type=radio]:checked ~ .goa-radio-icon {\n  border: 7px solid var(--goa-radio-color--error);\n}\n\n.goa-state--error input[type=radio]:not(:checked) ~ .goa-radio-icon {\n  border: 2px solid var(--goa-radio-color--error);\n}";
+styleInject(css_248z$6);
 
-var GoARadio = function GoARadio(props) {
+const GoARadio = props => {
   function getCss() {
     return classnames({
       'goa-radio': true,
@@ -1907,304 +1819,330 @@ var GoARadio = function GoARadio(props) {
     props.onChange(e.target.value);
   }
 
-  return /*#__PURE__*/React.createElement("label", {
+  return jsxs("label", Object.assign({
     className: getCss()
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    name: props.name,
-    value: props.value,
-    checked: props.checked,
-    disabled: props.disabled,
-    onChange: onRadioChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "goa-radio-icon"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "goa-radio-label"
-  }, props.children || props.label));
+  }, {
+    children: [jsx("input", {
+      type: "radio",
+      name: props.name,
+      value: props.value,
+      checked: props.checked,
+      disabled: props.disabled,
+      onChange: onRadioChange
+    }, void 0), jsx("div", {
+      className: 'goa-radio-icon'
+    }, void 0), jsx("span", Object.assign({
+      className: "goa-radio-label"
+    }, {
+      children: props.children || props.label
+    }), void 0)]
+  }), void 0);
 };
 
-var GoARadioGroup = function GoARadioGroup(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      children = _ref.children,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
-      onChange = _ref.onChange,
-      childAttrs = _objectWithoutProperties(_ref, ["name", "value", "children", "orientation", "onChange"]);
+const GoARadioGroup = _a => {
+  var {
+    name,
+    value,
+    children,
+    orientation = 'vertical',
+    onChange
+  } = _a,
+      childAttrs = __rest(_a, ["name", "value", "children", "orientation", "onChange"]);
 
   function onChangeHandler(value) {
     onChange(name, value);
   }
 
   function getChildren() {
-    return Children.map(children, function (child) {
-      var key = "".concat(name, "-").concat(child.props.value);
-
-      var _name = "".concat(name, "-").concat(Date.now());
-
-      return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
+    return Children.map(children, child => {
+      const key = `${name}-${child.props.value}`;
+      const _name = `${name}-${Date.now()}`;
+      return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, childAttrs), {
         name: _name,
         checked: child.props.value === value,
         onChange: onChangeHandler,
-        key: key
+        key
       }));
     });
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "goa-radio-group--".concat(orientation)
-  }, getChildren());
+  return jsx("div", Object.assign({
+    className: `goa-radio-group--${orientation}`
+  }, {
+    children: getChildren()
+  }), void 0);
 };
 
-var css_248z$p = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n";
-styleInject(css_248z$p);
+var css_248z$5 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  /* base */\n  --fs-lg: 1.25rem;\n  /* h4 */\n  --fs-xl: 1.5rem;\n  /* h3 */\n  --fs-2xl: 2.25rem;\n  /* h2 */\n  --fs-3xl: 3rem;\n  /* h1 */\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n}\n\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@keyframes pulse {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\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}\n[data-skeleton] * {\n  border-color: #ddd !important;\n  color: transparent !important;\n}\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}\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}\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}\n[data-skeleton] h1 {\n  height: calc(0.6 * var(--fs-3xl)) !important;\n}\n[data-skeleton] h2 {\n  height: calc(0.6 * var(--fs-2xl)) !important;\n}\n[data-skeleton] h3 {\n  height: calc(0.6 * var(--fs-xl)) !important;\n}\n[data-skeleton] h4 {\n  height: calc(0.6 * var(--fs-lg)) !important;\n}\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\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\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px;\n}\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px;\n}\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px;\n}\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n}\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px;\n}\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px;\n}\n\n.skeleton-image-content__text {\n  flex: 1 1 auto;\n}\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$5);
 
-var GoASkeletonElement = function GoASkeletonElement(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
-  var classes = "skeleton ".concat(type);
-  return /*#__PURE__*/React.createElement("div", {
+const GoASkeletonElement = ({
+  type: _type = 'text'
+}) => {
+  const classes = `skeleton ${_type}`;
+  return jsx("div", {
     className: classes
-  });
+  }, void 0);
 };
 
-var GoASkeletonContent = function GoASkeletonContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
+const GoASkeletonContent = ({
+  rows: _rows = 1
+}) => {
+  const elements = [];
 
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
+  for (let i = 0; i < _rows; i++) {
+    elements.push(jsx(GoASkeletonElement, {
       type: "text"
-    }));
+    }, void 0));
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", Object.assign({
     className: "skeleton-content"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "title"
-  }), elements));
+  }, {
+    children: jsxs("div", {
+      children: [jsx(GoASkeletonElement, {
+        type: "title"
+      }, void 0), elements]
+    }, void 0)
+  }), void 0);
 };
 
-var GoASkeletonGridColumnContent = function GoASkeletonGridColumnContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
+const GoASkeletonGridColumnContent = ({
+  rows: _rows = 1
+}) => {
+  const elements = [];
 
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
+  for (let i = 0; i < _rows; i++) {
+    elements.push(jsx(GoASkeletonElement, {
       type: "text"
-    }));
+    }, void 0));
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", Object.assign({
     className: "skeleton-content"
-  }, /*#__PURE__*/React.createElement("div", null, elements));
+  }, {
+    children: jsx("div", {
+      children: elements
+    }, void 0)
+  }), void 0);
 };
 
-var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
-  var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 1 : _ref$rows;
-  var elements = [];
+const GoASkeletonImageContent = ({
+  rows: _rows = 1
+}) => {
+  const elements = [];
 
-  for (var i = 0; i < rows; i++) {
-    elements.push( /*#__PURE__*/React.createElement(GoASkeletonElement, {
+  for (let i = 0; i < _rows; i++) {
+    elements.push(jsx(GoASkeletonElement, {
       type: "text"
-    }));
+    }, void 0));
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsxs("div", Object.assign({
     className: "skeleton-image-content"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "thumbnail"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "skeleton-image-content__text"
-  }, /*#__PURE__*/React.createElement(GoASkeletonElement, {
-    type: "title"
-  }), elements));
+  }, {
+    children: [jsx(GoASkeletonElement, {
+      type: "thumbnail"
+    }, void 0), jsxs("div", Object.assign({
+      className: "skeleton-image-content__text"
+    }, {
+      children: [jsx(GoASkeletonElement, {
+        type: "title"
+      }, void 0), elements]
+    }), void 0)]
+  }), void 0);
 };
 
-var css_248z$q = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n@keyframes pulse {\n  0% {\n    opacity: 0.5; }\n  50% {\n    opacity: 1; }\n  100% {\n    opacity: 0.5; } }\n\n[data-skeleton] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n  [data-skeleton] * {\n    border-color: #ddd !important;\n    color: transparent !important; }\n  [data-skeleton] p,\n  [data-skeleton] a {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    display: inline;\n    line-height: 0 !important;\n    font-size: 50% !important; }\n    [data-skeleton] p::after,\n    [data-skeleton] a::after {\n      content: '' !important;\n      display: block !important;\n      margin-bottom: 1rem !important;\n      background-size: contain; }\n  [data-skeleton] h1,\n  [data-skeleton] h2,\n  [data-skeleton] h3,\n  [data-skeleton] h4,\n  [data-skeleton] h5,\n  [data-skeleton] h6 {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out;\n    margin-bottom: 1rem; }\n  [data-skeleton] h1 {\n    height: calc(0.6 * var(--fs-3xl)) !important; }\n  [data-skeleton] h2 {\n    height: calc(0.6 * var(--fs-2xl)) !important; }\n  [data-skeleton] h3 {\n    height: calc(0.6 * var(--fs-xl)) !important; }\n  [data-skeleton] h4 {\n    height: calc(0.6 * var(--fs-lg)) !important; }\n  [data-skeleton] img {\n    background-color: #ddd !important;\n    -webkit-animation: pulse 2s infinite ease-in-out;\n            animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  background: #dcdcdc;\n  overflow: hidden;\n  margin: 10px 0; }\n\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px; }\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px; }\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px; }\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; }\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px; }\n\n.skeleton-image-content__text {\n  flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left; }\n\n.goa-card {\n  box-sizing: border-box;\n  background: #fff;\n  border: 1px solid #dcdcdc;\n  transition: opacity 300ms ease-in-out;\n  /* size variants ***/ }\n  .goa-card .card-content {\n    padding: 28px;\n    border-top: 8px solid #0081a2; }\n    .goa-card .card-content .goa-title,\n    .goa-card .card-content .goa-text,\n    .goa-card .card-content .goa-content {\n      margin-bottom: 28px; }\n    .goa-card .card-content .goa-text {\n      color: #333;\n      font-size: var(--fs-base);\n      line-height: 28px; }\n    .goa-card .card-content .goa-footer {\n      font-size: var(--fs-base); }\n    .goa-card .card-content .goa-title {\n      font-size: var(--fs-xl);\n      font-weight: 400;\n      line-height: 32px; }\n  .goa-card .goa-poster {\n    position: relative;\n    display: block;\n    padding: 56.25% 0 0;\n    overflow: hidden;\n    background: #e5e5e5; }\n    .goa-card .goa-poster:empty {\n      display: none; }\n    .goa-card .goa-poster img,\n    .goa-card .goa-poster iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: none; }\n  .goa-card .goa-poster-image img {\n    display: block;\n    width: 100%;\n    -o-object-fit: cover;\n       object-fit: cover; }\n  .goa-card.card-auto {\n    width: auto; }\n    .goa-card.card-auto .card {\n      flex-basis: auto;\n      width: auto; }\n  .goa-card a:hover {\n    color: #004f84;\n    text-decoration: none; }\n  .goa-card a:focus {\n    outline: 3px solid #feba35;\n    outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  padding-bottom: 56.25%; }\n  .goa-card[data-skeleton] .goa-poster-image img {\n    display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n  margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n  background-color: #ddd !important;\n  -webkit-animation: pulse 2s infinite ease-in-out;\n          animation: pulse 2s infinite ease-in-out;\n  max-height: 1rem; }\n";
-styleInject(css_248z$q);
+var css_248z$4 = "/* Palette */\n/* Semantic usages */\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  /* base */\n  --fs-lg: 1.25rem;\n  /* h4 */\n  --fs-xl: 1.5rem;\n  /* h3 */\n  --fs-2xl: 2.25rem;\n  /* h2 */\n  --fs-3xl: 3rem;\n  /* h1 */\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n}\n\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@keyframes pulse {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\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}\n[data-skeleton] * {\n  border-color: #ddd !important;\n  color: transparent !important;\n}\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}\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}\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}\n[data-skeleton] h1 {\n  height: calc(0.6 * var(--fs-3xl)) !important;\n}\n[data-skeleton] h2 {\n  height: calc(0.6 * var(--fs-2xl)) !important;\n}\n[data-skeleton] h3 {\n  height: calc(0.6 * var(--fs-xl)) !important;\n}\n[data-skeleton] h4 {\n  height: calc(0.6 * var(--fs-lg)) !important;\n}\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\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\n.skeleton.text {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px;\n}\n\n.skeleton.paragraph {\n  width: 100%;\n  height: 70px;\n  border-radius: 4px;\n}\n\n.skeleton.title {\n  width: 50%;\n  height: 20px;\n  margin-bottom: 15px;\n  border-radius: 4px;\n}\n\n.skeleton.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n}\n\n.skeleton.thumbnail {\n  width: 100px;\n  height: 100px;\n  border-radius: 4px;\n}\n\n/* skeleton image text */\n.skeleton-image-content {\n  display: flex;\n  flex-direction: row;\n  gap: 30px;\n}\n\n.skeleton-image-content__text {\n  flex: 1 1 auto;\n}\n\n/* skeleton content */\n.skeleton-content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  align-items: left;\n}\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}\n.goa-card .card-content {\n  padding: 28px;\n  border-top: 8px solid #0081a2;\n}\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}\n.goa-card .card-content .goa-text {\n  color: #333;\n  font-size: var(--fs-base);\n  line-height: 28px;\n}\n.goa-card .card-content .goa-footer {\n  font-size: var(--fs-base);\n}\n.goa-card .card-content .goa-title {\n  font-size: var(--fs-xl);\n  font-weight: 400;\n  line-height: 32px;\n}\n.goa-card .goa-poster {\n  position: relative;\n  display: block;\n  padding: 56.25% 0 0;\n  overflow: hidden;\n  background: #e5e5e5;\n}\n.goa-card .goa-poster:empty {\n  display: none;\n}\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}\n.goa-card .goa-poster-image img {\n  display: block;\n  width: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.goa-card.card-auto {\n  width: auto;\n}\n.goa-card.card-auto .card {\n  flex-basis: auto;\n  width: auto;\n}\n.goa-card a:hover {\n  color: #004f84;\n  text-decoration: none;\n}\n.goa-card a:focus {\n  outline: 3px solid #feba35;\n  outline-offset: 0;\n}\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}\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$4);
 
-var GoACard = function GoACard(_ref) {
-  var title = _ref.title,
-      content = _ref.content,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? null : _ref$description,
-      _ref$cardImageUrl = _ref.cardImageUrl,
-      cardImageUrl = _ref$cardImageUrl === void 0 ? null : _ref$cardImageUrl,
-      _ref$titleUrl = _ref.titleUrl,
-      titleUrl = _ref$titleUrl === void 0 ? null : _ref$titleUrl,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$minWidth = _ref.minWidth,
-      minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
-      other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      imgHeight = _useState2[0],
-      setImgHeight = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+const GoACard = _a => {
+  var {
+    title,
+    content,
+    description = null,
+    cardImageUrl = null,
+    titleUrl = null,
+    children = null,
+    minWidth = 'auto',
+    maxWidth = 'auto'
+  } = _a,
+      other = __rest(_a, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
+
+  const [imgHeight, setImgHeight] = useState(null);
+  return jsxs("div", Object.assign({
     className: "goa-card",
-    "data-testid": "card-container",
+    "data-testid": 'card-container',
     style: {
-      minWidth: minWidth,
-      maxWidth: maxWidth
+      minWidth,
+      maxWidth
     }
-  }, other), cardImageUrl && /*#__PURE__*/React.createElement("div", {
-    className: "goa-poster-image",
-    "data-testid": "card-img"
-  }, /*#__PURE__*/React.createElement("img", {
-    height: imgHeight,
-    src: cardImageUrl,
-    alt: "Card cardImageUrl"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "card-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "goa-title",
-    "data-testid": "card-title"
-  }, titleUrl ? /*#__PURE__*/React.createElement("a", {
-    href: titleUrl,
-    "data-testid": "card-title-link"
-  }, title) : /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("p", {
-    className: "goa-text",
-    "data-testid": "card-content"
-  }, content !== null && content !== void 0 ? content : description), children && /*#__PURE__*/React.createElement("div", {
-    className: "goa-footer",
-    "data-testid": "card-footer"
-  }, children)));
+  }, other, {
+    children: [cardImageUrl && jsx("div", Object.assign({
+      className: "goa-poster-image",
+      "data-testid": 'card-img'
+    }, {
+      children: jsx("img", {
+        height: imgHeight,
+        src: cardImageUrl,
+        alt: "Card cardImageUrl"
+      }, void 0)
+    }), void 0), jsxs("div", Object.assign({
+      className: "card-content"
+    }, {
+      children: [jsx("div", Object.assign({
+        className: "goa-title",
+        "data-testid": 'card-title'
+      }, {
+        children: titleUrl ? jsx("a", Object.assign({
+          href: titleUrl,
+          "data-testid": 'card-title-link'
+        }, {
+          children: title
+        }), void 0) : jsx("div", {
+          children: title
+        }, void 0)
+      }), void 0), jsx("p", Object.assign({
+        className: "goa-text",
+        "data-testid": 'card-content'
+      }, {
+        children: content !== null && content !== void 0 ? content : description
+      }), void 0), children && jsx("div", Object.assign({
+        className: "goa-footer",
+        "data-testid": 'card-footer'
+      }, {
+        children: children
+      }), void 0)]
+    }), void 0)]
+  }), void 0);
 };
 
-var css_248z$r = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top; }\n  .goa-card-group .card-group-title {\n    font-size: 24px;\n    font-weight: bold;\n    color: #333; }\n  .goa-card-group .card-group-basic {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-basic-vue > div {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-basic-vue > div > div {\n    margin: 14px 10px; }\n  .goa-card-group .card-group-column {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div {\n    margin: 14px; }\n  .goa-card-group .card-group-column-vue > div {\n    display: inline-block;\n    flex-direction: column;\n    -moz-column-count: 3;\n         column-count: 3;\n    flex-wrap: wrap;\n    align-items: stretch; }\n  .goa-card-group .card-group-column > div > div {\n    margin: 14px; }\n";
-styleInject(css_248z$r);
-
-var GoACardGroup = function GoACardGroup(_ref) {
-  var _ref$title = _ref.title,
-      title = _ref$title === void 0 ? null : _ref$title,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
-      _ref$cardItems = _ref.cardItems,
-      cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
+var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n  margin-top: 14px;\n  vertical-align: top;\n}\n.goa-card-group .card-group-title {\n  font-size: 24px;\n  font-weight: bold;\n  color: #333;\n}\n.goa-card-group .card-group-basic {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: stretch;\n}\n.goa-card-group .card-group-basic > div {\n  margin: 14px 10px;\n}\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}\n.goa-card-group .card-group-basic-vue > div > div {\n  margin: 14px 10px;\n}\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}\n.goa-card-group .card-group-column > div {\n  margin: 14px;\n}\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}\n.goa-card-group .card-group-column > div > div {\n  margin: 14px;\n}";
+styleInject(css_248z$3);
 
+const GoACardGroup = ({
+  title: _title = null,
+  children: _children = null,
+  layout: _layout = 'basic',
+  cardItems: _cardItems = null
+}) => {
   function getCards() {
-    if (children) {
-      return children;
+    if (_children) {
+      return _children;
     }
 
-    return cardItems.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(GoACard, Object.assign({}, item, {
+    return _cardItems.map((item, index) => {
+      return /*#__PURE__*/createElement(GoACard, Object.assign({}, item, {
         key: index
       }), item.children);
     });
   }
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsxs("div", Object.assign({
     className: "goa-card-group"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "card-group-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "card-group-".concat(layout)
-  }, getCards()));
+  }, {
+    children: [jsx("div", Object.assign({
+      className: "card-group-title"
+    }, {
+      children: _title
+    }), void 0), jsx("div", Object.assign({
+      className: `card-group-${_layout}`
+    }, {
+      children: getCards()
+    }), void 0)]
+  }), void 0);
 };
 
-var css_248z$s = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n.goa-checkbox {\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: calc(3rem - 4px); }\n  .goa-checkbox input[type='checkbox'] {\n    height: 0px;\n    width: 0px;\n    position: absolute; }\n\n.goa-checkbox--disabled {\n  opacity: 30%; }\n  .goa-checkbox--disabled .goa-checkbox-label {\n    cursor: default; }\n\n.goa-checkbox-container {\n  cursor: pointer;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 2px;\n  background-color: var(--color-white);\n  height: 1.5rem;\n  line-height: 1.5rem;\n  width: 1.5rem;\n  display: flex;\n  justify-content: center;\n  padding: 3px; }\n  .goa-checkbox-container svg {\n    fill: var(--color-white); }\n  .goa-checkbox-container.goa-checkbox--selected {\n    background-color: var(--color-blue-500); }\n  .goa-checkbox-container:hover:not(.goa-checkbox--selected) {\n    background-color: var(--color-gray-100); }\n  .goa-checkbox-container:focus-within {\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.goa-checkbox-text {\n  padding-left: 0.5rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n  font-weight: var(--fw-regular); }\n\n.goa-state--error .goa-checkbox-container {\n  border: 2px solid var(--color-red-500); }\n";
-styleInject(css_248z$s);
-
-/* eslint-disable-next-line */
-
-var GoACheckbox = function GoACheckbox(_ref) {
-  var name = _ref.name,
-      checked = _ref.checked,
-      disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? true : _ref$value,
-      content = _ref.content,
-      children = _ref.children,
-      _onChange = _ref.onChange;
+var css_248z$2 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84;\n}\n\n.goa-checkbox {\n  box-sizing: border-box;\n  display: flex !important;\n  align-items: center;\n  min-height: calc(3rem - 4px);\n}\n.goa-checkbox input[type=checkbox] {\n  height: 0px;\n  width: 0px;\n  position: absolute;\n}\n\n.goa-checkbox--disabled {\n  opacity: 30%;\n}\n.goa-checkbox--disabled .goa-checkbox-label {\n  cursor: default;\n}\n\n.goa-checkbox-container {\n  cursor: pointer;\n  border: 1px solid var(--color-gray-700);\n  border-radius: 2px;\n  background-color: var(--color-white);\n  height: 1.5rem;\n  line-height: 1.5rem;\n  width: 1.5rem;\n  display: flex;\n  justify-content: center;\n  padding: 3px;\n}\n.goa-checkbox-container svg {\n  fill: var(--color-white);\n}\n.goa-checkbox-container.goa-checkbox--selected {\n  background-color: var(--color-blue-500);\n}\n.goa-checkbox-container:hover:not(.goa-checkbox--selected) {\n  background-color: var(--color-gray-100);\n}\n.goa-checkbox-container:focus-within {\n  box-shadow: 0 0 0 3px var(--color-orange-500);\n  outline: none;\n}\n\n.goa-checkbox-text {\n  padding-left: 0.5rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n  font-weight: var(--fw-regular);\n}\n\n.goa-state--error .goa-checkbox-container {\n  border: 2px solid var(--color-red-500);\n}";
+styleInject(css_248z$2);
 
-  var rootCss = function rootCss() {
+const GoACheckbox = ({
+  name,
+  checked,
+  disabled,
+  indeterminate,
+  value: _value = true,
+  content,
+  children,
+  onChange
+}) => {
+  const rootCss = () => {
     return classnames({
       'goa-checkbox': true,
       'goa-checkbox--disabled': disabled
     });
   };
 
-  var checkboxCss = function checkboxCss() {
+  const checkboxCss = () => {
     return classnames({
       'goa-checkbox-container': true,
       'goa-checkbox--selected': checked
     });
   };
 
-  return /*#__PURE__*/React.createElement("label", {
+  return jsxs("label", Object.assign({
     className: rootCss()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: checkboxCss()
-  }, /*#__PURE__*/React.createElement("input", {
-    name: name,
-    type: "checkbox",
-    checked: checked,
-    disabled: disabled,
-    value: "".concat(value),
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.checked ? "".concat(value) : null);
-    }
-  }), indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
-    id: "dashmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 2"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "15",
-    height: "2"
-  })), !indeterminate && checked && /*#__PURE__*/React.createElement("svg", {
-    id: "checkmark",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 12.18"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "goa-checkbox-text"
-  }, content || children));
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: checkboxCss()
+    }, {
+      children: [jsx("input", {
+        name: name,
+        type: "checkbox",
+        checked: checked,
+        disabled: disabled,
+        value: `${_value}`,
+        onChange: e => onChange(name, e.target.checked ? `${_value}` : null)
+      }, void 0), indeterminate && checked && jsx("svg", Object.assign({
+        id: 'dashmark',
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 15 2"
+      }, {
+        children: jsx("rect", {
+          width: "15",
+          height: "2"
+        }, void 0)
+      }), void 0), !indeterminate && checked && jsx("svg", Object.assign({
+        id: 'checkmark',
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 16 12.18"
+      }, {
+        children: jsx("path", {
+          d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
+        }, void 0)
+      }), void 0)]
+    }), void 0), jsx("div", Object.assign({
+      className: "goa-checkbox-text"
+    }, {
+      children: content || children
+    }), void 0)]
+  }), void 0);
 };
 
-var css_248z$t = "/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px; }\n\n.svg--small {\n  max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0); }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg); } }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n  display: block;\n  fill: transparent;\n  stroke: #0070c4;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n  .progress-circle--infinite {\n    -webkit-animation: circle-animation 1.2s linear infinite;\n            animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n  font-style: normal;\n  font-weight: normal; }\n  .progress-message--large {\n    margin-top: 32px;\n    font-size: 24px;\n    color: #000; }\n  .progress-message--small {\n    margin-top: 18px;\n    font-size: 18px;\n    color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white; }\n  .progress-container--large {\n    width: 100%;\n    height: 100%; }\n";
-styleInject(css_248z$t);
-
-var GoAPageLoader = function GoAPageLoader(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'infinite' : _ref$type,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$message = _ref.message,
-      message = _ref$message === void 0 ? 'Loading...' : _ref$message,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 0 : _ref$value,
-      _ref$pagelock = _ref.pagelock,
-      pagelock = _ref$pagelock === void 0 ? true : _ref$pagelock,
-      _ref$displayType = _ref.displayType,
-      displayType = _ref$displayType === void 0 ? 'large' : _ref$displayType;
+var css_248z$1 = "/* Palette */\n/* Semantic usages */\n.svg {\n  max-width: 100px;\n}\n\n.svg--small {\n  max-width: 65px;\n}\n\n@-webkit-keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0);\n  }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circle-animation {\n  0% {\n    stroke-dashoffset: 75;\n    transform: rotate(0);\n  }\n  100% {\n    stroke-dashoffset: 75;\n    transform: rotate(360deg);\n  }\n}\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke: #c8eef9;\n  stroke-width: 7px;\n}\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}\n.progress-circle--infinite {\n  -webkit-animation: circle-animation 1.2s linear infinite;\n          animation: circle-animation 1.2s linear infinite;\n}\n\n.progress-message, .progress-message--small, .progress-message--large {\n  font-style: normal;\n  font-weight: normal;\n}\n.progress-message--large {\n  margin-top: 32px;\n  font-size: 24px;\n  color: #000;\n}\n.progress-message--small {\n  margin-top: 18px;\n  font-size: 18px;\n  color: #000;\n}\n\n.progress-container, .progress-container--large, .progress-container--small {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: white;\n}\n.progress-container--large {\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$1);
 
-  /**
-   * Set defaults
+const GoAPageLoader = ({
+  type: _type = 'infinite',
+  visible: _visible = false,
+  message: _message = 'Loading...',
+  value: _value = 0,
+  pagelock: _pagelock = true,
+  displayType: _displayType = 'large'
+}) => {
+  /**
+   * Set defaults
    */
-  var progressMaxValue = 283;
-  var strokeDashoffset = 0;
-  /**
-   * Sets the progress if in progress mode.
-   * @param progress
-   * @returns
+  const progressMaxValue = 283;
+  let strokeDashoffset = 0;
+  /**
+   * Sets the progress if in progress mode.
+   * @param progress
+   * @returns
    */
 
   function setProgress(progress) {
-    if (type !== 'progress') {
+    if (_type !== 'progress') {
       return;
     }
 
@@ -2217,12 +2155,12 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
       return;
     }
 
-    var value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
+    const value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
     strokeDashoffset = value;
   }
 
-  if (visible) {
-    if (pagelock && displayType !== 'small') {
+  if (_visible) {
+    if (_pagelock && _displayType !== 'small') {
       document.body.style.height = '100%';
       document.body.style.overflow = 'hidden';
     } else {
@@ -2230,36 +2168,42 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
       document.body.style.removeProperty('overflow');
     }
 
-    if (type === 'progress') {
-      setProgress(value);
+    if (_type === 'progress') {
+      setProgress(_value);
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: "progress-container--".concat(displayType),
-      onKeyDown: function onKeyDown(event) {
+    return jsxs("div", Object.assign({
+      className: `progress-container--${_displayType}`,
+      onKeyDown: event => {
         event.preventDefault();
       }
-    }, /*#__PURE__*/React.createElement("svg", {
-      className: "".concat(displayType === 'large' ? 'svg' : "svg--small"),
-      fill: "none",
-      viewBox: "0 0 100 100",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("circle", {
-      className: "base-circle",
-      cx: "50",
-      cy: "50",
-      r: "45"
-    }), /*#__PURE__*/React.createElement("circle", {
-      className: "".concat(type === 'infinite' ? 'progress-circle--infinite' : 'progress-circle'),
-      cx: "50",
-      cy: "50",
-      r: "45",
-      style: {
-        strokeDashoffset: strokeDashoffset
-      }
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "progress-message--".concat(displayType)
-    }, message));
+    }, {
+      children: [jsxs("svg", Object.assign({
+        className: `${_displayType === 'large' ? 'svg' : "svg--small"}`,
+        fill: "none",
+        viewBox: "0 0 100 100",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, {
+        children: [jsx("circle", {
+          className: "base-circle",
+          cx: "50",
+          cy: "50",
+          r: "45"
+        }, void 0), jsx("circle", {
+          className: `${_type === 'infinite' ? 'progress-circle--infinite' : 'progress-circle'}`,
+          cx: "50",
+          cy: "50",
+          r: "45",
+          style: {
+            strokeDashoffset: strokeDashoffset
+          }
+        }, void 0)]
+      }), void 0), jsx("span", Object.assign({
+        className: `progress-message--${_displayType}`
+      }, {
+        children: _message
+      }), void 0)]
+    }), void 0);
   } else {
     document.body.style.removeProperty('height');
     document.body.style.removeProperty('overflow');
@@ -2267,86 +2211,84 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
   }
 };
 GoAPageLoader.propTypes = {
-  visible: propTypes.bool,
-  message: propTypes.string,
-  value: propTypes.number,
-  type: propTypes.string,
-  pagelock: propTypes.bool,
-  displayType: propTypes.string
+  visible: PropTypes.bool,
+  message: PropTypes.string,
+  value: PropTypes.number,
+  type: PropTypes.string,
+  pagelock: PropTypes.bool,
+  displayType: PropTypes.string
 };
 
-var css_248z$u = "@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg); } }\n\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite; }\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke-width: 7px; }\n\n.rotating-circle {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite;\n  display: block;\n  fill: transparent;\n  stroke-linecap: round;\n  stroke-width: 7px;\n  transform-origin: 50% 50%; }\n";
-styleInject(css_248z$u);
+var css_248z = "@-webkit-keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.circular-loader {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite;\n}\n\n.base-circle {\n  display: block;\n  fill: transparent;\n  stroke-width: 7px;\n}\n\n.rotating-circle {\n  -webkit-animation: rotate 1s linear infinite;\n          animation: rotate 1s linear infinite;\n  display: block;\n  fill: transparent;\n  stroke-linecap: round;\n  stroke-width: 7px;\n  transform-origin: 50% 50%;\n}";
+styleInject(css_248z);
 
-var GoAElementLoader = function GoAElementLoader(_ref) {
-  var _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$baseColour = _ref.baseColour,
-      baseColour = _ref$baseColour === void 0 ? '#c8eef9' : _ref$baseColour,
-      _ref$spinnerColour = _ref.spinnerColour,
-      spinnerColour = _ref$spinnerColour === void 0 ? '#0070c4' : _ref$spinnerColour,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size;
-  var radius = size === 'small' ? 16 : 18;
-  var diameter = radius * 2;
-  var boxView = "0 0 ".concat(diameter, " ").concat(diameter);
-  /**
-   * Generates the value for an SVG arc.
-   * @param current       Current value.
-   * @param total         Maximum value.
-   * @param pathRadius    Radius of the SVG path.
-   * @param elementRadius Radius of the SVG container.
-   * @param isSemicircle  Whether the element should be a semicircle.
+const GoAElementLoader = ({
+  visible: _visible = false,
+  baseColour: _baseColour = '#c8eef9',
+  spinnerColour: _spinnerColour = '#0070c4',
+  size: _size = 'default'
+}) => {
+  const radius = _size === 'small' ? 16 : 18;
+  const diameter = radius * 2;
+  const boxView = `0 0 ${diameter} ${diameter}`;
+  /**
+   * Generates the value for an SVG arc.
+   * @param current       Current value.
+   * @param total         Maximum value.
+   * @param pathRadius    Radius of the SVG path.
+   * @param elementRadius Radius of the SVG container.
+   * @param isSemicircle  Whether the element should be a semicircle.
    */
 
-  function getArc(current, total, pathRadius, elementRadius) {
-    var isSemicircle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    var value = Math.max(0, Math.min(current || 0, total));
-    var maxAngle = isSemicircle ? 180 : 359.9999;
-    var percentage = total === 0 ? maxAngle : value / total * maxAngle;
+  function getArc(current, total, pathRadius, elementRadius, isSemicircle = false) {
+    const value = Math.max(0, Math.min(current || 0, total));
+    const maxAngle = isSemicircle ? 180 : 359.9999;
+    const percentage = total === 0 ? maxAngle : value / total * maxAngle;
 
-    var start = _polarToCartesian(elementRadius, pathRadius, percentage);
+    const start = _polarToCartesian(elementRadius, pathRadius, percentage);
 
-    var end = _polarToCartesian(elementRadius, pathRadius, 0);
+    const 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);
+    const arcSweep = percentage <= 180 ? 0 : 1;
+    return `M ${start} A ${pathRadius} ${pathRadius} 0 ${arcSweep} 0 ${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.
+  const 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);
+    const angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
+    const x = elementRadius + pathRadius * Math.cos(angleInRadians);
+    const y = elementRadius + pathRadius * Math.sin(angleInRadians);
     return x + ' ' + y;
   }
 
-  return visible && /*#__PURE__*/React.createElement("svg", {
+  return _visible && jsxs("svg", Object.assign({
     className: "circular-loader",
     fill: "none",
     viewBox: boxView,
     width: radius,
     height: radius,
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: radius,
-    cy: radius,
-    stroke: baseColour,
-    strokeWidth: "7",
-    r: radius - 4
-  }), /*#__PURE__*/React.createElement("path", {
-    d: getArc(75, 100, radius - 4, radius, false),
-    strokeWidth: "7",
-    stroke: spinnerColour,
-    strokeLinecap: "round"
-  }));
+  }, {
+    children: [jsx("circle", {
+      cx: radius,
+      cy: radius,
+      stroke: _baseColour,
+      strokeWidth: "7",
+      r: radius - 4
+    }, void 0), jsx("path", {
+      d: getArc(75, 100, radius - 4, radius, false),
+      strokeWidth: "7",
+      stroke: _spinnerColour,
+      strokeLinecap: "round"
+    }, void 0)]
+  }), void 0);
 };
 
 export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };