@xqmsg/ui-core 0.14.5 → 0.15.0

package/dist/ui-core.esm.js

@@ -1,5 +1,5 @@
 import React__default, { useMemo, useCallback, useRef, useEffect, useState, memo, forwardRef, createElement } from 'react';
-import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, Input as Input$2, InputGroup, 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$2, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
+import { Button as Button$2, Image, Alert as Alert$1, AlertDescription, Box, Flex, Text as Text$2, Icon as Icon$1, Spinner, Checkbox, Input as Input$2, InputGroup, 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$2, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { truncate } from 'lodash-es';
 import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
@@ -16,6 +16,91 @@ var NeutralIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214
 
 var WarningIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%205V7.5M13%207C13%2010.3137%2010.3137%2013%207%2013C3.68629%2013%201%2010.3137%201%207C1%203.68629%203.68629%201%207%201C10.3137%201%2013%203.68629%2013%207ZM7%209.5H7.005V9.505H7V9.5Z%22%20stroke%3D%22%23F8CE52%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
+/**
+ * A functional React component utilized to render the `Button` component
+ */
+
+var Button = function Button(_ref) {
+  var onClick = _ref.onClick,
+      text = _ref.text,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      ariaLabel = _ref.ariaLabel,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      width = _ref.width;
+  return /*#__PURE__*/React__default.createElement(Button$2, {
+    onClick: onClick,
+    type: type,
+    variant: variant,
+    disabled: disabled,
+    "aria-label": ariaLabel,
+    className: className,
+    width: width === 'fixed' ? '100%' : 'fit-content'
+  }, text);
+};
+
+/**
+ * A functional React component utilized to render the `Banner` component
+ */
+
+var Banner = function Banner(_ref) {
+  var variant = _ref.variant,
+      message = _ref.message,
+      buttonText = _ref.buttonText,
+      onClick = _ref.onClick;
+  var Icon = useMemo(function () {
+    switch (variant) {
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: ErrorIcon,
+          alt: "error",
+          boxSize: "16px"
+        });
+
+      case 'neutral':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: NeutralIcon,
+          alt: "neutral",
+          boxSize: "16px"
+        });
+
+      case 'positive':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: PositiveIcon,
+          alt: "positive",
+          boxSize: "16px"
+        });
+
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: WarningIcon,
+          alt: "warning",
+          boxSize: "16px"
+        });
+
+      default:
+        return null;
+    }
+  }, [variant]);
+  return /*#__PURE__*/React__default.createElement(Alert$1, {
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(AlertDescription, null, /*#__PURE__*/React__default.createElement(Box, {
+    pb: "8px"
+  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
+    pt: "8px",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "secondary",
+    onClick: onClick,
+    text: buttonText,
+    width: "variable",
+    ariaLabel: "banner button"
+  }))));
+};
+
 var blue = {
   50: 'hsl(209, 100%, 95%)',
   100: 'hsl(209, 100%, 90%)',
@@ -151,64 +236,6 @@ var colors = {
   blue: blue
 };
 
-/**
- * A functional React component utilized to render the `Banner` component
- */
-
-var Banner = function Banner(_ref) {
-  var variant = _ref.variant,
-      message = _ref.message,
-      buttonText = _ref.buttonText,
-      onClick = _ref.onClick;
-  var Icon = useMemo(function () {
-    switch (variant) {
-      case 'error':
-        return /*#__PURE__*/React__default.createElement(Image, {
-          src: ErrorIcon,
-          alt: "error",
-          boxSize: "16px"
-        });
-
-      case 'neutral':
-        return /*#__PURE__*/React__default.createElement(Image, {
-          src: NeutralIcon,
-          alt: "neutral",
-          boxSize: "16px"
-        });
-
-      case 'positive':
-        return /*#__PURE__*/React__default.createElement(Image, {
-          src: PositiveIcon,
-          alt: "positive",
-          boxSize: "16px"
-        });
-
-      case 'warning':
-        return /*#__PURE__*/React__default.createElement(Image, {
-          src: WarningIcon,
-          alt: "warning",
-          boxSize: "16px"
-        });
-
-      default:
-        return null;
-    }
-  }, [variant]);
-  return /*#__PURE__*/React__default.createElement(Alert$1, {
-    variant: variant
-  }, /*#__PURE__*/React__default.createElement(AlertDescription, null, /*#__PURE__*/React__default.createElement(Box, {
-    pb: "8px"
-  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
-    pt: "8px",
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
-    size: "sm",
-    bg: "white",
-    color: colors.fill.action,
-    onClick: onClick
-  }, buttonText))));
-};
-
 /**
  * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
  */
