@xqmsg/ui-core 0.9.3 → 0.11.0

package/dist/ui-core.esm.js

@@ -1,10 +1,11 @@
-import React, { useMemo, useCallback, useState, useEffect, useRef } 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, Select as Select$1, Textarea as Textarea$1, Tag, TagLabel, TagCloseButton, Switch as Switch$1, FormControl, FormLabel as FormLabel$1, 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 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 colors$1 from 'src/theme/foundations/colors';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
-import ReactSelect from 'react-select';
-import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
+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,20 +121,43 @@ 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',
     dark: '#FFFFFF'
-  }
-};
-
-var colors = /*#__PURE__*/_extends({
+  },
+  secondary: {
+    light: '#3C3C4399'
+  },
+  error: '#FF0000'
+};
+var border = {
+  focus: '#3A6CD980',
+  "default": '#9999991A'
+};
+var fill = {
+  light: {
+    primary: '#74748033',
+    secondary: '#74748029',
+    tertiary: '#7474801F',
+    quaternary: ':#7474800D'
+  },
+  success: '#d8f1b8',
+  error: '#ffbdb9',
+  warning: '#ffefb4',
+  action: '#0082ff'
+};
+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',
@@ -173,9 +165,7 @@ var colors = /*#__PURE__*/_extends({
   lightBlue: '#29abe2',
   coolGray: '#F6F7FB',
   darkBlue: '#292f4c',
-  backdrop: '#fbfcff'
-}, aliases, {
-  label: label,
+  backdrop: '#fbfcff',
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',
@@ -216,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.
@@ -305,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
  */
@@ -313,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>";
@@ -381,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);
 };
@@ -441,7 +415,39 @@ var StackedCheckboxGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref)
   }));
 });
 
-var _excluded$1 = ["type", "isRequired", "leftElement", "rightElement"];
+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.
  */
@@ -450,15 +456,13 @@ var StackedInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   var _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'text' : _ref2$type,
       isRequired = _ref2.isRequired,
-      leftElement = _ref2.leftElement,
-      rightElement = _ref2.rightElement,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React.createElement(InputGroup, null, leftElement && leftElement, /*#__PURE__*/React.createElement(Input$2, Object.assign({
+  return /*#__PURE__*/React.createElement(Input$2, Object.assign({
     ref: _ref,
     type: type,
     isRequired: isRequired
-  }, props)), rightElement && rightElement);
+  }, props));
 });
 
 /**
@@ -485,7 +489,61 @@ var StackedRadioGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   })));
 });
 
-var _excluded$2 = ["isRequired", "options", "onChange"];
+var SubtractIcon = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z\" fill=\"#0082FF\"/>\n</svg>";
+
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+
+var Dropdown = function Dropdown(_ref) {
+  var onSelectItem = _ref.onSelectItem,
+      options = _ref.options;
+  var DropdownContent = useMemo(function () {
+    return options.map(function (option, idx) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React.createElement(Box, {
+        color: colors$1.label.secondary.light,
+        fontSize: "13px",
+        fontWeight: "bold",
+        px: "8px"
+      }, idx > 0 && /*#__PURE__*/React.createElement(Box, {
+        my: "3px",
+        borderTop: "2px solid",
+        borderColor: colors$1.border["default"]
+      }), option.label), option.value !== 'section_header' && /*#__PURE__*/React.createElement(Box, {
+        cursor: "pointer",
+        borderRadius: "inherit",
+        onClick: function onClick() {
+          return onSelectItem(option);
+        },
+        key: option.value,
+        fontSize: "13px",
+        px: "8px",
+        py: "4px",
+        color: colors$1.label.primary.light,
+        _hover: {
+          color: colors$1.label.primary.dark,
+          bg: colors$1.fill.action,
+          borderRadius: '4px'
+        }
+      }, option.label));
+    });
+  }, [onSelectItem, options]);
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: colors$1.fill.light.quaternary,
+    backdropFilter: "blur(64px)",
+    borderRadius: "4px",
+    mt: "3px",
+    maxH: "320px",
+    overflowY: "auto",
+    px: "8px",
+    py: "4px",
+    position: "absolute",
+    width: "100%",
+    zIndex: "100"
+  }, DropdownContent);
+};
+
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "onChange"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -493,19 +551,63 @@ var _excluded$2 = ["isRequired", "options", "onChange"];
 var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   var isRequired = _ref2.isRequired,
       options = _ref2.options,
-      onChange = _ref2.onChange,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+      name = _ref2.name,
+      setValue = _ref2.setValue,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+
+  var dropdownRef = useRef(null);
+
+  var _useState = useState(false),
+      isFocussed = _useState[0],
+      setIsFocussed = _useState[1];
+
+  var _useState2 = useState(''),
+      selectedOption = _useState2[0],
+      setSelectedOption = _useState2[1];
+
+  useOutsideClick({
+    ref: dropdownRef,
+    handler: function handler() {
+      return setIsFocussed(false);
+    }
+  });
 
