@majoo-ui/react 1.52.6 → 1.52.8

package/index.esm.js

@@ -3847,6 +3847,20 @@ const ButtonNegativeSecondary = {
     border: '1px solid $textRed'
   }
 };
+const ButtonNegativeGhost = {
+  backgroundColor: '$btnSecondary',
+  color: '$textRed',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$red50',
+    outline: '1px solid $red50',
+    color: '$textRed'
+  },
+  '&:active': {
+    backgroundColor: '$red100',
+    outline: '1px solid $btnNegative'
+  }
+};
 const ButtonHeaderMenu = {
   backgroundColor: '$bgWhite',
   border: '1px solid $bgBorder',
@@ -3936,6 +3950,7 @@ const ButtonPrimitive = styled('button', {
       ghost: Object.assign({}, GhostButton),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
+      'negative-ghost': Object.assign({}, ButtonNegativeGhost),
       headerMenu: Object.assign({}, ButtonHeaderMenu),
       tableMenu: Object.assign({}, ButtonTableMenu)
     },
@@ -9185,11 +9200,11 @@ const Input$6 = styled('input', {
   border: 'none',
   cursor: 'text',
   color: '$textPrimary',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
   '&:disabled': {
-    cursor: 'not-allowed',
-    '&::placeholder': {
-      color: '$textDisable'
-    }
+    cursor: 'not-allowed'
   },
   variants: {
     hiddden: {
@@ -9307,6 +9322,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,
@@ -9575,7 +9601,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 495,
+      lineNumber: 507,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9585,7 +9611,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 496,
+      lineNumber: 508,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9600,7 +9626,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 497,
+      lineNumber: 509,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9616,7 +9642,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 507,
+      lineNumber: 519,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9629,7 +9655,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 513,
+      lineNumber: 525,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9640,7 +9666,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 523,
+      lineNumber: 535,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9648,7 +9674,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 528,
+      lineNumber: 540,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9661,7 +9687,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 532,
+      lineNumber: 544,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9669,7 +9695,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 537,
+      lineNumber: 549,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -9693,7 +9719,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 539,
+      lineNumber: 551,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9705,7 +9731,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 560,
+      lineNumber: 572,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9714,7 +9740,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 565,
+      lineNumber: 577,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9732,7 +9758,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 568,
+      lineNumber: 580,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9745,7 +9771,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 581,
+      lineNumber: 593,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9753,7 +9779,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(CheckOutline, {
@@ -9761,9 +9787,23 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.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'
@@ -9771,7 +9811,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 598,
+      lineNumber: 618,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9784,14 +9824,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 603,
+      lineNumber: 623,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 604,
+      lineNumber: 624,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9801,7 +9841,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 605,
+      lineNumber: 625,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9813,7 +9853,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 606,
+      lineNumber: 626,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -10162,6 +10202,17 @@ InputCreatable.defaultProps = {
   value: ''
 };
 
+const 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({
   data,
   disabled = false,
@@ -10174,10 +10225,12 @@ function InputResourceList({
   value,
   fetchData,
   onQueryChange,
-  css
+  css,
+  defaultSort
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
   const [query, setQuery] = useState();
+  const [sortType, setSortType] = useState('asc');
   const scrollerRef = useRef(null);
   useEffect(() => {
     var _a;
@@ -10186,35 +10239,159 @@ function InputResourceList({
       top: 0
     });
   }, [query]);
+  useEffect(() => {
+    if (defaultSort) {
+      setSortType(defaultSort);
+    }
+  }, [defaultSort]);
 
   const renderCheckbox = (resource, index) => {
     var _a;
 
     const isDisabled = enabledItems && (!enabledItems.find(id => id === resource.value) || enabledItems.length === 0);
-    return jsx(InputCheckbox, {
-      label: jsxs(Flex$1, Object.assign({
-        gap: 3
-      }, {
-        children: [jsx(Paragraph, Object.assign({
-          paragraph: "longContentRegular"
-        }, {
-          children: resource.label
-        }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map((variant, index) => jsx(Tag, Object.assign({
-          type: "varian",
-          size: "lg",
-          css: {
-            color: disabled || isDisabled ? '$textDisable' : '$textGreen'
-          }
+    return jsxs(Flex$1, Object.assign({
+      direction: "column",
+      gap: 1
+    }, {
+      children: [jsx(InputCheckbox, {
+        label: jsxs(Flex$1, Object.assign({
+          gap: 3
         }, {
-          children: variant
-        }), index))]
-      }), void 0),
-      index: index,
-      value: resource.value,
-      disabled: isDisabled
-    }, `${resource.value}-${new Date().toISOString()}`);
+          children: [jsx(Paragraph, Object.assign({
+            paragraph: "longContentRegular"
+          }, {
+            children: resource.label
+          }), void 0), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map((variant, index) => jsx(Tag, Object.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) && jsx(Paragraph, Object.assign({
+        css: {
+          fontSize: 12,
+          paddingLeft: 30
+        },
+        color: "secondary"
+      }, {
+        children: resource === null || resource === void 0 ? void 0 : resource.description
+      }), void 0)]
+    }), `${resource.value}-${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 jsxs(Flex$1, Object.assign({
+      direction: "column",
+      gap: 3
+    }, {
+      children: [jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck((value || checkedResources)[index]);
+          if (!value) setCheckedResources(current => current.filter(currItem => currItem.value !== checkedResources[index].value));
+        },
+        value: (value || checkedResources).map(item => item.value),
+        disabled: disabled
+      }, {
+        children: (value || checkedResources).map(renderCheckbox)
+      }), void 0), jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data[index]);
+          if (!value) setCheckedResources(current => [...current, data[index]]);
+        },
+        value: (value || checkedResources).map(item => item.value),
+        disabled: disabled
+      }, {
+        children: data.map(renderCheckbox)
+      }), void 0)]
+    }), void 0);
+  }
+
+  function renderWithSorting() {
+    const datasets = sorting(data, sortType);
+    return jsx(Flex$1, Object.assign({
+      direction: "column",
+      gap: 3
+    }, {
+      children: jsx(CheckboxGroup, Object.assign({
+        onChange: (_, index) => {
+          if (value === null || value === void 0 ? void 0 : value.some(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(item => 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 (let 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 (let 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 jsxs(Box, Object.assign({
     css: Object.assign({
       position: 'relative'
@@ -10228,7 +10405,26 @@ function InputResourceList({
         onQueryChange(query);
       }, 1000),
       disabled: disabled
-    }, void 0), isLoading && jsx(Flex$1, Object.assign({
+    }, void 0), defaultSort && jsxs(Flex$1, Object.assign({
+      align: "center",
+      gap: 4,
+      css: {
+        paddingLeft: 16,
+        marginTop: '$spacing-04'
+      }
+    }, {
+      children: [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), jsx(Paragraph, Object.assign({
+        paragraph: "shortContentBold"
+      }, {
+        children: "DATA TITLE"
+      }), void 0), jsx(SortingIcon, {
+        onClick: toggleSort
+      }, void 0)]
+    }), void 0), isLoading && jsx(Flex$1, Object.assign({
       justify: "center",
       align: "center",
       css: {
@@ -10287,30 +10483,7 @@ function InputResourceList({
           children: children
         }), void 0)
       }, {
-        children: jsxs(Flex$1, Object.assign({
-          direction: "column",
-          gap: 3
-        }, {
-          children: [jsx(CheckboxGroup, Object.assign({
-            onChange: (_, index) => {
-              onItemUncheck((value || checkedResources)[index]);
-              if (!value) setCheckedResources(current => current.filter(currItem => currItem.value !== checkedResources[index].value));
-            },
-            value: (value || checkedResources).map(item => item.value),
-            disabled: disabled
-          }, {
-            children: (value || checkedResources).map(renderCheckbox)
-          }), void 0), jsx(CheckboxGroup, Object.assign({
-            onChange: (_, index) => {
-              onItemCheck(data[index]);
-              if (!value) setCheckedResources(current => [...current, data[index]]);
-            },
-            value: (value || checkedResources).map(item => 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) && jsx(Box, Object.assign({
       css: {
@@ -15564,7 +15737,8 @@ function InputTimePicker({
   disabled,
   readOnly,
   minDate,
-  maxDate
+  maxDate,
+  isInvalid
 }) {
   const [openPicker, setOpenPicker] = useState(false);
   const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15580,10 +15754,11 @@ function InputTimePicker({
     disabled: disabled,
     onClick: handleChange,
     readOnly: readOnly,
+    isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 41,
+      lineNumber: 42,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -15591,14 +15766,14 @@ function InputTimePicker({
       __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.createElement(InputText, {
@@ -15611,7 +15786,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 43,
+      lineNumber: 44,
       columnNumber: 7
     }
   }));
@@ -15627,7 +15802,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 55,
+      lineNumber: 56,
       columnNumber: 5
     }
   });
@@ -15639,7 +15814,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 67,
+      lineNumber: 68,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -15647,14 +15822,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 69,
+      lineNumber: 70,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 71,
+      lineNumber: 72,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -15662,14 +15837,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 72,
+      lineNumber: 73,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 75,
+      lineNumber: 76,
       columnNumber: 7
     }
   }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -15677,7 +15852,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 79,
+      lineNumber: 80,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -15687,7 +15862,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 80,
+      lineNumber: 81,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -15698,7 +15873,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 81,
+      lineNumber: 82,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15710,7 +15885,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 87,
+      lineNumber: 88,
       columnNumber: 11
     }
   }, renderTimePicker()))));
@@ -15772,8 +15947,13 @@ InputTimePicker.propTypes = {
 
   /**
        Specify the maximum date.
-      */
-  maxDate: PropTypes.instanceOf(Date)
+  */
+  maxDate: PropTypes.instanceOf(Date),
+
+  /**
+   * Invalid state input.
+   */
+  isInvalid: PropTypes.bool
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
@@ -16175,7 +16355,8 @@ function InputDatePicker({
   showTimePicker,
   minDate,
   maxDate,
-  readOnly
+  readOnly,
+  isInvalid
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
@@ -16211,7 +16392,8 @@ function InputDatePicker({
     disabled: disabled,
     readOnly: readOnly,
     onClick: handleChange,
-    size: size
+    size: size,
+    isInvalid: isInvalid
   }, {
     children: [jsx(InputLeftElement, {
       children: jsx(CalendarOutline, {}, void 0)
@@ -27252,7 +27434,8 @@ const Required$2 = styled('span', {
 function EditableTableMobile(props) {
   const {
     instance,
-    emptyDataMessage
+    emptyDataMessage,
+    showCheckbox
   } = props;
   const {
     getTableProps,
@@ -27276,17 +27459,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) => {
@@ -27295,17 +27482,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
@@ -27313,7 +27504,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: () => {
@@ -27332,7 +27523,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
               }, {
@@ -27347,10 +27538,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: {
@@ -27376,7 +27569,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
@@ -27764,7 +27957,7 @@ function EditableTable(props) {
         Header: ({
           getToggleAllRowsSelectedProps
         }) => jsx(IndeterminateCheckbox, Object.assign({
-          index: "header"
+          row: "header"
         }, getToggleAllRowsSelectedProps()), void 0),
         Cell: ({
           row
@@ -27949,7 +28142,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);
 }