@majoo-ui/react 1.61.14-rc.7 → 1.61.15-rc.1

package/index.esm.js

@@ -57,7 +57,7 @@ import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 import SignaturePad from 'react-signature-pad-wrapper';
 
-var _jsxFileName$13 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+var _jsxFileName$13 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 function ThemeProvider({
   name,
   theme,
@@ -1244,7 +1244,7 @@ createTheme({
     bgBorder: '#004a49'
   }
 });
-const colors$7 = foundations.colors;
+const colors$8 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -1414,7 +1414,7 @@ const applyGlobalStyles = additionaStyles => {
   globalStyles();
 };
 
-var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+var _jsxFileName$12 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 function MajooProvider({
   children,
   name,
@@ -1637,7 +1637,7 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 const _excluded$C = ["children"],
   _excluded2$4 = ["children"];
-var _jsxFileName$11 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/grid/Grid.js";
+var _jsxFileName$11 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/layout/grid/Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -1907,7 +1907,7 @@ GridItem.propTypes = {
 GridItem.displayName = 'Grid Item';
 
 const _excluded$B = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$10 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
+var _jsxFileName$10 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
 const StyledDiv$2 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -2415,7 +2415,7 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 });
 
 const _excluded$A = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
-var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
+var _jsxFileName$$ = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/banner/Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -2629,7 +2629,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: {
@@ -2715,7 +2715,7 @@ const SingleTagBanner = props => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3412,7 +3412,7 @@ Card.Label = StyledLabel$2;
 Card.Description = StyledDescription$3;
 
 const _excluded$z = ["children"];
-var _jsxFileName$_ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+var _jsxFileName$_ = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -3732,7 +3732,7 @@ Badge.defaultProps = {
 Badge.displayName = 'Badge';
 
 const _excluded$y = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$Z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+var _jsxFileName$Z = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/avatar/Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -3834,7 +3834,7 @@ Avatar.defaultProps = {
 };
 
 const _excluded$x = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
+var _jsxFileName$Y = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/image/Image.js";
 const ContainerFallback = styled(Flex$1, {
   boxSizing: 'border-box',
   border: '2px dashed #C0C4C4',
@@ -4528,7 +4528,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 const _excluded$w = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
-var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+var _jsxFileName$X = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
 const {
   zIndices: zIndices$2
 } = foundations;
@@ -4734,7 +4734,7 @@ Tooltip$1.defaultProps = {
 };
 
 const _excluded$v = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
+var _jsxFileName$W = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/progress/Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -5608,7 +5608,7 @@ function useMediaQuery(query) {
 }
 
 const _excluded$u = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
+var _jsxFileName$V = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -5919,7 +5919,7 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$7.iconSecondary,
+    color: colors$8.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -5961,7 +5961,7 @@ Toast.defaultProps = {
 };
 
 const _excluded$t = ["preventDuplicate"];
-var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+var _jsxFileName$U = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -7311,7 +7311,7 @@ const catchError = e => {
 };
 
 const _excluded$s = ["id", "disabledOfflineIntercept"];
-var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+var _jsxFileName$T = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
 let toastCount = 0;
 const ToastProvider = ({
   children,
@@ -7432,7 +7432,7 @@ const ConditionalWrapper = ({
 }) => condition ? wrapper(children) : children;
 
 const _excluded$r = ["count", "maxCount", "css"];
-var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+var _jsxFileName$S = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
 const formLabelClassStyle = {
   alignItems: 'start !important',
   '& > div': {
@@ -7583,7 +7583,7 @@ const FormGroup = _ref => {
 FormGroup.displayName = 'FormGroup';
 
 const _excluded$q = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
-var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+var _jsxFileName$R = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -7700,7 +7700,7 @@ FormLabel.defaultProps = {
 FormLabel.displayName = 'FormLabel';
 
 const _excluded$p = ["children", "error", "errorMessage"];
-var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+var _jsxFileName$Q = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -7755,7 +7755,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
+var _jsxFileName$P = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 const CheckboxGroup = ({
   children,
@@ -7813,7 +7813,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$O = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+var _jsxFileName$O = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -7860,7 +7860,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   }
 }));
 
-var _jsxFileName$N = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+var _jsxFileName$N = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -7908,7 +7908,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }));
 
 const _excluded$o = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$M = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+var _jsxFileName$M = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -8069,7 +8069,7 @@ InputCheckbox.propTypes = {
 InputCheckbox.displayName = 'InputCheckbox';
 
 const _excluded$n = ["children", "size"];
-var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+var _jsxFileName$L = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -8409,7 +8409,7 @@ InputSuffix.propTypes = {
 };
 
 const _excluded$m = ["disabled", "readOnly"];
-var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
+var _jsxFileName$K = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -8611,7 +8611,7 @@ InputText.propTypes = {
 InputText.displayName = 'InputText';
 
 const _excluded$l = ["disabled", "readOnly"];
-var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
+var _jsxFileName$J = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
 const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
@@ -8689,7 +8689,7 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__default.createContext();
 
-var _jsxFileName$I = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
+var _jsxFileName$I = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
   return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
@@ -8723,7 +8723,7 @@ InputRadioGroup.propTypes = {
 InputRadioGroup.displayName = 'InputRadioGroup';
 
 const _excluded$k = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
-var _jsxFileName$H = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+var _jsxFileName$H = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -11090,7 +11090,7 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
 NumberFormat.defaultProps = defaultProps;
 
 const _excluded$j = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
-var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
+var _jsxFileName$G = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
 const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
@@ -11351,7 +11351,7 @@ InputNumber.name = 'InputText';
 InputNumber.displayName = 'InputNumber';
 
 const _excluded$i = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
-var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tag/Tag.js";
+var _jsxFileName$F = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tag/Tag.js";
 const TagWrapper$4 = styled('div', {
   boxSizing: 'border-box',
   listStyle: 'none',
@@ -11497,7 +11497,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'
     },
@@ -11527,7 +11527,7 @@ Tag.defaultProps = {
 };
 
 const _excluded$h = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
-var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+var _jsxFileName$E = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
 const Wrapper$2 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -11824,7 +11824,7 @@ TagsInput.defaultProps = {
 };
 
 const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+var _jsxFileName$D = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
 const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
@@ -11929,7 +11929,7 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-var _jsxFileName$C = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+var _jsxFileName$C = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
 const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
   height: props.size,
@@ -11988,7 +11988,7 @@ SvgCloseFilled.defaultProps = {
   size: 24
 };
 
-var _jsxFileName$B = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+var _jsxFileName$B = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
 const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
   height: props.size,
@@ -12029,9 +12029,9 @@ SvgSearchOutline.defaultProps = {
 };
 
 const _excluded$f = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
-var _jsxFileName$A = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+var _jsxFileName$A = "/Users/hangga/sourcecode/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;
@@ -12111,7 +12111,7 @@ const InputSearchbox = _ref => {
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     children: (inputValue == null ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
-      color: colors$6.iconSecondary,
+      color: colors$7.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$A,
@@ -12519,7 +12519,7 @@ function isFunction$1(value) {
 var isFunction_1 = isFunction$1;
 
 const _excluded$e = ["children"];
-var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
+var _jsxFileName$z = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/popover/Popover.js";
 const {
   zIndices: zIndices$1
 } = foundations;
@@ -13683,7 +13683,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);
       };
@@ -13904,7 +13904,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'
                             }
@@ -14073,7 +14073,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'
                           }
@@ -14093,7 +14093,7 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }), void 0);
 });
 
-var _jsxFileName$y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
+var _jsxFileName$y = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -14174,7 +14174,7 @@ function OptionGroupItem({
 }
 
 const _excluded$d = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions", "clearSearchOnSelect", "onItemClick"];
-var _jsxFileName$x = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
+var _jsxFileName$x = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -14919,7 +14919,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: colors$7.iconDisable,
+      color: colors$8.iconDisable,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
@@ -14927,7 +14927,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 17
       }
     }) : 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$x,
@@ -15001,7 +15001,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-        color: colors$7.iconDisable,
+        color: colors$8.iconDisable,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
@@ -15009,7 +15009,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) === (item == null || (_item$children7 = item.children) == null || (_item$children7 = _item$children7.filter(e => !e.isDisabled)) == null ? void 0 : _item$children7.length) ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-        color: colors$7.iconGreen,
+        color: colors$8.iconGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
@@ -15123,7 +15123,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$x,
@@ -15244,7 +15244,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$x,
@@ -15252,7 +15252,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$x,
@@ -15418,7 +15418,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'
     },
@@ -15498,7 +15498,7 @@ InputSelectCheck.defaultProps = {
   onItemClick: changes => {}
 };
 
-var _jsxFileName$w = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+var _jsxFileName$w = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
 const InputSelectTag = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InputSelectCheck, _extends({
     ref: ref,
@@ -15559,7 +15559,7 @@ InputSelectTag.defaultProps = {
   defaultValue: []
 };
 
-var _jsxFileName$v = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
+var _jsxFileName$v = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -15778,7 +15778,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors$7.iconGreen,
+    color: colors$8.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$v,
@@ -15823,39 +15823,16 @@ const SortingIcon = styled(Flex$1, {
   alignItems: 'center',
   justifyContent: 'center'
 });
-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'
-});
 function InputResourceList({
   data: dataProp,
   disabled = false,
-  onChange,
+  onItemCheck,
+  onItemUncheck,
   searchPlaceholder,
   counterFooter = true,
   counterFooterText,
   isLoading = false,
-  disabledItems,
+  enabledItems,
   emptyDataMessage,
   value,
   fetchData,
@@ -15866,29 +15843,25 @@ function InputResourceList({
   title,
   hideSelectAll,
   customHeader,
-  expandable,
-  renderSelectAll
+  checkDisableItems
 }) {
   const {
     t
   } = useTranslation(['MajooUI/inputResourceList', 'translation']);
-  const [query, setQuery] = useState('');
+  const [checkedResources, setCheckedResources] = useState([]);
+  const [query, setQuery] = useState();
   const [sortType, setSortType] = useState('asc');
   const [data, setData] = useState([]);
-  const [expand, setExpand] = useState(false);
-  const isValueString = typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string';
-  const checkedItems = useMemo(() => {
-    if (!value) return [];
-    if (isValueString) {
-      return data.filter(item => value.includes(item.value));
-    }
-    return value;
-  }, [value, data, isValueString]);
+  const filteredValue = useMemo(() => {
+    const dataValues = data.map(({
+      value
+    }) => value);
+    return (value || []).filter(x => dataValues.includes(x.value));
+  }, [JSON.stringify(value), JSON.stringify(data)]);
   const scrollerRef = useRef(null);
   useEffect(() => {
     function filterUnique(params) {
-      if (!params) return;
-      const unique = params.filter((obj, index) => params.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value)) === index);
+      const unique = params === null || params === void 0 ? void 0 : params.filter((obj, index) => (params === null || params === void 0 ? void 0 : params.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value))) === index);
       setData(unique);
     }
     filterUnique(dataProp);
@@ -15904,25 +15877,9 @@ function InputResourceList({
       setSortType(defaultSort);
     }
   }, [defaultSort]);
-  const availableData = useMemo(() => {
-    if (!data) return [];
-    const filteredData = data.filter(item => item.label.toLowerCase().match((query === null || query === void 0 ? void 0 : query.toLowerCase()) || ''));
-    const checkedValues = new Set(checkedItems.map(item => item.value));
-    return filteredData.sort((a, b) => {
-      const aIsChecked = checkedValues.has(a.value);
-      const bIsChecked = checkedValues.has(b.value);
-      if (aIsChecked && !bIsChecked) {
-        return -1;
-      }
-      if (!aIsChecked && bIsChecked) {
-        return 1;
-      }
-      return a.label.localeCompare(b.label);
-    });
-  }, [data, query, checkedItems]);
   const renderCheckbox = (resource, index) => {
     var _a, _b;
-    const isDisabled = resource.disabled || disabledItems && disabledItems.includes(resource.value);
+    const isDisabled = resource.disabled || enabledItems && (!enabledItems.find(id => id === resource.value) || enabledItems.length === 0);
     return jsxs(Flex$1, Object.assign({
       align: "center",
       justify: "between"
@@ -15934,7 +15891,7 @@ function InputResourceList({
         children: [jsxs(Flex$1, Object.assign({
           align: "center"
         }, {
-          children: [jsx(InputCheckbox, {
+          children: [jsx(InputCheckbox, Object.assign({
             label: jsxs(Flex$1, Object.assign({
               gap: 3,
               align: "center"
@@ -15959,14 +15916,16 @@ function InputResourceList({
                 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({
+          }, Object.assign({}, checkDisableItems && isDisabled && {
+            checked: isDisabled
+          })), void 0), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsx(Box, Object.assign({
             css: {
               marginLeft: '$spacing-03'
             }
@@ -16031,44 +15990,84 @@ function InputResourceList({
   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() {
-    const allAvailableItemsSelected = availableData.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value));
-    if (allAvailableItemsSelected) {
-      const newCheckedItems = checkedItems.filter(checkedItem => !availableData.some(item => item.value === checkedItem.value));
-      onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
-    } else {
-      const newCheckedItems = [...checkedItems, ...availableData.filter(item => !checkedItems.some(checkedItem => checkedItem.value === item.value))];
-      onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
-    }
-  }
-  function handleCheckedAllExpandable() {
-    const allItems = data || [];
-    const allItemValues = allItems.map(i => i.value);
-    const currentValues = checkedItems.map(i => i.value);
-    const areAllSelected = allItems.length > 0 && allItems.every(item => currentValues.includes(item.value));
-    let newCheckedItems;
-    if (areAllSelected) {
-      newCheckedItems = checkedItems.filter(item => !allItemValues.includes(item.value));
+    if ((filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) && (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) < (data === null || data === void 0 ? void 0 : data.length) || (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) === (data === null || data === void 0 ? void 0 : data.length)) {
+      for (let i = 0; i < filteredValue.length; i++) {
+        onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue[i]);
+      }
     } else {
-      const itemsToAdd = allItems.filter(item => !currentValues.includes(item.value));
-      newCheckedItems = [...checkedItems, ...itemsToAdd];
+      for (let i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i++) {
+        const isEnabled = enabledItems ? enabledItems.find(id => id === (data === null || data === void 0 ? void 0 : data[i].value)) || enabledItems.length === 0 : true;
+        if (isEnabled) onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data === null || data === void 0 ? void 0 : data[i]);
+      }
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
   }
-  const listContent = jsxs(Box, Object.assign({
+  return jsxs(Box, Object.assign({
     css: Object.assign({
       position: 'relative'
     }, css)
   }, {
-    children: [customHeader, onQueryChange && jsx(InputSearchbox, Object.assign({
+    children: [customHeader, onQueryChange && jsx(InputSearchbox, {
       size: "lg",
-      placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...'),
+      placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...', {
+        ns: 'translation'
+      }),
       onChange: debounce(query => {
         setQuery(query);
-        if (onQueryChange) onQueryChange(query);
+        onQueryChange(query);
       }, 1000),
       disabled: disabled
-    }, {}), void 0), defaultSort && jsxs(Flex$1, Object.assign({
+    }, void 0), defaultSort && jsxs(Flex$1, Object.assign({
       align: "center",
       gap: 3,
       css: {
@@ -16077,8 +16076,8 @@ function InputResourceList({
       }
     }, {
       children: [!hideSelectAll && jsx(InputCheckbox, {
-        checked: availableData.length > 0 && availableData.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value)),
-        indeterminate: availableData.some(item => checkedItems.some(checkedItem => checkedItem.value === item.value)) && !availableData.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value)),
+        checked: (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) === (data === null || data === void 0 ? void 0 : data.length) && data.length > 0,
+        indeterminate: Boolean((filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) && (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) < (data === null || data === void 0 ? void 0 : data.length)),
         onCheckedChange: toggleCheckAll,
         css: {
           marginRight: '$spacing-02'
@@ -16092,7 +16091,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({
@@ -16127,7 +16126,7 @@ function InputResourceList({
       }, wrapperCss && wrapperCss),
       ref: scrollerRef
     }, {
-      children: [data.length <= 0 && checkedItems.length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsx(Flex$1, Object.assign({
+      children: [data.length <= 0 && (value || checkedResources).length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsx(Flex$1, Object.assign({
         justify: "center",
         align: "center",
         css: {
@@ -16160,27 +16159,9 @@ function InputResourceList({
           children: children
         }), void 0)
       }, {
-        children: jsx(Flex$1, Object.assign({
-          direction: "column",
-          gap: 3
-        }, {
-          children: jsx(CheckboxGroup, Object.assign({
-            onChange: (_, index) => {
-              const datasets = defaultSort ? sorting(availableData, sortType) : availableData;
-              const newCheckedItems = (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.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);
-              })) ? checkedItems.filter(val => val.value !== datasets[index].value) : [...(checkedItems || []), datasets[index]];
-              onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
-            },
-            value: checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.map(item => item === null || item === void 0 ? void 0 : item.value),
-            disabled: disabled
-          }, {
-            children: (defaultSort ? sorting(availableData, sortType) : availableData).map(renderCheckbox)
-          }), void 0)
-        }), void 0)
+        children: defaultSort ? renderWithSorting() : renderWithoutSorting()
       }), void 0)]
-    }), void 0), counterFooter && checkedItems.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'
       }
@@ -16189,48 +16170,119 @@ function InputResourceList({
         variant: "helper",
         color: disabled ? 'disable' : 'green'
       }, {
-        children: `${checkedItems.length} ${counterFooterText || t('counterFooterText', 'kategori dipilih')}`
+        children: `${(value === null || value === void 0 ? void 0 : value.length) || checkedResources.length} ${counterFooterText || t('counterFooterText', 'kategori dipilih')}`
       }), void 0)
     }), void 0)]
   }), void 0);
-  if (expandable) {
-    const allItems = data || [];
-    const checkedValues = checkedItems.map(i => i.value);
-    const isAllSelected = allItems.length > 0 && allItems.every(item => checkedValues.includes(item.value));
-    const isIndeterminate = !isAllSelected && allItems.some(item => checkedValues.includes(item.value));
-    return jsxs(Box, {
+}
+
+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([]);
+  useEffect(() => {
+    if (value) {
+      setCheckedItem(value);
+    }
+  }, [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({
-        justify: "between",
-        align: "start"
+        gap: 5
       }, {
-        children: [jsxs(Flex$1, Object.assign({
-          gap: 5
-        }, {
-          children: [jsx(IconBox, Object.assign({
-            onClick: handleCheckedAllExpandable,
-            border: !isAllSelected && !isIndeterminate
-          }, {
-            children: isAllSelected ? jsx(CheckOutline, {
-              color: colors$7.iconGreen
-            }, void 0) : isIndeterminate ? jsx(IndeterminateFilled, {
-              children: "-"
-            }, void 0) : ''
-          }), void 0), renderSelectAll]
-        }), void 0), jsx(Box, Object.assign({
-          css: {
-            cursor: 'pointer'
-          },
-          onClick: () => setExpand(!expand)
+        children: [jsx(IconBox, Object.assign({
+          onClick: handleCheckedAll,
+          border: Boolean(!(checkedItem === null || checkedItem === void 0 ? void 0 : checkedItem.length))
         }, {
-          children: expand ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
-        }), void 0)]
-      }), void 0), jsx(Box, {
-        children: expand && listContent
-      }, void 0)]
-    }, void 0);
-  }
-  return listContent;
-}
+          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 {
@@ -16642,7 +16694,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,
@@ -16665,7 +16717,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);
@@ -16678,7 +16730,7 @@ InputCounter.defaultProps = {
 
 const _excluded$c = ["children"],
   _excluded2$3 = ["children", "showOverlay"];
-var _jsxFileName$u = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+var _jsxFileName$u = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/drawer/Drawer.js";
 const Context$1 = /*#__PURE__*/React__default.createContext();
 const {
   sizes
@@ -17028,7 +17080,7 @@ DrawerCloseButton.displayName = 'DrawerCloseButton';
 
 const _excluded$b = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size", "withMaxWidth", "mobileOnly", "desktopOnly"],
   _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+var _jsxFileName$t = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
 const ScrollButton$1 = styled(Button$4, {
   width: '28px',
   outline: '$btnPrimary solid 1px',
@@ -17277,7 +17329,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$t,
@@ -17307,7 +17359,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$t,
@@ -17557,7 +17609,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
+var _jsxFileName$s = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
 const Input$3 = styled('input', {
   display: 'none'
 });
@@ -18113,7 +18165,7 @@ TimePicker.propTypes = {
 };
 NativeTimePicker.displayName = 'NativeTimePicker';
 
-var _jsxFileName$r = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
+var _jsxFileName$r = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
 const getInputPickerValue$1 = date => {
   if (!date) return;
   return moment(date).format('HH:mm');
@@ -18161,7 +18213,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$r,
@@ -20968,7 +21020,7 @@ function InputSignature({
 }
 
 const _excluded$a = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-var _jsxFileName$q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
+var _jsxFileName$q = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/slider/Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -21312,7 +21364,7 @@ Slider.defaultProps = {
 };
 
 const _excluded$9 = ["className", "children", "onClick", "type", "size"];
-var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
+var _jsxFileName$p = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
 const TagWrapper$1 = styled('div', {
   boxSizing: 'border-box',
   fontSize: '12px',
@@ -21475,7 +21527,7 @@ const _excluded$8 = ["children"],
   _excluded2$1 = ["children", "activeTabs"],
   _excluded3$1 = ["children", "icon", "activeTabs", "value"],
   _excluded4 = ["activeTabs"];
-var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tabs/Tabs.js";
+var _jsxFileName$o = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tabs/Tabs.js";
 const StyledTabs = styled(TabsPrimitive.Root, {
   display: 'flex',
   flexDirection: 'column',
@@ -21701,7 +21753,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$o,
@@ -21730,7 +21782,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$o,
@@ -21790,7 +21842,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)));
 };
 TabsTrigger$1.propTypes = {
@@ -21814,7 +21866,7 @@ TabsContent$1.propTypes = {
 };
 
 const _excluded$7 = ["children", "variantIcon"];
-var _jsxFileName$n = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
+var _jsxFileName$n = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -21969,7 +22021,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
+var _jsxFileName$m = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/paper/Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -22222,7 +22274,7 @@ const removeUndefinedFields = obj => {
 };
 
 const _excluded$5 = ["isActive", "onClick"];
-var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
+var _jsxFileName$l = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
 const PrevNextButton = styled(Text$1, {
   padding: '$spacing-01',
   cursor: 'pointer',
@@ -22286,7 +22338,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$l,
@@ -22294,7 +22346,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$l,
@@ -22716,7 +22768,7 @@ const PaginationButton = ({
 };
 
 const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
-var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
+var _jsxFileName$k = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
 const LimitContainer = styled(Flex$1, {
   cursor: 'pointer'
 });
@@ -22812,7 +22864,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$k,
@@ -22951,7 +23003,7 @@ function PaginationInfo(_ref) {
 }
 
 const _excluded$3 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
-var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
+var _jsxFileName$j = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/pagination/Pagination.js";
 function Pagination(_ref) {
   let {
       limit,
@@ -23126,23 +23178,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
 });
 
@@ -23825,7 +23877,7 @@ const ScrollSyncNode = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 });
 ScrollSyncNode.displayName = 'ScrollSyncNode';
 
-var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowDraggableColumn.js";
+var _jsxFileName$i = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowDraggableColumn.js";
 const DragHandle = SortableHandle(() => /*#__PURE__*/React__default.createElement(IconButton, {
   icon: true,
   size: "xs",
@@ -24558,8 +24610,9 @@ function Table({
     totalPage: totalPage,
     onLimitChange: selectedItem => {
       if (selectedItem) {
-        const isResetPageIndex = selectedItem > pageSize;
-        doFetchData(isResetPageIndex ? 0 : pageIndex, selectedItem);
+        // always reset page when limit changed
+        gotoPage(0);
+        doFetchData(0, selectedItem);
         setPageSize(selectedItem);
         setLimit(selectedItem);
       }
@@ -25320,7 +25373,7 @@ const TableColumn = _a => {
   return jsx("div", {}, void 0);
 };
 
-var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
+var _jsxFileName$h = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
 const DateColumn = ({
   value,
   customFormat
@@ -25432,7 +25485,7 @@ const PriceColumn = props => {
   return addThousandSeparator(param);
 };
 
-var _jsxFileName$g = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
+var _jsxFileName$g = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
 const rowExpanderColumn = {
   id: 'expander',
   Header: () => null,
@@ -25475,7 +25528,7 @@ const rowExpanderColumn = {
   unsortable: true
 };
 
-var _jsxFileName$f = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
+var _jsxFileName$f = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
 const rowExpanderMultipleColumn = {
   id: 'multiple-expander',
   Header: () => null,
@@ -25511,7 +25564,7 @@ const rowExpanderMultipleColumn = {
   unsortable: true
 };
 
-var _jsxFileName$e = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
+var _jsxFileName$e = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
   options,
@@ -25648,7 +25701,7 @@ const rowMenuColumn = (options, icon, config) => ({
   unsortable: true
 });
 
-var _jsxFileName$d = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
+var _jsxFileName$d = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
 const rowSelectionColumn = {
   id: 'selection',
   Header: ({
@@ -25697,7 +25750,7 @@ const rowSelectionColumn = {
   unsortable: true
 };
 
-var _jsxFileName$c = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
+var _jsxFileName$c = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
 const rowSelectionWithCallbackColumn = (onCheckedChange, onAllCheckedChange) => ({
   id: 'selection',
   Header: ({
@@ -26035,7 +26088,7 @@ PageDialog.defaultProps = {
 };
 
 const _excluded$2 = ["children"];
-var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
+var _jsxFileName$b = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -26056,7 +26109,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)': {
@@ -26089,14 +26142,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
 });
@@ -26670,7 +26723,7 @@ const AlertDialogConfirm = ADialog.Action;
 const _excluded$1 = ["side", "align", "children"],
   _excluded2 = ["children"],
   _excluded3 = ["asChild"];
-var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
+var _jsxFileName$a = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
 const Context = /*#__PURE__*/React__default.createContext();
 const slideUpAndFade = keyframes({
   '0%': {
@@ -26754,17 +26807,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));
@@ -26786,11 +26839,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, {
@@ -26899,7 +26952,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors$7.gray400
+    color: colors$8.gray400
   }
 });
 const StyledDropdown = styled(Button$4, {
@@ -28950,7 +29003,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
 }
 
 const _excluded = ["customPreviewIcon"];
-var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
+var _jsxFileName$9 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/upload/Upload.js";
 const Input$2 = styled('input', {
   display: 'none !important'
 });
@@ -30917,7 +30970,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",
@@ -30977,14 +31030,14 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors$7.btnPrimary
+        color: colors$8.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
 };
 Device.displayName = 'DevicePreview';
 
-var _jsxFileName$8 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
+var _jsxFileName$8 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
 const Separator$1 = styled('div', {
   height: 20,
   width: 1,
@@ -31145,7 +31198,7 @@ InputColorPicker.defaultProps = {
 
 var img$d = "data:image/gif;base64,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";
 
-var _jsxFileName$7 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
+var _jsxFileName$7 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
 const Container$7 = styled('div', {
   userSelect: 'none',
   margin: 'auto',
@@ -33106,7 +33159,7 @@ function ColorMap({
   })));
 }
 
-var _jsxFileName$6 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
+var _jsxFileName$6 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
 const CheckBoard = styled(Flex$1, {
   background: '$bgwhite',
   border: '1px solid #E5E7EB',
@@ -33307,7 +33360,7 @@ function ColorFields({
   }, "%")));
 }
 
-var _jsxFileName$5 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
+var _jsxFileName$5 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
 const Container$6 = styled(Flex$1, {
   background: '$white',
   padding: 16,
@@ -33824,7 +33877,7 @@ ColorPicker.defaultProps = {
 };
 var ColorPicker$1 = ColorWrap(ColorPicker);
 
-var _jsxFileName$4 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
+var _jsxFileName$4 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
 const StepWizardContext = /*#__PURE__*/React__default.createContext({});
 const Stepper = StepWizard$1;
 Stepper.displayName = 'Stepper';
@@ -34078,7 +34131,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors$7.bgGreen,
+        color: colors$8.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -34099,7 +34152,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors$7.iconSecondary,
+        color: colors$8.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -34171,7 +34224,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,
@@ -34547,7 +34600,7 @@ StepWizard.defaultProps = {
   isLazyMount: true
 };
 
-var _jsxFileName$3 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
+var _jsxFileName$3 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
 function Collapse({
   children,
   isOpen
@@ -34590,14 +34643,14 @@ Collapse.defaultProps = {
   isOpen: false
 };
 
-var _jsxFileName$2 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
+var _jsxFileName$2 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
 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'
@@ -34605,7 +34658,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%',
@@ -34732,7 +34785,7 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$7.primary500 : 'transparent'} !important`,
+        borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$8.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
@@ -34951,7 +35004,7 @@ TableOfContentPage.defaultProps = {
   useBoxMethod: true
 };
 
-var _jsxFileName$1 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/editableTable/transition.js";
+var _jsxFileName$1 = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/components/editableTable/transition.js";
 function Collapalse({
   children,
   isOpen
@@ -53404,11 +53457,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 = {
@@ -53967,8 +54020,8 @@ function MapPicker(props) {
           center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
           radius: radius,
           pathOptions: {
-            color: colors$7.bgGreen,
-            fillColor: colors$7.bgGreen
+            color: colors$8.bgGreen,
+            fillColor: colors$8.bgGreen
           }
         }, void 0), jsx(TileLayer, {
           url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -55474,7 +55527,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');
@@ -55779,9 +55832,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) {
@@ -55935,9 +55988,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,
@@ -56465,7 +56518,7 @@ PieChartComponent.defaultProps = {
   innerRadius: 70
 };
 
-var _jsxFileName = "/home/alfiantryp/Project/majoo-ui/packages/react/src/colors/Colors.js";
+var _jsxFileName = "/Users/hangga/sourcecode/majoo-ui/packages/react/src/colors/Colors.js";
 const StyledPaper = styled(Paper, {
   borderRadius: '10px 10px 0 0',
   padding: 15,
@@ -57767,4 +57820,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, Cell, 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, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, 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, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, 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, ToastProvider, 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, Cell, 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, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, 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, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, 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, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };