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

package/dist/index.esm.js

@@ -1,14 +1,14 @@
-import { ModalOverlay, ModalContent, Box, ModalCloseButton, Modal as Modal$1, keyframes, theme as theme$2, Button as Button$2, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, Alert as Alert$1, Icon, AlertTitle, AlertDescription, forwardRef as forwardRef$1, Tabs as Tabs$1, FormControl as FormControl$2, FormLabel, Text as Text$1, FormHelperText, FormErrorMessage, Select as Select$2, Switch as Switch$1, Grid as Grid$1, GridItem as GridItem$1, List as List$1, Spinner as Spinner$1, Heading as Heading$1, Container as Container$1, createMultiStyleConfigHelpers, extendTheme, ChakraProvider, Img, Image as Image$1, CircularProgress, Progress as Progress$1, Checkbox as Checkbox$1, Input as Input$2, InputGroup, InputLeftElement, InputRightElement, useTheme, Radio as Radio$1, RadioGroup as RadioGroup$1, Stack, usePrefersReducedMotion, Divider as Divider$1, Textarea as Textarea$1, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverCloseButton as PopoverCloseButton$1, PopoverContent as PopoverContent$1, PopoverHeader, PopoverBody, ButtonGroup, Menu as Menu$1 } from '@chakra-ui/react';
+import { ModalOverlay, ModalContent, Box, ModalCloseButton, Modal as Modal$1, keyframes, theme as theme$2, Button as Button$2, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, Alert as Alert$1, Icon, AlertTitle, AlertDescription, Tabs as Tabs$1, FormControl as FormControl$2, FormLabel, Text as Text$1, FormHelperText, FormErrorMessage, Select as Select$2, Switch as Switch$1, Grid as Grid$1, GridItem as GridItem$1, List as List$1, Spinner as Spinner$1, Heading as Heading$1, Container as Container$1, createMultiStyleConfigHelpers, extendTheme, ChakraProvider, Img, Image as Image$1, CircularProgress, Progress as Progress$1, Checkbox as Checkbox$1, Input as Input$2, InputGroup, InputLeftElement, InputRightElement, useTheme, Radio as Radio$1, RadioGroup as RadioGroup$1, Stack, usePrefersReducedMotion, Divider as Divider$1, Textarea as Textarea$1, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverCloseButton as PopoverCloseButton$1, PopoverContent as PopoverContent$1, PopoverHeader, PopoverBody, ButtonGroup, Menu as Menu$1 } from '@chakra-ui/react';
 export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AspectRatio, Badge, Input as BasicInput, Textarea as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, ButtonGroup, Center, CheckboxGroup, Circle, Code, Collapse, DrawerBody, DrawerCloseButton, Drawer as DrawerContainer, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Fade, Flex, HStack, Icon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, ListItem, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalFooter, ModalHeader, PopoverAnchor, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Square, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tooltip, Tr, VStack, createIcon, extendTheme, keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken } from '@chakra-ui/react';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import merge from 'lodash/merge';
-import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Global } from '@emotion/react';
 import { accordionAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 import template from 'lodash/template';
+import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/async';
 import Select$3, { components as components$1 } from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -2179,29 +2179,16 @@ const Drawer = ({ header, drawerCloseButton, children, headerProps, ...props })
     return (jsxRuntimeExports.jsxs(Drawer$1, { placement: "right", ...props, children: [jsxRuntimeExports.jsx(DrawerOverlay, {}), jsxRuntimeExports.jsxs(DrawerContent, { children: [jsxRuntimeExports.jsxs(DrawerHeader, { ...headerProps, children: [header, drawerCloseButton || jsxRuntimeExports.jsx(DrawerCloseButton, {})] }), children] })] }));
 };
 
-const AccordionActionButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    onClick
-  } = _ref;
-  const handleOnClick = e => {
-    if (onClick) {
-      e.preventDefault();
-    }
-    onClick === null || onClick === void 0 || onClick();
-  };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: ref,
-    fontSize: "sm",
-    role: "button",
-    onClick: handleOnClick,
-    color: "primary.default"
-  }, children);
+const AccordionActionButton = forwardRef(({ children, onClick }, ref) => {
+    const handleOnClick = (e) => {
+        if (onClick) {
+            e.preventDefault();
+        }
+        onClick?.();
+    };
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, fontSize: "sm", role: "button", onClick: handleOnClick, color: "primary.default", children: children }));
 });