-  return /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Select$1, Object.assign({
+  var handleOnSelectItem = function handleOnSelectItem(option) {
+    setValue(name, option.value);
+    setSelectedOption(option.label);
+    setIsFocussed(false);
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: dropdownRef,
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input$2, Object.assign({
+    isRequired: isRequired
+  }, props, {
     ref: _ref,
-    isRequired: isRequired,
-    onChange: onChange
-  }, props), options.map(function (option) {
-    return /*#__PURE__*/React.createElement("option", {
-      value: option.value,
-      key: option.value
-    }, option.label);
-  })));
+    onClick: function onClick() {
+      return setIsFocussed(!isFocussed);
+    },
+    cursor: "pointer",
+    color: "transparent",
+    fontSize: "13px",
+    textShadow: "0 0 0 " + colors$1.label.primary.light,
+    value: selectedOption
+  })), /*#__PURE__*/React.createElement(InputRightElement, {
+    cursor: "pointer",
+    onClick: function onClick() {
+      return setIsFocussed(!isFocussed);
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: SubtractIcon,
+    alt: "subtract",
+    boxSize: "16px"
+  }))), isFocussed && /*#__PURE__*/React.createElement(Dropdown, {
+    onSelectItem: function onSelectItem(option) {
+      return handleOnSelectItem(option);
+    },
+    options: options
+  }));
 });
 
 /**
@@ -520,36 +622,29 @@ var StackedTextarea = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   }, props));
 });
 
-var InputTag = function InputTag(_ref) {
-  var value = _ref.value,
+var CloseIcon = "<svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z\" fill=\"#3C3C43\" fill-opacity=\"0.6\"/>\n</svg>";
+
+var Token = function Token(_ref) {
+  var label = _ref.label,
       onDelete = _ref.onDelete;
-  return /*#__PURE__*/React.createElement(Tag, {
-    size: 'md',
-    key: value,
+  return /*#__PURE__*/React.createElement(Flex, {
+    key: label,
     borderRadius: "full",
-    variant: "solid",
-    backgroundColor: "#eeeeee"
-  }, /*#__PURE__*/React.createElement(TagLabel, {
-    color: 'gray.700'
-  }, value), onDelete && /*#__PURE__*/React.createElement(TagCloseButton, {
-    color: 'gray.700',
-    onClick: onDelete
-  }));
-};
-
-/**
- * A functional React Component utilized to render the custom `MultiValue` component for
- * the `StackedMultiSelect` custom component.
- */
-
-var MultiValue = function MultiValue(_ref) {
-  var children = _ref.children,
-      clearValue = _ref.clearValue;
-  return /*#__PURE__*/React.createElement(Box, {
-    marginRight: "5px"
-  }, /*#__PURE__*/React.createElement(InputTag, {
-    value: children,
-    onDelete: clearValue
+    backgroundColor: "#7676801F",
+    alignItems: "center",
+    width: "fit-content",
+    pl: "8px",
+    pr: "4px",
+    py: "2px"
+  }, /*#__PURE__*/React.createElement(Text$2, {
+    color: colors$1.label.primary.light,
+    fontSize: "13px"
+  }, label), /*#__PURE__*/React.createElement(Image, {
+    pl: "4px",
+    boxSize: "16px",
+    src: CloseIcon,
+    onClick: onDelete,
+    cursor: "pointer"
   }));
 };
 
@@ -561,131 +656,136 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   var options = _ref2.options,
       setValue = _ref2.setValue,
       control = _ref2.control,
-      name = _ref2.name;
+      name = _ref2.name,
+      placeholder = _ref2.placeholder,
+      disabled = _ref2.disabled;
   var watchedValue = useWatch({
     control: control,
     name: name
   });
+  var dropdownRef = useRef(null);
+
+  var _useState = useState([]),
+      localValues = _useState[0],
+      setLocalValues = _useState[1];
 
-  var _useState = useState(''),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
+  var _useState2 = useState(options),
+      localOptions = _useState2[0],
+      setLocalOptions = _useState2[1];
 
-  var _useState2 = useState([]),
-      localValue = _useState2[0],
-      setLocalValue = _useState2[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
+  var _useState3 = useState(false),
+      isFocussed = _useState3[0],
+      setIsFocussed = _useState3[1];
 
+  useOutsideClick({
+    ref: dropdownRef,
+    handler: function handler() {
+      return setIsFocussed(false);
+    }
+  }); // gets latest watched form value (common delimited) from RHF state and creates a list
 
   useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
-      setLocalValue([]);
+      setLocalValues([]);
     }
 
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
-      setLocalValue(watchedValue.split(',').filter(Boolean).map(function (value) {
+      setLocalValues(watchedValue.split(',').filter(Boolean).map(function (value) {
         return options.find(function (option) {
           return option.value === value;
         });
       }));
     }
   }, [options, watchedValue]);
-  var component = {
-    DropdownIndicator: null,
-    MultiValue: function MultiValue$1(props) {
-      return /*#__PURE__*/React.createElement(MultiValue, {
-        clearValue: function clearValue() {
-          var arrayValue = watchedValue.split(',').filter(function (_, index) {
-            return index !== props.index;
-          });
-          setLocalValue(arrayValue.map(function (value) {
-            return options.find(function (option) {
-              return option.value === value;
-            });
-          }));
-          setValue(name, arrayValue.join(','), {
-            shouldValidate: true,
-            shouldDirty: true
-          });
-        }
-      }, props.children);
-    }
-  };
 
-  var handleChange = function handleChange(values) {
-    setValue(name, values.map(function (_ref3) {
+  var handleChange = function handleChange(option) {
+    var newValue = [].concat(localValues, [option]).map(function (_ref3) {
       var value = _ref3.value;
       return value;
-    }).join(','), {
+    }).join(',');
+    setValue(name, newValue, {
       shouldValidate: true,
       shouldDirty: true
     });
+    setLocalOptions(function (prevLocalOptions) {
+      return prevLocalOptions.filter(function (prevLocalOption) {
+        return prevLocalOption !== option;
+      });
+    });
+    setLocalValues(function (prevLocalValues) {
+      return [].concat(prevLocalValues, [option]);
+    });
   };
 
-  var handleInputChange = function handleInputChange(value, action) {
-    if (action.action === 'input-change' && action !== 'set-value') {
-      return setInputValue(value);
-    } // reset on select of an option
-
-
-    return setInputValue('');
-  };
-
-  var formatGroupLabel = function formatGroupLabel(data) {
-    return /*#__PURE__*/React.createElement(Flex, {
-      alignItems: "center",
-      justifyContent: "space-between"
-    }, /*#__PURE__*/React.createElement("span", null, data.label));
+  var handleDelete = function handleDelete(option) {
+    var newValue = localValues.filter(function (localValue) {
+      return localValue !== option;
+    }).map(function (_ref4) {
+      var value = _ref4.value;
+      return value;
+    }).join(',');
+    setValue(name, newValue, {
+      shouldValidate: true,
+      shouldDirty: true
+    });
+    setLocalOptions(function (prevLocalOptions) {
+      return [].concat(prevLocalOptions, [option]).sort(function (a, b) {
+        return a.sortValue - b.sortValue;
+      });
+    });
+    setLocalValues(function (prevLocalValues) {
+      return prevLocalValues.filter(function (prevLocalValue) {
+        return prevLocalValue !== option;
+      });
+    });
   };
 
-  var customStyles = {
-    control: function control() {
-      return {
-        borderRadius: '6px',
-        fontSize: '16px',
-        color: '#202020',
-        backgroundColor: '#FFFFFF',
-        border: '1px solid',
-        borderColor: colors.gray[200],
-        minHeight: '48px',
-        display: 'flex',
-        padding: '2px 6px'
-      };
-    },
-    menu: function menu() {
-      return {
-        boxShadow: '0 5px 5px 0 rgba(16, 27, 79, 0.15)',
-        borderRadius: '6px',
-        backgroundColor: 'white'
-      };
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: dropdownRef,
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    fontSize: "13px",
+    border: isFocussed ? '2px solid' : '1px solid',
+    borderColor: isFocussed ? colors.border.focus : colors.border["default"],
+    py: "5px",
+    pl: "8px",
+    borderRadius: "4px",
+    alignItems: "center",
+    justifyContent: "space-between",
+    onClick: function onClick() {
+      return !disabled && setIsFocussed(true);
     },
-    indicatorsContainer: function indicatorsContainer() {
-      return {
-        display: 'none'
-      };
+    bg: disabled ? colors.fill.light.quaternary : '#ffffff',
+    cursor: disabled ? 'not-allowed' : 'pointer'
+  }, /*#__PURE__*/React.createElement(Flex, {
+    height: "28px",
+    alignItems: "center"
+  }, localValues.length ? localValues.map(function (option) {
+    return /*#__PURE__*/React.createElement(Box, {
+      mr: "4px"
+    }, /*#__PURE__*/React.createElement(Token, {
+      label: option.label,
+      onDelete: function onDelete() {
+        return handleDelete(option);
+      }
+    }));
+  }) : /*#__PURE__*/React.createElement(Text$2, {
+    color: colors.label.secondary.light,
+    fontSize: "13px"
+  }, placeholder)), /*#__PURE__*/React.createElement(Flex, {
+    width: "39px",
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: SubtractIcon,
+    alt: "subtract",
+    boxSize: "16px"
+  }))), isFocussed && /*#__PURE__*/React.createElement(Dropdown, {
+    onSelectItem: function onSelectItem(option) {
+      return handleChange(option);
     },
-    placeholder: function placeholder() {
-      return {
-        color: '#CBCDCF',
-        fontSize: '16px'
-      };
-    }
-  };
-  return /*#__PURE__*/React.createElement(ReactSelect, {
-    components: component,
-    inputValue: inputValue,
-    value: localValue,
-    isClearable: true,
-    isSearchable: true,
-    isMulti: true,
-    menuPortalTarget: document.body,
-    menuPosition: 'fixed',
-    onChange: handleChange,
-    onInputChange: handleInputChange,
-    styles: customStyles,
-    options: options,
-    placeholder: false,
-    formatGroupLabel: formatGroupLabel
-  });
+    options: localOptions
+  }));
 });
 
 /**
@@ -695,7 +795,9 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
 var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   var name = _ref2.name,
       setValue = _ref2.setValue,
-      control = _ref2.control;
+      control = _ref2.control,
+      placeholder = _ref2.placeholder,
+      disabled = _ref2.disabled;
   var watchedValue = useWatch({
     control: control,
     name: name
@@ -706,14 +808,19 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
       setLatestFormValueToArray = _useState[1];
 
   var inputRef = useRef(null);
+  var inputWrapperRef = useRef(null);
+
+  var _useState2 = useState(null),
+      tokenIndex = _useState2[0],
+      setTokenIndex = _useState2[1];
 
-  var _useState2 = useState(false),
-      isInputFocused = _useState2[0],
-      setInputFocused = _useState2[1];
+  var _useState3 = useState(false),
+      isFocussed = _useState3[0],
+      setIsFocussed = _useState3[1];
 
-  var _useState3 = useState(''),
-      localValue = _useState3[0],
-      setLocalValue = _useState3[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
+  var _useState4 = useState(''),
+      localValue = _useState4[0],
+      setLocalValue = _useState4[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
 
 
   useEffect(function () {
@@ -724,17 +831,24 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
       setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
     }
-  }, [watchedValue]); // ensures after value addition that the input field is wiped
-
-  useEffect(function () {
-    if (localValue === ' ' || localValue.trim() === ',') {
-      setLocalValue('');
-    }
-  }, [localValue]);
+  }, [watchedValue]);
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
-      if (!localValue.trim() || localValue.trim() === ',') return setLocalValue('');
+      if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
+        setLocalValue(lastestFormValueToArray[tokenIndex]);
+
+        var _filteredUniqueValues = Array.from(new Set(lastestFormValueToArray.filter(function (value) {
+          return value !== lastestFormValueToArray[tokenIndex];
+        })));
+
+        setValue(name, _filteredUniqueValues.toString().replace(/\s/g, ''), {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+        return setTokenIndex(null);
+      }
+
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setLocalValue('');
       return setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
@@ -742,6 +856,46 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
         shouldDirty: true
       });
     }
+
+    if (!localValue.trim().length && lastestFormValueToArray.length) {
+      if (e.key === 'Backspace' && tokenIndex !== null) {
+        setLocalValue(lastestFormValueToArray[tokenIndex].substring(0, lastestFormValueToArray[tokenIndex].length));
+
+        var _filteredUniqueValues2 = Array.from(new Set([].concat(lastestFormValueToArray).filter(function (value) {
+          return value !== lastestFormValueToArray[tokenIndex];
+        })));
+
+        setValue(name, _filteredUniqueValues2.toString().replace(/\s/g, ''), {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+        return setTokenIndex(null);
+      }
+
+      if (e.key === 'ArrowLeft') {
+        if (tokenIndex === 0) return;
+
+        if (!tokenIndex) {
+          return setTokenIndex(lastestFormValueToArray.length - 1);
+        }
+
+        return setTokenIndex(function (prevTokenIndex) {
+          return prevTokenIndex - 1;
+        });
+      }
+
+      if (e.key === 'ArrowRight') {
+        if (tokenIndex === null) return;
+
+        if (tokenIndex === lastestFormValueToArray.length - 1) {
+          return setTokenIndex(null);
+        }
+
+        return setTokenIndex(function (prevTokenIndex) {
+          return prevTokenIndex + 1;
+        });
+      }
+    }
   };
 
   var onRemoveTag = function onRemoveTag(index) {
@@ -765,65 +919,77 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
       setLocalValue('');
     }
 
-    setInputFocused(false);
+    setIsFocussed(false);
   };
 
-  return /*#__PURE__*/React.createElement(Flex, {
-    position: "relative",
-    width: "100%"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: isInputFocused ? '2px solid rgba(0, 122, 255, 255)' : '',
-    borderRadius: isInputFocused ? 'md' : '',
-    width: "100%"
+  useOutsideClick({
+    ref: inputWrapperRef,
+    handler: onBlur
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
   }, /*#__PURE__*/React.createElement(Flex, {
-    background: "rgba(255, 255, 255, 0.8)",
-    border: "1px solid",
-    borderColor: colors.gray[200],
-    borderRadius: "6px",
-    fontWeight: "400",
-    fontSize: "12px",
-    lineHeight: "12px",
-    minHeight: "48px",
-    letterSpacing: "0.02em",
-    padding: "0 12px",
-    pt: lastestFormValueToArray.length ? '12px' : '0px',
+    fontSize: "13px",
+    border: isFocussed ? '2px solid' : '1px solid',
+    borderColor: isFocussed ? colors.border.focus : colors.border["default"],
+    py: "5px",
+    pl: "8px",
+    borderRadius: "4px",
     alignItems: "center",
-    flexWrap: "wrap",
-    gap: "0.5em",
-    width: "100%",
+    justifyContent: "space-between",
     onClick: function onClick() {
-      var _inputRef$current;
+      if (!disabled) {
+        var _inputRef$current;
 
-      return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-    }
-  }, lastestFormValueToArray.map(function (tag, index) {
-    return /*#__PURE__*/React.createElement(InputTag, {
-      value: tag,
-      key: tag,
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      }
+    },
+    bg: disabled ? colors.fill.light.quaternary : '#ffffff',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    ref: inputWrapperRef
+  }, /*#__PURE__*/React.createElement(Flex, {
+    height: "28px",
+    alignItems: "center",
+    width: "fit-content"
+  }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
+    return /*#__PURE__*/React.createElement(Box, {
+      mr: "4px",
+      border: tokenIndex === index ? "2px solid " + colors.border.focus : 'none',
+      borderRadius: "full",
+      onClick: function onClick() {
+        return setTokenIndex(index);
+      }
+    }, /*#__PURE__*/React.createElement(Token, {
+      label: label,
       onDelete: function onDelete(e) {
         e.stopPropagation();
         e.preventDefault();
         onRemoveTag(index);
       }
-    });
-  }), /*#__PURE__*/React.createElement(Input$2, {
+    }));
+  }) : /*#__PURE__*/React.createElement(Text$2, {
+    color: colors.label.secondary.light,
+    fontSize: "13px"
+  }, placeholder)), /*#__PURE__*/React.createElement(Flex, {
+    flex: 1
+  }, /*#__PURE__*/React.createElement(Input$2, {
     onKeyDown: onHandleKeyDown,
     type: "text",
-    padding: isInputFocused ? '0.5em 0' : '0px',
-    height: isInputFocused ? '46px' : '0px',
+    padding: 0,
     width: "100%",
     border: "none",
+    height: "26px",
+    color: tokenIndex !== null ? 'transparent' : colors.label.primary,
     _focus: {
       boxShadow: 'none !important'
     },
     value: localValue,
-    onBlur: onBlur,
     onChange: function onChange(e) {
-      return setLocalValue(e.target.value);
+      return tokenIndex === null && setLocalValue(e.target.value);
     },
     ref: inputRef,
     onFocus: function onFocus() {
-      return setInputFocused(true);
+      return setIsFocussed(true);
     }
   }))));
 });
