@xqmsg/ui-core 0.9.2 → 0.10.0

package/dist/ui-core.esm.js

@@ -1,8 +1,8 @@
-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 { FormProvider, useWatch, Controller } from 'react-hook-form';
-import ReactSelect from 'react-select';
-import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
+import colors$1 from 'src/theme/foundations/colors';
+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';
 
@@ -162,7 +162,22 @@ var label = {
   primary: {
     light: '#000000',
     dark: '#FFFFFF'
-  }
+  },
+  secondary: {
+    light: '#3C3C4399'
+  },
+  error: '#FF0000'
+};
+var border = {
+  focus: '#3A6CD980',
+  "default": '#9999991A'
+};
+var fill = {
+  light: '#7474800D',
+  positive: '#d8f1b8',
+  error: '#ffbdb9',
+  warning: '#ffefb4',
+  blue: '#0082ff'
 };
 
 var colors = /*#__PURE__*/_extends({
@@ -176,6 +191,8 @@ var colors = /*#__PURE__*/_extends({
   backdrop: '#fbfcff'
 }, aliases, {
   label: label,
+  border: border,
+  fill: fill,
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',
@@ -441,7 +458,7 @@ var StackedCheckboxGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref)
   }));
 });
 
-var _excluded$1 = ["type", "isRequired", "leftElement", "rightElement"];
+var _excluded$1 = ["type", "isRequired"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -450,15 +467,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);
 
-  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 +500,60 @@ 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.blue,
+          borderRadius: '4px'
+        }
+      }, option.label));
+    });
+  }, [onSelectItem, options]);
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: colors$1.fill.light,
+    backdropFilter: "blur(64px)",
+    borderRadius: "4px",
+    mt: "3px",
+    maxH: "320px",
+    overflowY: "auto",
+    px: "8px",
+    py: "4px",
+    position: "absolute",
+    width: "100%"
+  }, DropdownContent);
+};
+
+var _excluded$2 = ["isRequired", "options", "name", "setValue", "onChange"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -493,19 +561,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,
+      name = _ref2.name,
+      setValue = _ref2.setValue,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
 
-  return /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Select$1, Object.assign({
+  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);
+    }
+  });
+
+  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 +632,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 +666,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(''),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
+  var _useState = useState([]),
+      localValues = _useState[0],
+      setLocalValues = _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 : '#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 +805,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 +818,19 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
       setLatestFormValueToArray = _useState[1];
 
   var inputRef = useRef(null);
+  var inputWrapperRef = useRef(null);
 
-  var _useState2 = useState(false),
-      isInputFocused = _useState2[0],
-      setInputFocused = _useState2[1];
+  var _useState2 = useState(null),
+      tokenIndex = _useState2[0],
+      setTokenIndex = _useState2[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 _useState3 = useState(false),
+      isFocussed = _useState3[0],
+      setIsFocussed = _useState3[1];
+
+  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 +841,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 +866,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 +929,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 : '#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 +1025,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 +1051,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 +1072,6 @@ function Input(_ref) {
           placeholder: placeholder,
           maxLength: maxLength,
           isRequired: isRequired,
-          leftElement: leftElement,
-          rightElement: rightElement,
           isInvalid: isInvalid,
           onChange: onChange,
           onBlur: onBlur,
@@ -920,9 +1105,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 +1156,8 @@ function Input(_ref) {
           disabled: disabled,
           value: value,
           setValue: setValue,
-          control: control
+          control: control,
+          placeholder: placeholder
         });
 
       case 'pilled-text':
@@ -1002,7 +1191,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 +1210,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 +1337,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'
     }
