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

package/experimental/react-components.esm.js

@@ -1,927 +1 @@
-import React, { useRef, useState, useEffect } from 'react';
-import classnames from '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.createElement("div", {
-    style: {
-      width: _size
-    },
-    className: "goa-icon",
-    "data-testid": "icon-".concat(type)
-  }, /*#__PURE__*/React.createElement("ion-icon", {
-    style: {
-      fontSize: _size
-    },
-    name: style === 'filled' ? type : "".concat(type, "-").concat(style)
-  }));
-}
-
-function getSize(size) {
-  switch (size) {
-    case 'small':
-      return "14px";
-
-    case 'medium':
-      return "18px";
-
-    case 'large':
-      return "24px";
-
-    case 'xlarge':
-      return "32px";
-  }
-}
-
-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", {
-    title: title,
-    disabled: disabled,
-    className: "goa-icon-button goa-icon-button-".concat(variant),
-    "data-testid": testId,
-    onClick: onClick
-  }, /*#__PURE__*/React.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.createElement("div", {
-    "data-testid": testId,
-    className: classnames(styles['goa-badge'], styles["badge-".concat(type)])
-  }, icon && /*#__PURE__*/React.createElement(GoAIcon, {
-    type: icon
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles['goa-badge-content'])
-  }, content));
-};
-var GoAInfoBadge = function GoAInfoBadge(_ref2) {
-  var content = _ref2.content,
-      testId = _ref2.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId,
-    className: classnames(styles['goa-badge'], styles["badge-information"])
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: "information-circle"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles['goa-badge-content'])
-  }, content));
-};
-var GoASuccessBadge = function GoASuccessBadge(_ref3) {
-  var content = _ref3.content,
-      testId = _ref3.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId,
-    className: classnames(styles['goa-badge'], styles["badge-success"])
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: "checkmark-circle"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles['goa-badge-content'])
-  }, content));
-};
-var GoAWarningBadge = function GoAWarningBadge(_ref4) {
-  var content = _ref4.content,
-      testId = _ref4.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId,
-    className: classnames(styles['goa-badge'], styles["badge-warning"])
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: "warning"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles['goa-badge-content'])
-  }, content));
-};
-var GoAEmergencyBadge = function GoAEmergencyBadge(_ref5) {
-  var content = _ref5.content,
-      testId = _ref5.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId,
-    className: classnames(styles['goa-badge'], styles["badge-emergency"])
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: "alert-circle"
-  }), /*#__PURE__*/React.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 = useRef();
-  return /*#__PURE__*/React.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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      closed = _useState2[0],
-      setClosed = _useState2[1];
-
-  if (closed || isProdEnvironment) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles$2['goa-app-version-header'])
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classnames(styles$2['content-wrapper']),
-    "data-testid": "content-wrapper"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classnames(styles$2['environment-and-version'])
-  }, environment, " ", version), /*#__PURE__*/React.createElement("span", {
-    className: classnames(styles$2['close']),
-    "data-testid": "close",
-    onClick: function onClick() {
-      return setClosed(true);
-    }
-  }, /*#__PURE__*/React.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.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.createElement("div", {
-    className: classnames(css['goa-card-top'], css["goa-card-top--".concat(type)])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(css['goa-card-content'], css["goa-card-content--".concat(type)])
-  }, title && /*#__PURE__*/React.createElement("h3", {
-    className: css['goa-card-title']
-  }, title), /*#__PURE__*/React.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.Children.map(children, function (child) {
-      return React.cloneElement(child, {
-        style: _objectSpread2({
-          flexBasis: minWidth
-        }, child.props.style)
-      });
-    });
-  };
-
-  return /*#__PURE__*/React.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.createElement("div", {
-    className: className
-  }, children, error && /*#__PURE__*/React.createElement("div", {
-    className: "error-msg"
-  }, error), helpText && /*#__PURE__*/React.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.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.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.useRef(null);
-  useEffect(function () {
-    if (focused) {
-      var _inputRef$current;
-
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    } else {
-      var _inputRef$current2;
-
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-    }
-  }, [focused, inputRef]);
-  var rootCss = classnames({
-    'goa-input': true,
-    'goa-input--disabled': disabled
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: rootCss
-  }, leadingIcon && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-leading-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    type: leadingIcon
-  })), /*#__PURE__*/React.createElement("input", Object.assign({
-    ref: inputRef,
-    className: classnames((_classNames = {}, _defineProperty(_classNames, "input--".concat(variant), true), _defineProperty(_classNames, 'input--leading-icon', leadingIcon), _classNames)),
-    readOnly: readonly,
-    disabled: disabled,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    }
-  }, other)), trailingIcon && !onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIcon, {
-    size: "medium",
-    type: trailingIcon
-  })), trailingIcon && onTrailingIconClick && /*#__PURE__*/React.createElement("div", {
-    onClick: onTrailingIconClick,
-    className: "goa-input-trailing-icon"
-  }, /*#__PURE__*/React.createElement(GoAIconButton, {
-    variant: "tertiary",
-    onClick: onTrailingIconClick,
-    disabled: disabled,
-    size: "medium",
-    type: trailingIcon,
-    testId: "".concat(name, "-input-trailing-button")
-  })));
-};
-var GoAInputText = function GoAInputText(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "text"
-  }));
-};
-var GoAInputPassword = function GoAInputPassword(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "password"
-  }));
-};
-var GoAInputDate = function GoAInputDate(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "date",
-    trailingIcon: "calendar"
-  }));
-};
-var GoAInputTime = function GoAInputTime(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "time"
-  }));
-};
-var GoAInputDateTime = function GoAInputDateTime(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "datetime-local",
-    trailingIcon: "calendar"
-  }));
-};
-var GoAInputEmail = function GoAInputEmail(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "email"
-  }));
-};
-var GoAInputSearch = function GoAInputSearch(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "text",
-    trailingIcon: "search"
-  }));
-};
-var GoAInputUrl = function GoAInputUrl(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "url"
-  }));
-};
-var GoAInputTel = function GoAInputTel(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "tel"
-  }));
-};
-var GoAInputFile = function GoAInputFile(props) {
-  return /*#__PURE__*/React.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.createElement(GoAInput, Object.assign({}, props, {
-    type: "month",
-    trailingIcon: "calendar"
-  }));
-};
-var GoAInputNumber = function GoAInputNumber(props) {
-  return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
-    type: "number"
-  }));
-};
-var GoAInputRange = function GoAInputRange(_ref2) {
-  var _ref2$step = _ref2.step,
-      props = _objectWithoutProperties(_ref2, ["step"]);
-
-  return /*#__PURE__*/React.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.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 = useState('init'),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  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.createElement("div", {
-    className: getCss()
-  }, children);
-};
-
-var GoATransitionSequence = function GoATransitionSequence(props) {
-  function createTransition(props, children) {
-    return /*#__PURE__*/React.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.cloneElement(parent, {
-        children: props.children
-      });
-    }
-
-    return React.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 = useState(TRANSITION_INIT),
-      _useState2 = _slicedToArray(_useState, 2),
-      transitionIndex = _useState2[0],
-      setTransitionIndex = _useState2[1];
-
-  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.createElement(GoATransitionSequence, {
-    transitions: ['fade-in', 'fade-out'],
-    transitionIndex: transitionIndex,
-    onTransitionComplete: function onTransitionComplete(_index, done) {
-      return done && setTransitionIndex(0);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-root",
-    "data-testid": testId,
-    "data-state": getState()
-  }, /*#__PURE__*/React.createElement(Container, {
-    onClick: onClose
-  }, children), /*#__PURE__*/React.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.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.createElement("div", {
-      "data-testid": testId,
-      style: {
-        padding: "0 1.75rem"
-      }
-    }, children);
-  }
-
-  return /*#__PURE__*/React.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.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.createElement("div", {
-    className: "modal"
-  }, onClick && /*#__PURE__*/React.createElement("div", {
-    className: "modal-close"
-  }, /*#__PURE__*/React.createElement(GoAIconButton, {
-    type: "close",
-    onClick: onClick
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "modal-container"
-  }, children), onClick && /*#__PURE__*/React.createElement("div", {
-    style: {
-      minHeight: '1.75rem'
-    }
-  }));
-}; // ****************
-// Background
-// ****************
-
-
-var Background = function Background(_ref6) {
-  var onClick = _ref6.onClick,
-      testId = _ref6.testId;
-  return /*#__PURE__*/React.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.createElement("textarea", {
-    id: id,
-    name: name,
-    className: "goa-textarea",
-    placeholder: placeholder,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    },
-    value: value
-  });
-};
-
-export { GoAAppVersionHeader, GoABadge, GoAButton, GoACard, GoAEmergencyBadge, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoASuccessBadge, GoATextArea, GoATransition, GoATransitionSequence, GoAWarningBadge };