@@ -296,32 +323,6 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-/**
- * A functional React component utilized to render the `Button` component
- */
-
-var Button = function Button(_ref) {
-  var onClick = _ref.onClick,
-      text = _ref.text,
-      _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,
-      disabled = _ref.disabled,
-      className = _ref.className,
-      width = _ref.width;
-  return /*#__PURE__*/React__default.createElement(Button$2, {
-    onClick: onClick,
-    type: type,
-    variant: variant,
-    disabled: disabled,
-    "aria-label": ariaLabel,
-    className: className,
-    width: width === 'variable' ? '100%' : 'fit-content'
-  }, text);
-};
-
 var GoogleLogo = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20533.5%20544.3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20%20%20%20d%3D%22M533.5%20278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1%2033.8-25.7%2063.7-54.4%2082.7v68h87.7c51.5-47.4%2081.1-117.4%2081.1-200.2z%22%20%20%20%20fill%3D%22%234285f4%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M272.1%20544.3c73.4%200%20135.3-24.1%20180.4-65.7l-87.7-68c-24.4%2016.6-55.9%2026-92.6%2026-71%200-131.2-47.9-152.8-112.3H28.9v70.1c46.2%2091.9%20140.3%20149.9%20243.2%20149.9z%22%20%20%20%20fill%3D%22%2334a853%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M119.3%20324.3c-11.4-33.8-11.4-70.4%200-104.2V150H28.9c-38.6%2076.9-38.6%20167.5%200%20244.4l90.4-70.1z%22%20%20%20%20fill%3D%22%23fbbc04%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M272.1%20107.7c38.8-.6%2076.3%2014%20104.4%2040.8l77.7-77.7C405%2024.6%20339.7-.8%20272.1%200%20169.2%200%2075.1%2058%2028.9%20150l90.4%2070.1c21.5-64.5%2081.8-112.4%20152.8-112.4z%22%20%20%20%20fill%3D%22%23ea4335%22%20%20%2F%3E%3C%2Fsvg%3E";
 
 /**
@@ -495,16 +496,21 @@ var SubtractIcon = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%221
 
 var Dropdown = function Dropdown(_ref) {
   var onSelectItem = _ref.onSelectItem,
-      options = _ref.options;
+      options = _ref.options,
+      dropdownRef = _ref.dropdownRef,
+      position = _ref.position;
   var DropdownContent = useMemo(function () {
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(Box, {
         color: colors.label.secondary.light,
         fontSize: "13px",
+        width: "fit-content",
         fontWeight: "bold",
         px: "8px",
-        bg: "inherit"
+        bg: "inherit",
+        whiteSpace: "nowrap"
       }, idx > 0 && /*#__PURE__*/React__default.createElement(Box, {
+        width: "100%",
         my: "3px",
         borderTop: "2px solid",
         borderColor: colors.border["default"]
@@ -518,17 +524,23 @@ var Dropdown = function Dropdown(_ref) {
         fontSize: "13px",
         px: "8px",
         py: "4px",
+        width: "fit-content",
         color: colors.label.primary.light,
         _hover: {
           color: colors.label.primary.dark,
           bg: colors.fill.action,
-          borderRadius: '4px'
+          borderRadius: '4px',
+          width: '100%'
         },
-        bg: "inherit"
+        bg: "inherit",
+        whiteSpace: "nowrap"
       }, option.label));
     });
   }, [onSelectItem, options]);
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    flexDirection: "column",
+    ref: dropdownRef,
+    scrollMargin: "15px",
     bg: colors.fill.light.quaternary,
     backdropFilter: "auto",
     backdropBlur: "64px",
