@majoo-ui/react 1.53.0 → 1.53.2

package/index.umd.js

@@ -4000,7 +4000,10 @@
     }
   };
   var StyledIcon$2 = styled('div', {
-    verticalAlign: 'middle'
+    verticalAlign: 'middle',
+    '& svg': {
+      verticalAlign: 'middle'
+    }
   });
   var StyledIconLeft$4 = styled('div', {
     marginRight: '$spacing-03',
@@ -6382,18 +6385,39 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
+    const textareaRef = React.useRef(null);
+    React.useEffect(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = '60px';
+        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        textareaRef.current.style.height = scrollHeight + 20 + 'px';
+      }
+    }, []);
+
+    function handleKeyDown(e) {
+      e.target.style.height = '60px';
+      e.target.style.height = `${e.target.scrollHeight + 20}px`;
+    }
+
     return /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({
-      ref: ref,
+      ref: node => {
+        textareaRef.current = node;
+
+        if (ref && ref.current) {
+          ref.current = node;
+        }
+      },
       disabled: disabled,
       isDisabled: disabled,
       readOnly: readOnly,
-      isReadOnly: readOnly
+      isReadOnly: readOnly,
+      onKeyDown: handleKeyDown
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 22,
-        columnNumber: 3
+        lineNumber: 38,
+        columnNumber: 5
       }
     }));
   });
@@ -6612,7 +6636,7 @@
               letterSpacing: '$long-content-regular',
               fontWeight: '400',
               cursor: 'pointer',
-              color: disabled || readOnly ? '$textDisable' : '$textPrimary'
+              color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
             },
             __self: this,
             __source: {
@@ -6834,6 +6858,9 @@
         sm: {
           height: 32
         },
+        md: {
+          height: 36
+        },
         lg: {
           height: 40
         }
@@ -6889,7 +6916,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 147,
+        lineNumber: 150,
         columnNumber: 3
       }
     }));
@@ -9293,7 +9320,7 @@
     }
   }));
 
-  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
+  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
   var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9547,7 +9574,9 @@
       showSelectedTag,
       unremovableTags,
       helperText,
-      css
+      css,
+      showCounter,
+      labelCounter
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9670,12 +9699,21 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
-        removeSelectedItem(selected);
-        setSelectedValue(filterItems);
+        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+          setSelectedValue([]);
+          onChange === null || onChange === void 0 ? void 0 : onChange([]);
 
-        if (selected.id !== '!all') {
-          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          for (let i = 0; i < selectedValue.length; i++) {
+            removeSelectedItem(selectedValue[i]);
+          }
+        } else {
+          const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
+          removeSelectedItem(selected);
+          setSelectedValue(filterItems);
+
+          if (selected.id !== '!all') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          }
         }
       }
     };
@@ -9794,7 +9832,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 507,
+        lineNumber: 517,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9804,7 +9842,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 518,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9819,7 +9857,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 509,
+        lineNumber: 519,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9835,7 +9873,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 519,
+        lineNumber: 529,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9848,7 +9886,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 525,
+        lineNumber: 535,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9859,7 +9897,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 535,
+        lineNumber: 545,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9867,7 +9905,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 540,
+        lineNumber: 550,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9880,15 +9918,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 544,
+        lineNumber: 554,
         columnNumber: 11
       }
-    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 549,
+        lineNumber: 559,
         columnNumber: 11
       }
     }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -9912,10 +9950,45 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 553,
+        lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+      disabled: disabled,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 585,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+      css: {
+        maxWidth: '150px !important'
+      },
+      disabled: disabled,
+      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      size: size,
+      readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
+      ,
+      onRemove: event => {
+        if (onRemoveItem) {
+          return onRemoveItem({
+            id: 'counter'
+          });
+        } else {
+          event.stopPropagation();
+          removeItem({
+            id: 'counter'
+          });
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 586,
+        columnNumber: 13
+      }
+    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -9924,7 +9997,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 574,
+        lineNumber: 606,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9933,7 +10006,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 579,
+        lineNumber: 611,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9951,7 +10024,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 582,
+        lineNumber: 614,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9964,7 +10037,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 595,
+        lineNumber: 627,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9972,7 +10045,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 604,
+        lineNumber: 636,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9980,21 +10053,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 608,
+        lineNumber: 640,
         columnNumber: 27
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 615,
+        lineNumber: 647,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 617,
+        lineNumber: 649,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10004,7 +10077,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 620,
+        lineNumber: 652,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10017,14 +10090,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 625,
+        lineNumber: 657,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 626,
+        lineNumber: 658,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10034,7 +10107,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 627,
+        lineNumber: 659,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10046,7 +10119,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 628,
+        lineNumber: 660,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10071,7 +10144,9 @@
     selectAllLabel: PropTypes__default["default"].string,
     showSelectedTag: PropTypes__default["default"].bool,
     css: PropTypes__default["default"].object,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -10087,7 +10162,9 @@
     textEmptyItem: 'Item tidak ditemukan',
     sortBy: 'name',
     showSelectAll: false,
-    selectAllLabel: 'Pilih Semua'
+    selectAllLabel: 'Pilih Semua',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -10120,7 +10197,9 @@
     unremovableTags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
-    helperText: PropTypes__default["default"].string
+    helperText: PropTypes__default["default"].string,
+    showCounter: PropTypes__default["default"].bool,
+    labelCounter: PropTypes__default["default"].string
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -10134,7 +10213,9 @@
     disabledOptions: [],
     unremovableTags: [],
     textEmptyItem: 'Item tidak ditemukan',
-    sortBy: 'name'
+    sortBy: 'name',
+    showCounter: false,
+    labelCounter: 'Item terpilih'
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
@@ -11042,6 +11123,20 @@
             border: "1px solid $gray150 !important"
           }
         }
