@xqmsg/ui-core 0.16.0 → 0.16.2

package/dist/ui-core.cjs.development.js

@@ -461,7 +461,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -470,13 +470,16 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
   var _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'text' : _ref2$type,
       isRequired = _ref2.isRequired,
+      rightElement = _ref2.rightElement,
+      leftElement = _ref2.leftElement,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
-    ref: _ref,
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     type: type,
     isRequired: isRequired
-  }, props));
+  }, props, {
+    ref: _ref
+  })), rightElement && rightElement);
 });
 
 /**
@@ -513,7 +516,8 @@ var Dropdown = function Dropdown(_ref) {
   var onSelectItem = _ref.onSelectItem,
       options = _ref.options,
       dropdownRef = _ref.dropdownRef,
-      position = _ref.position;
+      position = _ref.position,
+      optionIndex = _ref.optionIndex;
   var DropdownContent = React.useMemo(function () {
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
@@ -540,18 +544,19 @@ var Dropdown = function Dropdown(_ref) {
         px: "8px",
         py: "4px",
         width: "100%",
-        color: colors.label.primary.light,
+        color: optionIndex === idx ? colors.label.primary.dark : colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
           bg: colors.fill.action,
           borderRadius: '4px',
           width: '100%'
         },
-        bg: "inherit",
-        whiteSpace: "nowrap"
+        bg: optionIndex === idx ? colors.fill.action : 'inherit',
+        whiteSpace: "nowrap",
+        id: option.value
       }, option.label));
     });
-  }, [onSelectItem, options]);
+  }, [onSelectItem, optionIndex, options]);
   return /*#__PURE__*/React__default.createElement(react.Flex, {
     flexDirection: "column",
     ref: dropdownRef,
@@ -640,9 +645,21 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
-  var _useState3 = React.useState('top'),
-      position = _useState3[0],
-      setPosition = _useState3[1];
+  var _useState3 = React.useState(null),
+      optionIndex = _useState3[0],
+      setOptionIndex = _useState3[1];
+
+  var _useState4 = React.useState('top'),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      searchValue = _useState5[0],
+      setSearchValue = _useState5[1];
+
+  var _useState6 = React.useState(''),
+      debouncedSearchValue = _useState6[0],
+      setDebouncedSearchValue = _useState6[1];
 
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
@@ -677,6 +694,92 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     setIsFocussed(false);
   };
 
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+
+    if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      setIsFocussed(true);
+      return setOptionIndex(initialOptionIndex);
+    }
+
+    if (isFocussed) {
+      if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+        return setOptionIndex(initialOptionIndex);
+      }
+
+      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+        var _dropdownMenuRef$curr;
+
+        var incrementValue = options[optionIndex - 1] && options[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        setOptionIndex(optionIndex - incrementValue);
+        return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
+        });
+      }
+
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < options.length) {
+        var _dropdownMenuRef$curr2;
+
+        var _incrementValue = options[optionIndex + 1] && options[optionIndex + 1].value === 'section_header' ? 2 : 1;
+
+        setOptionIndex(optionIndex + _incrementValue);
+        return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
+        });
+      }
+
+      if (e.key === 'Enter' && optionIndex !== null) {
+        var option = options.find(function (_, idx) {
+          return optionIndex === idx;
+        });
+        if (!option) return;
+
+        if (handleOnChange) {
+          handleOnChange(option.value);
+        }
+
+        setSelectedOption(option == null ? void 0 : option.label);
+        setValue(name, option.value, {
+          shouldDirty: true,
+          shouldValidate: true
+        });
+        return setIsFocussed(false);
+      }
+
+      if (e.key === 'Tab') {
+        return setIsFocussed(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    if (searchValue.length) {
+      var _dropdownMenuRef$curr3;
+
+      var idx = options.findIndex(function (option) {
+        return option.label.substring(0, searchValue.length).toLowerCase() === searchValue.toLowerCase();
+      });
+      (_dropdownMenuRef$curr3 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr3.scrollTo({
+        top: idx * 24,
+        behavior: 'smooth'
+      });
+      setSearchValue('');
+      setDebouncedSearchValue('');
+    }
+  }, [options, searchValue]);
+  var updateSearchValue = React.useMemo(function () {
+    return lodash.debounce(function (val) {
+      setSearchValue(val);
+    }, 1000);
+  }, []);
+
+  var update = function update(value) {
+    updateSearchValue(value);
+    setDebouncedSearchValue(value);
+  };
+
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
     position: "relative"
@@ -694,24 +797,10 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     value: selectedOption,
     disabled: disabled,
     autoComplete: "off",
-    onKeyDown: function onKeyDown(e) {
-      if (isFocussed) {
-        var _dropdownMenuRef$curr;
-
-        if (e.key === 'Tab') {
-          return setIsFocussed(false);
-        }
-
-        var idx = options.findIndex(function (option) {
-          return option.label[0].toLocaleLowerCase() === e.key;
-        });
-        console.log(idx);
-        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
-          top: idx * 27,
-          behavior: 'smooth'
-        });
-      }
-    }
+    onChange: function onChange(e) {
+      return update(debouncedSearchValue.concat(e.target.value));
+    },
+    onKeyDown: handleOnKeyDown
   })), /*#__PURE__*/React__default.createElement(react.InputRightElement, {
     cursor: disabled ? 'not-allowed' : 'pointer',
     onClick: function onClick() {
@@ -727,7 +816,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     onSelectItem: function onSelectItem(option) {
       return handleOnSelectItem(option);
     },
-    options: options
+    options: options,
+    optionIndex: optionIndex
   }));
 });
 
@@ -833,10 +923,26 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       shouldSideScroll = _useState4[0],
       setShouldSideScroll = _useState4[1];
 
-  var _useState5 = React.useState('top'),
-      position = _useState5[0],
-      setPosition = _useState5[1];
+  var _useState5 = React.useState(null),
+      optionIndex = _useState5[0],
+      setOptionIndex = _useState5[1];
+
+  var _useState6 = React.useState('top'),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  var _useState7 = React.useState(''),
+      searchValue = _useState7[0],
+      setSearchValue = _useState7[1];
 
+  var _useState8 = React.useState(''),
+      debouncedSearchValue = _useState8[0],
+      setDebouncedSearchValue = _useState8[1];
+
+  console.log({
+    searchValue: searchValue,
+    debouncedSearchValue: debouncedSearchValue
+  });
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
     if (window.innerHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
@@ -916,26 +1022,89 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: dropdownRef,
-    position: "relative",
-    onKeyDown: function onKeyDown(e) {
-      if (isFocussed) {
-        var _dropdownMenuRef$curr;
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
 
-        if (e.key === 'Tab') {
-          return setIsFocussed(false);
-        }
+    if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      setIsFocussed(true);
+      return setOptionIndex(initialOptionIndex);
+    }
 
-        var idx = options.findIndex(function (option) {
-          return option.label[0].toLocaleLowerCase() === e.key;
+    if (isFocussed) {
+      if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+        return setOptionIndex(initialOptionIndex);
+      }
+
+      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+        var _dropdownMenuRef$curr;
+
+        var incrementValue = localOptions[optionIndex - 1] && localOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        setOptionIndex(optionIndex - incrementValue);
+        return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: optionIndex * 24,
+          behavior: 'smooth'
         });
-        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
-          top: idx * 27,
+      }
+
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < localOptions.length) {
+        var _dropdownMenuRef$curr2;
+
+        var _incrementValue = localOptions[optionIndex + 1] && localOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
+
+        setOptionIndex(optionIndex + _incrementValue);
+        return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
+          top: optionIndex * 24,
           behavior: 'smooth'
         });
       }
+
+      if (e.key === 'Enter' && optionIndex !== null) {
+        var option = localOptions.find(function (_, idx) {
+          return optionIndex === idx;
+        });
+        if (!option) return;
+        handleChange(option);
+        return setIsFocussed(false);
+      }
+
+      if (e.key === 'Tab') {
+        return setIsFocussed(false);
+      }
+
+      return update(debouncedSearchValue.concat(e.key));
     }
+  };
+
+  React.useEffect(function () {
+    if (searchValue.length) {
+      var _dropdownMenuRef$curr3;
+
+      var idx = options.findIndex(function (option) {
+        return option.label.substring(0, searchValue.length).toLowerCase() === searchValue.toLowerCase();
+      });
+      (_dropdownMenuRef$curr3 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr3.scrollTo({
+        top: idx * 24,
+        behavior: 'smooth'
+      });
+      setSearchValue('');
+      setDebouncedSearchValue('');
+    }
+  }, [options, searchValue]);
+  var updateSearchValue = React.useMemo(function () {
+    return lodash.debounce(function (val) {
+      setSearchValue(val);
+    }, 1000);
+  }, []);
+
+  var update = function update(value) {
+    updateSearchValue(value);
+    setDebouncedSearchValue(value);
+  };
+
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: dropdownRef,
+    position: "relative",
+    onKeyDown: handleOnKeyDown
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     fontSize: "13px",
     h: "26px",
@@ -1018,7 +1187,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       return handleChange(option);
     },
     options: localOptions,
