@xqmsg/ui-core 0.22.4 → 0.23.1-rc.0

package/dist/ui-core.cjs.development.js

@@ -15,6 +15,7 @@ var hi = require('react-icons/hi');
 var provider = require('@chakra-ui/provider');
 var themeTools = require('@chakra-ui/theme-tools');
 var system = require('@chakra-ui/system');
+var anatomy = require('@chakra-ui/anatomy');
 
 /**
  * A functional React component utilized to render the `ActionRow` component
@@ -761,7 +762,8 @@ var StackedCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
   var value = _ref2.value,
     label = _ref2.label,
     _onChange = _ref2.onChange,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    variant = _ref2.variant;
   if (value === null) return null;
   return /*#__PURE__*/React__default.createElement(react.Checkbox, {
     ref: _ref,
@@ -771,9 +773,10 @@ var StackedCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
       if (_onChange) return _onChange(e.target.checked);
     },
     isChecked: Boolean(value),
-    disabled: disabled
+    disabled: disabled,
+    variant: variant
   }, /*#__PURE__*/React__default.createElement(react.Text, {
-    fontSize: "13px",
+    fontSize: variant === 'mobile' ? '17px' : '13px',
     alignSelf: "center"
   }, label));
 });
@@ -792,9 +795,6 @@ function _extends$6() {
   };
   return _extends$6.apply(this, arguments);
 }
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure " + obj);
-}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -808,7 +808,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -820,13 +820,16 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     leftElement = _ref2.leftElement,
     defaultValue = _ref2.defaultValue,
     allowDefault = _ref2.allowDefault,
+    variant = _ref2.variant,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, variant, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     type: type,
     isRequired: isRequired
   }, props, {
     ref: _ref,
     defaultValue: defaultValue,
+    fontSize: variant === 'mobile' ? '17px' : '13px',
+    variant: variant,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && !allowDefault) {
         e.stopPropagation();
@@ -872,7 +875,8 @@ var Dropdown = function Dropdown(_ref) {
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(react.Box, {
         key: idx,
-        width: "100%"
+        width: "100%",
+        role: "combobox"
       }, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
         color: colors.label.secondary.light,
         fontSize: "13px",
@@ -1168,17 +1172,35 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }));
 });
 
+var _excluded$2 = ["isRequired", "allowDefault", "variant"];
 /**
  * A functional React component utilized to render the `StackedTextarea` component.
  */
 var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
