@majoo-ui/react 1.52.6 → 1.52.8

package/index.umd.js

@@ -3926,6 +3926,20 @@
       border: '1px solid $textRed'
     }
   };
+  var ButtonNegativeGhost = {
+    backgroundColor: '$btnSecondary',
+    color: '$textRed',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$red50',
+      outline: '1px solid $red50',
+      color: '$textRed'
+    },
+    '&:active': {
+      backgroundColor: '$red100',
+      outline: '1px solid $btnNegative'
+    }
+  };
   var ButtonHeaderMenu = {
     backgroundColor: '$bgWhite',
     border: '1px solid $bgBorder',
@@ -4015,6 +4029,7 @@
         ghost: __assign({}, GhostButton),
         negative: __assign({}, ButtonNegative),
         'negative-secondary': __assign({}, ButtonNegativeSecondary),
+        'negative-ghost': __assign({}, ButtonNegativeGhost),
         headerMenu: __assign({}, ButtonHeaderMenu),
         tableMenu: __assign({}, ButtonTableMenu)
       },
@@ -9322,11 +9337,11 @@
     border: 'none',
     cursor: 'text',
     color: '$textPrimary',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
     '&:disabled': {
-      cursor: 'not-allowed',
-      '&::placeholder': {
-        color: '$textDisable'
-      }
+      cursor: 'not-allowed'
     },
     variants: {
       hiddden: {
@@ -9444,6 +9459,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,
@@ -9712,7 +9738,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 495,
+        lineNumber: 507,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9722,7 +9748,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 496,
+        lineNumber: 508,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9737,7 +9763,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 497,
+        lineNumber: 509,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9753,7 +9779,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 507,
+        lineNumber: 519,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9766,7 +9792,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 513,
+        lineNumber: 525,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9777,7 +9803,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 523,
+        lineNumber: 535,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9785,7 +9811,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 528,
+        lineNumber: 540,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9798,7 +9824,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 532,
+        lineNumber: 544,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9806,7 +9832,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 537,
+        lineNumber: 549,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -9830,7 +9856,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 539,
+        lineNumber: 551,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9842,7 +9868,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 560,
+        lineNumber: 572,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9851,7 +9877,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 565,
+        lineNumber: 577,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9869,7 +9895,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 568,
+        lineNumber: 580,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9882,7 +9908,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 581,
+        lineNumber: 593,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9890,7 +9916,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 590,
+        lineNumber: 602,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9898,9 +9924,23 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 594,
+        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'
@@ -9908,7 +9948,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 598,
+        lineNumber: 618,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9921,14 +9961,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 603,
+        lineNumber: 623,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 604,
+        lineNumber: 624,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9938,7 +9978,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 605,
+        lineNumber: 625,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9950,7 +9990,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 606,
+        lineNumber: 626,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10299,6 +10339,17 @@
     value: ''
   };
 
+  var SortingIcon = styled('div', {
+    marginTop: 1,
+    cursor: 'pointer',
+    '&::after': {
+      size: '16px',
+      content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
+      margin: '0 $spacing-02 $spacing-01 0',
+      opacity: 1
+    }
+  });
+
   function InputResourceList(_a) {
     var data = _a.data,
         _b = _a.disabled,
@@ -10315,7 +10366,8 @@
         value = _a.value,
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
-        css = _a.css;
+        css = _a.css,
+        defaultSort = _a.defaultSort;
 
     var _f = React.useState([]),
         checkedResources = _f[0],
@@ -10325,6 +10377,10 @@
         query = _g[0],
         setQuery = _g[1];
 
+    var _h = React.useState('asc'),
+        sortType = _h[0],
+        setSortType = _h[1];
+
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
       var _a;
@@ -10333,6 +10389,11 @@
         top: 0
       });
     }, [query]);
