@xqmsg/ui-core 0.25.1 → 0.26.1

package/dist/ui-core.esm.js

@@ -6,7 +6,7 @@ import { QuestionIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { Link as Link$3 } from 'react-router-dom';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { ChakraProvider } from '@chakra-ui/provider';
-import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
+import { transparentize, mode, getColor } from '@chakra-ui/theme-tools';
 import { defineStyle } from '@chakra-ui/system';
 import { checkboxAnatomy } from '@chakra-ui/anatomy';
 
@@ -1312,7 +1312,7 @@ var Token = function Token(_ref) {
     wordBreak: "break-word",
     color: colors.label.primary.light,
     fontSize: isMobile ? '17px' : '13px',
-    lineHeight: isMobile ? '17px' : '13px',
+    lineHeight: "1.5",
     pr: "2px",
     maxWidth: maxWidth,
     overflow: "hidden",
@@ -1841,6 +1841,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onClick: function onClick() {
       if (isFocussed && tokenIndex !== null) {
         setTokenIndex(null);
+      } else if (!scrollMode) {
+        setIsFocussed(true);
       }
       if (!disabled) {
         var _inputRef$current;
@@ -1858,7 +1860,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     overflowX: scrollMode ? 'scroll' : 'hidden',
     flexWrap: scrollMode ? 'nowrap' : 'wrap',
     overflowY: "hidden",
-    maxWidth: isFocussed ? '80%' : '100%',
+    width: scrollMode ? 'auto' : '100%',
+    maxWidth: isFocussed && scrollMode ? '80%' : '100%',
     style: {
       scrollbarWidth: 'none' /* Firefox */,
       msOverflowStyle: 'none'
@@ -1905,7 +1908,35 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     color: colors.label.secondary.light,
     fontSize: isMobile ? '17px' : '13px',
     pointerEvents: "none"
-  }, placeholder) : null), !disabled && /*#__PURE__*/React__default.createElement(Flex, {
+  }, placeholder) : null, !disabled && !scrollMode && /*#__PURE__*/React__default.createElement(Flex, {
+    flex: 1,
+    minWidth: isFocussed && !tokenIndex ? 'auto' : '100px'
+  }, /*#__PURE__*/React__default.createElement(Input$2, {
+    onKeyDown: onHandleKeyDown,
+    type: "text",
+    padding: 0,
+    alignContent: "flex-start",
+    "float": "right",
+    border: "none",
+    height: "auto",
+    color: tokenIndex !== null ? 'transparent' : colors.label.primary,
+    _focus: {
+      boxShadow: 'none !important'
+    },
+    value: localValue,
+    onChange: handleOnChange,
+    ref: inputRef,
+    onFocus: function onFocus() {
+      return setIsFocussed(true);
+    },
+    fontSize: isMobile ? '17px' : '13px',
+    lineHeight: 1.5,
+    placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
+    variant: variant,
+    style: isMobile ? {
+      border: 'none'
+    } : undefined
+  }))), !disabled && scrollMode && /*#__PURE__*/React__default.createElement(Flex, {
     flex: 1,
     minWidth: isFocussed && !tokenIndex ? '20%' : 0
   }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -3750,13 +3781,12 @@ var Text = function Text(_ref) {
 /**
  * Breakpoints for responsive design
  */
-var breakpointValues = {
+var breakpoints = {
   sm: '30em',
   md: '48em',
   lg: '62em',
   xl: '80em'
 };
-var breakpoints = /*#__PURE__*/createBreakpoints(breakpointValues);
 
 var shadows = {
   xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',