@@ -1452,7 +1637,7 @@ var baseStyle = {
 function variantPositive() {
   return {
     container: {
-      bg: '#d8f1b8'
+      bg: colors.fill.positive
     }
   };
 }
@@ -1460,7 +1645,7 @@ function variantPositive() {
 function variantWarning() {
   return {
     container: {
-      bg: '#ffefb4'
+      bg: colors.fill.warning
     }
   };
 }
@@ -1468,7 +1653,7 @@ function variantWarning() {
 function variantError() {
   return {
     container: {
-      bg: '#ffbdb9'
+      bg: colors.fill.error
     }
   };
 }
@@ -1476,7 +1661,7 @@ function variantError() {
 function variantNeutral() {
   return {
     container: {
-      bg: '#7474800D'
+      bg: colors.fill.light
     }
   };
 }
@@ -1788,26 +1973,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 +2003,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,228 +2032,51 @@ 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,
+      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
 };
@@ -2413,7 +2421,7 @@ function getSize(value) {
   };
 }
 
-var sizes$2 = {
+var sizes$1 = {
   xs: /*#__PURE__*/getSize('xs'),
   sm: /*#__PURE__*/getSize('sm'),
   md: /*#__PURE__*/getSize('md'),
@@ -2446,24 +2454,22 @@ var defaultProps$5 = {
 var Modal = {
   parts: parts$5,
   baseStyle: baseStyle$a,
-  sizes: sizes$2,
+  sizes: sizes$1,
   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'];
 
-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,9 +2482,9 @@ var baseStyleInput = {
   }
 };
 
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$b = function baseStyle() {
   return {
-    field: baseStyleField(props),
+    field: baseStyleField(),
     icon: baseStyleInput
   };
 };
@@ -2486,7 +2492,6 @@ var baseStyle$b = function baseStyle(props) {
 var Select = {
   parts: parts$6,
   baseStyle: baseStyle$b,
-  sizes: sizes$3,
   variants: variants$7,
   defaultProps: defaultProps$6
 };
@@ -2531,7 +2536,7 @@ var baseStyle$c = function baseStyle(props) {
   };
 };
 
-var sizes$4 = {
+var sizes$2 = {
   sm: {
     track: {
       w: '1.375rem',
@@ -2579,7 +2584,7 @@ var defaultProps$7 = {
 var Switch = {
   parts: parts$7,
   baseStyle: baseStyle$c,
-  sizes: sizes$4,
+  sizes: sizes$2,
   defaultProps: defaultProps$7
 };
 
@@ -2632,7 +2637,7 @@ var baseStyle$d = function baseStyle(props) {
   };
 };
 
-var sizes$5 = {
+var sizes$3 = {
   sm: {
     tab: {
       py: '0.25rem',
@@ -2773,7 +2778,7 @@ function variantSolidRounded(props) {
   };
 }
 
-var variantUnstyled$2 = {};
+var variantUnstyled$1 = {};
 var variantSimple = {
   tab: {
     position: 'relative',
@@ -2808,7 +2813,7 @@ var variants$8 = {
   'enclosed-colored': variantEnclosedColored,
   'soft-rounded': variantSoftRounded,
   'solid-rounded': variantSolidRounded,
-  unstyled: variantUnstyled$2,
+  unstyled: variantUnstyled$1,
   simple: variantSimple
 };
 var defaultProps$8 = {
@@ -2819,7 +2824,7 @@ var defaultProps$8 = {
 var Tabs = {
   parts: parts$8,
   baseStyle: baseStyle$d,
-  sizes: sizes$5,
+  sizes: sizes$3,
   variants: variants$8,
   defaultProps: defaultProps$8
 };
@@ -2827,55 +2832,15 @@ var Tabs = {
 var baseStyle$e = /*#__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,
   defaultProps: defaultProps$9
 };
 
@@ -2910,16 +2875,16 @@ function variantParagraph() {
   return baseStyle$f;
 }
 
-var variants$a = {
+var variants$9 = {
   header: variantHeader,
   subheader: variantSubheader,
   paragraph: variantParagraph
 };
 var Text$1 = {
   baseStyle: baseStyle$f,
-  variants: variants$a,
+  variants: variants$9,
   defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
-    variant: variants$a.paragraph
+    variant: variants$9.paragraph
   })
 };