-    position: position
+    position: position,
+    optionIndex: optionIndex
   }));
 });
 
@@ -1244,10 +1414,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         onRemoveTag(index);
       }
     }));
-  }) : /*#__PURE__*/React__default.createElement(react.Text, {
+  }) : null, !lastestFormValueToArray.length && !isFocussed ? /*#__PURE__*/React__default.createElement(react.Text, {
     color: colors.label.secondary.light,
     fontSize: "13px"
-  }, placeholder)), /*#__PURE__*/React__default.createElement(react.Flex, {
+  }, placeholder) : null), /*#__PURE__*/React__default.createElement(react.Flex, {
     flex: 1,
     minWidth: isFocussed ? '20%' : 0
   }, /*#__PURE__*/React__default.createElement(react.Input, {
@@ -1307,12 +1477,22 @@ var StackedSwitch = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
  */
 
 var Label$1 = function Label(_ref) {
-  var isRequired = _ref.isRequired,
+  var tooltipText = _ref.tooltipText,
+      isRequired = _ref.isRequired,
       label = _ref.label;
-  return /*#__PURE__*/React__default.createElement(react.FormLabel, null, label, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
+  return /*#__PURE__*/React__default.createElement(react.FormLabel, {
+    display: "flex",
+    alignItems: "center"
+  }, label, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
     ml: 1,
     color: colors.label.error
-  }, "*"));
+  }, "*"), !!tooltipText && /*#__PURE__*/React__default.createElement(react.Tooltip, {
+    label: tooltipText,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(icons.QuestionOutlineIcon, {
+    boxSize: "13px",
+    ml: "8px"
+  })));
 };
 
 /**
@@ -1329,6 +1509,7 @@ function Input(_ref) {
       name = _ref.name,
       helperText = _ref.helperText,
       options = _ref.options,
+      tooltipText = _ref.tooltipText,
       isInvalid = _ref.isInvalid,
       errorText = _ref.errorText,
       isRequired = _ref.isRequired,
@@ -1336,6 +1517,8 @@ function Input(_ref) {
       defaultValue = _ref.defaultValue,
       control = _ref.control,
       disabled = _ref.disabled,
+      rightElement = _ref.rightElement,
+      leftElement = _ref.leftElement,
       onChange = _ref.onChange,
       setValue = _ref.setValue,
       setError = _ref.setError,
@@ -1356,6 +1539,8 @@ function Input(_ref) {
           onChange: onChange,
           onBlur: onBlur,
           ref: ref,
+          rightElement: rightElement,
+          leftElement: leftElement,
           disabled: disabled,
           value: value
         });
@@ -1398,6 +1583,7 @@ function Input(_ref) {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
+          placeholder: placeholder,
           maxLength: maxLength,
           isInvalid: isInvalid,
           onChange: onChange,
@@ -1453,6 +1639,7 @@ function Input(_ref) {
           ref: ref,
           disabled: disabled,
           value: value,
+          placeholder: placeholder,
           setValue: setValue,
           setError: setError,
           clearErrors: clearErrors,
@@ -1499,6 +1686,7 @@ function Input(_ref) {
         position: "relative",
         py: label || helperText || isInvalid ? 6 : 0
       }, label && /*#__PURE__*/React__default.createElement(Label$1, {
+        tooltipText: tooltipText,
         label: label,
         isRequired: isRequired
       }), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
@@ -2382,214 +2570,9 @@ var Link = {
   variants: variants$5
 };
 