+    React.useEffect(function () {
+      if (defaultSort) {
+        setSortType(defaultSort);
+      }
+    }, [defaultSort]);
 
     var renderCheckbox = function renderCheckbox(resource, index) {
       var _a;
@@ -10340,32 +10401,163 @@
       var isDisabled = enabledItems && (!enabledItems.find(function (id) {
         return id === resource.value;
       }) || enabledItems.length === 0);
-      return jsxRuntime.jsx(InputCheckbox, {
-        label: jsxRuntime.jsxs(Flex$1, __assign({
-          gap: 3
-        }, {
-          children: [jsxRuntime.jsx(Paragraph, __assign({
-            paragraph: "longContentRegular"
+      return jsxRuntime.jsxs(Flex$1, __assign({
+        direction: "column",
+        gap: 1
+      }, {
+        children: [jsxRuntime.jsx(InputCheckbox, {
+          label: jsxRuntime.jsxs(Flex$1, __assign({
+            gap: 3
           }, {
-            children: resource.label
-          }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map(function (variant, index) {
-            return jsxRuntime.jsx(Tag, __assign({
-              type: "varian",
-              size: "lg",
-              css: {
-                color: disabled || isDisabled ? '$textDisable' : '$textGreen'
-              }
+            children: [jsxRuntime.jsx(Paragraph, __assign({
+              paragraph: "longContentRegular"
             }, {
-              children: variant
-            }), index);
-          })]
-        }), void 0),
-        index: index,
-        value: resource.value,
-        disabled: isDisabled
-      }, "".concat(resource.value, "-").concat(new Date().toISOString()));
+              children: resource.label
+            }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map(function (variant, index) {
+              return jsxRuntime.jsx(Tag, __assign({
+                type: "varian",
+                size: "lg",
+                css: {
+                  color: disabled || isDisabled ? '$textDisable' : '$textGreen'
+                }
+              }, {
+                children: variant
+              }), index);
+            })]
+          }), void 0),
+          index: index,
+          value: resource.value,
+          disabled: isDisabled
+        }, void 0), (resource === null || resource === void 0 ? void 0 : resource.description) && jsxRuntime.jsx(Paragraph, __assign({
+          css: {
+            fontSize: 12,
+            paddingLeft: 30
+          },
+          color: "secondary"
+        }, {
+          children: resource === null || resource === void 0 ? void 0 : resource.description
+        }), void 0)]
+      }), "".concat(resource.value, "-").concat(new Date().toISOString()));
     };
 
+    function sorting(data, type) {
+      function ascending(a, b) {
+        if (a.label < b.label) {
+          return -1;
+        }
+
+        if (a.label > b.label) {
+          return 1;
+        }
+
+        return 0;
+      }
+
+      function descending(a, b) {
+        if (a.label > b.label) {
+          return -1;
+        }
+
+        if (a.label < b.label) {
+          return 1;
+        }
+
+        return 0;
+      }
+
+      switch (type) {
+        case 'asc':
+          return data.sort(ascending);
+
+        case 'desc':
+          return data.sort(descending);
+
+        default:
+          return data;
+      }
+    }
+
+    function toggleSort() {
+      setSortType(sortType === 'asc' ? 'desc' : 'asc');
+    }
+
+    function renderWithoutSorting() {
+      return jsxRuntime.jsxs(Flex$1, __assign({
+        direction: "column",
+        gap: 3
+      }, {
+        children: [jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck((value || checkedResources)[index]);
+            if (!value) setCheckedResources(function (current) {
+              return current.filter(function (currItem) {
+                return currItem.value !== checkedResources[index].value;
+              });
+            });
+          },
+          value: (value || checkedResources).map(function (item) {
+            return item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: (value || checkedResources).map(renderCheckbox)
+        }), void 0), jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data[index]);
+            if (!value) setCheckedResources(function (current) {
+              return __spreadArray(__spreadArray([], current, true), [data[index]], false);
+            });
+          },
+          value: (value || checkedResources).map(function (item) {
+            return item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: data.map(renderCheckbox)
+        }), void 0)]
+      }), void 0);
+    }
+
+    function renderWithSorting() {
+      var datasets = sorting(data, sortType);
+      return jsxRuntime.jsx(Flex$1, __assign({
+        direction: "column",
+        gap: 3
+      }, {
+        children: jsxRuntime.jsx(CheckboxGroup, __assign({
+          onChange: function (_, index) {
+            if (value === null || value === void 0 ? void 0 : value.some(function (val) {
+              var _a;
+
+              return (val === null || val === void 0 ? void 0 : val.value) === ((_a = datasets[index]) === null || _a === void 0 ? void 0 : _a.value);
+            })) {
+              onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(datasets[index]);
+            } else {
+              onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(datasets[index]);
+            }
+          },
+          value: value === null || value === void 0 ? void 0 : value.map(function (item) {
+            return item === null || item === void 0 ? void 0 : item.value;
+          }),
+          disabled: disabled
+        }, {
+          children: datasets.map(renderCheckbox)
+        }), void 0)
+      }), void 0);
+    }
+
+    function toggleCheckAll() {
+      if ((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length) || (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length)) {
+        for (var i = 0; i < (value === null || value === void 0 ? void 0 : value.length); i++) {
+          onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(value === null || value === void 0 ? void 0 : value[i]);
+        }
+      } else {
+        for (var i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i++) {
+          onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data === null || data === void 0 ? void 0 : data[i]);
+        }
+      }
+    }
+
     return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
         position: 'relative'
@@ -10379,7 +10571,26 @@
           onQueryChange(query);
         }, 1000),
         disabled: disabled