@@ -536,13 +548,17 @@ var Dropdown = function Dropdown(_ref) {
     border: "0.25px solid",
     borderColor: colors.fill.light.tertiary,
     mt: "3px",
-    maxH: "320px",
+    maxH: "240px",
     overflowY: "auto",
     px: "8px",
     py: "4px",
     position: "absolute",
-    width: "100%",
-    zIndex: 100
+    top: position === 'top' ? 26 : undefined,
+    bottom: position === 'bottom' ? 30 : undefined,
+    width: "fit-content",
+    minWidth: "100%",
+    zIndex: 100,
+    tabIndex: -2000
   }, DropdownContent);
 };
 
@@ -570,6 +586,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
   var dropdownRef = useRef(null);
+  var dropdownMenuRef = useRef(null);
 
   var _useState = useState(false),
       isFocussed = _useState[0],
@@ -581,6 +598,21 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
+  var _useState3 = useState('top'),
+      position = _useState3[0],
+      setPosition = _useState3[1];
+
+  useEffect(function () {
+    var _dropdownRef$current;
+
+    var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
+
+    if (document.body.clientHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
+      setPosition('top');
+    } else {
+      setPosition('bottom');
+    }
+  }, [dropdownRef]);
   useDidMountEffect(function () {
     var _options$find$label2, _options$find2;
 
@@ -620,7 +652,25 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     fontSize: "13px",
     textShadow: "0 0 0 " + colors.label.primary.light,
     value: selectedOption,
-    autoComplete: "off"
+    autoComplete: "off",
+    onKeyDown: function onKeyDown(e) {
+      if (isFocussed) {
+        var _dropdownMenuRef$curr;
+
+        if (e.key === 'Tab') {
+          return setIsFocussed(false);
+        }
+
+        var idx = options.findIndex(function (option) {
+          return option.label[0].toLocaleLowerCase() === e.key;
+        });
+        console.log(idx);
+        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: idx * 27,
+          behavior: 'smooth'
+        });
+      }
+    }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     cursor: "pointer",
     onClick: function onClick() {
@@ -631,6 +681,8 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     alt: "subtract",
     boxSize: "16px"
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
+    position: position,
+    dropdownRef: dropdownMenuRef,
     onSelectItem: function onSelectItem(option) {
       return handleOnSelectItem(option);
     },
@@ -647,7 +699,9 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
 
   return /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
     ref: _ref
-  }, props));
+  }, props, {
+    fontSize: "13px"
+  }));
 });
 
 var _path;
@@ -679,12 +733,13 @@ var Token = function Token(_ref) {
     alignItems: "center",
     width: "fit-content",
     w: "auto",
-    h: "auto",
-    pl: "8px",
-    pr: "4px",
+    h: "16px",
+    pl: "6px",
+    pr: "2px",
     py: "2px",
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(Text$2, {
+    whiteSpace: "nowrap",
     color: colors.label.primary.light,
     fontSize: "13px",
     pr: "4px"
@@ -692,8 +747,8 @@ var Token = function Token(_ref) {
     length: 15,
     omission: '...'
   })), /*#__PURE__*/React__default.createElement(Memo, {
-    width: "13px",
-    height: "13px",
+    width: "11px",
+    height: "11px",
     onClick: onDelete,
     cursor: "pointer"
   }));
@@ -709,14 +764,15 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       control = _ref2.control,
       name = _ref2.name,
       placeholder = _ref2.placeholder,
-      disabled = _ref2.disabled,
-      maxLength = _ref2.maxLength,
-      setError = _ref2.setError;
+      disabled = _ref2.disabled;
   var watchedValue = useWatch({
     control: control,
     name: name
   });
   var dropdownRef = useRef(null);
+  var dropdownMenuRef = useRef(null);
+  var scrollRef = useRef(null);
+  var inputRef = useRef(null);
 
   var _useState = useState([]),
       localValues = _useState[0],
@@ -730,15 +786,28 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       isFocussed = _useState3[0],
       setIsFocussed = _useState3[1];
 