+      },
+      buttonSize: {
+        sm: {
+          height: '32px !important',
+          padding: '4px 16px !important'
+        },
+        md: {
+          height: '36px !important',
+          padding: '4px 16px !important'
+        },
+        lg: {
+          height: '40px !important',
+          padding: '7px 16px !important'
+        }
       }
     }
   });
@@ -11058,7 +11153,8 @@
         disabledIncrement = props.disabledIncrement,
         disabledDecrement = props.disabledDecrement,
         prefix = props.prefix,
-        suffix = props.suffix;
+        suffix = props.suffix,
+        size = props.size;
 
     var _b = React.useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0),
         inputValue = _b[0],
@@ -11111,6 +11207,7 @@
         type: "button",
         disabled: disabled || disabledDecrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "minus",
         icon: true,
         onClick: handleDown
@@ -11127,11 +11224,13 @@
         allowNegative: allowNegative,
         onChange: handleChange,
         prefix: prefix,
-        suffix: suffix
+        suffix: suffix,
+        size: size
       }, void 0), jsxRuntime.jsx(Button, __assign({
         type: "button",
         disabled: disabled || disabledIncrement,
         buttonType: "secondary",
+        buttonSize: size,
         counterType: "plus",
         icon: true,
         onClick: handleUp
@@ -11145,7 +11244,8 @@
   });
   InputCounter.defaultProps = {
     allowNegative: false,
-    disabled: false
+    disabled: false,
+    size: 'lg'
   };
 
   const _excluded$c = ["children"];
@@ -11818,7 +11918,15 @@
     flexShrink: 0,
     display: 'flex',
     borderBottom: '$medium',
-    boxShadow: '$medium'
+    boxShadow: '$medium',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    scrollBehavior: 'smooth',
+    '-ms-overflow-style': 'none',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
   });
   const StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
     all: 'unset',
@@ -11885,6 +11993,47 @@
     outline: 'none',
     boxShadow: '$medium'
   });
+  const ScrollButton = styled(Button$3, {
+    width: '28px',
+    '&:hover': {
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+    },
+    variants: {
+      position: {
+        left: {
+          '& svg': {
+            marginTop: '-1px',
+            marginLeft: '-2px'
+          }
+        },
+        right: {
+          '& svg': {
+            marginTop: 0,
+            marginLeft: 0
+          }
+        }
+      }
+    }
+  });
+  const ScrollButtonContainer = styled(Box, {
+    size: '28px',
+    position: 'absolute',
+    zIndex: '$sticky',
+    borderRadius: '$md',
+    top: '8px',
+    variants: {
+      position: {
+        left: {
+          left: '8px',
+          boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+        },
+        right: {
+          right: '8px',
+          boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+        }
+      }
+    }
+  });
   const Tabs$1 = _ref => {
     let {
       children
@@ -11900,7 +12049,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 108,
+        lineNumber: 162,
         columnNumber: 5
       }
     }), addPropsToChildren(children, {
@@ -11914,16 +12063,94 @@
     } = _ref2,
         props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+    const [listContainerScrollPosition, setlistContainerScrollPosition] = React.useState(0);
+    const [scrollAreaWidth, setScrollAreaWidth] = React.useState(0);
+    const listContainerRef = React.useRef();
+    React.useLayoutEffect(() => {
+      if (listContainerRef && listContainerRef.current) {
+        setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+      }
+    }, [listContainerRef, activeTabs]);
+    return /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        position: 'relative'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 121,
-        columnNumber: 10
+        lineNumber: 184,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+      ref: listContainerRef,
+      onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 185,
+        columnNumber: 7
       }
     }), addPropsToChildren(children, {
       activeTabs
-    }));
+    })), listContainerScrollPosition > 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "left",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 189,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "left",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 190,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 198,
+        columnNumber: 13
+      }
+    }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "right",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 203,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "right",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 204,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 212,
+        columnNumber: 13
+      }
+    }))));
   };
   const TabsTrigger$1 = _ref3 => {
     let {
@@ -11941,7 +12168,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 127,
+        lineNumber: 223,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -11954,14 +12181,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 131,
+          lineNumber: 227,
           columnNumber: 11
         }
       }, wrappedChildren),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 128,
+        lineNumber: 224,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11973,7 +12200,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 136,
+        lineNumber: 232,
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
@@ -11987,7 +12214,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 154,
+        lineNumber: 250,
         columnNumber: 58
       }
     }));
@@ -23970,14 +24197,14 @@
     };
 
     React__namespace.useEffect(function () {
-      if (props.withComponent) {
+      if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
         setTimeout(function () {
           setRender(function (prev) {
             return prev + 1;
           });
         }, 100);
       }
-    }, [props.withComponent]);
+    }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
     var renderVariant = function renderVariant(variant) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;