@xqmsg/ui-core 0.10.0 → 0.11.0

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

@@ -7,11 +7,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var react = require('@chakra-ui/react');
-var reactHookForm = require('react-hook-form');
 var colors$1 = _interopDefault(require('src/theme/foundations/colors'));
+var reactHookForm = require('react-hook-form');
 var icons = require('@chakra-ui/icons');
 var hi = require('react-icons/hi');
 var themeTools = require('@chakra-ui/theme-tools');
+var system = require('@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>";
 
@@ -74,43 +75,11 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React__default.createElement(react.Button, {
     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%)',
@@ -159,12 +128,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',
@@ -180,14 +143,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',
@@ -195,11 +172,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)',
@@ -240,7 +213,7 @@ var colors = /*#__PURE__*/_extends({
   orange: orange,
   green: green,
   blue: blue
-});
+};
 
 /**
  * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
@@ -329,7 +302,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
  */
@@ -337,30 +309,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__default.createElement(react.Button, Object.assign({
+      width = _ref.width;
+  return /*#__PURE__*/React__default.createElement(react.Button, {
     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>";
@@ -405,28 +370,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__default.createElement(react.Button, {
     spinner: /*#__PURE__*/React__default.createElement(react.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);
 };
@@ -465,7 +422,39 @@ var StackedCheckboxGroup = /*#__PURE__*/React__default.forwardRef(function (_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.
  */
@@ -474,7 +463,7 @@ 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,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     ref: _ref,
@@ -540,14 +529,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__default.createElement(react.Box, {
-    bg: colors$1.fill.light,
+    bg: colors$1.fill.light.quaternary,
     backdropFilter: "blur(64px)",
     borderRadius: "4px",
     mt: "3px",
@@ -556,11 +545,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.
  */
@@ -570,7 +560,7 @@ var StackedSelect = /*#__PURE__*/React__default.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 = React.useRef(null);
 
@@ -772,7 +762,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     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__default.createElement(react.Flex, {
     height: "28px",
@@ -961,7 +951,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         (_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__default.createElement(react.Flex, {
@@ -1387,7 +1377,7 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
     className: "loading-indicator " + (className != null ? className : '')
   }, /*#__PURE__*/React__default.createElement(react.Spinner, {
     size: size,
-    color: colors.blue[500],
+    color: colors.fill.action,
     flex: "none",
     thickness: thickness,
     speed: speed,
@@ -1475,10 +1465,10 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
     justifyContent: "center",
     alignItems: "center",
     height: 20,
-    borderTopColor: colors.gray[100]
+    borderTopColor: colors.fill.light.quaternary
   }, isLoading ? /*#__PURE__*/React__default.createElement(react.Spinner, {
     size: "lg",
-    color: colors.blue[500]
+    color: colors.fill.action
   }) : /*#__PURE__*/React__default.createElement(react.IconButton, {
     "aria-label": "Fetch more rows",
     icon: /*#__PURE__*/React__default.createElement(hi.HiOutlineRefresh, null),
@@ -1509,7 +1499,7 @@ function Table(_ref) {
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React__default.createElement(react.TableContainer, {
     border: "1px",
-    borderColor: colors.gray[100],
+    borderColor: colors.fill.light.quaternary,
     overflowX: "auto",
     bg: "white",
     borderRadius: "md",
@@ -1560,7 +1550,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,
@@ -1585,7 +1575,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__default.createElement(react.Text, {
     fontSize: fontSize,
@@ -1618,9 +1608,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'
@@ -1644,7 +1634,7 @@ var baseStyle = {
 function variantPositive() {
   return {
     container: {
-      bg: colors.fill.positive
+      bg: colors.fill.success
     }
   };
 }
@@ -1668,7 +1658,7 @@ function variantError() {
 function variantNeutral() {
   return {
     container: {
-      bg: colors.fill.light
+      bg: colors.fill.light.tertiary
     }
   };
 }
@@ -1744,223 +1734,68 @@ var Badge = {
   defaultProps: defaultProps$1
 };
 
-var baseStyle$2 = {
-  lineHeight: 1,
-  borderRadius: 'md',
-  fontWeight: 'bold',
-  _focus: {
-    boxShadow: 'outline'
-  },
+var baseStyle$2 = /*#__PURE__*/system.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 = themeTools.getColor(theme, 'gray.100');
-
-    return {
-      color: themeTools.mode("gray.500", "whiteAlpha.900")(props),
-      _hover: {
-        bg: themeTools.mode("gray.50", "whiteAlpha.200")(props)
-      },
-      _active: {
-        bg: themeTools.mode("gray.200", "whiteAlpha.300")(props)
-      },
-      _focus: {
-        boxShadow: focusShadow(_focusColor)
-      }
-    };
-  }
-
-  var darkHoverBg = themeTools.transparentize(c + ".200", 0.12)(theme);
-  var darkActiveBg = themeTools.transparentize(c + ".200", 0.24)(theme);
-  var focusColor = themeTools.getColor(theme, c + ".200");
-  return {
-    color: themeTools.mode(c + ".500", c + ".200")(props),
-    bg: 'transparent',
-    _hover: {
-      bg: themeTools.mode(c + ".50", darkHoverBg)(props)
-    },
-    _active: {
-      bg: themeTools.mode(c + ".100", darkActiveBg)(props)
-    },
-    _focus: {
-      boxShadow: focusShadow(focusColor)
-    }
-  };
-}
-
-function variantOutline$1(props) {
-  var c = props.colorScheme;
-  var borderColor = themeTools.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: themeTools.mode("gray.50", "whiteAlpha.200")(props),
-    _hover: {
-      bg: themeTools.mode("gray.100", "whiteAlpha.300")(props)
-    },
-    _active: {
-      bg: themeTools.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 = themeTools.getColor(theme, c + ".200");
-  return {
-    bg: themeTools.mode(bg, c + ".200")(props),
-    color: themeTools.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: themeTools.mode(hoverBg, c + ".300")(props)
+      bg: colors.label.primary.dark
     },
     _active: {
-      bg: themeTools.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: themeTools.mode(c + ".500", c + ".200")(props),
-    _hover: {
-      textDecoration: 'underline'
-    },
-    _active: {
-      color: themeTools.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
 };
 
@@ -2065,7 +1900,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: {
@@ -2089,7 +1924,7 @@ var Input$1 = {
 };
 
 var baseStyle$8 = {
-  color: 'blue.500',
+  color: colors.fill.action,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {
@@ -2196,72 +2031,7 @@ var Link = {
   variants: variants$5
 };
 
-var parts$4 = ['item', 'command', 'list', 'button', 'groupTitle'];
-
-function baseStyleList(props) {
-  return {
-    bg: themeTools.mode("#fff", "gray.700")(props),
-    boxShadow: themeTools.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: themeTools.mode("blue.50", "whiteAlpha.200")(props)
-    },
-    _hover: {
-      bg: themeTools.mode("blue.50", "whiteAlpha.200")(props)
-    },
-    _active: {
-      bg: themeTools.mode("gray.200", "whiteAlpha.200")(props)
-    },
-    _expanded: {
-      bg: themeTools.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'
@@ -2335,7 +2105,7 @@ var baseStyleFooter = {
   pb: 16
 };
 
-var baseStyle$a = function baseStyle(props) {
+var baseStyle$9 = function baseStyle(props) {
   return {
     overlay: baseStyleOverlay,
     dialogContainer: baseStyleDialogContainer(props),
@@ -2428,7 +2198,7 @@ function getSize(value) {
   };
 }
 
-var sizes$1 = {
+var sizes = {
   xs: /*#__PURE__*/getSize('xs'),
   sm: /*#__PURE__*/getSize('sm'),
   md: /*#__PURE__*/getSize('md'),
@@ -2459,16 +2229,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, {
@@ -2489,7 +2259,7 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$b = function baseStyle() {
+var baseStyle$a = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
@@ -2497,13 +2267,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,
@@ -2536,14 +2306,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',
@@ -2589,13 +2359,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;
@@ -2635,7 +2405,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2644,7 +2414,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$3 = {
+var sizes$2 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -2785,18 +2555,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: '""',
@@ -2820,7 +2590,7 @@ var variants$8 = {
   'enclosed-colored': variantEnclosedColored,
   'soft-rounded': variantSoftRounded,
   'solid-rounded': variantSolidRounded,
-  unstyled: variantUnstyled$1,
+  unstyled: variantUnstyled,
   simple: variantSimple
 };
 var defaultProps$8 = {
@@ -2829,14 +2599,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',
@@ -2847,12 +2617,12 @@ var defaultProps$9 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$d,
   defaultProps: defaultProps$9
 };
 
 var defaultProps$a = react.Text.defaultProps;
-var baseStyle$f = {
+var baseStyle$e = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -2861,7 +2631,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],
@@ -2870,7 +2640,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],
@@ -2879,7 +2649,7 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$f;
+  return baseStyle$e;
 }
 
 var variants$9 = {
@@ -2888,7 +2658,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
@@ -2930,7 +2700,6 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends(
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link,
-    Menu: Menu,
     Modal: Modal,
     Select: Select,
     Switch: Switch,