@majoo-ui/react 1.52.5 → 1.52.7

package/index.umd.js

@@ -4713,8 +4713,8 @@
     border: '2px dashed #C0C4C4',
     borderRadius: 8,
     backgroundColor: '$gray50',
-    minHeight: 120,
-    minWidth: 188,
+    height: 120,
+    width: 188,
     variants: {
       rounded: {
         true: {
@@ -6392,7 +6392,7 @@
   };
   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',
@@ -6507,7 +6507,8 @@
       disabled,
       css,
       inputType,
-      inputProps
+      inputProps,
+      description
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6519,7 +6520,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 124,
+              lineNumber: 125,
               columnNumber: 16
             }
           }));
@@ -6530,7 +6531,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 127,
+              lineNumber: 128,
               columnNumber: 16
             }
           }));
@@ -6550,7 +6551,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 131,
+              lineNumber: 132,
               columnNumber: 11
             }
           }, props.label);
@@ -6561,7 +6562,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 5
       }
     }, ({
@@ -6571,8 +6572,7 @@
     }) => {
       const checked = value !== null && value !== void 0 ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
-        align: "center",
-        gap: 4,
+        direction: "column",
         outlined: outlined,
         disabled: disabled,
         active: outlined && checked === props.value && !disabled,
@@ -6580,9 +6580,18 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 155,
+          lineNumber: 156,
           columnNumber: 11
         }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        align: "center",
+        gap: 4,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$E,
+          lineNumber: 163,
+          columnNumber: 13
+        }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
         id: id,
         disabled: disabled
@@ -6590,17 +6599,29 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 163,
-          columnNumber: 13
+          lineNumber: 164,
+          columnNumber: 15
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 164,
+          lineNumber: 165,
+          columnNumber: 17
+        }
+      })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default["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 = {
@@ -6610,7 +6631,8 @@
     label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
     css: PropTypes__default["default"].object,
     inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
-    onChange: PropTypes__default["default"].func
+    onChange: PropTypes__default["default"].func,
+    description: PropTypes__default["default"].string
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -9154,41 +9176,6 @@
     }
   });
 
-  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__namespace.createElement("svg", _extends({
@@ -9334,6 +9321,10 @@
     outline: 'none',
     border: 'none',
     cursor: 'text',
+    color: '$textPrimary',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
     '&:disabled': {
       cursor: 'not-allowed'
     },
@@ -9436,7 +9427,6 @@
     display: 'flex',
     position: 'relative',
     flex: 'auto',
-    flexWrap: 'wrap',
     maxWidth: '100%',
     cursor: 'pointer',
     alignItems: 'center',
@@ -9454,6 +9444,17 @@
     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__*/React.forwardRef((_ref, ref) => {
     let {
       placeholder,
@@ -9585,7 +9586,11 @@
           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);
       }
     };
@@ -9718,7 +9723,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 490,
+        lineNumber: 507,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9728,7 +9733,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 491,
+        lineNumber: 508,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9743,7 +9748,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 492,
+        lineNumber: 509,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9759,7 +9764,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 502,
+        lineNumber: 519,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9772,7 +9777,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 525,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9783,7 +9788,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 518,
+        lineNumber: 535,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9791,7 +9796,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 523,
+        lineNumber: 540,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9804,7 +9809,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 527,
+        lineNumber: 544,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9812,12 +9817,12 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 532,
+        lineNumber: 549,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["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}`
@@ -9836,7 +9841,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 534,
+        lineNumber: 551,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9848,7 +9853,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 555,
+        lineNumber: 572,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9857,7 +9862,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 560,
+        lineNumber: 577,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9875,7 +9880,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 563,
+        lineNumber: 580,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9888,7 +9893,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 576,
+        lineNumber: 593,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9896,7 +9901,7 @@
       __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["default"].createElement(CheckOutline, {
@@ -9904,9 +9909,23 @@
       __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["default"].createElement(IndeterminateFilled, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 613,
+        columnNumber: 25
+      }
+    }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 615,
+        columnNumber: 25
+      }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
       css: {
         backgroundColor: 'unset'
@@ -9914,7 +9933,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 593,
+        lineNumber: 618,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9927,14 +9946,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 598,
+        lineNumber: 623,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 599,
+        lineNumber: 624,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9944,7 +9963,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 600,
+        lineNumber: 625,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9956,7 +9975,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 601,
+        lineNumber: 626,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10496,6 +10515,41 @@
     }), 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;
+    }
+  });
+
   var InputCombobox = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.options,
         items = _b === void 0 ? [] : _b,
@@ -19603,6 +19657,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      paragraph: "longContentRegular",
       css: {
         textAlign: 'justify'
       },
