@xqmsg/ui-core 0.24.2 → 0.24.3

package/dist/ui-core.esm.js

@@ -1,7 +1,7 @@
 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 as Checkbox$1, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Popover as Popover$1, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, 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$1, 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 { truncate } from 'lodash-es';
 import { QuestionIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { Link as Link$3 } from 'react-router-dom';
 import { HiOutlineRefresh } from 'react-icons/hi';
@@ -87,7 +87,8 @@ var Memo = /*#__PURE__*/memo(ForwardRef);
 var Error$1 = function Error(_ref) {
   var boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo, {
-    boxSize: boxSize
+    width: boxSize,
+    height: boxSize
   });
 };
 
@@ -117,7 +118,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'
   });
 };
@@ -148,7 +150,8 @@ var Memo$2 = /*#__PURE__*/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
   });
 };
 
@@ -178,7 +181,8 @@ var Memo$3 = /*#__PURE__*/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
   });
 };
 
@@ -682,7 +686,8 @@ var Memo$5 = /*#__PURE__*/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
   });
 };
 
@@ -867,8 +872,21 @@ var Dropdown = function Dropdown(_ref) {
     options = _ref.options,
     dropdownRef = _ref.dropdownRef,
     position = _ref.position,
-    optionIndex = _ref.optionIndex;
+    optionIndex = _ref.optionIndex,
+    children = _ref.children;
   var DropdownContent = useMemo(function () {
+    if (!options || options.length === 0) {
+      return /*#__PURE__*/React__default.createElement(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(Box, {
         key: idx,
@@ -911,11 +929,7 @@ var Dropdown = function Dropdown(_ref) {
       }, option.label));
     });
   }, [onSelectItem, optionIndex, options]);
-  if (!options) return null;
   return /*#__PURE__*/React__default.createElement(Flex, {
-    flexDirection: "column",
-    ref: dropdownRef,
-    scrollMargin: "15px",
     bg: colors.fill.light.quaternary,
     backdropFilter: "auto",
     backdropBlur: "64px",
@@ -924,17 +938,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(Box, {
+    width: "100%",
+    mb: 2,
+    mt: 1
+  }, children), /*#__PURE__*/React__default.createElement(Flex, {
     width: "fit-content",
+    overflowY: "auto",
+    flexDirection: "column",
+    ref: dropdownRef,
     minWidth: "100%",
-    zIndex: 100,
-    tabIndex: -2000
-  }, DropdownContent);
+    scrollMargin: "15px"
+  }, DropdownContent));
 };
 
 function useOnClickOutside(ref, handler) {
@@ -989,7 +1015,8 @@ 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'
   });
 };
@@ -1028,9 +1055,9 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   var _useState5 = useState(''),
     searchValue = _useState5[0],
     setSearchValue = _useState5[1];
-  var _useState6 = useState(''),
-    debouncedSearchValue = _useState6[0],
-    setDebouncedSearchValue = _useState6[1];
+  var _useState6 = useState(options),
+    filteredOptions = _useState6[0],
+    setFilteredOptions = _useState6[1];
   var boundingClientRect = (_dropdownRef$current = dropdownRef.current) == null ? void 0 : _dropdownRef$current.getBoundingClientRect();
   useEffect(function () {
     var _dropdownRef$current2;
@@ -1046,9 +1073,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) {
@@ -1057,6 +1085,7 @@ 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;
@@ -1116,19 +1145,21 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
         top: idx * 24,
         behavior: 'smooth'
       });
-      setSearchValue('');
-      setDebouncedSearchValue('');
     }
   }, [options, searchValue]);
