@majoo-ui/react 1.61.19 → 1.61.20-rc.2

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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+var _jsxFileName$13 = "E:\\Coding\\Majoo\\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.45.1',
+  version: '3.44.0',
   mode: 'global',
   copyright: '© 2014-2025 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.45.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.44.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1414,7 +1414,7 @@ const applyGlobalStyles = additionaStyles => {
   globalStyles();
 };
 
-var _jsxFileName$12 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+var _jsxFileName$12 = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/layout/grid/Grid.js";
+var _jsxFileName$11 = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
+var _jsxFileName$10 = "E:\\Coding\\Majoo\\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$$ = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/banner/Banner.js";
+var _jsxFileName$$ = "E:\\Coding\\Majoo\\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$_ = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+var _jsxFileName$_ = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+var _jsxFileName$Z = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/image/Image.js";
+var _jsxFileName$Y = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+var _jsxFileName$X = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/progress/Progress.js";
+var _jsxFileName$W = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/toast/Toast.js";
+var _jsxFileName$V = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+var _jsxFileName$U = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+var _jsxFileName$T = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+var _jsxFileName$S = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+var _jsxFileName$R = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+var _jsxFileName$Q = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
+var _jsxFileName$P = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+var _jsxFileName$O = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+var _jsxFileName$N = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+var _jsxFileName$M = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+var _jsxFileName$L = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
+var _jsxFileName$K = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
+var _jsxFileName$J = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
+var _jsxFileName$I = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+var _jsxFileName$H = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
+var _jsxFileName$G = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tag/Tag.js";
+var _jsxFileName$F = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+var _jsxFileName$E = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+var _jsxFileName$D = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+var _jsxFileName$C = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+var _jsxFileName$B = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+var _jsxFileName$A = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/popover/Popover.js";
+var _jsxFileName$z = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
+var _jsxFileName$y = "E:\\Coding\\Majoo\\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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
+var _jsxFileName$x = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -14487,7 +14490,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
     t,
-    ready
+    i18n: {
+      language
+    }
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
   const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
   const [items, setItems] = React__default.useState([]);
@@ -14513,37 +14518,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,45 +14785,63 @@ 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(() => {
+    const optionsCopy = option ? [...option] : [];
+    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]);
+    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]);
   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();
+    if (!inputValue || fetchData) {
       setItems(isShowSelectAll ? [{
         id: '!all',
-        name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        name: selectAllLabel != null ? selectAllLabel : language === 'en' ? 'Select All' : 'Pilih Semua'
       }, ...memoOptions] : memoOptions);
       setInitItems(isShowSelectAll ? [{
         id: '!all',
-        name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        name: selectAllLabel != null ? selectAllLabel : language === 'en' ? 'Select All' : 'Pilih Semua'
       }, ...memoOptions] : memoOptions);
     }
-  }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue]);
+  }, [isShowSelectAll, selectAllLabel, language, memoOptionsString, inputValue, sortBy]);
   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);
@@ -14901,7 +14893,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         });
       },
       css: {
-        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+        backgroundColor: highlightedIndex === index ? '$bgGray' : '$bgWhite',
         cursor: item.isDisabled ? 'not-allowed' : 'pointer',
         color: item.isDisabled ? '$textDisable' : 'textPrimary',
         padding: asChild ? '0px $spacing-05' : 0
@@ -14909,7 +14901,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 779,
+        lineNumber: 774,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14923,7 +14915,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 798,
+        lineNumber: 793,
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14931,7 +14923,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 810,
+        lineNumber: 805,
         columnNumber: 17
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14939,21 +14931,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 814,
+        lineNumber: 809,
         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: 813,
         columnNumber: 15
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 820,
+        lineNumber: 815,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14964,7 +14956,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 823,
+        lineNumber: 818,
         columnNumber: 11
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -14985,14 +14977,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         disabled: item.isDisabled
       }), {
         css: {
-          backgroundColor: highlightedIndex === groupIndex ? '$bgGray' : 'white',
+          backgroundColor: highlightedIndex === groupIndex ? '$bgGray' : '$bgWhite',
           cursor: item.isDisabled ? 'not-allowed' : 'pointer',
           color: item.isDisabled ? '$textDisable' : 'textPrimary'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 839,
+          lineNumber: 834,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -15005,7 +14997,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 852,
+          lineNumber: 847,
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -15013,7 +15005,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 862,
+          lineNumber: 857,
           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 +15013,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 864,
+          lineNumber: 859,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 866,
+          lineNumber: 861,
           columnNumber: 19
         }
       }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -15039,14 +15031,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 869,
+          lineNumber: 864,
           columnNumber: 15
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 837,
+        lineNumber: 832,
         columnNumber: 9
       }
     }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15059,7 +15051,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 881,
+      lineNumber: 876,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -15069,7 +15061,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 882,
+      lineNumber: 877,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15084,7 +15076,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 883,
+      lineNumber: 878,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -15102,7 +15094,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 893,
+      lineNumber: 888,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15116,7 +15108,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 900,
+      lineNumber: 895,
       columnNumber: 13
     }
   }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15127,7 +15119,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 911,
+      lineNumber: 906,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -15135,7 +15127,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 916,
+      lineNumber: 911,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15148,7 +15140,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 920,
+      lineNumber: 915,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -15156,7 +15148,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 926,
+      lineNumber: 921,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -15177,7 +15169,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 928,
+      lineNumber: 923,
       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 +15200,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 957,
+      lineNumber: 952,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15217,7 +15209,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 980,
+      lineNumber: 975,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15227,14 +15219,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 981,
+      lineNumber: 976,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 982,
+      lineNumber: 977,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15248,7 +15240,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 983,
+      lineNumber: 978,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -15256,7 +15248,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 989,
+      lineNumber: 984,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -15264,7 +15256,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 991,
+      lineNumber: 986,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15276,14 +15268,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 993,
+      lineNumber: 988,
       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: 992,
       columnNumber: 19
     }
   })), showCollapsibleCounter && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15294,7 +15286,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1000,
+      lineNumber: 995,
       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, {
@@ -15306,7 +15298,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1010,
+      lineNumber: 1006,
       columnNumber: 11
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -15319,7 +15311,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1016,
+      lineNumber: 1013,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15341,7 +15333,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1026,
+      lineNumber: 1023,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15349,7 +15341,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1043,
+      lineNumber: 1040,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -15361,7 +15353,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1048,
+      lineNumber: 1045,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -15384,14 +15376,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1052,
+        lineNumber: 1049,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1049,
+      lineNumber: 1046,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -15404,14 +15396,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1077,
+      lineNumber: 1074,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1078,
+      lineNumber: 1075,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15421,7 +15413,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1079,
+      lineNumber: 1076,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -15433,7 +15425,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1080,
+      lineNumber: 1077,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -15506,7 +15498,7 @@ InputSelectCheck.defaultProps = {
   onItemClick: changes => {}
 };
 
-var _jsxFileName$w = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+var _jsxFileName$w = "E:\\Coding\\Majoo\\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 +15559,7 @@ InputSelectTag.defaultProps = {
   defaultValue: []
 };
 
