@xqmsg/ui-core 0.17.0 → 0.17.2

package/dist/ui-core.esm.js

@@ -2,9 +2,7 @@ import React__default, { memo, forwardRef, createElement, useMemo, useCallback,
 import { Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Box, Text as Text$2, Spinner, Checkbox, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Tooltip, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { debounce, truncate } from 'lodash-es';
-import { Close as Close$1 } from 'src/components/icons/close';
 import { QuestionOutlineIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
-import colors$1 from 'src/theme/foundations/colors';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { ChakraProvider } from '@chakra-ui/provider';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
@@ -1072,6 +1070,40 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
   }));
 });
 
+var _path$7;
+function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
+var SvgClose = function SvgClose(props, ref) {
+  return /*#__PURE__*/createElement("svg", _extends$8({
+    viewBox: "0 0 56 56",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28 56c15.464 0 28-12.536 28-28S43.463 0 28 0 0 12.536 0 28s12.536 28 28 28Zm-6.02-37.731a2.625 2.625 0 0 0-3.712 3.712L24.288 28l-6.02 6.019a2.625 2.625 0 1 0 3.713 3.712l6.018-6.019 6.02 6.02a2.625 2.625 0 0 0 3.712-3.713L31.71 28l6.02-6.019a2.625 2.625 0 0 0-3.713-3.712L28 24.288l-6.02-6.02Z",
+    fill: "#3C3C43",
+    fillOpacity: 0.6
+  })));
+};
+var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgClose);
+var Memo$7 = /*#__PURE__*/memo(ForwardRef$7);
+
+/**
+ * A functional React component utilized to render the `Close` icon component
+ */
+
+var Close = function Close(_ref) {
+  var boxSize = _ref.boxSize,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(Memo$7, {
+    width: boxSize,
+    height: boxSize,
+    onClick: onClick,
+    cursor: "pointer"
+  });
+};
+
 var Token = function Token(_ref) {
   var label = _ref.label,
       onDelete = _ref.onDelete;
@@ -1095,7 +1127,7 @@ var Token = function Token(_ref) {
   }, truncate(label.trim(), {
     length: 15,
     omission: '...'
-  })), /*#__PURE__*/React__default.createElement(Close$1, {
+  })), /*#__PURE__*/React__default.createElement(Close, {
     boxSize: "11px",
     onClick: onDelete
   }));
