@majoo-ui/react 1.58.4-rc.2 → 1.58.4

package/index.esm.js

@@ -1223,7 +1223,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors$7 = foundations.colors;
+const colors$8 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -3224,7 +3224,7 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3695,7 +3695,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors$7.iconSecondary,
+  color: colors$8.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
@@ -3782,7 +3782,7 @@ const SingleTagBanner = props => {
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -10223,7 +10223,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 16,
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -10757,7 +10757,7 @@ SvgSearchOutline.defaultProps = {
 const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
 var _jsxFileName$z = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 const {
-  colors: colors$6
+  colors: colors$7
 } = foundations;
 const InputSearchbox = _ref => {
   var _props$value;
@@ -10833,7 +10833,7 @@ const InputSearchbox = _ref => {
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
-      color: colors$6.iconSecondary,
+      color: colors$7.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
@@ -11454,7 +11454,7 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
           readOnly: readOnly
         }, {
           children: jsx(CaretDownOutline, {
-            color: readOnly ? colors$7.gray300 : iconColor
+            color: readOnly ? colors$8.gray300 : iconColor
           }, void 0)
         }), void 0);
       };
@@ -11663,7 +11663,7 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                         }, {
                           children: jsx(CircleInfoOutline, {
                             size: "16px",
-                            color: colors$7.iconDisable,
+                            color: colors$8.iconDisable,
                             style: {
                               verticalAlign: 'text-bottom'
                             }
@@ -13091,7 +13091,7 @@ const StyledDiv = styled('div', {
   color: '$textDisable',
   display: 'inline-flex'
 });
-const IndeterminateFilled = styled('div', {
+const IndeterminateFilled$1 = styled('div', {
   width: 16,
   height: 16,
   background: '$primary500',
@@ -13515,7 +13515,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors$7.iconDisable : colors$7.iconPrimary,
+    color: disabled || readOnly ? colors$8.iconDisable : colors$8.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -13634,7 +13634,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -13642,7 +13642,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -13801,7 +13801,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 23
       }
     }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: colors$7.iconDisable,
+      color: colors$8.iconDisable,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -13809,14 +13809,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 29
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
         lineNumber: 834,
         columnNumber: 31
       }
-    })), isShowSelectAll && (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, {
+    })), isShowSelectAll && (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$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -13874,7 +13874,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors$7.iconDisable,
+    color: colors$8.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
@@ -14214,7 +14214,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors$7.iconGreen,
+    color: colors$8.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -14265,6 +14265,7 @@ function InputResourceList({
   onItemCheck,
   onItemUncheck,
   searchPlaceholder,
+  counterFooter = true,
   counterFooterText,
   isLoading = false,
   enabledItems,
@@ -14273,9 +14274,11 @@ function InputResourceList({
   fetchData,
   onQueryChange,
   css,
+  wrapperCss,
   defaultSort,
   title,
-  hideSelectAll
+  hideSelectAll,
+  customHeader
 }) {
   const {
     t
@@ -14460,7 +14463,7 @@ function InputResourceList({
       position: 'relative'
     }, css)
   }, {
-    children: [onQueryChange && jsx(InputSearchbox, {
+    children: [customHeader, onQueryChange && jsx(InputSearchbox, {
       size: "lg",
       placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...', {
         ns: 'translation'
@@ -14494,7 +14497,7 @@ function InputResourceList({
       }, {
         children: jsx(SortingOutline, {
           size: 16,
-          color: colors$7.iconSecondary
+          color: colors$8.iconSecondary
         }, void 0)
       }), void 0)]
     }), void 0), isLoading && jsx(Flex$1, Object.assign({
@@ -14516,7 +14519,7 @@ function InputResourceList({
         children: "Loading .... "
       }), void 0)
     }), void 0), jsxs(Box, Object.assign({
-      css: {
+      css: Object.assign({
         border: '1px solid $gray300',
         padding: '$spacing-05',
         borderRadius: '$lg',
@@ -14524,7 +14527,7 @@ function InputResourceList({
         height: isLoading ? 285 : 'unset',
         overflow: 'auto',
         marginTop: '$spacing-03'
-      },
+      }, wrapperCss && wrapperCss),
       ref: scrollerRef
     }, {
       children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsx(Flex$1, Object.assign({
@@ -14562,7 +14565,7 @@ function InputResourceList({
       }, {
         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({
+    }), void 0), counterFooter && (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsx(Box, Object.assign({
       css: {
         marginTop: '$spacing-04'
       }
@@ -14577,6 +14580,109 @@ function InputResourceList({
   }), void 0);
 }
 
+const {
+  colors: colors$6
+} = foundations;
+const IconBox = styled('div', {
+  height: 16,
+  width: 16,
+  cursor: 'pointer',
+  variants: {
+    border: {
+      true: {
+        borderRadius: 3,
+        border: '1.5px solid $gray300'
+      }
+    }
+  }
+});
+const IndeterminateFilled = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$primary500',
+  color: '$textWhite',
+  borderRadius: 3,
+  fontSize: 14,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const InputResourceListExpandable = _a => {
+  var _b;
+  var {
+      renderSelectAll,
+      onItemCheck,
+      onItemUncheck,
+      value
+    } = _a,
+    props = __rest(_a, ["renderSelectAll", "onItemCheck", "onItemUncheck", "value"]);
+  const [expand, setExpand] = useState(false);
+  const [checkedItem, setCheckedItem] = useState(value || []);
+  const handleChecked = item => {
+    onItemCheck(item);
+    setCheckedItem(current => [...current, item]);
+  };
+  const handleUnChecked = item => {
+    onItemUncheck(item);
+    setCheckedItem(current => current.filter(currItem => currItem.value !== item.value));
+  };
+  const handleCheckedAll = () => {
+    var _a, _b, _c;
+    if ((checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) && !((_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a.length)) {
+      for (let i = 0; i < (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length); i++) {
+        const item = checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem[i];
+        handleUnChecked(item);
+      }
+    } else {
+      for (let i = 0; i < ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length); i++) {
+        const item = (_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c[i];
+        handleChecked(item);
+      }
+    }
+  };
+  return jsxs(Box, {
+    children: [jsxs(Flex$1, Object.assign({
+      justify: "between",
+      align: "start"
+    }, {
+      children: [jsxs(Flex$1, Object.assign({
+        gap: 5
+      }, {
+        children: [jsx(IconBox, Object.assign({
+          onClick: handleCheckedAll,
+          border: Boolean(!(checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length))
+        }, {
+          children: (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) && !((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) ? jsx(CheckOutline, {
+            color: colors$6.iconGreen
+          }, void 0) : (checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length) ? jsx(IndeterminateFilled, {
+            children: "-"
+          }, void 0) : ''
+        }), void 0), renderSelectAll]
+      }), void 0), jsx(Box, Object.assign({
+        css: {
+          cursor: 'pointer'
+        },
+        onClick: () => setExpand(!expand)
+      }, {
+        children: expand ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+      }), void 0)]
+    }), void 0), jsx(Box, {
+      children: expand && jsx(InputResourceList, Object.assign({}, props, {
+        value: checkedItem,
+        onItemCheck: handleChecked,
+        onItemUncheck: handleUnChecked
+      }), void 0)
+    }, void 0)]
+  }, void 0);
+};
+const ResourceList = _a => {
+  var {
+      expandable
+    } = _a,
+    props = __rest(_a, ["expandable"]);
+  return expandable ? jsx(InputResourceListExpandable, Object.assign({}, props), void 0) : jsx(InputResourceList, Object.assign({}, props), void 0);
+};
+
 const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
       showLeadingIcon = false,
@@ -14986,7 +15092,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(MinusOutline, {
         size: 24,
-        color: disabled || disabledDecrement ? colors$7.iconDisable : colors$7.primary500
+        color: disabled || disabledDecrement ? colors$8.iconDisable : colors$8.primary500
       }, void 0)
     }), void 0), jsx(Input$4, {
       ref: ref,
@@ -15009,7 +15115,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(PlusOutline, {
         size: 24,
-        color: disabled || disabledIncrement ? colors$7.iconDisable : colors$7.primary500
+        color: disabled || disabledIncrement ? colors$8.iconDisable : colors$8.primary500
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -15604,7 +15710,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$s,
@@ -15634,7 +15740,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
-      color: colors$7.iconGreen,
+      color: colors$8.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$s,
@@ -17501,7 +17607,7 @@ function InputTimePicker({
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
     children: /*#__PURE__*/React__default.createElement(TimeOutline, {
-      color: disabled ? colors$7.iconDisable : colors$7.iconPrimary,
+      color: disabled ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -19396,7 +19502,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
-    color: colors$7.iconGreen,
+    color: colors$8.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
@@ -19425,7 +19531,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
-    color: colors$7.iconGreen,
+    color: colors$8.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
@@ -19485,7 +19591,7 @@ const TabsTrigger$1 = _ref3 => {
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
-    color: activeTabs === value || isIconHovered ? colors$7.iconGreen : colors$7.iconDisable
+    color: activeTabs === value || isIconHovered ? colors$8.iconGreen : colors$8.iconDisable
   }), (!icon || activeTabs === value) && children)));
 };
 const TabsContent$1 = _ref4 => {
@@ -20272,7 +20378,7 @@ const PrevNextButtonIcon = ({
       columnNumber: 5
     }
   }, iconType === 'prev' ? /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+    color: isHover ? colors$8.iconGreen : colors$8.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -20280,7 +20386,7 @@ const PrevNextButtonIcon = ({
       columnNumber: 9
     }
   }) : /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+    color: isHover ? colors$8.iconGreen : colors$8.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -20413,7 +20519,7 @@ const PaginationButton = ({
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors$7.iconDisable : colors$7.iconPrimary,
+    color: currentPage === 1 ? colors$8.iconDisable : colors$8.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -20490,7 +20596,7 @@ const PaginationButton = ({
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors$7.iconDisable : colors$7.iconPrimary,
+    color: currentPage === totalPages ? colors$8.iconDisable : colors$8.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -20795,7 +20901,7 @@ function PaginationInfo(_ref) {
       columnNumber: 15
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$7.gray400,
+    color: colors$8.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
@@ -21108,23 +21214,23 @@ const ContextMenuItem = styled(Item, {
   userSelect: 'none',
   color: '$textPrimary',
   '&[data-disabled]': {
-    color: colors$7.gray400,
+    color: colors$8.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: colors$7.gray100
+    backgroundColor: colors$8.gray100
   },
   '&:active': {
-    backgroundColor: colors$7.gray150
+    backgroundColor: colors$8.gray150
   },
   '&:focus': {
-    backgroundColor: colors$7.gray100
+    backgroundColor: colors$8.gray100
   }
 });
 const ContextMenuSeparator = styled('div', {
   height: 1,
-  backgroundColor: colors$7.gray150,
+  backgroundColor: colors$8.gray150,
   margin: 5
 });
 
@@ -21433,7 +21539,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                           justify: "between",
                           gap: 5,
                           css: {
-                            backgroundColor: colors$7.bgGray,
+                            backgroundColor: colors$8.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'
@@ -21468,7 +21574,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       gap: 3,
                       css: {
                         height: '40px',
-                        backgroundColor: colors$7.bgGray,
+                        backgroundColor: colors$8.bgGray,
                         paddingRight: '$spacing-04'
                       }
                     }, {
@@ -22411,7 +22517,7 @@ function Table({
                     }, {
                       children: [leftAddOnCells.map((_, index) => jsx("td", {
                         style: {
-                          backgroundColor: colors$7.bgGray
+                          backgroundColor: colors$8.bgGray
                         }
                       }, index)), jsxs(React.Fragment, {
                         children: [jsx(TableCell$3, Object.assign({
@@ -23138,7 +23244,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors$7.bgDimmer,
+  backgroundColor: colors$8.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -23171,14 +23277,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors$7.gray900,
+  color: colors$8.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription$1 = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors$7.gray900,
+  color: colors$8.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -23835,17 +23941,17 @@ const itemStyles = {
   position: 'relative',
   userSelect: 'none',
   '&[data-disabled]': {
-    color: colors$7.gray400,
+    color: colors$8.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer'
   },
   '&:active': {
-    backgroundColor: colors$7.gray150
+    backgroundColor: colors$8.gray150
   },
   '&:focus': {
-    backgroundColor: colors$7.gray100
+    backgroundColor: colors$8.gray100
   }
 };
 const StyledItem = styled(DropdownMenuPrimitive.Item, Object.assign({}, itemStyles));
@@ -23862,11 +23968,11 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors$7.gray700
+  color: colors$8.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors$7.gray150,
+  backgroundColor: colors$8.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -23963,7 +24069,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors$7.gray400
+    color: colors$8.gray400
   }
 });
 const StyledDropdown = styled(Button$4, {
@@ -27739,7 +27845,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLeftOutline, {
-        color: colors$7.btnPrimary
+        color: colors$8.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -27799,7 +27905,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors$7.btnPrimary
+        color: colors$8.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -30878,7 +30984,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors$7.bgGreen,
+        color: colors$8.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -30899,7 +31005,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors$7.iconSecondary,
+        color: colors$8.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -30971,7 +31077,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors$7.iconPrimary,
+        color: colors$8.iconPrimary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -31398,10 +31504,10 @@ var _jsxFileName$2 = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packag
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
-    borderLeft: `4px solid ${colors$7.primary500} !important`
+    borderLeft: `4px solid ${colors$8.primary500} !important`
   },
   '& .active-scroll-spy .link-title': {
-    color: `${colors$7.primary500} !important`
+    color: `${colors$8.primary500} !important`
   },
   '@md': {
     display: 'unset'
@@ -31409,7 +31515,7 @@ const DesktopContainer = styled(Flex$1, {
 });
 const MobileContainer = styled(Flex$1, {
   backgroundColor: '$white',
-  border: `1px solid ${colors$7.gray150}`,
+  border: `1px solid ${colors$8.gray150}`,
   borderRadius: 8,
   padding: '8px 8px',
   width: '100%',
@@ -31536,7 +31642,7 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$7.primary500 : 'transparent'} !important`,
+        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$8.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
@@ -50084,11 +50190,11 @@ function ProgressIndicator(props) {
     const getColor = state => {
       switch (state) {
         case 'error':
-          return colors$7.red400;
+          return colors$8.red400;
         case 'active':
-          return colors$7.primary500;
+          return colors$8.primary500;
         default:
-          return colors$7.gray150;
+          return colors$8.gray150;
       }
     };
     const iconProps = {
@@ -51976,7 +52082,7 @@ function CheckboxTable(props) {
                       }
                     }, void 0) : jsx(MinusOutline, {
                       size: 16,
-                      color: colors$7.iconDisable
+                      color: colors$8.iconDisable
                     }, void 0)
                   }, void 0)
                 }), index + indexSubRow + 'tb-cell-collapse');
@@ -52281,9 +52387,9 @@ const StyledSkeleton = props => {
   function getBaseColor(color) {
     switch (color) {
       case 'primary':
-        return colors$7.gray300;
+        return colors$8.gray300;
       default:
-        return colors$7.gray150;
+        return colors$8.gray150;
     }
   }
   function getSize(size) {
@@ -52437,9 +52543,9 @@ function TagList({
         }
       }, {
         children: [showAllTags ? jsx(ChevronUpOutline, {
-          color: colors$7.iconSecondary
+          color: colors$8.iconSecondary
         }, void 0) : jsx(ChevronDownOutline, {
-          color: colors$7.iconSecondary
+          color: colors$8.iconSecondary
         }, void 0), jsx(Paragraph, Object.assign({
           css: {
             fontWeight: 600,
@@ -54463,4 +54569,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };