@majoo-ui/react 1.52.5 → 1.52.7

package/index.esm.js

@@ -4633,8 +4633,8 @@ const ContainerFallback = styled(Flex$1, {
   border: '2px dashed #C0C4C4',
   borderRadius: 8,
   backgroundColor: '$gray50',
-  minHeight: 120,
-  minWidth: 188,
+  height: 120,
+  width: 188,
   variants: {
     rounded: {
       true: {
@@ -6312,7 +6312,7 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps"];
+const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
 var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
@@ -6427,7 +6427,8 @@ const InputRadio = _ref => {
     disabled,
     css,
     inputType,
-    inputProps
+    inputProps,
+    description
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6439,7 +6440,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 124,
+            lineNumber: 125,
             columnNumber: 16
           }
         }));
@@ -6450,7 +6451,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 16
           }
         }));
@@ -6470,7 +6471,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 131,
+            lineNumber: 132,
             columnNumber: 11
           }
         }, props.label);
@@ -6481,7 +6482,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 150,
+      lineNumber: 151,
       columnNumber: 5
     }
   }, ({
@@ -6491,8 +6492,7 @@ const InputRadio = _ref => {
   }) => {
     const checked = value !== null && value !== void 0 ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$8, {
-      align: "center",
-      gap: 4,
+      direction: "column",
       outlined: outlined,
       disabled: disabled,
       active: outlined && checked === props.value && !disabled,
@@ -6500,9 +6500,18 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 155,
+        lineNumber: 156,
         columnNumber: 11
       }
+    }, /*#__PURE__*/React__default.createElement(Flex$1, {
+      align: "center",
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 163,
+        columnNumber: 13
+      }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
       disabled: disabled
@@ -6510,17 +6519,29 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
-        columnNumber: 13
+        lineNumber: 164,
+        columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 164,
+        lineNumber: 165,
+        columnNumber: 17
+      }
+    })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "caption",
+      color: "secondary",
+      css: {
+        marginTop: '10px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 171,
         columnNumber: 15
       }
-    })), renderInputType(inputType, checked));
+    }, description));
   });
 };
 InputRadio.propTypes = {
@@ -6530,7 +6551,8 @@ InputRadio.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  description: PropTypes.string
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -9017,41 +9039,6 @@ $$f({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var $$e = _export;
-var uncurryThis$f = functionUncurryThis;
-var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
-var toLength$2 = toLength$4;
-var toString$a = toString$h;
-var notARegExp = notARegexp;
-var requireObjectCoercible$5 = requireObjectCoercible$a;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-// eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
-var un$StartsWith = uncurryThis$f(''.startsWith);
-var stringSlice$7 = uncurryThis$f(''.slice);
-var min$2 = Math.min;
-
-var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
-// https://github.com/zloirock/core-js/pull/702
-var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
-  var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
-  return descriptor && !descriptor.writable;
-}();
-
-// `String.prototype.startsWith` method
-// https://tc39.es/ecma262/#sec-string.prototype.startswith
-$$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
-  startsWith: function startsWith(searchString /* , position = 0 */) {
-    var that = toString$a(requireObjectCoercible$5(this));
-    notARegExp(searchString);
-    var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-    var search = toString$a(searchString);
-    return un$StartsWith
-      ? un$StartsWith(that, search, index)
-      : stringSlice$7(that, index, index + search.length) === search;
-  }
-});
-
 var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
 
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
@@ -9197,6 +9184,10 @@ const Input$6 = styled('input', {
   outline: 'none',
   border: 'none',
   cursor: 'text',
+  color: '$textPrimary',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
   '&:disabled': {
     cursor: 'not-allowed'
   },
@@ -9299,7 +9290,6 @@ const ItemWrapper$1 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
-  flexWrap: 'wrap',
   maxWidth: '100%',
   cursor: 'pointer',
   alignItems: 'center',
@@ -9317,6 +9307,17 @@ const StyledDiv$1 = styled('div', {
   color: '$textDisable',
   display: 'inline-flex'
 });
+const IndeterminateFilled = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$primary500',
+  color: '$textWhite',
+  borderRadius: 3,
+  fontSize: 14,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
@@ -9448,7 +9449,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         return setItems(sortValue);
       }
     } else {
-      let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
+      let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
+        var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+
+        return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+      });
       setItems(filterItems);
     }
   };
