@xqmsg/ui-core 0.24.2 → 0.24.3

package/README.md

@@ -1,19 +1,14 @@
-## To test via yalc:
+## To test:
 
-Install `yalc` globally:
-`npm i -g yalc`
+Update the theme, components, etc. however you wish and when you are ready to test build:
+`yarn build`
 
-Update the theme, components, etc. however you wish and when you are ready to test run the following:
-`yarn build && yalc publish`
+Then in whatever project you would like to install this local bundled build into run change ui-core package version in package.json to:
+`"@xqmsg/ui-core": "file:../ui-core"`
 
-_Take note of the output of the `yalc publish` command_
-
-Example: `@xqmsg/ui-core@[VERSION] published in store`
-
-Then in whatever project you would like to install this local bundled build into run the following:
-`yalc add @xqmsg/ui-core@[VERSION]`
-
-Any time you make changes, rebuild with the first command, and add to your project with the command above.
+Any time you make changes, rebuild ui-core and reinstall in project.
+`rm -rf node_modules/@xqmsg`
+`pnpm i`
 
 ## Once you are satisfied with your work and would like to create a PR:
 

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

@@ -6,6 +6,7 @@ export interface DropdownProps {
     dropdownRef: RefObject<HTMLDivElement>;
     position: 'top' | 'bottom';
     optionIndex?: number | null;
+    children?: React.ReactNode;
 }
 /**
  * A functional React component utilized to render the `Dropdown` component

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,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 = React.useMemo(function () {
+    if (!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 +936,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 +945,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,7 +1022,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'
   });
 };
@@ -1035,9 +1062,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 +1080,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,6 +1092,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;
@@ -1123,19 +1152,21 @@ 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$ = 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(react.Box, {
     ref: dropdownRef,
     position: "relative"
@@ -1146,16 +1177,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(react.InputRightElement, {
     cursor: disabled ? 'not-allowed' : 'pointer',
@@ -1163,13 +1189,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
   }));
 });
@@ -1306,24 +1332,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 +1414,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 +1451,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 +1468,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 +1478,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 +1487,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 = 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$;
+    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(react.Box, {
     ref: dropdownRef,
@@ -1549,17 +1579,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(react.Input, {
+    value: searchValue,
+    onChange: handleInput
+  })));
 });
 
 /**
@@ -2155,7 +2188,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 +2219,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 +2251,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 +2282,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 +2314,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 +2345,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 +2473,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 +2504,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 +2535,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 +2579,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 +2610,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 +2641,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 +2672,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 +2716,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 +2750,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 +2782,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 +2813,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 +2844,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 +2875,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 +2919,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 +2950,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 +2981,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 +3079,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
   });
 };