@spothero/ui 25.11.0 → 25.15.0-beta.1

package/dist/index.cjs.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var React = require('react');
 var react = require('@chakra-ui/react');
+var React = require('react');
+var framerMotion = require('framer-motion');
 var merge = require('lodash/merge');
 var PropTypes = require('prop-types');
 var cn = require('classnames');
@@ -9,7 +10,6 @@ var react$1 = require('@emotion/react');
 var anatomy = require('@chakra-ui/anatomy');
 var template = require('lodash/template');
 var AsyncSelect = require('react-select/async');
-var framerMotion = require('framer-motion');
 var Select$2 = require('react-select');
 var Creatable = require('react-select/creatable');
 
@@ -42,248 +42,6 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 var Select__default = /*#__PURE__*/_interopDefault(Select$2);
 var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _extends$6() {
-  return _extends$6 = 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$6.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _taggedTemplateLiteral(e, t) {
-  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
-    raw: {
-      value: Object.freeze(t)
-    }
-  }));
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-var header$1 = _ref => {
-  let {
-    hideCloseButton,
-    hasHeader
-  } = _ref;
-  return {
-    padding: !hideCloseButton || hasHeader ? 4 : 2,
-    fontSize: 'xl',
-    fontWeight: 'semibold',
-    // If just close button, still have 'header' section at top
-    minHeight: hasHeader || hideCloseButton ? null : 12
-  };
-};
-
-/**
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @param {boolean} isOpen - Whether or not the Modal is open
- * @param {React.ReactNode} children - The header text of the modal
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
- * @param {object} [contentStyling] - Style props to be passed into the modal content
- * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
- * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
- * @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
- * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
- * @returns {React.ReactElement} - The Modal component
- */
-const Modal = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    hasHeader,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  return /*#__PURE__*/React__namespace.default.createElement(react.Modal, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/React__namespace.default.createElement(react.ModalOverlay, overlayProps), /*#__PURE__*/React__namespace.default.createElement(react.ModalContent, _extends$6({
-    "data-testid": "ModalContent"
-  }, contentStyling), !hasHeader ? /*#__PURE__*/React__namespace.default.createElement(react.Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(react.ModalCloseButton, {
-    "data-testid": "ModalClose-button"
-  }), children));
-});
-Modal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes__default.default.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes__default.default.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes__default.default.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes__default.default.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes__default.default.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes__default.default.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes__default.default.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes__default.default.object
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const fadeIn = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n     0% { opacity: 0%; }\n     100% { opacity: 100%; }\n\n"])));
-const fadeOut = react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; }\n    100% { opacity: 0% }\n"])));
-const fadeInAndEnlarge = react.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n     0% { opacity: 0%; transform: scale(0.9);}\n     100% { opacity: 100%; transform: scale(1);}\n"])));
-const fadeOutAndShrink = react.keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; transform: scale(1); }\n    100% { opacity: 0%; transform: scale(0.9); }\n"])));
-const fadeInAndSlideUp = react.keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n     0% { opacity: 0%; transform: translateY(2rem) scale(1);}\n     100% { opacity: 100%; transform: translateY(0) scale(1);}\n"])));
-const fadeOutAndSlideDown = react.keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; transform: translateY(0) scale(1); }\n    100% { opacity: 0%; transform: translateY(2rem) scale(1); }\n"])));
-
-// This is a modified version of our Modal that will always be mounted, even when it is closed.
-// We need this for things like Stripe where payment Elements need to be mounted to get a token on checkout
-/**
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @param {boolean} isOpen - Whether or not the Modal is open
- * @param {React.ReactNode} children - The header text of the modal
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
- * @param {object} [contentStyling] - Style props to be passed into the modal content
- * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
- * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
- * @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
- * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
- * @returns {React.ReactElement} - The Modal component
- */
-const AlwaysMountedModal = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    onCloseComplete,
-    hasHeader,
-    isOpen,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  const [internalOpen, setInternalOpen] = React.useState(isOpen);
-  React.useEffect(() => {
-    if (!isOpen) {
-      setTimeout(() => {
-        setInternalOpen(false);
-        onCloseComplete();
-        // Want this to be a bit shorter than fade out animation
-      }, 175);
-    } else {
-      setInternalOpen(true);
-    }
-  }, [isOpen]);
-  const fadeInAnimation = isMobile ? fadeInAndSlideUp : fadeInAndEnlarge;
-  const fadeOutAnimation = isMobile ? fadeOutAndSlideDown : fadeOutAndShrink;
-  return /*#__PURE__*/React__namespace.default.createElement(react.Modal, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    blockScrollOnMount: isOpen,
-    isOpen: true,
-    ref: ref
-  }), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 3,
-    as: framerMotion.motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.ModalOverlay, overlayProps)), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 4,
-    as: framerMotion.motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.ModalContent, _extends$6({}, contentStyling, {
-    animation: "".concat(isOpen ? fadeInAnimation : fadeOutAnimation, " 0.2s ease-in-out")
-  }), !hasHeader ? /*#__PURE__*/React__namespace.default.createElement(react.Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(react.ModalCloseButton, null), children)));
-});
-AlwaysMountedModal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes__default.default.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes__default.default.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes__default.default.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes__default.default.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes__default.default.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes__default.default.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes__default.default.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes__default.default.object
-};
-
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -1480,6 +1238,80 @@ function requireJsxRuntime() {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+const header$1 = ({ hideCloseButton, hasHeader }) => ({
+    padding: !hideCloseButton || hasHeader ? 4 : 2,
+    fontSize: 'xl',
+    fontWeight: 'semibold',
+    // If just close button, still have 'header' section at top
+    minHeight: hasHeader || hideCloseButton ? undefined : 12,
+});
+
+const ChakraModalWithRef$1 = react.Modal;
+const Modal = React.forwardRef(({ children, isMobile = false, contentStyling = {}, overlayProps = {}, ...props }, ref) => {
+    const { hasHeader, hideCloseButton } = props;
+    return (jsxRuntimeExports.jsxs(ChakraModalWithRef$1, { motionPreset: isMobile ? 'slideInBottom' : 'scale', ...props, ref: ref, children: [jsxRuntimeExports.jsx(react.ModalOverlay, { ...overlayProps }), jsxRuntimeExports.jsxs(react.ModalContent, { "data-testid": "ModalContent", ...contentStyling, children: [!hasHeader ? (jsxRuntimeExports.jsx(react.Box, { ...header$1({
+                            hasHeader,
+                            hideCloseButton,
+                        }) })) : null, hideCloseButton ? null : (jsxRuntimeExports.jsx(react.ModalCloseButton, { "data-testid": "ModalClose-button" })), children] })] }));
+});
+Modal.displayName = 'Modal';
+
+const ChakraModalWithRef = react.Modal;
+const fadeIn = react.keyframes `
+     0% { opacity: 0%; }
+     100% { opacity: 100%; }
+
+`;
+const fadeOut = react.keyframes `
+    0% { opacity: 100%; }
+    100% { opacity: 0% }
+`;
+const fadeInAndEnlarge = react.keyframes `
+     0% { opacity: 0%; transform: scale(0.9);}
+     100% { opacity: 100%; transform: scale(1);}
+`;
+const fadeOutAndShrink = react.keyframes `
+    0% { opacity: 100%; transform: scale(1); }
+    100% { opacity: 0%; transform: scale(0.9); }
+`;
+const fadeInAndSlideUp = react.keyframes `
+     0% { opacity: 0%; transform: translateY(2rem) scale(1);}
+     100% { opacity: 100%; transform: translateY(0) scale(1);}
+`;
+const fadeOutAndSlideDown = react.keyframes `
+    0% { opacity: 100%; transform: translateY(0) scale(1); }
+    100% { opacity: 0%; transform: translateY(2rem) scale(1); }
+`;
+const AlwaysMountedModal = React.forwardRef(({ children, onCloseComplete, isOpen, isMobile = false, contentStyling = {}, overlayProps = {}, ...props }, ref) => {
+    const { hasHeader, hideCloseButton } = props;
+    const [internalOpen, setInternalOpen] = React.useState(isOpen);
+    const onCloseCompleteRef = React.useRef(onCloseComplete);
+    React.useEffect(() => {
+        onCloseCompleteRef.current = onCloseComplete;
+    });
+    React.useEffect(() => {
+        if (!isOpen) {
+            const timeoutId = setTimeout(() => {
+                setInternalOpen(false);
+                onCloseCompleteRef.current?.();
+                // Want this to be a bit shorter than fade out animation
+            }, 175);
+            return () => clearTimeout(timeoutId);
+        }
+        setInternalOpen(true);
+        return undefined;
+    }, [isOpen]);
+    const fadeInAnimation = isMobile ? fadeInAndSlideUp : fadeInAndEnlarge;
+    const fadeOutAnimation = isMobile
+        ? fadeOutAndSlideDown
+        : fadeOutAndShrink;
+    return (jsxRuntimeExports.jsxs(ChakraModalWithRef, { motionPreset: isMobile ? 'slideInBottom' : 'scale', ...props, blockScrollOnMount: isOpen, isOpen: true, ref: ref, children: [jsxRuntimeExports.jsx(react.Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 3, as: framerMotion.motion.div, position: "relative", children: jsxRuntimeExports.jsx(react.ModalOverlay, { ...overlayProps }) }), jsxRuntimeExports.jsx(react.Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 4, as: framerMotion.motion.div, position: "relative", children: jsxRuntimeExports.jsxs(react.ModalContent, { ...contentStyling, animation: `${isOpen ? fadeInAnimation : fadeOutAnimation} 0.2s ease-in-out`, children: [!hasHeader ? (jsxRuntimeExports.jsx(react.Box, { ...header$1({
+                                hasHeader,
+                                hideCloseButton,
+                            }) })) : null, hideCloseButton ? null : jsxRuntimeExports.jsx(react.ModalCloseButton, {}), children] }) })] }));
+});
+AlwaysMountedModal.displayName = 'AlwaysMountedModal';
+
 const container = {
     base: '100%', // 640px
     tablet: '45rem', // 720px
@@ -2206,6 +2038,22 @@ const variants$c = {
             bg: activeSecondaryColor,
         },
     },