-var _jsxFileName$v = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
+var _jsxFileName$v = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -16695,7 +16687,7 @@ InputCounter.defaultProps = {
 
 const _excluded$c = ["children"],
   _excluded2$3 = ["children", "showOverlay"];
-var _jsxFileName$u = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+var _jsxFileName$u = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
 const Context$1 = /*#__PURE__*/React__default.createContext();
 const {
   sizes
@@ -17045,7 +17037,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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+var _jsxFileName$t = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
 const ScrollButton$1 = styled(Button$4, {
   width: '28px',
   outline: '$btnPrimary solid 1px',
@@ -17532,6 +17524,14 @@ const DateNumber = styled('div', {
         height: 30,
         margin: 'auto'
       },
+      defaultv2: {
+        '&:hover': {
+          backgroundColor: '$green50'
+        }
+      },
+      selectedv2: {
+        backgroundColor: '$green50'
+      },
       start: {
         backgroundColor: '$bgGreen',
         borderRadius: '42px 0px 0px 42px',
@@ -17575,7 +17575,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$s = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
+var _jsxFileName$s = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\TimePicker.js";
 const Input$3 = styled('input', {
   display: 'none'
 });
@@ -17978,56 +17978,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 +18084,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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
+var _jsxFileName$r = "E:\\Coding\\Majoo\\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 +18302,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
 };
@@ -18531,7 +18531,7 @@ const CalendarTimePicker = ({
   }), void 0);
 };
 
-const getVariant$1 = ({
+const getVariant$2 = ({
   selectable,
   selected,
   date
@@ -18557,7 +18557,7 @@ const getVariant$1 = ({
   }
   return variant;
 };
-const ArrowButton$1 = styled('button', {
+const ArrowButton$2 = styled('button', {
   all: 'unset',
   size: '32px',
   borderRadius: '$md',
@@ -18582,13 +18582,13 @@ const ArrowButton$1 = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox$1 = styled(Box, {
+const WeekdayBox$2 = styled(Box, {
   display: 'inline-block',
   width: '32px',
   textAlign: 'center',
   marginBottom: '$spacing-03'
 });
-const CalendarsContainer$1 = styled(Box, {
+const CalendarsContainer$2 = styled(Box, {
   width: '100%',
   display: 'inline-flex',
   borderRadius: '$lg',
@@ -18606,8 +18606,8 @@ const CalenderBoxContainer = styled(Box, {
   backgroundColor: '$bgWhite',
   padding: '$spacing-03'
 });
-const CalendarItemContainer$1 = styled(Flex$1, {});
-const DateContainer$1 = styled(Box, {
+const CalendarItemContainer$2 = styled(Flex$1, {});
+const DateContainer$2 = styled(Box, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -18616,7 +18616,7 @@ const DateContainer$1 = styled(Box, {
     width: 'unset'
   }
 });
-const TitleButton$1 = styled('p', {
+const TitleButton$2 = styled('p', {
   padding: '4px $spacing-05',
   marginTop: 6,
   fontWeight: 600,
@@ -18645,7 +18645,7 @@ const TitleButton$1 = styled('p', {
     }
   }
 });
-const MonthButton$1 = styled(Text$1, {
+const MonthButton$2 = styled(Text$1, {
   minWidth: '70px',
   textAlign: 'center !important',
   borderRadius: '$md',
@@ -18707,12 +18707,12 @@ styled('button', {
     }
   }
 });
-const DATE_PICKER = 0;
-const MONTH_PICKER = 1;
-const YEAR_PICKER = 2;
-const YEAR_RANGE_PICKER = 3;
+const DATE_PICKER$1 = 0;
+const MONTH_PICKER$1 = 1;
+const YEAR_PICKER$1 = 2;
+const YEAR_RANGE_PICKER$1 = 3;
 const TIME_PICKER = 4;
-const CalendarBox = ({
+const CalendarBox$1 = ({
   calendars,
   getDateProps,
   advanceView,
@@ -18739,7 +18739,7 @@ const CalendarBox = ({
     i18n
   } = useTranslation(['MajooUI/datePicker', 'translation']);
   const [pickerState, setPickerState] = useState({
-    type: DATE_PICKER,
+    type: DATE_PICKER$1,
     selectedMonth: Number(calendars[0].month),
     selectedYear: Number(calendars[0].year),
     selectedYearRange: getCalendarStartYear(calendars[0].year),
@@ -18768,33 +18768,33 @@ const CalendarBox = ({
   }, [selected, minDate, showTimePicker]);
   const multiDatePicker = calendars.length > 1;
   const renderTitleButton = (index = 0) => {
-    return multiDatePicker ? jsxs(TitleButton$1, Object.assign({
+    return multiDatePicker ? jsxs(TitleButton$2, Object.assign({
       onClick: () => {
         if (onIsMultiDateChange) onIsMultiDateChange(false);
         setPickerState(current => Object.assign(Object.assign({}, current), {
-          type: MONTH_PICKER
+          type: MONTH_PICKER$1
         }));
       }
     }, {
       children: [monthNamesFull[calendars[index].month], " ", calendars[index].year]
-    }), void 0) : jsxs(TitleButton$1, Object.assign({
+    }), void 0) : jsxs(TitleButton$2, Object.assign({
       onClick: () => {
-        if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign(Object.assign({}, current), {
+        if (pickerState.type < YEAR_RANGE_PICKER$1) setPickerState(current => Object.assign(Object.assign({}, current), {
           type: current.type + 1
         }));
         if (pickerState.type === TIME_PICKER) {
           setPickerState(current => Object.assign(Object.assign({}, current), {
-            type: DATE_PICKER
+            type: DATE_PICKER$1
           }));
         }
       },
-      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER
+      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1
     }, {
-      children: [pickerState.type === DATE_PICKER && jsxs(Fragment, {
+      children: [pickerState.type === DATE_PICKER$1 && jsxs(Fragment, {
         children: [monthNamesFull[calendars[0].month], " ", calendars[0].year]
-      }, void 0), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && jsxs(Fragment, {
+      }, void 0), pickerState.type === MONTH_PICKER$1 && pickerState.selectedYear, pickerState.type === YEAR_PICKER$1 && jsxs(Fragment, {
         children: [pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9]
-      }, void 0), pickerState.type === YEAR_RANGE_PICKER && jsxs(Fragment, {
+      }, void 0), pickerState.type === YEAR_RANGE_PICKER$1 && jsxs(Fragment, {
         children: [pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99]
       }, void 0), pickerState.type === TIME_PICKER && jsxs(Fragment, {
         children: [selected && moment(selected === null || selected === void 0 ? void 0 : selected[0]).format('DD'), " ", monthNamesFull[calendars[0].month], " ", calendars[0].year]
@@ -18802,15 +18802,15 @@ const CalendarBox = ({
     }), void 0);
   };
   const renderBackButton = () => {
-    return jsx(ArrowButton$1, Object.assign({
+    return jsx(ArrowButton$2, Object.assign({
       disabled: disabled,
       onClick: () => {
-        if (!minDate || pickerState.type === DATE_PICKER && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(minDate).getFullYear() < pickerState.selectedYear) {
+        if (!minDate || pickerState.type === DATE_PICKER$1 && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER$1 && new Date(minDate).getFullYear() < pickerState.selectedYear) {
           setPickerState(current => Object.assign(Object.assign({}, current), {
-            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
-            selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
-            selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
-            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+            selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth - 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER$1 ? current.selectedYear - 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER$1 ? current.selectedYearRange - 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
           }));
         }
       },
@@ -18822,15 +18822,15 @@ const CalendarBox = ({
     }), void 0);
   };
   const renderForwardButton = () => {
-    return jsx(ArrowButton$1, Object.assign({
+    return jsx(ArrowButton$2, Object.assign({
       disabled: disabled,
       onClick: () => {
-        if (!maxDate || pickerState.type === DATE_PICKER && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
+        if (!maxDate || pickerState.type === DATE_PICKER$1 && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER$1 && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
           setPickerState(current => Object.assign(Object.assign({}, current), {
-            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth === 11 ? 0 : current.selectedMonth + 1 : current.selectedMonth,
-            selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 || current.selectedMonth === 11 ? current.selectedYear + 1 : current.selectedYear,
-            selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
-            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+            selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth === 11 ? 0 : current.selectedMonth + 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER$1 && current.selectedYear < 2100 || current.selectedMonth === 11 ? current.selectedYear + 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER$1 && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
           }));
         }
       },
@@ -18917,7 +18917,7 @@ const CalendarBox = ({
         });
         dateProps = dateProps['disabled'] ? {} : dateProps;
         return jsx(DateNumber, Object.assign({}, dateProps, {
-          variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
+          variant: disabled ? 'disabled' : getVariant$2(dateObj, calendar.month, selected),
           isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
@@ -18935,13 +18935,13 @@ const CalendarBox = ({
         padding: '6px 4px 8px 4px'
       }
     }, {
-      children: yearsRangeList.map(range => jsxs(MonthButton$1, Object.assign({
+      children: yearsRangeList.map(range => jsxs(MonthButton$2, Object.assign({
         isSelected: pickerState.selectedYearRange === range.start,
         onClick: () => {
           if ((!maxDate || new Date(maxDate).getFullYear() <= range.end) && (!minDate || new Date(minDate).getFullYear() >= range.start)) {
             setPickerState(current => Object.assign(Object.assign({}, current), {
               selectedYearRange: range.start,
-              type: YEAR_PICKER
+              type: YEAR_PICKER$1
             }));
           }
         }
@@ -18961,13 +18961,13 @@ const CalendarBox = ({
         padding: '6px 4px 8px 4px'
       }
     }, {
-      children: yearsArray.map((year, index) => jsx(MonthButton$1, Object.assign({
+      children: yearsArray.map((year, index) => jsx(MonthButton$2, Object.assign({
         isSelected: pickerState.selectedYear === year,
         onClick: () => {
           if ((!maxDate || new Date(maxDate).getFullYear() > year - 1) && (!minDate || new Date(minDate).getFullYear() < year + 1)) {
             setPickerState(current => Object.assign(Object.assign({}, current), {
               selectedYear: year,
-              type: MONTH_PICKER
+              type: MONTH_PICKER$1
             }));
           }
         }
@@ -18985,14 +18985,14 @@ const CalendarBox = ({
         padding: '6px 4px 8px 4px'
       }
     }, {
-      children: monthNamesFull.map((monthName, index) => jsx(MonthButton$1, Object.assign({
+      children: monthNamesFull.map((monthName, index) => jsx(MonthButton$2, Object.assign({
         isSelected: pickerState.selectedMonth === index,
         onClick: () => {
           if ((!minDate || moment(minDate).isBefore(moment().month(index).year(pickerState.selectedYear))) && (!maxDate || moment(maxDate).isAfter(moment().month(index).year(pickerState.selectedYear)))) {
             if (onIsMultiDateChange) onIsMultiDateChange(true);
             setPickerState(current => Object.assign(Object.assign({}, current), {
               selectedMonth: index,
-              type: DATE_PICKER
+              type: DATE_PICKER$1
             }));
           }
         }
@@ -19002,7 +19002,7 @@ const CalendarBox = ({
     }), void 0);
   };
   const renderWeekLabel = calendar => {
-    return weekdayNamesShort.map(weekday => jsx(WeekdayBox$1, {
+    return weekdayNamesShort.map(weekday => jsx(WeekdayBox$2, {
       children: jsx(Paragraph, Object.assign({
         paragraph: "shortContentBold",
         css: {
@@ -19150,13 +19150,13 @@ const CalendarBox = ({
   };
   if (calendars.length) {
     return jsxs(CalenderBoxContainer, {
-      children: [jsxs(CalendarsContainer$1, Object.assign({
+      children: [jsxs(CalendarsContainer$2, Object.assign({
         css: containerStyle
       }, {
         children: [advanceView, advanceView && jsx(Separator$2, {
           orientation: "vertical"
         }, void 0), jsxs(Box, {
-          children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
+          children: [renderHeader(), jsx(CalendarItemContainer$2, Object.assign({
             gap: 5
           }, {
             children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
@@ -19165,19 +19165,19 @@ const CalendarBox = ({
                 css: {
                   height: 'auto'
                 }
-              }, void 0), jsxs(DateContainer$1, {
+              }, void 0), jsxs(DateContainer$2, {
                 children: [jsx(Separator$2, {
                   css: {
                     mb: '$spacing-04',
                     mt: '$spacing-02'
                   }
-                }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
+                }, void 0), pickerState.type === DATE_PICKER$1 && jsxs(Fragment, {
                   children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-                }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+                }, void 0), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList()]
               }, void 0)]
             }, `${calendar.month}${calendar.year}`))
           }), void 0)]
-        }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
+        }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER$1 && !!advanceView && jsxs(Fragment$1, {
           children: [jsx(Separator$2, {
             orientation: "vertical"
           }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
@@ -19194,7 +19194,7 @@ const CalendarBox = ({
   return null;
 };
 
-const getVariant = ({
+const getVariant$1 = ({
   selectable,
   selected,
   date
@@ -19220,7 +19220,7 @@ const getVariant = ({
   }
   return variant;
 };
-const ArrowButton = styled('button', {
+const ArrowButton$1 = styled('button', {
   all: 'unset',
   size: '32px',
   borderRadius: '$md',
@@ -19245,7 +19245,7 @@ const ArrowButton = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox = styled(Box, {
+const WeekdayBox$1 = styled(Box, {
   display: 'inline-block',
   width: '45.5px',
   textAlign: 'center',
@@ -19263,7 +19263,7 @@ const DatePickerContainer = styled(Box, {
     width: 'unset'
   }
 });
-const CalendarsContainer = styled(Box, {
+const CalendarsContainer$1 = styled(Box, {
   width: '100%',
   overflow: 'auto',
   padding: '$spacing-02 20px $spacing-05',
@@ -19284,11 +19284,11 @@ const CalendarsContainer = styled(Box, {
     display: 'none'
   }
 });
-const CalendarItemContainer = styled(Flex$1, {
+const CalendarItemContainer$1 = styled(Flex$1, {
   height: '100%',
   paddingBottom: '160px'
 });
-const DateContainer = styled(Box, {
+const DateContainer$1 = styled(Box, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -19303,7 +19303,7 @@ const FooterContainer = styled(Flex$1, {
   boxShadow: '0px -1px 8px rgba(0, 0, 0, 0.12)',
   padding: '$spacing-05 $spacing-04'
 });
-const TitleButton = styled(Heading, {
+const TitleButton$1 = styled(Heading, {
   padding: '2px $spacing-04',
   color: '$textPrimary',
   '&:hover': {
@@ -19328,7 +19328,7 @@ const TitleButton = styled(Heading, {
     }
   }
 });
-const MonthButton = styled(Text$1, {
+const MonthButton$1 = styled(Text$1, {
   minWidth: '90px',
   textAlign: 'center !important',
   borderRadius: '$md',
@@ -19388,7 +19388,7 @@ const MobileCalendarBox = ({
     i18n
   } = useTranslation(['MajooUI/datePicker', 'translation']);
   const [pickerState, setPickerState] = useState({
-    type: DATE_PICKER,
+    type: DATE_PICKER$1,
     selectedMonth: Number(calendars[0].month),
     selectedYear: Number(calendars[0].year),
     selectedYearRange: getCalendarStartYear(calendars[0].year),
@@ -19413,44 +19413,44 @@ const MobileCalendarBox = ({
   }, [`${pickerState.selectedMonth}/${pickerState.selectedYear}`]);
   const multiDatePicker = calendars.length > 1;
   const renderTitleButton = index => {
-    return multiDatePicker ? jsxs(TitleButton, Object.assign({
+    return multiDatePicker ? jsxs(TitleButton$1, Object.assign({
       heading: "sectionTitle",
       onClick: () => {
         if (onIsMultiDateChange) onIsMultiDateChange(false);
         setPickerState(current => Object.assign(Object.assign({}, current), {
-          type: MONTH_PICKER
+          type: MONTH_PICKER$1
         }));
       }
     }, {
       children: [monthNamesFull[calendars[index].month], " ", calendars[index].year]
-    }), void 0) : jsxs(TitleButton, Object.assign({
+    }), void 0) : jsxs(TitleButton$1, Object.assign({
       heading: "sectionTitle",
       onClick: () => {
-        if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign(Object.assign({}, current), {
+        if (pickerState.type < YEAR_RANGE_PICKER$1) setPickerState(current => Object.assign(Object.assign({}, current), {
           type: current.type + 1
         }));
       },
-      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER
+      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1
     }, {
-      children: [pickerState.type === DATE_PICKER && jsxs(Fragment, {
+      children: [pickerState.type === DATE_PICKER$1 && jsxs(Fragment, {
         children: [monthNamesFull[calendars[0].month], " ", calendars[0].year]
-      }, void 0), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && jsxs(Fragment, {
+      }, void 0), pickerState.type === MONTH_PICKER$1 && pickerState.selectedYear, pickerState.type === YEAR_PICKER$1 && jsxs(Fragment, {
         children: [pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9]
-      }, void 0), pickerState.type === YEAR_RANGE_PICKER && jsxs(Fragment, {
+      }, void 0), pickerState.type === YEAR_RANGE_PICKER$1 && jsxs(Fragment, {
         children: [pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99]
       }, void 0)]
     }), void 0);
   };
   const renderBackButton = () => {
-    return jsx(ArrowButton, Object.assign({
+    return jsx(ArrowButton$1, Object.assign({
       disabled: disabled,
       onClick: () => {
-        if (!minDate || pickerState.type === DATE_PICKER && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(minDate).getFullYear() < pickerState.selectedYear) {
+        if (!minDate || pickerState.type === DATE_PICKER$1 && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER$1 && new Date(minDate).getFullYear() < pickerState.selectedYear) {
           setPickerState(current => Object.assign(Object.assign({}, current), {
-            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
-            selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
-            selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
-            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+            selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth - 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER$1 ? current.selectedYear - 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER$1 ? current.selectedYearRange - 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
           }));
         }
       },
@@ -19462,15 +19462,15 @@ const MobileCalendarBox = ({
     }), void 0);
   };
   const renderForwardButton = () => {
-    return jsx(ArrowButton, Object.assign({
+    return jsx(ArrowButton$1, Object.assign({
       disabled: disabled,
       onClick: () => {
-        if (!maxDate || pickerState.type === DATE_PICKER && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
+        if (!maxDate || pickerState.type === DATE_PICKER$1 && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER$1 && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
           setPickerState(current => Object.assign(Object.assign({}, current), {
-            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth + 1 : current.selectedMonth,
-            selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 ? current.selectedYear + 1 : current.selectedYear,
-            selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
-            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+            selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth + 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER$1 && current.selectedYear < 2100 ? current.selectedYear + 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER$1 && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
           }));
         }
       },
@@ -19526,7 +19526,7 @@ const MobileCalendarBox = ({
         return jsx(DateNumber, Object.assign({
           size: "small"
         }, dateProps, {
-          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
@@ -19542,13 +19542,13 @@ const MobileCalendarBox = ({
         gridColumnGap: '20px'
       }
     }, {
-      children: yearRangesList(pickerState.selectedYearRangeStart).map(range => jsxs(MonthButton, Object.assign({
+      children: yearRangesList(pickerState.selectedYearRangeStart).map(range => jsxs(MonthButton$1, Object.assign({
         isSelected: pickerState.selectedYearRange === range.start,
         onClick: () => {
           if ((!maxDate || new Date(maxDate).getFullYear() <= range.end) && (!minDate || new Date(minDate).getFullYear() >= range.start)) {
             setPickerState(current => Object.assign(Object.assign({}, current), {
               selectedYearRange: range.start,
-              type: YEAR_PICKER
+              type: YEAR_PICKER$1
             }));
           }
         }
@@ -19566,6 +19566,476 @@ const MobileCalendarBox = ({
         gridRowGap: '$spacing-06',
         gridColumnGap: '20px'
       }
+    }, {
+      children: yearsArray.map((year, index) => jsx(MonthButton$1, Object.assign({
+        isSelected: pickerState.selectedYear === year,
+        onClick: () => {
+          if ((!maxDate || new Date(maxDate).getFullYear() > year - 1) && (!minDate || new Date(minDate).getFullYear() < year + 1)) {
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedYear: year,
+              type: MONTH_PICKER$1
+            }));
+          }
+        }
+      }, {
+        children: year
+      }), year))
+    }), void 0);
+  };
+  const renderMonthsList = () => {
+    return jsx(Grid, Object.assign({
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-06',
+        gridColumnGap: '20px'
+      }
+    }, {
+      children: monthNamesFull.map((monthName, index) => jsx(MonthButton$1, Object.assign({
+        isSelected: pickerState.selectedMonth === index,
+        onClick: () => {
+          if ((!minDate || moment(minDate).isBefore(moment().month(index).year(pickerState.selectedYear))) && (!maxDate || moment(maxDate).isAfter(moment().month(index).year(pickerState.selectedYear)))) {
+            if (onIsMultiDateChange) onIsMultiDateChange(true);
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedMonth: index,
+              type: DATE_PICKER$1
+            }));
+          }
+        }
+      }, {
+        children: monthName
+      }), monthName))
+    }), void 0);
+  };
+  const renderWeekLabel = calendar => {
+    return jsx(Flex$1, {
+      children: weekdayNamesShort.map(weekday => jsx(WeekdayBox$1, {
+        children: jsx(Paragraph, Object.assign({
+          paragraph: "shortContentBold",
+          css: {
+            color: '$textSecondary',
+            textAlign: 'center !important'
+          }
+        }, {
+          children: weekday
+        }), void 0)
+      }, `${calendar.month}${calendar.year}${weekday}`))
+    }, void 0);
+  };
+  const renderFooter = () => {
+    return jsxs(FooterContainer, Object.assign({
+      direction: "column",
+      justify: "center",
+      gap: 4
+    }, {
+      children: [advanceView && jsxs(Fragment, {
+        children: [jsxs(AdvanceViewToggleButton, Object.assign({
+          gap: 3,
+          align: "center",
+          justify: "between",
+          onClick: () => setExpandAdvanceView(!expandAdvanceView)
+        }, {
+          children: [jsx(Text$1, Object.assign({
+            variant: "contentButton",
+            css: {
+              color: '$textPrimary'
+            }
+          }, {
+            children: t('selectTimeRangeText', 'Pilih Rentang Waktu')
+          }), void 0), expandAdvanceView ? jsx(ChevronDownOutline, {}, void 0) : jsx(ChevronUpOutline, {}, void 0)]
+        }), void 0), expandAdvanceView && advanceView, jsx(Separator$2, {
+          css: {
+            marginBottom: '$spacing-05'
+          }
+        }, void 0)]
+      }, void 0), jsx(Text$1, Object.assign({
+        css: {
+          textAlign: 'center !important'
+        },
+        variant: "status",
+        color: _overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable'
+      }, {
+        children: _overMaxRange ? t('label.maxRangeDate', `Maksimal range adalah ${_maxRange} hari`, {
+          maxRange: _maxRange
+        }) : selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
+      }), void 0), jsxs(Flex$1, Object.assign({
+        gap: 3
+      }, {
+        children: [allowReset ? jsx(Button$4, Object.assign({
+          buttonType: "ghost",
+          size: "md",
+          onClick: onReset,
+          disabled: disabled || !selected || selected.length <= 1,
+          type: "button",
+          block: true
+        }, {
+          children: "Reset"
+        }), void 0) : jsx(Button$4, Object.assign({
+          buttonType: "ghost",
+          size: "md",
+          onClick: onCancel,
+          disabled: disabled,
+          type: "button",
+          block: true
+        }, {
+          children: t('label.cancel', 'Batal', {
+            ns: 'translation'
+          })
+        }), void 0), jsx(Button$4, Object.assign({
+          size: "md",
+          onClick: onUpdate,
+          disabled: disabled || !selected || selected.length <= 1 || _overMaxRange,
+          type: "button",
+          block: true
+        }, {
+          children: t('label.process', 'Proses', {
+            ns: 'translation'
+          })
+        }), void 0)]
+      }), void 0)]
+    }), void 0);
+  };
+  if (calendars.length) {
+    return jsxs(DatePickerContainer, {
+      children: [jsx(CalendarsContainer$1, Object.assign({
+        css: containerStyle
+      }, {
+        children: jsx(CalendarItemContainer$1, Object.assign({
+          direction: "column",
+          gap: 5
+        }, {
+          children: calendars.map((calendar, index) => jsxs(DateContainer$1, {
+            children: [renderHeader(index), jsx(Separator$2, {
+              css: {
+                marginBottom: '$spacing-05'
+              }
+            }, void 0), pickerState.type === DATE_PICKER$1 && jsxs(Fragment, {
+              children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+            }, void 0), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList()]
+          }, `${calendar.month}${calendar.year}`))
+        }), void 0)
+      }), void 0), multiDatePicker && renderFooter()]
+    }, void 0);
+  }
+  return null;
+};
+
+const getVariant = ({
+  selectable,
+  selected,
+  date
+}, month, selectedDate) => {
+  let variant = 'defaultv2';
+  if (selected) {
+    variant = 'selectedv2';
+  }
+  if (!selectable) {
+    variant = 'disabled';
+  }
+  if (date.getMonth() !== month) {
+    variant = 'neutral';
+  }
+  return variant;
+};
+const ArrowButton = styled('button', {
+  all: 'unset',
+  size: '32px',
+  borderRadius: '$md',
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$iconPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$bgWhite'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  }
+});
+const WeekdayBox = styled(Box, {
+  width: '$full',
+  display: 'inline-block',
+  textAlign: 'center',
+  marginBottom: '$spacing-03'
+});
+const CalendarsContainer = styled(Box, {
+  width: '100%'
+});
+const CalendarItemContainer = styled(Flex$1, {});
+const DateContainer = styled(Box, {
+  width: '100%',
+  position: 'relative',
+  display: 'inline-block'
+});
+const TitleButton = styled('p', {
+  marginTop: 6,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 16,
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$bgWhite'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none'
+      }
+    }
+  }
+});
+const MonthButton = styled(Text$1, {
+  minWidth: '70px',
+  textAlign: 'center !important',
+  borderRadius: '$md',
+  padding: '$spacing-03 0',
+  cursor: 'pointer',
+  fontSize: '$label',
+  lineHeight: '$label',
+  letterSpacing: '$label',
+  fontWeight: '400',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$bgWhite'
+  },
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    isSelected: {
+      true: {
+        backgroundColor: '$bgGreen',
+        color: '$bgWhite'
+      }
+    }
+  }
+});
+const DATE_PICKER = 0;
+const MONTH_PICKER = 1;
+const YEAR_PICKER = 2;
+const YEAR_RANGE_PICKER = 3;
+const CalendarBox = ({
+  calendars,
+  getDateProps,
+  onCalendarDateChange,
+  selected,
+  containerStyle,
+  disabled,
+  minDate,
+  maxDate,
+  disabledDate
+}) => {
+  const {
+    t,
+    i18n
+  } = useTranslation(['MajooUI/datePicker', 'translation']);
+  const [pickerState, setPickerState] = useState({
+    type: DATE_PICKER,
+    selectedMonth: Number(calendars[0].month),
+    selectedYear: Number(calendars[0].year),
+    selectedYearRange: getCalendarStartYear(calendars[0].year),
+    selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
+  });
+  const language = i18n.language;
+  const monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+  const weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
+  useEffect(() => {
+    const selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
+    if (pickerState.selectedMonth < 0) {
+      setPickerState(current => Object.assign(Object.assign({}, current), {
+        selectedMonth: selectedDate.getMonth(),
+        selectedYear: selectedDate.getFullYear(),
+        selectedYearRange: getCalendarStartYear(selectedDate.getFullYear()),
+        selectedYearRangeStart: getCalendarStartYearRange(selectedDate.getFullYear())
+      }));
+    } else {
+      onCalendarDateChange(selectedDate);
+    }
+  }, [`${pickerState.selectedMonth}/${pickerState.selectedYear}`]);
+  const multiDatePicker = calendars.length > 1;
+  const renderTitleButton = (index = 0) => {
+    return multiDatePicker ? jsxs(TitleButton, Object.assign({
+      onClick: () => {
+        setPickerState(current => Object.assign(Object.assign({}, current), {
+          type: MONTH_PICKER
+        }));
+      }
+    }, {
+      children: [monthNamesFull[calendars[index].month], " ", calendars[index].year]
+    }), void 0) : jsxs(TitleButton, Object.assign({
+      onClick: () => {
+        if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign(Object.assign({}, current), {
+          type: current.type + 1
+        }));
+      },
+      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER
+    }, {
+      children: [pickerState.type === DATE_PICKER && jsxs(Fragment, {
+        children: [monthNamesFull[calendars[0].month], " ", calendars[0].year]
+      }, void 0), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && jsxs(Fragment, {
+        children: [pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9]
+      }, void 0), pickerState.type === YEAR_RANGE_PICKER && jsxs(Fragment, {
+        children: [pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99]
+      }, void 0)]
+    }), void 0);
+  };
+  const renderBackButton = () => {
+    return jsx(ArrowButton, Object.assign({
+      disabled: disabled,
+      onClick: () => {
+        if (!minDate || pickerState.type === DATE_PICKER && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(minDate).getFullYear() < pickerState.selectedYear) {
+          setPickerState(current => Object.assign(Object.assign({}, current), {
+            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+          }));
+        }
+      },
+      type: "button"
+    }, {
+      children: jsx(ChevronLeftOutline, {
+        color: "currentColor"
+      }, void 0)
+    }), void 0);
+  };
+  const renderForwardButton = () => {
+    return jsx(ArrowButton, Object.assign({
+      disabled: disabled,
+      onClick: () => {
+        if (!maxDate || pickerState.type === DATE_PICKER && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
+          setPickerState(current => Object.assign(Object.assign({}, current), {
+            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth === 11 ? 0 : current.selectedMonth + 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 || current.selectedMonth === 11 ? current.selectedYear + 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+          }));
+        }
+      },
+      type: "button"
+    }, {
+      children: jsx(ChevronRightOutline, {
+        color: "currentColor"
+      }, void 0)
+    }), void 0);
+  };
+  const renderHeader = () => {
+    return jsxs(Flex$1, Object.assign({
+      justify: "between",
+      align: "baseline",
+      css: {
+        height: '32px'
+      }
+    }, {
+      children: [renderTitleButton(), jsxs(Flex$1, Object.assign({
+        align: "center",
+        gap: 3
+      }, {
+        children: [renderBackButton(), renderForwardButton()]
+      }), void 0)]
+    }), void 0);
+  };
+  const renderDateNumber = calendar => {
+    return jsxs(Grid, Object.assign({
+      columns: 7,
+      css: {
+        gridRowGap: '$spacing-02'
+      }
+    }, {
+      children: [renderWeekLabel(calendar), calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+        const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+        if (!dateObj) {
+          return jsx("div", {
+            style: {
+              display: 'inline-block',
+              width: '32px',
+              border: 'none',
+              background: 'transparent'
+            }
+          }, key);
+        }
+        const {
+          date
+        } = dateObj;
+        let findDisabledDate = (disabledDate || []).find(x => x.getTime() === date.getTime());
+        let dateProps = disabled ? {} : getDateProps({
+          dateObj
+        });
+        dateProps = dateProps['disabled'] ? {} : dateProps;
+        return jsx(DateNumber, Object.assign({}, dateProps, {
+          variant: disabled || findDisabledDate ? 'disabled' : getVariant(dateObj, calendar.month),
+          isSunday: date.getDay() === 0,
+          css: {
+            width: '$full'
+          }
+        }, {
+          children: date.getDate()
+        }), key);
+      }))]
+    }), void 0);
+  };
+  const renderYearRangesList = () => {
+    const yearsRangeList = yearRangesList(pickerState.selectedYearRangeStart);
+    return jsx(Grid, Object.assign({
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
+      }
+    }, {
+      children: yearsRangeList.map(range => jsxs(MonthButton, Object.assign({
+        isSelected: pickerState.selectedYearRange === range.start,
+        onClick: () => {
+          if ((!maxDate || new Date(maxDate).getFullYear() <= range.end) && (!minDate || new Date(minDate).getFullYear() >= range.start)) {
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedYearRange: range.start,
+              type: YEAR_PICKER
+            }));
+          }
+        }
+      }, {
+        children: [range.start, "-", range.end]
+      }), range.start))
+    }), void 0);
+  };
+  const renderYearsList = () => {
+    const startYear = pickerState.selectedYearRange;
+    const yearsArray = Array.from(new Array(10), (val, index) => index + startYear);
+    return jsx(Grid, Object.assign({
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
+      }
     }, {
       children: yearsArray.map((year, index) => jsx(MonthButton, Object.assign({
         isSelected: pickerState.selectedYear === year,
@@ -19586,15 +20056,15 @@ const MobileCalendarBox = ({
     return jsx(Grid, Object.assign({
       columns: 3,
       css: {
-        gridRowGap: '$spacing-06',
-        gridColumnGap: '20px'
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
       }
     }, {
       children: monthNamesFull.map((monthName, index) => jsx(MonthButton, Object.assign({
         isSelected: pickerState.selectedMonth === index,
         onClick: () => {
           if ((!minDate || moment(minDate).isBefore(moment().month(index).year(pickerState.selectedYear))) && (!maxDate || moment(maxDate).isAfter(moment().month(index).year(pickerState.selectedYear)))) {
-            if (onIsMultiDateChange) onIsMultiDateChange(true);
             setPickerState(current => Object.assign(Object.assign({}, current), {
               selectedMonth: index,
               type: DATE_PICKER
@@ -19607,114 +20077,45 @@ const MobileCalendarBox = ({
     }), void 0);
   };
   const renderWeekLabel = calendar => {
-    return jsx(Flex$1, {
-      children: weekdayNamesShort.map(weekday => jsx(WeekdayBox, {
-        children: jsx(Paragraph, Object.assign({
-          paragraph: "shortContentBold",
-          css: {
-            color: '$textSecondary',
-            textAlign: 'center !important'
-          }
-        }, {
-          children: weekday
-        }), void 0)
-      }, `${calendar.month}${calendar.year}${weekday}`))
-    }, void 0);
-  };
-  const renderFooter = () => {
-    return jsxs(FooterContainer, Object.assign({
-      direction: "column",
-      justify: "center",
-      gap: 4
-    }, {
-      children: [advanceView && jsxs(Fragment, {
-        children: [jsxs(AdvanceViewToggleButton, Object.assign({
-          gap: 3,
-          align: "center",
-          justify: "between",
-          onClick: () => setExpandAdvanceView(!expandAdvanceView)
-        }, {
-          children: [jsx(Text$1, Object.assign({
-            variant: "contentButton",
-            css: {
-              color: '$textPrimary'
-            }
-          }, {
-            children: t('selectTimeRangeText', 'Pilih Rentang Waktu')
-          }), void 0), expandAdvanceView ? jsx(ChevronDownOutline, {}, void 0) : jsx(ChevronUpOutline, {}, void 0)]
-        }), void 0), expandAdvanceView && advanceView, jsx(Separator$2, {
-          css: {
-            marginBottom: '$spacing-05'
-          }
-        }, void 0)]
-      }, void 0), jsx(Text$1, Object.assign({
+    return weekdayNamesShort.map(weekday => jsx(WeekdayBox, {
+      children: jsx(Paragraph, Object.assign({
+        paragraph: "shortContentBold",
         css: {
+          color: '$textSecondary',
+          fontSize: '$label',
           textAlign: 'center !important'
-        },
-        variant: "status",
-        color: _overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable'
-      }, {
-        children: _overMaxRange ? t('label.maxRangeDate', `Maksimal range adalah ${_maxRange} hari`, {
-          maxRange: _maxRange
-        }) : selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
-      }), void 0), jsxs(Flex$1, Object.assign({
-        gap: 3
+        }
       }, {
-        children: [allowReset ? jsx(Button$4, Object.assign({
-          buttonType: "ghost",
-          size: "md",
-          onClick: onReset,
-          disabled: disabled || !selected || selected.length <= 1,
-          type: "button",
-          block: true
-        }, {
-          children: "Reset"
-        }), void 0) : jsx(Button$4, Object.assign({
-          buttonType: "ghost",
-          size: "md",
-          onClick: onCancel,
-          disabled: disabled,
-          type: "button",
-          block: true
-        }, {
-          children: t('label.cancel', 'Batal', {
-            ns: 'translation'
-          })
-        }), void 0), jsx(Button$4, Object.assign({
-          size: "md",
-          onClick: onUpdate,
-          disabled: disabled || !selected || selected.length <= 1 || _overMaxRange,
-          type: "button",
-          block: true
-        }, {
-          children: t('label.process', 'Proses', {
-            ns: 'translation'
-          })
-        }), void 0)]
-      }), void 0)]
-    }), void 0);
+        children: weekday
+      }), void 0)
+    }, `${calendar.month}${calendar.year}${weekday}`));
   };
   if (calendars.length) {
-    return jsxs(DatePickerContainer, {
-      children: [jsx(CalendarsContainer, Object.assign({
-        css: containerStyle
-      }, {
-        children: jsx(CalendarItemContainer, Object.assign({
-          direction: "column",
+    return jsx(CalendarsContainer, Object.assign({
+      css: containerStyle
+    }, {
+      children: jsxs(Box, {
+        children: [renderHeader(), jsx(CalendarItemContainer, Object.assign({
           gap: 5
         }, {
-          children: calendars.map((calendar, index) => jsxs(DateContainer, {
-            children: [renderHeader(index), jsx(Separator$2, {
+          children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
+            children: [index > 0 && jsx(Separator$2, {
+              orientation: "vertical",
               css: {
-                marginBottom: '$spacing-05'
+                height: 'auto'
               }
-            }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
-              children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-            }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+            }, void 0), jsxs(DateContainer, {
+              children: [jsx(Separator$2, {
+                css: {
+                  mb: '$spacing-04',
+                  mt: '$spacing-02'
+                }
+              }, void 0), pickerState.type === DATE_PICKER && renderDateNumber(calendar), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+            }, void 0)]
           }, `${calendar.month}${calendar.year}`))
-        }), void 0)
-      }), void 0), multiDatePicker && renderFooter()]
-    }, void 0);
+        }), void 0)]
+      }, void 0)
+    }), void 0);
   }
   return null;
 };
@@ -19782,7 +20183,7 @@ const CalendarPicker = _a => {
       onChange(dateValue);
     }
   }, [dateValue]);
-  return jsx(CalendarBox, Object.assign({
+  return jsx(CalendarBox$1, Object.assign({
     onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
     onCancel: onClose,
     selected: dateValue ? [dateValue] : undefined,
@@ -19917,7 +20318,7 @@ const CalendarRangePicker = _a => {
     onReset: isMultiDatePicker ? resetHandler : undefined,
     maxRange: maxRange,
     overMaxRange: overMaxRange
-  }, dayzedData), void 0) : jsx(CalendarBox, Object.assign({
+  }, dayzedData), void 0) : jsx(CalendarBox$1, Object.assign({
     onUpdate: isMultiDatePicker ? updateHandler : undefined,
     onCancel: onClose,
     selected: dateValue,
@@ -20789,6 +21190,60 @@ function CustomDatePicker({
   }, void 0);
 }
 
+const DatePickerMulti = _a => {
+  var {
+      onChange,
+      onClose,
+      selected,
+      disabled,
+      minDate,
+      maxDate
+    } = _a,
+    props = __rest(_a, ["onChange", "onClose", "selected", "disabled", "minDate", "maxDate"]);
+  const today = new Date();
+  const nowMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+  let initMonth = nowMonth;
+  if (selected && selected.length > 1) {
+    const selectedMonthStart = new Date(selected[0].getFullYear(), selected[0].getMonth(), 1, 0);
+    if (selectedMonthStart > nowMonth) initMonth = selectedMonthStart;
+  }
+  const [dateValue, setDateValue] = useState(selected) || [];
+  const [calendarDate, setCalendarDate] = useState(initMonth);
+  const onDateSelected = ({
+    date
+  }) => {
+    let newDate = [];
+    if ((dateValue || []).find(x => x.getTime() === date.getTime())) {
+      newDate = (dateValue || []).filter(x => x.getTime() !== date.getTime());
+    } else {
+      newDate = [...(dateValue || []), date];
+    }
+    setDateValue(newDate);
+    if (onChange) onChange(newDate);
+  };
+  const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: 1,
+    showOutsideDays: false,
+    onDateSelected,
+    minDate,
+    maxDate
+  }));
+  useMountedLayoutEffect(() => {
+    if (selected) {
+      setDateValue(selected);
+    }
+  }, [selected]);
+  return jsx(CalendarBox, Object.assign({
+    selected: dateValue,
+    disabled: disabled,
+    onCalendarDateChange: setCalendarDate,
+    minDate: minDate,
+    maxDate: maxDate
+  }, dayzedData), void 0);
+};
+
 const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       onChange,
@@ -21001,7 +21456,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 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/slider/Slider.js";
+var _jsxFileName$q = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -21345,7 +21800,7 @@ Slider.defaultProps = {
 };
 
 const _excluded$9 = ["className", "children", "onClick", "type", "size"];
-var _jsxFileName$p = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
+var _jsxFileName$p = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tagStatus\\TagStatus.js";
 const TagWrapper$1 = styled('div', {
   boxSizing: 'border-box',
   fontSize: '12px',
@@ -21508,7 +21963,7 @@ const _excluded$8 = ["children"],
   _excluded2$1 = ["children", "activeTabs"],
   _excluded3$1 = ["children", "icon", "activeTabs", "value"],
   _excluded4$1 = ["activeTabs"];
-var _jsxFileName$o = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tabs/Tabs.js";
+var _jsxFileName$o = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tabs\\Tabs.js";
 const StyledTabs = styled(TabsPrimitive.Root, {
   display: 'flex',
   flexDirection: 'column',
@@ -21847,7 +22302,7 @@ TabsContent$1.propTypes = {
 };
 
 const _excluded$7 = ["children", "variantIcon"];
-var _jsxFileName$n = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
+var _jsxFileName$n = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -22002,7 +22457,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$m = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/paper/Paper.js";
+var _jsxFileName$m = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -22255,7 +22710,7 @@ const removeUndefinedFields = obj => {
 };
 
 const _excluded$5 = ["isActive", "onClick"];
-var _jsxFileName$l = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
+var _jsxFileName$l = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationButton.js";
 const PrevNextButton = styled(Text$1, {
   padding: '$spacing-01',
   cursor: 'pointer',
@@ -22749,7 +23204,7 @@ const PaginationButton = ({
 };
 
 const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
-var _jsxFileName$k = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
+var _jsxFileName$k = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationInfo.js";
 const LimitContainer = styled(Flex$1, {
   cursor: 'pointer'
 });
@@ -22984,7 +23439,7 @@ function PaginationInfo(_ref) {
 }
 
 const _excluded$3 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
-var _jsxFileName$j = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/pagination/Pagination.js";
+var _jsxFileName$j = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
 function Pagination(_ref) {
   let {
       limit,
@@ -23858,7 +24313,7 @@ const ScrollSyncNode = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 });
 ScrollSyncNode.displayName = 'ScrollSyncNode';
 
-var _jsxFileName$i = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowDraggableColumn.js";
+var _jsxFileName$i = "E:\\Coding\\Majoo\\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 +25809,7 @@ const TableColumn = _a => {
   return jsx("div", {}, void 0);
 };
 
-var _jsxFileName$h = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
+var _jsxFileName$h = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
 const DateColumn = ({
   value,
   customFormat
@@ -25466,7 +25921,7 @@ const PriceColumn = props => {
   return addThousandSeparator(param);
 };
 
-var _jsxFileName$g = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
+var _jsxFileName$g = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderColumn.js";
 const rowExpanderColumn = {
   id: 'expander',
   Header: () => null,
@@ -25509,7 +25964,7 @@ const rowExpanderColumn = {
   unsortable: true
 };
 
-var _jsxFileName$f = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
+var _jsxFileName$f = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderMultipleColumn.js";
 const rowExpanderMultipleColumn = {
   id: 'multiple-expander',
   Header: () => null,
@@ -25545,7 +26000,7 @@ const rowExpanderMultipleColumn = {
   unsortable: true
 };
 
-var _jsxFileName$e = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
+var _jsxFileName$e = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowMenuColumn.js";
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
   options,
@@ -25682,7 +26137,7 @@ const rowMenuColumn = (options, icon, config) => ({
   unsortable: true
 });
 
-var _jsxFileName$d = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
+var _jsxFileName$d = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionColumn.js";
 const rowSelectionColumn = {
   id: 'selection',
   Header: ({
@@ -25731,7 +26186,7 @@ const rowSelectionColumn = {
   unsortable: true
 };
 
-var _jsxFileName$c = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
+var _jsxFileName$c = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionCallbackColumn.js";
 const rowSelectionWithCallbackColumn = (onCheckedChange, onAllCheckedChange) => ({
   id: 'selection',
   Header: ({
@@ -26069,7 +26524,7 @@ PageDialog.defaultProps = {
 };
 
 const _excluded$2 = ["children"];
-var _jsxFileName$b = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
+var _jsxFileName$b = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\alertDialog\\AlertDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -26705,7 +27160,7 @@ const _excluded$1 = ["side", "align", "children"],
   _excluded2 = ["theme"],
   _excluded3 = ["children"],
   _excluded4 = ["asChild"];
-var _jsxFileName$a = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
+var _jsxFileName$a = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\dropdownMenu\\DropdownMenu.js";
 const Context = /*#__PURE__*/React__default.createContext();
 const slideUpAndFade = keyframes({
   '0%': {
@@ -28982,7 +29437,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
 }
 
 const _excluded = ["customPreviewIcon"];
-var _jsxFileName$9 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/upload/Upload.js";
+var _jsxFileName$9 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\upload\\Upload.js";
 const Input$2 = styled('input', {
   display: 'none !important'
 });
@@ -29085,7 +29540,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 +29604,8 @@ const Upload = ({
   isDefaultCustomRatio,
   customPreviewIcon,
   onPreviewIconClick,
-  maxWidthOrHeight
+  maxWidthOrHeight,
+  theme
 }) => {
   const {
     t
@@ -29597,7 +30053,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 666,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -29607,7 +30063,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 +30078,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 676,
+            lineNumber: 677,
             columnNumber: 16
           }
         });
@@ -29633,7 +30089,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 680,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29643,7 +30099,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 681,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29652,7 +30108,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 682,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29665,7 +30121,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29681,7 +30137,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -29691,7 +30147,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 705,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29708,7 +30164,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 715,
+            lineNumber: 716,
             columnNumber: 16
           }
         });
@@ -29718,7 +30174,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29728,7 +30184,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 720,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29737,7 +30193,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 721,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -29750,7 +30206,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 722,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29760,14 +30216,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 +30231,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 732,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -29790,7 +30246,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 +30259,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 749,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29819,7 +30275,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 757,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -29827,7 +30283,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 770,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29842,7 +30298,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 781,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29856,7 +30312,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 782,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -29882,7 +30338,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 782,
+        lineNumber: 783,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -29890,14 +30346,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 +30365,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 804,
+        lineNumber: 805,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -29925,21 +30381,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 +30404,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 819,
+        lineNumber: 820,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29956,7 +30412,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 820,
+        lineNumber: 821,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29966,7 +30422,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 +30432,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 829,
+        lineNumber: 830,
         columnNumber: 19
       }
     }, error));
@@ -29987,10 +30443,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 +30455,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 842,
+        lineNumber: 844,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -30006,7 +30463,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 843,
+        lineNumber: 845,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -30019,7 +30476,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 +30489,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 848,
+        lineNumber: 850,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30043,7 +30500,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 856,
+        lineNumber: 858,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30057,14 +30514,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 +30533,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 +30548,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 873,
+        lineNumber: 875,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30103,7 +30560,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 874,
+        lineNumber: 876,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30111,7 +30568,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 881,
+        lineNumber: 883,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30120,7 +30577,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 882,
+        lineNumber: 884,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30130,7 +30587,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 885,
+        lineNumber: 887,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30147,7 +30604,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 +30613,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 +30625,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 899,
+      lineNumber: 901,
       columnNumber: 7
     }
   }));
@@ -30188,159 +30645,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 +31473,7 @@ const Device = props => {
 };
 Device.displayName = 'DevicePreview';
 
-var _jsxFileName$8 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
+var _jsxFileName$8 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\InputColorPicker.js";
 const Separator$1 = styled('div', {
   height: 20,
   width: 1,
@@ -31126,44 +31583,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 +31634,7 @@ InputColorPicker.defaultProps = {
 
 var img$d = "data:image/gif;base64,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";
 
-var _jsxFileName$7 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
+var _jsxFileName$7 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorMap.js";
 const Container$7 = styled('div', {
   userSelect: 'none',
   margin: 'auto',
@@ -33138,7 +33595,7 @@ function ColorMap({
   })));
 }
 
-var _jsxFileName$6 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
+var _jsxFileName$6 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorFields.js";
 const CheckBoard = styled(Flex$1, {
   background: '$bgwhite',
   border: '1px solid #E5E7EB',
@@ -33339,7 +33796,7 @@ function ColorFields({
   }, "%")));
 }
 
-var _jsxFileName$5 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
+var _jsxFileName$5 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\ColorPicker.js";
 const Container$6 = styled(Flex$1, {
   background: '$white',
   padding: 16,
@@ -33830,24 +34287,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 +34313,7 @@ ColorPicker.defaultProps = {
 };
 var ColorPicker$1 = ColorWrap(ColorPicker);
 
-var _jsxFileName$4 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
+var _jsxFileName$4 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\stepWizard\\StepWizard.js";
 const StepWizardContext = /*#__PURE__*/React__default.createContext({});
 const Stepper = StepWizard$1;
 Stepper.displayName = 'Stepper';
@@ -34579,7 +35036,7 @@ StepWizard.defaultProps = {
   isLazyMount: true
 };
 
-var _jsxFileName$3 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
+var _jsxFileName$3 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\transition.js";
 function Collapse({
   children,
   isOpen
@@ -34622,7 +35079,7 @@ Collapse.defaultProps = {
   isOpen: false
 };
 
-var _jsxFileName$2 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
+var _jsxFileName$2 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\TableOfContent.js";
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
@@ -34983,7 +35440,7 @@ TableOfContentPage.defaultProps = {
   useBoxMethod: true
 };
 
-var _jsxFileName$1 = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/editableTable/transition.js";
+var _jsxFileName$1 = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\components\\editableTable\\transition.js";
 function Collapalse({
   children,
   isOpen
@@ -56497,7 +56954,7 @@ PieChartComponent.defaultProps = {
   innerRadius: 70
 };
 
-var _jsxFileName = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/colors/Colors.js";
+var _jsxFileName = "E:\\Coding\\Majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
 const StyledPaper = styled(Paper, {
   borderRadius: '10px 10px 0 0',
   padding: 15,
@@ -57799,4 +58256,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, DatePickerMulti, 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 };