-  var props = _extends$6({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  var allowDefault = _ref2.allowDefault,
+    variant = _ref2.variant,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+  if (variant === 'mobile') {
+    return /*#__PURE__*/React__default.createElement(react.Flex, null, allowDefault, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+      ref: _ref
+    }, props, {
+      variant: variant,
+      fontSize: "17px",
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' && !allowDefault) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+    })));
+  }
   return /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
     ref: _ref
   }, props, {
-    fontSize: "13px",
+    variant: variant,
+    fontSize: variant === '' ? '13px' : '17px',
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
+      if (e.key === 'Enter' && !allowDefault) {
         e.stopPropagation();
         e.preventDefault();
       }
@@ -1222,15 +1244,17 @@ var Close = function Close(_ref) {
 // For v1 we are truncating the label at 15 characters to avoid overflow
 var Token = function Token(_ref) {
   var label = _ref.label,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
   return /*#__PURE__*/React__default.createElement(react.Flex, {
     key: label,
-    borderRadius: "full",
+    borderRadius: 'full',
     backgroundColor: "#7676801F",
     alignItems: "center",
     width: "fit-content",
     w: "auto",
-    h: "16px",
+    h: isMobile ? '18px' : '16px',
     pl: "6px",
     pr: "2px",
     py: "2px",
@@ -1238,13 +1262,13 @@ var Token = function Token(_ref) {
   }, /*#__PURE__*/React__default.createElement(react.Text, {
     whiteSpace: "nowrap",
     color: colors.label.primary.light,
-    fontSize: "13px",
+    fontSize: isMobile ? '17px' : '13px',
     pr: "4px"
   }, lodash.truncate(label.trim(), {
     length: 15,
     omission: '...'
   })), /*#__PURE__*/React__default.createElement(Close, {
-    boxSize: "11px",
+    boxSize: isMobile ? '17px' : '11px',
     onClick: onDelete
   }));
 };
@@ -1541,7 +1565,10 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     setValue = _ref2.setValue,
     control = _ref2.control,
     placeholder = _ref2.placeholder,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    _ref2$separators = _ref2.separators,
+    separators = _ref2$separators === void 0 ? ['Enter', ' ', ',', ';', 'Tab'] : _ref2$separators,
+    variant = _ref2.variant;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1578,12 +1605,17 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       }
     }
   }, [latestTokenElement, watchedValue]);
+  var handleOnChange = function handleOnChange(e) {
+    if (tokenIndex === null) {
+      setLocalValue(e.target.value.trim().replace(',', '').replace(';', '').length ? e.target.value : '');
+    }
+  };
   var onHandleKeyDown = function onHandleKeyDown(e) {
     if (e.key === 'Enter') {
       e.stopPropagation();
       e.preventDefault();
     }
-    if ((e.key === 'Enter' || e.key === ',' || e.key === ';' || e.key === 'Tab') && localValue.trim().length) {
+    if (separators.includes(e.key)) {
       if (e.key === 'Enter' && !localValue.trim().length && tokenIndex !== null) {
         setLocalValue(lastestFormValueToArray[tokenIndex]);
         var _filteredUniqueValues = Array.from(new Set(lastestFormValueToArray.filter(function (value) {
@@ -1673,14 +1705,15 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       onBlur();
     }
   });
+  var isMobile = variant === 'mobile';
   return /*#__PURE__*/React__default.createElement(react.Box, {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
-    fontSize: "13px",
+    fontSize: isMobile ? '17px' : '13px',
     border: isFocussed ? '2px solid' : '.5px solid',
     borderColor: isFocussed ? colors.border.focus : colors.border["default"],
     pl: "8px",
-    borderRadius: "4px",
+    borderRadius: isMobile ? '0' : '4px',
     alignItems: "center",
     justifyContent: "space-between",
     onClick: function onClick() {
@@ -1695,7 +1728,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
     ref: inputWrapperRef,
-    h: "26px"
+    h: isMobile ? '48px' : '26px'
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     h: "100%",
     alignItems: "center",
@@ -1731,11 +1764,12 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         e.stopPropagation();
         e.preventDefault();
         onRemoveTag(index);
-      }
+      },
+      isMobile: isMobile
     }));
   }) : null, !lastestFormValueToArray.length && !isFocussed ? /*#__PURE__*/React__default.createElement(react.Text, {
     color: colors.label.secondary.light,
-    fontSize: "13px"
+    fontSize: isMobile ? '17px' : '13px'
   }, placeholder) : null), !disabled && /*#__PURE__*/React__default.createElement(react.Flex, {
     flex: 1,
     minWidth: isFocussed && !tokenIndex ? '20%' : 0
@@ -1752,9 +1786,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       boxShadow: 'none !important'
     },
     value: localValue,
-    onChange: function onChange(e) {
-      return tokenIndex === null && setLocalValue(e.target.value.trim().replace(',', '').replace(';', '').length ? e.target.value : '');
-    },
+    onChange: handleOnChange,
     ref: inputRef,
     onFocus: function onFocus() {
       return setIsFocussed(true);
@@ -1762,7 +1794,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onBlur: function onBlur() {
       setIsFocussed(false);
       return setTokenIndex(null);
-    }
+    },
+    variant: variant
   }))));
 });
 