-  var updateSearchValue = useMemo(function () {
-    return debounce(function (val) {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-  var update = function update(value) {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
+  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$ = filteredOptions[0]) == null ? void 0 : _filteredOptions$.value) === 'section_header' ? 1 : 0;
+    setOptionIndex(initialOptionIndex);
+    var value = e.target.value;
+    setSearchValue(value);
   };
+  console.log(searchValue);
   return /*#__PURE__*/React__default.createElement(Box, {
     ref: dropdownRef,
     position: "relative"
@@ -1139,16 +1170,11 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
     onClick: function onClick() {
       return setIsFocussed(!isFocussed);
     },
-    cursor: "pointer",
-    color: "transparent",
+    cursor: isFocussed ? 'select' : 'pointer',
     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(InputRightElement, {
     cursor: disabled ? 'not-allowed' : 'pointer',
@@ -1156,13 +1182,13 @@ 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,
+    options: filteredOptions,
     optionIndex: optionIndex
   }));
 });
@@ -1299,24 +1325,25 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var _useState3 = useState(options),
     localOptions = _useState3[0],
     setLocalOptions = _useState3[1];
-  var _useState4 = useState(false),
-    isFocussed = _useState4[0],
-    setIsFocussed = _useState4[1];
+  var _useState4 = useState(localOptions),
+    filteredOptions = _useState4[0],
+    setFilteredOptions = _useState4[1];
   var _useState5 = useState(false),
-    shouldSideScroll = _useState5[0],
-    setShouldSideScroll = _useState5[1];
-  var _useState6 = useState(null),
-    optionIndex = _useState6[0],
-    setOptionIndex = _useState6[1];
-  var _useState7 = useState('top'),
-    position = _useState7[0],
-    setPosition = _useState7[1];
-  var _useState8 = useState(''),
-    searchValue = _useState8[0],
-    setSearchValue = _useState8[1];
+    isFocussed = _useState5[0],
+    setIsFocussed = _useState5[1];
+  var _useState6 = useState(false),
+    shouldSideScroll = _useState6[0],
+    setShouldSideScroll = _useState6[1];
+  var _useState7 = useState(null),
+    optionIndex = _useState7[0],
+    setOptionIndex = _useState7[1];
+  var _useState8 = useState('top'),
+    position = _useState8[0],
+    setPosition = _useState8[1];
   var _useState9 = 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();
   useEffect(function () {
     if (window.innerHeight - ((boundingClientRect == null ? void 0 : boundingClientRect.y) + 240) >= 0) {
@@ -1380,6 +1407,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) {
@@ -1415,16 +1444,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,
@@ -1432,7 +1461,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;
@@ -1442,7 +1471,6 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       if (e.key === 'Tab') {
         return setIsFocussed(false);
       }
-      return update(debouncedSearchValue.concat(e.key));
     }
   };
   useEffect(function () {
@@ -1452,21 +1480,23 @@ 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 = useMemo(function () {
-    return debounce(function (val) {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-  var update = function update(value) {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
+  useEffect(function () {
+    setFilteredOptions(localOptions.filter(function (element) {
+      return element.label.toLowerCase().includes(searchValue.toLowerCase());
+    }));
+  }, [localOptions, searchValue]);
+  var handleInput = function handleInput(e) {
+    var _filteredOptions$;
+    console.log(e);
+    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(Box, {
     ref: dropdownRef,
@@ -1542,17 +1572,20 @@ 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
-  }));
+  }, /*#__PURE__*/React__default.createElement(Input$2, {
+    value: searchValue,
+    onChange: handleInput
+  })));
 });
 
 /**
@@ -2148,7 +2181,8 @@ var Memo$8 = /*#__PURE__*/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
   });
 };
 
@@ -2178,7 +2212,8 @@ var Memo$9 = /*#__PURE__*/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
   });
 };
@@ -2209,7 +2244,8 @@ var Memo$a = /*#__PURE__*/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
   });
 };
 
@@ -2239,7 +2275,8 @@ var Memo$b = /*#__PURE__*/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
   });
 };
 
@@ -2270,7 +2307,8 @@ var Memo$c = /*#__PURE__*/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
   });
 };
 
@@ -2300,7 +2338,8 @@ var Memo$d = /*#__PURE__*/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
   });
 };
 
@@ -2427,7 +2466,8 @@ var Memo$g = /*#__PURE__*/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
   });
 };
 
@@ -2457,7 +2497,8 @@ var Memo$h = /*#__PURE__*/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
   });
 };
 
@@ -2487,7 +2528,8 @@ var Memo$i = /*#__PURE__*/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
   });
 };
 
@@ -2530,7 +2572,8 @@ var Memo$j = /*#__PURE__*/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
   });
 };
 
@@ -2560,7 +2603,8 @@ var Memo$k = /*#__PURE__*/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
   });
 };
 
@@ -2590,7 +2634,8 @@ var Memo$l = /*#__PURE__*/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
   });
 };
 
@@ -2620,7 +2665,8 @@ var Memo$m = /*#__PURE__*/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
   });
 };
 
@@ -2663,7 +2709,8 @@ var Memo$n = /*#__PURE__*/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
   });
 };
 
@@ -2696,7 +2743,8 @@ var Memo$o = /*#__PURE__*/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
   });
 };
@@ -2727,7 +2775,8 @@ var Memo$p = /*#__PURE__*/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
   });
 };
 
@@ -2757,7 +2806,8 @@ var Memo$q = /*#__PURE__*/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
   });
 };
 
@@ -2787,7 +2837,8 @@ var Memo$r = /*#__PURE__*/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
   });
 };
 
@@ -2817,7 +2868,8 @@ var Memo$s = /*#__PURE__*/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
   });
 };
 
@@ -2860,7 +2912,8 @@ var Memo$t = /*#__PURE__*/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
   });
 };
 
@@ -2890,7 +2943,8 @@ var Memo$u = /*#__PURE__*/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
   });
 };
 
@@ -2920,7 +2974,8 @@ var Memo$v = /*#__PURE__*/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
   });
 };
 
@@ -3017,7 +3072,8 @@ var Memo$x = /*#__PURE__*/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
   });
 };