@spothero/ui 25.12.0 → 25.16.0-beta.2

package/dist/index.cjs.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var React = require('react');
 var react = require('@chakra-ui/react');
+var React = require('react');
+var framerMotion = require('framer-motion');
 var merge = require('lodash/merge');
-var PropTypes = require('prop-types');
 var cn = require('classnames');
 var react$1 = require('@emotion/react');
 var anatomy = require('@chakra-ui/anatomy');
 var template = require('lodash/template');
+var PropTypes = require('prop-types');
 var AsyncSelect = require('react-select/async');
-var framerMotion = require('framer-motion');
 var Select$2 = require('react-select');
 var Creatable = require('react-select/creatable');
 
@@ -35,255 +35,13 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var merge__default = /*#__PURE__*/_interopDefault(merge);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var cn__default = /*#__PURE__*/_interopDefault(cn);
 var template__default = /*#__PURE__*/_interopDefault(template);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 var Select__default = /*#__PURE__*/_interopDefault(Select$2);
 var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _extends$6() {
-  return _extends$6 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$6.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _taggedTemplateLiteral(e, t) {
-  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
-    raw: {
-      value: Object.freeze(t)
-    }
-  }));
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-var header$1 = _ref => {
-  let {
-    hideCloseButton,
-    hasHeader
-  } = _ref;
-  return {
-    padding: !hideCloseButton || hasHeader ? 4 : 2,
-    fontSize: 'xl',
-    fontWeight: 'semibold',
-    // If just close button, still have 'header' section at top
-    minHeight: hasHeader || hideCloseButton ? null : 12
-  };
-};
-
-/**
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @param {boolean} isOpen - Whether or not the Modal is open
- * @param {React.ReactNode} children - The header text of the modal
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'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__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    hasHeader,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  return /*#__PURE__*/React__namespace.default.createElement(react.Modal, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/React__namespace.default.createElement(react.ModalOverlay, overlayProps), /*#__PURE__*/React__namespace.default.createElement(react.ModalContent, _extends$6({
-    "data-testid": "ModalContent"
-  }, contentStyling), !hasHeader ? /*#__PURE__*/React__namespace.default.createElement(react.Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(react.ModalCloseButton, {
-    "data-testid": "ModalClose-button"
-  }), children));
-});
-Modal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes__default.default.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes__default.default.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes__default.default.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes__default.default.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes__default.default.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes__default.default.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'sm-md', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes__default.default.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes__default.default.object
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const fadeIn = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n     0% { opacity: 0%; }\n     100% { opacity: 100%; }\n\n"])));
-const fadeOut = react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; }\n    100% { opacity: 0% }\n"])));
-const fadeInAndEnlarge = react.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n     0% { opacity: 0%; transform: scale(0.9);}\n     100% { opacity: 100%; transform: scale(1);}\n"])));
-const fadeOutAndShrink = react.keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; transform: scale(1); }\n    100% { opacity: 0%; transform: scale(0.9); }\n"])));
-const fadeInAndSlideUp = react.keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n     0% { opacity: 0%; transform: translateY(2rem) scale(1);}\n     100% { opacity: 100%; transform: translateY(0) scale(1);}\n"])));
-const fadeOutAndSlideDown = react.keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    0% { opacity: 100%; transform: translateY(0) scale(1); }\n    100% { opacity: 0%; transform: translateY(2rem) scale(1); }\n"])));
-
-// This is a modified version of our Modal that will always be mounted, even when it is closed.
-// We need this for things like Stripe where payment Elements need to be mounted to get a token on checkout
-/**
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @param {boolean} isOpen - Whether or not the Modal is open
- * @param {React.ReactNode} children - The header text of the modal
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
- * @param {('sm'|'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__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    hideCloseButton,
-    onCloseComplete,
-    hasHeader,
-    isOpen,
-    isMobile = false,
-    contentStyling = {},
-    overlayProps = {}
-  } = props;
-  const [internalOpen, setInternalOpen] = React.useState(isOpen);
-  React.useEffect(() => {
-    if (!isOpen) {
-      setTimeout(() => {
-        setInternalOpen(false);
-        onCloseComplete();
-        // Want this to be a bit shorter than fade out animation
-      }, 175);
-    } else {
-      setInternalOpen(true);
-    }
-  }, [isOpen]);
-  const fadeInAnimation = isMobile ? fadeInAndSlideUp : fadeInAndEnlarge;
-  const fadeOutAnimation = isMobile ? fadeOutAndSlideDown : fadeOutAndShrink;
-  return /*#__PURE__*/React__namespace.default.createElement(react.Modal, _extends$6({
-    motionPreset: isMobile ? 'slideInBottom' : 'scale'
-  }, props, {
-    blockScrollOnMount: isOpen,
-    isOpen: true,
-    ref: ref
-  }), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 3,
-    as: framerMotion.motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.ModalOverlay, overlayProps)), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    visibility: internalOpen ? 'visible' : 'hidden',
-    animation: "".concat(isOpen ? fadeIn : fadeOut, " 0.2s ease-in-out"),
-    zIndex: 4,
-    as: framerMotion.motion.div,
-    position: "relative"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.ModalContent, _extends$6({}, contentStyling, {
-    animation: "".concat(isOpen ? fadeInAnimation : fadeOutAnimation, " 0.2s ease-in-out")
-  }), !hasHeader ? /*#__PURE__*/React__namespace.default.createElement(react.Box, header$1(props)) : null, hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(react.ModalCloseButton, null), children)));
-});
-AlwaysMountedModal.propTypes = {
-  /** Whether or not the Modal is opened in a mobile viewport */
-  isMobile: PropTypes__default.default.bool,
-  /** Whether or not the Modal is open */
-  isOpen: PropTypes__default.default.bool.isRequired,
-  /** React children. Body of the Modal. */
-  children: PropTypes__default.default.node.isRequired,
-  /** Whether or not ModalHeader is a child. Will change the styling */
-  hasHeader: PropTypes__default.default.bool.isRequired,
-  /** Whether or not ModalFooter is a child. Will change the styling */
-  hasFooter: PropTypes__default.default.bool.isRequired,
-  /** Callback invoked to close the Modal. Not required, but strongly suggested. */
-  onClose: PropTypes__default.default.func,
-  /** The size of the modal. If unspecified, uses md styles. */
-  size: PropTypes__default.default.oneOf(['sm', 'sm-md', 'md', 'lg']),
-  /** Whether or not to show the close button (optional) */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Objects containing css-in-js styling*/
-  contentStyling: PropTypes__default.default.object,
-  /** Objects containing props to apply to ModalOverlay component */
-  overlayProps: PropTypes__default.default.object
-};
-
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -1480,6 +1238,80 @@ function requireJsxRuntime() {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+const header$1 = ({ hideCloseButton, hasHeader }) => ({
+    padding: !hideCloseButton || hasHeader ? 4 : 2,
+    fontSize: 'xl',
+    fontWeight: 'semibold',
+    // If just close button, still have 'header' section at top
+    minHeight: hasHeader || hideCloseButton ? undefined : 12,
+});
+
+const ChakraModalWithRef$1 = react.Modal;
+const Modal = React.forwardRef(({ children, isMobile = false, contentStyling = {}, overlayProps = {}, ...props }, ref) => {
+    const { hasHeader, hideCloseButton } = props;
+    return (jsxRuntimeExports.jsxs(ChakraModalWithRef$1, { motionPreset: isMobile ? 'slideInBottom' : 'scale', ...props, ref: ref, children: [jsxRuntimeExports.jsx(react.ModalOverlay, { ...overlayProps }), jsxRuntimeExports.jsxs(react.ModalContent, { "data-testid": "ModalContent", ...contentStyling, children: [!hasHeader ? (jsxRuntimeExports.jsx(react.Box, { ...header$1({
+                            hasHeader,
+                            hideCloseButton,
+                        }) })) : null, hideCloseButton ? null : (jsxRuntimeExports.jsx(react.ModalCloseButton, { "data-testid": "ModalClose-button" })), children] })] }));
+});
+Modal.displayName = 'Modal';
+
+const ChakraModalWithRef = react.Modal;
+const fadeIn = react.keyframes `
+     0% { opacity: 0%; }
+     100% { opacity: 100%; }
+
+`;
+const fadeOut = react.keyframes `
+    0% { opacity: 100%; }
+    100% { opacity: 0% }
+`;
+const fadeInAndEnlarge = react.keyframes `
+     0% { opacity: 0%; transform: scale(0.9);}
+     100% { opacity: 100%; transform: scale(1);}
+`;
+const fadeOutAndShrink = react.keyframes `
+    0% { opacity: 100%; transform: scale(1); }
+    100% { opacity: 0%; transform: scale(0.9); }
+`;
+const fadeInAndSlideUp = react.keyframes `
+     0% { opacity: 0%; transform: translateY(2rem) scale(1);}
+     100% { opacity: 100%; transform: translateY(0) scale(1);}
+`;
+const fadeOutAndSlideDown = react.keyframes `
+    0% { opacity: 100%; transform: translateY(0) scale(1); }
+    100% { opacity: 0%; transform: translateY(2rem) scale(1); }
+`;
+const AlwaysMountedModal = React.forwardRef(({ children, onCloseComplete, isOpen, isMobile = false, contentStyling = {}, overlayProps = {}, ...props }, ref) => {
+    const { hasHeader, hideCloseButton } = props;
+    const [internalOpen, setInternalOpen] = React.useState(isOpen);
+    const onCloseCompleteRef = React.useRef(onCloseComplete);
+    React.useEffect(() => {
+        onCloseCompleteRef.current = onCloseComplete;
+    });
+    React.useEffect(() => {
+        if (!isOpen) {
+            const timeoutId = setTimeout(() => {
+                setInternalOpen(false);
+                onCloseCompleteRef.current?.();
+                // Want this to be a bit shorter than fade out animation
+            }, 175);
+            return () => clearTimeout(timeoutId);
+        }
+        setInternalOpen(true);
+        return undefined;
+    }, [isOpen]);
+    const fadeInAnimation = isMobile ? fadeInAndSlideUp : fadeInAndEnlarge;
+    const fadeOutAnimation = isMobile
+        ? fadeOutAndSlideDown
+        : fadeOutAndShrink;
+    return (jsxRuntimeExports.jsxs(ChakraModalWithRef, { motionPreset: isMobile ? 'slideInBottom' : 'scale', ...props, blockScrollOnMount: isOpen, isOpen: true, ref: ref, children: [jsxRuntimeExports.jsx(react.Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 3, as: framerMotion.motion.div, position: "relative", children: jsxRuntimeExports.jsx(react.ModalOverlay, { ...overlayProps }) }), jsxRuntimeExports.jsx(react.Box, { visibility: internalOpen ? 'visible' : 'hidden', animation: `${isOpen ? fadeIn : fadeOut} 0.2s ease-in-out`, zIndex: 4, as: framerMotion.motion.div, position: "relative", children: jsxRuntimeExports.jsxs(react.ModalContent, { ...contentStyling, animation: `${isOpen ? fadeInAnimation : fadeOutAnimation} 0.2s ease-in-out`, children: [!hasHeader ? (jsxRuntimeExports.jsx(react.Box, { ...header$1({
+                                hasHeader,
+                                hideCloseButton,
+                            }) })) : null, hideCloseButton ? null : jsxRuntimeExports.jsx(react.ModalCloseButton, {}), children] }) })] }));
+});
+AlwaysMountedModal.displayName = 'AlwaysMountedModal';
+
 const container = {
     base: '100%', // 640px
     tablet: '45rem', // 720px
@@ -2206,6 +2038,22 @@ const variants$c = {
             bg: activeSecondaryColor,
         },
     },