-var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
-var baseStyleOverlay = {
-  bg: 'blackAlpha.600',
-  zIndex: 'modal'
-};
-
-function baseStyleDialogContainer(props) {
-  var scrollBehavior = props.scrollBehavior;
-  return {
-    display: 'flex',
-    zIndex: 'modal',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
-    WebkitOverflowScrolling: 'touch'
-  };
-}
-
-function baseStyleDialog(props) {
-  var isCentered = props.isCentered,
-      scrollBehavior = props.scrollBehavior;
-  return {
-    borderRadius: 'lg',
-    bg: themeTools.mode('white', 'gray.700')(props),
-    color: 'inherit',
-    mt: isCentered ? {
-      base: 8,
-      md: 'auto'
-    } : '3.75rem',
-    mb: isCentered ? {
-      base: 20,
-      md: 'auto'
-    } : '3.75rem',
-    mx: 4,
-    zIndex: 'modal',
-    maxH: scrollBehavior === 'inside' ? 'calc(100vh - 7.5rem)' : undefined,
-    boxShadow: themeTools.mode('xl', 'dark-lg')(props)
-  };
-}
-
-var baseStyleHeader = {
-  px: 6,
-  py: 4,
-  minHeight: 20,
-  fontSize: 'xl',
-  display: 'flex',
-  alignItems: 'center',
-  fontWeight: 'bold',
-  bg: 'primary.900',
-  color: 'white',
-  userSelect: 'none'
-};
-var baseStyleCloseButton = {
-  position: 'absolute',
-  top: 2,
-  right: 3
-};
-
-function baseStyleBody(props) {
-  var scrollBehavior = props.scrollBehavior;
-  return {
-    px: [6, null, 20],
-    py: 10,
-    flex: 1,
-    overflow: scrollBehavior === 'inside' ? 'auto' : undefined
-  };
-}
-
-var baseStyleFooter = {
-  px: [6, null, 20],
-  pt: 5,
-  pb: 16
-};
-
-var baseStyle$9 = function baseStyle(props) {
-  return {
-    overlay: baseStyleOverlay,
-    dialogContainer: baseStyleDialogContainer(props),
-    dialog: baseStyleDialog(props),
-    header: baseStyleHeader,
-    closeButton: baseStyleCloseButton,
-    body: baseStyleBody(props),
-    footer: baseStyleFooter
-  };
-};
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-
-
-function getSize(value) {
-  var commonBodyFooterStyles = {
-    xs: {
-      px: 8,
-      pb: 8
-    },
-    sm: {
-      px: 8,
-      pb: 8
-    },
-    md: {
-      px: 8,
-      pb: 8
-    },
-    lg: {
-      px: 10,
-      pb: 10
-    },
-    xl: {
-      px: 12,
-      pb: 10
-    }
-  };
-  var bodyStyles = {
-    xs: {
-      py: 6
-    },
-    sm: {
-      py: 6
-    },
-    md: {
-      py: 6
-    },
-    lg: {
-      py: 8
-    },
-    xl: {
-      py: 8
-    }
-  };
-  var footerStyles = {
-    xs: {
-      pb: 8
-    },
-    sm: {
-      pb: 8
-    },
-    md: {
-      pb: 8
-    },
-    lg: {
-      pb: 10
-    },
-    xl: {
-      pb: 10
-    }
-  };
-
-  if (value === 'full') {
-    return {
-      content: {
-        maxW: '100vw',
-        h: '100vh'
-      }
-    };
-  }
-
-  return {
-    content: {
-      maxW: value
-    },
-    body: _extends({}, commonBodyFooterStyles[value], bodyStyles[value]),
-    footer: _extends({}, commonBodyFooterStyles[value], footerStyles[value])
-  };
-}
-
-var sizes = {
-  xs: /*#__PURE__*/getSize('xs'),
-  sm: /*#__PURE__*/getSize('sm'),
-  md: /*#__PURE__*/getSize('md'),
-  lg: /*#__PURE__*/getSize('lg'),
-  xl: /*#__PURE__*/getSize('xl'),
-  '2xl': /*#__PURE__*/getSize('2xl'),
-  '3xl': /*#__PURE__*/getSize('3xl'),
-  '4xl': /*#__PURE__*/getSize('4xl'),
-  '5xl': /*#__PURE__*/getSize('5xl'),
-  '6xl': /*#__PURE__*/getSize('6xl'),
-  full: /*#__PURE__*/getSize('full')
-};
-
-var warningVariant = function warningVariant() {
-  return {
-    header: {
-      bg: 'warning.300',
-      color: 'black'
-    }
-  };
-};
-
-var variants$6 = {
-  warning: warningVariant
-};
-var defaultProps$5 = {
-  size: 'lg',
-  isCentered: true
-};
-var Modal = {
-  parts: parts$4,
-  baseStyle: baseStyle$9,
-  sizes: sizes,
-  variants: variants$6,
-  defaultProps: defaultProps$5
-};
-
-var defaultProps$6 = Input$1.defaultProps,
-    variants$7 = Input$1.variants;
-var parts$5 = ['field', 'icon'];
+var defaultProps$5 = Input$1.defaultProps,
+    variants$6 = Input$1.variants;
+var parts$4 = ['field', 'icon'];
 
 function baseStyleField() {
   return _extends({}, Input$1.baseStyle.field, {
@@ -2610,7 +2593,7 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$a = function baseStyle() {
+var baseStyle$9 = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
@@ -2618,13 +2601,13 @@ var baseStyle$a = function baseStyle() {
 };
 
 var Select = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
-  variants: variants$7,
-  defaultProps: defaultProps$6
+  parts: parts$4,
+  baseStyle: baseStyle$9,
+  variants: variants$6,
+  defaultProps: defaultProps$5
 };
 
-var parts$6 = ['track', 'thumb'];
+var parts$5 = ['track', 'thumb'];
 
 function baseStyleTrack(props) {
   var c = props.colorScheme,
@@ -2657,14 +2640,14 @@ var baseStyleThumb = {
   transform: 'translateX(0)'
 };
 
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$a = function baseStyle(props) {
   return {
     track: baseStyleTrack(props),
     thumb: baseStyleThumb
   };
 };
 
-var sizes$1 = {
+var sizes = {
   sm: {
     track: {
       w: '1.375rem',
@@ -2705,19 +2688,19 @@ var sizes$1 = {
     }
   }
 };
-var defaultProps$7 = {
+var defaultProps$6 = {
   size: 'md',
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
-  sizes: sizes$1,
-  defaultProps: defaultProps$7
+  parts: parts$5,
+  baseStyle: baseStyle$a,
+  sizes: sizes,
+  defaultProps: defaultProps$6
 };
 
-var parts$7 = ['th', 'td', 'tr', 'body', 'thead'];
-var baseStyle$c = {
+var parts$6 = ['th', 'td', 'tr', 'body', 'thead'];
+var baseStyle$b = {
   thead: {
     bg: colors.label.primary.dark
   },
@@ -2753,11 +2736,11 @@ var baseStyle$c = {
   }
 };
 var Table$1 = {
-  parts: parts$7,
-  baseStyle: baseStyle$c
+  parts: parts$6,
+  baseStyle: baseStyle$b
 };
 
-var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$7 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 
 function baseStyleRoot(props) {
   var orientation = props.orientation;
@@ -2797,7 +2780,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2806,7 +2789,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$2 = {
+var sizes$1 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -2976,7 +2959,7 @@ var variantSimple = {
     }
   }
 };
-var variants$8 = {
+var variants$7 = {
   line: variantLine,
   enclosed: variantEnclosed,
   'enclosed-colored': variantEnclosedColored,
@@ -2985,20 +2968,20 @@ var variants$8 = {
   unstyled: variantUnstyled,
   simple: variantSimple
 };
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 'md',
   variant: 'line',
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
-  sizes: sizes$2,
-  variants: variants$8,
-  defaultProps: defaultProps$8
+  parts: parts$7,
+  baseStyle: baseStyle$c,
+  sizes: sizes$1,
+  variants: variants$7,
+  defaultProps: defaultProps$7
 };
 
-var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+var baseStyle$d = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   fontSize: '13px',
   display: 'block',
   paddingY: '8px',
@@ -3007,16 +2990,16 @@ var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   lineHeight: 'short'
 });
 
-var defaultProps$9 = {
+var defaultProps$8 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
-  defaultProps: defaultProps$9
+  baseStyle: baseStyle$d,
+  defaultProps: defaultProps$8
 };
 
-var defaultProps$a = react.Text.defaultProps;
-var baseStyle$f = {
+var defaultProps$9 = react.Text.defaultProps;
+var baseStyle$e = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -3025,7 +3008,7 @@ var baseStyle$f = {
 };
 
 function variantHeader() {
-  return _extends({}, baseStyle$f, {
+  return _extends({}, baseStyle$e, {
     fontWeight: typography.fontWeights.bold,
     fontSize: typography.fontSizes['3xl'],
     lineHeight: typography.lineHeights[8],
@@ -3034,7 +3017,7 @@ function variantHeader() {
 }
 
 function variantSubheader() {
-  return _extends({}, baseStyle$f, {
+  return _extends({}, baseStyle$e, {
     fontWeight: typography.fontWeights.semibold,
     fontSize: typography.fontSizes['lg'],
     lineHeight: typography.lineHeights[5],
@@ -3043,19 +3026,19 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$f;
+  return baseStyle$e;
 }
 
-var variants$9 = {
+var variants$8 = {
   header: variantHeader,
   subheader: variantSubheader,
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$f,
-  variants: variants$9,
-  defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
-    variant: variants$9.paragraph
+  baseStyle: baseStyle$e,
+  variants: variants$8,
+  defaultProps: /*#__PURE__*/_extends({}, defaultProps$9, {
+    variant: variants$8.paragraph
   })
 };
 
@@ -3095,7 +3078,6 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends(
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link,
-    Modal: Modal,
     Select: Select,
     Switch: Switch,
     Table: Table$1,