@@ -1837,6 +1870,8 @@ function Input(_ref) {
     rightElement = _ref.rightElement,
     leftElement = _ref.leftElement,
     allowDefault = _ref.allowDefault,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     onChange = _ref.onChange,
     setValue = _ref.setValue,
     setError = _ref.setError,
@@ -1861,7 +1896,8 @@ function Input(_ref) {
           disabled: disabled,
           defaultValue: defaultValue,
           value: value,
-          allowDefault: allowDefault
+          allowDefault: allowDefault,
+          variant: variant
         });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
@@ -1909,7 +1945,8 @@ function Input(_ref) {
           onBlur: onBlur,
           ref: ref,
           disabled: disabled,
-          value: value
+          value: value,
+          variant: variant
         });
       case 'checkbox':
         return /*#__PURE__*/React__default.createElement(StackedCheckbox, {
@@ -1923,7 +1960,8 @@ function Input(_ref) {
           value: value,
           defaultValue: defaultValue,
           label: label,
-          disabled: disabled
+          disabled: disabled,
+          variant: variant
         });
       case 'multi-select':
         return /*#__PURE__*/React__default.createElement(StackedMultiSelect, {
@@ -1960,7 +1998,8 @@ function Input(_ref) {
           setError: setError,
           clearErrors: clearErrors,
           control: control,
-          maxLength: maxLength
+          maxLength: maxLength,
+          variant: variant
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -1978,6 +2017,7 @@ function Input(_ref) {
         return null;
     }
   };
+  var nonLabeledInputs = ['checkbox'];
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -1996,8 +2036,8 @@ function Input(_ref) {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
-        py: inputType !== 'checkbox' && label || helperText || isInvalid ? 5 : 0
-      }, label && inputType !== 'checkbox' && /*#__PURE__*/React__default.createElement(Label$1, {
+        py: !nonLabeledInputs.includes(inputType) && variant !== 'mobile' && label || helperText || isInvalid ? 5 : 0
+      }, label && !nonLabeledInputs.includes(inputType) && variant !== 'mobile' && /*#__PURE__*/React__default.createElement(Label$1, {
         tooltipText: tooltipText,
         label: label,
         isRequired: isRequired
@@ -2036,7 +2076,8 @@ function FormSection(_ref) {
       maxLength = _ref2.maxLength,
       ariaLabel = _ref2.ariaLabel,
       disabled = _ref2.disabled,
-      defaultValue = _ref2.defaultValue;
+      defaultValue = _ref2.defaultValue,
+      variant = _ref2.variant;
     return /*#__PURE__*/React__default.createElement(Input, {
       key: name,
       control: form.control,
@@ -2052,7 +2093,8 @@ function FormSection(_ref) {
       defaultValue: defaultValue,
       setValue: form.setValue,
       setError: form.setError,
-      clearErrors: form.clearErrors
+      clearErrors: form.clearErrors,
+      variant: variant ? variant : ''
     });
   }));
 }
@@ -2926,11 +2968,11 @@ var Task = function Task(_ref) {
   });
 };
 
-var _excluded$2 = ["boxSize", "color"];
+var _excluded$3 = ["boxSize", "color"];
 var GearIcon = function GearIcon(_ref) {
   var boxSize = _ref.boxSize,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(react.Box, Object.assign({}, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: boxSize != null ? boxSize : 16,
@@ -2948,6 +2990,125 @@ var GearIcon = function GearIcon(_ref) {
   })));
 };
 
+var _excluded$4 = ["label", "ariaLabel", "className", "placeholder", "name", "helperText", "options", "tooltipText", "isInvalid", "errorText", "isRequired", "defaultValue", "fullOptions", "control", "disabled", "onChange", "setValue", "setError", "clearErrors"];
+/**
+ * A functional React component utilized to render the `SelectNative` component.
+ */
+var SelectNative = function SelectNative(_ref) {
+  var _options$;
+  var name = _ref.name,
+    helperText = _ref.helperText,
+    options = _ref.options,
+    isInvalid = _ref.isInvalid,
+    errorText = _ref.errorText,
+    isRequired = _ref.isRequired,
+    defaultValue = _ref.defaultValue,
+    control = _ref.control,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    setValue = _ref.setValue,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  // const [selectedOption, setSelectedOption] = useState(
+  //   options.find(option => option.value === value)?.label ?? ''
+  // );
+  var _useState = React.useState(options ? (_options$ = options[0]) != null ? _options$ : '' : ''),
+    selectedOption = _useState[0],
+    setSelectedOption = _useState[1];
+  //const [selectedOption, setSelectedOption] = useState(null);
+  // useEffect(() => {
+  //   if (defaultValue) {
+  //     setSelectedOption(defaultValue);
+  //   }
+  //   setSelectedOption(
+  //     (fullOptions || options).find(option => option.value === value)?.label ??
+  //       ''
+  //   );
+  // }, [fullOptions, value]);
+  var handleOnSelectItem = function handleOnSelectItem(selectedValue) {
+    console.log(selectedValue);
+    var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
+      var val = _ref2.value;
+      return selectedValue === val;
+    });
+    console.log(selectedValue);
+    setValue(name, selectedValue);
+    if (selectedOption) {
+      if (onChange) {
+        onChange(selectedOption.value);
+      }
+      setSelectedOption(selectedOption);
+      setValue(name, selectedOption.value);
+    }
+  };
+  console.log(selectedOption);
+  React.useEffect(function () {
+    if (defaultValue) {
+      handleOnSelectItem(defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
+  return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+    control: control,
+    name: name,
+    // defaultValue={defaultValue as PathValue<T, Path<T>>}
+    rules: {
+      required: isRequired
+    },
+    /** @ts-ignore: issues with implicit */
+    render: function render(_ref3) {
+      var _ref3$field = _ref3.field,
+        ref = _ref3$field.ref;
+      return /*#__PURE__*/React__default.createElement(react.FormControl, {
+        id: name,
+        isInvalid: isInvalid,
+        position: "relative",
+        py: 0
+      }, /*#__PURE__*/React__default.createElement(react.Box //ref={dropdownRef}
+      , {
+        position: "relative"
+      }, /*#__PURE__*/React__default.createElement(react.Flex, {
+        flexDirection: "column",
+        //ref={dropdownRef}
+        //scrollMargin="15px"
+        border: "0",
+        mt: "3px",
+        //maxH="240px"
+        overflowY: "auto",
+        width: "fit-content",
+        minWidth: "100%",
+        zIndex: 100,
+        tabIndex: -2000,
+        borderTop: "0.5px solid #9999991A"
+      }, /*#__PURE__*/React__default.createElement(react.Select, Object.assign({}, props, {
+        required: isRequired,
+        ref: ref,
+        //value={selectedOption?.value ?? value}
+        // textShadow={`0 0 0 ${colors.label.primary.light}`}
+        disabled: disabled != null ? disabled : false,
+        onChange: function onChange(e) {
+          return handleOnSelectItem(e.target.value);
+        },
+        // onKeyDown={handleOnKeyDown}
+        style: {
+          cursor: 'pointer',
+          color: 'var(--chakra-colors-blue-500)',
+          height: '48px',
+          fontSize: '17px',
+          lineHeight: '20px',
+          fontWeight: 400,
+          padding: '12px 16px 12px 0px',
+          borderRadius: 0
+        }
+      }), options && options.map(function (i) {
+        return /*#__PURE__*/React__default.createElement("option", {
+          value: i.value,
+          key: i.sortValue
+        }, i.label);
+      })))), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
+    }
+  });
+};
+
 /**
  * A functional React component utilized to render the `BorderedBox` component
  */
@@ -3624,10 +3785,72 @@ var variantTertiary = function variantTertiary() {
     }
   });
 };