+  var _useState4 = useState(false),
+      shouldSideScroll = _useState4[0],
+      setShouldSideScroll = _useState4[1];
+
+  var _useState5 = useState('top'),
+      position = _useState5[0],
+      setPosition = _useState5[1];
+
+  useEffect(function () {
+    var _dropdownRef$current;
+
+    var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
+
+    if (document.body.clientHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
+      setPosition('top');
+    } else {
+      setPosition('bottom');
+    }
+  }, [dropdownRef]);
   useOutsideClick({
     ref: dropdownRef,
     handler: function handler() {
-      if (maxLength && localValues.length > maxLength) {
-        setError(name, {
-          message: "Exceeded maximum of " + maxLength + " options"
-        });
-      }
-
       return setIsFocussed(false);
     }
   }); // gets latest watched form value (common delimited) from RHF state and creates a list
@@ -748,24 +817,27 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setLocalValues([]);
     }
 
-    if (maxLength && watchedValue !== undefined && watchedValue.length <= maxLength && watchedValue != null && watchedValue.length) {
+    if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+      if (shouldSideScroll) {
+        var _scrollRef$current;
+
+        scrollRef.current.scrollTo({
+          left: (_scrollRef$current = scrollRef.current) == null ? void 0 : _scrollRef$current.scrollWidth,
+          behavior: 'smooth'
+        });
+        setShouldSideScroll(false);
+      }
+
       setLocalValues(watchedValue.split(',').filter(Boolean).map(function (value) {
         return options.find(function (option) {
           return option.value === value;
         });
       }));
     }
