@majoo-ui/react 1.61.19-rc.1 → 1.61.19-rc.3

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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$13 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 function ThemeProvider({
   name,
   theme,
@@ -403,10 +403,10 @@ var SHARED = '__core-js_shared__';
 var store$3 = sharedStore.exports = globalThis$p[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.44.0',
+  version: '3.45.0',
   mode: 'global',
   copyright: '© 2014-2025 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.44.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.45.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1414,7 +1414,7 @@ const applyGlobalStyles = additionaStyles => {
   globalStyles();
 };
 
-var _jsxFileName$12 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$12 = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$11 = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+var _jsxFileName$10 = "/home/alfiantryp/Project/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$$ = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3412,7 +3412,7 @@ Card.Label = StyledLabel$2;
 Card.Description = StyledDescription$3;
 
 const _excluded$z = ["children"];
-var _jsxFileName$_ = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+var _jsxFileName$_ = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+var _jsxFileName$Z = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+var _jsxFileName$Y = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+var _jsxFileName$X = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+var _jsxFileName$W = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -5961,7 +5961,7 @@ Toast.defaultProps = {
 };
 
 const _excluded$t = ["preventDuplicate"];
-var _jsxFileName$U = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$U = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+var _jsxFileName$T = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
+var _jsxFileName$S = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+var _jsxFileName$R = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+var _jsxFileName$Q = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$P = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$O = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$N = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+var _jsxFileName$M = "/home/alfiantryp/Project/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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -8239,12 +8239,12 @@ const InputGroup = _ref => {
   }));
 };
 InputGroup.propTypes = {
-  /**
-    Adjust Input Text Size
+  /**
+    Adjust Input Text Size
    */
   size: PropTypes.oneOf(['sm', 'lg']),
-  /**
-    Children must be InputText, InputAddon, or InputPrefixes
+  /**
+    Children must be InputText, InputAddon, or InputPrefixes
    */
   children: PropTypes.node.isRequired,
   /** Error state */
@@ -8418,7 +8418,7 @@ InputSuffix.propTypes = {
 };
 
 const _excluded$m = ["disabled", "readOnly"];
-var _jsxFileName$K = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
+var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -8548,8 +8548,8 @@ const StyledInput$1 = styled('input', {
         }
       }
     },
