@xqmsg/ui-core 0.24.2 → 0.24.4

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

@@ -94,7 +94,8 @@ var Memo = /*#__PURE__*/React.memo(ForwardRef);
 var Error$1 = function Error(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -124,7 +125,8 @@ var Neutral = function Neutral(_ref) {
   var color = _ref.color,
     boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$1, {
-    boxSize: boxSize,
+    width: boxSize,
+    height: boxSize,
     fill: color || '#3C3C43'
   });
 };
@@ -155,7 +157,8 @@ var Memo$2 = /*#__PURE__*/React.memo(ForwardRef$2);
 var Positive = function Positive(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$2, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -185,7 +188,8 @@ var Memo$3 = /*#__PURE__*/React.memo(ForwardRef$3);
 var Warning = function Warning(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$3, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -689,7 +693,8 @@ var Memo$5 = /*#__PURE__*/React.memo(ForwardRef$5);
 var Microsoft = function Microsoft(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$5, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -874,8 +879,41 @@ var Dropdown = function Dropdown(_ref) {
     options = _ref.options,
     dropdownRef = _ref.dropdownRef,
     position = _ref.position,
-    optionIndex = _ref.optionIndex;
+    optionIndex = _ref.optionIndex,
+    children = _ref.children,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
   var DropdownContent = React.useMemo(function () {
+    if (loading) {
+      return /*#__PURE__*/React__default.createElement(react.Box, {
+        borderRadius: "inherit",
+        fontSize: "13px",
+        px: "8px",
+        py: "4px",
+        width: "100%",
+        color: colors.label.primary.light,
+        bg: "inherit",
+        whiteSpace: "nowrap"
+      }, /*#__PURE__*/React__default.createElement(react.Flex, {
+        alignItems: "center"
+      }, "Loading", /*#__PURE__*/React__default.createElement(react.Spinner, {
+        size: "xs",
+        opacity: 0.5,
+        ml: 2
+      })));
+    }
+    if (!loading && (!options || options.length === 0)) {
+      return /*#__PURE__*/React__default.createElement(react.Box, {
+        borderRadius: "inherit",
+        fontSize: "13px",
+        px: "8px",
+        py: "4px",
+        width: "100%",
+        color: colors.label.primary.light,
+        bg: "inherit",
+        whiteSpace: "nowrap"
+      }, "No options");
+    }
     return options.map(function (option, idx) {
       return /*#__PURE__*/React__default.createElement(react.Box, {
         key: idx,
@@ -918,11 +956,7 @@ var Dropdown = function Dropdown(_ref) {
       }, option.label));
     });
   }, [onSelectItem, optionIndex, options]);
-  if (!options) return null;
   return /*#__PURE__*/React__default.createElement(react.Flex, {
-    flexDirection: "column",
-    ref: dropdownRef,
-    scrollMargin: "15px",
     bg: colors.fill.light.quaternary,
     backdropFilter: "auto",
     backdropBlur: "64px",
@@ -931,17 +965,29 @@ var Dropdown = function Dropdown(_ref) {
     borderColor: colors.fill.light.tertiary,
     mt: "3px",
     maxH: "240px",
-    overflowY: "auto",
+    position: "absolute",
     px: "8px",
     py: "4px",
-    position: "absolute",
+    overflow: "hidden",
+    minWidth: "100%",
+    zIndex: 100,
+    tabIndex: -2000,
+    alignItems: "flex-start",
+    flexDirection: "column",
     top: position === 'top' ? 26 : undefined,
-    bottom: position === 'bottom' ? 30 : undefined,
+    bottom: position === 'bottom' ? 30 : undefined
+  }, children && /*#__PURE__*/React__default.createElement(react.Box, {
+    width: "100%",
+    mb: 2,
+    mt: 1
+  }, children), /*#__PURE__*/React__default.createElement(react.Flex, {
     width: "fit-content",
+    overflowY: "auto",
+    flexDirection: "column",
+    ref: dropdownRef,
     minWidth: "100%",
-    zIndex: 100,
-    tabIndex: -2000
-  }, DropdownContent);
+    scrollMargin: "15px"
+  }, DropdownContent));
 };
 
 function useOnClickOutside(ref, handler) {
@@ -996,12 +1042,13 @@ var Dropdown$1 = function Dropdown(_ref) {
   var boxSize = _ref.boxSize,
     disabled = _ref.disabled;
   return /*#__PURE__*/React__default.createElement(Memo$6, {
-    boxSize: boxSize,
+    width: boxSize,
+    height: boxSize,
     fill: disabled ? '#3C3C4399' : '#0082FF'
   });
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "disabled", "value", "fullOptions", "loadingOptions"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
@@ -1015,6 +1062,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     disabled = _ref2.disabled,
     value = _ref2.value,
     fullOptions = _ref2.fullOptions,
+    loadingOptions = _ref2.loadingOptions,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
   var dropdownRef = React.useRef(null);
   var dropdownMenuRef = React.useRef(null);
@@ -1035,9 +1083,9 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   var _useState5 = React.useState(''),
     searchValue = _useState5[0],
     setSearchValue = _useState5[1];
-  var _useState6 = React.useState(''),
-    debouncedSearchValue = _useState6[0],
-    setDebouncedSearchValue = _useState6[1];
+  var _useState6 = React.useState(options),
+    filteredOptions = _useState6[0],
+    setFilteredOptions = _useState6[1];
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
     var _dropdownRef$current2;
@@ -1053,9 +1101,10 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     setSelectedOption((_find$label = (_find = (fullOptions || options).find(function (option) {
       return option.value === value;
     })) == null ? void 0 : _find.label) != null ? _find$label : '');
-  }, [fullOptions, value]);
+  }, [fullOptions, options, value]);
   useOnClickOutside(dropdownRef, function () {
-    return setIsFocussed(false);
+    setIsFocussed(false);
+    setSearchValue('');
   });
   var handleOnSelectItem = function handleOnSelectItem(option) {
     if (handleOnChange) {
@@ -1064,29 +1113,30 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     setValue(name, option.value);
     setSelectedOption(option.label);
     setIsFocussed(false);
+    setSearchValue('');
   };
   var handleOnKeyDown = function handleOnKeyDown(e) {
-    var initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+    var initialOptionIndex = filteredOptions.length && filteredOptions[0].value === 'section_header' ? 1 : 0;
     if (!isFocussed && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
       setIsFocussed(true);
       return setOptionIndex(initialOptionIndex);
     }
-    if (isFocussed) {
+    if (isFocussed && filteredOptions.length > 0) {
       if (optionIndex === null && (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         return setOptionIndex(initialOptionIndex);
       }
       if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
         var _dropdownMenuRef$curr;
-        var incrementValue = options[optionIndex - 1] && options[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        var incrementValue = filteredOptions[optionIndex - 1] && filteredOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex - incrementValue);
         return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
           top: optionIndex * 24,
           behavior: 'smooth'
         });
       }
-      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < options.length) {
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < filteredOptions.length) {
         var _dropdownMenuRef$curr2;
-        var _incrementValue = options[optionIndex + 1] && options[optionIndex + 1].value === 'section_header' ? 2 : 1;
+        var _incrementValue = filteredOptions[optionIndex + 1] && filteredOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex + _incrementValue);
         return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
           top: optionIndex * 24,
@@ -1094,7 +1144,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
         });
       }
       if (e.key === 'Enter' && optionIndex !== null) {
-        var option = options.find(function (_, idx) {
+        var option = filteredOptions.find(function (_, idx) {
           return optionIndex === idx;
         });
         if (!option) return;
@@ -1123,18 +1173,19 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
         top: idx * 24,
         behavior: 'smooth'
       });
-      setSearchValue('');
-      setDebouncedSearchValue('');
     }
   }, [options, searchValue]);