+    iconSecondary: {
+        bg: 'white',
+        borderColor: 'gray.medium',
+        color: 'black',
+        minW: 'unset',
+        px: 3,
+        py: 3,
+        _hover: {
+            bg: hoverSecondaryColor,
+            color: 'black',
+            ...disabledButtonHoverStyle,
+        },
+        _active: {
+            bg: activeSecondaryColor,
+        },
+    },
     secondaryOnDark: {
         bg: 'none',
         borderColor: 'white',
@@ -2244,6 +2092,32 @@ const variants$c = {
             },
         },
     },
+    iconTertiary: {
+        bg: 'none',
+        borderWidth: 'none',
+        borderRadius: 'unset',
+        color: 'black',
+        h: 'unset',
+        m: 'unset',
+        minW: 'unset',
+        px: 2,
+        py: 2,
+        lineHeight: 1,
+        _disabled: {
+            bg: 'none',
+            color: 'gray.dark',
+        },
+        _hover: {
+            _disabled: {
+                color: 'gray.dark',
+            },
+        },
+        _active: {
+            _disabled: {
+                color: 'gray.dark',
+            },
+        },
+    },
     tertiaryOnDark: {
         bg: 'none',
         borderRadius: 'unset',
@@ -2327,7 +2201,7 @@ const anchorProps = (isExternal = false) => ({
         rel: 'noopener noreferrer',
     }),
 });
