@majoo-ui/react 1.53.0 → 1.53.2

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -3922,7 +3922,10 @@ const ButtonTableMenu = {
   }
 };
 const StyledIcon$2 = styled('div', {
-  verticalAlign: 'middle'
+  verticalAlign: 'middle',
+  '& svg': {
+    verticalAlign: 'middle'
+  }
 });
 const StyledIconLeft$4 = styled('div', {
   marginRight: '$spacing-03',
@@ -6303,18 +6306,39 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
+  const textareaRef = useRef(null);
+  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.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
     }
   }));
 });
@@ -6533,7 +6557,7 @@ const InputRadio = _ref => {
             letterSpacing: '$long-content-regular',
             fontWeight: '400',
             cursor: 'pointer',
-            color: disabled || readOnly ? '$textDisable' : '$textPrimary'
+            color: disabled || readOnly && checked !== props.value ? '$textDisable' : '$textPrimary'
           },
           __self: this,
           __source: {
@@ -6755,6 +6779,9 @@ const StyledInput = styled(NumberFormat, {
       sm: {
         height: 32
       },
+      md: {
+        height: 36
+      },
       lg: {
         height: 40
       }
@@ -6810,7 +6837,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 147,
+      lineNumber: 150,
       columnNumber: 3
     }
   }));
@@ -9157,7 +9184,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-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,
@@ -9411,7 +9438,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     showSelectedTag,
     unremovableTags,
     helperText,
-    css
+    css,
+    showCounter,
+    labelCounter
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9534,12 +9563,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     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);
+        }
       }
     }
   };
@@ -9658,7 +9696,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 507,
+      lineNumber: 517,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9668,7 +9706,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 508,
+      lineNumber: 518,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9683,7 +9721,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 509,
+      lineNumber: 519,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9699,7 +9737,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 519,
+      lineNumber: 529,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9712,7 +9750,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 525,
+      lineNumber: 535,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9723,7 +9761,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 535,
+      lineNumber: 545,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9731,7 +9769,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 540,
+      lineNumber: 550,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9744,15 +9782,15 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 544,
+      lineNumber: 554,
       columnNumber: 11
     }
-  }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__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.createElement(Tag, _extends({
@@ -9776,10 +9814,45 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 553,
+      lineNumber: 563,
       columnNumber: 17
     }
-  }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+    disabled: disabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 585,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__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.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -9788,7 +9861,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 574,
+      lineNumber: 606,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9797,7 +9870,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 579,
+      lineNumber: 611,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9815,7 +9888,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 582,
+      lineNumber: 614,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9828,7 +9901,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 595,
+      lineNumber: 627,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9836,7 +9909,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(CheckOutline, {
@@ -9844,21 +9917,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 615,
+      lineNumber: 647,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 617,
+      lineNumber: 649,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -9868,7 +9941,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 620,
+      lineNumber: 652,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9881,14 +9954,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 625,
+      lineNumber: 657,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 626,
+      lineNumber: 658,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9898,7 +9971,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 627,
+      lineNumber: 659,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9910,7 +9983,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 628,
+      lineNumber: 660,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -9935,7 +10008,9 @@ InputSelectCheck.propTypes = {
   selectAllLabel: PropTypes.string,
   showSelectedTag: PropTypes.bool,
   css: PropTypes.object,
-  helperText: PropTypes.string
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -9951,7 +10026,9 @@ InputSelectCheck.defaultProps = {
   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";
@@ -9984,7 +10061,9 @@ InputSelectTag.propTypes = {
   unremovableTags: PropTypes.arrayOf(PropTypes.string),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
-  helperText: PropTypes.string
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string
 };
 InputSelectTag.defaultProps = {
   placeholder: 'Select Item',
@@ -9998,7 +10077,9 @@ InputSelectTag.defaultProps = {
   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";
@@ -10869,6 +10950,20 @@ const Button = styled(Button$3, {
           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'
+      }
     }
   }
 });
@@ -10886,7 +10981,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     disabledIncrement,
     disabledDecrement,
     prefix,
-    suffix
+    suffix,
+    size
   } = props;
   const [inputValue, setInputValue] = useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0);
   useEffect(() => {
@@ -10936,6 +11032,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       type: "button",
       disabled: disabled || disabledDecrement,
       buttonType: "secondary",
+      buttonSize: size,
       counterType: "minus",
       icon: true,
       onClick: handleDown
@@ -10952,11 +11049,13 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       allowNegative: allowNegative,
       onChange: handleChange,
       prefix: prefix,
-      suffix: suffix
+      suffix: suffix,
+      size: size
     }, void 0), jsx(Button, Object.assign({
       type: "button",
       disabled: disabled || disabledIncrement,
       buttonType: "secondary",
+      buttonSize: size,
       counterType: "plus",
       icon: true,
       onClick: handleUp
@@ -10970,7 +11069,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InputCounter.defaultProps = {
   allowNegative: false,
-  disabled: false
+  disabled: false,
+  size: 'lg'
 };
 
 const _excluded$c = ["children"];
@@ -11643,7 +11743,15 @@ const StyledList = styled(TabsPrimitive.List, {
   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.Trigger, {
   all: 'unset',
@@ -11710,6 +11818,47 @@ const StyledContent$5 = styled(TabsPrimitive.Content, {
   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
@@ -11725,7 +11874,7 @@ const Tabs$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 108,
+      lineNumber: 162,
       columnNumber: 5
     }
   }), addPropsToChildren(children, {
@@ -11739,16 +11888,94 @@ const TabsList$1 = _ref2 => {
   } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-  return /*#__PURE__*/React__default.createElement(StyledList, _extends({}, props, {
+  const [listContainerScrollPosition, setlistContainerScrollPosition] = useState(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const listContainerRef = useRef();
+  useLayoutEffect(() => {
+    if (listContainerRef && listContainerRef.current) {
+      setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+    }
+  }, [listContainerRef, activeTabs]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    css: {
+      position: 'relative'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 121,
-      columnNumber: 10
+      lineNumber: 184,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__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.createElement(ScrollButtonContainer, {
+    position: "left",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 189,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.createElement(ChevronLgLeftOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 198,
+      columnNumber: 13
+    }
+  }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
+    position: "right",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 203,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.createElement(ChevronLgRightOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 212,
+      columnNumber: 13
+    }
+  }))));
 };
 const TabsTrigger$1 = _ref3 => {
   let {
@@ -11766,7 +11993,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 127,
+      lineNumber: 223,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11779,14 +12006,14 @@ const TabsTrigger$1 = _ref3 => {
       __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.createElement(Flex$1, {
@@ -11798,7 +12025,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 136,
+      lineNumber: 232,
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
@@ -11812,7 +12039,7 @@ const TabsContent$1 = _ref4 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 154,
+      lineNumber: 250,
       columnNumber: 58
     }
   }));
@@ -23571,12 +23798,12 @@ const Device = props => {
   };
 
   React.useEffect(() => {
-    if (props.withComponent) {
+    if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
       setTimeout(() => {
         setRender(prev => prev + 1);
       }, 100);
     }
-  }, [props.withComponent]);
+  }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
   const renderVariant = variant => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;