+    iconSecondary: {
+        bg: 'white',
+        borderColor: 'gray.medium',
+        color: 'black',
+        minW: 'unset',
+        px: 3,
+        py: 3,
+        _hover: {
+            bg: hoverSecondaryColor,
+            color: 'black',
+            ...disabledButtonHoverStyle,
+        },
+        _active: {
+            bg: activeSecondaryColor,
+        },
+    },
     secondaryOnDark: {
         bg: 'none',
         borderColor: 'white',
@@ -2244,6 +2092,32 @@ const variants$c = {
             },
         },
     },
+    iconTertiary: {
+        bg: 'none',
+        borderWidth: 'none',
+        borderRadius: 'unset',
+        color: 'black',
+        h: 'unset',
+        m: 'unset',
+        minW: 'unset',
+        px: 2,
+        py: 2,
+        lineHeight: 1,
+        _disabled: {
+            bg: 'none',
+            color: 'gray.dark',
+        },
+        _hover: {
+            _disabled: {
+                color: 'gray.dark',
+            },
+        },
+        _active: {
+            _disabled: {
+                color: 'gray.dark',
+            },
+        },
+    },
     tertiaryOnDark: {
         bg: 'none',
         borderRadius: 'unset',
@@ -2327,49 +2201,36 @@ const anchorProps = (isExternal = false) => ({
         rel: 'noopener noreferrer',
     }),
 });
