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

package/experimental/react-components.umd.js

@@ -1,972 +1,8 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames'], factory) :
-  (global = global || self, factory(global.ReactComponents = {}, global.React, global.classnames));
-}(this, (function (exports, React, classnames) { 'use strict';
+(function (factory) {
+	typeof define === 'function' && define.amd ? define(factory) :
+	factory();
+})((function () { 'use strict';
 
-  var React__default = 'default' in React ? React['default'] : React;
-  classnames = classnames && classnames.hasOwnProperty('default') ? classnames['default'] : classnames;
 
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
 
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = ":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";
-  var styles = {"goa-badge":"badge-module_goa-badge__3F6Ve","goa-badge-content":"badge-module_goa-badge-content__3UN-3","badge-information":"badge-module_badge-information__2r_Eq","badge-success":"badge-module_badge-success__18wcm","badge-warning":"badge-module_badge-warning__20BNM","badge-emergency":"badge-module_badge-emergency__E4mHn","badge-dark":"badge-module_badge-dark__1thw-","badge-midtone":"badge-module_badge-midtone__1Gt4T","badge-light":"badge-module_badge-light__B8ZMt","badge-inactive":"badge-module_badge-inactive__35PEw"};
-  styleInject(css_248z);
-
-  var css_248z$1 = ".goa-icon {\n  display: flex; }\n\n.goa-icon-button {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  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$1);
-
-  function GoAIcon(_ref) {
-    var type = _ref.type,
-        _ref$style = _ref.style,
-        style = _ref$style === void 0 ? 'outline' : _ref$style,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 'medium' : _ref$size;
-
-    var _size = getSize(size);
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        width: _size
-      },
-      className: "goa-icon",
-      "data-testid": "icon-".concat(type)
-    }, /*#__PURE__*/React__default.createElement("ion-icon", {
-      style: {
-        fontSize: _size
-      },
-      name: style === 'filled' ? type : "".concat(type, "-").concat(style)
-    }));
-  }
-
-  function getSize(size) {
-    switch (size) {
-      case 'small':
-        return "14px";
-
-      case 'medium':
-        return "18px";
-
-      case 'large':
-        return "24px";
-
-      case 'xlarge':
-        return "32px";
-    }
-  }
-
-  function GoAIconButton(_ref) {
-    var type = _ref.type,
-        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__default.createElement("button", {
-      title: title,
-      disabled: disabled,
-      className: "goa-icon-button goa-icon-button-".concat(variant),
-      "data-testid": testId,
-      onClick: onClick
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: type,
-      size: size
-    }));
-  }
-
-  var GoABadge = function GoABadge(_ref) {
-    var type = _ref.type,
-        content = _ref.content,
-        icon = _ref.icon,
-        testId = _ref.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-    }, icon && /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: icon
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAInfoBadge = function GoAInfoBadge(_ref2) {
-    var content = _ref2.content,
-        testId = _ref2.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-information"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "information-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoASuccessBadge = function GoASuccessBadge(_ref3) {
-    var content = _ref3.content,
-        testId = _ref3.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-success"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "checkmark-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAWarningBadge = function GoAWarningBadge(_ref4) {
-    var content = _ref4.content,
-        testId = _ref4.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-warning"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "warning"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-  var GoAEmergencyBadge = function GoAEmergencyBadge(_ref5) {
-    var content = _ref5.content,
-        testId = _ref5.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: classnames(styles['goa-badge'], styles["badge-emergency"])
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "alert-circle"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles['goa-badge-content'])
-    }, content));
-  };
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    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 _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  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;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var css_248z$2 = ".button-module_goa-button__fikCc {\n  border-radius: 0.25rem;\n  border: 2px solid var(--color-blue-500);\n  box-sizing: border-box;\n  cursor: pointer;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1em;\n  padding: 0 0.75rem;\n  transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n  transform: scale(1); }\n  .button-module_goa-button__fikCc:disabled {\n    pointer-events: none;\n    color: var(--color-gray-700);\n    background-color: var(--color-gray-100);\n    border-color: var(--color-gray-100); }\n  .button-module_goa-button__fikCc:active {\n    transform: scale(0.98); }\n\n.button-module_goa-button--primary__2V_nV {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-blue-500);\n  color: var(--color-white); }\n  .button-module_goa-button--primary__2V_nV:hover {\n    border-color: var(--color-blue-600);\n    background: var(--color-blue-600); }\n  .button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n    border-color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    background: var(--color-blue-600);\n    outline: none; }\n\n.button-module_goa-button--secondary__3_OjG {\n  border: 2px solid var(--color-blue-500);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--secondary__3_OjG:hover {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600); }\n  .button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--tertiary__3mvRP {\n  border-color: var(--color-gray-200);\n  background: var(--color-white);\n  color: var(--color-blue-500); }\n  .button-module_goa-button--tertiary__3mvRP:hover {\n    color: var(--color-blue-600); }\n  .button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n    border-color: var(--color-blue-600);\n    color: var(--color-blue-600);\n    box-shadow: 0 0 0 3px var(--color-orange-500);\n    outline: none; }\n\n.button-module_goa-button--borderless__2PWz1 {\n  background: none;\n  color: var(--color-blue-500);\n  border: none; }\n  .button-module_goa-button--borderless__2PWz1:hover {\n    background-color: var(--color-blue-100);\n    color: var(--color-blue-500); }\n  .button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n    outline: none;\n    box-shadow: none;\n    background-color: var(--color-blue-100); }\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n  color: var(--color-white);\n  background: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n  .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-red-500); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500);\n  border-color: var(--color-gray-200); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n    border-color: var(--color-red-600);\n    color: var(--color-red-600); }\n  .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n    color: var(--color-red-600);\n    border-color: var(--color-red-600); }\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n  color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n  .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n    background: var(--color-red-100);\n    color: var(--color-red-500); }\n\n.button-module_goa-button--large__1iRt7 {\n  font-size: var(--fs-lg);\n  line-height: 3rem; }\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(3rem + 4px); }\n\n.button-module_goa-button--medium__1xeCJ {\n  font-size: var(--fs-base);\n  line-height: 2.375rem; }\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(2.375rem + 4px); }\n\n.button-module_goa-button--small__1sl63 {\n  font-size: var(--fs-sm);\n  line-height: 1.75rem; }\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n  line-height: calc(1.75rem + 4px); }\n\n.button-module_goa-button__fikCc {\n  min-width: 100%; }\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n  margin: 0;\n  margin-top: 0.5rem; }\n\n@media (min-width: 480px) {\n  .button-module_goa-button__fikCc {\n    min-width: 4rem; }\n  .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n    margin: 0;\n    margin-left: 0.5rem; } }\n";
-  var styles$1 = {"goa-button":"button-module_goa-button__fikCc","goa-button--primary":"button-module_goa-button--primary__2V_nV","goa-button--secondary":"button-module_goa-button--secondary__3_OjG","goa-button--tertiary":"button-module_goa-button--tertiary__3mvRP","goa-button--borderless":"button-module_goa-button--borderless__2PWz1","goa-button--danger":"button-module_goa-button--danger__2jXqa","goa-button--large":"button-module_goa-button--large__1iRt7","goa-button--medium":"button-module_goa-button--medium__1xeCJ","goa-button--small":"button-module_goa-button--small__1sl63"};
-  styleInject(css_248z$2);
-
-  var GoAButton = function GoAButton(_ref) {
-    var _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'primary' : _ref$type,
-        _ref$size = _ref.size,
-        size = _ref$size === void 0 ? 'medium' : _ref$size,
-        _ref$variant = _ref.variant,
-        variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-        title = _ref.title,
-        children = _ref.children,
-        onClick = _ref.onClick,
-        props = _objectWithoutProperties(_ref, ["type", "size", "variant", "title", "children", "onClick"]);
-
-    var css = [styles$1["goa-button--".concat(type)], styles$1["goa-button--".concat(size)], styles$1["goa-button--".concat(variant)], styles$1['goa-button']].join(' ');
-    var buttonRef = React.useRef();
-    return /*#__PURE__*/React__default.createElement("button", Object.assign({
-      className: css,
-      ref: buttonRef,
-      title: title,
-      onClick: onClick
-    }, props), children);
-  };
-
-  var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n  display: flex;\n  justify-content: center;\n  background-color: #dcdcdc; }\n  .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n    display: flex;\n    flex: 1 1 auto;\n    margin: 0 24px;\n    max-width: 1200px; }\n    @media (min-width: 768px) {\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n        margin: 0 72px; } }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n      display: flex;\n      flex: 1 1 auto;\n      justify-content: center;\n      padding-left: 20px; }\n    .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n      margin-left: auto;\n      width: 20px;\n      text-align: right;\n      font-weight: bold;\n      font-size: small;\n      align-self: center;\n      cursor: pointer;\n      display: flex; }\n      .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n        color: #0070c4; }\n";
-  var styles$2 = {"goa-app-version-header":"app-version-header-module_goa-app-version-header__3ngyf","content-wrapper":"app-version-header-module_content-wrapper__15exd","environment-and-version":"app-version-header-module_environment-and-version__1-GPd","close":"app-version-header-module_close__1beXI"};
-  styleInject(css_248z$3);
-
-  var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
-    var isProdEnvironment = _ref.isProdEnvironment,
-        environment = _ref.environment,
-        version = _ref.version;
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        closed = _useState2[0],
-        setClosed = _useState2[1];
-
-    if (closed || isProdEnvironment) return null;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$2['goa-app-version-header'])
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['content-wrapper']),
-      "data-testid": "content-wrapper"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['environment-and-version'])
-    }, environment, " ", version), /*#__PURE__*/React__default.createElement("span", {
-      className: classnames(styles$2['close']),
-      "data-testid": "close",
-      onClick: function onClick() {
-        return setClosed(true);
-      }
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: "close"
-    }))));
-  };
-
-  var css_248z$4 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-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 = {"goa-card":"card-module_goa-card__OjjJX","goa-card--tertiary":"card-module_goa-card--tertiary__1BV7k","goa-card-top":"card-module_goa-card-top__RM4IA","goa-card-top--primary":"card-module_goa-card-top--primary__g2XEU","goa-card-top--secondary":"card-module_goa-card-top--secondary__mSrLl","goa-card-top--tertiary":"card-module_goa-card-top--tertiary__2fG-A","goa-card-details":"card-module_goa-card-details__4KtfS","goa-card-content":"card-module_goa-card-content__3gE5R","goa-card-content--tertiary":"card-module_goa-card-content--tertiary__1dbYr"};
-  styleInject(css_248z$4);
-
-  var GoACard = function GoACard(_ref) {
-    var title = _ref.title,
-        children = _ref.children,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'primary' : _ref$type,
-        _ref$minWidth = _ref.minWidth,
-        minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-        _ref$maxWidth = _ref.maxWidth,
-        maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
-        other = _objectWithoutProperties(_ref, ["title", "children", "type", "minWidth", "maxWidth"]);
-
-    var dataProps = Object.entries(other).filter(function (item) {
-      return item[0].startsWith('data-');
-    }).reduce(function (previous, current) {
-      return _objectSpread2(_objectSpread2({}, previous), {}, _defineProperty({}, current[0], current[1]));
-    }, {});
-    return /*#__PURE__*/React__default.createElement("div", Object.assign({}, dataProps, {
-      className: classnames(css['goa-card'], css["goa-card--".concat(type)]),
-      "data-testid": "card-container",
-      style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth
-      }
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(css['goa-card-top'], css["goa-card-top--".concat(type)])
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(css['goa-card-content'], css["goa-card-content--".concat(type)])
-    }, title && /*#__PURE__*/React__default.createElement("h3", {
-      className: css['goa-card-title']
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: css['goa-card-details'],
-      "data-testid": "card-content"
-    }, children)));
-  };
-
-  var css_248z$5 = ".goa-flex-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: top;\n  margin-bottom: 1.5rem; }\n  .goa-flex-row *:last-child {\n    margin-bottom: 0; }\n\n.goa-flex-row > * {\n  flex: 1 1 30ch; }\n";
-  styleInject(css_248z$5);
-
-  var GoAFlexRow = function GoAFlexRow(_ref) {
-    var gap = _ref.gap,
-        minWidth = _ref.minWidth,
-        children = _ref.children;
-    var style = {
-      gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-    };
-
-    var getChildren = function getChildren() {
-      return React__default.Children.map(children, function (child) {
-        return React__default.cloneElement(child, {
-          style: _objectSpread2({
-            flexBasis: minWidth
-          }, child.props.style)
-        });
-      });
-    };
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-flex-row",
-      style: style
-    }, getChildren());
-  };
-
-  var GoAFormItem = function GoAFormItem(_ref) {
-    var children = _ref.children,
-        helpText = _ref.helpText,
-        error = _ref.error;
-    var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className
-    }, children, error && /*#__PURE__*/React__default.createElement("div", {
-      className: "error-msg"
-    }, error), helpText && /*#__PURE__*/React__default.createElement("div", {
-      id: "helpText",
-      className: "help-msg"
-    }, helpText));
-  };
-
-  var GoAFormActions = function GoAFormActions(_ref) {
-    var _ref$alignment = _ref.alignment,
-        alignment = _ref$alignment === void 0 ? 'left' : _ref$alignment,
-        children = _ref.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form-actions goa-form-actions--".concat(alignment)
-    }, children);
-  };
-
-  var css_248z$6 = ":host, :root {\n  --color-white: #fff;\n  --color-black: #333;\n  --color-gray-100: #f1f1f1;\n  --color-gray-200: #dcdcdc;\n  --color-gray-500: #adadad;\n  --color-gray-600: #767676;\n  --color-gray-700: #666;\n  --color-gray-900: #333;\n  --color-tealblue-100: #c8eefa;\n  --color-tealblue-500: #0081a2;\n  --color-tealblue-900: #005072;\n  --color-orange: #feba35;\n  --color-orange-100: hsl(39.7, 99.01%, 98%);\n  --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n  --color-orange-900: hsl(39.7, 99.01%, 30%);\n  --color-red: #ec040b;\n  --color-red-100: hsl(358.19, 96.67%, 98%);\n  --color-red-500: hsl(358.19, 96.67%, 47.06%);\n  --color-red-600: hsl(358.19, 96.67%, 40%);\n  --color-red-900: hsl(358.19, 96.67%, 20%);\n  --color-green: #00853F;\n  --color-green-100: hsl(148, 100%, 95%);\n  --color-green-500: hsl(148.42, 100%, 26.08%);\n  --color-green-900: hsl(148, 100%, 10%);\n  --color-blue-100: #e3f2ff;\n  --color-blue-500: #0070c4;\n  --color-blue-600: #004f84; }\n\n:root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-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$6);
-
-  var GoAForm = function GoAForm(_ref) {
-    var children = _ref.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-form"
-    }, children);
-  };
-
-  var css_248z$7 = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-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$7);
-
-  var GoAInput = function GoAInput(_ref) {
-    var _classNames;
-
-    var name = _ref.name,
-        onTrailingIconClick = _ref.onTrailingIconClick,
-        _onChange = _ref.onChange,
-        leadingIcon = _ref.leadingIcon,
-        trailingIcon = _ref.trailingIcon,
-        _ref$variant = _ref.variant,
-        variant = _ref$variant === void 0 ? 'goa' : _ref$variant,
-        focused = _ref.focused,
-        disabled = _ref.disabled,
-        readonly = _ref.readonly,
-        other = _objectWithoutProperties(_ref, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
-
-    var inputRef = React__default.useRef(null);
-    React.useEffect(function () {
-      if (focused) {
-        var _inputRef$current;
-
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      } else {
-        var _inputRef$current2;
-
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-      }
-    }, [focused, inputRef]);
-    var rootCss = classnames({
-      'goa-input': true,
-      'goa-input--disabled': disabled
-    });
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: rootCss
-    }, leadingIcon && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-input-leading-icon"
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      type: leadingIcon
-    })), /*#__PURE__*/React__default.createElement("input", Object.assign({
-      ref: inputRef,
-      className: classnames((_classNames = {}, _defineProperty(_classNames, "input--".concat(variant), true), _defineProperty(_classNames, 'input--leading-icon', leadingIcon), _classNames)),
-      readOnly: readonly,
-      disabled: disabled,
-      onChange: function onChange(e) {
-        return _onChange(name, e.target.value);
-      }
-    }, other)), trailingIcon && !onTrailingIconClick && /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-input-trailing-icon"
-    }, /*#__PURE__*/React__default.createElement(GoAIcon, {
-      size: "medium",
-      type: trailingIcon
-    })), trailingIcon && onTrailingIconClick && /*#__PURE__*/React__default.createElement("div", {
-      onClick: onTrailingIconClick,
-      className: "goa-input-trailing-icon"
-    }, /*#__PURE__*/React__default.createElement(GoAIconButton, {
-      variant: "tertiary",
-      onClick: onTrailingIconClick,
-      disabled: disabled,
-      size: "medium",
-      type: trailingIcon,
-      testId: "".concat(name, "-input-trailing-button")
-    })));
-  };
-  var GoAInputText = function GoAInputText(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "text"
-    }));
-  };
-  var GoAInputPassword = function GoAInputPassword(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "password"
-    }));
-  };
-  var GoAInputDate = function GoAInputDate(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "date",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputTime = function GoAInputTime(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "time"
-    }));
-  };
-  var GoAInputDateTime = function GoAInputDateTime(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "datetime-local",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputEmail = function GoAInputEmail(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "email"
-    }));
-  };
-  var GoAInputSearch = function GoAInputSearch(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "text",
-      trailingIcon: "search"
-    }));
-  };
-  var GoAInputUrl = function GoAInputUrl(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "url"
-    }));
-  };
-  var GoAInputTel = function GoAInputTel(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "tel"
-    }));
-  };
-  var GoAInputFile = function GoAInputFile(props) {
-    return /*#__PURE__*/React__default.createElement("input", {
-      id: props.id,
-      name: props.name,
-      type: "file",
-      onChange: function onChange(e) {
-        return props.onChange(e.target.name, e.target.value);
-      },
-      style: {
-        backgroundColor: 'revert'
-      }
-    });
-  };
-  var GoAInputMonth = function GoAInputMonth(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "month",
-      trailingIcon: "calendar"
-    }));
-  };
-  var GoAInputNumber = function GoAInputNumber(props) {
-    return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
-      type: "number"
-    }));
-  };
-  var GoAInputRange = function GoAInputRange(_ref2) {
-    var _ref2$step = _ref2.step,
-        props = _objectWithoutProperties(_ref2, ["step"]);
-
-    return /*#__PURE__*/React__default.createElement("input", Object.assign({}, props, {
-      type: "range",
-      onChange: function onChange(e) {
-        return props.onChange(e.target.name, e.target.value);
-      }
-    }));
-  };
-
-  var css_248z$8 = ".goa-scrollable {\n  scroll-behavior: smooth; }\n\n.goa-scrollable::-webkit-scrollbar {\n  width: 6px; }\n\n.goa-scrollable::-webkit-scrollbar-track {\n  background: #f1f1f1; }\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n  background: #888; }\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n  background: #555; }\n";
-  styleInject(css_248z$8);
-
-  var GoAScrollable = function GoAScrollable(_ref) {
-    var vertical = _ref.vertical,
-        horizontal = _ref.horizontal,
-        hPadding = _ref.hPadding,
-        vPadding = _ref.vPadding,
-        height = _ref.height,
-        children = _ref.children,
-        testId = _ref.testId;
-    var style = {
-      overflowY: vertical ? 'auto' : 'hidden',
-      overflowX: horizontal ? 'auto' : 'hidden',
-      maxHeight: height !== null && height !== void 0 ? height : '100%',
-      padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
-    };
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "goa-scrollable",
-      style: style,
-      "data-testid": testId
-    }, children);
-  };
-
-  var css_248z$9 = "/* Fade in */\n.fade-in-init {\n  display: none; }\n\n.fade-in-start {\n  display: block;\n  opacity: 0;\n  transition: opacity 200ms ease-in; }\n\n.fade-in-active {\n  opacity: 1; }\n\n/* Fade out */\n.fade-out-init {\n  display: block; }\n\n.fade-out-start {\n  display: block;\n  opacity: 1;\n  transition: opacity 200ms ease-in; }\n\n.fade-out-active {\n  opacity: 0; }\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-up-start {\n  display: block;\n  transform: translateY(100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-up-active {\n  transform: translateY(0); }\n\n/* Slide out up */\n.slide-out-up-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-up-start {\n  transition: transform 300ms ease-in; }\n\n.slide-out-up-active {\n  transform: translateY(-100vh); }\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n  transition: translateY(0);\n  display: none; }\n\n.slide-in-down-start {\n  display: block;\n  transform: translateY(-100vh);\n  transition: transform 300ms ease-out; }\n\n.slide-in-down-active {\n  transform: translateY(0); }\n\n/* Slide out down */\n.slide-out-down-init {\n  transform: translateY(0);\n  display: block; }\n\n.slide-out-down-start {\n  transform: translateY(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-down-active {\n  transform: translateY(100vh); }\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-left-start {\n  display: block;\n  transform: translateX(-100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-left-active {\n  transform: translateX(0); }\n\n/* Slide out left */\n.slide-out-left-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-left-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-left-active {\n  transform: translateX(-100vw); }\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n  transition: translateX(0);\n  display: none; }\n\n.slide-in-right-start {\n  display: block;\n  transform: translateX(100vw);\n  transition: transform 300ms ease-out; }\n\n.slide-in-right-active {\n  transform: translateX(0); }\n\n/* Slide out right */\n.slide-out-right-init {\n  transform: translateX(0);\n  display: block; }\n\n.slide-out-right-start {\n  transform: translateX(0);\n  transition: transform 300ms ease-in; }\n\n.slide-out-right-active {\n  transform: translateX(100vw); }\n";
-  styleInject(css_248z$9);
-
-  var GoATransition = function GoATransition(_ref) {
-    var name = _ref.name,
-        active = _ref.active,
-        onComplete = _ref.onComplete,
-        children = _ref.children;
-
-    var _useState = React.useState('init'),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    React.useEffect(function () {
-      if (active) {
-        setState('start');
-        setTimeout(function () {
-          return setState('active');
-        }, 100);
-        setTimeout(function () {
-          onComplete === null || onComplete === void 0 ? void 0 : onComplete();
-        }, 500);
-      } else {
-        setState('init');
-      }
-    }, [active]); // `onComplete` in the dependencies results in an animation stutter
-
-    function getCss() {
-      switch (state) {
-        case 'init':
-          return "".concat(name, "-init");
-
-        case 'start':
-          return "".concat(name, "-start");
-
-        case 'active':
-          return "".concat(name, "-start ").concat(name, "-active");
-      }
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: getCss()
-    }, children);
-  };
-
-  var GoATransitionSequence = function GoATransitionSequence(props) {
-    function createTransition(props, children) {
-      return /*#__PURE__*/React__default.createElement(GoATransition, props, children);
-    }
-
-    return props.transitions // create components for the transitions
-    .map(function (state, index) {
-      return createTransition({
-        active: props.transitionIndex % (props.transitions.length + 1) > index,
-        name: state,
-        onComplete: function onComplete() {
-          return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
-        }
-      });
-    }) // on `reduce` we need to start with the innermost child
-    .reverse() // create parent/child relationship between components
-    .reduce(function (child, parent) {
-      if (!child) {
-        // the original children (user defined content to be transitioned)
-        return React__default.cloneElement(parent, {
-          children: props.children
-        });
-      }
-
-      return React__default.cloneElement(parent, {
-        children: child
-      });
-    }, null);
-  };
-
-  var css_248z$a = "/* Root ============================================================================== */\n.modal-root {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  --modal-spacing: 1.75rem;\n  --button-min-width: 5rem; }\n\n/* Modal ============================================================================== */\n.modal {\n  position: relative;\n  background: #fff;\n  z-index: 1002;\n  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n  border-radius: 4px; }\n\n@media (max-width: 639px) {\n  .modal {\n    width: 90%;\n    max-height: 90%; } }\n\n@media (min-width: 640px) {\n  .modal {\n    margin: 1rem;\n    max-height: 80%;\n    width: 600px; } }\n\n@media (min-width: 1024px) {\n  .modal {\n    width: 65ch; } }\n\n/* Modal Container =========================================================================== */\n.modal-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%; }\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n  text-align: right;\n  margin: var(--modal-spacing);\n  flex: 0 0 auto; }\n\n.modal-actions button {\n  min-width: var(--button-min-width); }\n\n@media (max-width: 639px) {\n  .modal-actions button + button {\n    margin-top: 0.5rem; }\n  .modal-actions button {\n    display: block;\n    width: 100%; } }\n\n@media (min-width: 640px) {\n  .modal-actions > button {\n    margin-right: 0; }\n  .modal-actions > button + button {\n    margin-left: 0.5rem; } }\n\n/* Modal Title ============================================================================ */\n.modal-title {\n  font-size: var(--fs-xl);\n  padding: 1rem var(--modal-spacing);\n  margin-right: 40px;\n  /*  close icon spacing */\n  flex: 0 0 auto; }\n\n/* Modal Background ======================================================================= */\n.modal-background {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1001; }\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n  position: absolute;\n  top: 1rem;\n  right: 1rem; }\n";
-  styleInject(css_248z$a);
-
-  /**
-   * Modal - Main Component
-   */
-
-  var TRANSITION_INIT = 0;
-  var TRANSITION_VISIBLE = 1;
-  var TRANSITION_HIDDEN = 2;
-  var GoAModal = function GoAModal(_ref) {
-    var children = _ref.children,
-        isOpen = _ref.isOpen,
-        onClose = _ref.onClose,
-        testId = _ref.testId,
-        backgroundTestId = _ref.backgroundTestId;
-
-    var _useState = React.useState(TRANSITION_INIT),
-        _useState2 = _slicedToArray(_useState, 2),
-        transitionIndex = _useState2[0],
-        setTransitionIndex = _useState2[1];
-
-    React.useEffect(function () {
-      if (isOpen) {
-        show();
-      } else if (transitionIndex !== 0) {
-        // don't hide() on the when in the init state
-        hide();
-        return;
-      }
-
-      if (isOpen) {
-        return hide;
-      }
-    }, [isOpen]);
-
-    function hideScrollbars() {
-      var scrollbarWidth = calculateScrollbarWidth();
-      document.body.style.overflow = 'hidden';
-      document.body.style.paddingRight = scrollbarWidth + 'px';
-    }
-
-    function resetScrollbars() {
-      // need to perform on the next render cycle to allow the css transitions to take place
-      setTimeout(function () {
-        document.body.style.overflow = '';
-        document.body.style.paddingRight = '0';
-      }, 300); // 300ms allows for any close animations to complete
-    }
-
-    function show() {
-      setTransitionIndex(TRANSITION_VISIBLE);
-      hideScrollbars();
-    }
-
-    function hide() {
-      setTransitionIndex(TRANSITION_HIDDEN);
-      resetScrollbars();
-    } // allows the current state to be easily determined within tests
-
-
-    function getState() {
-      return ['init', 'visible', 'hidden'][transitionIndex];
-    }
-
-    return /*#__PURE__*/React__default.createElement(GoATransitionSequence, {
-      transitions: ['fade-in', 'fade-out'],
-      transitionIndex: transitionIndex,
-      onTransitionComplete: function onTransitionComplete(_index, done) {
-        return done && setTransitionIndex(0);
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-root",
-      "data-testid": testId,
-      "data-state": getState()
-    }, /*#__PURE__*/React__default.createElement(Container, {
-      onClick: onClose
-    }, children), /*#__PURE__*/React__default.createElement(Background, {
-      onClick: function onClick() {
-        return onClose === null || onClose === void 0 ? void 0 : onClose();
-      },
-      testId: backgroundTestId
-    })));
-  };
-  // Public Child Components
-  // ******************************************************************************
-  // ***************
-  // GoAModalActions
-  // ***************
-
-  var GoAModalActions = function GoAModalActions(_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-actions"
-    }, children);
-  }; // ***************
-  // GoAModalContent
-  // ***************
-
-  var GoAModalContent = function GoAModalContent(_ref3) {
-    var disableScroll = _ref3.disableScroll,
-        children = _ref3.children,
-        testId = _ref3.testId;
-
-    if (disableScroll) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        "data-testid": testId,
-        style: {
-          padding: "0 1.75rem"
-        }
-      }, children);
-    }
-
-    return /*#__PURE__*/React__default.createElement(GoAScrollable, {
-      testId: testId,
-      vertical: true,
-      hPadding: 1.75
-    }, children);
-  }; // *************
-  // GoAModalTitle
-  // *************
-
-  var GoAModalTitle = function GoAModalTitle(_ref4) {
-    var children = _ref4.children,
-        testId = _ref4.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      "data-testid": testId,
-      className: "modal-title"
-    }, children);
-  }; // ******************************************************************************
-  // Private Components
-  // ******************************************************************************
-  // ******************************************
-  // Container - Contains all the content items
-  // ******************************************
-
-  var Container = function Container(_ref5) {
-    var children = _ref5.children,
-        onClick = _ref5.onClick;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal"
-    }, onClick && /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-close"
-    }, /*#__PURE__*/React__default.createElement(GoAIconButton, {
-      type: "close",
-      onClick: onClick
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-container"
-    }, children), onClick && /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        minHeight: '1.75rem'
-      }
-    }));
-  }; // ****************
-  // Background
-  // ****************
-
-
-  var Background = function Background(_ref6) {
-    var onClick = _ref6.onClick,
-        testId = _ref6.testId;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "modal-background",
-      onClick: onClick,
-      "data-testid": testId
-    });
-  }; // *******
-  // Helpers
-  // *******
-
-  /**
-   * Based on the an invisible container and the window width it calculates the scrollbar width
-   */
-
-
-  function calculateScrollbarWidth() {
-    // no scrollbars present
-    if (document.body.clientHeight <= document.documentElement.clientHeight) {
-      return 0;
-    }
-
-    var outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll';
-    document.body.appendChild(outer); // Creating inner element and placing it in the container
-
-    var inner = document.createElement('div');
-    outer.appendChild(inner); // Calculating difference between container's full width and the child width
-
-    var scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
-
-    outer.parentNode.removeChild(outer);
-    return scrollbarWidth;
-  }
-
-  var css_248z$b = ":root {\n  /* font-size */\n  --fs-xs: 0.75rem;\n  --fs-sm: 0.875rem;\n  --fs-base: 1.125rem;\n  --fs-lg: 1.25rem;\n  --fs-xl: 1.5rem;\n  --fs-2xl: 2.25rem;\n  --fs-3xl: 3rem;\n  /* font-weight */\n  --fw-thin: 100;\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-bold: 700;\n  --fw-black: 900;\n  /* line-height */\n  --lh-xs: 0.875rem;\n  --lh-sm: 1rem;\n  --lh-base: 1.5rem;\n  --lh-lg: 2rem;\n  --lh-xl: 2.75rem;\n  --lh-2xl: 3.5rem;\n  --border-radius-sm: 0.15rem;\n  --border-radius: 0.25rem;\n  --border-radius-base: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --spacing-1: 0.5rem;\n  --spacing-2: 0.875rem;\n  --spacing-3: 1.75rem;\n  --input-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$b);
-
-  var GoATextArea = function GoATextArea(_ref) {
-    var id = _ref.id,
-        name = _ref.name,
-        value = _ref.value,
-        placeholder = _ref.placeholder,
-        _onChange = _ref.onChange;
-    return /*#__PURE__*/React__default.createElement("textarea", {
-      id: id,
-      name: name,
-      className: "goa-textarea",
-      placeholder: placeholder,
-      onChange: function onChange(e) {
-        return _onChange(name, e.target.value);
-      },
-      value: value
-    });
-  };
-
-  exports.GoAAppVersionHeader = GoAAppVersionHeader;
-  exports.GoABadge = GoABadge;
-  exports.GoAButton = GoAButton;
-  exports.GoACard = GoACard;
-  exports.GoAEmergencyBadge = GoAEmergencyBadge;
-  exports.GoAFlexRow = GoAFlexRow;
-  exports.GoAForm = GoAForm;
-  exports.GoAFormActions = GoAFormActions;
-  exports.GoAFormItem = GoAFormItem;
-  exports.GoAIcon = GoAIcon;
-  exports.GoAIconButton = GoAIconButton;
-  exports.GoAInfoBadge = GoAInfoBadge;
-  exports.GoAInput = GoAInput;
-  exports.GoAInputDate = GoAInputDate;
-  exports.GoAInputDateTime = GoAInputDateTime;
-  exports.GoAInputEmail = GoAInputEmail;
-  exports.GoAInputFile = GoAInputFile;
-  exports.GoAInputMonth = GoAInputMonth;
-  exports.GoAInputNumber = GoAInputNumber;
-  exports.GoAInputPassword = GoAInputPassword;
-  exports.GoAInputRange = GoAInputRange;
-  exports.GoAInputSearch = GoAInputSearch;
-  exports.GoAInputTel = GoAInputTel;
-  exports.GoAInputText = GoAInputText;
-  exports.GoAInputTime = GoAInputTime;
-  exports.GoAInputUrl = GoAInputUrl;
-  exports.GoAModal = GoAModal;
-  exports.GoAModalActions = GoAModalActions;
-  exports.GoAModalContent = GoAModalContent;
-  exports.GoAModalTitle = GoAModalTitle;
-  exports.GoAScrollable = GoAScrollable;
-  exports.GoASuccessBadge = GoASuccessBadge;
-  exports.GoATextArea = GoATextArea;
-  exports.GoATransition = GoATransition;
-  exports.GoATransitionSequence = GoATransitionSequence;
-  exports.GoAWarningBadge = GoAWarningBadge;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+}));