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

package/dist/ui-core.esm.js

@@ -1,5 +1,5 @@
 import React__default, { memo, forwardRef, createElement, useMemo, useCallback, Children, useEffect, useRef, useState } from 'react';
-import { Box, Button as Button$2, Alert as Alert$1, AlertDescription, Flex, 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, Image as Image$1, useMediaQuery, Grid, GridItem, IconButton, Collapse, Modal as Modal$2, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, extendTheme, useToast as useToast$1 } from '@chakra-ui/react';
+import { Box, Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Text as Text$2, Spinner, Checkbox as Checkbox$1, 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, Image as Image$1, Select as Select$1, useMediaQuery, Grid, GridItem, IconButton, Collapse, Modal as Modal$2, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Link as Link$2, Table as Table$2, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, createMultiStyleConfigHelpers, defineStyle as defineStyle$1, extendTheme, useToast as useToast$1 } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { debounce, truncate } from 'lodash-es';
 import { QuestionOutlineIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
@@ -8,6 +8,7 @@ import { HiOutlineRefresh } from 'react-icons/hi';
 import { ChakraProvider } from '@chakra-ui/provider';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
 import { defineStyle } from '@chakra-ui/system';
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
 
 /**
  * A functional React component utilized to render the `ActionRow` component
@@ -754,9 +755,10 @@ 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(Checkbox, {
+  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
     ref: _ref,
     defaultChecked: Boolean(value),
     defaultValue: value,
@@ -764,9 +766,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(Text$2, {
-    fontSize: "13px",
+    fontSize: variant === 'mobile' ? '17px' : '13px',
     alignSelf: "center"
   }, label));
 });
@@ -785,9 +788,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 = {};
@@ -801,7 +801,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.
  */
@@ -813,13 +813,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(InputGroup, null, leftElement && leftElement, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, variant, /*#__PURE__*/React__default.createElement(Input$2, 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();
@@ -865,7 +868,8 @@ var Dropdown = function Dropdown(_ref) {
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(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(Box, {
         color: colors.label.secondary.light,
         fontSize: "13px",
@@ -1161,17 +1165,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(Flex, null, allowDefault, /*#__PURE__*/React__default.createElement(Textarea$1, 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(Textarea$1, 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();
       }
@@ -1215,15 +1237,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(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",
@@ -1231,13 +1255,13 @@ var Token = function Token(_ref) {
   }, /*#__PURE__*/React__default.createElement(Text$2, {
     whiteSpace: "nowrap",
     color: colors.label.primary.light,
-    fontSize: "13px",
+    fontSize: isMobile ? '17px' : '13px',
     pr: "4px"
   }, truncate(label.trim(), {
     length: 15,
     omission: '...'
   })), /*#__PURE__*/React__default.createElement(Close, {
-    boxSize: "11px",
+    boxSize: isMobile ? '17px' : '11px',
     onClick: onDelete
   }));
 };
@@ -1534,7 +1558,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 = useWatch({
     control: control,
     name: name
@@ -1561,7 +1588,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setLatestFormValueToArray([]);
     }
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
-      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+      setLatestFormValueToArray(watchedValue.split(';').join(',').split(',').filter(Boolean));
       if (latestTokenElement) {
         latestTokenElement.scrollIntoView({
           block: 'end',
@@ -1571,12 +1598,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 === ' ' || e.key === 'Enter' || 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) {
@@ -1588,7 +1620,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         });
         return setTokenIndex(null);
       }
-      var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
+      var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(';').join(',').split(','))));
       setLocalValue('');
       return setValue(name, filteredUniqueValues.toString(), {
         shouldValidate: true,
@@ -1666,14 +1698,15 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       onBlur();
     }
   });
+  var isMobile = variant === 'mobile';
   return /*#__PURE__*/React__default.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(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() {
@@ -1688,7 +1721,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(Flex, {
     h: "100%",
     alignItems: "center",
@@ -1724,11 +1757,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(Text$2, {
     color: colors.label.secondary.light,
-    fontSize: "13px"
+    fontSize: isMobile ? '17px' : '13px'
   }, placeholder) : null), !disabled && /*#__PURE__*/React__default.createElement(Flex, {
     flex: 1,
     minWidth: isFocussed && !tokenIndex ? '20%' : 0
@@ -1745,9 +1779,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(',', '').length ? e.target.value : '');
-    },
+    onChange: handleOnChange,
     ref: inputRef,
     onFocus: function onFocus() {
       return setIsFocussed(true);
@@ -1755,7 +1787,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onBlur: function onBlur() {
       setIsFocussed(false);
       return setTokenIndex(null);
-    }
+    },
+    variant: variant
   }))));
 });
 
@@ -1830,6 +1863,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,
@@ -1854,7 +1889,8 @@ function Input(_ref) {
           disabled: disabled,
           defaultValue: defaultValue,
           value: value,
-          allowDefault: allowDefault
+          allowDefault: allowDefault,
+          variant: variant
         });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
