@majoo-ui/react 1.55.33 → 1.55.35

package/components/form/components/InputResourceList/InputResourceList.d.ts

@@ -5,6 +5,7 @@ export interface IResource {
     label: string;
     variants?: string[];
     description?: string;
+    icon?: () => JSX.Element;
 }
 interface IInputResourceListProps {
     data: IResource[];

package/index.esm.js

@@ -1223,7 +1223,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors$4 = foundations.colors;
+const colors$5 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -3181,7 +3181,7 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3599,7 +3599,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors$4.iconSecondary,
+  color: colors$5.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
@@ -3676,7 +3676,7 @@ const SingleTagBanner = props => {
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -7680,7 +7680,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 16,
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -8213,6 +8213,9 @@ SvgSearchOutline.defaultProps = {
 
 const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
 var _jsxFileName$z = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+const {
+  colors: colors$4
+} = foundations;
 const InputSearchbox = _ref => {
   var _props$value;
   let {
@@ -8252,7 +8255,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 38,
+      lineNumber: 40,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -8260,14 +8263,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, _extends({
@@ -8282,30 +8285,31 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 40,
+      lineNumber: 42,
       columnNumber: 7
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
+      color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 51,
+        lineNumber: 53,
         columnNumber: 44
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 51,
-        columnNumber: 62
+        lineNumber: 53,
+        columnNumber: 91
       }
     }),
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 50,
+      lineNumber: 52,
       columnNumber: 7
     }
   }));
@@ -9156,7 +9160,7 @@ function InputSelect(_a) {
           readOnly: readOnly
         }, {
           children: jsx(CaretDownOutline, {
-            color: readOnly ? colors$4.gray300 : iconColor
+            color: readOnly ? colors$5.gray300 : iconColor
           }, void 0)
         }), void 0);
       };
@@ -9362,7 +9366,7 @@ function InputSelect(_a) {
                         }, {
                           children: jsx(CircleInfoOutline, {
                             size: "16px",
-                            color: colors$4.iconDisable,
+                            color: colors$5.iconDisable,
                             style: {
                               verticalAlign: 'text-bottom'
                             }
@@ -10297,7 +10301,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: disabled || readOnly ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10396,7 +10400,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10404,7 +10408,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10506,7 +10510,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$4.iconDisable,
+    color: colors$5.iconDisable,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10514,7 +10518,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10577,7 +10581,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors$4.iconDisable,
+    color: colors$5.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
@@ -10907,7 +10911,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -10989,34 +10993,44 @@ function InputResourceList({
     }
   }, [defaultSort]);
   const renderCheckbox = (resource, index) => {
-    var _a;
+    var _a, _b;
     const isDisabled = enabledItems && (!enabledItems.find(id => id === resource.value) || enabledItems.length === 0);
     return jsxs(Flex$1, Object.assign({
       direction: "column",
       gap: 1
     }, {
-      children: [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'
-            }
+      children: [jsxs(Flex$1, Object.assign({
+        align: "center"
+      }, {
+        children: [jsx(InputCheckbox, {
+          label: jsxs(Flex$1, Object.assign({
+            gap: 3
           }, {
-            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({
+            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.icon) && jsx(Box, Object.assign({
+          css: {
+            marginLeft: '$spacing-03'
+          }
+        }, {
+          children: (_b = resource === null || resource === void 0 ? void 0 : resource.icon) === null || _b === void 0 ? void 0 : _b.call(resource)
+        }), void 0)]
+      }), void 0), (resource === null || resource === void 0 ? void 0 : resource.description) && jsx(Paragraph, Object.assign({
         css: {
           fontSize: 12,
           paddingLeft: 30
@@ -11158,7 +11172,7 @@ function InputResourceList({
       }, {
         children: jsx(SortingOutline, {
           size: 16,
-          color: colors$4.iconSecondary
+          color: colors$5.iconSecondary
         }, void 0)
       }), void 0)]
     }), void 0), isLoading && jsx(Flex$1, Object.assign({
@@ -11660,7 +11674,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(MinusOutline, {
         size: 24,
-        color: disabled || disabledDecrement ? colors$4.iconDisable : colors$4.primary500
+        color: disabled || disabledDecrement ? colors$5.iconDisable : colors$5.primary500
       }, void 0)
     }), void 0), jsx(Input$4, {
       ref: ref,
@@ -11683,7 +11697,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(PlusOutline, {
         size: 24,
-        color: disabled || disabledIncrement ? colors$4.iconDisable : colors$4.primary500
+        color: disabled || disabledIncrement ? colors$5.iconDisable : colors$5.primary500
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -12421,7 +12435,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -12450,7 +12464,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -12510,7 +12524,7 @@ const TabsTrigger$1 = _ref3 => {
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
-    color: activeTabs === value || isIconHovered ? colors$4.iconGreen : colors$4.iconDisable
+    color: activeTabs === value || isIconHovered ? colors$5.iconGreen : colors$5.iconDisable
   }), (!icon || activeTabs === value) && children)));
 };
 const TabsContent$1 = _ref4 => {
@@ -12782,7 +12796,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -12812,7 +12826,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -15583,7 +15597,7 @@ const CalendarBox = ({
               fontWeight: 600
             },
             onClick: onReset,
-            disabled: disabled,
+            disabled: disabled || !selected || selected.length <= 1,
             size: "sm",
             type: "button"
           }, {
@@ -16164,7 +16178,7 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onReset,
-          disabled: disabled,
+          disabled: disabled || !selected || selected.length <= 1,
           type: "button"
         }, {
           children: "Reset"
@@ -16193,7 +16207,7 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onUpdate,
-          disabled: disabled,
+          disabled: disabled || !selected || selected.length <= 1,
           type: "button"
         }, {
           children: t('label.process', 'Proses', {
@@ -16616,7 +16630,7 @@ function InputTimePicker({
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
     children: /*#__PURE__*/React__default.createElement(TimeOutline, {
-      color: disabled ? colors$4.iconDisable : colors$4.iconPrimary,
+      color: disabled ? colors$5.iconDisable : colors$5.iconPrimary,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
@@ -17848,7 +17862,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: currentPage === 1 ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -17901,7 +17915,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: currentPage === totalPages ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -18056,7 +18070,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
@@ -18294,23 +18308,23 @@ const ContextMenuItem = styled(Item, {
   userSelect: 'none',
   color: '$textPrimary',
   '&[data-disabled]': {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   },
   '&:active': {
-    backgroundColor: colors$4.gray150
+    backgroundColor: colors$5.gray150
   },
   '&:focus': {
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   }
 });
 const ContextMenuSeparator = styled('div', {
   height: 1,
-  backgroundColor: colors$4.gray150,
+  backgroundColor: colors$5.gray150,
   margin: 5
 });
 
@@ -18549,7 +18563,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       justify: "between",
                       gap: 5,
                       css: {
-                        backgroundColor: colors$4.bgGray,
+                        backgroundColor: colors$5.bgGray,
                         padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder',
                         alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -18572,7 +18586,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   gap: 3,
                   css: {
                     height: '40px',
-                    backgroundColor: colors$4.bgGray,
+                    backgroundColor: colors$5.bgGray,
                     paddingRight: '$spacing-04'
                   }
                 }, {
@@ -19339,7 +19353,7 @@ function Table({
                 }, {
                   children: [leftAddOnCells.map((_, index) => jsx("td", {
                     style: {
-                      backgroundColor: colors$4.bgGray
+                      backgroundColor: colors$5.bgGray
                     }
                   }, index)), jsxs(React.Fragment, {
                     children: [jsx(TableCell$3, Object.assign({
@@ -20457,7 +20471,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors$4.bgDimmer,
+  backgroundColor: colors$5.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -20490,14 +20504,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors$4.gray900,
+  color: colors$5.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription$1 = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors$4.gray900,
+  color: colors$5.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -21122,17 +21136,17 @@ const itemStyles = {
   position: 'relative',
   userSelect: 'none',
   '&[data-disabled]': {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer'
   },
   '&:active': {
-    backgroundColor: colors$4.gray150
+    backgroundColor: colors$5.gray150
   },
   '&:focus': {
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   }
 };
 const StyledItem = styled(DropdownMenuPrimitive.Item, Object.assign({}, itemStyles));
@@ -21149,11 +21163,11 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors$4.gray700
+  color: colors$5.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors$4.gray150,
+  backgroundColor: colors$5.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -21250,7 +21264,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors$4.gray400
+    color: colors$5.gray400
   }
 });
 const StyledDropdown = styled(ButtonPrimitive, {
@@ -25002,7 +25016,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLeftOutline, {
-        color: colors$4.btnPrimary
+        color: colors$5.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -25062,7 +25076,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors$4.btnPrimary
+        color: colors$5.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -28141,7 +28155,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors$4.bgGreen,
+        color: colors$5.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28162,7 +28176,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors$4.iconSecondary,
+        color: colors$5.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28234,7 +28248,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors$4.iconPrimary,
+        color: colors$5.iconPrimary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28661,10 +28675,10 @@ var _jsxFileName$2 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/rea
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
-    borderLeft: `4px solid ${colors$4.primary500} !important`
+    borderLeft: `4px solid ${colors$5.primary500} !important`
   },
   '& .active-scroll-spy .link-title': {
-    color: `${colors$4.primary500} !important`
+    color: `${colors$5.primary500} !important`
   },
   '@md': {
     display: 'unset'
@@ -28672,7 +28686,7 @@ const DesktopContainer = styled(Flex$1, {
 });
 const MobileContainer = styled(Flex$1, {
   backgroundColor: '$white',
-  border: `1px solid ${colors$4.gray150}`,
+  border: `1px solid ${colors$5.gray150}`,
   borderRadius: 8,
   padding: '8px 8px',
   width: '100%',
@@ -28799,7 +28813,7 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$5.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
@@ -30132,11 +30146,11 @@ function ProgressIndicator(props) {
     const getColor = state => {
       switch (state) {
         case 'error':
-          return colors$4.red400;
+          return colors$5.red400;
         case 'active':
-          return colors$4.primary500;
+          return colors$5.primary500;
         default:
-          return colors$4.gray150;
+          return colors$5.gray150;
       }
     };
     const iconProps = {
@@ -32024,7 +32038,7 @@ function CheckboxTable(props) {
                       }
                     }, void 0) : jsx(MinusOutline, {
                       size: 16,
-                      color: colors$4.iconDisable
+                      color: colors$5.iconDisable
                     }, void 0)
                   }, void 0)
                 }), index + indexSubRow + 'tb-cell-collapse');
@@ -32329,9 +32343,9 @@ const StyledSkeleton = props => {
   function getBaseColor(color) {
     switch (color) {
       case 'primary':
-        return colors$4.gray300;
+        return colors$5.gray300;
       default:
-        return colors$4.gray150;
+        return colors$5.gray150;
     }
   }
   function getSize(size) {

package/index.umd.js

@@ -1334,7 +1334,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  var colors$4 = core.foundations.colors;
+  var colors$5 = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -3256,7 +3256,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$4.iconSecondary,
+      color: colors$5.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -3674,7 +3674,7 @@
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3751,7 +3751,7 @@
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$4.iconSecondary,
+      color: colors$5.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -7756,7 +7756,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 16,
-      color: colors$4.iconSecondary,
+      color: colors$5.iconSecondary,
       style: {
         verticalAlign: 'middle'
       },
@@ -8289,6 +8289,9 @@
 
   const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
   var _jsxFileName$z = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+  const {
+    colors: colors$4
+  } = core.foundations;
   const InputSearchbox = _ref => {
     var _props$value;
     let {
@@ -8328,7 +8331,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 38,
+        lineNumber: 40,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -8336,14 +8339,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 39,
+          lineNumber: 41,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, _extends({
@@ -8358,30 +8361,31 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 40,
+        lineNumber: 42,
         columnNumber: 7
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
       children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
+        color: colors$4.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 51,
+          lineNumber: 53,
           columnNumber: 44
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 51,
-          columnNumber: 62
+          lineNumber: 53,
+          columnNumber: 91
         }
       }),
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 50,
+        lineNumber: 52,
         columnNumber: 7
       }
     }));
@@ -9268,7 +9272,7 @@
             readOnly: readOnly
           }, {
             children: jsxRuntime.jsx(icons.CaretDownOutline, {
-              color: readOnly ? colors$4.gray300 : iconColor
+              color: readOnly ? colors$5.gray300 : iconColor
             }, void 0)
           }), void 0);
         };
@@ -9480,7 +9484,7 @@
                           }, {
                             children: jsxRuntime.jsx(icons.CircleInfoOutline, {
                               size: "16px",
-                              color: colors$4.iconDisable,
+                              color: colors$5.iconDisable,
                               style: {
                                 verticalAlign: 'text-bottom'
                               }
@@ -10415,7 +10419,7 @@
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
-      color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
+      color: disabled || readOnly ? colors$5.iconDisable : colors$5.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -10514,7 +10518,7 @@
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
-      color: colors$4.iconSecondary,
+      color: colors$5.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -10522,7 +10526,7 @@
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$4.iconSecondary,
+      color: colors$5.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -10624,7 +10628,7 @@
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-      color: colors$4.iconDisable,
+      color: colors$5.iconDisable,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -10632,7 +10636,7 @@
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -10695,7 +10699,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
       size: "16px",
-      color: colors$4.iconDisable,
+      color: colors$5.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
@@ -11025,7 +11029,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CirclePlusOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -11112,7 +11116,7 @@
       }
     }, [defaultSort]);
     var renderCheckbox = function renderCheckbox(resource, index) {
-      var _a;
+      var _a, _b;
       var isDisabled = enabledItems && (!enabledItems.find(function (id) {
         return id === resource.value;
       }) || enabledItems.length === 0);
@@ -11120,30 +11124,40 @@
         direction: "column",
         gap: 1
       }, {
-        children: [jsxRuntime.jsx(InputCheckbox, {
-          label: jsxRuntime.jsxs(Flex$1, __assign({
-            gap: 3
-          }, {
-            children: [jsxRuntime.jsx(Paragraph, __assign({
-              paragraph: "longContentRegular"
+        children: [jsxRuntime.jsxs(Flex$1, __assign({
+          align: "center"
+        }, {
+          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
-        }, void 0), (resource === null || resource === void 0 ? void 0 : resource.description) && jsxRuntime.jsx(Paragraph, __assign({
+                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.icon) && jsxRuntime.jsx(Box, __assign({
+            css: {
+              marginLeft: '$spacing-03'
+            }
+          }, {
+            children: (_b = resource === null || resource === void 0 ? void 0 : resource.icon) === null || _b === void 0 ? void 0 : _b.call(resource)
+          }), void 0)]
+        }), void 0), (resource === null || resource === void 0 ? void 0 : resource.description) && jsxRuntime.jsx(Paragraph, __assign({
           css: {
             fontSize: 12,
             paddingLeft: 30
@@ -11297,7 +11311,7 @@
         }, {
           children: jsxRuntime.jsx(icons.SortingOutline, {
             size: 16,
-            color: colors$4.iconSecondary
+            color: colors$5.iconSecondary
           }, void 0)
         }), void 0)]
       }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
@@ -11807,7 +11821,7 @@
       }, {
         children: jsxRuntime.jsx(icons.MinusOutline, {
           size: 24,
-          color: disabled || disabledDecrement ? colors$4.iconDisable : colors$4.primary500
+          color: disabled || disabledDecrement ? colors$5.iconDisable : colors$5.primary500
         }, void 0)
       }), void 0), jsxRuntime.jsx(Input$4, {
         ref: ref,
@@ -11830,7 +11844,7 @@
       }, {
         children: jsxRuntime.jsx(icons.PlusOutline, {
           size: 24,
-          color: disabled || disabledIncrement ? colors$4.iconDisable : colors$4.primary500
+          color: disabled || disabledIncrement ? colors$5.iconDisable : colors$5.primary500
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -12568,7 +12582,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -12597,7 +12611,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -12657,7 +12671,7 @@
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      color: activeTabs === value || isIconHovered ? colors$4.iconGreen : colors$4.iconDisable
+      color: activeTabs === value || isIconHovered ? colors$5.iconGreen : colors$5.iconDisable
     }), (!icon || activeTabs === value) && children)));
   };
   const TabsContent$1 = _ref4 => {
@@ -12929,7 +12943,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLeftOutline, {
-        color: colors$4.iconGreen,
+        color: colors$5.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
@@ -12959,7 +12973,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
-        color: colors$4.iconGreen,
+        color: colors$5.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
@@ -15765,7 +15779,7 @@
                 fontWeight: 600
               },
               onClick: onReset,
-              disabled: disabled,
+              disabled: disabled || !selected || selected.length <= 1,
               size: "sm",
               type: "button"
             }, {
@@ -16383,7 +16397,7 @@
               flex: 1
             },
             onClick: onReset,
-            disabled: disabled,
+            disabled: disabled || !selected || selected.length <= 1,
             type: "button"
           }, {
             children: "Reset"
@@ -16412,7 +16426,7 @@
               flex: 1
             },
             onClick: onUpdate,
-            disabled: disabled,
+            disabled: disabled || !selected || selected.length <= 1,
             type: "button"
           }, {
             children: t('label.process', 'Proses', {
@@ -16837,7 +16851,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
       children: /*#__PURE__*/React__default["default"].createElement(icons.TimeOutline, {
-        color: disabled ? colors$4.iconDisable : colors$4.iconPrimary,
+        color: disabled ? colors$5.iconDisable : colors$5.iconPrimary,
         __self: this,
         __source: {
           fileName: _jsxFileName$l,
@@ -18101,7 +18115,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: currentPage === 1 ? colors$4.iconDisable : colors$4.iconPrimary,
+      color: currentPage === 1 ? colors$5.iconDisable : colors$5.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -18154,7 +18168,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: currentPage === totalPages ? colors$4.iconDisable : colors$4.iconPrimary,
+      color: currentPage === totalPages ? colors$5.iconDisable : colors$5.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -18309,7 +18323,7 @@
         columnNumber: 13
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$4.gray400,
+      color: colors$5.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
@@ -18547,23 +18561,23 @@
     userSelect: 'none',
     color: '$textPrimary',
     '&[data-disabled]': {
-      color: colors$4.gray400,
+      color: colors$5.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer',
-      backgroundColor: colors$4.gray100
+      backgroundColor: colors$5.gray100
     },
     '&:active': {
-      backgroundColor: colors$4.gray150
+      backgroundColor: colors$5.gray150
     },
     '&:focus': {
-      backgroundColor: colors$4.gray100
+      backgroundColor: colors$5.gray100
     }
   });
   var ContextMenuSeparator = styled('div', {
     height: 1,
-    backgroundColor: colors$4.gray150,
+    backgroundColor: colors$5.gray150,
     margin: 5
   });
 
@@ -18811,7 +18825,7 @@
                         justify: "between",
                         gap: 5,
                         css: {
-                          backgroundColor: colors$4.bgGray,
+                          backgroundColor: colors$5.bgGray,
                           padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
                           borderBottom: '1pt solid $bgBorder',
                           alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -18834,7 +18848,7 @@
                     gap: 3,
                     css: {
                       height: '40px',
-                      backgroundColor: colors$4.bgGray,
+                      backgroundColor: colors$5.bgGray,
                       paddingRight: '$spacing-04'
                     }
                   }, {
@@ -19657,7 +19671,7 @@
                       children: [leftAddOnCells.map(function (_, index) {
                         return jsxRuntime.jsx("td", {
                           style: {
-                            backgroundColor: colors$4.bgGray
+                            backgroundColor: colors$5.bgGray
                           }
                         }, index);
                       }), jsxRuntime.jsxs(React__namespace.Fragment, {
@@ -20788,7 +20802,7 @@
   });
   const StyledOverlay = styled(ADialog__namespace.Overlay, {
     zIndex: 1,
-    backgroundColor: colors$4.bgDimmer,
+    backgroundColor: colors$5.bgDimmer,
     position: 'fixed',
     inset: 0,
     '@media (prefers-reduced-motion: no-preference)': {
@@ -20821,14 +20835,14 @@
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    color: colors$4.gray900,
+    color: colors$5.gray900,
     fontSize: 17,
     fontWeight: 500
   });
   const StyledDescription$1 = styled(ADialog__namespace.Description, {
     mx: 24,
     my: 20,
-    color: colors$4.gray900,
+    color: colors$5.gray900,
     fontSize: 15,
     lineHeight: 1.5
   });
@@ -21453,17 +21467,17 @@
     position: 'relative',
     userSelect: 'none',
     '&[data-disabled]': {
-      color: colors$4.gray400,
+      color: colors$5.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer'
     },
     '&:active': {
-      backgroundColor: colors$4.gray150
+      backgroundColor: colors$5.gray150
     },
     '&:focus': {
-      backgroundColor: colors$4.gray100
+      backgroundColor: colors$5.gray100
     }
   };
   const StyledItem = styled(DropdownMenuPrimitive__namespace.Item, Object.assign({}, itemStyles));
@@ -21480,11 +21494,11 @@
     padding: '8px 0',
     fontSize: 12,
     lineHeight: '25px',
-    color: colors$4.gray700
+    color: colors$5.gray700
   });
   const StyledSeparator = styled(DropdownMenuPrimitive__namespace.Separator, {
     height: 1,
-    backgroundColor: colors$4.gray150,
+    backgroundColor: colors$5.gray150,
     margin: 5
   });
   const StyledItemIndicator = styled(DropdownMenuPrimitive__namespace.ItemIndicator, {
@@ -21581,7 +21595,7 @@
       color: 'white'
     },
     '[data-disabled] &': {
-      color: colors$4.gray400
+      color: colors$5.gray400
     }
   });
   const StyledDropdown = styled(ButtonPrimitive, {
@@ -25365,7 +25379,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLeftOutline, {
-          color: colors$4.btnPrimary
+          color: colors$5.btnPrimary
         }, void 0)
       }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
         align: "center",
@@ -25425,7 +25439,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
-          color: colors$4.btnPrimary
+          color: colors$5.btnPrimary
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -28504,7 +28518,7 @@
             marginRight: 9
           },
           size: "24",
-          color: colors$4.bgGreen,
+          color: colors$5.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28525,7 +28539,7 @@
             margin: '0 9px'
           },
           size: "20",
-          color: colors$4.iconSecondary,
+          color: colors$5.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28597,7 +28611,7 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
-          color: colors$4.iconPrimary,
+          color: colors$5.iconPrimary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29024,10 +29038,10 @@
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
-      borderLeft: `4px solid ${colors$4.primary500} !important`
+      borderLeft: `4px solid ${colors$5.primary500} !important`
     },
     '& .active-scroll-spy .link-title': {
-      color: `${colors$4.primary500} !important`
+      color: `${colors$5.primary500} !important`
     },
     '@md': {
       display: 'unset'
@@ -29035,7 +29049,7 @@
   });
   const MobileContainer = styled(Flex$1, {
     backgroundColor: '$white',
-    border: `1px solid ${colors$4.gray150}`,
+    border: `1px solid ${colors$5.gray150}`,
     borderRadius: 8,
     padding: '8px 8px',
     width: '100%',
@@ -29162,7 +29176,7 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$5.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
@@ -30501,11 +30515,11 @@
       var getColor = function getColor(state) {
         switch (state) {
           case 'error':
-            return colors$4.red400;
+            return colors$5.red400;
           case 'active':
-            return colors$4.primary500;
+            return colors$5.primary500;
           default:
-            return colors$4.gray150;
+            return colors$5.gray150;
         }
       };
       var iconProps = {
@@ -32482,7 +32496,7 @@
                         }
                       }, void 0) : jsxRuntime.jsx(icons.MinusOutline, {
                         size: 16,
-                        color: colors$4.iconDisable
+                        color: colors$5.iconDisable
                       }, void 0)
                     }, void 0)
                   }), index + indexSubRow + 'tb-cell-collapse');
@@ -32788,9 +32802,9 @@
     function getBaseColor(color) {
       switch (color) {
         case 'primary':
-          return colors$4.gray300;
+          return colors$5.gray300;
         default:
-          return colors$4.gray150;
+          return colors$5.gray150;
       }
     }
     function getSize(size) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.33",
+  "version": "1.55.35",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",