@@ -9581,7 +9586,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 490,
+      lineNumber: 507,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9591,7 +9596,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 491,
+      lineNumber: 508,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9606,7 +9611,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 492,
+      lineNumber: 509,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9622,7 +9627,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 502,
+      lineNumber: 519,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9635,7 +9640,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 508,
+      lineNumber: 525,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9646,7 +9651,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 518,
+      lineNumber: 535,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9654,7 +9659,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 523,
+      lineNumber: 540,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9667,7 +9672,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 527,
+      lineNumber: 544,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9675,12 +9680,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 532,
+      lineNumber: 549,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
-    isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     disabled: disabled,
+    isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
     readOnly: readOnly,
     key: `selected-item-${index}`
@@ -9699,7 +9704,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 534,
+      lineNumber: 551,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9711,7 +9716,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 555,
+      lineNumber: 572,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9720,7 +9725,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 560,
+      lineNumber: 577,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9738,7 +9743,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 563,
+      lineNumber: 580,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9751,7 +9756,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 576,
+      lineNumber: 593,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9759,7 +9764,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 585,
+      lineNumber: 602,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9767,9 +9772,23 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 589,
+      lineNumber: 606,
       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: 613,
+      columnNumber: 25
+    }
+  }, "-") : /*#__PURE__*/React__default.createElement("div", {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 615,
+      columnNumber: 25
+    }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
     css: {
       backgroundColor: 'unset'
@@ -9777,7 +9796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 593,
+      lineNumber: 618,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9790,14 +9809,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 598,
+      lineNumber: 623,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 599,
+      lineNumber: 624,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9807,7 +9826,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 600,
+      lineNumber: 625,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9819,7 +9838,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 601,
+      lineNumber: 626,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -10333,6 +10352,41 @@ function InputResourceList({
   }), void 0);
 }
 
+var $$e = _export;
+var uncurryThis$f = functionUncurryThis;
+var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
+var toLength$2 = toLength$4;
+var toString$a = toString$h;
+var notARegExp = notARegexp;
+var requireObjectCoercible$5 = requireObjectCoercible$a;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+// eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
+var un$StartsWith = uncurryThis$f(''.startsWith);
+var stringSlice$7 = uncurryThis$f(''.slice);
+var min$2 = Math.min;
+
+var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
+// https://github.com/zloirock/core-js/pull/702
+var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+  var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
+  return descriptor && !descriptor.writable;
+}();
+
+// `String.prototype.startsWith` method
+// https://tc39.es/ecma262/#sec-string.prototype.startswith
+$$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+  startsWith: function startsWith(searchString /* , position = 0 */) {
+    var that = toString$a(requireObjectCoercible$5(this));
+    notARegExp(searchString);
+    var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
+    var search = toString$a(searchString);
+    return un$StartsWith
+      ? un$StartsWith(that, search, index)
+      : stringSlice$7(that, index, index + search.length) === search;
+  }
+});
+
 const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
     options: items = [],