-const Button$1 = React.forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(react.Button, { iconSpacing: 2, type: type, variant: variant, ...props, ...heightProps(height), ...((asAnchor || props.as === 'a') && anchorProps(isExternal)), ref: ref })));
+const Button$1 = React.forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(react.Button, { iconSpacing: variant === 'iconSecondary' || variant === 'iconTertiary' ? 0 : 2, type: type, variant: variant, ...props, ...heightProps(height), ...((asAnchor || props.as === 'a') && anchorProps(isExternal)), ref: ref })));
 Button$1.displayName = 'Button';
 
 const Drawer = ({ header, drawerCloseButton, children, headerProps, ...props }) => {
@@ -2359,17 +2233,17 @@ AccordionActionButton.propTypes = {
 };
 
 var _path$5;
-function _extends$5() {
-  return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$6() {
+  return _extends$6 = 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$5.apply(null, arguments);
+  }, _extends$6.apply(null, arguments);
 }
 var SvgX = function SvgX(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2383,17 +2257,17 @@ var SvgX = function SvgX(props, ref) {
 var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgX);
 
 var _path$4;
-function _extends$4() {
-  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$5() {
+  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 n;
-  }, _extends$4.apply(null, arguments);
+  }, _extends$5.apply(null, arguments);
 }
 var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2407,17 +2281,17 @@ var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgInfoCircleFilled);
 
 var _path$3;
