@xqmsg/ui-core 0.24.10 → 0.25.0

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReadonlyTableColumns, TableBody, TableColumns, TableHeaders } from './TableTypes';
+import { ReadonlyTableColumns, TableBody, TableColumns, TableColumnsWidths, TableHeaders } from './TableTypes';
 export interface SimpleTableProps<T extends ReadonlyTableColumns> {
     columns: TableColumns;
     headers?: TableHeaders<T>;
@@ -7,8 +7,10 @@ export interface SimpleTableProps<T extends ReadonlyTableColumns> {
     loading?: boolean;
     loadMore?: () => void;
     placeholder?: string;
+    layout?: 'fixed' | 'auto';
+    columnsWidths?: TableColumnsWidths<T>;
 }
 /**
  * A React component utilized to render the `Table` component
  */
-export declare function SimpleTable<T extends ReadonlyTableColumns>({ columns, headers, body, loading, loadMore, }: SimpleTableProps<T>): React.JSX.Element;
+export declare function SimpleTable<T extends ReadonlyTableColumns>({ columns, headers, body, loading, loadMore, layout, columnsWidths, }: SimpleTableProps<T>): React.JSX.Element;

package/dist/components/SimpleTable/TableTypes.d.ts

@@ -4,6 +4,9 @@ export declare type ReadonlyTableColumns = Readonly<TableColumns>;
 export declare type TableHeaders<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };
+export declare type TableColumnsWidths<K extends ReadonlyTableColumns> = {
+    [k in K[number]]: string | number;
+};
 export declare type TableRow<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };

package/dist/components/form/FormTypes.d.ts

@@ -1,10 +1,10 @@
-import { FieldOptions, InputType } from '../input/InputTypes';
+import { FieldOption, InputType } from '../input/InputTypes';
 export interface FormInput {
     label: string;
     name: string;
     ariaLabel: string;
     inputType: InputType;
-    options?: FieldOptions;
+    options?: FieldOption[];
     placeholder?: string;
     isRequired: boolean;
     maxLength?: number;

package/dist/components/input/InputTypes.d.ts

@@ -13,7 +13,6 @@ export declare type FieldOption = {
     value: string | 'section_header';
     sortValue: number;
 };
-export declare type FieldOptions = FieldOption[];
 export interface ValidationProps {
     isRequired: boolean;
     isInvalid?: boolean;

package/dist/components/input/StackedMultiSelect/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FieldOptions, ReactSelectFieldProps } from '../InputTypes';
+import { FieldOption, ReactSelectFieldProps } from '../InputTypes';
 import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
-    options: FieldOptions;
+    options: FieldOption[];
     setValue: UseFormSetValue<FieldValues>;
     setError: UseFormSetError<FieldValues>;
     clearErrors: UseFormClearErrors<FieldValues>;

package/dist/components/input/StackedPilledInput/index.d.ts

@@ -10,6 +10,7 @@ export interface StackedPilledInputProps extends InputFieldProps {
     variant?: string;
     label?: string;
     truncatePillLength?: number;
+    mode?: 'scroll' | 'wrap';
 }
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.

package/dist/components/input/StackedRadio/StackedRadioGroup.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
+import { FieldOption, SelectFieldProps } from '../InputTypes';
 export interface StackedRadioGroupProps extends SelectFieldProps {
     flexDirection?: 'row' | 'column';
-    options: FieldOptions;
+    options: FieldOption[];
 }
 /**
  * A functional React component utilized to render the `StackedRadio` component.

package/dist/components/input/StackedSelect/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { FieldOptions } from '../InputTypes';
+import { FieldOption } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 export interface StackedSelectProps extends StackedInputProps {
-    options: FieldOptions;
-    fullOptions?: FieldOptions;
+    options: FieldOption[];
+    fullOptions?: FieldOption[];
     setValue: UseFormSetValue<FieldValues>;
     control: Control<FieldValues, any>;
     handleOnChange: (value?: string) => void;

package/dist/components/input/components/dropdown/index.d.ts

@@ -1,8 +1,8 @@
 import React, { RefObject } from 'react';
-import { FieldOption, FieldOptions } from '../../InputTypes';
+import { FieldOption } from '../../InputTypes';
 export interface DropdownProps {
     onSelectItem: (option: FieldOption) => void;
-    options: FieldOptions;
+    options: FieldOption[];
     dropdownRef: RefObject<HTMLDivElement>;
     position: 'top' | 'bottom';
     optionIndex?: number | null;

package/dist/components/input/components/token/index.d.ts

@@ -4,6 +4,8 @@ export interface TokenProps {
     onDelete: any;
     isMobile?: boolean;
     truncateLength?: number;
+    showClose?: boolean;
+    maxWidth?: string | number;
 }
 declare const Token: React.FC<TokenProps>;
 export default Token;

package/dist/components/input/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import { FieldOptions, ValidationProps, InputType } from './InputTypes';
+import { FieldOption, ValidationProps, InputType } from './InputTypes';
 import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 export interface InputProps<T extends FieldValues = FieldValues> extends ValidationProps {
     inputType: InputType;
@@ -9,8 +9,8 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     defaultValue?: string;
     label?: string;
     className?: string;
-    options?: FieldOptions;
-    fullOptions?: FieldOptions;
+    options?: FieldOption[];
+    fullOptions?: FieldOption[];
     maxLength?: number;
     helperText?: React.ReactNode;
     control: Control<T, any>;
@@ -27,9 +27,10 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     loadingOptions?: boolean;
     truncatePillLength?: number;
     searchable?: boolean;
+    overflowMode?: 'scroll' | 'wrap';
 }
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
  */
-export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, }: InputProps<T>): React.JSX.Element;
+export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, overflowMode, }: InputProps<T>): React.JSX.Element;

package/dist/components/select/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SelectProps } from '@chakra-ui/react';
 import { Control, FieldValues, Path, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
-import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
+import { FieldOption, ValidationProps } from 'src/components/input/InputTypes';
 export interface SelectNativeProps<T extends FieldValues> extends ValidationProps, SelectProps {
     isRequired: boolean;
     name: Path<T>;
@@ -10,8 +10,8 @@ export interface SelectNativeProps<T extends FieldValues> extends ValidationProp
     defaultValue?: string;
     label?: string;
     className?: string;
-    options?: FieldOptions;
-    fullOptions?: FieldOptions;
+    options?: FieldOption[];
+    fullOptions?: FieldOption[];
     helperText?: React.ReactNode;
     control: Control<T, unknown>;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;

package/dist/components/toolbar/components/actions/sort/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FieldOption, FieldOptions } from '../../../../input/InputTypes';
+import { FieldOption } from '../../../../input/InputTypes';
 export interface SortProps {
     onSelectItem: (option: FieldOption) => void;
-    sortOptions: FieldOptions;
+    sortOptions: FieldOption[];
 }
 /**
  * A functional React component utilized to render the `Sort` component

package/dist/components/toolbar/components/dropdown/index.d.ts

@@ -1,8 +1,8 @@
 import React, { RefObject } from 'react';
-import { FieldOption, FieldOptions } from '../../../input/InputTypes';
+import { FieldOption } from '../../../input/InputTypes';
 export interface DropdownProps {
     onSelectItem: (option: FieldOption) => void;
-    options: FieldOptions;
+    options: FieldOption[];
     dropdownRef: RefObject<HTMLDivElement>;
     position: 'top' | 'bottom';
     optionIndex: number | null;

package/dist/theme/components/menu.d.ts

@@ -0,0 +1,55 @@
+declare const _default: {
+    parts: string[];
+    baseStyle: (props: Record<string, any>) => {
+        list: {
+            bg: string;
+            boxShadow: string;
+            color: string;
+            minW: string;
+            py: number;
+            px: number;
+            zIndex: string;
+            borderWidth: number;
+            overflow: string;
+            backdropFilter: string;
+            backdropBlur: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+        };
+        item: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            py: number;
+            px: number;
+            borderRadius: string;
+            width: string;
+            transition: string;
+            _hover: {
+                color: string;
+                background: string;
+            };
+            _active: {
+                bg: string;
+            };
+            _expanded: {
+                bg: string;
+            };
+            _disabled: {
+                opacity: number;
+                cursor: string;
+            };
+        };
+        groupTitle: {
+            mx: number;
+            my: number;
+            fontWeight: string;
+            fontSize: string;
+        };
+        command: {
+            opacity: number;
+        };
+    };
+};
+export default _default;

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

@@ -1273,6 +1273,7 @@ var Close = function Close(_ref) {
   return /*#__PURE__*/React__default.createElement(Memo$7, {
     width: boxSize,
     height: boxSize,
+    flexBasis: boxSize,
     onClick: onClick,
     cursor: "pointer"
   });
@@ -1285,7 +1286,11 @@ var Token = function Token(_ref) {
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
     _ref$truncateLength = _ref.truncateLength,
-    truncateLength = _ref$truncateLength === void 0 ? 15 : _ref$truncateLength;
+    truncateLength = _ref$truncateLength === void 0 ? 15 : _ref$truncateLength,
+    _ref$showClose = _ref.showClose,
+    showClose = _ref$showClose === void 0 ? true : _ref$showClose,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth;
   return /*#__PURE__*/React__default.createElement(react.Flex, {
     key: label,
     borderRadius: 'full',
@@ -1293,6 +1298,7 @@ var Token = function Token(_ref) {
     alignItems: "center",
     width: "fit-content",
     w: "auto",
+    maxWidth: maxWidth,
     h: isMobile ? '18px' : '16px',
     pl: "6px",
     pr: "2px",
@@ -1300,13 +1306,17 @@ var Token = function Token(_ref) {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(react.Text, {
     whiteSpace: "nowrap",
+    wordBreak: "break-word",
     color: colors.label.primary.light,
     fontSize: isMobile ? '17px' : '13px',
-    pr: "4px"
+    pr: "4px",
+    maxWidth: maxWidth,
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }, lodash.truncate(label.trim(), {
     length: truncateLength,
     omission: '...'
-  })), /*#__PURE__*/React__default.createElement(Close, {
+  })), showClose && /*#__PURE__*/React__default.createElement(Close, {
     boxSize: isMobile ? '17px' : '11px',
     onClick: onDelete
   }));
@@ -1620,7 +1630,9 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     separators = _ref2$separators === void 0 ? ['Enter', ' ', ',', ';', 'Tab'] : _ref2$separators,
     variant = _ref2.variant,
     label = _ref2.label,
-    truncatePillLength = _ref2.truncatePillLength;
+    truncatePillLength = _ref2.truncatePillLength,
+    _ref2$mode = _ref2.mode,
+    mode = _ref2$mode === void 0 ? 'scroll' : _ref2$mode;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1641,6 +1653,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     localValue = _useState4[0],
     setLocalValue = _useState4[1];
   var latestTokenElement = document.getElementById(name + "_token_" + (lastestFormValueToArray.length - 1));
+  var scrollMode = mode === 'scroll';
   // gets latest watched form value (common delimited) from RHF state and creates a list
   React.useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
@@ -1792,11 +1805,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
     ref: inputWrapperRef,
-    h: isMobile ? '48px' : '26px'
+    h: isMobile ? '48px' : scrollMode ? '26px' : 'auto',
+    minH: isMobile ? '48px' : '26px'
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     h: "100%",
     alignItems: "center",
-    overflowX: "scroll",
+    overflowX: scrollMode ? 'scroll' : 'hidden',
+    flexWrap: scrollMode ? 'nowrap' : 'wrap',
     overflowY: "hidden",
     maxWidth: isFocussed ? '80%' : '100%',
     style: {
@@ -1820,10 +1835,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       onClick: function onClick() {
         return setTokenIndex(index);
       },
-      width: "100%",
+      width: scrollMode ? '100%' : 'auto',
+      maxWidth: '100%',
       id: name + "_token_" + index
     }, /*#__PURE__*/React__default.createElement(Token, {
+      maxWidth: '100%',
       label: label,
+      showClose: !isFocussed || tokenIndex === index,
       onDelete: function onDelete(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1951,7 +1969,9 @@ function Input(_ref) {
     _ref$loadingOptions = _ref.loadingOptions,
     loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
     truncatePillLength = _ref.truncatePillLength,
-    searchable = _ref.searchable;
+    searchable = _ref.searchable,
+    _ref$overflowMode = _ref.overflowMode,
+    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -2082,7 +2102,8 @@ function Input(_ref) {
           variant: variant,
           label: label,
           separators: separators,
-          truncatePillLength: truncatePillLength
+          truncatePillLength: truncatePillLength,
+          mode: overflowMode
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -3588,7 +3609,10 @@ function SimpleTable(_ref) {
     headers = _ref.headers,
     body = _ref.body,
     loading = _ref.loading,
-    loadMore = _ref.loadMore;
+    loadMore = _ref.loadMore,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'auto' : _ref$layout,
+    columnsWidths = _ref.columnsWidths;
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React__default.createElement(react.TableContainer, {
     border: "none",
@@ -3600,20 +3624,18 @@ function SimpleTable(_ref) {
     width: "100%",
     style: {
       borderCollapse: 'separate',
-      borderSpacing: '0px'
+      borderSpacing: '0px',
+      tableLayout: layout
     }
-  }, headers && /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
+  }, (headers || columnsWidths) && /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
     _odd: {
       bg: colors.label.primary.dark
     }
   }, columnsAsConst.map(function (column, idx) {
-    return (
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default.createElement(react.Th, {
-        key: idx
-      }, headers[column])
-    );
+    return /*#__PURE__*/React__default.createElement(react.Th, {
+      key: idx,
+      width: columnsWidths == null ? void 0 : columnsWidths[column]
+    }, headers && headers[column]);
   }))), /*#__PURE__*/React__default.createElement(react.Tbody, null, body.map(function (row, idx) {
     return /*#__PURE__*/React__default.createElement(react.Tr, {
       key: idx
@@ -4277,8 +4299,75 @@ var Link$1 = {
   variants: variants$6
 };
 
-var parts$4 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
-var baseStyle$9 = {
+var parts$4 = ['item', 'command', 'list', 'button', 'groupTitle'];
+function baseStyleList(props) {
+  return {
+    bg: colors.fill.light.quaternary,
+    boxShadow: themeTools.mode("2xl", "dark-lg")(props),
+    color: 'inherit',
+    minW: '3xs',
+    py: 4,
+    px: 2,
+    zIndex: 'docked',
+    borderWidth: 0,
+    overflow: 'hidden',
+    backdropFilter: 'auto',
+    backdropBlur: '64px',
+    borderRadius: '4px',
+    border: '0.25px solid',
+    borderColor: colors.fill.light.tertiary
+  };
+}
+function baseStyleItem(props) {
+  return {
+    fontSize: '13px;',
+    fontWeight: 500,
+    lineHeight: '16px',
+    py: 3,
+    px: 4,
+    borderRadius: '4px',
+    width: '100%',
+    transition: 'background 50ms ease-in 0s',
+    _hover: {
+      color: colors.white,
+      background: colors.fill.action
+    },
+    _active: {
+      bg: themeTools.mode("gray.200", "whiteAlpha.200")(props)
+    },
+    _expanded: {
+      bg: themeTools.mode("gray.100", "whiteAlpha.100")(props)
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    }
+  };
+}
+var baseStyleGroupTitle = {
+  mx: 4,
+  my: 2,
+  fontWeight: 'semibold',
+  fontSize: 'sm'
+};
+var baseStyleCommand = {
+  opacity: 0.6
+};
+var baseStyle$9 = function baseStyle(props) {
+  return {
+    list: baseStyleList(props),
+    item: baseStyleItem(props),
+    groupTitle: baseStyleGroupTitle,
+    command: baseStyleCommand
+  };
+};
+var Menu$1 = {
+  parts: parts$4,
+  baseStyle: baseStyle$9
+};
+
+var parts$5 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
+var baseStyle$a = {
   width: 'fit-content',
   height: 'fit-content',
   background: '#F6F6F6',
@@ -4309,8 +4398,8 @@ var baseStyle$9 = {
   }
 };
 var Modal$1 = {
-  parts: parts$4,
-  baseStyle: baseStyle$9
+  parts: parts$5,
+  baseStyle: baseStyle$a
 };
 
 var Popover = {
@@ -4323,7 +4412,7 @@ var Popover = {
 
 var defaultProps$5 = Input$1.defaultProps,
   variants$7 = Input$1.variants;
-var parts$5 = ['field', 'icon'];
+var parts$6 = ['field', 'icon'];
 function baseStyleField() {
   return _extends$6({}, Input$1.baseStyle.field, {
     appearance: 'none',
@@ -4342,20 +4431,20 @@ var baseStyleInput = {
     opacity: 0.5
   }
 };
-var baseStyle$a = function baseStyle() {
+var baseStyle$b = function baseStyle() {
   return {
     field: baseStyleField(),
     icon: baseStyleInput
   };
 };
 var Select = {
-  parts: parts$5,
-  baseStyle: baseStyle$a,
+  parts: parts$6,
+  baseStyle: baseStyle$b,
   variants: variants$7,
   defaultProps: defaultProps$5
 };
 
-var parts$6 = ['track', 'thumb'];
+var parts$7 = ['track', 'thumb'];
 function baseStyleTrack(props) {
   var c = props.colorScheme,
     theme = props.theme;
@@ -4385,7 +4474,7 @@ var baseStyleThumb = {
   borderRadius: 'full',
   transform: 'translateX(0)'
 };
-var baseStyle$b = function baseStyle(props) {
+var baseStyle$c = function baseStyle(props) {
   return {
     track: baseStyleTrack(props),
     thumb: baseStyleThumb
@@ -4437,14 +4526,14 @@ var defaultProps$6 = {
   colorScheme: 'blue'
 };
 var Switch = {
-  parts: parts$6,
-  baseStyle: baseStyle$b,
+  parts: parts$7,
+  baseStyle: baseStyle$c,
   sizes: sizes,
   defaultProps: defaultProps$6
 };
 
-var parts$7 = ['th', 'td', 'tr', 'body', 'thead'];
-var baseStyle$c = {
+var parts$8 = ['th', 'td', 'tr', 'body', 'thead'];
+var baseStyle$d = {
   thead: {
     bg: colors.label.primary.dark
   },
@@ -4480,11 +4569,11 @@ var baseStyle$c = {
   }
 };
 var Table = {
-  parts: parts$7,
-  baseStyle: baseStyle$c
+  parts: parts$8,
+  baseStyle: baseStyle$d
 };
 
-var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$9 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 function baseStyleRoot(props) {
   var orientation = props.orientation;
   return {
@@ -4519,7 +4608,7 @@ function baseStyleTablist(props) {
 var baseStyleTabpanel = {
   p: 4
 };
-var baseStyle$d = function baseStyle(props) {
+var baseStyle$e = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -4705,14 +4794,14 @@ var defaultProps$7 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$8,
-  baseStyle: baseStyle$d,
+  parts: parts$9,
+  baseStyle: baseStyle$e,
   sizes: sizes$1,
   variants: variants$8,
   defaultProps: defaultProps$7
 };
 
-var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
+var baseStyle$f = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
   fontSize: '13px',
   display: 'block',
   paddingY: '8px',
@@ -4720,7 +4809,7 @@ 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, {
+var mobileInputs$1 = /*#__PURE__*/react.defineStyle( /*#__PURE__*/_extends$6({}, baseStyle$f, Input$1.variants.mobile.field, {
   border: 'none',
   borderRadius: 0,
   paddingY: '16px',
@@ -4735,14 +4824,14 @@ var mobileInputs$1 = /*#__PURE__*/react.defineStyle( /*#__PURE__*/_extends$6({},
   minHeight: '208px'
 }));
 var variants$9 = {
-  "default": baseStyle$e,
+  "default": baseStyle$f,
   mobile: mobileInputs$1
 };
 var defaultProps$8 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$f,
   variants: variants$9,
   defaultProps: defaultProps$8
 };
@@ -4874,6 +4963,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends$
     FormLabel: FormLabel,
     Input: Input$1,
     Link: Link$1,
+    Menu: Menu$1,
     Modal: Modal$1,
     Popover: Popover,
     Select: Select,