-  }, [maxLength, options, watchedValue]);
+  }, [options, shouldSideScroll, watchedValue]);
 
   var handleChange = function handleChange(option) {
-    console.log(localValues.length, maxLength);
-
-    if (maxLength && localValues.length > maxLength) {
-      return setError(name, {
-        message: "Exceeded maximum of " + maxLength + " options"
-      });
-    }
-
+    setShouldSideScroll(true);
     var newValue = [].concat(localValues, [option]).map(function (_ref3) {
       var value = _ref3.value;
       return value;
@@ -809,9 +881,27 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
   return /*#__PURE__*/React__default.createElement(Box, {
     ref: dropdownRef,
-    position: "relative"
+    position: "relative",
+    onKeyDown: function onKeyDown(e) {
+      if (isFocussed) {
+        var _dropdownMenuRef$curr;
+
+        if (e.key === 'Tab') {
+          return setIsFocussed(false);
+        }
+
+        var idx = options.findIndex(function (option) {
+          return option.label[0].toLocaleLowerCase() === e.key;
+        });
+        (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
+          top: idx * 27,
+          behavior: 'smooth'
+        });
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(Flex, {
     fontSize: "13px",
+    h: "26px",
     border: isFocussed ? '2px solid' : '1px solid',
     borderColor: isFocussed ? colors.border.focus : colors.border["default"],
     py: "5px",
@@ -820,23 +910,42 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     alignItems: "center",
     justifyContent: "space-between",
     onClick: function onClick() {
-      return !disabled && setIsFocussed(true);
+      if (!disabled) {
+        var _inputRef$current;
+
+        if (isFocussed) {
+          return setIsFocussed(false);
+        }
+
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+        setIsFocussed(true);
+      }
     },
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer'
   }, /*#__PURE__*/React__default.createElement(Flex, {
-    height: "28px",
     alignItems: "center",
-    overflowX: "auto",
-    maxWidth: "90%",
+    h: "inherit",
+    width: "90%",
+    overflowX: "scroll",
     style: {
       scrollbarWidth: 'none'
       /* Firefox */
-
-    }
+      ,
+      msOverflowStyle: 'none'
+    },
+    sx: {
+      '::-webkit-scrollbar': {
+        display: 'none'
+      }
+    },
+    ref: scrollRef
   }, localValues.length ? localValues.map(function (option) {
     return /*#__PURE__*/React__default.createElement(Box, {
-      mr: "4px"
+      mr: "4px",
+      width: "fit-content",
+      h: "16px",
+      borderRadius: "full"
     }, /*#__PURE__*/React__default.createElement(Token, {
       label: option.label,
       onDelete: function onDelete() {
@@ -846,8 +955,20 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }) : /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.secondary.light,
     fontSize: "13px"
-  }, placeholder)), /*#__PURE__*/React__default.createElement(Flex, {
-    width: "39px",
+  }, placeholder)), /*#__PURE__*/React__default.createElement(Input$2, {
+    padding: 0,
+    border: "none",
+    height: "0",
+    width: "0",
+    autoComplete: "off",
+    type: "text",
+    ref: inputRef,
+    tabIndex: -1,
+    _focus: {
+      boxShadow: 'none !important'
+    }
+  }), /*#__PURE__*/React__default.createElement(Flex, {
+    mr: "4px",
     justifyContent: "center",
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Image, {
@@ -855,10 +976,12 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     alt: "subtract",
     boxSize: "16px"
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
+    dropdownRef: dropdownMenuRef,
     onSelectItem: function onSelectItem(option) {
       return handleChange(option);
     },
-    options: localOptions
+    options: localOptions,
+    position: position
   }));
 });
 
@@ -872,8 +995,6 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       control = _ref2.control,
       placeholder = _ref2.placeholder,
       disabled = _ref2.disabled,
-      maxLength = _ref2.maxLength,
-      setError = _ref2.setError,
       clearErrors = _ref2.clearErrors;
   var watchedValue = useWatch({
     control: control,
@@ -886,6 +1007,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
   var inputRef = useRef(null);
   var inputWrapperRef = useRef(null);
+  var scrollRef = useRef(null);
 
   var _useState2 = useState(null),
       tokenIndex = _useState2[0],
@@ -895,9 +1017,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       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
+  var _useState4 = useState(false),
+      shouldSideScroll = _useState4[0],
+      setShouldSideScroll = _useState4[1];
+
+  var _useState5 = useState(''),
+      localValue = _useState5[0],
+      setLocalValue = _useState5[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
 
 
   useEffect(function () {
@@ -906,19 +1032,24 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     }
 
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+      if (shouldSideScroll) {
+        var _scrollRef$current;
+
+        scrollRef.current.scrollTo({
+          left: (_scrollRef$current = scrollRef.current) == null ? void 0 : _scrollRef$current.scrollWidth,
+          behavior: 'smooth'
+        });
+        setShouldSideScroll(false);
+      }
+
       setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
     }
-  }, [watchedValue]);
+  }, [watchedValue, shouldSideScroll]);
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
-    if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
-      if (maxLength && lastestFormValueToArray.length >= maxLength) {
-        return setError(name, {
-          type: 'maxLength',
-          message: "Exceeded maximum of " + maxLength + " options"
-        });
-      }
+    setShouldSideScroll(true);
 
+    if (e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
 
@@ -935,10 +1066,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
 
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setLocalValue('');
-      return setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
+      setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
         shouldValidate: true,
         shouldDirty: true
       });
+      return setIsFocussed(false);
     }
 
     if (!localValue.trim().length && lastestFormValueToArray.length) {
@@ -997,7 +1129,6 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     clearErrors(name);
 
     if (localValue.trim()) {
-      if (maxLength && watchedValue.length + localValue.trim().length > maxLength) return setLocalValue('');
       var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
       setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
         shouldValidate: true,
@@ -1033,22 +1164,30 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     },
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
-    ref: inputWrapperRef
+    ref: inputWrapperRef,
+    h: "26px"
   }, /*#__PURE__*/React__default.createElement(Flex, {
-    height: "28px",
+    h: "18px",
     alignItems: "center",
-    width: "fit-content",
-    maxW: "80%",
-    overflowX: "auto",
+    // width="fit-content"
+    // maxW="80%"
+    overflowX: "scroll",
     style: {
       scrollbarWidth: 'none'
       /* Firefox */
-
-    }
+      ,
+      msOverflowStyle: 'none'
+    },
+    sx: {
+      '::-webkit-scrollbar': {
+        display: 'none'
+      }
+    },
+    ref: scrollRef
   }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement(Box, {
       mr: "4px",
-      border: tokenIndex === index ? "2px solid " + colors.border.focus : 'none',
+      border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
       borderRadius: "full",
       onClick: function onClick() {
         return setTokenIndex(index);
@@ -1073,7 +1212,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     padding: 0,
     width: "100%",
     border: "none",
-    height: "26px",
+    height: "auto",
     color: tokenIndex !== null ? 'transparent' : colors.label.primary,
     _focus: {
       boxShadow: 'none !important'
@@ -1085,6 +1224,9 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     ref: inputRef,
     onFocus: function onFocus() {
       return setIsFocussed(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocussed(false);
     }
   }))));
 });