-function _extends$3() {
-  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$4() {
+  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 n;
-  }, _extends$3.apply(null, arguments);
+  }, _extends$4.apply(null, arguments);
 }
 var SvgExclamationTriangleFilled = function SvgExclamationTriangleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2431,17 +2305,17 @@ var SvgExclamationTriangleFilled = function SvgExclamationTriangleFilled(props,
 var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgExclamationTriangleFilled);
 
 var _path$2;
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$3() {
+  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 n;
-  }, _extends$2.apply(null, arguments);
+  }, _extends$3.apply(null, arguments);
 }
 var SvgCheckmarkCircleFilled = function SvgCheckmarkCircleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2487,6 +2361,79 @@ const Alert = React.forwardRef(({ status = 'neutral', title = null, buttonProps
 });
 Alert.displayName = 'Alert';
 
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends$2() {
+  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 n;
+  }, _extends$2.apply(null, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
 const variants$b = {
   line: {
     tablist: {
@@ -2580,7 +2527,7 @@ const combineSizeWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$a = ["size"];
+const _excluded$7 = ["size"];
 const sizeMapping = {
   [SIZE_SMALL]: 'sm',
   [SIZE_BODY]: 'md',
@@ -2590,8 +2537,8 @@ const Tabs = react.forwardRef((_ref, ref) => {
   let {
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React__namespace.default.createElement(react.Tabs, _extends$6({
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return /*#__PURE__*/React__namespace.default.createElement(react.Tabs, _extends$2({
     size: sizeMapping[size]
   }, props, combineSizeWithVariant({
     size
@@ -3507,23 +3454,19 @@ const switchStyle = {
 };
 
 const popperStyles = {
-  borderRadius: 'base'
+    borderRadius: 'base',
 };
 
-const body$2 = props => ({
-  fontSize: 'sm'
+const body$2 = (_props) => ({
+    fontSize: 'sm',
 });
 
 const headerStyles = {
-  marginBottom: 2,
-  fontWeight: 'semibold'
+    marginBottom: 2,
+    fontWeight: 'semibold',
 };
 
-const popoverContentStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
+const popoverContentStyles = ({ variant }) => ({
     padding: 4,
     marginBottom: 0,
     maxWidth: '20rem',
@@ -3534,24 +3477,23 @@ const popoverContentStyles = _ref => {
     borderColor: 'gray.100',
     borderWidth: '1px',
     borderStyle: 'solid',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
+    '--popper-arrow-shadow-color': (t) => t.colors.gray['100'],
     zIndex: 'layer10',
     _focusVisible: {
-      outline: '3px solid rgba(91, 170, 250, 0.7)'
-    }
-  };
-};
+        outline: '3px solid rgba(91, 170, 250, 0.7)',
+    },
+});
 
 const parts$1 = ['popper', 'content', 'header', 'body'];
-const baseStyle$6 = props => ({
-  header: headerStyles,
-  content: popoverContentStyles(props),
-  body: body$2(),
-  popper: popperStyles
+const baseStyle$6 = (props) => ({
+    header: headerStyles,
+    content: popoverContentStyles(props),
+    body: body$2(),
+    popper: popperStyles,
 });
-var index$3 = merge__default.default(react.theme.components.Popover, {
-  parts: parts$1,
-  baseStyle: baseStyle$6
+const popoverStyle = merge__default.default(react.theme.components.Popover, {
+    parts: parts$1,
+    baseStyle: baseStyle$6,
 });
 
 const baseStyle$5 = {
@@ -3610,7 +3552,7 @@ const variants$4 = {
     })
   }
 };
-var index$2 = merge__default.default(inputStyle, {
+var index$1 = merge__default.default(inputStyle, {
   variants: variants$4
 });
 
@@ -3644,53 +3586,36 @@ const variants$3 = {
     minHeight: "14"
   })
 };
-var index$1 = merge__default.default(buttonStyle, {
+var index = merge__default.default(buttonStyle, {
   variants: variants$3
 });
 
-var overlay = {
-  background: 'modalOverlay',
-  zIndex: 'layer8'
+const overlay = {
+    background: 'modalOverlay',
+    zIndex: 'layer8',
 };
 
-var dialogContainer$1 = {
-  display: 'flex',
-  zIndex: 'layer8',
-  justifyContent: 'center',
-  alignItems: {
-    base: 'flex-end',
-    tablet: 'center'
-  },
-  height: '100%',
-  minHeight: '-moz-available',
-  minHeight: '-webkit-fill-available',
-  minHeight: 'fill-available'
+const dialogContainer$1 = {
+    display: 'flex',
+    zIndex: 'layer8',
+    justifyContent: 'center',
+    alignItems: { base: 'flex-end', tablet: 'center' },
+    height: '100%',
+    minHeight: 'fill-available',
 };
 
-var dialog$1 = _ref => {
-  let {
-    hasFooter
-  } = _ref;
-  return {
+const dialog$1 = ({ hasFooter }) => ({
     borderRadius: 'md',
-    borderBottomRadius: {
-      base: '0',
-      tablet: 'md'
-    },
+    borderBottomRadius: { base: '0', tablet: 'md' },
     background: 'white',
     color: 'inherit',
     marginY: 0,
     zIndex: 'layer8',
     boxShadow: 'lg',
-    paddingBottom: hasFooter ? 0 : 4
-  };
-};
+    paddingBottom: hasFooter ? 0 : 4,
+});
 
-var closeButton$1 = _ref => {
-  let {
-    hasHeader
-  } = _ref;
-  return {
+const closeButton$1 = ({ hasHeader }) => ({
     position: 'absolute',
     top: hasHeader ? 4 : 2,
     insetEnd: hasHeader ? 4 : 2,
@@ -3699,80 +3624,87 @@ var closeButton$1 = _ref => {
     width: 8,
     height: 8,
     _focus: {
-      boxShadow: 'outline'
+        boxShadow: 'outline',
     },
     _hover: {
-      bg: 'gray.50'
-    }
-  };
-};
+        bg: 'gray.50',
+    },
+});
 
-var body$1 = _ref => {
-  let {
-    hasFooter,
-    hasHeader,
-    hideCloseButton
-  } = _ref;
-  const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
-    // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
-    background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
-    backgroundRepeat: 'no-repeat',
-    backgroundColor: 'white',
-    backgroundSize: '100% 30px, 100% 10px',
-    backgroundAttachment: 'local, scroll'
-  } : {};
-  return _objectSpread2({
-    borderBottomRadius: hasFooter ? null : 'md',
-    paddingX: 4,
-    paddingBottom: 4,
-    flex: 1,
-    overflow: 'auto',
-    display: 'flex'
-  }, scrollingHeaderStyles);
+const body$1 = ({ hasFooter, hasHeader, hideCloseButton }) => {
+    const scrollingHeaderStyles = hasHeader || !hideCloseButton
+        ? {
+            // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
+            background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
+            backgroundRepeat: 'no-repeat',
+            backgroundColor: 'white',
+            backgroundSize: '100% 30px, 100% 10px',
+            backgroundAttachment: 'local, scroll',
+        }
+        : {};
+    return {
+        borderBottomRadius: hasFooter ? null : 'md',
+        paddingX: 4,
+        paddingBottom: 4,
+        flex: 1,
+        overflow: 'auto',
+        display: 'flex',
+        ...scrollingHeaderStyles,
+    };
 };
 
-var footer$1 = {
-  borderTop: '1px',
-  borderColor: 'gray.100',
-  padding: 4
+const footer$1 = {
+    borderTop: '1px',
+    borderColor: 'gray.100',
+    padding: 4,
+    gap: 4,
+    justifyContent: 'flex-start',
+    flexDirection: { base: 'column', desktop: 'row-reverse' },
 };
 
-const baseStyle$4 = props => ({
-  overlay,
-  dialogContainer: dialogContainer$1,
-  header: header$1(props),
-  dialog: dialog$1(props),
-  closeButton: closeButton$1(props),
-  body: body$1(props),
-  footer: footer$1
+const baseStyle$4 = (props) => ({
+    overlay,
+    dialogContainer: dialogContainer$1,
+    header: header$1(props),
+    dialog: dialog$1(props),
+    closeButton: closeButton$1(props),
+    body: body$1(props),
+    footer: footer$1,
 });
 const sizes$3 = {
-  sm: {
-    dialog: {
-      // Would have preferred object syntax here and below, but wasn't working for whatever reason
-      maxWidth: ['100%', '100%', '48%', '32%', '24%'],
-      maxHeight: ['100%', '100%', '60%', '48%', '32%'],
-      minHeight: ['auto', 'auto', '32%', '32%', '24%']
-    }
-  },
-  md: {
-    dialog: {
-      maxWidth: ['100%', '100%', '84%', '60%', '48%'],
-      maxHeight: ['100%', '100%', '96%', '84%', '60%'],
-      minHeight: ['auto', 'auto', '84%', '60%', '48%']
-    }
-  },
-  lg: {
-    dialog: {
-      maxWidth: ['100%', '100%', '96%', '84%', '72%'],
-      maxHeight: ['100%', '100%', '96%', '96%', '84%'],
-      minHeight: ['auto', 'auto', '96%', '84%', '72%']
-    }
-  }
+    sm: {
+        dialog: {
+            // Would have preferred object syntax here and below, but wasn't working for whatever reason
+            maxWidth: ['100%', '100%', '48%', '32%', '24%'],
+            maxHeight: ['100%', '100%', '60%', '48%', '32%'],
+            minHeight: ['auto', 'auto', '32%', '32%', '24%'],
+        },
+    },
+    'sm-md': {
+        dialog: {
+            maxHeight: ['100%', '100%', '65%', '65%', '65%'],
+            minWidth: ['100%', '100%', 96, 96, 96],
+            maxWidth: ['100%', '100%', '55%', '42%', '30%'],
+        },
+    },
+    md: {
+        dialog: {
+            maxWidth: ['100%', '100%', '84%', '60%', '48%'],
+            maxHeight: ['100%', '100%', '96%', '84%', '60%'],
+            minHeight: ['auto', 'auto', '84%', '60%', '48%'],
+        },
+    },
+    lg: {
+        dialog: {
+            maxWidth: ['100%', '100%', '96%', '84%', '72%'],
+            maxHeight: ['100%', '100%', '96%', '96%', '84%'],
+            minHeight: ['auto', 'auto', '96%', '84%', '72%'],
+        },
+    },
 };
-var index = merge__default.default(react.theme.components.Modal, {
-  baseStyle: baseStyle$4,
-  sizes: sizes$3
+const modalStyle = merge__default.default(react.theme.components.Modal, {
+    baseStyle: baseStyle$4,
+    sizes: sizes$3,
 });
 
 const parts = ['control', 'label'];
@@ -4276,19 +4208,19 @@ var components = /*#__PURE__*/Object.freeze({
   Accordion: theme$1,
   Badge: badgeStyle,
   Button: buttonStyle,
-  ButtonRefreshed: index$1,
+  ButtonRefreshed: index,
   Checkbox: checkboxStyle,
   Divider: dividerStyle,
   Drawer: drawerStyle,
   GridItem: styles$1,
   Heading: Heading_styles,
   Input: inputStyle,
-  InputRefreshed: index$2,
+  InputRefreshed: index$1,
   Link: linkStyle,
   List: listStyle,
   Menu: Menu_styles,
-  Modal: index,
-  Popover: index$3,
+  Modal: modalStyle,
+  Popover: popoverStyle,
   Progress: progressStyle,
   Radio: radioStyle,
   Select: selectStyle,
@@ -4319,32 +4251,8 @@ const baseConfig = {
 };
 var THEME = react.extendTheme(extendedTheme, baseConfig);
 
-const _excluded$9 = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
-const ThemeProvider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      theme,
-      useLegacyOverrides,
-      disableExternalFonts = false,
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React__namespace.default.createElement(react.ChakraProvider, _extends$6({}, props, {
-    ref: ref,
-    theme: merge__default.default({}, THEME, theme)
-  }), disableExternalFonts ? null : /*#__PURE__*/React__namespace.default.createElement(Fonts, null), /*#__PURE__*/React__namespace.default.createElement(LegacyOverrides, {
-    useLegacyOverrides: useLegacyOverrides
-  }), children);
-});
-ThemeProvider.propTypes = {
-  /** If true, this will use the old `spothero-html` base styles */
-  useLegacyOverrides: PropTypes__default.default.bool,
-  /** If true, this will not load the `Fonts` global styles */
-  disableExternalFonts: PropTypes__default.default.bool,
-  /** The React node (generally your entire App) that will be provided the theme */
-  children: PropTypes__default.default.node,
-  /** Adds additional themeing on top of SpotHero's default configuration */
-  theme: PropTypes__default.default.object
-};
+const ThemeProvider = ({ theme, useLegacyOverrides, disableExternalFonts = false, children, ...props }) => (jsxRuntimeExports.jsxs(react.ChakraProvider, { ...props, theme: merge__default.default({}, THEME, theme), children: [disableExternalFonts ? null : jsxRuntimeExports.jsx(Fonts, {}), jsxRuntimeExports.jsx(LegacyOverrides, { useLegacyOverrides: useLegacyOverrides }), children] }));
+ThemeProvider.displayName = 'ThemeProvider';
 
 const Card = React.forwardRef((props, ref) => (jsxRuntimeExports.jsx(react.Box, { position: "relative", padding: 4, bgColor: "background.white", borderRadius: "lg", boxShadow: "md", ...props, ref: ref })));
 Card.displayName = 'Card';
@@ -4446,7 +4354,7 @@ const Input$1 = React.forwardRef(({ label, helperText, errorMessage, isInvalid,
 });
 Input$1.displayName = 'Input';
 
-const _excluded$8 = ["label", "helperText", "errorMessage", "id", "children", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles"];
+const _excluded$6 = ["label", "helperText", "errorMessage", "id", "children", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles"];
 
 // No clue how to move these into the style file so just co-located to keep from slowing down
 // Chakra V2 will heavily impact this component
@@ -4471,7 +4379,6 @@ const activeLabelStyles = {
   fontSize: '0.85em',
   transform: 'translateY(-.75rem)',
   _invalid: {
-    color: 'error',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -4570,10 +4477,10 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
-  return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$6({}, props, {
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$2({}, props, {
     ref: ref
-  }, controlStyles), /*#__PURE__*/React__namespace.default.createElement(react.InputGroup, null, leftElement && /*#__PURE__*/React__namespace.default.createElement(react.InputLeftElement, _extends$6({
+  }, controlStyles), /*#__PURE__*/React__namespace.default.createElement(react.InputGroup, null, leftElement && /*#__PURE__*/React__namespace.default.createElement(react.InputLeftElement, _extends$2({
     pointerEvents: "none",
     top: "52%",
     left: "1.3rem",
@@ -4584,7 +4491,7 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     position: "relative"
   }, children, label && /*#__PURE__*/React__namespace.default.createElement(react.FormLabel, {
     htmlFor: id
-  }, label)), rightElement && /*#__PURE__*/React__namespace.default.createElement(react.InputRightElement, _extends$6({
+  }, label)), rightElement && /*#__PURE__*/React__namespace.default.createElement(react.InputRightElement, _extends$2({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4612,7 +4519,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes__default.default.bool
 };
 
-const _excluded$7 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
+const _excluded$5 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4633,7 +4540,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4651,7 +4558,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$2({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4676,7 +4583,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$6 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
+const _excluded$4 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
 
 //For select left is static arrow,
 /**
@@ -4700,7 +4607,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -4717,7 +4624,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     sx: formControlStyles
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$2({
     icon: /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
       as: ForwardRef$1
     }),
@@ -4741,7 +4648,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$5 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
+const _excluded$3 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4765,7 +4672,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4783,7 +4690,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$2({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4936,7 +4843,7 @@ const AutoSuggestSelect$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$2({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -5020,7 +4927,7 @@ const RadioGroup = React.forwardRef(({ label, errorMessage, defaultValue, isDisa
 });
 RadioGroup.displayName = 'RadioGroup';
 
-const _excluded$4 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
+const _excluded$2 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
 const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -5037,7 +4944,7 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       topChild,
       expandableContentKey = 'selection-card-content'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const Component = isRadio ? Radio : Checkbox;
   const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   const hasExpandableContent = isExpandable && isChecked && expandableChildren;
@@ -5061,7 +4968,7 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, topChild, /*#__PURE__*/React__namespace.default.createElement(react.Box, {
     borderColor: "gray.medium",
     borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__namespace.default.createElement(Component, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(Component, _extends$2({
     ref: ref,
     isChecked: isChecked,
     isDisabled: isDisabled,
@@ -5095,7 +5002,7 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ease: 'easeOut'
     },
     overflow: "hidden"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$2({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
@@ -5130,50 +5037,36 @@ const Textarea = React.forwardRef(({ label, helperText, errorMessage, isInvalid,
 });
 Textarea.displayName = 'Textarea';
 
-const _excluded$3 = ["children"];
-const Popover = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      children
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__namespace.default.createElement(react.Popover, _extends$6({}, rest, {
-    ref: ref
-  }), React.Children.toArray(children).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
-    ref,
-    variant: props.variant,
-    key: "Popover-child-".concat(index)
-  })));
+const ChakraPopoverWithRef = react.Popover;
+const Popover = React.forwardRef(({ children, ...rest }, ref) => {
+    const { variant } = rest;
+    return (jsxRuntimeExports.jsx(ChakraPopoverWithRef, { ...rest, ref: ref, children: React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
+            return React.cloneElement(child, {
+                ref,
+                variant,
+                key: child.key ?? `Popover-child-${index}`,
+            });
+        }) }));
 });
-Popover.propTypes = {
-  /** React children */
-  children: PropTypes__default.default.node,
-  /** Styles the Popover */
-  variant: PropTypes__default.default.oneOf(['light', 'dark'])
-};
+Popover.displayName = 'Popover';
 
-const arrowStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
-    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
-  };
-};
+const arrowStyles = ({ variant }) => ({
+    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white',
+});
 
-const PopoverArrow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverArrow, _extends$6({
-    ref: ref
-  }, props, arrowStyles(props)));
+const ChakraPopoverArrowWithRef = react.PopoverArrow;
+const PopoverArrow = React.forwardRef((props, ref) => {
+    return (jsxRuntimeExports.jsx(ChakraPopoverArrowWithRef, { ref: ref, ...props, ...arrowStyles(props) }));
 });
+PopoverArrow.displayName = 'PopoverArrow';
 
-const pseudoStyles = variant => ({
-  bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
+const pseudoStyles = (variant) => ({
+    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
 });
-const closeButtonStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
+const closeButtonStyles = ({ variant }) => ({
     color: variant === 'dark' ? 'white' : 'black',
     fontSize: '0.5rem',
     position: 'absolute',
@@ -5182,56 +5075,21 @@ const closeButtonStyles = _ref => {
     padding: 4,
     borderTopRightRadius: 4,
     _hover: pseudoStyles(variant),
-    _focus: _objectSpread2(_objectSpread2({}, pseudoStyles(variant)), {}, {
-      boxShadow: 'outline'
-    })
-  };
-};
+    _focus: {
+        ...pseudoStyles(variant),
+        boxShadow: 'outline',
+    },
+});
 
-const PopoverCloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverCloseButton, _extends$6({
-    ref: ref
-  }, props, closeButtonStyles(props)));
+const PopoverCloseButton = React.forwardRef((props, ref) => {
+    return (jsxRuntimeExports.jsx(react.PopoverCloseButton, { ref: ref, ...props, ...closeButtonStyles(props) }));
 });
+PopoverCloseButton.displayName = 'PopoverCloseButton';
 
-const _excluded$2 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
-const PopoverContent = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      header,
-      variant,
-      children,
-      hideCloseButton,
-      hideArrow,
-      popoverBodyProps
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$2);
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverContent, _extends$6({}, rest, {
-    ref: ref
-  }), hideArrow ? null : /*#__PURE__*/React__namespace.default.createElement(PopoverArrow, {
-    variant: variant
-  }), hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(PopoverCloseButton, {
-    variant: variant
-  }), header ? /*#__PURE__*/React__namespace.default.createElement(react.PopoverHeader, null, header) : null, /*#__PURE__*/React__namespace.default.createElement(react.PopoverBody, popoverBodyProps, children));
-});
-PopoverContent.propTypes = {
-  /** React children */
-  children: PropTypes__default.default.node,
-  /** Whether or not to hide the close button */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Whether or not to hide the arrow */
-  hideArrow: PropTypes__default.default.bool,
-  /** Styles the Popover */
-  variant: PropTypes__default.default.oneOf(['light', 'dark']),
-  /** The string or node for the header (optional) */
-  header: PropTypes__default.default.oneOfType([PropTypes__default.default.node, PropTypes__default.default.string]),
-  /** Props to pass to the PopoverBody */
-  popoverBodyProps: PropTypes__default.default.object
-};
-PopoverContent.defaultProps = {
-  variant: 'light',
-  hideCloseButton: false,
-  hideArrow: false
-};
+const PopoverContent = React.forwardRef(({ header, variant = 'light', children, hideCloseButton = false, hideArrow = false, popoverBodyProps, ...rest }, ref) => {
+    return (jsxRuntimeExports.jsxs(react.PopoverContent, { ...rest, ref: ref, children: [hideArrow ? null : jsxRuntimeExports.jsx(PopoverArrow, { variant: variant }), hideCloseButton ? null : (jsxRuntimeExports.jsx(PopoverCloseButton, { variant: variant })), header ? jsxRuntimeExports.jsx(react.PopoverHeader, { children: header }) : null, jsxRuntimeExports.jsx(react.PopoverBody, { ...popoverBodyProps, children: children })] }));
+});
+PopoverContent.displayName = 'PopoverContent';
 
 const AutoSuggestSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -5326,7 +5184,7 @@ const AutoSuggestSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$2({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -5495,7 +5353,7 @@ const FilterSelectNode = _ref => {
     label: label,
     inputId: id,
     isInvalid: isInvalid
-  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$2({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5514,7 +5372,7 @@ const FilterSelectNode = _ref => {
     noOptionsMessage: () => noOptionsMessage
   }, props)));
 };
-const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$6({
+const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$2({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5638,7 +5496,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (!children) throw new Error('Children required');
 
   // iterate over array of child nodes to apply extended props
-  return /*#__PURE__*/React__namespace.default.createElement(react.ButtonGroup, _extends$6({
+  return /*#__PURE__*/React__namespace.default.createElement(react.ButtonGroup, _extends$2({
     ref: ref,
     sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
   }, groupProps), React__namespace.default.Children.map(children, CHILD => {
@@ -5726,7 +5584,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$2({
     id: id,
     components: {
       DropdownIndicator
@@ -5750,7 +5608,7 @@ const CreatableSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       helperText
     } = props,
     additionalProps = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$6({
+  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$2({
     id: id,
     innerRef: ref,
     label: label,
@@ -5788,12 +5646,12 @@ CreatableSelectNode.propTypes = {
     current: PropTypes__default.default.instanceOf(Creatable__default.default)
   })
 };
-var CreatableSelect$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$6({
+var CreatableSelect$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$2({
   ref: ref
 }, props)));
 
 const Menu = react.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.Menu, _extends$6({}, props, {
+  return /*#__PURE__*/React__namespace.default.createElement(react.Menu, _extends$2({}, props, {
     ref: ref
   }));
 });