@spothero/ui 25.11.0 → 25.15.0-beta.1

package/dist/index.esm.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, Children, cloneElement } from 'react';
-import { Modal as Modal$1, ModalOverlay, ModalContent, Box, ModalCloseButton, keyframes, theme as theme$2, Button as Button$2, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, Alert as Alert$1, Icon, AlertTitle, AlertDescription, forwardRef as forwardRef$1, Tabs as Tabs$1, FormControl as FormControl$2, FormLabel, Text as Text$1, FormHelperText, FormErrorMessage, Select as Select$2, Switch as Switch$1, Grid as Grid$1, GridItem as GridItem$1, List as List$1, Spinner as Spinner$1, Heading as Heading$1, Container as Container$1, createMultiStyleConfigHelpers, extendTheme, ChakraProvider, Img, Image as Image$1, CircularProgress, Progress as Progress$1, Checkbox as Checkbox$1, Input as Input$2, InputGroup, InputLeftElement, InputRightElement, useTheme, Radio as Radio$1, RadioGroup as RadioGroup$1, Stack, usePrefersReducedMotion, Divider as Divider$1, Textarea as Textarea$1, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverCloseButton as PopoverCloseButton$1, PopoverContent as PopoverContent$1, PopoverHeader, PopoverBody, ButtonGroup, Menu as Menu$1 } from '@chakra-ui/react';
+import { ModalOverlay, ModalContent, Box, ModalCloseButton, Modal as Modal$1, keyframes, theme as theme$2, Button as Button$2, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, Alert as Alert$1, Icon, AlertTitle, AlertDescription, forwardRef as forwardRef$1, Tabs as Tabs$1, FormControl as FormControl$2, FormLabel, Text as Text$1, FormHelperText, FormErrorMessage, Select as Select$2, Switch as Switch$1, Grid as Grid$1, GridItem as GridItem$1, List as List$1, Spinner as Spinner$1, Heading as Heading$1, Container as Container$1, createMultiStyleConfigHelpers, extendTheme, ChakraProvider, Img, Image as Image$1, CircularProgress, Progress as Progress$1, Checkbox as Checkbox$1, Input as Input$2, InputGroup, InputLeftElement, InputRightElement, useTheme, Radio as Radio$1, RadioGroup as RadioGroup$1, Stack, usePrefersReducedMotion, Divider as Divider$1, Textarea as Textarea$1, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverCloseButton as PopoverCloseButton$1, PopoverContent as PopoverContent$1, PopoverHeader, PopoverBody, ButtonGroup, Menu as Menu$1 } from '@chakra-ui/react';
 export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AspectRatio, Badge, Input as BasicInput, Textarea as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, ButtonGroup, Center, CheckboxGroup, Circle, Code, Collapse, DrawerBody, DrawerCloseButton, Drawer as DrawerContainer, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Fade, Flex, HStack, Icon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, ListItem, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalFooter, ModalHeader, PopoverAnchor, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Square, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tooltip, Tr, VStack, createIcon, extendTheme, keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken } from '@chakra-ui/react';