@@ -1902,7 +1938,8 @@ function Input(_ref) {
           onBlur: onBlur,
           ref: ref,
           disabled: disabled,
-          value: value
+          value: value,
+          variant: variant
         });
       case 'checkbox':
         return /*#__PURE__*/React__default.createElement(StackedCheckbox, {
@@ -1916,7 +1953,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, {
@@ -1953,7 +1991,8 @@ function Input(_ref) {
           setError: setError,
           clearErrors: clearErrors,
           control: control,
-          maxLength: maxLength
+          maxLength: maxLength,
+          variant: variant
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -1971,6 +2010,7 @@ function Input(_ref) {
         return null;
     }
   };
+  var nonLabeledInputs = ['checkbox'];
   return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
     name: name,
@@ -1989,8 +2029,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
@@ -2029,7 +2069,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,
@@ -2045,7 +2086,8 @@ function FormSection(_ref) {
       defaultValue: defaultValue,
       setValue: form.setValue,
       setError: form.setError,
-      clearErrors: form.clearErrors
+      clearErrors: form.clearErrors,
+      variant: variant ? variant : ''
     });
   }));
 }
@@ -2919,11 +2961,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(Box, Object.assign({}, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: boxSize != null ? boxSize : 16,
@@ -2941,6 +2983,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 = 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);
+  useEffect(function () {
+    if (defaultValue) {
+      handleOnSelectItem(defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
+  return /*#__PURE__*/React__default.createElement(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(FormControl, {
+        id: name,
+        isInvalid: isInvalid,
+        position: "relative",
+        py: 0
+      }, /*#__PURE__*/React__default.createElement(Box //ref={dropdownRef}
+      , {
+        position: "relative"
+      }, /*#__PURE__*/React__default.createElement(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(Select$1, 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(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
+    }
+  });
+};
+
 /**
  * A functional React component utilized to render the `BorderedBox` component
  */
@@ -3617,10 +3778,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'
@@ -3631,7 +3854,26 @@ var Button$1 = {
   defaultProps: defaultProps$2
 };
 
-var variants$3 = Badge.variants,
+var _createMultiStyleConf = /*#__PURE__*/createMultiStyleConfigHelpers(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',
@@ -3641,7 +3883,7 @@ var baseStyle$3 = {
 };
 var Code = {
   baseStyle: baseStyle$3,
-  variants: variants$3,
+  variants: variants$4,
   defaultProps: defaultProps$3
 };
 
@@ -3741,8 +3983,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'
@@ -3750,7 +4005,7 @@ var defaultProps$4 = {
 var Input$1 = {
   parts: parts$3,
   baseStyle: baseStyle$7,
-  variants: variants$4,
+  variants: variants$5,
   defaultProps: defaultProps$4
 };
 
@@ -3847,7 +4102,7 @@ function variantNavlink(props) {
     }
   };
 }
-var variants$5 = {
+var variants$6 = {
   sidebar: variantSidebar,
   sidebarExact: variantSidebarExact,
   subNavigation: variantSubNavigation,
@@ -3855,7 +4110,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'];
@@ -3895,7 +4150,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, {
@@ -3924,7 +4179,7 @@ var baseStyle$a = function baseStyle() {
 var Select = {
   parts: parts$5,
   baseStyle: baseStyle$a,
-  variants: variants$6,
+  variants: variants$7,
   defaultProps: defaultProps$5
 };
 
@@ -4263,7 +4518,7 @@ var variantSimple = {
     }
   }
 };
-var variants$7 = {
+var variants$8 = {
   line: variantLine,
   enclosed: variantEnclosed,
   'enclosed-colored': variantEnclosedColored,
@@ -4281,7 +4536,7 @@ var Tabs = {
   parts: parts$8,
   baseStyle: baseStyle$d,
   sizes: sizes$1,
-  variants: variants$7,
+  variants: variants$8,
   defaultProps: defaultProps$7
 };
 
@@ -4293,11 +4548,29 @@ var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
   height: '78px',
   lineHeight: 'short'
 });
+var mobileInputs$1 = /*#__PURE__*/defineStyle$1( /*#__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
 };
 
@@ -4374,7 +4647,7 @@ function variantDescriptionLarge() {
     letterSpacing: '0.02em'
   };
 }
-var variants$8 = {
+var variants$a = {
   'title-small': variantTitleSmall,
   'title-medium': variantTitleMedium,
   'title-large': variantTitleLarge,
@@ -4386,9 +4659,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']
   })
 };
 
@@ -4421,6 +4694,7 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends$6({
     Alert: Alert,
     Badge: Badge,
     Button: Button$1,
+    Checkbox: Checkbox,
     Code: Code,
     Form: Form$1,
     FormError: FormError,
@@ -4776,5 +5050,5 @@ function formatErrorResponse(error) {
   };
 }
 
-export { ActionRow, Banner, Breadcrumbs, Button, Card, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, GearIcon, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, Modal, NavigationMenu, Neutral, Page, Positive, Question, Search, Services, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Task, Text, Toolbar, Trash, Vault, Video, Warning, Workspace, XQThemeProvider, colors, formatErrorResponse, useToast };
+export { ActionRow, Banner, Breadcrumbs, Button, Card, Checkmark, ChevronDown, ChevronRight, Clock, Close, Dropdown$1 as Dropdown, Error$1 as Error, FileFill, FileOutline, FolderAddFill, FolderAddOutline, FolderFill, FolderOutline, Form, FormSection, GearIcon, Google, GoogleButton, GoogleDrive, Group, Home, Image, Input, Layout, Link, LoadingIndicator, Menu, Microsoft, MicrosoftButton, MicrosoftOneDrive, Modal, NavigationMenu, Neutral, Page, Positive, Question, Search, SelectNative, Services, Settings, SpinnerButton, Table, TableFill, TableOutline, TabsWrapper, Task, Text, Toolbar, Trash, Vault, Video, Warning, Workspace, XQThemeProvider, colors, formatErrorResponse, useToast };
 //# sourceMappingURL=ui-core.esm.js.map