-AccordionActionButton.propTypes = {
-  onClick: PropTypes.func,
-  children: PropTypes.node.isRequired
-};
+AccordionActionButton.displayName = 'AccordionActionButton';
 
 var _path$5;
 function _extends$6() {
@@ -2332,213 +2319,108 @@ const Alert = forwardRef(({ status = 'neutral', title = null, buttonProps = null
 });
 Alert.displayName = 'Alert';
 
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$2.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
 const variants$b = {
-  line: {
-    tablist: {
-      borderBottom: '2px solid',
-      borderColor: 'inherit'
-    },
-    tab: {
-      color: 'gray.600',
-      borderBottom: '2px solid',
-      borderColor: 'transparent',
-      marginBottom: '-2px',
-      _selected: {
-        color: 'primary.default',
-        borderColor: 'primary.default',
-        fontWeight: 'semibold'
-      },
-      _active: {
-        color: 'black',
-        bg: 'transparent'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      },
-      _hover: {
-        color: 'black'
-      }
-    }
-  },
-  enclosed: {
-    tablist: {
-      backgroundColor: 'white',
-      borderRadius: '8px',
-      borederColor: 'gray.200',
-      borderWidth: '1px',
-      paddingY: 1
+    line: {
+        tablist: {
+            borderBottom: '2px solid',
+            borderColor: 'inherit',
+        },
+        tab: {
+            color: 'gray.600',
+            borderBottom: '2px solid',
+            borderColor: 'transparent',
+            marginBottom: '-2px',
+            _selected: {
+                color: 'primary.default',
+                borderColor: 'primary.default',
+                fontWeight: 'semibold',
+            },
+            _active: {
+                color: 'black',
+                bg: 'transparent',
+            },
+            _disabled: {
+                opacity: 0.4,
+                cursor: 'not-allowed',
+            },
+            _hover: {
+                color: 'black',
+            },
+        },
+    },
+    enclosed: {
+        tablist: {
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            borderColor: 'gray.200',
+            borderWidth: '1px',
+            paddingY: 1,
+        },
+        tab: {
+            borderRadius: '6px',
+            marginX: 1,
+            _selected: {
+                fontWeight: 'semibold',
+                color: 'white',
+                backgroundColor: 'primary.default',
+                _hover: {
+                    backgroundColor: 'primary.600',
+                },
+            },
+            _active: {
+                backgroundColor: 'gray.200',
+            },
+            _disabled: {
+                opacity: 0.4,
+                cursor: 'not-allowed',
+            },
+        },
     },
-    tab: {
-      borderRadius: '6px',
-      marginX: 1,
-      _selected: {
-        fontWeight: 'semibold',
-        color: 'white',
-        backgroundColor: 'primary.default',
-        _hover: {
-          backgroundColor: 'primary.600'
-        }
-      },
-      _active: {
-        backgroundColor: 'gray.200'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      }
-    }
-  }
 };
-var styles$2 = merge(theme$2.components.Tabs, {
-  variants: variants$b
+const tabsStyle = merge(theme$2.components.Tabs, {
+    variants: variants$b,
 });
 
 const SIZE_SMALL = 'small';
 const SIZE_BODY = 'body';
 const SIZE_HEADING = 'heading';
-
-/**
- * ### `combineSizeWithVariant`
- * A function that takes in the `size` value, and the
- * `variant` value. The default-like styling for the `size` prop is merged with the styling from the
- * `variant` and a combined styleProp object is returned.
- *
- * @function combineSizeWithVariant
- * @param {string} args.size - The size of Tabs component
- * @param {string} args.variant - The style variant for the Text component
- * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
- */
-
-const combineSizeWithVariant = _ref => {
-  let {
-    size,
-    variant = 'line'
-  } = _ref;
-  const fontSizeMapping = {
-    [SIZE_SMALL]: fontSizes.xs,
-    [SIZE_BODY]: fontSizes.base,
-    [SIZE_HEADING]: fontSizes.lg
-  };
-  const styleProps = styles$2.variants["".concat(variant)];
-  styleProps.tab.fontSize = fontSizeMapping[size];
-  return styleProps;
+const combineSizeWithVariant = ({ size, variant = 'line', }) => {
+    const fontSizeMapping = {
+        [SIZE_SMALL]: fontSizes.xs,
+        [SIZE_BODY]: fontSizes.base,
+        [SIZE_HEADING]: fontSizes.lg,
+    };
+    const styleProps = variants$b[variant];
+    return {
+        ...styleProps,
+        tab: {
+            ...styleProps.tab,
+            fontSize: fontSizeMapping[size],
+        },
+    };
 };
 
-const _excluded$7 = ["size"];
 const sizeMapping = {
-  [SIZE_SMALL]: 'sm',
-  [SIZE_BODY]: 'md',
-  [SIZE_HEADING]: 'lg'
+    [SIZE_SMALL]: 'sm',
+    [SIZE_BODY]: 'md',
+    [SIZE_HEADING]: 'lg',
 };
-const Tabs = forwardRef$1((_ref, ref) => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$2({
-    size: sizeMapping[size]
-  }, props, combineSizeWithVariant({
-    size
-  }), {
-    ref: ref
-  }));
+const Tabs = React__default.forwardRef(({ size = SIZE_BODY, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Tabs$1, { size: sizeMapping[size], ...props, ...combineSizeWithVariant({ size }), ref: ref }));
 });
-Tabs.defaultProps = {
-  size: SIZE_BODY
-};
-Tabs.propTypes = {
-  /** The React node that will render inside the element */
-  children: PropTypes.node,
-  /** Controls the size of Tabs */
-  size: PropTypes.oneOf([SIZE_SMALL, SIZE_BODY, SIZE_HEADING])
-};
 
 var _path$1;
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$2() {
+  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1.apply(null, arguments);
+  }, _extends$2.apply(null, arguments);
 }
 var SvgChevronDown = function SvgChevronDown(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({}, props, {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({}, props, {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24",
@@ -2992,61 +2874,62 @@ var Heading_styles = {
 
 const parts$2 = ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption'];
 const baseStyle$b = {
-  table: {
-    borderCollapse: 'collapse',
-    color: 'text.primary.light',
-    width: '100%'
-  },
-  thead: {
-    borderBottom: '1px',
-    borderColor: 'gray.medium'
-  },
-  th: {
-    fontFamily: 'heading',
-    fontSize: variants$9.h4.fontSize,
-    fontWeight: 'semibold',
-    letterSpacing: 'unset',
-    padding: 4,
-    textAlign: 'start',
-    textTransform: 'none'
-  },
-  tr: {
-    borderBottom: '1px',
-    borderColor: 'gray.medium',
-    _last: {
-      border: 'none'
-    }
-  },
-  td: {
-    padding: 4,
-    textAlign: 'start'
-  }
+    table: {
+        borderCollapse: 'collapse',
+        color: 'text.primary.light',
+        width: '100%',
+    },
+    thead: {
+        borderBottom: '1px',
+        borderColor: 'gray.medium',
+    },
+    th: {
+        fontFamily: 'heading',
+        fontSize: variants$9.h4.fontSize,
+        fontWeight: 'semibold',
+        letterSpacing: 'unset',
+        padding: 4,
+        textAlign: 'start',
+        textTransform: 'none',
+    },
+    tr: {
+        borderBottom: '1px',
+        borderColor: 'gray.medium',
+        _last: {
+            border: 'none',
+        },
+    },
+    td: {
+        padding: 4,
+        textAlign: 'start',
+    },
 };
 const roundedWhiteVariant = {
-  table: {
-    backgroundColor: 'background.white',
-    borderRadius: 6,
-    boxShadow: 'md',
-    marginBottom: 1
-  }
+    table: {
+        backgroundColor: 'background.white',
+        borderRadius: 6,
+        boxShadow: 'md',
+        marginBottom: 1,
+    },
 };
 const roundedGrayVariant = {
-  table: _objectSpread2(_objectSpread2({}, roundedWhiteVariant.table), {}, {
-    backgroundColor: 'background.gray'
-  })
+    table: {
+        ...roundedWhiteVariant.table,
+        backgroundColor: 'background.gray',
+    },
 };
 const variants$8 = {
-  rounded: roundedWhiteVariant,
-  roundedGray: roundedGrayVariant
+    rounded: roundedWhiteVariant,
+    roundedGray: roundedGrayVariant,
 };
 const defaultProps$6 = {
-  variant: 'rounded'
+    variant: 'rounded',
 };
 var Table_styles = {
-  parts: parts$2,
-  variants: variants$8,
-  baseStyle: baseStyle$b,
-  defaultProps: defaultProps$6
+    parts: parts$2,
+    variants: variants$8,
+    baseStyle: baseStyle$b,
+    defaultProps: defaultProps$6,
 };
 
 const chakraLinkStyle = theme$2.components.Link;
@@ -3513,6 +3396,79 @@ const inputStyle = merge(theme$2.components.Input, {
     variants: variants$5,
 });
 
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1.apply(null, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
 //Below isn't being used in build for some reason
 const variants$4 = {
   refreshed: {
@@ -3630,6 +3586,7 @@ const footer$1 = {
     padding: 4,
     gap: 4,
     justifyContent: 'flex-start',
+    alignItems: 'normal',
     flexDirection: { base: 'column', desktop: 'row-reverse' },
 };
 
@@ -4010,168 +3967,168 @@ const progressStyle = {
 };
 
 const baseStyle = {
-  button: {
-    px: 8,
-    py: 3,
-    fontSize: 'base',
-    fontFamily: 'body',
-    lineHeight: 0.875,
-    fontWeight: 'semibold',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: 'base',
-    textTransform: 'capitalize',
-    transition: 'all normal ease',
-    _hover: {
-      bg: 'gray.50',
-      borderColor: 'gray.200'
-    },
-    _disabled: {
-      cursor: 'not-allowed',
-      opacity: 1,
-      bg: 'gray.200',
-      borderColor: 'gray.200',
-      color: 'gray.600'
-    },
-    _focus: {
-      zIndex: 1,
-      boxShadow: 'outline'
-    }
-  },
-  list: {
-    bg: 'white',
-    boxShadow: 'base',
-    padding: 6,
-    zIndex: 'layer1',
-    width: 64
-  },
-  item: {
-    paddingX: 2,
-    paddingY: 1.5,
-    _focus: {
-      zIndex: 1,
-      boxShadow: 'outline'
-    }
-  },
-  groupTitle: {
-    fontWeight: 'semibold',
-    color: 'gray.600',
-    padding: 2
-  },
-  command: {
-    // this will style the text defined by the command
-    // prop in the MenuItem and MenuItemOption components
-    opacity: '0.8',
-    fontFamily: 'mono',
-    fontSize: 'sm',
-    letterSpacing: 'tighter',
-    paddingL: 4
-  },
-  divider: {
-    marginY: 2,
-    borderColor: 'gray.200'
-  }
-};
-const variants = {
-  basic: {
     button: {
-      bg: 'primary.default',
-      borderColor: 'primary.default',
-      color: 'white',
-      _hover: {
-        bg: 'primary.600',
-        borderColor: 'primary.600',
-        color: 'white',
+        px: 8,
+        py: 3,
+        fontSize: 'base',
+        fontFamily: 'body',
+        lineHeight: 0.875,
+        fontWeight: 'semibold',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: 'base',
+        textTransform: 'capitalize',
+        transition: 'all normal ease',
+        _hover: {
+            bg: 'gray.50',
+            borderColor: 'gray.200',
+        },
         _disabled: {
-          bg: 'gray.200',
-          borderColor: 'gray.200',
-          color: 'gray.600'
-        }
-      }
+            cursor: 'not-allowed',
+            opacity: 1,
+            bg: 'gray.200',
+            borderColor: 'gray.200',
+            color: 'gray.600',
+        },
+        _focus: {
+            zIndex: 1,
+            boxShadow: 'outline',
+        },
     },
     list: {
-      bg: 'white',
-      boxShadow: 'base',
-      zIndex: 'layer1',
-      borderColor: 'gray.100',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderRadius: 'base',
-      padding: 4,
-      width: 64
+        bg: 'white',
+        boxShadow: 'base',
+        padding: 6,
+        zIndex: 'layer1',
+        width: 64,
+    },
+    item: {
+        paddingX: 2,
+        paddingY: 1.5,
+        _focus: {
+            zIndex: 1,
+            boxShadow: 'outline',
+        },
     },
     groupTitle: {
-      fontWeight: 'semibold',
-      fontSize: 'md',
-      color: 'gray.600',
-      padding: 2
+        fontWeight: 'semibold',
+        color: 'gray.600',
+        padding: 2,
     },
-    item: {
-      fontWeight: 'semibold',
-      _hover: {
-        color: 'gray.600'
-      }
-    }
-  },
-  full: {
-    button: {
-      height: 8,
-      fontSize: 'sm',
-      fontWeight: 'semibold',
-      color: 'black',
-      borderColor: 'white',
-      backgroundColor: 'white',
-      borderRadius: 'base',
-      paddingX: 3,
-      paddingY: 'auto',
-      _hover: {
-        color: 'black',
-        backgroundColor: 'gray.50',
-        borderColor: 'gray.50'
-      },
-      _active: {
-        color: 'primary.default',
-        backgroundColor: 'gray.50',
-        borderColor: 'gray.50',
-        _hover: {
-          color: 'primary.600',
-          backgroundColor: 'gray.50',
-          borderColor: 'gray.50'
-        }
-      }
+    command: {
+        // this will style the text defined by the command
+        // prop in the MenuItem and MenuItemOption components
+        opacity: '0.8',
+        fontFamily: 'mono',
+        fontSize: 'sm',
+        letterSpacing: 'tighter',
+        paddingLeft: 4,
     },
-    list: {
-      height: '30rem',
-      width: '100vw',
-      padding: 8,
-      backgroundColor: 'white'
+    divider: {
+        marginY: 2,
+        borderColor: 'gray.200',
     },
-    groupTitle: {
-      fontSize: 'sm',
-      weight: 'normal',
-      color: 'gray.600'
+};
+const variants = {
+    basic: {
+        button: {
+            bg: 'primary.default',
+            borderColor: 'primary.default',
+            color: 'white',
+            _hover: {
+                bg: 'primary.600',
+                borderColor: 'primary.600',
+                color: 'white',
+                _disabled: {
+                    bg: 'gray.200',
+                    borderColor: 'gray.200',
+                    color: 'gray.600',
+                },
+            },
+        },
+        list: {
+            bg: 'white',
+            boxShadow: 'base',
+            zIndex: 'layer1',
+            borderColor: 'gray.100',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderRadius: 'base',
+            padding: 4,
+            width: 64,
+        },
+        groupTitle: {
+            fontWeight: 'semibold',
+            fontSize: 'md',
+            color: 'gray.600',
+            padding: 2,
+        },
+        item: {
+            fontWeight: 'semibold',
+            _hover: {
+                color: 'gray.600',
+            },
+        },
+    },
+    full: {
+        button: {
+            height: 8,
+            fontSize: 'sm',
+            fontWeight: 'semibold',
+            color: 'black',
+            borderColor: 'white',
+            backgroundColor: 'white',
+            borderRadius: 'base',
+            paddingX: 3,
+            paddingY: 'auto',
+            _hover: {
+                color: 'black',
+                backgroundColor: 'gray.50',
+                borderColor: 'gray.50',
+            },
+            _active: {
+                color: 'primary.default',
+                backgroundColor: 'gray.50',
+                borderColor: 'gray.50',
+                _hover: {
+                    color: 'primary.600',
+                    backgroundColor: 'gray.50',
+                    borderColor: 'gray.50',
+                },
+            },
+        },
+        list: {
+            height: '30rem',
+            width: '100vw',
+            padding: 8,
+            backgroundColor: 'white',
+        },
+        groupTitle: {
+            fontSize: 'sm',
+            weight: 'normal',
+            color: 'gray.600',
+        },
+        item: {
+            display: 'block',
+            paddingX: 3.5,
+            paddingY: 2.5,
+            marginBottom: 2,
+            _last: {
+                marginBottom: 0,
+            },
+            _hover: {
+                backgroundColor: 'gray.50',
+            },
+            _focus: {
+                boxShadow: 'none',
+                backgroundColor: 'gray.50',
+            },
+        },
     },
-    item: {
-      display: 'block',
-      paddingX: 3.5,
-      paddingY: 2.5,
-      marginBottom: 2,
-      _last: {
-        marginBottom: 0
-      },
-      _hover: {
-        backgroundColor: 'gray.50'
-      },
-      _focus: {
-        boxShadow: 'none',
-        backgroundColor: 'gray.50'
-      }
-    }
-  }
 };
-var Menu_styles = merge(theme$2.components.Menu, {
-  baseStyle,
-  variants
+const menuStyle = merge(theme$2.components.Menu, {
+    baseStyle,
+    variants,
 });
 
 var components = /*#__PURE__*/Object.freeze({
@@ -4189,7 +4146,7 @@ var components = /*#__PURE__*/Object.freeze({
   InputRefreshed: index$1,
   Link: linkStyle,
   List: listStyle,
-  Menu: Menu_styles,
+  Menu: menuStyle,
   Modal: modalStyle,
   Popover: popoverStyle,
   Progress: progressStyle,
@@ -4200,7 +4157,7 @@ var components = /*#__PURE__*/Object.freeze({
   Spinner: Spinner_styles,
   Switch: switchStyle,
   Table: Table_styles,
-  Tabs: styles$2,
+  Tabs: tabsStyle,
   Text: textStyle
 });
 
@@ -4325,7 +4282,7 @@ const Input$1 = forwardRef(({ label, helperText, errorMessage, isInvalid, isDisa
 });
 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
@@ -4448,10 +4405,10 @@ const FormControl = /*#__PURE__*/forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$2({}, props, {
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$1({}, props, {
     ref: ref
-  }, controlStyles), /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && /*#__PURE__*/React__default.createElement(InputLeftElement, _extends$2({
+  }, controlStyles), /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && /*#__PURE__*/React__default.createElement(InputLeftElement, _extends$1({
     pointerEvents: "none",
     top: "52%",
     left: "1.3rem",
@@ -4462,7 +4419,7 @@ const FormControl = /*#__PURE__*/forwardRef((_ref, ref) => {
     position: "relative"
   }, children, label && /*#__PURE__*/React__default.createElement(FormLabel, {
     htmlFor: id
-  }, label)), rightElement && /*#__PURE__*/React__default.createElement(InputRightElement, _extends$2({
+  }, label)), rightElement && /*#__PURE__*/React__default.createElement(InputRightElement, _extends$1({
     top: "50%",
     right: "-1rem",
     transform: "translate(-50%,-50%)"
@@ -4490,7 +4447,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes.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
@@ -4511,7 +4468,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4529,7 +4486,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__default.createElement(Input$2, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Input$2, _extends$1({
     placeholder: placeholder,
     ref: ref,
     className: classes,
@@ -4554,7 +4511,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes.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,
 /**
@@ -4578,7 +4535,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -4595,7 +4552,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     sx: formControlStyles
-  }, /*#__PURE__*/React__default.createElement(Select$2, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Select$2, _extends$1({
     icon: /*#__PURE__*/React__default.createElement(Icon, {
       as: ForwardRef$1
     }),
@@ -4619,7 +4576,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes.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
@@ -4643,7 +4600,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4661,7 +4618,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElementStyles: rightElementStyles,
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Button$2, _extends$1({
     ref: ref,
     className: classes,
     variant: "refreshed",
@@ -4814,7 +4771,7 @@ const AutoSuggestSelect$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__default.createElement("div", _extends$2({
+    return /*#__PURE__*/React__default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -4898,104 +4855,31 @@ const RadioGroup = forwardRef(({ label, errorMessage, defaultValue, isDisabled,
 });
 RadioGroup.displayName = 'RadioGroup';
 
-const _excluded$2 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
-const SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      isChecked,
-      isDisabled,
-      value,
-      helperText,
-      expandableChildren,
-      defaultChecked,
-      isRadio,
-      label,
-      isExpandable,
-      size = 'md',
-      expandableChildrenStyles = {},
-      topChild,
-      expandableContentKey = 'selection-card-content'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  const Component = isRadio ? Radio : Checkbox;
-  const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
-  const hasExpandableContent = isExpandable && isChecked && expandableChildren;
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  // Create a unique key based on the content to force re-animation
-  const contentKey = React__default.useMemo(() => {
-    if (typeof expandableChildren === 'string') {
-      return expandableChildren;
-    }
-    return expandableContentKey || JSON.stringify(expandableChildren === null || expandableChildren === void 0 ? void 0 : expandableChildren.props) || Math.random();
-  }, [expandableChildren, expandableContentKey]);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    borderRadius: "lg",
-    borderColor: isChecked ? 'primary.default' : 'gray.medium',
-    borderWidth: "1px",
-    _hover: {
-      borderColor: isDisabled ? 'gray.medium' : 'primary.default'
-    },
-    overflow: topChild ? 'hidden' : 'auto'
-  }, topChild, /*#__PURE__*/React__default.createElement(Box, {
-    borderColor: "gray.medium",
-    borderBottomWidth: hasExpandableContent ? '1px' : 0
-  }, /*#__PURE__*/React__default.createElement(Component, _extends$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__default.createElement(AnimatePresence, {
-    mode: "wait"
-  }, hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
-    as: motion.div,
-    key: contentKey,
-    initial: {
-      height: 0,
-      opacity: 0
-    },
-    animate: {
-      height: 'auto',
-      opacity: 1
-    },
-    exit: {
-      height: 0,
-      opacity: 0
-    },
-    transition: {
-      duration: prefersReducedMotion ? 0 : 0.15,
-      ease: 'easeOut'
-    },
-    overflow: "hidden"
-  }, /*#__PURE__*/React__default.createElement(Box, _extends$2({
-    color: "gray.600",
-    fontSize: expandableTextSize,
-    paddingTop: 3,
-    paddingX: 4,
-    paddingBottom: 3
-  }, expandableChildrenStyles), expandableChildren))));
+const MotionBox = motion(Box);
+const SelectionCard = forwardRef(({ isChecked, isDisabled, value, helperText, expandableChildren, defaultChecked, isRadio, label, isExpandable, size = 'md', expandableChildrenStyles = {}, topChild, expandableContentKey = 'selection-card-content', ...props }, ref) => {
+    const Component = isRadio ? Radio : Checkbox;
+    const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+    const hasExpandableContent = isExpandable && isChecked && expandableChildren;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    // Create a unique key based on the content to force re-animation
+    const contentKey = React__default.useMemo(() => {
+        if (typeof expandableChildren === 'string') {
+            return expandableChildren;
+        }
+        return (expandableContentKey ||
+            (React__default.isValidElement(expandableChildren)
+                ? JSON.stringify(expandableChildren.props)
+                : undefined) ||
+            Math.random());
+    }, [expandableChildren, expandableContentKey]);
+    return (jsxRuntimeExports.jsxs(Box, { borderRadius: "lg", borderColor: isChecked ? 'primary.default' : 'gray.medium', borderWidth: "1px", _hover: {
+            borderColor: isDisabled ? 'gray.medium' : 'primary.default',
+        }, overflow: topChild ? 'hidden' : 'auto', children: [topChild, jsxRuntimeExports.jsx(Box, { borderColor: "gray.medium", borderBottomWidth: hasExpandableContent ? '1px' : 0, children: jsxRuntimeExports.jsx(Component, { ref: ref, isChecked: isChecked, isDisabled: isDisabled, isFocusable: !isDisabled, value: value, defaultChecked: defaultChecked, helperText: helperText, size: size, width: "100%", paddingX: 4, paddingY: 3, ...props, children: label }) }), jsxRuntimeExports.jsx(AnimatePresence, { mode: "wait", children: hasExpandableContent && (jsxRuntimeExports.jsx(MotionBox, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                        duration: prefersReducedMotion ? 0 : 0.15,
+                        ease: 'easeOut',
+                    }, overflow: "hidden", children: jsxRuntimeExports.jsx(Box, { color: "gray.600", fontSize: expandableTextSize, paddingTop: 3, paddingX: 4, paddingBottom: 3, ...expandableChildrenStyles, children: expandableChildren }) }, contentKey)) })] }));
 });
-SelectionCard.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  expandableChildren: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  defaultChecked: PropTypes.bool,
-  isChecked: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  helperText: PropTypes.string,
-  isRadio: PropTypes.bool,
-  isExpandable: PropTypes.bool,
-  expandableChildrenStyles: PropTypes.object,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes.element,
-  expandableContentKey: PropTypes.string
-};
+SelectionCard.displayName = 'SelectionCard';
 
 const Divider = forwardRef(({ variant = 'solid', colorScheme: borderColor = 'medium', ...props }, ref) => {
     return (jsxRuntimeExports.jsx(Divider$1, { ...colorScheme[borderColor], variant: variant, ...props, ref: ref }));
@@ -5155,7 +5039,7 @@ const AutoSuggestSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
       innerRef,
       innerProps
     } = _ref2;
-    return /*#__PURE__*/React__default.createElement("div", _extends$2({
+    return /*#__PURE__*/React__default.createElement("div", _extends$1({
       style: clearIndicatorStyles,
       ref: innerRef
     }, innerProps), /*#__PURE__*/React__default.createElement(ForwardRef, null));
@@ -5324,7 +5208,7 @@ const FilterSelectNode = _ref => {
     label: label,
     inputId: id,
     isInvalid: isInvalid
-  }, /*#__PURE__*/React__default.createElement(Select$3, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Select$3, _extends$1({
     ref: innerRef,
     classNamePrefix: "fe-ui-filter-select",
     closeMenuOnSelect: true,
@@ -5343,7 +5227,7 @@ const FilterSelectNode = _ref => {
     noOptionsMessage: () => noOptionsMessage
   }, props)));
 };
-const FilterSelect = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(FilterSelectNode, _extends$2({
+const FilterSelect = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(FilterSelectNode, _extends$1({
   innerRef: ref
 }, props)));
 FilterSelect.propTypes = {
@@ -5404,45 +5288,33 @@ FilterSelectNode.propTypes = {
 };
 
 const defaultStyles = {
-  border: 0,
-  borderRadius: '4px',
-  fontWeight: 'normal',
-  paddingX: 4,
-  paddingY: 1,
-  _hover: {
-    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
-  },
-  _focus: {
-    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
-  }
+    border: 0,
+    borderRadius: '4px',
+    fontWeight: 'normal',
+    paddingX: 4,
+    paddingY: 1,
+    _hover: { boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)' },
+    _focus: { boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)' },
 };
 const inactiveStyles = {
-  color: 'black',
-  borderColor: 'gray.100',
-  bg: 'gray.100',
-  _hover: {
-    bg: 'gray.100'
-  },
-  _active: {
-    bg: 'gray.100'
-  }
+    color: 'black',
+    borderColor: 'gray.100',
+    bg: 'gray.100',
+    _hover: { bg: 'gray.100' },
+    _active: { bg: 'gray.100' },
 };
 const activeStyles = {
-  color: 'black',
-  fontWeight: 'semibold',
-  boxShadow: 'sm',
-  bg: 'white',
-  _hover: {
-    bg: 'white'
-  },
-  _active: {
-    bg: 'white'
-  }
+    color: 'black',
+    fontWeight: 'semibold',
+    boxShadow: 'sm',
+    bg: 'white',
+    _hover: { bg: 'white' },
+    _active: { bg: 'white' },
 };
 const buttonGroupStyles = {
-  borderRadius: '4px',
-  backgroundColor: 'gray.100',
-  padding: 1
+    borderRadius: '4px',
+    backgroundColor: 'gray.100',
+    padding: 1,
 };
 
 /**
@@ -5455,40 +5327,32 @@ const buttonGroupStyles = {
  * @note
  * must have multiple child elements
  */
-const ToggleButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    value,
-    children,
-    groupProps,
-    buttonGroupStyles: _buttonGroupStyles = {},
-    childrenStyles = {}
-  } = props;
-  if (!children) throw new Error('Children required');
-
-  // iterate over array of child nodes to apply extended props
-  return /*#__PURE__*/React__default.createElement(ButtonGroup, _extends$2({
-    ref: ref,
-    sx: _objectSpread2(_objectSpread2({}, buttonGroupStyles), _buttonGroupStyles)
-  }, groupProps), React__default.Children.map(children, CHILD => {
-    var _CHILD$props3;
-    return /*#__PURE__*/React__default.cloneElement(CHILD, _objectSpread2({
-      onClick: () => {
-        var _CHILD$props, _CHILD$props2;
-        if (value === (CHILD === null || CHILD === void 0 || (_CHILD$props = CHILD.props) === null || _CHILD$props === void 0 ? void 0 : _CHILD$props.value)) return;
-        onChange(CHILD === null || CHILD === void 0 || (_CHILD$props2 = CHILD.props) === null || _CHILD$props2 === void 0 ? void 0 : _CHILD$props2.value);
-      }
-    }, {
-      sx: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles), value !== (CHILD === null || CHILD === void 0 || (_CHILD$props3 = CHILD.props) === null || _CHILD$props3 === void 0 ? void 0 : _CHILD$props3.value) ? inactiveStyles : activeStyles), childrenStyles)
-    }));
-  }));
+const ToggleButtonGroup = forwardRef((props, ref) => {
+    const { onChange, value, children, groupProps, buttonGroupStyles: _buttonGroupStyles = {}, childrenStyles = {}, } = props;
+    if (!children)
+        throw new Error('Children required');
+    // iterate over array of child nodes to apply extended props
+    return (jsxRuntimeExports.jsx(ButtonGroup, { ref: ref, sx: { ...buttonGroupStyles, ..._buttonGroupStyles }, ...groupProps, children: React__default.Children.map(children, child => {
+            const CHILD = child;
+            return React__default.cloneElement(CHILD, {
+                onClick: () => {
+                    if (value === CHILD?.props?.value)
+                        return;
+                    onChange(CHILD?.props?.value);
+                },
+                ...{
+                    sx: {
+                        ...defaultStyles,
+                        ...(value !== CHILD?.props?.value
+                            ? inactiveStyles
+                            : activeStyles),
+                        ...childrenStyles,
+                    },
+                },
+            });
+        }) }));
 });
-ToggleButtonGroup.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  groupProps: PropTypes.object
-};
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
 const _excluded = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText", "innerRef"],
   _excluded2 = ["id", "label", "isInvalid", "isLoading", "isRequired", "options", "placeholder", "errorMessage", "helperText"];
@@ -5555,7 +5419,7 @@ const CreatableSelectNode = _ref => {
     helperText: helperText,
     label: label,
     inputId: id
-  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$2({
+  }, /*#__PURE__*/React__default.createElement(Creatable, _extends$1({
     id: id,
     components: {
       DropdownIndicator
@@ -5579,7 +5443,7 @@ const CreatableSelect = /*#__PURE__*/forwardRef((props, ref) => {
       helperText
     } = props,
     additionalProps = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$2({
+  return /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$1({
     id: id,
     innerRef: ref,
     label: label,
@@ -5617,19 +5481,14 @@ CreatableSelectNode.propTypes = {
     current: PropTypes.instanceOf(Creatable)
   })
 };
-var CreatableSelect$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$2({
+var CreatableSelect$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(CreatableSelectNode, _extends$1({
   ref: ref
 }, props)));
 
-const Menu = forwardRef$1((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(Menu$1, _extends$2({}, props, {
-    ref: ref
-  }));
+const ChakraMenuWithRef = Menu$1;
+const Menu = React__default.forwardRef((props, ref) => {
+    return jsxRuntimeExports.jsx(ChakraMenuWithRef, { ...props, ref: ref });
 });
-Menu.propTypes = {
-  /** The React node that will render inside the element */
-  children: PropTypes.node
-};
 
 export { ANIMATION_TOKENS, AccordionActionButton, Alert, AlwaysMountedModal, AutoSuggestSelect, Button$1 as Button, Card, Checkbox, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, FilterSelect, Grid, GridItem, Heading, Image, Input$1 as Input, List, Loader, Menu, Modal, Popover, PopoverArrow, PopoverContent, Progress, Radio, RadioGroup, AutoSuggestSelect$1 as RefreshedAutoSuggestSelect, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input as RefreshedInput, Select as RefreshedSelectInput, Select$1 as Select, SelectionCard, Spinner, Switch, Tabs, Text, Textarea, ThemeProvider, ToggleButtonGroup };
 //# sourceMappingURL=index.esm.js.map