@@ -849,6 +1015,19 @@ var StackedSwitch = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   });
 });
 
+/**
+ * A functional React component utilized to render the `Label` component
+ */
+
+var Label$1 = function Label(_ref) {
+  var isRequired = _ref.isRequired,
+      label = _ref.label;
+  return /*#__PURE__*/React.createElement(FormLabel$1, null, label, isRequired && /*#__PURE__*/React.createElement(Box, {
+    ml: 1,
+    color: colors$1.label.error
+  }, "*"));
+};
+
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
@@ -862,8 +1041,6 @@ function Input(_ref) {
       placeholder = _ref.placeholder,
       name = _ref.name,
       helperText = _ref.helperText,
-      leftElement = _ref.leftElement,
-      rightElement = _ref.rightElement,
       options = _ref.options,
       isInvalid = _ref.isInvalid,
       errorText = _ref.errorText,
@@ -885,8 +1062,6 @@ function Input(_ref) {
           placeholder: placeholder,
           maxLength: maxLength,
           isRequired: isRequired,
-          leftElement: leftElement,
-          rightElement: rightElement,
           isInvalid: isInvalid,
           onChange: onChange,
           onBlur: onBlur,
@@ -920,9 +1095,12 @@ function Input(_ref) {
           options: options,
           onChange: onChange,
           onBlur: onBlur,
+          setValue: setValue,
+          control: control,
           ref: ref,
           disabled: disabled,
-          value: value
+          value: value,
+          placeholder: placeholder
         });
 
       case 'textarea':
@@ -968,7 +1146,8 @@ function Input(_ref) {
           disabled: disabled,
           value: value,
           setValue: setValue,
-          control: control
+          control: control,
+          placeholder: placeholder
         });
 
       case 'pilled-text':