-const Button$1 = React.forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(react.Button, { iconSpacing: 2, type: type, variant: variant, ...props, ...heightProps(height), ...((asAnchor || props.as === 'a') && anchorProps(isExternal)), ref: ref })));
+const Button$1 = React.forwardRef(({ asAnchor, isExternal, height = 'md', type = 'button', variant = 'primary', ...props }, ref) => (jsxRuntimeExports.jsx(react.Button, { iconSpacing: variant === 'iconSecondary' || variant === 'iconTertiary' ? 0 : 2, type: type, variant: variant, ...props, ...heightProps(height), ...((asAnchor || props.as === 'a') && anchorProps(isExternal)), ref: ref })));
 Button$1.displayName = 'Button';
 
 const Drawer = ({ header, drawerCloseButton, children, headerProps, ...props }) => {
     return (jsxRuntimeExports.jsxs(react.Drawer, { placement: "right", ...props, children: [jsxRuntimeExports.jsx(react.DrawerOverlay, {}), jsxRuntimeExports.jsxs(react.DrawerContent, { children: [jsxRuntimeExports.jsxs(react.DrawerHeader, { ...headerProps, children: [header, drawerCloseButton || jsxRuntimeExports.jsx(react.DrawerCloseButton, {})] }), children] })] }));
 };
 
