@spothero/ui 25.15.0-beta.1 → 25.16.0-beta.2

package/dist/index.cjs.js

@@ -4,11 +4,11 @@ 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 Select$2 = require('react-select');
 var Creatable = require('react-select/creatable');
@@ -35,9 +35,9 @@ 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);
@@ -2208,29 +2208,16 @@ 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$6() {
@@ -2361,213 +2348,108 @@ const Alert = React.forwardRef(({ status = 'neutral', title = null, buttonProps
 });
 Alert.displayName = 'Alert';
 
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$2.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
 const variants$b = {
-  line: {
-    tablist: {
-      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$7 = ["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$7);
-  return /*#__PURE__*/React__namespace.default.createElement(react.Tabs, _extends$2({
-    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",
@@ -3021,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;
@@ -3542,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: {
@@ -3659,6 +3615,7 @@ const footer$1 = {
     padding: 4,
     gap: 4,
     justifyContent: 'flex-start',
+    alignItems: 'normal',
     flexDirection: { base: 'column', desktop: 'row-reverse' },
 };
 
@@ -4039,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({
@@ -4218,7 +4175,7 @@ var components = /*#__PURE__*/Object.freeze({
   InputRefreshed: index$1,
   Link: linkStyle,
   List: listStyle,
-  Menu: Menu_styles,
+  Menu: menuStyle,
   Modal: modalStyle,
   Popover: popoverStyle,
   Progress: progressStyle,
@@ -4229,7 +4186,7 @@ var components = /*#__PURE__*/Object.freeze({
   Spinner: Spinner_styles,
   Switch: switchStyle,
   Table: Table_styles,
-  Tabs: styles$2,
+  Tabs: tabsStyle,
   Text: textStyle
 });
 
@@ -4354,7 +4311,7 @@ const Input$1 = React.forwardRef(({ label, helperText, errorMessage, isInvalid,
 });
 Input$1.displayName = 'Input';
 
-const _excluded$6 = ["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
@@ -4477,10 +4434,10 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$2({}, 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$2({
+  }, 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",
@@ -4491,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$2({
+  }, label)), rightElement && /*#__PURE__*/React__namespace.default.createElement(react.InputRightElement, _extends$1({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4519,7 +4476,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes__default.default.bool
 };
 
-const _excluded$5 = ["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
@@ -4540,7 +4497,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4558,7 +4515,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$2({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Input, _extends$1({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4583,7 +4540,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$4 = ["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,
 /**
@@ -4607,7 +4564,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -4624,7 +4581,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     sx: formControlStyles
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$2({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Select, _extends$1({
     icon: /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
       as: ForwardRef$1
     }),
@@ -4648,7 +4605,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$3 = ["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
@@ -4672,7 +4629,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4690,7 +4647,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$2({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$1({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4843,7 +4800,7 @@ const AutoSuggestSelect$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$2({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -4927,104 +4884,31 @@ const RadioGroup = React.forwardRef(({ label, errorMessage, defaultValue, isDisa
 });
 RadioGroup.displayName = 'RadioGroup';
 
-const _excluded$2 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
-const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      isChecked,
-      isDisabled,
-      value,
-      helperText,
-      expandableChildren,
-      defaultChecked,
-      isRadio,
-      label,
-      isExpandable,
-      size = 'md',
-      expandableChildrenStyles = {},
-      topChild,
-      expandableContentKey = 'selection-card-content'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  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$2({
-    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$2({
-    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 }));
@@ -5184,7 +5068,7 @@ const AutoSuggestSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$2({
+    return /*#__PURE__*/React__namespace.default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__namespace.default.createElement(ForwardRef, null));
@@ -5353,7 +5237,7 @@ const FilterSelectNode = _ref => {
     label: label,
     inputId: id,
     isInvalid: isInvalid
-  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$2({
+  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$1({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5372,7 +5256,7 @@ const FilterSelectNode = _ref => {
     noOptionsMessage: () => noOptionsMessage
   }, props)));
 };
-const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$2({
+const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$1({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5433,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,
 };
 
 /**
@@ -5484,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$2({
-    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"];
@@ -5584,7 +5448,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$2({
+  }, /*#__PURE__*/React__namespace.default.createElement(Creatable__default.default, _extends$1({
     id: id,
     components: {
       DropdownIndicator
@@ -5608,7 +5472,7 @@ const CreatableSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       helperText
     } = props,
     additionalProps = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$2({
+  return /*#__PURE__*/React__namespace.default.createElement(CreatableSelectNode, _extends$1({
     id: id,
     innerRef: ref,
     label: label,
@@ -5646,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$2({
+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$2({}, 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,