-  var updateSearchValue = React.useMemo(function () {
-    return lodash.debounce(function (val) {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-  var update = function update(value) {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
+  React.useEffect(function () {
+    setFilteredOptions(options.filter(function (element) {
+      return element.label.toLowerCase().includes(searchValue.toLowerCase());
+    }));
+  }, [options, searchValue]);
+  var handleInput = function handleInput(e) {
+    var _filteredOptions$;
+    var initialOptionIndex = filteredOptions.length && ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
+    setOptionIndex(initialOptionIndex);
+    var value = e.target.value;
+    setSearchValue(value);
   };
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
@@ -1146,16 +1197,12 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     onClick: function onClick() {
       return setIsFocussed(!isFocussed);
     },
-    cursor: "pointer",
-    color: "transparent",
+    cursor: isFocussed ? 'default' : 'pointer',
+    color: loadingOptions ? 'transparent' : 'inital',
     fontSize: "13px",
-    textShadow: "0 0 0 " + colors.label.primary.light,
-    value: selectedOption,
-    disabled: disabled,
+    value: isFocussed ? searchValue : selectedOption,
     autoComplete: "off",
-    onChange: function onChange(e) {
-      return update(debouncedSearchValue.concat(e.target.value));
-    },
+    onChange: handleInput,
     onKeyDown: handleOnKeyDown
   })), /*#__PURE__*/React__default.createElement(react.InputRightElement, {
     cursor: disabled ? 'not-allowed' : 'pointer',
@@ -1163,14 +1210,15 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       return !disabled && setIsFocussed(!isFocussed);
     }
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    boxSize: "16px",
+    boxSize: "12px",
     disabled: disabled
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     position: position,
     dropdownRef: dropdownMenuRef,
     onSelectItem: handleOnSelectItem,
-    options: options,
-    optionIndex: optionIndex
+    options: filteredOptions,
+    optionIndex: optionIndex,
+    loading: loadingOptions
   }));
 });
 