-const AccordionActionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onClick
-  } = _ref;
-  const handleOnClick = e => {
-    if (onClick) {
-      e.preventDefault();
-    }
-    onClick === null || onClick === void 0 || onClick();
-  };
-  return /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    ref: ref,
-    fontSize: "sm",
-    role: "button",
-    onClick: handleOnClick,
-    color: "primary.default"
-  }, children);
+const AccordionActionButton = React.forwardRef(({ children, onClick }, ref) => {
+    const handleOnClick = (e) => {
+        if (onClick) {
+            e.preventDefault();
+        }
+        onClick?.();
+    };
+    return (jsxRuntimeExports.jsx(react.Box, { ref: ref, fontSize: "sm", role: "button", onClick: handleOnClick, color: "primary.default", children: children }));
 });
-AccordionActionButton.propTypes = {
-  onClick: PropTypes__default.default.func,
-  children: PropTypes__default.default.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__namespace.createElement("svg", _extends$5({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2383,17 +2244,17 @@ var SvgX = function SvgX(props, ref) {
 var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgX);
 
 var _path$4;
-function _extends$4() {
-  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$5() {
+  return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$4.apply(null, arguments);
+  }, _extends$5.apply(null, arguments);
 }
 var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2407,17 +2268,17 @@ var SvgInfoCircleFilled = function SvgInfoCircleFilled(props, ref) {
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgInfoCircleFilled);
 
 var _path$3;
-function _extends$3() {
-  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$4() {
+  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$3.apply(null, arguments);
+  }, _extends$4.apply(null, arguments);
 }
 var SvgExclamationTriangleFilled = function SvgExclamationTriangleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2431,17 +2292,17 @@ var SvgExclamationTriangleFilled = function SvgExclamationTriangleFilled(props,
 var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgExclamationTriangleFilled);
 
 var _path$2;
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$3() {
+  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$2.apply(null, arguments);
+  }, _extends$3.apply(null, arguments);
 }
 var SvgCheckmarkCircleFilled = function SvgCheckmarkCircleFilled(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2488,139 +2349,107 @@ const Alert = React.forwardRef(({ status = 'neutral', title = null, buttonProps
 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__default.default(react.theme.components.Tabs, {
-  variants: variants$b
+const tabsStyle = merge__default.default(react.theme.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 = react.forwardRef((_ref, ref) => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React__namespace.default.createElement(react.Tabs, _extends$6({
-    size: sizeMapping[size]
-  }, props, combineSizeWithVariant({
-    size
-  }), {
-    ref: ref
-  }));
+const Tabs = React__namespace.default.forwardRef(({ size = SIZE_BODY, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(react.Tabs, { 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__default.default.node,
-  /** Controls the size of Tabs */
-  size: PropTypes__default.default.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__namespace.createElement("svg", _extends$1({}, props, {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -3074,61 +2903,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 = react.theme.components.Link;
@@ -3507,23 +3337,19 @@ const switchStyle = {
 };
 
 const popperStyles = {
-  borderRadius: 'base'
+    borderRadius: 'base',
 };
 
-const body$2 = props => ({
-  fontSize: 'sm'
+const body$2 = (_props) => ({
+    fontSize: 'sm',
 });
 
 const headerStyles = {
-  marginBottom: 2,
-  fontWeight: 'semibold'
+    marginBottom: 2,
+    fontWeight: 'semibold',
 };
 
-const popoverContentStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
+const popoverContentStyles = ({ variant }) => ({
     padding: 4,
     marginBottom: 0,
     maxWidth: '20rem',
@@ -3534,24 +3360,23 @@ const popoverContentStyles = _ref => {
     borderColor: 'gray.100',
     borderWidth: '1px',
     borderStyle: 'solid',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
+    '--popper-arrow-shadow-color': (t) => t.colors.gray['100'],
     zIndex: 'layer10',
     _focusVisible: {
-      outline: '3px solid rgba(91, 170, 250, 0.7)'
-    }
-  };
-};
+        outline: '3px solid rgba(91, 170, 250, 0.7)',
+    },
+});
 
 const parts$1 = ['popper', 'content', 'header', 'body'];
-const baseStyle$6 = props => ({
-  header: headerStyles,
-  content: popoverContentStyles(props),
-  body: body$2(),
-  popper: popperStyles
+const baseStyle$6 = (props) => ({
+    header: headerStyles,
+    content: popoverContentStyles(props),
+    body: body$2(),
+    popper: popperStyles,
 });
-var index$3 = merge__default.default(react.theme.components.Popover, {
-  parts: parts$1,
-  baseStyle: baseStyle$6
+const popoverStyle = merge__default.default(react.theme.components.Popover, {
+    parts: parts$1,
+    baseStyle: baseStyle$6,
 });
 
 const baseStyle$5 = {
@@ -3600,6 +3425,79 @@ const inputStyle = merge__default.default(react.theme.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: {
@@ -3610,7 +3508,7 @@ const variants$4 = {
     })
   }
 };
-var index$2 = merge__default.default(inputStyle, {
+var index$1 = merge__default.default(inputStyle, {
   variants: variants$4
 });
 
@@ -3644,53 +3542,36 @@ const variants$3 = {
     minHeight: "14"
   })
 };
-var index$1 = merge__default.default(buttonStyle, {
+var index = merge__default.default(buttonStyle, {
   variants: variants$3
 });
 
-var overlay = {
-  background: 'modalOverlay',
-  zIndex: 'layer8'
+const overlay = {
+    background: 'modalOverlay',
+    zIndex: 'layer8',
 };
 
-var dialogContainer$1 = {
-  display: 'flex',
-  zIndex: 'layer8',
-  justifyContent: 'center',
-  alignItems: {
-    base: 'flex-end',
-    tablet: 'center'
-  },
-  height: '100%',
-  minHeight: '-moz-available',
-  minHeight: '-webkit-fill-available',
-  minHeight: 'fill-available'
+const dialogContainer$1 = {
+    display: 'flex',
+    zIndex: 'layer8',
+    justifyContent: 'center',
+    alignItems: { base: 'flex-end', tablet: 'center' },
+    height: '100%',
+    minHeight: 'fill-available',
 };
 
-var dialog$1 = _ref => {
-  let {
-    hasFooter
-  } = _ref;
-  return {
+const dialog$1 = ({ hasFooter }) => ({
     borderRadius: 'md',
-    borderBottomRadius: {
-      base: '0',
-      tablet: 'md'
-    },
+    borderBottomRadius: { base: '0', tablet: 'md' },
     background: 'white',
     color: 'inherit',
     marginY: 0,
     zIndex: 'layer8',
     boxShadow: 'lg',
-    paddingBottom: hasFooter ? 0 : 4
-  };
-};
+    paddingBottom: hasFooter ? 0 : 4,
+});
 
-var closeButton$1 = _ref => {
-  let {
-    hasHeader
-  } = _ref;
-  return {
+const closeButton$1 = ({ hasHeader }) => ({
     position: 'absolute',
     top: hasHeader ? 4 : 2,
     insetEnd: hasHeader ? 4 : 2,
@@ -3699,93 +3580,88 @@ var closeButton$1 = _ref => {
     width: 8,
     height: 8,
     _focus: {
-      boxShadow: 'outline'
+        boxShadow: 'outline',
     },
     _hover: {
-      bg: 'gray.50'
-    }
-  };
+        bg: 'gray.50',
+    },
+});
+
+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 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 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 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__default.default(react.theme.components.Modal, {
-  baseStyle: baseStyle$4,
-  sizes: sizes$3
+const modalStyle = merge__default.default(react.theme.components.Modal, {
+    baseStyle: baseStyle$4,
+    sizes: sizes$3,
 });
 
 const parts = ['control', 'label'];
@@ -4120,168 +3996,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__default.default(react.theme.components.Menu, {
-  baseStyle,
-  variants
+const menuStyle = merge__default.default(react.theme.components.Menu, {
+    baseStyle,
+    variants,
 });
 
 var components = /*#__PURE__*/Object.freeze({
@@ -4289,19 +4165,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,
@@ -4310,7 +4186,7 @@ var components = /*#__PURE__*/Object.freeze({
   Spinner: Spinner_styles,
   Switch: switchStyle,
   Table: Table_styles,
-  Tabs: styles$2,
+  Tabs: tabsStyle,
   Text: textStyle
 });
 
@@ -4332,32 +4208,8 @@ const baseConfig = {
 };
 var THEME = react.extendTheme(extendedTheme, baseConfig);
 
-const _excluded$9 = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
-const ThemeProvider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      theme,
-      useLegacyOverrides,
-      disableExternalFonts = false,
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React__namespace.default.createElement(react.ChakraProvider, _extends$6({}, props, {
-    ref: ref,
-    theme: merge__default.default({}, THEME, theme)
-  }), disableExternalFonts ? null : /*#__PURE__*/React__namespace.default.createElement(Fonts, null), /*#__PURE__*/React__namespace.default.createElement(LegacyOverrides, {
-    useLegacyOverrides: useLegacyOverrides
-  }), children);
-});
-ThemeProvider.propTypes = {
-  /** If true, this will use the old `spothero-html` base styles */
-  useLegacyOverrides: PropTypes__default.default.bool,
-  /** If true, this will not load the `Fonts` global styles */
-  disableExternalFonts: PropTypes__default.default.bool,
-  /** The React node (generally your entire App) that will be provided the theme */
-  children: PropTypes__default.default.node,
-  /** Adds additional themeing on top of SpotHero's default configuration */
-  theme: PropTypes__default.default.object
-};
+const ThemeProvider = ({ theme, useLegacyOverrides, disableExternalFonts = false, children, ...props }) => (jsxRuntimeExports.jsxs(react.ChakraProvider, { ...props, theme: merge__default.default({}, THEME, theme), children: [disableExternalFonts ? null : jsxRuntimeExports.jsx(Fonts, {}), jsxRuntimeExports.jsx(LegacyOverrides, { useLegacyOverrides: useLegacyOverrides }), children] }));
+ThemeProvider.displayName = 'ThemeProvider';
 
 const Card = React.forwardRef((props, ref) => (jsxRuntimeExports.jsx(react.Box, { position: "relative", padding: 4, bgColor: "background.white", borderRadius: "lg", boxShadow: "md", ...props, ref: ref })));
 Card.displayName = 'Card';
@@ -4459,7 +4311,7 @@ const Input$1 = React.forwardRef(({ label, helperText, errorMessage, isInvalid,
 });
 Input$1.displayName = 'Input';
 
-const _excluded$8 = ["label", "helperText", "errorMessage", "id", "children", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles"];
+const _excluded$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
@@ -4484,7 +4336,6 @@ const activeLabelStyles = {
   fontSize: '0.85em',
   transform: 'translateY(-.75rem)',
   _invalid: {
-    color: 'error',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -4583,10 +4434,10 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
-  return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$6({}, props, {
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$1({}, props, {
     ref: ref
-  }, controlStyles), /*#__PURE__*/React__namespace.default.createElement(react.InputGroup, null, leftElement && /*#__PURE__*/React__namespace.default.createElement(react.InputLeftElement, _extends$6({
+  }, controlStyles), /*#__PURE__*/React__namespace.default.createElement(react.InputGroup, null, leftElement && /*#__PURE__*/React__namespace.default.createElement(react.InputLeftElement, _extends$1({
     pointerEvents: "none",
     top: "52%",
     left: "1.3rem",
@@ -4597,7 +4448,7 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     position: "relative"
   }, children, label && /*#__PURE__*/React__namespace.default.createElement(react.FormLabel, {
     htmlFor: id
-  }, label)), rightElement && /*#__PURE__*/React__namespace.default.createElement(react.InputRightElement, _extends$6({
+  }, label)), rightElement && /*#__PURE__*/React__namespace.default.createElement(react.InputRightElement, _extends$1({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4625,7 +4476,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes__default.default.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
@@ -4646,7 +4497,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4664,7 +4515,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$1({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4689,7 +4540,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$6 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
+const _excluded$3 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
 
 //For select left is static arrow,
 /**
@@ -4713,7 +4564,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -4730,7 +4581,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     sx: formControlStyles
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$1({
     icon: /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
       as: ForwardRef$1
     }),
@@ -4754,7 +4605,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$5 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
+const _excluded$2 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4778,7 +4629,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4796,7 +4647,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$1({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4949,7 +4800,7 @@ const AutoSuggestSelect$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -5033,104 +4884,31 @@ const RadioGroup = React.forwardRef(({ label, errorMessage, defaultValue, isDisa
 });
 RadioGroup.displayName = 'RadioGroup';
 
-const _excluded$4 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
-const SelectionCard = /*#__PURE__*/React.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 = react.usePrefersReducedMotion();
-
-  // Create a unique key based on the content to force re-animation
-  const contentKey = React__namespace.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__namespace.default.createElement(react.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__namespace.default.createElement(react.Box, {
-    borderColor: "gray.medium",
-    borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__namespace.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__namespace.default.createElement(framerMotion.AnimatePresence, {
-    mode: "wait"
-  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    as: framerMotion.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__namespace.default.createElement(react.Box, _extends$6({
-    color: "gray.600",
-    fontSize: expandableTextSize,
-    paddingTop: 3,
-    paddingX: 4,
-    paddingBottom: 3
-  }, expandableChildrenStyles), expandableChildren))));
-});
-SelectionCard.propTypes = {
-  label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]).isRequired,
-  expandableChildren: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
-  defaultChecked: PropTypes__default.default.bool,
-  isChecked: PropTypes__default.default.bool,
-  isDisabled: PropTypes__default.default.bool,
-  value: PropTypes__default.default.string.isRequired,
-  helperText: PropTypes__default.default.string,
-  isRadio: PropTypes__default.default.bool,
-  isExpandable: PropTypes__default.default.bool,
-  expandableChildrenStyles: PropTypes__default.default.object,
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes__default.default.element,
-  expandableContentKey: PropTypes__default.default.string
-};
+const MotionBox = framerMotion.motion(react.Box);
+const SelectionCard = React.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 = react.usePrefersReducedMotion();
+    // Create a unique key based on the content to force re-animation
+    const contentKey = React__namespace.default.useMemo(() => {
+        if (typeof expandableChildren === 'string') {
+            return expandableChildren;
+        }
+        return (expandableContentKey ||
+            (React__namespace.default.isValidElement(expandableChildren)
+                ? JSON.stringify(expandableChildren.props)
+                : undefined) ||
+            Math.random());
+    }, [expandableChildren, expandableContentKey]);
+    return (jsxRuntimeExports.jsxs(react.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(react.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(framerMotion.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(react.Box, { color: "gray.600", fontSize: expandableTextSize, paddingTop: 3, paddingX: 4, paddingBottom: 3, ...expandableChildrenStyles, children: expandableChildren }) }, contentKey)) })] }));
+});
+SelectionCard.displayName = 'SelectionCard';
 
 const Divider = React.forwardRef(({ variant = 'solid', colorScheme: borderColor = 'medium', ...props }, ref) => {
     return (jsxRuntimeExports.jsx(react.Divider, { ...colorScheme[borderColor], variant: variant, ...props, ref: ref }));
@@ -5143,50 +4921,36 @@ const Textarea = React.forwardRef(({ label, helperText, errorMessage, isInvalid,
 });
 Textarea.displayName = 'Textarea';
 
-const _excluded$3 = ["children"];
-const Popover = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      children
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__namespace.default.createElement(react.Popover, _extends$6({}, rest, {
-    ref: ref
-  }), React.Children.toArray(children).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
-    ref,
-    variant: props.variant,
-    key: "Popover-child-".concat(index)
-  })));
+const ChakraPopoverWithRef = react.Popover;
+const Popover = React.forwardRef(({ children, ...rest }, ref) => {
+    const { variant } = rest;
+    return (jsxRuntimeExports.jsx(ChakraPopoverWithRef, { ...rest, ref: ref, children: React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
+            return React.cloneElement(child, {
+                ref,
+                variant,
+                key: child.key ?? `Popover-child-${index}`,
+            });
+        }) }));
 });
-Popover.propTypes = {
-  /** React children */
-  children: PropTypes__default.default.node,
-  /** Styles the Popover */
-  variant: PropTypes__default.default.oneOf(['light', 'dark'])
-};
+Popover.displayName = 'Popover';
 
-const arrowStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
-    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
-  };
-};
+const arrowStyles = ({ variant }) => ({
+    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white',
+});
 
-const PopoverArrow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverArrow, _extends$6({
-    ref: ref
-  }, props, arrowStyles(props)));
+const ChakraPopoverArrowWithRef = react.PopoverArrow;
+const PopoverArrow = React.forwardRef((props, ref) => {
+    return (jsxRuntimeExports.jsx(ChakraPopoverArrowWithRef, { ref: ref, ...props, ...arrowStyles(props) }));
 });
+PopoverArrow.displayName = 'PopoverArrow';
 
-const pseudoStyles = variant => ({
-  bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
+const pseudoStyles = (variant) => ({
+    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
 });
-const closeButtonStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
+const closeButtonStyles = ({ variant }) => ({
     color: variant === 'dark' ? 'white' : 'black',
     fontSize: '0.5rem',
     position: 'absolute',
@@ -5195,56 +4959,21 @@ const closeButtonStyles = _ref => {
     padding: 4,
     borderTopRightRadius: 4,
     _hover: pseudoStyles(variant),
-    _focus: _objectSpread2(_objectSpread2({}, pseudoStyles(variant)), {}, {
-      boxShadow: 'outline'
-    })
-  };
-};
+    _focus: {
+        ...pseudoStyles(variant),
+        boxShadow: 'outline',
+    },
+});
 
-const PopoverCloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverCloseButton, _extends$6({
-    ref: ref
-  }, props, closeButtonStyles(props)));
+const PopoverCloseButton = React.forwardRef((props, ref) => {
+    return (jsxRuntimeExports.jsx(react.PopoverCloseButton, { ref: ref, ...props, ...closeButtonStyles(props) }));
 });
+PopoverCloseButton.displayName = 'PopoverCloseButton';
 
-const _excluded$2 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
-const PopoverContent = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      header,
-      variant,
-      children,
-      hideCloseButton,
-      hideArrow,
-      popoverBodyProps
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded$2);
-  return /*#__PURE__*/React__namespace.default.createElement(react.PopoverContent, _extends$6({}, rest, {
-    ref: ref
-  }), hideArrow ? null : /*#__PURE__*/React__namespace.default.createElement(PopoverArrow, {
-    variant: variant
-  }), hideCloseButton ? null : /*#__PURE__*/React__namespace.default.createElement(PopoverCloseButton, {
-    variant: variant
-  }), header ? /*#__PURE__*/React__namespace.default.createElement(react.PopoverHeader, null, header) : null, /*#__PURE__*/React__namespace.default.createElement(react.PopoverBody, popoverBodyProps, children));
-});
-PopoverContent.propTypes = {
-  /** React children */
-  children: PropTypes__default.default.node,
-  /** Whether or not to hide the close button */
-  hideCloseButton: PropTypes__default.default.bool,
-  /** Whether or not to hide the arrow */
-  hideArrow: PropTypes__default.default.bool,
-  /** Styles the Popover */
-  variant: PropTypes__default.default.oneOf(['light', 'dark']),
-  /** The string or node for the header (optional) */
-  header: PropTypes__default.default.oneOfType([PropTypes__default.default.node, PropTypes__default.default.string]),
-  /** Props to pass to the PopoverBody */
-  popoverBodyProps: PropTypes__default.default.object
-};
-PopoverContent.defaultProps = {
-  variant: 'light',
-  hideCloseButton: false,
-  hideArrow: false
-};
+const PopoverContent = React.forwardRef(({ header, variant = 'light', children, hideCloseButton = false, hideArrow = false, popoverBodyProps, ...rest }, ref) => {
+    return (jsxRuntimeExports.jsxs(react.PopoverContent, { ...rest, ref: ref, children: [hideArrow ? null : jsxRuntimeExports.jsx(PopoverArrow, { variant: variant }), hideCloseButton ? null : (jsxRuntimeExports.jsx(PopoverCloseButton, { variant: variant })), header ? jsxRuntimeExports.jsx(react.PopoverHeader, { children: header }) : null, jsxRuntimeExports.jsx(react.PopoverBody, { ...popoverBodyProps, children: children })] }));
+});
+PopoverContent.displayName = 'PopoverContent';
 
 const AutoSuggestSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -5339,7 +5068,7 @@ const AutoSuggestSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$6({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -5508,7 +5237,7 @@ const FilterSelectNode = _ref => {
     label: label,
     inputId: id,
     isInvalid: isInvalid
-  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$1({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5527,7 +5256,7 @@ const FilterSelectNode = _ref => {
     noOptionsMessage: () => noOptionsMessage
   }, props)));
 };
-const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$6({
+const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$1({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5588,45 +5317,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,
 };
 
 /**
@@ -5639,40 +5356,32 @@ const buttonGroupStyles = {
  * @note
  * must have multiple child elements
  */
-const ToggleButtonGroup = /*#__PURE__*/React.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__namespace.default.createElement(react.ButtonGroup, _extends$6({
-    ref: ref,
-    sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
-  }, groupProps), React__namespace.default.Children.map(children, CHILD => {
-    var _CHILD$props3;
-    return /*#__PURE__*/React__namespace.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 = React.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(react.ButtonGroup, { ref: ref, sx: { ...buttonGroupStyles, ..._buttonGroupStyles }, ...groupProps, children: React__namespace.default.Children.map(children, child => {
+            const CHILD = child;
+            return React__namespace.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__default.default.func.isRequired,
-  value: PropTypes__default.default.string.isRequired,
-  children: PropTypes__default.default.node.isRequired,
-  groupProps: PropTypes__default.default.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"];
@@ -5739,7 +5448,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$1({
     id: id,
     components: {
       DropdownIndicator
@@ -5763,7 +5472,7 @@ const CreatableSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       helperText
     } = props,
     additionalProps = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$6({
+  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$1({
     id: id,
     innerRef: ref,
     label: label,
@@ -5801,19 +5510,14 @@ CreatableSelectNode.propTypes = {
     current: PropTypes__default.default.instanceOf(Creatable__default.default)
   })
 };
-var CreatableSelect$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$6({
+var CreatableSelect$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$1({
   ref: ref
 }, props)));
 
-const Menu = react.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__namespace.default.createElement(react.Menu, _extends$6({}, props, {
-    ref: ref
-  }));
+const ChakraMenuWithRef = react.Menu;
+const Menu = React__namespace.default.forwardRef((props, ref) => {
+    return jsxRuntimeExports.jsx(ChakraMenuWithRef, { ...props, ref: ref });
 });
-Menu.propTypes = {
-  /** The React node that will render inside the element */
-  children: PropTypes__default.default.node
-};
 
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,