-      }, void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
+      }, void 0), defaultSort && jsxRuntime.jsxs(Flex$1, __assign({
+        align: "center",
+        gap: 4,
+        css: {
+          paddingLeft: 16,
+          marginTop: '$spacing-04'
+        }
+      }, {
+        children: [jsxRuntime.jsx(InputCheckbox, {
+          checked: (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length),
+          indeterminate: Boolean((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length)),
+          onCheckedChange: toggleCheckAll
+        }, void 0), jsxRuntime.jsx(Paragraph, __assign({
+          paragraph: "shortContentBold"
+        }, {
+          children: "DATA TITLE"
+        }), void 0), jsxRuntime.jsx(SortingIcon, {
+          onClick: toggleSort
+        }, void 0)]
+      }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
         justify: "center",
         align: "center",
         css: {
@@ -10440,40 +10651,7 @@
             }), void 0);
           }
         }, {
-          children: jsxRuntime.jsxs(Flex$1, __assign({
-            direction: "column",
-            gap: 3
-          }, {
-            children: [jsxRuntime.jsx(CheckboxGroup, __assign({
-              onChange: function (_, index) {
-                onItemUncheck((value || checkedResources)[index]);
-                if (!value) setCheckedResources(function (current) {
-                  return current.filter(function (currItem) {
-                    return currItem.value !== checkedResources[index].value;
-                  });
-                });
-              },
-              value: (value || checkedResources).map(function (item) {
-                return item.value;
-              }),
-              disabled: disabled
-            }, {
-              children: (value || checkedResources).map(renderCheckbox)
-            }), void 0), jsxRuntime.jsx(CheckboxGroup, __assign({
-              onChange: function (_, index) {
-                onItemCheck(data[index]);
-                if (!value) setCheckedResources(function (current) {
-                  return __spreadArray(__spreadArray([], current, true), [data[index]], false);
-                });
-              },
-              value: (value || checkedResources).map(function (item) {
-                return item.value;
-              }),
-              disabled: disabled
-            }, {
-              children: data.map(renderCheckbox)
-            }), void 0)]
-          }), void 0)
+          children: defaultSort ? renderWithSorting() : renderWithoutSorting()
         }), void 0)]
       }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box, __assign({
         css: {
@@ -15813,7 +15991,8 @@
     disabled,
     readOnly,
     minDate,
-    maxDate
+    maxDate,
+    isInvalid
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
     const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15829,10 +16008,11 @@
       disabled: disabled,
       onClick: handleChange,
       readOnly: readOnly,
+      isInvalid: isInvalid,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -15840,14 +16020,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 42,
+          lineNumber: 43,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -15860,7 +16040,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 7
       }
     }));
@@ -15876,7 +16056,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 55,
+        lineNumber: 56,
         columnNumber: 5
       }
     });
@@ -15888,7 +16068,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 67,
+        lineNumber: 68,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15896,14 +16076,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 69,
+        lineNumber: 70,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 71,
+        lineNumber: 72,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15911,14 +16091,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 72,
+        lineNumber: 73,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 7
       }
     }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15926,7 +16106,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15936,7 +16116,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15947,7 +16127,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 81,
+        lineNumber: 82,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15959,7 +16139,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -16021,8 +16201,13 @@
 
     /**
          Specify the maximum date.
-        */
-    maxDate: PropTypes__default["default"].instanceOf(Date)
+    */
+    maxDate: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+     * Invalid state input.
+     */
+    isInvalid: PropTypes__default["default"].bool
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
@@ -16437,7 +16622,8 @@
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
         maxDate = _a.maxDate,
-        readOnly = _a.readOnly;
+        readOnly = _a.readOnly,
+        isInvalid = _a.isInvalid;
 
     var _f = React.useState(date || dateValue),
         value = _f[0],
@@ -16485,7 +16671,8 @@
         disabled: disabled,
         readOnly: readOnly,
         onClick: handleChange,
-        size: size
+        size: size,
+        isInvalid: isInvalid
       }, {
         children: [jsxRuntime.jsx(InputLeftElement, {
           children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
@@ -27637,7 +27824,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,
@@ -27659,11 +27847,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
@@ -27679,17 +27869,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
@@ -27697,7 +27891,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 () {
@@ -27716,7 +27910,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
                 }, {
@@ -27731,10 +27925,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: {
@@ -27760,7 +27956,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
@@ -28154,7 +28350,7 @@
           Header: function (_a) {
             var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps;
             return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
-              index: "header"
+              row: "header"
             }, getToggleAllRowsSelectedProps()), void 0);
           },
           Cell: function (_a) {
@@ -28347,7 +28543,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);
   }