@xqmsg/ui-core 0.10.0 → 0.11.0

package/dist/ui-core.esm.js

@@ -1,10 +1,11 @@
 import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, InputGroup, Checkbox, Input as Input$2, RadioGroup, Radio, useOutsideClick, InputRightElement, Textarea as Textarea$1, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider } from '@chakra-ui/react';
-import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import colors$1 from 'src/theme/foundations/colors';
+import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { CloseIcon as CloseIcon$1, HamburgerIcon } from '@chakra-ui/icons';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
+import { defineStyle } from '@chakra-ui/system';
 
 var ErrorIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 5.5L8.5 8.5M8.5 5.5L5.5 8.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z\" stroke=\"#F96057\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
 
@@ -67,43 +68,11 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React.createElement(Button$2, {
     size: "sm",
     bg: "white",
-    color: "blue.500",
+    color: colors$1.fill.action,
     onClick: onClick
   }, buttonText))));
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 var blue = {
   50: 'hsl(209, 100%, 95%)',
   100: 'hsl(209, 100%, 90%)',
@@ -152,12 +121,6 @@ var green = {
   800: 'hsl(141, 42%, 24%)',
   900: 'hsl(138, 42%, 6%)'
 };
-var aliases = {
-  primary: blue,
-  success: green,
-  warning: orange,
-  danger: red
-};
 var label = {
   primary: {
     light: '#000000',
@@ -173,14 +136,28 @@ var border = {
   "default": '#9999991A'
 };
 var fill = {
-  light: '#7474800D',
-  positive: '#d8f1b8',
+  light: {
+    primary: '#74748033',
+    secondary: '#74748029',
+    tertiary: '#7474801F',
+    quaternary: ':#7474800D'
+  },
+  success: '#d8f1b8',
   error: '#ffbdb9',
   warning: '#ffefb4',
-  blue: '#0082ff'
+  action: '#0082ff'
 };
-
-var colors = /*#__PURE__*/_extends({
+var semantic = {
+  action: '#488ef7',
+  success: '#5fcf65',
+  warning: '#f8c352',
+  error: '#f96057'
+};
+var colors = {
+  label: label,
+  border: border,
+  fill: fill,
+  semantic: semantic,
   transparent: 'transparent',
   current: 'currentColor',
   black: '#000000',
@@ -188,11 +165,7 @@ var colors = /*#__PURE__*/_extends({
   lightBlue: '#29abe2',
   coolGray: '#F6F7FB',
   darkBlue: '#292f4c',
-  backdrop: '#fbfcff'
-}, aliases, {
-  label: label,
-  border: border,
-  fill: fill,
+  backdrop: '#fbfcff',
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',
@@ -233,7 +206,7 @@ var colors = /*#__PURE__*/_extends({
   orange: orange,
   green: green,
   blue: blue
-});
+};
 
 /**
  * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
@@ -322,7 +295,6 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-var _excluded = ["onClick", "text", "type", "ariaLabel", "variant", "colorScheme", "style", "size", "disabled", "className"];
 /**
  * A functional React component utilized to render the `Button` component
  */
@@ -330,30 +302,23 @@ var _excluded = ["onClick", "text", "type", "ariaLabel", "variant", "colorScheme
 var Button = function Button(_ref) {
   var onClick = _ref.onClick,
       text = _ref.text,
-      type = _ref.type,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
       ariaLabel = _ref.ariaLabel,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
-      _ref$colorScheme = _ref.colorScheme,
-      colorScheme = _ref$colorScheme === void 0 ? 'primary' : _ref$colorScheme,
-      style = _ref.style,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
       disabled = _ref.disabled,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Button$2, Object.assign({
+      width = _ref.width;
+  return /*#__PURE__*/React.createElement(Button$2, {
     onClick: onClick,
     type: type,
     variant: variant,
-    colorScheme: colorScheme,
-    size: size,
     disabled: disabled,
     "aria-label": ariaLabel,
-    style: style,
-    className: className
-  }, props), text);
+    className: className,
+    width: width === 'variable' ? '100%' : 'fit-content'
+  }, text);
 };
 
 var GoogleLogo = "<svg viewBox=\"0 0 533.5 544.3\" xmlns=\"http://www.w3.org/2000/svg\"><path\n    d=\"M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z\"\n    fill=\"#4285f4\"\n  /><path\n    d=\"M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z\"\n    fill=\"#34a853\"\n  /><path\n    d=\"M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z\"\n    fill=\"#fbbc04\"\n  /><path\n    d=\"M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z\"\n    fill=\"#ea4335\"\n  /></svg>";
@@ -398,28 +363,20 @@ var SpinnerButton = function SpinnerButton(_ref) {
       onClick = _ref.onClick,
       type = _ref.type,
       ariaLabel = _ref.ariaLabel,
-      style = _ref.style,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
-      _ref$colorScheme = _ref.colorScheme,
-      colorScheme = _ref$colorScheme === void 0 ? 'primary' : _ref$colorScheme,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
       disabled = _ref.disabled,
       className = _ref.className;
   return /*#__PURE__*/React.createElement(Button$2, {
     spinner: /*#__PURE__*/React.createElement(Spinner, {
-      size: size
+      size: 'md'
     }),
     isLoading: isLoading,
     onClick: onClick,
     type: type,
     variant: variant,
-    colorScheme: colorScheme,
-    size: size,
     disabled: disabled,
     "aria-label": ariaLabel,
-    style: style,
     className: className
   }, text);
 };
@@ -458,7 +415,39 @@ var StackedCheckboxGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref)
   }));
 });
 
-var _excluded$1 = ["type", "isRequired"];
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["type", "isRequired"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -467,7 +456,7 @@ var StackedInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   var _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'text' : _ref2$type,
       isRequired = _ref2.isRequired,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(Input$2, Object.assign({
     ref: _ref,
@@ -533,14 +522,14 @@ var Dropdown = function Dropdown(_ref) {
         color: colors$1.label.primary.light,
         _hover: {
           color: colors$1.label.primary.dark,
-          bg: colors$1.fill.blue,
+          bg: colors$1.fill.action,
           borderRadius: '4px'
         }
       }, option.label));
     });
   }, [onSelectItem, options]);
   return /*#__PURE__*/React.createElement(Box, {
-    bg: colors$1.fill.light,
+    bg: colors$1.fill.light.quaternary,
     backdropFilter: "blur(64px)",
     borderRadius: "4px",
     mt: "3px",
@@ -549,11 +538,12 @@ var Dropdown = function Dropdown(_ref) {
     px: "8px",
     py: "4px",
     position: "absolute",
-    width: "100%"
+    width: "100%",
+    zIndex: "100"
   }, DropdownContent);
 };
 
-var _excluded$2 = ["isRequired", "options", "name", "setValue", "onChange"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "onChange"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -563,7 +553,7 @@ var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
       options = _ref2.options,
       name = _ref2.name,
       setValue = _ref2.setValue,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
   var dropdownRef = useRef(null);
 
@@ -765,7 +755,7 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     onClick: function onClick() {
       return !disabled && setIsFocussed(true);
     },
-    bg: disabled ? colors.fill.light : '#ffffff',
+    bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer'
   }, /*#__PURE__*/React.createElement(Flex, {
     height: "28px",
@@ -954,7 +944,7 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
         (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
       }
     },
-    bg: disabled ? colors.fill.light : '#ffffff',
+    bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
     ref: inputWrapperRef
   }, /*#__PURE__*/React.createElement(Flex, {
@@ -1380,7 +1370,7 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
     className: "loading-indicator " + (className != null ? className : '')
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: size,
-    color: colors.blue[500],
+    color: colors.fill.action,
     flex: "none",
     thickness: thickness,
     speed: speed,
@@ -1468,10 +1458,10 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
     justifyContent: "center",
     alignItems: "center",
     height: 20,
-    borderTopColor: colors.gray[100]
+    borderTopColor: colors.fill.light.quaternary
   }, isLoading ? /*#__PURE__*/React.createElement(Spinner, {
     size: "lg",
-    color: colors.blue[500]
+    color: colors.fill.action
   }) : /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Fetch more rows",
     icon: /*#__PURE__*/React.createElement(HiOutlineRefresh, null),
@@ -1502,7 +1492,7 @@ function Table(_ref) {
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React.createElement(TableContainer, {
     border: "1px",
-    borderColor: colors.gray[100],
+    borderColor: colors.fill.light.quaternary,
     overflowX: "auto",
     bg: "white",
     borderRadius: "md",
@@ -1553,7 +1543,7 @@ var TabsWrapper = function TabsWrapper(_ref) {
       sm: 'row'
     },
     border: "1px",
-    borderColor: colors.gray[100],
+    borderColor: colors.fill.light.quaternary,
     bg: "white",
     borderRadius: "md",
     borderBottom: 0,
@@ -1578,7 +1568,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref.fontWeight,
       variant = _ref.variant,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? colors.black : _ref$color,
+      color = _ref$color === void 0 ? colors.label.primary.light : _ref$color,
       className = _ref.className;
   return /*#__PURE__*/React.createElement(Text$2, {
     fontSize: fontSize,
@@ -1611,9 +1601,9 @@ var shadows = {
   lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
   xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
   '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  insetOutline: "inset 0 0 0 2px " + colors.blue[200],
-  outline: "0 0 0 2px " + colors.blue[200],
-  outlineDanger600: "0 0 0 2px " + colors.red[600],
+  insetOutline: "inset 0 0 0 2px " + colors.fill.action,
+  outline: "0 0 0 2px " + colors.fill.action,
+  outlineDanger600: "0 0 0 2px " + colors.fill.error,
   inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
   none: 'none',
   'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px'
@@ -1637,7 +1627,7 @@ var baseStyle = {
 function variantPositive() {
   return {
     container: {
-      bg: colors.fill.positive
+      bg: colors.fill.success
     }
   };
 }
@@ -1661,7 +1651,7 @@ function variantError() {
 function variantNeutral() {
   return {
     container: {
-      bg: colors.fill.light
+      bg: colors.fill.light.tertiary
     }
   };
 }
@@ -1737,223 +1727,68 @@ var Badge = {
   defaultProps: defaultProps$1
 };
 
-var baseStyle$2 = {
-  lineHeight: 1,
-  borderRadius: 'md',
-  fontWeight: 'bold',
-  _focus: {
-    boxShadow: 'outline'
-  },
+var baseStyle$2 = /*#__PURE__*/defineStyle({
+  borderRadius: '4px',
+  fontSize: '18px',
+  bg: colors.fill.action,
+  color: colors.label.primary.dark,
+  px: '8px',
+  py: '4px',
+  bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
+  shadow: '1px 0.5px #0000001A',
   _disabled: {
-    opacity: 0.4,
-    cursor: 'not-allowed',
-    boxShadow: 'none'
-  }
-};
-
-var focusShadow = function focusShadow(color) {
-  return "0 0 0 3px " + color;
-};
-
-function variantGhost(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-
-  if (c === 'gray') {
-    var _focusColor = getColor(theme, 'gray.100');
-
-    return {
-      color: mode("gray.500", "whiteAlpha.900")(props),
-      _hover: {
-        bg: mode("gray.50", "whiteAlpha.200")(props)
-      },
-      _active: {
-        bg: mode("gray.200", "whiteAlpha.300")(props)
-      },
-      _focus: {
-        boxShadow: focusShadow(_focusColor)
-      }
-    };
-  }
-
-  var darkHoverBg = transparentize(c + ".200", 0.12)(theme);
-  var darkActiveBg = transparentize(c + ".200", 0.24)(theme);
-  var focusColor = getColor(theme, c + ".200");
-  return {
-    color: mode(c + ".500", c + ".200")(props),
-    bg: 'transparent',
-    _hover: {
-      bg: mode(c + ".50", darkHoverBg)(props)
-    },
-    _active: {
-      bg: mode(c + ".100", darkActiveBg)(props)
-    },
-    _focus: {
-      boxShadow: focusShadow(focusColor)
-    }
-  };
-}
-
-function variantOutline$1(props) {
-  var c = props.colorScheme;
-  var borderColor = mode("gray.200", "whiteAlpha.300")(props);
-  return _extends({
-    border: '1px solid',
-    borderColor: c === 'gray' ? borderColor : 'currentColor'
-  }, variantGhost(props));
-}
-/** Accessible color overrides for less accessible colors. */
-
-
-var accessibleColorMap = {
-  yellow: {
-    bg: 'yellow.400',
-    color: 'black',
-    hoverBg: 'yellow.500',
-    activeBg: 'yellow.600'
+    backgroundColor: 'gray.100',
+    borderColor: 'gray.100',
+    color: 'gray.500',
+    pointerEvents: 'none'
   },
-  cyan: {
-    bg: 'cyan.400',
-    color: 'black',
-    hoverBg: 'cyan.500',
-    activeBg: 'cyan.600'
+  _hover: {
+    bg: colors.fill.action
+  },
+  _active: {
+    color: colors.label.primary.dark,
+    bg: colors.fill.action,
+    bgGradient: colors.fill.light.quaternary
+  },
+  _focus: {
+    bg: colors.fill.action,
+    border: "2px solid " + colors.border.focus
   }
-};
-
-function variantSolid$1(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-  if (c === 'gray') return {
-    color: 'gray.500',
-    bg: mode("gray.50", "whiteAlpha.200")(props),
-    _hover: {
-      bg: mode("gray.100", "whiteAlpha.300")(props)
-    },
-    _active: {
-      bg: mode("gray.200", "whiteAlpha.400")(props)
-    }
-  };
-  if (c === 'darkgray') return {
-    color: 'white',
-    bg: 'gray.400',
-    _hover: {
-      bg: 'gray.600'
-    },
-    _active: {
-      bg: 'gray.700'
-    }
-  };
+});
 
-  var _ref = accessibleColorMap[c] || {},
-      _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? c + ".500" : _ref$bg,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'white' : _ref$color,
-      _ref$hoverBg = _ref.hoverBg,
-      hoverBg = _ref$hoverBg === void 0 ? c + ".600" : _ref$hoverBg,
-      _ref$activeBg = _ref.activeBg,
-      activeBg = _ref$activeBg === void 0 ? c + ".700" : _ref$activeBg;
+var variantSolid$1 = function variantSolid() {
+  return _extends({}, baseStyle$2);
+};
 
-  var focusColor = getColor(theme, c + ".200");
-  return {
-    bg: mode(bg, c + ".200")(props),
-    color: mode(color, "gray.800")(props),
+var variantOutline$1 = function variantOutline() {
+  return _extends({}, baseStyle$2, {
+    color: colors.fill.action,
+    bg: colors.label.primary.dark,
+    border: 'none',
     _hover: {
-      bg: mode(hoverBg, c + ".300")(props)
+      bg: colors.label.primary.dark
     },
     _active: {
-      bg: mode(activeBg, c + ".400")(props)
+      color: colors.fill.action,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary
     },
     _focus: {
-      boxShadow: focusShadow(focusColor)
+      bg: colors.label.primary.dark
     }
-  };
-}
-/**
- * A variant that displays a solid variant when an active CSS class is
- * detected, otherwise display a ghost variant.  This is useful for pill nav filters.
- */
-
-
-function variantActiveSolid(props) {
-  return _extends({}, variantGhost(_extends({}, props, {
-    colorScheme: 'gray'
-  })), {
-    '&.active': _extends({}, variantSolid$1(props))
   });
-}
-
-function variantLink(props) {
-  var c = props.colorScheme;
-  return {
-    padding: 0,
-    height: 'auto',
-    lineHeight: 'normal',
-    color: mode(c + ".500", c + ".200")(props),
-    _hover: {
-      textDecoration: 'underline'
-    },
-    _active: {
-      color: mode(c + ".700", c + ".500")(props)
-    }
-  };
-}
-
-var variantUnstyled = {
-  bg: 'none',
-  color: 'inherit',
-  display: 'inline',
-  lineHeight: 'inherit',
-  m: 0,
-  p: 0
 };
+
 var variants$2 = {
-  ghost: variantGhost,
-  outline: variantOutline$1,
-  solid: variantSolid$1,
-  activeSolid: variantActiveSolid,
-  link: variantLink,
-  unstyled: variantUnstyled
-};
-var sizes = {
-  lg: {
-    borderRadius: 'full',
-    h: 12,
-    minW: 20,
-    fontSize: 'lg',
-    px: 6
-  },
-  md: {
-    borderRadius: 'full',
-    h: 10,
-    minW: 20,
-    fontSize: 'md',
-    px: 4
-  },
-  sm: {
-    borderRadius: 'full',
-    h: 8,
-    minW: 8,
-    fontSize: 'sm',
-    px: 3
-  },
-  xs: {
-    borderRadius: 'full',
-    h: 6,
-    minW: 6,
-    fontSize: 'xs',
-    px: 2
-  }
+  solid: /*#__PURE__*/variantSolid$1(),
+  outline: /*#__PURE__*/variantOutline$1()
 };
 var defaultProps$2 = {
-  variant: 'solid',
-  size: 'md',
-  colorScheme: 'primary'
+  solid: 'solid'
 };
 var Button$1 = {
   baseStyle: baseStyle$2,
   variants: variants$2,
-  sizes: sizes,
   defaultProps: defaultProps$2
 };
 
@@ -2058,7 +1893,7 @@ var baseStyle$7 = {
     borderColor: colors.border["default"],
     _disabled: {
       cursor: 'not-allowed',
-      bg: colors.fill.light,
+      bg: colors.fill.light.quaternary,
       color: colors.label.secondary.light
     },
     _focus: {
@@ -2082,7 +1917,7 @@ var Input$1 = {
 };
 
 var baseStyle$8 = {
-  color: 'blue.500',
+  color: colors.fill.action,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {
@@ -2189,72 +2024,7 @@ var Link = {
   variants: variants$5
 };
 
-var parts$4 = ['item', 'command', 'list', 'button', 'groupTitle'];
-
-function baseStyleList(props) {
-  return {
-    bg: mode("#fff", "gray.700")(props),
-    boxShadow: mode("2xl", "dark-lg")(props),
-    color: 'inherit',
-    minW: '3xs',
-    py: 2,
-    zIndex: 'docked',
-    borderRadius: 'md',
-    borderWidth: 0,
-    overflow: 'hidden'
-  };
-}
-
-function baseStyleItem(props) {
-  return {
-    fontSize: 'sm',
-    py: 2,
-    px: 4,
-    transition: 'background 50ms ease-in 0s',
-    _focus: {
-      bg: mode("blue.50", "whiteAlpha.200")(props)
-    },
-    _hover: {
-      bg: mode("blue.50", "whiteAlpha.200")(props)
-    },
-    _active: {
-      bg: mode("gray.200", "whiteAlpha.200")(props)
-    },
-    _expanded: {
-      bg: mode("gray.100", "whiteAlpha.100")(props)
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: 'not-allowed'
-    }
-  };
-}
-
-var baseStyleGroupTitle = {
-  mx: 4,
-  my: 2,
-  fontWeight: 'semibold',
-  fontSize: 'sm'
-};
-var baseStyleCommand = {
-  opacity: 0.6
-};
-
-var baseStyle$9 = function baseStyle(props) {
-  return {
-    list: baseStyleList(props),
-    item: baseStyleItem(props),
-    groupTitle: baseStyleGroupTitle,
-    command: baseStyleCommand
-  };
-};
-
-var Menu = {
-  parts: parts$4,
-  baseStyle: baseStyle$9
-};
-
-var parts$5 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
+var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
 var baseStyleOverlay = {
   bg: 'blackAlpha.600',
   zIndex: 'modal'
@@ -2328,7 +2098,7 @@ var baseStyleFooter = {
   pb: 16
 };
 
-var baseStyle$a = function baseStyle(props) {
+var baseStyle$9 = function baseStyle(props) {
   return {
     overlay: baseStyleOverlay,
     dialogContainer: baseStyleDialogContainer(props),
@@ -2421,7 +2191,7 @@ function getSize(value) {
   };
 }
 
-var sizes$1 = {
+var sizes = {
   xs: /*#__PURE__*/getSize('xs'),
   sm: /*#__PURE__*/getSize('sm'),
   md: /*#__PURE__*/getSize('md'),
@@ -2452,16 +2222,16 @@ var defaultProps$5 = {
   isCentered: true
 };
 var Modal = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
-  sizes: sizes$1,
+  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$6 = ['field', 'icon'];
+var parts$5 = ['field', 'icon'];
 
 function baseStyleField() {
   return _extends({}, Input$1.baseStyle.field, {
@@ -2482,7 +2252,7 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$b = function baseStyle() {
+var baseStyle$a = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
@@ -2490,13 +2260,13 @@ var baseStyle$b = function baseStyle() {
 };
 
 var Select = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
+  parts: parts$5,
+  baseStyle: baseStyle$a,
   variants: variants$7,
   defaultProps: defaultProps$6
 };
 
-var parts$7 = ['track', 'thumb'];
+var parts$6 = ['track', 'thumb'];
 
 function baseStyleTrack(props) {
   var c = props.colorScheme,
@@ -2529,14 +2299,14 @@ var baseStyleThumb = {
   transform: 'translateX(0)'
 };
 
-var baseStyle$c = function baseStyle(props) {
+var baseStyle$b = function baseStyle(props) {
   return {
     track: baseStyleTrack(props),
     thumb: baseStyleThumb
   };
 };
 
-var sizes$2 = {
+var sizes$1 = {
   sm: {
     track: {
       w: '1.375rem',
@@ -2582,13 +2352,13 @@ var defaultProps$7 = {
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$7,
-  baseStyle: baseStyle$c,
-  sizes: sizes$2,
+  parts: parts$6,
+  baseStyle: baseStyle$b,
+  sizes: sizes$1,
   defaultProps: defaultProps$7
 };
 
-var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$7 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 
 function baseStyleRoot(props) {
   var orientation = props.orientation;
@@ -2628,7 +2398,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2637,7 +2407,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$3 = {
+var sizes$2 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -2778,18 +2548,18 @@ function variantSolidRounded(props) {
   };
 }
 
-var variantUnstyled$1 = {};
+var variantUnstyled = {};
 var variantSimple = {
   tab: {
     position: 'relative',
     borderColor: 'transparent',
     '&.active': {
-      color: colors.blue[500],
+      color: colors.fill.action,
       bg: 'transparent',
-      borderBottom: '1px solid blue.500'
+      borderBottom: "1px solid " + colors.fill.action
     },
     _selected: {
-      color: colors.blue[500],
+      color: colors.fill.action,
       bg: 'transparent',
       _after: {
         content: '""',
@@ -2813,7 +2583,7 @@ var variants$8 = {
   'enclosed-colored': variantEnclosedColored,
   'soft-rounded': variantSoftRounded,
   'solid-rounded': variantSolidRounded,
-  unstyled: variantUnstyled$1,
+  unstyled: variantUnstyled,
   simple: variantSimple
 };
 var defaultProps$8 = {
@@ -2822,14 +2592,14 @@ var defaultProps$8 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
-  sizes: sizes$3,
+  parts: parts$7,
+  baseStyle: baseStyle$c,
+  sizes: sizes$2,
   variants: variants$8,
   defaultProps: defaultProps$8
 };
 
-var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+var baseStyle$d = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   display: 'block',
   paddingY: '8px',
   height: '80px',
@@ -2840,12 +2610,12 @@ var defaultProps$9 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$d,
   defaultProps: defaultProps$9
 };
 
 var defaultProps$a = Text$2.defaultProps;
-var baseStyle$f = {
+var baseStyle$e = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -2854,7 +2624,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],
@@ -2863,7 +2633,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],
@@ -2872,7 +2642,7 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$f;
+  return baseStyle$e;
 }
 
 var variants$9 = {
@@ -2881,7 +2651,7 @@ var variants$9 = {
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$f,
+  baseStyle: baseStyle$e,
   variants: variants$9,
   defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
     variant: variants$9.paragraph
@@ -2923,7 +2693,6 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link,
-    Menu: Menu,
     Modal: Modal,
     Select: Select,
     Switch: Switch,