@@ -19264,6 +19318,7 @@ function AlertDialog(props) {
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     },
@@ -19280,7 +19335,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 238,
+      lineNumber: 240,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19288,7 +19343,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 239,
+      lineNumber: 241,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -19302,7 +19357,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 242,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19310,7 +19365,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 242,
+      lineNumber: 244,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19325,7 +19380,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 243,
+      lineNumber: 245,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -19333,7 +19388,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 256,
+      lineNumber: 258,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19349,7 +19404,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 257,
+      lineNumber: 259,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19357,7 +19412,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 271,
+      lineNumber: 273,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19372,7 +19427,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 272,
+      lineNumber: 274,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -27222,7 +27277,8 @@ const Required$2 = styled('span', {
 function EditableTableMobile(props) {
   const {
     instance,
-    emptyDataMessage
+    emptyDataMessage,
+    showCheckbox
   } = props;
   const {
     getTableProps,
@@ -27246,17 +27302,21 @@ function EditableTableMobile(props) {
           });
           return /*#__PURE__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             key: index
-          }), visibleHeaders.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
-            style: {
-              minWidth: column.minWidth,
-              width: column.width,
-              maxWidth: column.maxWidth
-            }
-          }), {
-            key: index
-          }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
-            children: "*"
-          }, void 0) : '')));
+          }), visibleHeaders.map((column, index) => {
+            const isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
+            const isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
+            return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
+              style: {
+                minWidth: column.minWidth,
+                width: isSelector ? 10 : column.width,
+                maxWidth: isSelector ? 10 : column.maxWidth
+              }
+            }), {
+              key: index
+            }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
+              children: "*"
+            }, void 0) : '');
+          }));
         })
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
@@ -27265,17 +27325,21 @@ function EditableTableMobile(props) {
             children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
               key: `row_mobile_${index}`
             }), row.cells.map((cell, index) => {
-              return cell.column.isMobileHeader && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
+              var _a, _b;
+
+              const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+              const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+              return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
                 style: {
                   minWidth: cell.column.minWidth,
-                  width: cell.column.width,
-                  maxWidth: cell.column.maxWidth
+                  width: isSelector ? 10 : cell.column.width,
+                  maxWidth: isSelector ? 10 : cell.column.maxWidth
                 }
               }), {
                 key: index
               }), jsxs(Flex$1, Object.assign({
-                justify: "between",
                 align: "center",
+                justify: "between",
                 css: {
                   cursor: 'pointer',
                   minHeight: 40
@@ -27283,7 +27347,7 @@ function EditableTableMobile(props) {
               }, {
                 children: [jsx(Box, {
                   children: cell.render('Cell')
-                }, void 0), jsx(Flex$1, Object.assign({
+                }, void 0), !isSelector && jsx(Flex$1, Object.assign({
                   justify: "center",
                   align: "center",
                   onClick: () => {
@@ -27302,7 +27366,7 @@ function EditableTableMobile(props) {
               css: {
                 backgroundColor: '$gray50'
               }
-            }), jsx(TableCellCollapse, {
+            }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
               children: jsx(Collapalse, Object.assign({
                 isOpen: row.isExpanded
               }, {
@@ -27317,10 +27381,12 @@ function EditableTableMobile(props) {
 
                     return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
                   }).map((cell, index) => {
-                    var _a, _b;
+                    var _a, _b, _c, _d;
 
                     const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                    return !cell.column.isMobileHeader && jsx(Flex$1, Object.assign({
+                    const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                    const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                    return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
                       direction: "column",
                       justify: "center",
                       css: {
@@ -27346,7 +27412,7 @@ function EditableTableMobile(props) {
                             color: "secondary"
                           }, {
                             children: typeof headerRender === 'string' ? jsxs(Fragment, {
-                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsx(Required$2, {
+                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsx(Required$2, {
                                 children: "*"
                               }, void 0) : '']
                             }, void 0) : headerRender
@@ -27524,7 +27590,6 @@ const VariantItem = styled('p', {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: 60,
   textAlign: 'center',
   margin: 0,
   '@md': {
@@ -27686,21 +27751,87 @@ function EditableTable(props) {
     emptyDataMessage,
     rowHeight,
     align,
-    customRows
+    customRows,
+    showCheckbox,
+    onSelectedChange,
+    getCheckboxProps,
+    keyId = 'id',
+    selectedIds
   } = props;
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const IndeterminateCheckbox = props => {
+    function handleCheckedChange(checked) {
+      props === null || props === void 0 ? void 0 : props.onChange({
+        target: {
+          checked
+        }
+      });
+      setSelectedIndex(Object.assign({}, props));
+    }
+
+    return jsx(InputCheckbox, Object.assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+      onCheckedChange: handleCheckedChange
+    }), void 0);
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+
+    if (selectedIds) {
+      Object.assign(initialState, {
+        selectedRowIds: selectedIds
+      });
+    }
+
+    return Object.keys(initialState).length > 0 ? initialState : undefined;
+  };
+
   const instance = useTable({
     columns,
     data,
-    autoResetExpanded: false
-  }, useExpanded);
+    initialState: getInitialState(),
+    autoResetExpanded: false,
+    getRowId: row => row[keyId] || JSON.stringify(row)
+  }, useExpanded, useRowSelect, hooks => {
+    showCheckbox && hooks.visibleColumns.push(columns => {
+      return [{
+        id: 'selection',
+        Header: ({
+          getToggleAllRowsSelectedProps
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: "header"
+        }, getToggleAllRowsSelectedProps()), void 0),
+        Cell: ({
+          row
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: row
+        }, row.getToggleRowSelectedProps()), void 0),
+        width: 30
+      }, ...columns];
+    });
+  });
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
-    visibleColumns
+    visibleColumns,
+    state: {
+      selectedRowIds
+    }
   } = instance;
+  useEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+      const selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+      onSelectedChange({
+        selected,
+        row: selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.row,
+        state: !(selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.checked)
+      });
+    }
+  }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
   const isDesktop = useMediaQuery('(min-width: 767px)');
   return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
@@ -27854,7 +27985,8 @@ function EditableTable(props) {
   }), void 0) : jsx(EditableTableMobile, {
     css: props === null || props === void 0 ? void 0 : props.css,
     instance: instance,
-    emptyDataMessage: emptyDataMessage
+    emptyDataMessage: emptyDataMessage,
+    showCheckbox: showCheckbox
   }, void 0);
 }