@@ -19619,7 +19674,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 238,
+        lineNumber: 240,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19627,7 +19682,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 239,
+        lineNumber: 241,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -19641,7 +19696,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 242,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19649,7 +19704,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 242,
+        lineNumber: 244,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19664,7 +19719,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 243,
+        lineNumber: 245,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -19672,7 +19727,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 256,
+        lineNumber: 258,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19688,7 +19743,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 257,
+        lineNumber: 259,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19696,7 +19751,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 271,
+        lineNumber: 273,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19711,7 +19766,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 272,
+        lineNumber: 274,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -27607,7 +27662,8 @@
   });
   function EditableTableMobile(props) {
     var instance = props.instance,
-        emptyDataMessage = props.emptyDataMessage;
+        emptyDataMessage = props.emptyDataMessage,
+        showCheckbox = props.showCheckbox;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -27629,11 +27685,13 @@
             return /*#__PURE__*/React.createElement(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
               key: index
             }), visibleHeaders.map(function (column, index) {
-              return (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
+              var isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
+              var isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
+              return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
                 style: {
                   minWidth: column.minWidth,
-                  width: column.width,
-                  maxWidth: column.maxWidth
+                  width: isSelector ? 10 : column.width,
+                  maxWidth: isSelector ? 10 : column.maxWidth
                 }
               }), {
                 key: index
@@ -27649,17 +27707,21 @@
               children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
                 key: "row_mobile_".concat(index)
               }), row.cells.map(function (cell, index) {
-                return cell.column.isMobileHeader && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
+                var _a, _b;
+
+                var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+                var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+                return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __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
                 }), jsxRuntime.jsxs(Flex$1, __assign({
-                  justify: "between",
                   align: "center",
+                  justify: "between",
                   css: {
                     cursor: 'pointer',
                     minHeight: 40
@@ -27667,7 +27729,7 @@
                 }, {
                   children: [jsxRuntime.jsx(Box, {
                     children: cell.render('Cell')
-                  }, void 0), jsxRuntime.jsx(Flex$1, __assign({
+                  }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
                     justify: "center",
                     align: "center",
                     onClick: function () {
@@ -27686,7 +27748,7 @@
                 css: {
                   backgroundColor: '$gray50'
                 }
-              }), jsxRuntime.jsx(TableCellCollapse, {
+              }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
                 children: jsxRuntime.jsx(Collapalse, __assign({
                   isOpen: row.isExpanded
                 }, {
@@ -27701,10 +27763,12 @@
 
                       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(function (cell, index) {
-                      var _a, _b;
+                      var _a, _b, _c, _d;
 
                       var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                      return !cell.column.isMobileHeader && jsxRuntime.jsx(Flex$1, __assign({
+                      var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                      var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                      return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
                         direction: "column",
                         justify: "center",
                         css: {
@@ -27730,7 +27794,7 @@
                               color: "secondary"
                             }, {
                               children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.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) ? jsxRuntime.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) ? jsxRuntime.jsx(Required$2, {
                                   children: "*"
                                 }, void 0) : '']
                               }, void 0) : headerRender
@@ -27908,7 +27972,6 @@
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    maxWidth: 60,
     textAlign: 'center',
     margin: 0,
     '@md': {
@@ -28071,18 +28134,90 @@
         emptyDataMessage = props.emptyDataMessage,
         rowHeight = props.rowHeight,
         align = props.align,
-        customRows = props.customRows;
+        customRows = props.customRows,
+        showCheckbox = props.showCheckbox,
+        onSelectedChange = props.onSelectedChange,
+        getCheckboxProps = props.getCheckboxProps,
+        _a = props.keyId,
+        keyId = _a === void 0 ? 'id' : _a,
+        selectedIds = props.selectedIds;
+
+    var _b = React.useState(null),
+        selectedIndex = _b[0],
+        setSelectedIndex = _b[1];
+
+    var IndeterminateCheckbox = function IndeterminateCheckbox(props) {
+      function handleCheckedChange(checked) {
+        props === null || props === void 0 ? void 0 : props.onChange({
+          target: {
+            checked: checked
+          }
+        });
+        setSelectedIndex(__assign({}, props));
+      }
+
+      return jsxRuntime.jsx(InputCheckbox, __assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+        onCheckedChange: handleCheckedChange
+      }), void 0);
+    };
+
+    var getInitialState = function getInitialState() {
+      var initialState = {};
+
+      if (selectedIds) {
+        Object.assign(initialState, {
+          selectedRowIds: selectedIds
+        });
+      }
+
+      return Object.keys(initialState).length > 0 ? initialState : undefined;
+    };
+
     var instance = reactTable.useTable({
       columns: columns,
       data: data,
-      autoResetExpanded: false
-    }, reactTable.useExpanded);
+      initialState: getInitialState(),
+      autoResetExpanded: false,
+      getRowId: function (row) {
+        return row[keyId] || JSON.stringify(row);
+      }
+    }, reactTable.useExpanded, reactTable.useRowSelect, function (hooks) {
+      showCheckbox && hooks.visibleColumns.push(function (columns) {
+        return __spreadArray([{
+          id: 'selection',
+          Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              row: "header"
+            }, getToggleAllRowsSelectedProps()), void 0);
+          },
+          Cell: function (_a) {
+            var row = _a.row;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              row: row
+            }, row.getToggleRowSelectedProps()), void 0);
+          },
+          width: 30
+        }], columns, true);
+      });
+    });
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
         rows = instance.rows,
         prepareRow = instance.prepareRow,
-        visibleColumns = instance.visibleColumns;
+        visibleColumns = instance.visibleColumns,
+        selectedRowIds = instance.state.selectedRowIds;
+    React.useEffect(function () {
+      if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+        var selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+        onSelectedChange({
+          selected: 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]);
     var isDesktop = useMediaQuery('(min-width: 767px)');
     return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
@@ -28246,7 +28381,8 @@
     }), void 0) : jsxRuntime.jsx(EditableTableMobile, {
       css: props === null || props === void 0 ? void 0 : props.css,
       instance: instance,
-      emptyDataMessage: emptyDataMessage
+      emptyDataMessage: emptyDataMessage,
+      showCheckbox: showCheckbox
     }, void 0);
   }