@@ -1288,7 +1336,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     control = _ref2.control,
     name = _ref2.name,
     placeholder = _ref2.placeholder,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    loadingOptions = _ref2.loadingOptions;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1306,24 +1355,25 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var _useState3 = React.useState(options),
     localOptions = _useState3[0],
     setLocalOptions = _useState3[1];
-  var _useState4 = React.useState(false),
-    isFocussed = _useState4[0],
-    setIsFocussed = _useState4[1];
+  var _useState4 = React.useState(localOptions),
+    filteredOptions = _useState4[0],
+    setFilteredOptions = _useState4[1];
   var _useState5 = React.useState(false),
-    shouldSideScroll = _useState5[0],
-    setShouldSideScroll = _useState5[1];
-  var _useState6 = React.useState(null),
-    optionIndex = _useState6[0],
-    setOptionIndex = _useState6[1];
-  var _useState7 = React.useState('top'),
-    position = _useState7[0],
-    setPosition = _useState7[1];
-  var _useState8 = React.useState(''),
-    searchValue = _useState8[0],
-    setSearchValue = _useState8[1];
+    isFocussed = _useState5[0],
+    setIsFocussed = _useState5[1];
+  var _useState6 = React.useState(false),
+    shouldSideScroll = _useState6[0],
+    setShouldSideScroll = _useState6[1];
+  var _useState7 = React.useState(null),
+    optionIndex = _useState7[0],
+    setOptionIndex = _useState7[1];
+  var _useState8 = React.useState('top'),
+    position = _useState8[0],
+    setPosition = _useState8[1];
   var _useState9 = React.useState(''),