-    /**
-     * Please insert size with string 'sm' | 'lg'
+    /**
+     * Please insert size with string 'sm' | 'lg'
      */
     size: {
       sm: {
@@ -8620,7 +8620,7 @@ InputText.propTypes = {
 InputText.displayName = 'InputText';
 
 const _excluded$l = ["disabled", "readOnly"];
-var _jsxFileName$J = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
+var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
 const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
@@ -8698,7 +8698,7 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__default.createContext();
 
-var _jsxFileName$I = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+var _jsxFileName$I = "/home/alfiantryp/Project/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, {
@@ -8732,7 +8732,7 @@ InputRadioGroup.propTypes = {
 InputRadioGroup.displayName = 'InputRadioGroup';
 
 const _excluded$k = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
-var _jsxFileName$H = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+var _jsxFileName$H = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -11099,7 +11099,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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputNumber\\InputNumber.js";
+var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
 const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
@@ -11360,7 +11360,7 @@ InputNumber.name = 'InputText';
 InputNumber.displayName = 'InputNumber';
 
 const _excluded$i = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
-var _jsxFileName$F = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tag/Tag.js";
 const TagWrapper$4 = styled('div', {
   boxSizing: 'border-box',
   listStyle: 'none',
@@ -11536,7 +11536,7 @@ Tag.defaultProps = {
 };
 
 const _excluded$h = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
-var _jsxFileName$E = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
 const Wrapper$2 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -11833,7 +11833,7 @@ TagsInput.defaultProps = {
 };
 
 const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$D = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
 const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
@@ -11938,7 +11938,7 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-var _jsxFileName$C = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
+var _jsxFileName$C = "/home/alfiantryp/Project/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,
@@ -11997,7 +11997,7 @@ SvgCloseFilled.defaultProps = {
   size: 24
 };
 
-var _jsxFileName$B = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
+var _jsxFileName$B = "/home/alfiantryp/Project/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,
@@ -12038,7 +12038,7 @@ SvgSearchOutline.defaultProps = {
 };
 
 const _excluded$f = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
-var _jsxFileName$A = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
+var _jsxFileName$A = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 const {
   colors: colors$6
 } = foundations;
@@ -12528,7 +12528,7 @@ function isFunction$1(value) {
 var isFunction_1 = isFunction$1;
 
 const _excluded$e = ["children"];
-var _jsxFileName$z = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
 const {
   zIndices: zIndices$1
 } = foundations;
@@ -12891,14 +12891,16 @@ const ModalDialog = props => {
       onOpenAutoFocus,
       disabledCloseButton,
       onPointerDownOutside,
-      onCloseClick
+      onCloseClick,
+      theme
     } = props,
-    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside", "onCloseClick"]);
+    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside", "onCloseClick", "theme"]);
   const childArray = React__default.Children.toArray(children);
   const modalDialogFooter = findNodeChild$1(childArray, 'ModalDialogFooter');
   const modalDialogTitle = findNodeChild$1(childArray, 'ModalDialogTitle');
   const modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
   const modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
+  const themeProvider = useThemeProvider(theme);
   const ref = useCallback(node => {
     const appElement = document.getElementById('app');
     if (appElement) {
@@ -12916,6 +12918,7 @@ const ModalDialog = props => {
           zIndex: layer
         }
       }, void 0), jsx(StyledContent$4, Object.assign({
+        className: (themeProvider === null || themeProvider === void 0 ? void 0 : themeProvider.theme) || '',
         size: size,
         css: Object.assign(Object.assign({}, css), {
           zIndex: layer,
@@ -12935,7 +12938,7 @@ const ModalDialog = props => {
       }, {
         children: jsxs(Box, Object.assign({
           css: {
-            backgroundColor: '$white',
+            backgroundColor: '$bgWhite',
             display: 'flex',
             flexDirection: 'column',
             borderRadius: '$lg'
@@ -14102,7 +14105,7 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }), void 0);
 });
 
-var _jsxFileName$y = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
+var _jsxFileName$y = "/home/alfiantryp/Project/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",
@@ -14183,7 +14186,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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
+var _jsxFileName$x = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -14513,37 +14516,6 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputSelectValue(value);
     }
   }, [value, defaultValue]);
-  const sortItems = React__default.useCallback(() => {
-    if (sortBy === 'id') {
-      option.sort(function (a, b) {
-        const idA = typeof a.id === 'string' ? a.id.toUpperCase() : a.id; // ignore upper and lowercase
-        const idB = typeof b.id === 'string' ? b.id.toUpperCase() : b.id; // ignore upper and lowercase
-        if (a.id === '!all') return -1;
-        if (b.id === '!all') return 1;
-        if (idA < idB) {
-          return -1;
-        }
-        if (idA > idB) {
-          return 1;
-        }
-        return 0;
-      });
-    } else if (sortBy === 'name') {
-      option.sort(function (a, b) {
-        const nameA = typeof a.name === 'string' ? a.name.toUpperCase() : a.name; // ignore upper and lowercase
-        const nameB = typeof b.name === 'string' ? b.name.toUpperCase() : b.name; // ignore upper and lowercase
-        if (a.id === '!all') return -1;
-        if (b.id === '!all') return 1;
-        if (nameA < nameB) {
-          return -1;
-        }
-        if (nameA > nameB) {
-          return 1;
-        }
-        return 0;
-      });
-    }
-  }, [sortBy, option]);
   const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? inputSelectValue.reduce((res, id, i, {
     [i + 1]: next
   }) => {
@@ -14811,24 +14783,54 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   });
-  const memoOptions = useMemo(() => maxSelectedItem ? option == null ? void 0 : option.map(item => {
-    const isMaxSelectedItem = maxSelectedItem && (selectedValue == null ? void 0 : selectedValue.length) >= maxSelectedItem;
-    if (isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))) {
-      item.hideCheck = true;
-      item.isDisabled = true;
-    } else {
-      item.hideCheck = false;
-      item.isDisabled = false;
+  const memoOptions = useMemo(() => {
+    // 1. Create a shallow copy to avoid mutating the prop.
+    const optionsCopy = option ? [...option] : [];
+
+    // 2. Sort the copy based on the sortBy prop.
+    if (sortBy === 'id') {
+      optionsCopy.sort((a, b) => {
+        const idA = typeof a.id === 'string' ? a.id.toUpperCase() : a.id;
+        const idB = typeof b.id === 'string' ? b.id.toUpperCase() : b.id;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (idA < idB) return -1;
+        if (idA > idB) return 1;
+        return 0;
+      });
+    } else if (sortBy === 'name') {
+      optionsCopy.sort((a, b) => {
+        const nameA = typeof a.name === 'string' ? a.name.toUpperCase() : a.name;
+        const nameB = typeof b.name === 'string' ? b.name.toUpperCase() : b.name;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
     }
-    return item;
-  }) : option, [maxSelectedItem, option, selectedValue]);
+
+    // 3. Apply the maxSelectedItem logic if needed.
+    return maxSelectedItem ? optionsCopy.map(item => {
+      const isMaxSelectedItem = maxSelectedItem && (selectedValue == null ? void 0 : selectedValue.length) >= maxSelectedItem;
+      if (isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))) {
+        item.hideCheck = true;
+        item.isDisabled = true;
+      } else {
+        item.hideCheck = false;
+        item.isDisabled = false;
+      }
+      return item;
+    }) : optionsCopy;
+  }, [maxSelectedItem, option, selectedValue, sortBy]); // Add sortBy to the dependency array
+
   const memoOptionsString = useMemo(() => JSON.stringify(memoOptions), [memoOptions]);
   const itemsLength = items == null ? void 0 : items.reduce((acc, item) => {
     return [...acc, ...(item.children ? item.children : [item])];
   }, []).length;
   useEffect(() => {
     if ((!inputValue || fetchData) && ready) {
-      sortItems();
+      // The `sortItems()` call is now gone. `memoOptions` is already sorted.
       setItems(isShowSelectAll ? [{
         id: '!all',
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
@@ -14838,18 +14840,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...memoOptions] : memoOptions);
     }
-  }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue]);
+  }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue, sortBy]); // Add sortBy here
+
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
       setItems(sortValue);
     }
   }, []);
-  useEffect(() => {
-    if (sortBy) {
-      sortItems();
-    }
-  }, [sortBy]);
   useEffect(() => {
     if (disabledOptions.length > 0) {
       const options = generateOptions(sortDisabled);
@@ -14909,7 +14907,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 779,
+        lineNumber: 778,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14923,7 +14921,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 798,
+        lineNumber: 797,
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14931,7 +14929,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 810,
+        lineNumber: 809,
         columnNumber: 17
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14939,21 +14937,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 814,
+        lineNumber: 813,
         columnNumber: 19
       }
     })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 818,
+        lineNumber: 817,
         columnNumber: 15
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 820,
+        lineNumber: 819,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14964,7 +14962,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 823,
+        lineNumber: 822,
         columnNumber: 11
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -14992,7 +14990,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 839,
+          lineNumber: 838,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -15005,7 +15003,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 852,
+          lineNumber: 851,
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -15013,7 +15011,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 862,
+          lineNumber: 861,
           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, {
@@ -15021,14 +15019,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 864,
+          lineNumber: 863,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 866,
+          lineNumber: 865,
           columnNumber: 19
         }
       }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -15039,14 +15037,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 869,
+          lineNumber: 868,
           columnNumber: 15
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 837,
+        lineNumber: 836,
         columnNumber: 9
       }
     }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15059,7 +15057,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 881,
+      lineNumber: 880,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -15069,7 +15067,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 882,
+      lineNumber: 881,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15084,7 +15082,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 883,
+      lineNumber: 882,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -15102,7 +15100,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 893,
+      lineNumber: 892,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15116,7 +15114,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 900,
+      lineNumber: 899,
       columnNumber: 13
     }
   }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15127,7 +15125,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 911,
+      lineNumber: 910,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -15135,7 +15133,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 916,
+      lineNumber: 915,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15148,7 +15146,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 920,
+      lineNumber: 919,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -15156,7 +15154,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 926,
+      lineNumber: 925,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -15177,7 +15175,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 928,
+      lineNumber: 927,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null || (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null || (_selectedItems$filter = _selectedItems$filter.filter((_, idx) => {
@@ -15208,7 +15206,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 957,
+      lineNumber: 956,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15217,7 +15215,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 980,
+      lineNumber: 979,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15227,14 +15225,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 981,
+      lineNumber: 980,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 982,
+      lineNumber: 981,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15248,7 +15246,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 983,
+      lineNumber: 982,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -15256,7 +15254,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 989,
+      lineNumber: 988,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -15264,7 +15262,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 991,
+      lineNumber: 990,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15276,14 +15274,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 993,
+      lineNumber: 992,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 997,
+      lineNumber: 996,
       columnNumber: 19
     }
   })), showCollapsibleCounter && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15294,7 +15292,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1000,
+      lineNumber: 999,
       columnNumber: 19
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter2 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter2.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15319,7 +15317,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1016,
+      lineNumber: 1017,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15341,7 +15339,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1026,
+      lineNumber: 1027,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15349,7 +15347,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1043,
+      lineNumber: 1044,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -15361,7 +15359,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1048,
+      lineNumber: 1049,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -15384,14 +15382,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1052,
+        lineNumber: 1053,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1049,
+      lineNumber: 1050,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -15404,14 +15402,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1077,
+      lineNumber: 1078,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1078,
+      lineNumber: 1079,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15421,7 +15419,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1079,
+      lineNumber: 1080,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -15433,7 +15431,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1080,
+      lineNumber: 1081,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -15506,7 +15504,7 @@ InputSelectCheck.defaultProps = {
   onItemClick: changes => {}
 };
 
-var _jsxFileName$w = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
+var _jsxFileName$w = "/home/alfiantryp/Project/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,
@@ -15567,7 +15565,7 @@ InputSelectTag.defaultProps = {
   defaultValue: []
 };
 
-var _jsxFileName$v = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
+var _jsxFileName$v = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -16695,7 +16693,7 @@ InputCounter.defaultProps = {
 
 const _excluded$c = ["children"],
   _excluded2$3 = ["children", "showOverlay"];
-var _jsxFileName$u = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
+var _jsxFileName$u = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
 const Context$1 = /*#__PURE__*/React__default.createContext();
 const {
   sizes
@@ -17045,7 +17043,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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
+var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
 const ScrollButton$1 = styled(Button$4, {
   width: '28px',
   outline: '$btnPrimary solid 1px',
@@ -17575,7 +17573,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$s = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\TimePicker.js";
+var _jsxFileName$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
 const Input$3 = styled('input', {
   display: 'none'
 });
@@ -17978,56 +17976,56 @@ const NativeTimePicker = ({
   })));
 };
 NativeTimePicker.propTypes = {
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool,
-  /**
-    Disabled hour state.
+  /**
+    Disabled hour state.
    */
   disabledHour: PropTypes.bool,
-  /**
-    Disabled increase hour state.
+  /**
+    Disabled increase hour state.
    */
   disabledHourIncrease: PropTypes.bool,
-  /**
-    Disabled decrease hour state.
+  /**
+    Disabled decrease hour state.
    */
   disabledHourDecrease: PropTypes.bool,
-  /**
-    Disabled minute state.
+  /**
+    Disabled minute state.
    */
   disabledMinute: PropTypes.bool,
-  /**
-    Disabled increase minute state.
+  /**
+    Disabled increase minute state.
    */
   disabledMinuteIncrease: PropTypes.bool,
-  /**
-    Disabled decrease minute state.
+  /**
+    Disabled decrease minute state.
    */
   disabledMinuteDecrease: PropTypes.bool,
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
-  /**
-       Specify the maximum date.
+  /**
+       Specify the maximum date.
       */
   maxDate: PropTypes.instanceOf(Date)
 };
@@ -18084,66 +18082,66 @@ const TimePicker = ({
 };
 TimePicker.displayName = 'TimePicker';
 TimePicker.propTypes = {
-  /**
-   Additional styles.
+  /**
+   Additional styles.
   */
   css: PropTypes.object,
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool,
-  /**
-   Disabled hour state.
+  /**
+   Disabled hour state.
   */
   disabledHour: PropTypes.bool,
-  /**
-    Disabled increase hour state.
+  /**
+    Disabled increase hour state.
    */
   disabledHourIncrease: PropTypes.bool,
-  /**
-      Disabled decrease hour state.
+  /**
+      Disabled decrease hour state.
      */
   disabledHourDecrease: PropTypes.bool,
-  /**
-   Disabled minute state.
+  /**
+   Disabled minute state.
   */
   disabledMinute: PropTypes.bool,
-  /**
-    Disabled increase minute state.
+  /**
+    Disabled increase minute state.
    */
   disabledMinuteIncrease: PropTypes.bool,
-  /**
-      Disabled decrease minute state.
+  /**
+      Disabled decrease minute state.
      */
   disabledMinuteDecrease: PropTypes.bool,
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
-  /**
-     Specify the maximum date.
+  /**
+     Specify the maximum date.
     */
   maxDate: PropTypes.instanceOf(Date)
 };
 NativeTimePicker.displayName = 'NativeTimePicker';
 
-var _jsxFileName$r = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
+var _jsxFileName$r = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
 const getInputPickerValue$1 = date => {
   if (!date) return;
   return moment(date).format('HH:mm');
@@ -18302,88 +18300,88 @@ InputTimePicker.defaultProps = {
   placeholder: 'Select Time'
 };
 InputTimePicker.propTypes = {
-  /**
-   Additional styles.
+  /**
+   Additional styles.
   */
   css: PropTypes.object,
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool,
-  /**
-   Disabled hour state.
+  /**
+   Disabled hour state.
   */
   disabledHour: PropTypes.bool,
-  /**
-    Disabled increase hour state.
+  /**
+    Disabled increase hour state.
    */
   disabledHourIncrease: PropTypes.bool,
-  /**
-        Disabled decrease hour state.
+  /**
+        Disabled decrease hour state.
        */
   disabledHourDecrease: PropTypes.bool,
-  /**
-    Disabled minute state.
+  /**
+    Disabled minute state.
    */
   disabledMinute: PropTypes.bool,
-  /**
-    Disabled increase minute state.
+  /**
+    Disabled increase minute state.
    */
   disabledMinuteIncrease: PropTypes.bool,
-  /**
-        Disabled decrease minute state.
+  /**
+        Disabled decrease minute state.
        */
   disabledMinuteDecrease: PropTypes.bool,
-  /**
-   ReadOnly state.
+  /**
+   ReadOnly state.
   */
   readOnly: PropTypes.bool,
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
-  /**
-   Custom placeholder input time picker.
+  /**
+   Custom placeholder input time picker.
   */
   placeholder: PropTypes.string,
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
-  /**
-   Placement popover input time picker.
+  /**
+   Placement popover input time picker.
   */
   placement: PropTypes.string,
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
-  /**
-       Specify the maximum date.
+  /**
+       Specify the maximum date.
   */
   maxDate: PropTypes.instanceOf(Date),
-  /**
-   * Invalid state input.
+  /**
+   * Invalid state input.
    */
   isInvalid: PropTypes.bool,
-  /**
-    If true, the component will rendered on portal element
+  /**
+    If true, the component will rendered on portal element
    */
   portalled: PropTypes.bool,
-  /**
-   Additional TimePicker styles.
+  /**
+   Additional TimePicker styles.
   */
   contentCss: PropTypes.object,
-  /**
-   Input open change callback.
+  /**
+   Input open change callback.
   */
   onInputOpenChange: PropTypes.func
 };
@@ -21001,7 +20999,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 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
+var _jsxFileName$q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -21345,7 +21343,7 @@ Slider.defaultProps = {
 };
 
 const _excluded$9 = ["className", "children", "onClick", "type", "size"];
-var _jsxFileName$p = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tagStatus\\TagStatus.js";
+var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
 const TagWrapper$1 = styled('div', {
   boxSizing: 'border-box',
   fontSize: '12px',
@@ -21508,7 +21506,7 @@ const _excluded$8 = ["children"],
   _excluded2$1 = ["children", "activeTabs"],
   _excluded3$1 = ["children", "icon", "activeTabs", "value"],
   _excluded4$1 = ["activeTabs"];
-var _jsxFileName$o = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tabs\\Tabs.js";
+var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tabs/Tabs.js";
 const StyledTabs = styled(TabsPrimitive.Root, {
   display: 'flex',
   flexDirection: 'column',
@@ -21847,7 +21845,7 @@ TabsContent$1.propTypes = {
 };
 
 const _excluded$7 = ["children", "variantIcon"];
-var _jsxFileName$n = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
+var _jsxFileName$n = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -22002,7 +22000,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$m = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
+var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -22255,7 +22253,7 @@ const removeUndefinedFields = obj => {
 };
 
 const _excluded$5 = ["isActive", "onClick"];
-var _jsxFileName$l = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationButton.js";
+var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
 const PrevNextButton = styled(Text$1, {
   padding: '$spacing-01',
   cursor: 'pointer',
@@ -22749,7 +22747,7 @@ const PaginationButton = ({
 };
 
 const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
-var _jsxFileName$k = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationInfo.js";
+var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
 const LimitContainer = styled(Flex$1, {
   cursor: 'pointer'
 });
@@ -22984,7 +22982,7 @@ function PaginationInfo(_ref) {
 }
 
 const _excluded$3 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
-var _jsxFileName$j = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
+var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
 function Pagination(_ref) {
   let {
       limit,
@@ -23858,7 +23856,7 @@ const ScrollSyncNode = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 });
 ScrollSyncNode.displayName = 'ScrollSyncNode';
 
-var _jsxFileName$i = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowDraggableColumn.js";
+var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowDraggableColumn.js";
 const DragHandle = SortableHandle(() => /*#__PURE__*/React__default.createElement(IconButton, {
   icon: true,
   size: "xs",
@@ -25354,7 +25352,7 @@ const TableColumn = _a => {
   return jsx("div", {}, void 0);
 };
 
-var _jsxFileName$h = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
+var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
 const DateColumn = ({
   value,
   customFormat
@@ -25466,7 +25464,7 @@ const PriceColumn = props => {
   return addThousandSeparator(param);
 };
 
-var _jsxFileName$g = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderColumn.js";
+var _jsxFileName$g = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
 const rowExpanderColumn = {
   id: 'expander',
   Header: () => null,
@@ -25509,7 +25507,7 @@ const rowExpanderColumn = {
   unsortable: true
 };
 
-var _jsxFileName$f = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderMultipleColumn.js";
+var _jsxFileName$f = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
 const rowExpanderMultipleColumn = {
   id: 'multiple-expander',
   Header: () => null,
@@ -25545,7 +25543,7 @@ const rowExpanderMultipleColumn = {
   unsortable: true
 };
 
-var _jsxFileName$e = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowMenuColumn.js";
+var _jsxFileName$e = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
   options,
@@ -25682,7 +25680,7 @@ const rowMenuColumn = (options, icon, config) => ({
   unsortable: true
 });
 
-var _jsxFileName$d = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionColumn.js";
+var _jsxFileName$d = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
 const rowSelectionColumn = {
   id: 'selection',
   Header: ({
@@ -25731,7 +25729,7 @@ const rowSelectionColumn = {
   unsortable: true
 };
 
-var _jsxFileName$c = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionCallbackColumn.js";
+var _jsxFileName$c = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
 const rowSelectionWithCallbackColumn = (onCheckedChange, onAllCheckedChange) => ({
   id: 'selection',
   Header: ({
@@ -26069,7 +26067,7 @@ PageDialog.defaultProps = {
 };
 
 const _excluded$2 = ["children"];
-var _jsxFileName$b = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\alertDialog\\AlertDialog.js";
+var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -26705,7 +26703,7 @@ const _excluded$1 = ["side", "align", "children"],
   _excluded2 = ["theme"],
   _excluded3 = ["children"],
   _excluded4 = ["asChild"];
-var _jsxFileName$a = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\dropdownMenu\\DropdownMenu.js";
+var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
 const Context = /*#__PURE__*/React__default.createContext();
 const slideUpAndFade = keyframes({
   '0%': {
@@ -28982,7 +28980,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
 }
 
 const _excluded = ["customPreviewIcon"];
-var _jsxFileName$9 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\upload\\Upload.js";
+var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
 const Input$2 = styled('input', {
   display: 'none !important'
 });
@@ -29085,7 +29083,7 @@ const IconStateFull = _ref => {
       lineNumber: 126,
       columnNumber: 5
     }
-  }, !!customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
+  }, customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
     color: isHover ? '#04C99E' : customPreviewIcon.props.color,
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave,
@@ -29149,7 +29147,8 @@ const Upload = ({
   isDefaultCustomRatio,
   customPreviewIcon,
   onPreviewIconClick,
-  maxWidthOrHeight
+  maxWidthOrHeight,
+  theme
 }) => {
   const {
     t
@@ -29597,7 +29596,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 666,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -29607,7 +29606,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 667,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29622,7 +29621,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 676,
+            lineNumber: 677,
             columnNumber: 16
           }
         });
@@ -29633,7 +29632,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 680,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29643,7 +29642,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 681,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29652,7 +29651,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 682,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29665,7 +29664,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29681,7 +29680,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -29691,7 +29690,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 705,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29708,7 +29707,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 715,
+            lineNumber: 716,
             columnNumber: 16
           }
         });
@@ -29718,7 +29717,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29728,7 +29727,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 720,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29737,7 +29736,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 721,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -29750,7 +29749,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 722,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29760,14 +29759,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 729,
+          lineNumber: 730,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 731,
           columnNumber: 17
         }
       }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29775,7 +29774,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 732,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -29790,7 +29789,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 733,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29803,7 +29802,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 749,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29819,7 +29818,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 757,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -29827,7 +29826,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 770,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29842,7 +29841,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 781,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29856,7 +29855,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 782,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -29882,7 +29881,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 782,
+        lineNumber: 783,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -29890,14 +29889,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 795,
+        lineNumber: 796,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 796,
+        lineNumber: 797,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29909,7 +29908,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 804,
+        lineNumber: 805,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -29925,21 +29924,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 805,
+        lineNumber: 806,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 816,
+        lineNumber: 817,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 818,
+        lineNumber: 819,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -29948,7 +29947,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 819,
+        lineNumber: 820,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29956,7 +29955,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 820,
+        lineNumber: 821,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29966,7 +29965,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 822,
+        lineNumber: 823,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -29976,7 +29975,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 829,
+        lineNumber: 830,
         columnNumber: 19
       }
     }, error));
@@ -29987,10 +29986,11 @@ const Upload = ({
         if (!open) setCrop(null);
       },
       isMobile: isMobile,
+      theme: theme,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 836,
+        lineNumber: 837,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29998,7 +29998,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 842,
+        lineNumber: 844,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -30006,7 +30006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 843,
+        lineNumber: 845,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -30019,7 +30019,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 845,
+        lineNumber: 847,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -30032,7 +30032,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 848,
+        lineNumber: 850,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30043,7 +30043,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 856,
+        lineNumber: 858,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30057,14 +30057,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 857,
+        lineNumber: 859,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 868,
+        lineNumber: 870,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30076,14 +30076,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 869,
+        lineNumber: 871,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 871,
+        lineNumber: 873,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30091,7 +30091,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 873,
+        lineNumber: 875,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30103,7 +30103,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 874,
+        lineNumber: 876,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30111,7 +30111,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 881,
+        lineNumber: 883,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30120,7 +30120,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 882,
+        lineNumber: 884,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30130,7 +30130,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 885,
+        lineNumber: 887,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30147,7 +30147,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 894,
+      lineNumber: 896,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30156,7 +30156,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 897,
+      lineNumber: 899,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
@@ -30168,7 +30168,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 899,
+      lineNumber: 901,
       columnNumber: 7
     }
   }));
@@ -30188,159 +30188,159 @@ Upload.defaultProps = {
   maxWidthOrHeight: 1024
 };
 Upload.propTypes = {
-  /**
-   Placeholder label of upload.
+  /**
+   Placeholder label of upload.
   */
   placeholder: PropTypes.string,
-  /**
-   Disabled state of upload.
+  /**
+   Disabled state of upload.
   */
   disabled: PropTypes.bool,
-  /**
-   Built-in stylesheets, support for two types.
+  /**
+   Built-in stylesheets, support for two types.
   */
   listType: PropTypes.oneOf(['file', 'picture']),
-  /**
-   Whether to support selected multiple file.
+  /**
+   Whether to support selected multiple file.
    */
   multiple: PropTypes.bool,
-  /**
-   List of files to be uploaded.
+  /**
+   List of files to be uploaded.
    */
   fileList: PropTypes.array,
-  /**
-   A callback function, can be executed when uploading state is changing.
+  /**
+   A callback function, can be executed when uploading state is changing.
    */
   onChange: PropTypes.func,
-  /**
-   A callback function, can be executed when uploading in progress.
-   `(progress) => void`
+  /**
+   A callback function, can be executed when uploading in progress.
+   `(progress) => void`
    */
   onProgress: PropTypes.func,
-  /**
-   A callback function, can be executed when uploading is success.
-   `(response) => void`
+  /**
+   A callback function, can be executed when uploading is success.
+   `(response) => void`
    */
   onSuccess: PropTypes.func,
-  /**
-   A callback function, can be executed when uploading is error.
-   `(error, response) => void`
+  /**
+   A callback function, can be executed when uploading is error.
+   `(error, response) => void`
    */
   onError: PropTypes.func,
-  /**
-   A callback function, can be executed when preview icon in picture type is clicked.
+  /**
+   A callback function, can be executed when preview icon in picture type is clicked.
    */
   onPreview: PropTypes.func,
-  /**
-   A callback function, can be executed when remove icon is clicked.
+  /**
+   A callback function, can be executed when remove icon is clicked.
    */
   onRemove: PropTypes.func,
-  /**
-   A custom element inside upload container.
+  /**
+   A custom element inside upload container.
    */
   children: PropTypes.element,
-  /**
-   Limit the number of uploaded files.
+  /**
+   Limit the number of uploaded files.
    */
   max: PropTypes.number,
-  /**
-   Limit the maximum image size in MB.
+  /**
+   Limit the maximum image size in MB.
    */
   maxSizeMB: PropTypes.number,
-  /**
-   Limit file type of upload.
+  /**
+   Limit file type of upload.
    */
   accept: PropTypes.string,
-  /**
-   Custom label for replace button.
+  /**
+   Custom label for replace button.
    */
   replaceLabel: PropTypes.string,
-  /**
-   Custom width of upload container.
+  /**
+   Custom width of upload container.
    */
   width: PropTypes.number,
-  /**
-   Custom height of upload container.
+  /**
+   Custom height of upload container.
    */
   height: PropTypes.number,
-  /**
-   Additional css.
+  /**
+   Additional css.
    */
   css: PropTypes.object,
-  /**
-   Custom title header of cropper modal.
+  /**
+   Custom title header of cropper modal.
    */
   cropperTitle: PropTypes.string,
-  /**
-   Add image cropper on upload.
+  /**
+   Add image cropper on upload.
    */
   showCropper: PropTypes.bool,
-  /**
-   Hidden toggle aspect ratio image cropper.
+  /**
+   Hidden toggle aspect ratio image cropper.
    */
   hiddenToggleAspect: PropTypes.bool,
-  /**
-   The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
+  /**
+   The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
    */
   ratio: PropTypes.number,
-  /**
-   Can set error message to the upload.
+  /**
+   Can set error message to the upload.
    */
   errorMessage: PropTypes.string,
-  /**
-   Progress of upload process.
+  /**
+   Progress of upload process.
   */
   progress: PropTypes.number,
-  /**
-    Auto increment progress of upload process.
+  /**
+    Auto increment progress of upload process.
    */
   loading: PropTypes.bool,
-  /**
-   API upload url, allows components to automatically upload directly to API service.
+  /**
+   API upload url, allows components to automatically upload directly to API service.
    */
   action: PropTypes.string,
-  /**
-   Custom body request to upload action.
+  /**
+   Custom body request to upload action.
    */
   customBodyRequest: PropTypes.func,
-  /**
-   Contains an authentication token for upload API.
+  /**
+   Contains an authentication token for upload API.
    */
   token: PropTypes.string,
-  /**
-   Referencing the headers key to attach the token.
+  /**
+   Referencing the headers key to attach the token.
    */
   tokenKey: PropTypes.string,
-  /**
-   Referencing the key to attach the file to be sent.
+  /**
+   Referencing the key to attach the file to be sent.
    */
   reqKey: PropTypes.string,
-  /**
-   Referencing the key to get the file from the API response.
+  /**
+   Referencing the key to get the file from the API response.
    */
   resKey: PropTypes.string,
-  /**
-   To compression image if file size > 1MB.
+  /**
+   To compression image if file size > 1MB.
    */
   imageCompression: PropTypes.bool,
-  /**
-   Callback to handle before crop image.
+  /**
+   Callback to handle before crop image.
    */
   onBeforeCrop: PropTypes.func,
-  /**
-   Hidden preview icon in upload.
+  /**
+   Hidden preview icon in upload.
    */
   hiddenPreview: PropTypes.bool,
-  /**
-   Auto full aspect ratio cropper.
+  /**
+   Auto full aspect ratio cropper.
    */
   fullAspectCrop: PropTypes.bool,
-  /**
-   Set custom ratio as Default view
+  /**
+   Set custom ratio as Default view
    */
   isDefaultCustomRatio: PropTypes.bool,
-  /**
-   Set max width or height of image
+  /**
+   Set max width or height of image
    */
   maxWidthOrHeight: PropTypes.number
 };
@@ -31016,7 +31016,7 @@ const Device = props => {
 };
 Device.displayName = 'DevicePreview';
 
-var _jsxFileName$8 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\InputColorPicker.js";
+var _jsxFileName$8 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
 const Separator$1 = styled('div', {
   height: 20,
   width: 1,
@@ -31126,44 +31126,44 @@ function InputColorPicker(props) {
 }
 InputColorPicker.displayName = 'InputColorPicker';
 InputColorPicker.propTypes = {
-  /**
-   Specify change InputColorPicker size.
+  /**
+   Specify change InputColorPicker size.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
-  /**
-   Color code to be displayed.
+  /**
+   Color code to be displayed.
   */
   color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   Additional color list.
+  /**
+   Additional color list.
   */
   presetColors: PropTypes.array,
-  /**
-   Change event handler.
+  /**
+   Change event handler.
   */
   onChange: PropTypes.func,
-  /**
-   Add preset color event handler.
+  /**
+   Add preset color event handler.
   */
   onAddColor: PropTypes.func,
-  /**
-   Disable opacity selector.
+  /**
+   Disable opacity selector.
   */
   disableAlpha: PropTypes.bool,
-  /**
-   Input placement.
+  /**
+   Input placement.
   */
   placement: PropTypes.string,
-  /**
-   Define is mobile layout or not.
+  /**
+   Define is mobile layout or not.
   */
   isMobile: PropTypes.bool,
-  /**
-   Define popover custom styling.
+  /**
+   Define popover custom styling.
   */
   popoverCss: PropTypes.shape({}),
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool
 };
@@ -31177,7 +31177,7 @@ InputColorPicker.defaultProps = {
 
 var img$d = "data:image/gif;base64,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";
 
-var _jsxFileName$7 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorMap.js";
+var _jsxFileName$7 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
 const Container$7 = styled('div', {
   userSelect: 'none',
   margin: 'auto',
@@ -33138,7 +33138,7 @@ function ColorMap({
   })));
 }
 
-var _jsxFileName$6 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorFields.js";
+var _jsxFileName$6 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
 const CheckBoard = styled(Flex$1, {
   background: '$bgwhite',
   border: '1px solid #E5E7EB',
@@ -33339,7 +33339,7 @@ function ColorFields({
   }, "%")));
 }
 
-var _jsxFileName$5 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\ColorPicker.js";
+var _jsxFileName$5 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
 const Container$6 = styled(Flex$1, {
   background: '$white',
   padding: 16,
@@ -33830,24 +33830,24 @@ function ColorPicker({
   })))))));
 }
 ColorPicker.propTypes = {
-  /**
-   Color code to be displayed.
+  /**
+   Color code to be displayed.
   */
   color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   Additional color list
+  /**
+   Additional color list
   */
   presetColors: PropTypes.array,
-  /**
-   Change event handler
+  /**
+   Change event handler
   */
   onChange: PropTypes.func,
-  /**
-   Add preset color event handler
+  /**
+   Add preset color event handler
   */
   onAddColor: PropTypes.func,
-  /**
-   Disable opacity selector
+  /**
+   Disable opacity selector
   */
   disableAlpha: PropTypes.bool
 };
@@ -33856,7 +33856,7 @@ ColorPicker.defaultProps = {
 };
 var ColorPicker$1 = ColorWrap(ColorPicker);
 
-var _jsxFileName$4 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\stepWizard\\StepWizard.js";
+var _jsxFileName$4 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
 const StepWizardContext = /*#__PURE__*/React__default.createContext({});
 const Stepper = StepWizard$1;
 Stepper.displayName = 'Stepper';
@@ -34579,7 +34579,7 @@ StepWizard.defaultProps = {
   isLazyMount: true
 };
 
-var _jsxFileName$3 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\transition.js";
+var _jsxFileName$3 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
 function Collapse({
   children,
   isOpen
@@ -34622,7 +34622,7 @@ Collapse.defaultProps = {
   isOpen: false
 };
 
-var _jsxFileName$2 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\TableOfContent.js";
+var _jsxFileName$2 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
@@ -34983,7 +34983,7 @@ TableOfContentPage.defaultProps = {
   useBoxMethod: true
 };
 
-var _jsxFileName$1 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\editableTable\\transition.js";
+var _jsxFileName$1 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/editableTable/transition.js";
 function Collapalse({
   children,
   isOpen
@@ -56497,7 +56497,7 @@ PieChartComponent.defaultProps = {
   innerRadius: 70
 };
 
-var _jsxFileName = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
+var _jsxFileName = "/home/alfiantryp/Project/majoo-ui/packages/react/src/colors/Colors.js";
 const StyledPaper = styled(Paper, {
   borderRadius: '10px 10px 0 0',
   padding: 15,