+var variantPrimaryFlat = function variantPrimaryFlat() {
+  return _extends$6({}, baseStyle$2, {
+    bg: colors.fill.action,
+    bgGradient: null,
+    minWidth: '172.5px',
+    padding: '10px 16px',
+    borderRadius: '8px',
+    border: '0.5px',
+    gap: '8px',
+    height: '44px',
+    margin: '8px',
+    fontSize: '17px',
+    fontWeight: '500',
+    lineHeight: '24px',
+    letterSpacing: '0.02em',
+    textAlign: 'center',
+    boxShadow: '0px 0.5px 1px 0.5px #0000001A'
+  });
+};
+var variantSecondaryFlat = function variantSecondaryFlat() {
+  return _extends$6({}, variantPrimaryFlat(), {
+    fontWeight: '400',
+    color: colors.black,
+    bg: colors.label.primary.dark,
+    _hover: {
+      bg: colors.label.primary.dark
+    },
+    _active: {
+      color: colors.black,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary
+    },
+    _focus: {
+      bg: colors.label.primary.dark
+    }
+  });
+};
+var variantTertiaryFlat = function variantTertiaryFlat() {
+  return _extends$6({}, variantPrimaryFlat(), {
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.blur.quaternary.dark,
+    _hover: {
+      bg: colors.blur.quaternary.dark
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.tertiary.dark
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.quaternary.dark
+    },
+    _disabled: {
+      backgroundColor: colors.blur.quaternary.dark,
+      color: colors.blur.tertiary.dark
+    }
+  });
+};
 var variants$2 = {
   primary: /*#__PURE__*/variantPrimary(),
   secondary: /*#__PURE__*/variantSecondary(),
-  tertiary: /*#__PURE__*/variantTertiary()
+  tertiary: /*#__PURE__*/variantTertiary(),
+  'flat-primary': /*#__PURE__*/variantPrimaryFlat(),
+  'flat-secondary': /*#__PURE__*/variantSecondaryFlat(),
+  'flat-tertiary': /*#__PURE__*/variantTertiaryFlat()
 };
 var defaultProps$2 = {
   variant: 'primary'
@@ -3638,7 +3861,26 @@ var Button$1 = {
   defaultProps: defaultProps$2
 };
 
-var variants$3 = Badge.variants,
+var _createMultiStyleConf = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys),
+  definePartsStyle = _createMultiStyleConf.definePartsStyle,
+  defineMultiStyleConfig = _createMultiStyleConf.defineMultiStyleConfig;
+var roundedCheckbox = /*#__PURE__*/definePartsStyle({
+  control: {
+    borderRadius: 50,
+    padding: 3
+  },
+  label: {
+    fontSize: '17px'
+  }
+});
+var variants$3 = {
+  mobile: roundedCheckbox
+};
+var Checkbox = /*#__PURE__*/defineMultiStyleConfig({
+  variants: variants$3
+});
+
+var variants$4 = Badge.variants,
   defaultProps$3 = Badge.defaultProps;
 var baseStyle$3 = {
   fontFamily: 'mono',
@@ -3648,7 +3890,7 @@ var baseStyle$3 = {
 };
 var Code = {
   baseStyle: baseStyle$3,
-  variants: variants$3,
+  variants: variants$4,
   defaultProps: defaultProps$3
 };
 
@@ -3748,8 +3990,21 @@ var baseStyle$7 = {
     }
   }
 };
