@spothero/ui 22.3.9-beta.2 → 22.5.0

package/dist/index.esm.js

@@ -4,6 +4,23 @@ import PropTypes, { node as node$1, bool, oneOfType, object, string, func, array
 import { createPortal, render } from 'react-dom';
 import cn from 'classnames';
 
+function _defineProperty$3(e, r, t) {
+  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends$K() {
+  return _extends$K = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$K.apply(null, arguments);
+}
 function ownKeys$1(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -25,6 +42,26 @@ function _objectSpread2$1(e) {
   }
   return e;
 }
+function _objectWithoutProperties$1(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose$y(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose$y(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 function _toPrimitive$1(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -37,7 +74,7 @@ function _toPrimitive$1(t, r) {
 }
 function _toPropertyKey$1(t) {
   var i = _toPrimitive$1(t, "string");
-  return "symbol" == typeof i ? i : String(i);
+  return "symbol" == typeof i ? i : i + "";
 }
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -48,61 +85,6 @@ function _typeof$1(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof$1(o);
 }
-function _defineProperty$3(obj, key, value) {
-  key = _toPropertyKey$1(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _extends$K() {
-  _extends$K = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$K.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose$y(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$1(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$y(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;
-}
 
 /*
 
@@ -6599,7 +6581,7 @@ var DefaultPortal = function DefaultPortal(props) {
   var _children = manager != null && manager.zIndex ? /*#__PURE__*/React.createElement(Container$2, {
     zIndex: manager == null ? void 0 : manager.zIndex
   }, children) : children;
-  return portal.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalContextProvider, {
+  return portal.current ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(PortalContextProvider, {
     value: portal.current
   }, _children), portal.current) : /*#__PURE__*/React.createElement("span", {
     ref: tempNode
@@ -6632,7 +6614,7 @@ var ContainerPortal = function ContainerPortal(props) {
     };
   }, [portal, host]);
   if (host && portal) {
-    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalContextProvider, {
+    return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(PortalContextProvider, {
       value: appendToParentPortal ? portal : null
     }, children), portal);
   }
@@ -14745,7 +14727,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
      * was producing a lot of duplication amongst bundles.
      */
     if (isEnabled(props) && Component) {
-      features.push( /*#__PURE__*/React.createElement(Component, _assign({
+      features.push(/*#__PURE__*/React.createElement(Component, _assign({
         key: name_1
       }, props, {
         visualElement: visualElement
@@ -22297,7 +22279,7 @@ function onlyElements(children) {
   var filtered = [];
   // We use forEach here instead of map as map mutates the component key by preprending `.$`
   Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/isValidElement$1(child)) filtered.push(child);
+    if (/*#__PURE__*/isValidElement$1(child)) filtered.push(child);
   });
   return filtered;
 }
@@ -22460,7 +22442,7 @@ var AnimatePresence = function AnimatePresence(_a) {
   // the same tree between renders
   childrenToRender = childrenToRender.map(function (child) {
     var key = child.key;
-    return exiting.has(key) ? child : ( /*#__PURE__*/React.createElement(PresenceChild, {
+    return exiting.has(key) ? child : (/*#__PURE__*/React.createElement(PresenceChild, {
       key: getChildKey(child),
       isPresent: true,
       presenceAffectsLayout: presenceAffectsLayout
@@ -31937,7 +31919,7 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var SideCar = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = _assign({}, rest, callbacks);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && ( /*#__PURE__*/React.createElement(SideCar, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && (/*#__PURE__*/React.createElement(SideCar, {
     sideCar: effectCar,
     removeScrollBar: removeScrollBar,
     shards: shards,
@@ -31946,9 +31928,9 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     setCallbacks: setCallbacks,
     allowPinchZoom: !!allowPinchZoom,
     lockRef: ref
-  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), _assign({}, containerProps, {
+  })), forwardProps ? (/*#__PURE__*/React.cloneElement(React.Children.only(children), _assign({}, containerProps, {
     ref: containerRef
-  }))) : ( /*#__PURE__*/React.createElement(Container, _assign({}, containerProps, {
+  }))) : (/*#__PURE__*/React.createElement(Container, _assign({}, containerProps, {
     className: className,
     ref: containerRef
   }), children)));
@@ -35810,7 +35792,7 @@ function renderAlerts() {
       var regionType = elementType;
       var container = liveRegions[regionType];
       if (container) {
-        render( /*#__PURE__*/createElement(VisuallyHidden, {
+        render(/*#__PURE__*/createElement(VisuallyHidden, {
           as: "div"
         }, /*#__PURE__*/createElement("div", {
           // The status role is a type of live region and a container whose
@@ -36293,7 +36275,7 @@ function Toaster() {
     (_document$body = document.body) == null ? void 0 : _document$body.appendChild(div);
     portal = div;
   }
-  render( /*#__PURE__*/React.createElement(ToastManager, {
+  render(/*#__PURE__*/React.createElement(ToastManager, {
     notify: this.bindFunctions
   }), portal);
 };
@@ -44172,18 +44154,13 @@ AccordionActionButton.propTypes = {
 
 var _path$5;
 function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends$5.apply(this, arguments);
+    return n;
+  }, _extends$5.apply(null, arguments);
 }
 var SvgX = function SvgX(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$5({}, props, {
@@ -44201,18 +44178,13 @@ var ForwardRef$5 = /*#__PURE__*/forwardRef$1(SvgX);
 
 var _path$4;
 function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
+    return n;
+  }, _extends$4.apply(null, arguments);
 }
 var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({}, props, {
@@ -44230,18 +44202,13 @@ var ForwardRef$4 = /*#__PURE__*/forwardRef$1(SvgInfoCircleFilled);
 
 var _path$3;
 function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends$3.apply(this, arguments);
+    return n;
+  }, _extends$3.apply(null, arguments);
 }
 var SvgExclamationCircleFilled = function SvgExclamationCircleFilled(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({}, props, {
@@ -44259,18 +44226,13 @@ var ForwardRef$3 = /*#__PURE__*/forwardRef$1(SvgExclamationCircleFilled);
 
 var _path$2;
 function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
+    return n;
+  }, _extends$2.apply(null, arguments);
 }
 var SvgCheckmarkCircleFilled = function SvgCheckmarkCircleFilled(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({}, props, {
@@ -44478,18 +44440,13 @@ Tabs.propTypes = {
 
 var _path$1;
 function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
+    return n;
+  }, _extends$1.apply(null, arguments);
 }
 var SvgChevronDown = function SvgChevronDown(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({}, props, {
@@ -47154,6 +47111,8 @@ var templateExports = requireTemplate();
 var template = /*@__PURE__*/getDefaultExportFromCjs(templateExports);
 
 var _excluded$l = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+
+// This code is copied from fe-utils https://github.com/spothero/fe-monorepo/blob/a0e06482e74dcb5502b21c5fbf0a679752a1f8ce/packages/fe-utils/src/environment/environment.js#L391
 function isHighDensityDisplay() {
   if (typeof window === 'undefined') {
     return false;
@@ -47526,7 +47485,9 @@ var controlStyles = {
       margin: 0,
       marginLeft: '1px'
       // marginTop: 2
-    })
+    }),
+    // Styling for async select
+    '.chakra-input__group:has(.fe-ui-async-select__single-value) label': _objectSpread2$1({}, activeLabelStyles)
   },
   _focusWithin: {
     label: _objectSpread2$1({}, activeLabelStyles),
@@ -47791,311 +47752,6 @@ Button.propTypes = {
   buttonValue: PropTypes.string
 };
 
-var _excluded$c = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
-var Radio = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
-  var defaultChecked = _ref.defaultChecked,
-    isChecked = _ref.isChecked,
-    isDisabled = _ref.isDisabled,
-    value = _ref.value,
-    helperText = _ref.helperText,
-    children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties$1(_ref, _excluded$c);
-  var helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
-  return /*#__PURE__*/React__default.createElement(Radio$1, _extends$K({
-    ref: ref,
-    defaultChecked: defaultChecked,
-    isChecked: isChecked,
-    isDisabled: isDisabled,
-    isFocusable: !isDisabled,
-    value: value,
-    size: size
-  }, props), children, helperText && /*#__PURE__*/React__default.createElement(Box, {
-    color: "gray.600",
-    fontSize: helperTextSize
-  }, helperText));
-});
-Radio.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  defaultChecked: PropTypes.bool,
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  helperText: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
-};
-
-var _excluded$b = ["label", "errorMessage", "defaultValue", "isDisabled", "isInvalid", "isRequired", "name", "onChange", "value", "children", "direction"];
-var RadioGroup = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
-  var label = _ref.label,
-    errorMessage = _ref.errorMessage,
-    defaultValue = _ref.defaultValue,
-    isDisabled = _ref.isDisabled,
-    isInvalid = _ref.isInvalid,
-    isRequired = _ref.isRequired,
-    name = _ref.name,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    children = _ref.children,
-    direction = _ref.direction,
-    props = _objectWithoutProperties$1(_ref, _excluded$b);
-  return /*#__PURE__*/React__default.createElement(FormControl$1, {
-    isInvalid: isInvalid,
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    errorMessage: errorMessage,
-    label: label,
-    inputId: props.id,
-    isFieldset: true
-  }, /*#__PURE__*/React__default.createElement(RadioGroup$1, _extends$K({
-    ref: ref,
-    defaultValue: defaultValue,
-    name: name,
-    onChange: onChange,
-    value: value
-  }, props), /*#__PURE__*/React__default.createElement(Stack, {
-    direction: direction ? direction : 'column',
-    spacing: direction === 'row' ? 8 : 4
-  }, children)));
-});
-RadioGroup.propTypes = {
-  children: PropTypes.node,
-  defaultValue: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  errorMessage: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isInvalid: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  direction: PropTypes.oneOf(['row', 'column'])
-};
-
-var _excluded$a = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size"];
-var SelectionCard = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
-  var isChecked = _ref.isChecked,
-    isDisabled = _ref.isDisabled,
-    value = _ref.value,
-    helperText = _ref.helperText,
-    expandableChildren = _ref.expandableChildren,
-    defaultChecked = _ref.defaultChecked,
-    isRadio = _ref.isRadio,
-    label = _ref.label,
-    isExpandable = _ref.isExpandable,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties$1(_ref, _excluded$a);
-  var Component = isRadio ? Radio : Checkbox;
-  var expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
-  var hasExpandableContent = isExpandable && isChecked && expandableChildren;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    paddingBottom: hasExpandableContent ? 3 : 0,
-    borderRadius: "lg",
-    borderColor: isChecked ? 'primary.default' : 'gray.medium',
-    borderWidth: "1px",
-    _hover: {
-      borderColor: isDisabled ? 'gray.medium' : 'primary.default'
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    borderColor: "gray.medium",
-    borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__default.createElement(Component, _extends$K({
-    ref: ref,
-    isChecked: isChecked,
-    isDisabled: isDisabled,
-    isFocusable: !isDisabled,
-    value: value,
-    defaultChecked: defaultChecked,
-    helperText: helperText,
-    size: size,
-    width: "100%",
-    paddingX: 4,
-    paddingY: 3
-  }, props), label)), hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
-    color: "gray.600",
-    fontSize: expandableTextSize,
-    paddingTop: 3,
-    paddingX: 4
-  }, expandableChildren));
-});
-SelectionCard.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  expandableChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  defaultChecked: PropTypes.bool,
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  helperText: PropTypes.string,
-  isRadio: PropTypes.bool,
-  isExpandable: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
-};
-
-var _excluded$9 = ["variant", "colorScheme"];
-var Divider = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
-  var variant = _ref.variant,
-    borderColor = _ref.colorScheme,
-    props = _objectWithoutProperties$1(_ref, _excluded$9);
-  return /*#__PURE__*/React__default.createElement(Divider$1, _extends$K({}, colorScheme[borderColor], {
-    variant: variant
-  }, props, {
-    ref: ref
-  }));
-});
-Divider.propTypes = {
-  /** Color scheme used */
-  colorScheme: PropTypes.oneOf(['low', 'medium']),
-  /** The styling that will be applied to the HR tag */
-  variant: PropTypes.oneOf(['solid', 'dashed'])
-};
-Divider.defaultProps = {
-  variant: 'solid',
-  colorScheme: 'medium'
-};
-
-var _excluded$8 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
-var Textarea = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
-  var label = _ref.label,
-    helperText = _ref.helperText,
-    errorMessage = _ref.errorMessage,
-    isInvalid = _ref.isInvalid,
-    isDisabled = _ref.isDisabled,
-    isRequired = _ref.isRequired,
-    isOptional = _ref.isOptional,
-    customRequiredText = _ref.customRequiredText,
-    props = _objectWithoutProperties$1(_ref, _excluded$8);
-  var classes = cn({
-    'FormElement-contains-error': isInvalid
-  });
-  return /*#__PURE__*/React__default.createElement(FormControl$1, {
-    isInvalid: isInvalid,
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    isOptional: isOptional,
-    errorMessage: errorMessage,
-    helperText: helperText,
-    label: label,
-    inputId: props.id,
-    customRequiredText: customRequiredText
-  }, /*#__PURE__*/React__default.createElement(Textarea$1, _extends$K({
-    ref: ref,
-    className: classes
-  }, props)));
-});
-Textarea.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  errorMessage: PropTypes.string,
-  isInvalid: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isOptional: PropTypes.bool,
-  customRequiredText: PropTypes.string
-};
-
-var _excluded$7 = ["children"];
-var Popover = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  var children = props.children,
-    rest = _objectWithoutProperties$1(props, _excluded$7);
-  return /*#__PURE__*/React__default.createElement(Popover$1, _extends$K({}, rest, {
-    ref: ref
-  }), Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/cloneElement(child, {
-      ref: ref,
-      variant: props.variant,
-      key: "Popover-child-".concat(index)
-    });
-  }));
-});
-Popover.propTypes = {
-  /** React children */
-  children: PropTypes.node,
-  /** Styles the Popover */
-  variant: PropTypes.oneOf(['light', 'dark'])
-};
-
-var arrowStyles = function arrowStyles(_ref) {
-  var variant = _ref.variant;
-  return {
-    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
-  };
-};
-
-var PopoverArrow = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(PopoverArrow$1, _extends$K({
-    ref: ref
-  }, props, arrowStyles(props)));
-});
-
-var pseudoStyles = function pseudoStyles(variant) {
-  return {
-    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
-  };
-};
-var closeButtonStyles = function closeButtonStyles(_ref) {
-  var variant = _ref.variant;
-  return {
-    color: variant === 'dark' ? 'white' : 'black',
-    fontSize: '0.5rem',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 4,
-    borderTopRightRadius: 4,
-    _hover: pseudoStyles(variant),
-    _focus: _objectSpread2$1(_objectSpread2$1({}, pseudoStyles(variant)), {}, {
-      boxShadow: 'outline'
-    })
-  };
-};
-
-var PopoverCloseButton = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(PopoverCloseButton$1, _extends$K({
-    ref: ref
-  }, props, closeButtonStyles(props)));
-});
-
-var _excluded$6 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
-var PopoverContent = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  var header = props.header,
-    variant = props.variant,
-    children = props.children,
-    hideCloseButton = props.hideCloseButton,
-    hideArrow = props.hideArrow,
-    popoverBodyProps = props.popoverBodyProps,
-    rest = _objectWithoutProperties$1(props, _excluded$6);
-  return /*#__PURE__*/React__default.createElement(PopoverContent$1, _extends$K({}, rest, {
-    ref: ref
-  }), hideArrow ? null : /*#__PURE__*/React__default.createElement(PopoverArrow, {
-    variant: variant
-  }), hideCloseButton ? null : /*#__PURE__*/React__default.createElement(PopoverCloseButton, {
-    variant: variant
-  }), header ? /*#__PURE__*/React__default.createElement(PopoverHeader, null, header) : null, /*#__PURE__*/React__default.createElement(PopoverBody, popoverBodyProps, children));
-});
-PopoverContent.propTypes = {
-  /** React children */
-  children: PropTypes.node,
-  /** Whether or not to hide the close button */
-  hideCloseButton: PropTypes.bool,
-  /** Whether or not to hide the arrow */
-  hideArrow: PropTypes.bool,
-  /** Styles the Popover */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** The string or node for the header (optional) */
-  header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /** Props to pass to the PopoverBody */
-  popoverBodyProps: PropTypes.object
-};
-PopoverContent.defaultProps = {
-  variant: 'light',
-  hideCloseButton: false,
-  hideArrow: false
-};
-
 var isBrowser$2 = typeof document !== 'undefined';
 var syncFallback = function syncFallback(create) {
   return create();
@@ -49900,7 +49556,7 @@ var GroupHeading = function GroupHeading(props) {
     }, className)
   }, innerProps));
 };
-var _excluded$5 = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
+var _excluded$c = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
 var inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     value = _ref.value,
@@ -49957,7 +49613,7 @@ var Input = function Input(props) {
     isDisabled = _cleanCommonProps.isDisabled,
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
-    innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$5);
+    innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$c);
   return jsx("div", {
     className: cx({
       'input-container': true
@@ -50786,10 +50442,10 @@ var createFilter = function createFilter(config) {
     return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1;
   };
 };
-var _excluded$4 = ["innerRef"];
+var _excluded$b = ["innerRef"];
 function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$b);
 
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
@@ -52698,7 +52354,7 @@ var Select = /*#__PURE__*/function (_Component) {
 }(Component);
 Select.defaultProps = defaultProps;
 
-var _excluded$3 = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
+var _excluded$a = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref) {
   var _ref$defaultInputValu = _ref.defaultInputValue,
     defaultInputValue = _ref$defaultInputValu === void 0 ? '' : _ref$defaultInputValu,
@@ -52713,7 +52369,7 @@ function useStateManager(_ref) {
     propsOnMenuClose = _ref.onMenuClose,
     propsOnMenuOpen = _ref.onMenuOpen,
     propsValue = _ref.value,
-    restSelectProps = _objectWithoutProperties(_ref, _excluded$3);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$a);
   var _useState = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
     _useState2 = _slicedToArray(_useState, 2),
     stateInputValue = _useState2[0],
@@ -52765,7 +52421,7 @@ function useStateManager(_ref) {
   });
 }
 
-var _excluded$2 = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
+var _excluded$9 = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
 function useAsync(_ref) {
   var _ref$defaultOptions = _ref.defaultOptions,
     propsDefaultOptions = _ref$defaultOptions === void 0 ? false : _ref$defaultOptions,
@@ -52778,7 +52434,7 @@ function useAsync(_ref) {
     propsOnInputChange = _ref.onInputChange,
     _ref$filterOption = _ref.filterOption,
     filterOption = _ref$filterOption === void 0 ? null : _ref$filterOption,
-    restSelectProps = _objectWithoutProperties(_ref, _excluded$2);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$9);
   var propsInputValue = restSelectProps.inputValue;
   var lastRequest = useRef(undefined);
   var mounted = useRef(false);
@@ -52905,18 +52561,13 @@ var AsyncSelect = /*#__PURE__*/forwardRef$1(function (props, ref) {
 
 var _path, _path2;
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 var SvgXCircle = function SvgXCircle(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
@@ -52935,6 +52586,485 @@ var SvgXCircle = function SvgXCircle(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef$1(SvgXCircle);
 
+var AutoSuggestSelect$1 = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    helperText = _ref.helperText,
+    errorMessage = _ref.errorMessage,
+    isInvalid = _ref.isInvalid,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    getOptions = _ref.getOptions,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue,
+    leftElement = _ref.leftElement,
+    leftElementStyles = _ref.leftElementStyles;
+  var _useTheme = useTheme(),
+    colors = _useTheme.colors,
+    fontSizes = _useTheme.fontSizes,
+    sizes = _useTheme.sizes;
+  var handleChange = function handleChange(selectedOption) {
+    onChange(selectedOption);
+  };
+  var baseText = {
+    fontSize: fontSizes.base,
+    color: colors.black
+  };
+
+  /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
+  var customStyles = {
+    menu: function menu(provided) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), baseText);
+    },
+    control: function control(provided, state) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
+        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200'],
+        borderWidth: '1px',
+        boxShadow: 'none',
+        '&:hover': {
+          borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['300']
+        }
+      });
+    },
+    input: function input(provided, state) {
+      return _objectSpread2$1(_objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, provided), baseText), {}, {
+        paddingBottom: sizes['2'],
+        paddingTop: sizes['5.5'],
+        paddingRight: sizes['3'],
+        backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent'
+      }, leftElement ? {
+        paddingLeft: sizes['10']
+      } : {
+        paddingLeft: sizes['3']
+      }), {}, {
+        cursor: state.isDisabled ? 'not-allowed' : !state.hasValue ? 'text' : 'auto'
+      });
+    },
+    placeholder: function placeholder(provided) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
+        padding: sizes['2'],
+        fontSize: fontSizes.base,
+        color: colors.gray['600']
+      });
+    },
+    singleValue: function singleValue(provided) {
+      return _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, provided), baseText), {}, {
+        paddingBottom: sizes['2'],
+        paddingTop: sizes['5.5'],
+        paddingRight: sizes['3']
+      }, leftElement ? {
+        paddingLeft: sizes['10']
+      } : {
+        paddingLeft: sizes['3']
+      });
+    },
+    option: function option(provided, state) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
+        backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
+        color: colors.black
+      });
+    },
+    clearIndicator: function clearIndicator(provided) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
+        color: colors.gray['600']
+      });
+    },
+    dropdownIndicator: function dropdownIndicator(provided) {
+      return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
+        color: colors.gray['600']
+      });
+    }
+  };
+  var clearIndicatorStyles = {
+    width: sizes['5'],
+    display: 'flex',
+    marginRight: sizes['3'],
+    color: colors.gray['600'],
+    cursor: 'pointer'
+  };
+
+  /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
+  var ClearIndicator = function ClearIndicator(_ref2) {
+    var innerRef = _ref2.innerRef,
+      innerProps = _ref2.innerProps;
+    return /*#__PURE__*/React__default.createElement("div", _extends$K({
+      style: clearIndicatorStyles,
+      ref: innerRef
+    }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
+  };
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    helperText: helperText,
+    label: label,
+    inputId: id,
+    leftElement: leftElement,
+    leftElementStyles: leftElementStyles
+  }, /*#__PURE__*/React__default.createElement(AsyncSelect, {
+    classNamePrefix: "fe-ui-async-select",
+    closeMenuOnSelect: true,
+    isClearable: true,
+    cacheOptions: true,
+    components: {
+      DropdownIndicator: function DropdownIndicator() {
+        return null;
+      },
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      ClearIndicator: ClearIndicator
+    },
+    openMenuOnClick: false,
+    loadOptions: getOptions,
+    onChange: handleChange,
+    isDisabled: isDisabled,
+    id: id,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    styles: customStyles,
+    ref: ref
+  }));
+});
+AutoSuggestSelect$1.propTypes = {
+  /** ID applied to the select and label */
+  id: PropTypes.string.isRequired,
+  /** Label that describes the select */
+  label: PropTypes.string,
+  /** Text to use as placeholder in the input */
+  placeholder: PropTypes.string,
+  /** Optional helper text displayed below the select */
+  helperText: PropTypes.string,
+  /** Error message that would display under the select */
+  errorMessage: PropTypes.string,
+  /** Boolean that sets whether the select is valid */
+  isInvalid: PropTypes.bool,
+  /** Boolean that sets whether the select is disabled */
+  isDisabled: PropTypes.bool,
+  /** Boolean that sets whether the select is required */
+  isRequired: PropTypes.bool,
+  /** Function that is called with the value typed into the input that returns a list of options for the select */
+  getOptions: PropTypes.func.isRequired,
+  /** Function that is called when an option is selected, it returns the label and value of the selection */
+  onChange: PropTypes.func.isRequired,
+  // This prop is added to work around error: 'innerRef' is missing in props validation react/prop-types
+  // eslint-disable-next-line react/no-unused-prop-types
+  innerRef: PropTypes.object,
+  // This prop is added to work around error: 'innerProps' is missing in props validation react/prop-types
+  // eslint-disable-next-line react/no-unused-prop-types
+  innerProps: PropTypes.object,
+  // Element to display to the left of the input
+  leftElement: PropTypes.element,
+  // Styling of leftElement
+  leftElementStyles: PropTypes.object
+};
+
+var _excluded$8 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
+var Radio = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var defaultChecked = _ref.defaultChecked,
+    isChecked = _ref.isChecked,
+    isDisabled = _ref.isDisabled,
+    value = _ref.value,
+    helperText = _ref.helperText,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    props = _objectWithoutProperties$1(_ref, _excluded$8);
+  var helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+  return /*#__PURE__*/React__default.createElement(Radio$1, _extends$K({
+    ref: ref,
+    defaultChecked: defaultChecked,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isFocusable: !isDisabled,
+    value: value,
+    size: size
+  }, props), children, helperText && /*#__PURE__*/React__default.createElement(Box, {
+    color: "gray.600",
+    fontSize: helperTextSize
+  }, helperText));
+});
+Radio.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  defaultChecked: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  helperText: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+var _excluded$7 = ["label", "errorMessage", "defaultValue", "isDisabled", "isInvalid", "isRequired", "name", "onChange", "value", "children", "direction"];
+var RadioGroup = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var label = _ref.label,
+    errorMessage = _ref.errorMessage,
+    defaultValue = _ref.defaultValue,
+    isDisabled = _ref.isDisabled,
+    isInvalid = _ref.isInvalid,
+    isRequired = _ref.isRequired,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    children = _ref.children,
+    direction = _ref.direction,
+    props = _objectWithoutProperties$1(_ref, _excluded$7);
+  return /*#__PURE__*/React__default.createElement(FormControl$1, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    label: label,
+    inputId: props.id,
+    isFieldset: true
+  }, /*#__PURE__*/React__default.createElement(RadioGroup$1, _extends$K({
+    ref: ref,
+    defaultValue: defaultValue,
+    name: name,
+    onChange: onChange,
+    value: value
+  }, props), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: direction ? direction : 'column',
+    spacing: direction === 'row' ? 8 : 4
+  }, children)));
+});
+RadioGroup.propTypes = {
+  children: PropTypes.node,
+  defaultValue: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  errorMessage: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  direction: PropTypes.oneOf(['row', 'column'])
+};
+
+var _excluded$6 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size"];
+var SelectionCard = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var isChecked = _ref.isChecked,
+    isDisabled = _ref.isDisabled,
+    value = _ref.value,
+    helperText = _ref.helperText,
+    expandableChildren = _ref.expandableChildren,
+    defaultChecked = _ref.defaultChecked,
+    isRadio = _ref.isRadio,
+    label = _ref.label,
+    isExpandable = _ref.isExpandable,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    props = _objectWithoutProperties$1(_ref, _excluded$6);
+  var Component = isRadio ? Radio : Checkbox;
+  var expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+  var hasExpandableContent = isExpandable && isChecked && expandableChildren;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    paddingBottom: hasExpandableContent ? 3 : 0,
+    borderRadius: "lg",
+    borderColor: isChecked ? 'primary.default' : 'gray.medium',
+    borderWidth: "1px",
+    _hover: {
+      borderColor: isDisabled ? 'gray.medium' : 'primary.default'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    borderColor: "gray.medium",
+    borderBottomWidth: hasExpandableContent ? '1px' : 0
+  }, /*#__PURE__*/React__default.createElement(Component, _extends$K({
+    ref: ref,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isFocusable: !isDisabled,
+    value: value,
+    defaultChecked: defaultChecked,
+    helperText: helperText,
+    size: size,
+    width: "100%",
+    paddingX: 4,
+    paddingY: 3
+  }, props), label)), hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
+    color: "gray.600",
+    fontSize: expandableTextSize,
+    paddingTop: 3,
+    paddingX: 4
+  }, expandableChildren));
+});
+SelectionCard.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  expandableChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  defaultChecked: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  helperText: PropTypes.string,
+  isRadio: PropTypes.bool,
+  isExpandable: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+var _excluded$5 = ["variant", "colorScheme"];
+var Divider = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var variant = _ref.variant,
+    borderColor = _ref.colorScheme,
+    props = _objectWithoutProperties$1(_ref, _excluded$5);
+  return /*#__PURE__*/React__default.createElement(Divider$1, _extends$K({}, colorScheme[borderColor], {
+    variant: variant
+  }, props, {
+    ref: ref
+  }));
+});
+Divider.propTypes = {
+  /** Color scheme used */
+  colorScheme: PropTypes.oneOf(['low', 'medium']),
+  /** The styling that will be applied to the HR tag */
+  variant: PropTypes.oneOf(['solid', 'dashed'])
+};
+Divider.defaultProps = {
+  variant: 'solid',
+  colorScheme: 'medium'
+};
+
+var _excluded$4 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
+var Textarea = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    errorMessage = _ref.errorMessage,
+    isInvalid = _ref.isInvalid,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    isOptional = _ref.isOptional,
+    customRequiredText = _ref.customRequiredText,
+    props = _objectWithoutProperties$1(_ref, _excluded$4);
+  var classes = cn({
+    'FormElement-contains-error': isInvalid
+  });
+  return /*#__PURE__*/React__default.createElement(FormControl$1, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isOptional: isOptional,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    inputId: props.id,
+    customRequiredText: customRequiredText
+  }, /*#__PURE__*/React__default.createElement(Textarea$1, _extends$K({
+    ref: ref,
+    className: classes
+  }, props)));
+});
+Textarea.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  errorMessage: PropTypes.string,
+  isInvalid: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isOptional: PropTypes.bool,
+  customRequiredText: PropTypes.string
+};
+
+var _excluded$3 = ["children"];
+var Popover = /*#__PURE__*/forwardRef$1(function (props, ref) {
+  var children = props.children,
+    rest = _objectWithoutProperties$1(props, _excluded$3);
+  return /*#__PURE__*/React__default.createElement(Popover$1, _extends$K({}, rest, {
+    ref: ref
+  }), Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/cloneElement(child, {
+      ref: ref,
+      variant: props.variant,
+      key: "Popover-child-".concat(index)
+    });
+  }));
+});
+Popover.propTypes = {
+  /** React children */
+  children: PropTypes.node,
+  /** Styles the Popover */
+  variant: PropTypes.oneOf(['light', 'dark'])
+};
+
+var arrowStyles = function arrowStyles(_ref) {
+  var variant = _ref.variant;
+  return {
+    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
+  };
+};
+
+var PopoverArrow = /*#__PURE__*/forwardRef$1(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(PopoverArrow$1, _extends$K({
+    ref: ref
+  }, props, arrowStyles(props)));
+});
+
+var pseudoStyles = function pseudoStyles(variant) {
+  return {
+    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
+  };
+};
+var closeButtonStyles = function closeButtonStyles(_ref) {
+  var variant = _ref.variant;
+  return {
+    color: variant === 'dark' ? 'white' : 'black',
+    fontSize: '0.5rem',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    borderTopRightRadius: 4,
+    _hover: pseudoStyles(variant),
+    _focus: _objectSpread2$1(_objectSpread2$1({}, pseudoStyles(variant)), {}, {
+      boxShadow: 'outline'
+    })
+  };
+};
+
+var PopoverCloseButton = /*#__PURE__*/forwardRef$1(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(PopoverCloseButton$1, _extends$K({
+    ref: ref
+  }, props, closeButtonStyles(props)));
+});
+
+var _excluded$2 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
+var PopoverContent = /*#__PURE__*/forwardRef$1(function (props, ref) {
+  var header = props.header,
+    variant = props.variant,
+    children = props.children,
+    hideCloseButton = props.hideCloseButton,
+    hideArrow = props.hideArrow,
+    popoverBodyProps = props.popoverBodyProps,
+    rest = _objectWithoutProperties$1(props, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(PopoverContent$1, _extends$K({}, rest, {
+    ref: ref
+  }), hideArrow ? null : /*#__PURE__*/React__default.createElement(PopoverArrow, {
+    variant: variant
+  }), hideCloseButton ? null : /*#__PURE__*/React__default.createElement(PopoverCloseButton, {
+    variant: variant
+  }), header ? /*#__PURE__*/React__default.createElement(PopoverHeader, null, header) : null, /*#__PURE__*/React__default.createElement(PopoverBody, popoverBodyProps, children));
+});
+PopoverContent.propTypes = {
+  /** React children */
+  children: PropTypes.node,
+  /** Whether or not to hide the close button */
+  hideCloseButton: PropTypes.bool,
+  /** Whether or not to hide the arrow */
+  hideArrow: PropTypes.bool,
+  /** Styles the Popover */
+  variant: PropTypes.oneOf(['light', 'dark']),
+  /** The string or node for the header (optional) */
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  /** Props to pass to the PopoverBody */
+  popoverBodyProps: PropTypes.object
+};
+PopoverContent.defaultProps = {
+  variant: 'light',
+  hideCloseButton: false,
+  hideArrow: false
+};
+
 var AutoSuggestSelect = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var id = _ref.id,
     label = _ref.label,
@@ -53440,5 +53570,5 @@ Menu.propTypes = {
   children: PropTypes.node
 };
 
-export { Accordion, AccordionActionButton, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, AspectRatio, AutoSuggestSelect, Badge$1 as Badge, Input$4 as BasicInput, Textarea$1 as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, Circle$1 as Circle, Code, Collapse, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, Drawer$1 as DrawerContainer, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Fade, Flex, Grid, GridItem, HStack, Heading, Icon, Image$1 as Image, Input$2 as Input, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListItem, Loader, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList$1 as MenuList, MenuOptionGroup, Modal, ModalBody, ModalFooter, ModalHeader, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, Portal, Progress, Radio, RadioGroup, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input$1 as RefreshedInput, Select$1 as RefreshedSelectInput, ScaleFade, Select$2 as Select, SelectionCard, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Spinner, Square, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, ToggleButtonGroup, Tooltip, Tr, VStack, createIcon, keyframes$3 as keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken };
+export { Accordion, AccordionActionButton, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, AspectRatio, AutoSuggestSelect, Badge$1 as Badge, Input$4 as BasicInput, Textarea$1 as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, Circle$1 as Circle, Code, Collapse, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, Drawer$1 as DrawerContainer, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Fade, Flex, Grid, GridItem, HStack, Heading, Icon, Image$1 as Image, Input$2 as Input, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListItem, Loader, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList$1 as MenuList, MenuOptionGroup, Modal, ModalBody, ModalFooter, ModalHeader, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, Portal, Progress, Radio, RadioGroup, AutoSuggestSelect$1 as RefreshedAutoSuggestSelect, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input$1 as RefreshedInput, Select$1 as RefreshedSelectInput, ScaleFade, Select$2 as Select, SelectionCard, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Spinner, Square, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, ToggleButtonGroup, Tooltip, Tr, VStack, createIcon, keyframes$3 as keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken };
 //# sourceMappingURL=index.esm.js.map