-    debouncedSearchValue = _useState9[0],
-    setDebouncedSearchValue = _useState9[1];
+    searchValue = _useState9[0],
+    setSearchValue = _useState9[1];
+  // const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   React.useEffect(function () {
     if (window.innerHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
@@ -1387,6 +1437,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     setLocalValues(function (prevLocalValues) {
       return [].concat(prevLocalValues, [option]);
     });
+    // reset search on value select
+    setSearchValue('');
   };
   var handleDelete = function handleDelete(option) {
     var newValue = localValues.filter(function (localValue) {
@@ -1422,16 +1474,16 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       }
       if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
         var _dropdownMenuRef$curr;
-        var incrementValue = localOptions[optionIndex - 1] && localOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
+        var incrementValue = filteredOptions[optionIndex - 1] && filteredOptions[optionIndex - 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex - incrementValue);
         return (_dropdownMenuRef$curr = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr.scrollTo({
           top: optionIndex * 24,
           behavior: 'smooth'
         });
       }
-      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < localOptions.length) {
+      if (e.key === 'ArrowDown' && optionIndex !== null && optionIndex < filteredOptions.length) {
         var _dropdownMenuRef$curr2;
-        var _incrementValue = localOptions[optionIndex + 1] && localOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
+        var _incrementValue = filteredOptions[optionIndex + 1] && filteredOptions[optionIndex + 1].value === 'section_header' ? 2 : 1;
         setOptionIndex(optionIndex + _incrementValue);
         return (_dropdownMenuRef$curr2 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr2.scrollTo({
           top: optionIndex * 24,
@@ -1439,7 +1491,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         });
       }
       if (e.key === 'Enter' && optionIndex !== null) {
-        var option = localOptions.find(function (_, idx) {
+        var option = filteredOptions.find(function (_, idx) {
           return optionIndex === idx;
         });
         if (!option) return;
@@ -1449,7 +1501,6 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       if (e.key === 'Tab') {
         return setIsFocussed(false);
       }
-      return update(debouncedSearchValue.concat(e.key));
     }
   };
   React.useEffect(function () {
@@ -1459,21 +1510,22 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         return option.label.substring(0, searchValue.length).toLowerCase() === searchValue.toLowerCase();
       });
       (_dropdownMenuRef$curr3 = dropdownMenuRef.current) == null ? void 0 : _dropdownMenuRef$curr3.scrollTo({
-        top: idx * 24,
+        top: idx * 27,
         behavior: 'smooth'
       });
-      setSearchValue('');
-      setDebouncedSearchValue('');
     }
   }, [options, searchValue]);
-  var updateSearchValue = React.useMemo(function () {
-    return lodash.debounce(function (val) {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-  var update = function update(value) {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
+  React.useEffect(function () {
+    setFilteredOptions(localOptions.filter(function (element) {
+      return element.label.toLowerCase().includes(searchValue.toLowerCase());
+    }));
+  }, [localOptions, searchValue]);
+  var handleInput = function handleInput(e) {
+    var _filteredOptions$;
+    var initialOptionIndex = ((_filteredOptions$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
+    setOptionIndex(initialOptionIndex);
+    var value = e.target.value;
+    setSearchValue(value);
   };
   return /*#__PURE__*/React__default.createElement(react.Box, {
     ref: dropdownRef,
@@ -1549,17 +1601,22 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     justifyContent: "center",
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    boxSize: "16px",
+    boxSize: "12px",
     disabled: disabled
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     dropdownRef: dropdownMenuRef,
     onSelectItem: function onSelectItem(option) {
       return handleChange(option);
     },
-    options: localOptions,
+    options: filteredOptions,
     position: position,
-    optionIndex: optionIndex
-  }));
+    optionIndex: optionIndex,
+    loading: loadingOptions
+  }, /*#__PURE__*/React__default.createElement(react.Input, {
+    value: searchValue,
+    onChange: handleInput,
+    disabled: loadingOptions
+  })));
 });
 
 /**
@@ -1901,7 +1958,9 @@ function Input(_ref) {
     setValue = _ref.setValue,
     setError = _ref.setError,
     clearErrors = _ref.clearErrors,
-    separators = _ref.separators;
+    separators = _ref.separators,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -1956,7 +2015,8 @@ function Input(_ref) {
           value: value,
           defaultValue: defaultValue,
           placeholder: placeholder,
-          fullOptions: fullOptions
+          fullOptions: fullOptions,
+          loadingOptions: loadingOptions
         });
       case 'textarea':
         return /*#__PURE__*/React__default.createElement(StackedTextarea, {
@@ -2007,7 +2067,8 @@ function Input(_ref) {
           control: control,
           setError: setError,
           clearErrors: clearErrors,
-          placeholder: placeholder
+          placeholder: placeholder,
+          loadingOptions: loadingOptions
         });
       case 'pilled-text':
         return /*#__PURE__*/React__default.createElement(StackedPilledInput, {
@@ -2155,7 +2216,8 @@ var Memo$8 = /*#__PURE__*/React.memo(ForwardRef$8);
 var Checkmark = function Checkmark(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$8, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2185,7 +2247,8 @@ var Memo$9 = /*#__PURE__*/React.memo(ForwardRef$9);
 var ChevronDown = function ChevronDown(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$9, {
-    boxSize: boxSize,
+    width: boxSize,
+    height: boxSize,
     fill: colors.fill.action
   });
 };
@@ -2216,7 +2279,8 @@ var Memo$a = /*#__PURE__*/React.memo(ForwardRef$a);
 var ChevronRight = function ChevronRight(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$a, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2246,7 +2310,8 @@ var Memo$b = /*#__PURE__*/React.memo(ForwardRef$b);
 var Clock = function Clock(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$b, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2277,7 +2342,8 @@ var Memo$c = /*#__PURE__*/React.memo(ForwardRef$c);
 var FileFill = function FileFill(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$c, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2307,7 +2373,8 @@ var Memo$d = /*#__PURE__*/React.memo(ForwardRef$d);
 var FileOutline = function FileOutline(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$d, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2434,7 +2501,8 @@ var Memo$g = /*#__PURE__*/React.memo(ForwardRef$g);
 var FolderOutline = function FolderOutline(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$g, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2464,7 +2532,8 @@ var Memo$h = /*#__PURE__*/React.memo(ForwardRef$h);
 var FolderAddFill = function FolderAddFill(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$h, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2494,7 +2563,8 @@ var Memo$i = /*#__PURE__*/React.memo(ForwardRef$i);
 var FolderAddOutline = function FolderAddOutline(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$i, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2537,7 +2607,8 @@ var Memo$j = /*#__PURE__*/React.memo(ForwardRef$j);
 var Group = function Group(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$j, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2567,7 +2638,8 @@ var Memo$k = /*#__PURE__*/React.memo(ForwardRef$k);
 var Home = function Home(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$k, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2597,7 +2669,8 @@ var Memo$l = /*#__PURE__*/React.memo(ForwardRef$l);
 var Image = function Image(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$l, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2627,7 +2700,8 @@ var Memo$m = /*#__PURE__*/React.memo(ForwardRef$m);
 var Menu = function Menu(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$m, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2670,7 +2744,8 @@ var Memo$n = /*#__PURE__*/React.memo(ForwardRef$n);
 var Search = function Search(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$n, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2703,7 +2778,8 @@ var Memo$o = /*#__PURE__*/React.memo(ForwardRef$o);
 var Settings = function Settings(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$o, {
-    boxSize: boxSize,
+    width: boxSize,
+    height: boxSize,
     fill: colors.fill.action
   });
 };
@@ -2734,7 +2810,8 @@ var Memo$p = /*#__PURE__*/React.memo(ForwardRef$p);
 var TableFill = function TableFill(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$p, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2764,7 +2841,8 @@ var Memo$q = /*#__PURE__*/React.memo(ForwardRef$q);
 var TableOutline = function TableOutline(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$q, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2794,7 +2872,8 @@ var Memo$r = /*#__PURE__*/React.memo(ForwardRef$r);
 var Trash = function Trash(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$r, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2824,7 +2903,8 @@ var Memo$s = /*#__PURE__*/React.memo(ForwardRef$s);
 var Services = function Services(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$s, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2867,7 +2947,8 @@ var Memo$t = /*#__PURE__*/React.memo(ForwardRef$t);
 var Question = function Question(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$t, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2897,7 +2978,8 @@ var Memo$u = /*#__PURE__*/React.memo(ForwardRef$u);
 var Video = function Video(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$u, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -2927,7 +3009,8 @@ var Memo$v = /*#__PURE__*/React.memo(ForwardRef$v);
 var Page = function Page(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$v, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -3024,7 +3107,8 @@ var Memo$x = /*#__PURE__*/React.memo(ForwardRef$x);
 var Task = function Task(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$x, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };