@spothero/ui 25.12.0 → 25.16.0-beta.2

package/dist/index.esm.js

@@ -1,260 +1,18 @@
-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, 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';
 import { Global } from '@emotion/react';
 import { accordionAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 import template from 'lodash/template';
+import PropTypes from 'prop-types';
 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'|'sm-md'|'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', 'sm-md', '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'|'sm-md'|'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', 'sm-md', '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,49 +2172,36 @@ 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 }) => {
     return (jsxRuntimeExports.jsxs(Drawer$1, { placement: "right", ...props, children: [jsxRuntimeExports.jsx(DrawerOverlay, {}), jsxRuntimeExports.jsxs(DrawerContent, { children: [jsxRuntimeExports.jsxs(DrawerHeader, { ...headerProps, children: [header, drawerCloseButton || jsxRuntimeExports.jsx(DrawerCloseButton, {})] }), children] })] }));
 };
 
-const AccordionActionButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    onClick
-  } = _ref;
-  const handleOnClick = e => {
-    if (onClick) {
-      e.preventDefault();
-    }
-    onClick === null || onClick === void 0 || onClick();
-  };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: ref,
-    fontSize: "sm",
-    role: "button",
-    onClick: handleOnClick,
-    color: "primary.default"
-  }, children);
+const AccordionActionButton = forwardRef(({ children, onClick }, ref) => {
+    const handleOnClick = (e) => {
+        if (onClick) {
+            e.preventDefault();
+        }
+        onClick?.();
+    };
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, fontSize: "sm", role: "button", onClick: handleOnClick, color: "primary.default", children: children }));
 });
-AccordionActionButton.propTypes = {
-  onClick: PropTypes.func,
-  children: PropTypes.node.isRequired
-};
+AccordionActionButton.displayName = 'AccordionActionButton';
 
 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 +2215,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 +2239,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 +2263,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",