@@ -1475,7 +1507,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, [latestTokenElement, watchedValue]);
 
   var onHandleKeyDown = function onHandleKeyDown(e) {
-    if (e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
+    if ((e.key === ' ' || e.key === 'Enter' || e.key === ',' || e.key === 'Tab') && localValue.trim().length) {
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
 
@@ -1916,7 +1948,8 @@ function Input(_ref) {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
-        py: (label || helperText || isInvalid) && inputType !== 'checkbox' ? 6 : 0
+        py: label || helperText || isInvalid ? 6 : 0,
+        pb: inputType === 'checkbox' ? 6 : 0
       }, label && inputType !== 'checkbox' && /*#__PURE__*/React__default.createElement(Label$1, {
         tooltipText: tooltipText,
         label: label,
@@ -1977,25 +2010,25 @@ function FormSection(_ref) {
   }));
 }
 
-var _path$7;
-function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
+var _path$8;
+function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
 var SvgChevronDown = function SvgChevronDown(props, ref) {
-  return /*#__PURE__*/createElement("svg", _extends$8({
+  return /*#__PURE__*/createElement("svg", _extends$9({
     width: 8,
     height: 6,
     viewBox: "0 0 8 6",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.184.768a.6.6 0 0 1 .849.016L4 3.934 6.968.784a.6.6 0 0 1 .864.832l-3.4 3.6a.6.6 0 0 1-.865 0l-3.4-3.6A.6.6 0 0 1 .185.768Z",
     fill: "#fff"
   })));
 };
-var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgChevronDown);
-var Memo$7 = /*#__PURE__*/memo(ForwardRef$7);
+var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgChevronDown);
+var Memo$8 = /*#__PURE__*/memo(ForwardRef$8);
 
 /**
  * A functional React component utilized to render the `ChevronDown` icon component
@@ -2003,31 +2036,31 @@ var Memo$7 = /*#__PURE__*/memo(ForwardRef$7);
 
 var ChevronDown = function ChevronDown(_ref) {
   var boxSize = _ref.boxSize;
-  return /*#__PURE__*/React__default.createElement(Memo$7, {
+  return /*#__PURE__*/React__default.createElement(Memo$8, {
     boxSize: boxSize,
     fill: colors.fill.action
   });
 };
 
-var _path$8;
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
+var _path$9;
+function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
 var SvgChevronRight = function SvgChevronRight(props, ref) {
-  return /*#__PURE__*/createElement("svg", _extends$9({
+  return /*#__PURE__*/createElement("svg", _extends$a({
     width: 6,
     height: 8,
     viewBox: "0 0 6 8",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.768 7.816a.6.6 0 0 1 .016-.848L3.934 4 .784 1.032a.6.6 0 0 1 .832-.865l3.6 3.4a.6.6 0 0 1 0 .865l-3.6 3.4a.6.6 0 0 1-.848-.016Z",
     fill: "#fff"
   })));
 };
-var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgChevronRight);
-var Memo$8 = /*#__PURE__*/memo(ForwardRef$8);
+var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgChevronRight);
+var Memo$9 = /*#__PURE__*/memo(ForwardRef$9);
 
 /**
  * A functional React component utilized to render the `ChevronRight` icon component
@@ -2035,30 +2068,30 @@ var Memo$8 = /*#__PURE__*/memo(ForwardRef$8);
 
 var ChevronRight = function ChevronRight(_ref) {
   var boxSize = _ref.boxSize;
-  return /*#__PURE__*/React__default.createElement(Memo$8, {
+  return /*#__PURE__*/React__default.createElement(Memo$9, {
     boxSize: boxSize
   });
 };
 
-var _path$9;
-function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
+var _path$a;
+function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
 var SvgClock = function SvgClock(props, ref) {
-  return /*#__PURE__*/createElement("svg", _extends$a({
+  return /*#__PURE__*/createElement("svg", _extends$b({
     width: 14,
     height: 14,
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/createElement("path", {
     d: "M7 3v4h3m3 0A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z",
     stroke: "#0082ff",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgClock);
-var Memo$9 = /*#__PURE__*/memo(ForwardRef$9);
+var ForwardRef$a = /*#__PURE__*/forwardRef(SvgClock);
+var Memo$a = /*#__PURE__*/memo(ForwardRef$a);
 
 /**
  * A functional React component utilized to render the `Clock` icon component
@@ -2066,41 +2099,8 @@ var Memo$9 = /*#__PURE__*/memo(ForwardRef$9);
 
 var Clock = function Clock(_ref) {
   var boxSize = _ref.boxSize;
-  return /*#__PURE__*/React__default.createElement(Memo$9, {
-    boxSize: boxSize
-  });
-};
-
-var _path$a;
-function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
-var SvgClose = function SvgClose(props, ref) {
-  return /*#__PURE__*/createElement("svg", _extends$b({
-    viewBox: "0 0 56 56",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref
-  }, props), _path$a || (_path$a = /*#__PURE__*/createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M28 56c15.464 0 28-12.536 28-28S43.463 0 28 0 0 12.536 0 28s12.536 28 28 28Zm-6.02-37.731a2.625 2.625 0 0 0-3.712 3.712L24.288 28l-6.02 6.019a2.625 2.625 0 1 0 3.713 3.712l6.018-6.019 6.02 6.02a2.625 2.625 0 0 0 3.712-3.713L31.71 28l6.02-6.019a2.625 2.625 0 0 0-3.713-3.712L28 24.288l-6.02-6.02Z",
-    fill: "#3C3C43",
-    fillOpacity: 0.6
-  })));
-};
-var ForwardRef$a = /*#__PURE__*/forwardRef(SvgClose);
-var Memo$a = /*#__PURE__*/memo(ForwardRef$a);
-
-/**
- * A functional React component utilized to render the `Close` icon component
- */
-
-var Close = function Close(_ref) {
-  var boxSize = _ref.boxSize,
-      onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(Memo$a, {
-    boxSize: boxSize,
-    onClick: onClick,
-    cursor: "pointer"
+    boxSize: boxSize
   });
 };
 
@@ -2777,8 +2777,8 @@ var NavigationMenuItem = function NavigationMenuItem(_ref) {
     px: "4px",
     height: "26px",
     width: "204px",
-    color: colors$1.label.primary,
-    bg: isSelected ? colors$1.fill.light.tertiary : 'transparent',
+    color: colors.label.primary,
+    bg: isSelected ? colors.fill.light.tertiary : 'transparent',
     borderRadius: "4px",
     fontSize: "13px",
     textDecoration: "none",