+import * as React from 'react';
+import React__default, { forwardRef, useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import merge from 'lodash/merge';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -9,252 +10,9 @@ import { Global } from '@emotion/react';
 import { accordionAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 import template from 'lodash/template';
 import AsyncSelect from 'react-select/async';
-import { motion, AnimatePresence } from 'framer-motion';
 import Select$3, { components as components$1 } from 'react-select';
 import Creatable from 'react-select/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__*/forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    hasHeader,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Modal$1, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(ModalOverlay, overlayProps), /*#__PURE__*/React__default.createElement(ModalContent, _extends$6({
-    "data-testid": "ModalContent"
-  }, contentStyling), !hasHeader ? /*#__PURE__*/React__default.createElement(Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__default.createElement(ModalCloseButton, {
-    "data-testid": "ModalClose-button"
-  }), children));
-});
-Modal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes.object
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n     0% { opacity: 0%; }\n     100% { opacity: 100%; }\n\n"])));
-const fadeOut = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; }\n    100% { opacity: 0% }\n"])));
-const fadeInAndEnlarge = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n     0% { opacity: 0%; transform: scale(0.9);}\n     100% { opacity: 100%; transform: scale(1);}\n"])));
-const fadeOutAndShrink = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; transform: scale(1); }\n    100% { opacity: 0%; transform: scale(0.9); }\n"])));
-const fadeInAndSlideUp = 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 = 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__*/forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    onCloseComplete,
-    hasHeader,
-    isOpen,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  const [internalOpen, setInternalOpen] = useState(isOpen);
-  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__default.createElement(Modal$1, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    blockScrollOnMount: isOpen,
-    isOpen: true,
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 3,
-    as: motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(ModalOverlay, overlayProps)), /*#__PURE__*/React__default.createElement(Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 4,
-    as: motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(ModalContent, _extends$6({}, contentStyling, {
-    animation: "".concat(isOpen ? fadeInAnimation : fadeOutAnimation, " 0.2s ease-in-out")
-  }), !hasHeader ? /*#__PURE__*/React__default.createElement(Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__default.createElement(ModalCloseButton, null), children)));
-});
-AlwaysMountedModal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes.object
-};
-
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -1451,6 +1209,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 = Modal$1;
+const Modal = 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(ModalOverlay, { ...overlayProps }), jsxRuntimeExports.jsxs(ModalContent, { "data-testid": "ModalContent", ...contentStyling, children: [!hasHeader ? (jsxRuntimeExports.jsx(Box, { ...header$1({
+                            hasHeader,
+                            hideCloseButton,
+                        }) })) : null, hideCloseButton ? null : (jsxRuntimeExports.jsx(ModalCloseButton, { "data-testid": "ModalClose-button" })), children] })] }));
+});
+Modal.displayName = 'Modal';
+
+const ChakraModalWithRef = Modal$1;
+const fadeIn = keyframes `
+     0% { opacity: 0%; }
+     100% { opacity: 100%; }
+
+`;
+const fadeOut = keyframes `
+    0% { opacity: 100%; }
+    100% { opacity: 0% }
+`;
+const fadeInAndEnlarge = keyframes `
+     0% { opacity: 0%; transform: scale(0.9);}
+     100% { opacity: 100%; transform: scale(1);}
+`;
+const fadeOutAndShrink = keyframes `
+    0% { opacity: 100%; transform: scale(1); }
+    100% { opacity: 0%; transform: scale(0.9); }
+`;
+const fadeInAndSlideUp = keyframes `
+     0% { opacity: 0%; transform: translateY(2rem) scale(1);}
+     100% { opacity: 100%; transform: translateY(0) scale(1);}
+`;
+const fadeOutAndSlideDown = keyframes `
+    0% { opacity: 100%; transform: translateY(0) scale(1); }
+    100% { opacity: 0%; transform: translateY(2rem) scale(1); }
+`;
+const AlwaysMountedModal = forwardRef(({ children, onCloseComplete, isOpen, isMobile = false, contentStyling = {}, overlayProps = {}, ...props }, ref) => {
+    const { hasHeader, hideCloseButton } = props;
+    const [internalOpen, setInternalOpen] = useState(isOpen);
+    const onCloseCompleteRef = useRef(onCloseComplete);
+    useEffect(() => {
+        onCloseCompleteRef.current = onCloseComplete;
+    });
+    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(Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 3, as: motion.div, position: "relative", children: jsxRuntimeExports.jsx(ModalOverlay, { ...overlayProps }) }), jsxRuntimeExports.jsx(Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 4, as: motion.div, position: "relative", children: jsxRuntimeExports.jsxs(ModalContent, { ...contentStyling, animation: `${isOpen ? fadeInAnimation : fadeOutAnimation} 0.2s ease-in-out`, children: [!hasHeader ? (jsxRuntimeExports.jsx(Box, { ...header$1({
+                                hasHeader,
+                                hideCloseButton,
+                            }) })) : null, hideCloseButton ? null : jsxRuntimeExports.jsx(ModalCloseButton, {}), children] }) })] }));
+});
+AlwaysMountedModal.displayName = 'AlwaysMountedModal';
+
 const container = {
     base: '100%', // 640px
     tablet: '45rem', // 720px
@@ -2177,6 +2009,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',
@@ -2215,6 +2063,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',
@@ -2298,7 +2172,7 @@ const anchorProps = (isExternal = false) => ({
         rel: 'noopener noreferrer',
     }),
 });