@@ -2459,139 +2320,107 @@ const Alert = forwardRef(({ status = 'neutral', title = null, buttonProps = null
 Alert.displayName = 'Alert';
 
 const variants$b = {
-  line: {
-    tablist: {
-      borderBottom: '2px solid',
-      borderColor: 'inherit'
-    },
-    tab: {
-      color: 'gray.600',
-      borderBottom: '2px solid',
-      borderColor: 'transparent',
-      marginBottom: '-2px',
-      _selected: {
-        color: 'primary.default',
-        borderColor: 'primary.default',
-        fontWeight: 'semibold'
-      },
-      _active: {
-        color: 'black',
-        bg: 'transparent'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      },
-      _hover: {
-        color: 'black'
-      }
-    }
-  },
-  enclosed: {
-    tablist: {
-      backgroundColor: 'white',
-      borderRadius: '8px',
-      borederColor: 'gray.200',
-      borderWidth: '1px',
-      paddingY: 1
+    line: {
+        tablist: {
+            borderBottom: '2px solid',
+            borderColor: 'inherit',
+        },
+        tab: {
+            color: 'gray.600',
+            borderBottom: '2px solid',
+            borderColor: 'transparent',
+            marginBottom: '-2px',
+            _selected: {
+                color: 'primary.default',
+                borderColor: 'primary.default',
+                fontWeight: 'semibold',
+            },
+            _active: {
+                color: 'black',
+                bg: 'transparent',
+            },
+            _disabled: {
+                opacity: 0.4,
+                cursor: 'not-allowed',
+            },
+            _hover: {
+                color: 'black',
+            },
+        },
+    },
+    enclosed: {
+        tablist: {
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            borderColor: 'gray.200',
+            borderWidth: '1px',
+            paddingY: 1,
+        },
+        tab: {
+            borderRadius: '6px',
+            marginX: 1,
+            _selected: {
+                fontWeight: 'semibold',
+                color: 'white',
+                backgroundColor: 'primary.default',
+                _hover: {
+                    backgroundColor: 'primary.600',
+                },
+            },
+            _active: {
+                backgroundColor: 'gray.200',
+            },
+            _disabled: {
+                opacity: 0.4,
+                cursor: 'not-allowed',
+            },
+        },
     },
-    tab: {
-      borderRadius: '6px',
-      marginX: 1,
-      _selected: {
-        fontWeight: 'semibold',
-        color: 'white',
-        backgroundColor: 'primary.default',
-        _hover: {
-          backgroundColor: 'primary.600'
-        }
-      },
-      _active: {
-        backgroundColor: 'gray.200'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      }
-    }
-  }
 };
-var styles$2 = merge(theme$2.components.Tabs, {
-  variants: variants$b
+const tabsStyle = merge(theme$2.components.Tabs, {
+    variants: variants$b,
 });
 
 const SIZE_SMALL = 'small';
 const SIZE_BODY = 'body';
 const SIZE_HEADING = 'heading';
-
-/**
- * ### `combineSizeWithVariant`
- * A function that takes in the `size` value, and the
- * `variant` value. The default-like styling for the `size` prop is merged with the styling from the
- * `variant` and a combined styleProp object is returned.
- *
- * @function combineSizeWithVariant
- * @param {string} args.size - The size of Tabs component
- * @param {string} args.variant - The style variant for the Text component
- * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
- */
-
-const combineSizeWithVariant = _ref => {
-  let {
-    size,
-    variant = 'line'
-  } = _ref;
-  const fontSizeMapping = {
-    [SIZE_SMALL]: fontSizes.xs,
-    [SIZE_BODY]: fontSizes.base,
-    [SIZE_HEADING]: fontSizes.lg
-  };
-  const styleProps = styles$2.variants["".concat(variant)];
-  styleProps.tab.fontSize = fontSizeMapping[size];
-  return styleProps;
+const combineSizeWithVariant = ({ size, variant = 'line', }) => {
+    const fontSizeMapping = {
+        [SIZE_SMALL]: fontSizes.xs,
+        [SIZE_BODY]: fontSizes.base,
+        [SIZE_HEADING]: fontSizes.lg,
+    };
+    const styleProps = variants$b[variant];
+    return {
+        ...styleProps,
+        tab: {
+            ...styleProps.tab,
+            fontSize: fontSizeMapping[size],
+        },
+    };
 };
 
-const _excluded$a = ["size"];
 const sizeMapping = {
-  [SIZE_SMALL]: 'sm',
-  [SIZE_BODY]: 'md',
-  [SIZE_HEADING]: 'lg'
+    [SIZE_SMALL]: 'sm',
+    [SIZE_BODY]: 'md',
+    [SIZE_HEADING]: 'lg',
 };
-const Tabs = forwardRef$1((_ref, ref) => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$6({
-    size: sizeMapping[size]
-  }, props, combineSizeWithVariant({
-    size
-  }), {
-    ref: ref
-  }));
+const Tabs = React__default.forwardRef(({ size = SIZE_BODY, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Tabs$1, { size: sizeMapping[size], ...props, ...combineSizeWithVariant({ size }), ref: ref }));
 });
-Tabs.defaultProps = {
-  size: SIZE_BODY
-};
-Tabs.propTypes = {
-  /** The React node that will render inside the element */
-  children: PropTypes.node,
-  /** Controls the size of Tabs */
-  size: PropTypes.oneOf([SIZE_SMALL, SIZE_BODY, SIZE_HEADING])
-};
 
 var _path$1;
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+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$1.apply(null, arguments);
+  }, _extends$2.apply(null, arguments);
 }
 var SvgChevronDown = function SvgChevronDown(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -3045,61 +2874,62 @@ var Heading_styles = {
 
 const parts$2 = ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption'];
 const baseStyle$b = {
-  table: {
-    borderCollapse: 'collapse',
-    color: 'text.primary.light',
-    width: '100%'
-  },
-  thead: {
-    borderBottom: '1px',
-    borderColor: 'gray.medium'
-  },
-  th: {
-    fontFamily: 'heading',
-    fontSize: variants$9.h4.fontSize,
-    fontWeight: 'semibold',
-    letterSpacing: 'unset',
-    padding: 4,
-    textAlign: 'start',
-    textTransform: 'none'
-  },
-  tr: {
-    borderBottom: '1px',
-    borderColor: 'gray.medium',
-    _last: {
-      border: 'none'
-    }
-  },
-  td: {
-    padding: 4,
-    textAlign: 'start'
-  }
+    table: {
+        borderCollapse: 'collapse',
+        color: 'text.primary.light',
+        width: '100%',
+    },
+    thead: {
+        borderBottom: '1px',
+        borderColor: 'gray.medium',
+    },
+    th: {
+        fontFamily: 'heading',
+        fontSize: variants$9.h4.fontSize,
+        fontWeight: 'semibold',
+        letterSpacing: 'unset',
+        padding: 4,
+        textAlign: 'start',
+        textTransform: 'none',
+    },
+    tr: {
+        borderBottom: '1px',
+        borderColor: 'gray.medium',
+        _last: {
+            border: 'none',
+        },
+    },
+    td: {
+        padding: 4,
+        textAlign: 'start',
+    },
 };
 const roundedWhiteVariant = {
-  table: {
-    backgroundColor: 'background.white',
-    borderRadius: 6,
-    boxShadow: 'md',
-    marginBottom: 1
-  }
+    table: {
+        backgroundColor: 'background.white',
+        borderRadius: 6,
+        boxShadow: 'md',
+        marginBottom: 1,
+    },
 };
 const roundedGrayVariant = {
-  table: _objectSpread2(_objectSpread2({}, roundedWhiteVariant.table), {}, {
-    backgroundColor: 'background.gray'
-  })
+    table: {
+        ...roundedWhiteVariant.table,
+        backgroundColor: 'background.gray',
+    },
 };
 const variants$8 = {
-  rounded: roundedWhiteVariant,
-  roundedGray: roundedGrayVariant
+    rounded: roundedWhiteVariant,
+    roundedGray: roundedGrayVariant,
 };
 const defaultProps$6 = {
-  variant: 'rounded'
+    variant: 'rounded',
 };
 var Table_styles = {
-  parts: parts$2,
-  variants: variants$8,
-  baseStyle: baseStyle$b,
-  defaultProps: defaultProps$6
+    parts: parts$2,
+    variants: variants$8,
+    baseStyle: baseStyle$b,
+    defaultProps: defaultProps$6,
 };
 
 const chakraLinkStyle = theme$2.components.Link;
@@ -3478,23 +3308,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 +3331,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 = {
@@ -3571,6 +3396,79 @@ const inputStyle = merge(theme$2.components.Input, {
     variants: variants$5,
 });
 
+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$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1.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 + "";
+}
+
 //Below isn't being used in build for some reason
 const variants$4 = {
   refreshed: {
@@ -3581,7 +3479,7 @@ const variants$4 = {
     })
   }
 };
-var index$2 = merge(inputStyle, {
+var index$1 = merge(inputStyle, {
   variants: variants$4
 });
 
@@ -3615,53 +3513,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,93 +3551,88 @@ 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);
-};
-
-var footer$1 = {
-  borderTop: '1px',
-  borderColor: 'gray.100',
-  padding: 4,
-  gap: 4,
-  justifyContent: 'flex-start',
-  flexDirection: {
-    base: 'column',
-    desktop: 'row-reverse'
-  }
+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,
+    };
 };
 
-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 footer$1 = {
+    borderTop: '1px',
+    borderColor: 'gray.100',
+    padding: 4,
+    gap: 4,
+    justifyContent: 'flex-start',
+    alignItems: 'normal',
+    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 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%']
-    }
-  },
-  '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%']
-    }
-  }
+    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'];
@@ -4091,168 +3967,168 @@ const progressStyle = {
 };
 
 const baseStyle = {
-  button: {
-    px: 8,
-    py: 3,
-    fontSize: 'base',
-    fontFamily: 'body',
-    lineHeight: 0.875,
-    fontWeight: 'semibold',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: 'base',
-    textTransform: 'capitalize',
-    transition: 'all normal ease',
-    _hover: {
-      bg: 'gray.50',
-      borderColor: 'gray.200'
-    },
-    _disabled: {
-      cursor: 'not-allowed',
-      opacity: 1,
-      bg: 'gray.200',
-      borderColor: 'gray.200',
-      color: 'gray.600'
-    },
-    _focus: {
-      zIndex: 1,
-      boxShadow: 'outline'
-    }
-  },
-  list: {
-    bg: 'white',
-    boxShadow: 'base',
-    padding: 6,
-    zIndex: 'layer1',
-    width: 64
-  },
-  item: {
-    paddingX: 2,
-    paddingY: 1.5,
-    _focus: {
-      zIndex: 1,
-      boxShadow: 'outline'
-    }
-  },
-  groupTitle: {
-    fontWeight: 'semibold',
-    color: 'gray.600',
-    padding: 2
-  },
-  command: {
-    // this will style the text defined by the command
-    // prop in the MenuItem and MenuItemOption components
-    opacity: '0.8',
-    fontFamily: 'mono',
-    fontSize: 'sm',
-    letterSpacing: 'tighter',
-    paddingL: 4
-  },
-  divider: {
-    marginY: 2,
-    borderColor: 'gray.200'
-  }
-};
-const variants = {
-  basic: {
     button: {
-      bg: 'primary.default',
-      borderColor: 'primary.default',
-      color: 'white',
-      _hover: {
-        bg: 'primary.600',
-        borderColor: 'primary.600',
-        color: 'white',
+        px: 8,
+        py: 3,
+        fontSize: 'base',
+        fontFamily: 'body',
+        lineHeight: 0.875,
+        fontWeight: 'semibold',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: 'base',
+        textTransform: 'capitalize',
+        transition: 'all normal ease',
+        _hover: {
+            bg: 'gray.50',
+            borderColor: 'gray.200',
+        },
         _disabled: {
-          bg: 'gray.200',
-          borderColor: 'gray.200',
-          color: 'gray.600'
-        }
-      }
+            cursor: 'not-allowed',
+            opacity: 1,
+            bg: 'gray.200',
+            borderColor: 'gray.200',
+            color: 'gray.600',
+        },
+        _focus: {
+            zIndex: 1,
+            boxShadow: 'outline',
+        },
     },
     list: {
-      bg: 'white',
-      boxShadow: 'base',
-      zIndex: 'layer1',
-      borderColor: 'gray.100',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderRadius: 'base',
-      padding: 4,
-      width: 64
+        bg: 'white',
+        boxShadow: 'base',
+        padding: 6,
+        zIndex: 'layer1',
+        width: 64,
+    },
+    item: {
+        paddingX: 2,
+        paddingY: 1.5,
+        _focus: {
+            zIndex: 1,
+            boxShadow: 'outline',
+        },
     },
     groupTitle: {
-      fontWeight: 'semibold',
-      fontSize: 'md',
-      color: 'gray.600',
-      padding: 2
+        fontWeight: 'semibold',
+        color: 'gray.600',
+        padding: 2,
     },
-    item: {
-      fontWeight: 'semibold',
-      _hover: {
-        color: 'gray.600'
-      }
-    }
-  },
-  full: {
-    button: {
-      height: 8,
-      fontSize: 'sm',
-      fontWeight: 'semibold',
-      color: 'black',
-      borderColor: 'white',
-      backgroundColor: 'white',
-      borderRadius: 'base',
-      paddingX: 3,
-      paddingY: 'auto',
-      _hover: {
-        color: 'black',
-        backgroundColor: 'gray.50',
-        borderColor: 'gray.50'
-      },
-      _active: {
-        color: 'primary.default',
-        backgroundColor: 'gray.50',
-        borderColor: 'gray.50',
-        _hover: {
-          color: 'primary.600',
-          backgroundColor: 'gray.50',
-          borderColor: 'gray.50'
-        }
-      }
+    command: {
+        // this will style the text defined by the command
+        // prop in the MenuItem and MenuItemOption components
+        opacity: '0.8',
+        fontFamily: 'mono',
+        fontSize: 'sm',
+        letterSpacing: 'tighter',
+        paddingLeft: 4,
     },
-    list: {
-      height: '30rem',
-      width: '100vw',
-      padding: 8,
-      backgroundColor: 'white'
+    divider: {
+        marginY: 2,
+        borderColor: 'gray.200',
     },
-    groupTitle: {
-      fontSize: 'sm',
-      weight: 'normal',
-      color: 'gray.600'
+};
+const variants = {
+    basic: {
+        button: {
+            bg: 'primary.default',
+            borderColor: 'primary.default',
+            color: 'white',
+            _hover: {
+                bg: 'primary.600',
+                borderColor: 'primary.600',
+                color: 'white',
+                _disabled: {
+                    bg: 'gray.200',
+                    borderColor: 'gray.200',
+                    color: 'gray.600',
+                },
+            },
+        },
+        list: {
+            bg: 'white',
+            boxShadow: 'base',
+            zIndex: 'layer1',
+            borderColor: 'gray.100',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderRadius: 'base',
+            padding: 4,
+            width: 64,
+        },
+        groupTitle: {
+            fontWeight: 'semibold',
+            fontSize: 'md',
+            color: 'gray.600',
+            padding: 2,
+        },
+        item: {
+            fontWeight: 'semibold',
+            _hover: {
+                color: 'gray.600',
+            },
+        },
+    },
+    full: {
+        button: {
+            height: 8,
+            fontSize: 'sm',
+            fontWeight: 'semibold',
+            color: 'black',
+            borderColor: 'white',
+            backgroundColor: 'white',
+            borderRadius: 'base',
+            paddingX: 3,
+            paddingY: 'auto',
+            _hover: {
+                color: 'black',
+                backgroundColor: 'gray.50',
+                borderColor: 'gray.50',
+            },
+            _active: {
+                color: 'primary.default',
+                backgroundColor: 'gray.50',
+                borderColor: 'gray.50',
+                _hover: {
+                    color: 'primary.600',
+                    backgroundColor: 'gray.50',
+                    borderColor: 'gray.50',
+                },
+            },
+        },
+        list: {
+            height: '30rem',
+            width: '100vw',
+            padding: 8,
+            backgroundColor: 'white',
+        },
+        groupTitle: {
+            fontSize: 'sm',
+            weight: 'normal',
+            color: 'gray.600',
+        },
+        item: {
+            display: 'block',
+            paddingX: 3.5,
+            paddingY: 2.5,
+            marginBottom: 2,
+            _last: {
+                marginBottom: 0,
+            },
+            _hover: {
+                backgroundColor: 'gray.50',
+            },
+            _focus: {
+                boxShadow: 'none',
+                backgroundColor: 'gray.50',
+            },
+        },
     },
-    item: {
-      display: 'block',
-      paddingX: 3.5,
-      paddingY: 2.5,
-      marginBottom: 2,
-      _last: {
-        marginBottom: 0
-      },
-      _hover: {
-        backgroundColor: 'gray.50'
-      },
-      _focus: {
-        boxShadow: 'none',
-        backgroundColor: 'gray.50'
-      }
-    }
-  }
 };
-var Menu_styles = merge(theme$2.components.Menu, {
-  baseStyle,
-  variants
+const menuStyle = merge(theme$2.components.Menu, {
+    baseStyle,
+    variants,
 });
 
 var components = /*#__PURE__*/Object.freeze({
@@ -4260,19 +4136,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,
+  Menu: menuStyle,
+  Modal: modalStyle,
+  Popover: popoverStyle,
   Progress: progressStyle,
   Radio: radioStyle,
   Select: selectStyle,
@@ -4281,7 +4157,7 @@ var components = /*#__PURE__*/Object.freeze({
   Spinner: Spinner_styles,
   Switch: switchStyle,
   Table: Table_styles,
-  Tabs: styles$2,
+  Tabs: tabsStyle,
   Text: textStyle
 });
 
@@ -4303,32 +4179,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';
@@ -4430,7 +4282,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$5 = ["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
@@ -4455,7 +4307,6 @@ const activeLabelStyles = {
   fontSize: '0.85em',
   transform: 'translateY(-.75rem)',
   _invalid: {
-    color: 'error',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -4554,10 +4405,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$5);
+  return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$1({}, 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$1({
     pointerEvents: "none",
     top: "52%",
     left: "1.3rem",
@@ -4568,7 +4419,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$1({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4596,7 +4447,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool
 };
 
-const _excluded$7 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
+const _excluded$4 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4617,7 +4468,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4635,7 +4486,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$1({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4660,7 +4511,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes.object
 };
 
-const _excluded$6 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
+const _excluded$3 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
 
 //For select left is static arrow,
 /**
@@ -4684,7 +4535,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -4701,7 +4552,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$1({
     icon: /*#__PURE__*/React__default.createElement(Icon, {
       as: ForwardRef$1
     }),
@@ -4725,7 +4576,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes.object
 };
 
-const _excluded$5 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
+const _excluded$2 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4749,7 +4600,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4767,7 +4618,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$1({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4920,7 +4771,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$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -5004,104 +4855,31 @@ 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 SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      isChecked,
-      isDisabled,
-      value,
-      helperText,
-      expandableChildren,
-      defaultChecked,
-      isRadio,
-      label,
-      isExpandable,
-      size = 'md',
-      expandableChildrenStyles = {},
-      topChild,
-      expandableContentKey = 'selection-card-content'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  const Component = isRadio ? Radio : Checkbox;
-  const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
-  const hasExpandableContent = isExpandable && isChecked && expandableChildren;
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  // Create a unique key based on the content to force re-animation
-  const contentKey = React__default.useMemo(() => {
-    if (typeof expandableChildren === 'string') {
-      return expandableChildren;
-    }
-    return expandableContentKey || JSON.stringify(expandableChildren === null || expandableChildren === void 0 ? void 0 : expandableChildren.props) || Math.random();
-  }, [expandableChildren, expandableContentKey]);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    borderRadius: "lg",
-    borderColor: isChecked ? 'primary.default' : 'gray.medium',
-    borderWidth: "1px",
-    _hover: {
-      borderColor: isDisabled ? 'gray.medium' : 'primary.default'
-    },
-    overflow: topChild ? 'hidden' : 'auto'
-  }, topChild, /*#__PURE__*/React__default.createElement(Box, {
-    borderColor: "gray.medium",
-    borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__default.createElement(Component, _extends$6({
-    ref: ref,
-    isChecked: isChecked,
-    isDisabled: isDisabled,
-    isFocusable: !isDisabled,
-    value: value,
-    defaultChecked: defaultChecked,
-    helperText: helperText,
-    size: size,
-    width: "100%",
-    paddingX: 4,
-    paddingY: 3
-  }, props), label)), /*#__PURE__*/React__default.createElement(AnimatePresence, {
-    mode: "wait"
-  }, hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
-    as: motion.div,
-    key: contentKey,
-    initial: {
-      height: 0,
-      opacity: 0
-    },
-    animate: {
-      height: 'auto',
-      opacity: 1
-    },
-    exit: {
-      height: 0,
-      opacity: 0
-    },
-    transition: {
-      duration: prefersReducedMotion ? 0 : 0.15,
-      ease: 'easeOut'
-    },
-    overflow: "hidden"
-  }, /*#__PURE__*/React__default.createElement(Box, _extends$6({
-    color: "gray.600",
-    fontSize: expandableTextSize,
-    paddingTop: 3,
-    paddingX: 4,
-    paddingBottom: 3
-  }, expandableChildrenStyles), expandableChildren))));
+const MotionBox = motion(Box);
+const SelectionCard = forwardRef(({ isChecked, isDisabled, value, helperText, expandableChildren, defaultChecked, isRadio, label, isExpandable, size = 'md', expandableChildrenStyles = {}, topChild, expandableContentKey = 'selection-card-content', ...props }, ref) => {
+    const Component = isRadio ? Radio : Checkbox;
+    const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+    const hasExpandableContent = isExpandable && isChecked && expandableChildren;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    // Create a unique key based on the content to force re-animation
+    const contentKey = React__default.useMemo(() => {
+        if (typeof expandableChildren === 'string') {
+            return expandableChildren;
+        }
+        return (expandableContentKey ||
+            (React__default.isValidElement(expandableChildren)
+                ? JSON.stringify(expandableChildren.props)
+                : undefined) ||
+            Math.random());
+    }, [expandableChildren, expandableContentKey]);
+    return (jsxRuntimeExports.jsxs(Box, { borderRadius: "lg", borderColor: isChecked ? 'primary.default' : 'gray.medium', borderWidth: "1px", _hover: {
+            borderColor: isDisabled ? 'gray.medium' : 'primary.default',
+        }, overflow: topChild ? 'hidden' : 'auto', children: [topChild, jsxRuntimeExports.jsx(Box, { borderColor: "gray.medium", borderBottomWidth: hasExpandableContent ? '1px' : 0, children: jsxRuntimeExports.jsx(Component, { ref: ref, isChecked: isChecked, isDisabled: isDisabled, isFocusable: !isDisabled, value: value, defaultChecked: defaultChecked, helperText: helperText, size: size, width: "100%", paddingX: 4, paddingY: 3, ...props, children: label }) }), jsxRuntimeExports.jsx(AnimatePresence, { mode: "wait", children: hasExpandableContent && (jsxRuntimeExports.jsx(MotionBox, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                        duration: prefersReducedMotion ? 0 : 0.15,
+                        ease: 'easeOut',
+                    }, overflow: "hidden", children: jsxRuntimeExports.jsx(Box, { color: "gray.600", fontSize: expandableTextSize, paddingTop: 3, paddingX: 4, paddingBottom: 3, ...expandableChildrenStyles, children: expandableChildren }) }, contentKey)) })] }));
 });
-SelectionCard.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  expandableChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  defaultChecked: PropTypes.bool,
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  helperText: PropTypes.string,
-  isRadio: PropTypes.bool,
-  isExpandable: PropTypes.bool,
-  expandableChildrenStyles: PropTypes.object,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes.element,
-  expandableContentKey: PropTypes.string
-};
+SelectionCard.displayName = 'SelectionCard';
 
 const Divider = forwardRef(({ variant = 'solid', colorScheme: borderColor = 'medium', ...props }, ref) => {
     return (jsxRuntimeExports.jsx(Divider$1, { ...colorScheme[borderColor], variant: variant, ...props, ref: ref }));
@@ -5114,50 +4892,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',
@@ -5166,56 +4930,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 {
@@ -5310,7 +5039,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$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -5479,7 +5208,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$1({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5498,7 +5227,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$1({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5559,45 +5288,33 @@ FilterSelectNode.propTypes = {
 };
 
 const defaultStyles = {
-  border: 0,
-  borderRadius: '4px',
-  fontWeight: 'normal',
-  paddingX: 4,
-  paddingY: 1,
-  _hover: {
-    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
-  },
-  _focus: {
-    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
-  }
+    border: 0,
+    borderRadius: '4px',
+    fontWeight: 'normal',
+    paddingX: 4,
+    paddingY: 1,
+    _hover: { boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)' },
+    _focus: { boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)' },
 };
 const inactiveStyles = {
-  color: 'black',
-  borderColor: 'gray.100',
-  bg: 'gray.100',
-  _hover: {
-    bg: 'gray.100'
-  },
-  _active: {
-    bg: 'gray.100'
-  }
+    color: 'black',
+    borderColor: 'gray.100',
+    bg: 'gray.100',
+    _hover: { bg: 'gray.100' },
+    _active: { bg: 'gray.100' },
 };
 const activeStyles = {
-  color: 'black',
-  fontWeight: 'semibold',
-  boxShadow: 'sm',
-  bg: 'white',
-  _hover: {
-    bg: 'white'
-  },
-  _active: {
-    bg: 'white'
-  }
+    color: 'black',
+    fontWeight: 'semibold',
+    boxShadow: 'sm',
+    bg: 'white',
+    _hover: { bg: 'white' },
+    _active: { bg: 'white' },
 };
 const buttonGroupStyles = {
-  borderRadius: '4px',
-  backgroundColor: 'gray.100',
-  padding: 1
+    borderRadius: '4px',
+    backgroundColor: 'gray.100',
+    padding: 1,
 };
 
 /**
@@ -5610,40 +5327,32 @@ const buttonGroupStyles = {
  * @note
  * must have multiple child elements
  */
-const ToggleButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    value,
-    children,
-    groupProps,
-    buttonGroupStyles: _buttonGroupStyles = {},
-    childrenStyles = {}
-  } = props;
-  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({
-    ref: ref,
-    sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
-  }, groupProps), React__default.Children.map(children, CHILD => {
-    var _CHILD$props3;
-    return /*#__PURE__*/React__default.cloneElement(CHILD, _objectSpread2({
-      onClick: () => {
-        var _CHILD$props, _CHILD$props2;
-        if (value === (CHILD === null || CHILD === void 0 || (_CHILD$props = CHILD.props) === null || _CHILD$props === void 0 ? void 0 : _CHILD$props.value)) return;
-        onChange(CHILD === null || CHILD === void 0 || (_CHILD$props2 = CHILD.props) === null || _CHILD$props2 === void 0 ? void 0 : _CHILD$props2.value);
-      }
-    }, {
-      sx: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles), value !== (CHILD === null || CHILD === void 0 || (_CHILD$props3 = CHILD.props) === null || _CHILD$props3 === void 0 ? void 0 : _CHILD$props3.value) ? inactiveStyles : activeStyles), childrenStyles)
-    }));
-  }));
+const ToggleButtonGroup = forwardRef((props, ref) => {
+    const { onChange, value, children, groupProps, buttonGroupStyles: _buttonGroupStyles = {}, childrenStyles = {}, } = props;
+    if (!children)
+        throw new Error('Children required');
+    // iterate over array of child nodes to apply extended props
+    return (jsxRuntimeExports.jsx(ButtonGroup, { ref: ref, sx: { ...buttonGroupStyles, ..._buttonGroupStyles }, ...groupProps, children: React__default.Children.map(children, child => {
+            const CHILD = child;
+            return React__default.cloneElement(CHILD, {
+                onClick: () => {
+                    if (value === CHILD?.props?.value)
+                        return;
+                    onChange(CHILD?.props?.value);
+                },
+                ...{
+                    sx: {
+                        ...defaultStyles,
+                        ...(value !== CHILD?.props?.value
+                            ? inactiveStyles
+                            : activeStyles),
+                        ...childrenStyles,
+                    },
+                },
+            });
+        }) }));
 });
-ToggleButtonGroup.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  groupProps: PropTypes.object
-};
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
 const _excluded = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText", "innerRef"],
   _excluded2 = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText"];
@@ -5710,7 +5419,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$1({
     id: id,
     components: {
       DropdownIndicator
@@ -5734,7 +5443,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$1({
     id: id,
     innerRef: ref,
     label: label,
@@ -5772,19 +5481,14 @@ 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$1({
   ref: ref
 }, props)));
 
-const Menu = forwardRef$1((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(Menu$1, _extends$6({}, props, {
-    ref: ref
-  }));
+const ChakraMenuWithRef = Menu$1;
+const Menu = React__default.forwardRef((props, ref) => {
+    return jsxRuntimeExports.jsx(ChakraMenuWithRef, { ...props, ref: ref });
 });
-Menu.propTypes = {
-  /** The React node that will render inside the element */
-  children: PropTypes.node
-};
 
 export { ANIMATION_TOKENS, AccordionActionButton, Alert, AlwaysMountedModal, AutoSuggestSelect, Button$1 as Button, Card, Checkbox, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, FilterSelect, Grid, GridItem, Heading, Image, Input$1 as Input, List, Loader, Menu, Modal, Popover, PopoverArrow, PopoverContent, Progress, Radio, RadioGroup, AutoSuggestSelect$1 as RefreshedAutoSuggestSelect, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input as RefreshedInput, Select as RefreshedSelectInput, Select$1 as Select, SelectionCard, Spinner, Switch, Tabs, Text, Textarea, ThemeProvider, ToggleButtonGroup };
 //# sourceMappingURL=index.esm.js.map