-var variants$4 = {
-  "default": baseStyle$7
+var mobileInputs = /*#__PURE__*/_extends$6({}, baseStyle$7, {
+  field: {
+    fontSize: '17px',
+    border: 'none',
+    py: '14px',
+    px: '16px',
+    cursor: 'pointer',
+    lineHeight: '21px',
+    fontWeight: 400,
+    borderRadius: 0
+  }
+});
+var variants$5 = {
+  "default": baseStyle$7,
+  mobile: mobileInputs
 };
 var defaultProps$4 = {
   variant: 'default'
@@ -3757,7 +4012,7 @@ var defaultProps$4 = {
 var Input$1 = {
   parts: parts$3,
   baseStyle: baseStyle$7,
-  variants: variants$4,
+  variants: variants$5,
   defaultProps: defaultProps$4
 };
 
@@ -3854,7 +4109,7 @@ function variantNavlink(props) {
     }
   };
 }
-var variants$5 = {
+var variants$6 = {
   sidebar: variantSidebar,
   sidebarExact: variantSidebarExact,
   subNavigation: variantSubNavigation,
@@ -3862,7 +4117,7 @@ var variants$5 = {
 };
 var Link$1 = {
   baseStyle: baseStyle$8,
-  variants: variants$5
+  variants: variants$6
 };
 
 var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
@@ -3902,7 +4157,7 @@ var Modal$1 = {
 };
 
 var defaultProps$5 = Input$1.defaultProps,
-  variants$6 = Input$1.variants;
+  variants$7 = Input$1.variants;
 var parts$5 = ['field', 'icon'];
 function baseStyleField() {
   return _extends$6({}, Input$1.baseStyle.field, {
@@ -3931,7 +4186,7 @@ var baseStyle$a = function baseStyle() {
 var Select = {
   parts: parts$5,
   baseStyle: baseStyle$a,
-  variants: variants$6,
+  variants: variants$7,
   defaultProps: defaultProps$5
 };
 
@@ -4270,7 +4525,7 @@ var variantSimple = {
     }
   }
 };
-var variants$7 = {
+var variants$8 = {
   line: variantLine,
   enclosed: variantEnclosed,
   'enclosed-colored': variantEnclosedColored,
@@ -4288,7 +4543,7 @@ var Tabs = {
   parts: parts$8,
   baseStyle: baseStyle$d,
   sizes: sizes$1,
-  variants: variants$7,
+  variants: variants$8,
   defaultProps: defaultProps$7
 };
 
@@ -4300,11 +4555,29 @@ var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
   height: '78px',
   lineHeight: 'short'
 });
+var mobileInputs$1 = /*#__PURE__*/react.defineStyle( /*#__PURE__*/_extends$6({}, baseStyle$e, Input$1.variants.mobile.field, {
+  border: 'none',
+  borderRadius: 0,
+  paddingY: '14px',
+  paddingX: '16px',
+  padding: '14px 16px',
+  cursor: 'pointer',
+  lineHeight: '21px',
+  fontWeight: 400,
+  resize: 'none',
+  overflowY: 'auto',
+  fontSize: '17px'
+}));
+var variants$9 = {
+  "default": baseStyle$e,
+  mobile: mobileInputs$1
+};
 var defaultProps$8 = {
   variant: 'default'
 };
 var Textarea = {
   baseStyle: baseStyle$e,
+  variants: variants$9,
   defaultProps: defaultProps$8
 };
 
@@ -4381,7 +4654,7 @@ function variantDescriptionLarge() {
     letterSpacing: '0.02em'
   };
 }
-var variants$8 = {
+var variants$a = {
   'title-small': variantTitleSmall,
   'title-medium': variantTitleMedium,
   'title-large': variantTitleLarge,
@@ -4393,9 +4666,9 @@ var variants$8 = {
   'description-large': variantDescriptionLarge
 };
 var Text$1 = {
-  variants: variants$8,
+  variants: variants$a,
   defaultProps: /*#__PURE__*/_extends$6({}, defaultProps$9, {
-    variant: variants$8['description-large']
+    variant: variants$a['description-large']
   })
 };
 
@@ -4428,6 +4701,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends$
     Alert: Alert,
     Badge: Badge,
     Button: Button$1,
+    Checkbox: Checkbox,
     Code: Code,
     Form: Form$1,
     FormError: FormError,
@@ -4825,6 +5099,7 @@ exports.Page = Page;
 exports.Positive = Positive;
 exports.Question = Question;
 exports.Search = Search;
+exports.SelectNative = SelectNative;
 exports.Services = Services;
 exports.Settings = Settings;
 exports.SpinnerButton = SpinnerButton;