@@ -1002,7 +1181,7 @@ function Input(_ref) {
       default:
         return null;
     }
-  }, [ariaLabel, className, control, disabled, inputType, isInvalid, isRequired, leftElement, maxLength, name, options, placeholder, rightElement, setValue]);
+  }, [ariaLabel, className, control, disabled, inputType, isInvalid, isRequired, maxLength, name, options, placeholder, setValue]);
   return /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: name,
@@ -1021,14 +1200,10 @@ function Input(_ref) {
         isInvalid: isInvalid,
         position: "relative",
         py: label ? 6 : 0
-      }, label && /*#__PURE__*/React.createElement(FormLabel$1, {
-        position: "absolute",
-        top: 0,
-        display: "flex"
-      }, label, isRequired && /*#__PURE__*/React.createElement(Box, {
-        ml: 1,
-        color: "red.500"
-      }, "*")), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React.createElement(FormHelperText, null, helperText));
+      }, label && /*#__PURE__*/React.createElement(Label$1, {
+        label: label,
+        isRequired: isRequired
+      }), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React.createElement(FormHelperText, null, helperText));
     }
   });
 }
@@ -1152,7 +1327,7 @@ var Layout = function Layout(_ref) {
     onClick: function onClick() {
       return setShow(!show);
     },
-    icon: show ? /*#__PURE__*/React.createElement(CloseIcon, null) : /*#__PURE__*/React.createElement(HamburgerIcon, null),
+    icon: show ? /*#__PURE__*/React.createElement(CloseIcon$1, null) : /*#__PURE__*/React.createElement(HamburgerIcon, null),
     _focus: {
       boxShadow: 'none'
     }
@@ -1195,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,
@@ -1283,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),
@@ -1317,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",
@@ -1368,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,
@@ -1393,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,
@@ -1426,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'
@@ -1452,7 +1627,7 @@ var baseStyle = {
 function variantPositive() {
   return {
     container: {
-      bg: '#d8f1b8'
+      bg: colors.fill.success
     }
   };
 }
@@ -1460,7 +1635,7 @@ function variantPositive() {
 function variantWarning() {
   return {
     container: {
-      bg: '#ffefb4'
+      bg: colors.fill.warning
     }
   };
 }
@@ -1468,7 +1643,7 @@ function variantWarning() {
 function variantError() {
   return {
     container: {
-      bg: '#ffbdb9'
+      bg: colors.fill.error
     }
   };
 }
@@ -1476,7 +1651,7 @@ function variantError() {
 function variantNeutral() {
   return {
     container: {
-      bg: '#7474800D'
+      bg: colors.fill.light.tertiary
     }
   };
 }
@@ -1552,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'
+  },
+  _hover: {
+    bg: colors.fill.action
+  },
+  _active: {
+    color: colors.label.primary.dark,
+    bg: colors.fill.action,
+    bgGradient: colors.fill.light.quaternary
   },
-  cyan: {
-    bg: 'cyan.400',
-    color: 'black',
-    hoverBg: 'cyan.500',
-    activeBg: 'cyan.600'
+  _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
 };
 
@@ -1788,26 +1808,26 @@ var Code = {
 
 var parts$1 = ['requiredIndicator', 'helperText'];
 
-function baseStyleRequiredIndicator(props) {
+function baseStyleRequiredIndicator() {
   return {
     ml: 1,
-    color: mode('red.500', 'red.300')(props)
+    color: colors.label.error
   };
 }
 
-function baseStyleHelperText(props) {
+function baseStyleHelperText() {
   return {
+    color: colors.label.secondary.light,
     mt: 1,
-    color: mode('gray.400', 'whiteAlpha.600')(props),
-    lineHeight: 'normal',
-    fontSize: 'sm'
+    ml: 1,
+    fontSize: '13px'
   };
 }
 
-var baseStyle$4 = function baseStyle(props) {
+var baseStyle$4 = function baseStyle() {
   return {
-    requiredIndicator: baseStyleRequiredIndicator(props),
-    helperText: baseStyleHelperText(props)
+    requiredIndicator: baseStyleRequiredIndicator(),
+    helperText: baseStyleHelperText()
   };
 };
 
@@ -1818,26 +1838,26 @@ var Form$1 = {
 
 var parts$2 = ['text', 'icon'];
 
-function baseStyleText(props) {
+function baseStyleText() {
   return {
-    color: mode('red.500', 'red.300')(props),
+    color: colors.label.error,
     mt: 1,
-    lineHeight: 'normal',
-    fontSize: 'sm'
+    ml: 1,
+    fontSize: '13px'
   };
 }
 
-function baseStyleIcon(props) {
+function baseStyleIcon() {
   return {
-    mr: '0.5em',
-    color: mode('red.500', 'red.300')(props)
+    ml: 1,
+    color: colors.label.error
   };
 }
 
-var baseStyle$5 = function baseStyle(props) {
+var baseStyle$5 = function baseStyle() {
   return {
-    text: baseStyleText(props),
-    icon: baseStyleIcon(props)
+    text: baseStyleText(),
+    icon: baseStyleIcon()
   };
 };
 
@@ -1847,234 +1867,57 @@ var FormError = {
 };
 
 var baseStyle$6 = {
-  fontSize: 'md',
-  mr: 3,
+  fontSize: '13px',
+  position: 'absolute',
+  top: 0,
+  display: 'flex',
+  ml: 1,
   mb: 1,
-  fontWeight: 'bold',
-  color: 'gray.700',
-  transition: 'all 0.2s',
-  opacity: 1,
-  _disabled: {
-    opacity: 0.4
-  }
+  color: colors.label.primary.light,
+  opacity: 1
 };
 var FormLabel = {
   baseStyle: baseStyle$6
 };
 
-var parts$3 = ['field', 'addon'];
+var parts$3 = ['field'];
 var baseStyle$7 = {
   field: {
-    width: '100%',
-    outline: 0,
-    position: 'relative',
-    appearance: 'none',
-    transition: 'all 0.2s',
+    fontSize: '13px',
     '::placeholder': {
-      color: 'gray.300'
-    }
-  }
-};
-var size = {
-  lg: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 12,
-    borderRadius: 'md'
-  },
-  md: {
-    fontSize: 'md',
-    pl: 3,
-    pr: 3,
-    h: 10,
-    borderRadius: 'md'
-  },
-  sm: {
-    fontSize: 'sm',
-    pl: 3,
-    pr: 3,
-    h: 8,
-    borderRadius: 'sm'
-  }
-};
-var sizes$1 = {
-  lg: {
-    field: size.lg,
-    addon: size.lg
-  },
-  md: {
-    field: size.md,
-    addon: size.md
-  },
-  sm: {
-    field: size.sm,
-    addon: size.sm
-  }
-};
-
-function getDefaults(props) {
-  var fc = props.focusBorderColor,
-      ec = props.errorBorderColor;
-  return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
-    errorBorderColor: ec || mode('red.500', 'red.300')(props)
-  };
-}
-
-function variantOutline$2(props) {
-  var theme = props.theme;
-
-  var _getDefaults = getDefaults(props),
-      fc = _getDefaults.focusBorderColor,
-      ec = _getDefaults.errorBorderColor;
-
-  return {
-    field: {
-      border: '1px solid',
-      borderColor: 'inherit',
-      bg: 'white',
-      _hover: {
-        borderColor: mode('gray.300', 'whiteAlpha.400')(props)
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      },
-      _focus: {
-        zIndex: 1,
-        borderColor: getColor(theme, fc),
-        boxShadow: "0 0 0 2px " + transparentize(fc, 0.3)(theme)
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec),
-        boxShadow: 'none',
-        _focus: {
-          boxShadow: "0 0 0 2px " + transparentize(ec, 0.3)(theme)
-        }
-      }
+      color: colors.label.secondary.light
     },
-    addon: {
-      border: '1px solid',
-      borderColor: mode('inherit', 'whiteAlpha.50')(props),
-      bg: mode('gray.100', 'whiteAlpha.300')(props)
-    }
-  };
-}
-
-function variantFilled(props) {
-  var theme = props.theme;
-
-  var _getDefaults2 = getDefaults(props),
-      fc = _getDefaults2.focusBorderColor,
-      ec = _getDefaults2.errorBorderColor;
-
-  return {
-    field: {
-      border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.50', 'whiteAlpha.50')(props),
-      _hover: {
-        bg: mode('gray.100', 'whiteAlpha.100')(props)
-      },
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all'
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: 'not-allowed'
-      },
-      _focus: {
-        bg: 'transparent',
-        borderColor: getColor(theme, fc)
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec)
-      }
+    py: '5px',
+    px: '8px',
+    border: '1px solid',
+    borderColor: colors.border["default"],
+    _disabled: {
+      cursor: 'not-allowed',
+      bg: colors.fill.light.quaternary,
+      color: colors.label.secondary.light
     },
-    addon: {
+    _focus: {
+      bg: '#ffffff',
       border: '2px solid',
-      borderColor: 'transparent',
-      bg: mode('gray.100', 'whiteAlpha.50')(props)
+      borderColor: colors.border.focus
     }
-  };
-}
-
-function variantFlushed(props) {
-  var theme = props.theme;
-
-  var _getDefaults3 = getDefaults(props),
-      fc = _getDefaults3.focusBorderColor,
-      ec = _getDefaults3.errorBorderColor;
-
-  return {
-    field: {
-      borderBottom: '1px solid inherit',
-      borderRadius: 0,
-      pl: 0,
-      pr: 0,
-      bg: 'transparent',
-      _readOnly: {
-        boxShadow: 'none !important',
-        userSelect: 'all'
-      },
-      _focus: {
-        borderColor: getColor(theme, fc),
-        boxShadow: "0px 1px 0px 0px " + getColor(theme, fc)
-      },
-      _invalid: {
-        borderColor: getColor(theme, ec)
-      }
-    },
-    addon: {
-      borderBottom: '2px solid',
-      borderColor: 'inherit',
-      borderRadius: 0,
-      paddingX: 0,
-      bg: 'transparent'
-    }
-  };
-}
-
-var variantUnstyled$1 = {
-  field: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto'
-  },
-  addon: {
-    bg: 'transparent',
-    pl: 0,
-    pr: 0,
-    height: 'auto'
   }
 };
 var variants$4 = {
-  outline: variantOutline$2,
-  filled: variantFilled,
-  flushed: variantFlushed,
-  unstyled: variantUnstyled$1
+  "default": baseStyle$7
 };
 var defaultProps$4 = {
-  size: 'lg',
-  variant: 'outline'
+  variant: 'default'
 };
 var Input$1 = {
   parts: parts$3,
   baseStyle: baseStyle$7,
-  sizes: sizes$1,
   variants: variants$4,
   defaultProps: defaultProps$4
 };
 
 var baseStyle$8 = {
-  color: 'blue.500',
+  color: colors.fill.action,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {
@@ -2181,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'
@@ -2320,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),
@@ -2413,7 +2191,7 @@ function getSize(value) {
   };
 }
 
-var sizes$2 = {
+var sizes = {
   xs: /*#__PURE__*/getSize('xs'),
   sm: /*#__PURE__*/getSize('sm'),
   md: /*#__PURE__*/getSize('md'),
@@ -2444,26 +2222,24 @@ var defaultProps$5 = {
   isCentered: true
 };
 var Modal = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
-  sizes: sizes$2,
+  parts: parts$4,
+  baseStyle: baseStyle$9,
+  sizes: sizes,
   variants: variants$6,
   defaultProps: defaultProps$5
 };
 
-var sizes$3 = Input$1.sizes,
-    defaultProps$6 = Input$1.defaultProps,
+var defaultProps$6 = Input$1.defaultProps,
     variants$7 = Input$1.variants;
-var parts$6 = ['field', 'icon'];
+var parts$5 = ['field', 'icon'];
 
-function baseStyleField(props) {
+function baseStyleField() {
   return _extends({}, Input$1.baseStyle.field, {
     appearance: 'none',
     paddingBottom: '1px',
     lineHeight: 'normal',
     bg: 'white',
-    '> option': {
-      bg: mode('white', 'gray.700')(props)
+    '> option': {// bg: mode('white', 'gray.700')(props),
     }
   });
 }
@@ -2476,22 +2252,21 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$a = function baseStyle() {
   return {
-    field: baseStyleField(props),
+    field: baseStyleField(),
     icon: baseStyleInput
   };
 };
 
 var Select = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
-  sizes: sizes$3,
+  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,
@@ -2524,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$4 = {
+var sizes$1 = {
   sm: {
     track: {
       w: '1.375rem',
@@ -2577,13 +2352,13 @@ var defaultProps$7 = {
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$7,
-  baseStyle: baseStyle$c,
-  sizes: sizes$4,
+  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;
@@ -2623,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),
@@ -2632,7 +2407,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$5 = {
+var sizes$2 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -2773,18 +2548,18 @@ function variantSolidRounded(props) {
   };
 }
 
-var variantUnstyled$2 = {};
+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: '""',
@@ -2808,7 +2583,7 @@ var variants$8 = {
   'enclosed-colored': variantEnclosedColored,
   'soft-rounded': variantSoftRounded,
   'solid-rounded': variantSolidRounded,
-  unstyled: variantUnstyled$2,
+  unstyled: variantUnstyled,
   simple: variantSimple
 };
 var defaultProps$8 = {
@@ -2817,70 +2592,30 @@ var defaultProps$8 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
-  sizes: sizes$5,
+  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',
-  minHeight: '80px',
+  height: '80px',
   lineHeight: 'short'
 });
 
-var codeVariant = function codeVariant(props) {
-  var _focus = Input$1.variants.outline(props).field._focus;
-
-  return {
-    bg: 'blue.900',
-    color: 'white',
-    fontFamily: 'mono',
-    fontSize: 'sm',
-    border: '1px',
-    borderColor: 'blue.900',
-    borderRadius: 'lg',
-    p: 6,
-    wordBreak: 'break-all',
-    _focus: _focus
-  };
-};
-
-var variants$9 = {
-  outline: function outline(props) {
-    return Input$1.variants.outline(props).field;
-  },
-  flushed: function flushed(props) {
-    return Input$1.variants.flushed(props).field;
-  },
-  filled: function filled(props) {
-    return Input$1.variants.filled(props).field;
-  },
-  code: function code(props) {
-    return codeVariant(props);
-  },
-  unstyled: Input$1.variants.unstyled.field
-};
-var sizes$6 = {
-  sm: Input$1.sizes.sm.field,
-  md: Input$1.sizes.md.field,
-  lg: Input$1.sizes.lg.field
-};
 var defaultProps$9 = {
-  size: 'lg',
-  variant: 'outline'
+  variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
-  sizes: sizes$6,
-  variants: variants$9,
+  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,
@@ -2889,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],
@@ -2898,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],
@@ -2907,19 +2642,19 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$f;
+  return baseStyle$e;
 }
 
-var variants$a = {
+var variants$9 = {
   header: variantHeader,
   subheader: variantSubheader,
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$f,
-  variants: variants$a,
+  baseStyle: baseStyle$e,
+  variants: variants$9,
   defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
-    variant: variants$a.paragraph
+    variant: variants$9.paragraph
   })
 };
 
@@ -2958,7 +2693,6 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link,
-    Menu: Menu,
     Modal: Modal,
     Select: Select,
     Switch: Switch,