@@ -1099,7 +1241,12 @@ var StackedSwitch = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       value = _ref2.value;
   if (value === null) return null;
   return /*#__PURE__*/React__default.createElement(Switch$1, {
-    size: "lg",
+    h: "26px",
+    mx: "4px",
+    _focus: {
+      border: '2px solid',
+      borderColor: colors.border.focus
+    },
     ref: _ref,
     isRequired: isRequired,
     value: String(value),
@@ -1246,8 +1393,7 @@ function Input(_ref) {
           control: control,
           setError: setError,
           clearErrors: clearErrors,
-          placeholder: placeholder,
-          maxLength: maxLength
+          placeholder: placeholder
         });
 
       case 'pilled-text':
@@ -1842,13 +1988,14 @@ var Badge = {
 
 var baseStyle$2 = /*#__PURE__*/defineStyle({
   borderRadius: '4px',
-  fontSize: '18px',
+  fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  border: 'none',
   px: '8px',
   py: '4px',
   bgGradient: 'linear-gradient(#FFFFFF29, #FFFFFF00)',
-  shadow: '1px 0.5px #0000001A',
+  shadow: '0.5px 0.5px 1px 1px #0000001A',
   _disabled: {
     backgroundColor: 'gray.100',
     borderColor: 'gray.100',
@@ -1864,20 +2011,19 @@ var baseStyle$2 = /*#__PURE__*/defineStyle({
     bgGradient: colors.fill.light.quaternary
   },
   _focus: {
-    bg: colors.fill.action,
-    border: "2px solid " + colors.border.focus
+    outline: "2px solid " + colors.border.focus,
+    outlineOffset: '0px'
   }
 });
 
-var variantSolid$1 = function variantSolid() {
+var variantPrimary = function variantPrimary() {
   return _extends({}, baseStyle$2);
 };
 
-var variantOutline$1 = function variantOutline() {
+var variantSecondary = function variantSecondary() {
   return _extends({}, baseStyle$2, {
     color: colors.fill.action,
     bg: colors.label.primary.dark,
-    border: 'none',
     _hover: {
       bg: colors.label.primary.dark
     },
@@ -1893,11 +2039,11 @@ var variantOutline$1 = function variantOutline() {
 };
 
 var variants$2 = {
-  solid: /*#__PURE__*/variantSolid$1(),
-  outline: /*#__PURE__*/variantOutline$1()
+  primary: /*#__PURE__*/variantPrimary(),
+  secondary: /*#__PURE__*/variantSecondary()
 };
 var defaultProps$2 = {
-  solid: 'solid'
+  variant: 'primary'
 };
 var Button$1 = {
   baseStyle: baseStyle$2,
@@ -2001,6 +2147,7 @@ var parts$3 = ['field'];
 var baseStyle$7 = {
   field: {
     fontSize: '13px',
+    h: '26px',
     '::placeholder': {
       color: colors.label.secondary.light
     },
@@ -2482,7 +2629,8 @@ var baseStyle$c = {
   },
   th: {
     bg: colors.label.primary.dark,
-    padding: '5px 8px !important'
+    padding: '5px 8px !important',
+    fontSize: '13px'
   },
   tr: {
     fontSize: '13px',
@@ -2751,9 +2899,11 @@ var Tabs = {
 };
 
 var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+  fontSize: '13px',
   display: 'block',
   paddingY: '8px',
-  height: '80px',
+  paddingX: '5px',
+  height: '78px',
   lineHeight: 'short'
 });