-const Button$1 = forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(Button$2, { iconSpacing: 2, type: type, variant: variant, ...props, ...heightProps(height), ...((asAnchor || props.as === 'a') && anchorProps(isExternal)), ref: ref })));
+const Button$1 = forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(Button$2, { 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 }) => {
@@ -2330,17 +2204,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.createElement("svg", _extends$5({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2354,17 +2228,17 @@ var SvgX = function SvgX(props, ref) {
 var ForwardRef$5 = /*#__PURE__*/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.createElement("svg", _extends$4({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2378,17 +2252,17 @@ var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
 var ForwardRef$4 = /*#__PURE__*/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.createElement("svg", _extends$3({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2402,17 +2276,17 @@ var SvgExclamationTriangleFilled = function SvgExclamationTriangleFilled(props,
 var ForwardRef$3 = /*#__PURE__*/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.createElement("svg", _extends$2({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2458,6 +2332,79 @@ const Alert = forwardRef(({ status = 'neutral', title = null, buttonProps = null
 });
 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: {
@@ -2551,7 +2498,7 @@ const combineSizeWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$a = ["size"];
+const _excluded$7 = ["size"];
 const sizeMapping = {
   [SIZE_SMALL]: 'sm',
   [SIZE_BODY]: 'md',
@@ -2561,8 +2508,8 @@ const Tabs = forwardRef$1((_ref, ref) => {
   let {
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$6({
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$2({
     size: sizeMapping[size]
   }, props, combineSizeWithVariant({
     size
@@ -3478,23 +3425,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',
@@ -3505,24 +3448,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(theme$2.components.Popover, {
-  parts: parts$1,
-  baseStyle: baseStyle$6
+const popoverStyle = merge(theme$2.components.Popover, {
+    parts: parts$1,
+    baseStyle: baseStyle$6,
 });
 
 const baseStyle$5 = {
@@ -3581,7 +3523,7 @@ const variants$4 = {
     })
   }
 };
-var index$2 = merge(inputStyle, {
+var index$1 = merge(inputStyle, {
   variants: variants$4
 });
 
@@ -3615,53 +3557,36 @@ const variants$3 = {
     minHeight: "14"
   })
 };
-var index$1 = merge(buttonStyle, {
+var index = merge(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,
@@ -3670,80 +3595,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(theme$2.components.Modal, {
-  baseStyle: baseStyle$4,
-  sizes: sizes$3
+const modalStyle = merge(theme$2.components.Modal, {
+    baseStyle: baseStyle$4,
+    sizes: sizes$3,
 });
 
 const parts = ['control', 'label'];
@@ -4247,19 +4179,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,
@@ -4290,32 +4222,8 @@ const baseConfig = {
 };
 var THEME = extendTheme(extendedTheme, baseConfig);
 
-const _excluded$9 = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
-const ThemeProvider = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      theme,
-      useLegacyOverrides,
-      disableExternalFonts = false,
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React__default.createElement(ChakraProvider, _extends$6({}, props, {
-    ref: ref,
-    theme: merge({}, THEME, theme)
-  }), disableExternalFonts ? null : /*#__PURE__*/React__default.createElement(Fonts, null), /*#__PURE__*/React__default.createElement(LegacyOverrides, {
-    useLegacyOverrides: useLegacyOverrides
-  }), children);
-});
-ThemeProvider.propTypes = {
-  /** If true, this will use the old `spothero-html` base styles */
-  useLegacyOverrides: PropTypes.bool,
-  /** If true, this will not load the `Fonts` global styles */
-  disableExternalFonts: PropTypes.bool,
-  /** The React node (generally your entire App) that will be provided the theme */
-  children: PropTypes.node,
-  /** Adds additional themeing on top of SpotHero's default configuration */
-  theme: PropTypes.object
-};
+const ThemeProvider = ({ theme, useLegacyOverrides, disableExternalFonts = false, children, ...props }) => (jsxRuntimeExports.jsxs(ChakraProvider, { ...props, theme: merge({}, THEME, theme), children: [disableExternalFonts ? null : jsxRuntimeExports.jsx(Fonts, {}), jsxRuntimeExports.jsx(LegacyOverrides, { useLegacyOverrides: useLegacyOverrides }), children] }));
+ThemeProvider.displayName = 'ThemeProvider';
 
 const Card = forwardRef((props, ref) => (jsxRuntimeExports.jsx(Box, { position: "relative", padding: 4, bgColor: "background.white", borderRadius: "lg", boxShadow: "md", ...props, ref: ref })));
 Card.displayName = 'Card';
@@ -4417,7 +4325,7 @@ const Input$1 = forwardRef(({ label, helperText, errorMessage, isInvalid, isDisa
 });
 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
@@ -4442,7 +4350,6 @@ const activeLabelStyles = {
   fontSize: '0.85em',
   transform: 'translateY(-.75rem)',
   _invalid: {
-    color: 'error',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -4541,10 +4448,10 @@ const FormControl = /*#__PURE__*/forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
-  return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$6({}, props, {
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$2({}, props, {
     ref: ref
-  }, controlStyles), /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && /*#__PURE__*/React__default.createElement(InputLeftElement, _extends$6({
+  }, controlStyles), /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && /*#__PURE__*/React__default.createElement(InputLeftElement, _extends$2({
     pointerEvents: "none",
     top: "52%",
     left: "1.3rem",
@@ -4555,7 +4462,7 @@ const FormControl = /*#__PURE__*/forwardRef((_ref, ref) => {
     position: "relative"
   }, children, label && /*#__PURE__*/React__default.createElement(FormLabel, {
     htmlFor: id
-  }, label)), rightElement && /*#__PURE__*/React__default.createElement(InputRightElement, _extends$6({
+  }, label)), rightElement && /*#__PURE__*/React__default.createElement(InputRightElement, _extends$2({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4583,7 +4490,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes.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
@@ -4604,7 +4511,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4622,7 +4529,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__default.createElement(Input$2, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Input$2, _extends$2({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4647,7 +4554,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes.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,
 /**
@@ -4671,7 +4578,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -4688,7 +4595,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     sx: formControlStyles
-  }, /*#__PURE__*/React__default.createElement(Select$2, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Select$2, _extends$2({
     icon: /*#__PURE__*/React__default.createElement(Icon, {
       as: ForwardRef$1
     }),
@@ -4712,7 +4619,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes.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
@@ -4736,7 +4643,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4754,7 +4661,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Button$2, _extends$2({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4907,7 +4814,7 @@ const AutoSuggestSelect$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__default.createElement("div", _extends$2({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -4991,7 +4898,7 @@ const RadioGroup = forwardRef(({ label, errorMessage, defaultValue, isDisabled,
 });
 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__*/forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -5008,7 +4915,7 @@ const SelectionCard = /*#__PURE__*/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;
@@ -5032,7 +4939,7 @@ const SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, topChild, /*#__PURE__*/React__default.createElement(Box, {
     borderColor: "gray.medium",
     borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__default.createElement(Component, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Component, _extends$2({
     ref: ref,
     isChecked: isChecked,
     isDisabled: isDisabled,
@@ -5066,7 +4973,7 @@ const SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
       ease: 'easeOut'
     },
     overflow: "hidden"
-  }, /*#__PURE__*/React__default.createElement(Box, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Box, _extends$2({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
@@ -5101,50 +5008,36 @@ const Textarea = forwardRef(({ label, helperText, errorMessage, isInvalid, isDis
 });
 Textarea.displayName = 'Textarea';
 
-const _excluded$3 = ["children"];
-const Popover = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      children
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(Popover$1, _extends$6({}, rest, {
-    ref: ref
-  }), Children.toArray(children).map((child, index) => /*#__PURE__*/cloneElement(child, {
-    ref,
-    variant: props.variant,
-    key: "Popover-child-".concat(index)
-  })));
+const ChakraPopoverWithRef = Popover$1;
+const Popover = forwardRef(({ children, ...rest }, ref) => {
+    const { variant } = rest;
+    return (jsxRuntimeExports.jsx(ChakraPopoverWithRef, { ...rest, ref: ref, children: Children.map(children, (child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                ref,
+                variant,
+                key: child.key ?? `Popover-child-${index}`,
+            });
+        }) }));
 });
-Popover.propTypes = {
-  /** React children */
-  children: PropTypes.node,
-  /** Styles the Popover */
-  variant: PropTypes.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__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(PopoverArrow$1, _extends$6({
-    ref: ref
-  }, props, arrowStyles(props)));
+const ChakraPopoverArrowWithRef = PopoverArrow$1;
+const PopoverArrow = 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',
@@ -5153,56 +5046,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__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(PopoverCloseButton$1, _extends$6({
-    ref: ref
-  }, props, closeButtonStyles(props)));
+const PopoverCloseButton = forwardRef((props, ref) => {
+    return (jsxRuntimeExports.jsx(PopoverCloseButton$1, { ref: ref, ...props, ...closeButtonStyles(props) }));
 });
+PopoverCloseButton.displayName = 'PopoverCloseButton';
 
-const _excluded$2 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
-const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      header,
-      variant,
-      children,
-      hideCloseButton,
-      hideArrow,
-      popoverBodyProps
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(PopoverContent$1, _extends$6({}, 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));
+const PopoverContent = forwardRef(({ header, variant = 'light', children, hideCloseButton = false, hideArrow = false, popoverBodyProps, ...rest }, ref) => {
+    return (jsxRuntimeExports.jsxs(PopoverContent$1, { ...rest, ref: ref, children: [hideArrow ? null : jsxRuntimeExports.jsx(PopoverArrow, { variant: variant }), hideCloseButton ? null : (jsxRuntimeExports.jsx(PopoverCloseButton, { variant: variant })), header ? jsxRuntimeExports.jsx(PopoverHeader, { children: header }) : null, jsxRuntimeExports.jsx(PopoverBody, { ...popoverBodyProps, children: 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
-};
+PopoverContent.displayName = 'PopoverContent';
 
 const AutoSuggestSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -5297,7 +5155,7 @@ const AutoSuggestSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__default.createElement("div", _extends$2({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -5466,7 +5324,7 @@ const FilterSelectNode = _ref => {
     label: label,
     inputId: id,
     isInvalid: isInvalid
-  }, /*#__PURE__*/React__default.createElement(Select$3, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Select$3, _extends$2({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5485,7 +5343,7 @@ const FilterSelectNode = _ref => {
     noOptionsMessage: () => noOptionsMessage
   }, props)));
 };
-const FilterSelect = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(FilterSelectNode, _extends$6({
+const FilterSelect = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(FilterSelectNode, _extends$2({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5609,7 +5467,7 @@ const ToggleButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   if (!children) throw new Error('Children required');
 
   // iterate over array of child nodes to apply extended props
-  return /*#__PURE__*/React__default.createElement(ButtonGroup, _extends$6({
+  return /*#__PURE__*/React__default.createElement(ButtonGroup, _extends$2({
     ref: ref,
     sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
   }, groupProps), React__default.Children.map(children, CHILD => {
@@ -5697,7 +5555,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$2({
     id: id,
     components: {
       DropdownIndicator
@@ -5721,7 +5579,7 @@ const CreatableSelect = /*#__PURE__*/forwardRef((props, ref) => {
       helperText
     } = props,
     additionalProps = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$6({
+  return /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$2({
     id: id,
     innerRef: ref,
     label: label,
@@ -5759,12 +5617,12 @@ CreatableSelectNode.propTypes = {
     current: PropTypes.instanceOf(Creatable)
   })
 };
-var CreatableSelect$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$6({
+var CreatableSelect$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$2({
   ref: ref
 }, props)));
 
 const Menu = forwardRef$1((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(Menu$1, _extends$6({}, props, {
+  return /*#__PURE__*/React__default.createElement(Menu$1, _extends$2({}, props, {
     ref: ref
   }));
 });