@majoo-ui/react 1.61.0-rc.8 → 1.61.0

package/index.umd.js

@@ -1723,7 +1723,7 @@
     return target;
   }
 
-  const _excluded$B = ["children"],
+  const _excluded$C = ["children"],
     _excluded2$4 = ["children"];
   var _jsxFileName$10 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
@@ -1914,7 +1914,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
         gridAutoColumns: props.autoColumns,
@@ -1994,7 +1994,7 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+  const _excluded$B = ["children", "isCollapse", "css", "contentHeader"];
   var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
   const StyledDiv$2 = styled(Flex$1, {
     justifyContent: 'center',
@@ -2038,7 +2038,7 @@
         css,
         contentHeader
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
       id: "retina-container",
       css: Object.assign({
@@ -2461,7 +2461,7 @@
     }), void 0);
   });
 
-  const _excluded$z = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
+  const _excluded$A = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
   var _jsxFileName$_ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
@@ -2798,7 +2798,7 @@
         bannerBlock,
         icon
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
       hasAction: !!onClick,
@@ -3463,7 +3463,7 @@
   Card.Label = StyledLabel$2;
   Card.Description = StyledDescription$3;
 
-  const _excluded$y = ["children"];
+  const _excluded$z = ["children"];
   var _jsxFileName$Z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
@@ -3519,7 +3519,7 @@
     let {
         children
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
@@ -3781,7 +3781,7 @@
   };
   Badge.displayName = 'Badge';
 
-  const _excluded$x = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  const _excluded$y = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
   var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
@@ -3826,7 +3826,7 @@
         onClick,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
       onClick: onClick,
@@ -3883,7 +3883,7 @@
     delayMs: 0
   };
 
-  const _excluded$w = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+  const _excluded$x = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
   var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
   const ContainerFallback = styled(Flex$1, {
     boxSizing: 'border-box',
@@ -3933,7 +3933,7 @@
         cssFallback,
         rounded
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     const {
       t
     } = reactI18next.useTranslation('translation');
@@ -4569,7 +4569,7 @@
 
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-  const _excluded$v = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
+  const _excluded$w = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
   var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const {
     zIndices: zIndices$2
@@ -4686,7 +4686,7 @@
         align,
         delayDuration
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(Provider, {
       __self: undefined,
@@ -4775,7 +4775,7 @@
     delayDuration: 200
   };
 
-  const _excluded$u = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  const _excluded$v = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
   var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
@@ -4894,7 +4894,7 @@
         rounded,
         width
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
       value: value,
@@ -5587,7 +5587,7 @@
     return matches;
   }
 
-  const _excluded$t = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  const _excluded$u = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
   var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
@@ -5756,7 +5756,7 @@
         captionOfAction,
         hrefOfAction
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const isMobile = useMediaQuery(`(max-width: 767px`);
     const close = React__namespace.useCallback(() => {
@@ -5939,7 +5939,7 @@
     dismissAfter: 5000
   };
 
-  const _excluded$s = ["preventDuplicate"];
+  const _excluded$t = ["preventDuplicate"];
   var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
@@ -6003,7 +6003,7 @@
       const {
           preventDuplicate
         } = item,
-        toast = _objectWithoutPropertiesLoose(item, _excluded$s);
+        toast = _objectWithoutPropertiesLoose(item, _excluded$t);
       return /*#__PURE__*/React__namespace.createElement(Toast, _extends({
         key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
         onRemove: () => removeToast(toast.id)
@@ -7236,7 +7236,7 @@
     return message;
   };
 
-  const _excluded$r = ["id", "disabledOfflineIntercept"];
+  const _excluded$s = ["id", "disabledOfflineIntercept"];
   var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
   const ToastProvider = ({
@@ -7266,7 +7266,7 @@
           id,
           disabledOfflineIntercept
         } = toast,
-        rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
+        rest = _objectWithoutPropertiesLoose(toast, _excluded$s);
 
       // eslint-disable-next-line no-plusplus
       const uniqueId = ++toastCount;
@@ -7355,7 +7355,7 @@
     children
   }) => condition ? wrapper(children) : children;
 
-  const _excluded$q = ["count", "maxCount", "css"];
+  const _excluded$r = ["count", "maxCount", "css"];
   var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
   const formLabelClassStyle = {
     alignItems: 'start !important',
@@ -7459,7 +7459,7 @@
         maxCount,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     const withCounter = Boolean(count || maxCount);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: withCounter,
@@ -7506,7 +7506,7 @@
   };
   FormGroup.displayName = 'FormGroup';
 
-  const _excluded$p = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
+  const _excluded$q = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
   var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
@@ -7539,7 +7539,7 @@
         maxCount,
         labelCss
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       className: "form-label",
@@ -7623,7 +7623,7 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$o = ["children", "error", "errorMessage"];
+  const _excluded$p = ["children", "error", "errorMessage"];
   var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text$1, {
     display: 'inline-block',
@@ -7642,7 +7642,7 @@
         error,
         errorMessage
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     const errorByMessage = !!errorMessage;
     if (error === undefined && errorByMessage) {
       return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
@@ -7831,7 +7831,7 @@
     }
   }));
 
-  const _excluded$n = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+  const _excluded$o = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
   var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$2 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
@@ -7890,7 +7890,7 @@
         index,
         value
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     const context = React.useContext(CheckboxContext);
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
@@ -7992,7 +7992,7 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$m = ["children", "size"];
+  const _excluded$n = ["children", "size"];
   var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
@@ -8132,7 +8132,7 @@
         children,
         size = 'lg'
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const clone = children.map((child, index) => {
@@ -8331,7 +8331,7 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
 
-  const _excluded$l = ["disabled", "readOnly"];
+  const _excluded$m = ["disabled", "readOnly"];
   var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
   const disabledStyle = {
     backgroundColor: '$formDisable',
@@ -8505,7 +8505,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
       ref: ref,
       disabled: disabled,
@@ -8533,7 +8533,7 @@
   };
   InputText.displayName = 'InputText';
 
-  const _excluded$k = ["disabled", "readOnly"];
+  const _excluded$l = ["disabled", "readOnly"];
   var _jsxFileName$I = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
   const StyledTextArea = styled(StyledInput$1, {
     variants: {
@@ -8555,7 +8555,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     const textareaRef = React.useRef(null);
     React.useEffect(() => {
       if (textareaRef.current) {
@@ -8645,7 +8645,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
+  const _excluded$k = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
   var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -8811,7 +8811,7 @@
         description,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     function renderInputType(type, checkedValue, onValueChange) {
       switch (type) {
         case 'number':
@@ -8936,7 +8936,7 @@
         variant: "caption",
         color: "secondary",
         css: {
-          marginTop: '10px'
+          marginLeft: '29px'
         },
         __self: undefined,
         __source: {
@@ -11094,7 +11094,7 @@
   }(React__default["default"].Component);
   NumberFormat.defaultProps = defaultProps;
 
-  const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
+  const _excluded$j = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
   var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
   const StyledInput = styled(NumberFormat, {
     // Reset
@@ -11290,7 +11290,7 @@
         maxLength,
         thousandSeparator
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: Boolean(control),
       wrapper: child => /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
@@ -11355,7 +11355,7 @@
   InputNumber.name = 'InputText';
   InputNumber.displayName = 'InputNumber';
 
-  const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+  const _excluded$i = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
   var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagWrapper$4 = styled('div', {
     boxSizing: 'border-box',
@@ -11460,7 +11460,7 @@
         onRemove,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$4, _extends({
       ref: ref,
       onClick: onClick,
@@ -11531,7 +11531,7 @@
     readOnly: false
   };
 
-  const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
+  const _excluded$h = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
   var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
@@ -11654,7 +11654,7 @@
         unremovableTags,
         onRemoveItem
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     const [tags, setTags] = React__default["default"].useState(value);
     const [regexError, setRegexError] = React__default["default"].useState(false);
     React__default["default"].useEffect(() => {
@@ -11828,7 +11828,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+  const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
   var _jsxFileName$C = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
@@ -11900,7 +11900,7 @@
         dataOffLabel,
         disabled
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
       dataOnLabel: dataOnLabel,
@@ -12033,7 +12033,7 @@
     size: 24
   };
 
-  const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
+  const _excluded$f = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
   var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
   const {
     colors: colors$7
@@ -12050,7 +12050,7 @@
         mobileOnly,
         desktopOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSearchbox', 'translation']);
@@ -12332,7 +12332,7 @@
     }
   });
 
-  const _excluded$d = ["children"];
+  const _excluded$e = ["children"];
   var _jsxFileName$y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
   const {
     zIndices: zIndices$1
@@ -12468,7 +12468,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
     const {
       setOpenState
     } = React.useContext(PopoverContext);
@@ -13940,7 +13940,7 @@
     }), void 0);
   }
 
-  const _excluded$c = ["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"];
+  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"];
   var _jsxFileName$w = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   function _await(value, then, direct) {
     if (direct) {
@@ -14261,7 +14261,7 @@
         onSelectAllChecked,
         totalOptions
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSelectCheck', 'translation']);
@@ -16528,7 +16528,7 @@
     size: 'lg'
   };
 
-  const _excluded$b = ["children"],
+  const _excluded$c = ["children"],
     _excluded2$3 = ["children", "showOverlay"];
   var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const Context$1 = /*#__PURE__*/React__default["default"].createContext();
@@ -16570,7 +16570,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
@@ -16878,7 +16878,7 @@
   DrawerFooter.displayName = 'DrawerFooter';
   DrawerCloseButton.displayName = 'DrawerCloseButton';
 
-  const _excluded$a = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size", "withMaxWidth", "mobileOnly", "desktopOnly"],
+  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$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
   const ScrollButton$1 = styled(Button$4, {
@@ -17084,7 +17084,7 @@
         mobileOnly,
         desktopOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     const [listContainerScrollPosition, setlistContainerScrollPosition] = React.useState(0);
     const [scrollAreaWidth, setScrollAreaWidth] = React.useState(0);
     const listContainerRef = React.useRef();
@@ -17996,7 +17996,8 @@
     maxDate,
     isInvalid,
     portalled,
-    contentCss
+    contentCss,
+    onInputOpenChange
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
     function handleChange() {
@@ -18013,7 +18014,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 47,
+        lineNumber: 48,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -18022,14 +18023,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 48,
+          lineNumber: 49,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 48,
+        lineNumber: 49,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -18045,7 +18046,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 49,
+        lineNumber: 50,
         columnNumber: 7
       }
     }));
@@ -18069,18 +18070,23 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 63,
+        lineNumber: 64,
         columnNumber: 5
       }
     });
     return /*#__PURE__*/React__default["default"].createElement(Popover, {
       open: openPicker,
-      onOpenChange: setOpenPicker,
+      onOpenChange: open => {
+        setOpenPicker(open);
+        if (onInputOpenChange) {
+          onInputOpenChange(open);
+        }
+      },
       placement: placement,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18088,14 +18094,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 84,
+        lineNumber: 94,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 86,
+        lineNumber: 96,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18103,7 +18109,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 87,
+        lineNumber: 97,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
@@ -18111,7 +18117,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 90,
+        lineNumber: 100,
         columnNumber: 7
       }
     }, renderTimePicker({
@@ -18202,7 +18208,11 @@
     /**
      Additional TimePicker styles.
     */
-    contentCss: PropTypes__default["default"].object
+    contentCss: PropTypes__default["default"].object,
+    /**
+     Input open change callback.
+    */
+    onInputOpenChange: PropTypes__default["default"].func
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
@@ -19964,22 +19974,22 @@
       case NEXT_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case RANGE_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case PREV_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case RANGE_MONTH:
@@ -20840,7 +20850,7 @@
     }, void 0);
   }
 
-  const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
+  const _excluded$a = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
   var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
@@ -21100,7 +21110,7 @@
         width,
         height
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     return /*#__PURE__*/React__default["default"].createElement(StyledSlider, _extends({
       className: className,
       defaultValue: defaultValue,
@@ -21184,7 +21194,7 @@
     size: 'm'
   };
 
-  const _excluded$8 = ["className", "children", "onClick", "type", "size"];
+  const _excluded$9 = ["className", "children", "onClick", "type", "size"];
   var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
   const TagWrapper$1 = styled('div', {
     boxSizing: 'border-box',
@@ -21285,7 +21295,7 @@
         type,
         size
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, _extends({
       ref: ref,
       className: className,
@@ -21345,7 +21355,7 @@
     }, props)));
   }
 
-  const _excluded$7 = ["children"],
+  const _excluded$8 = ["children"],
     _excluded2$1 = ["children", "activeTabs"],
     _excluded3$1 = ["children", "icon", "activeTabs", "value"],
     _excluded4 = ["activeTabs"];
@@ -21493,7 +21503,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     const [activeTabs, setActiveTabs] = React.useState(props.defaultValue || '');
     return /*#__PURE__*/React__default["default"].createElement(StyledTabs, _extends({}, props, {
       onValueChange: value => {
@@ -21687,7 +21697,7 @@
     value: PropTypes__default["default"].string
   };
 
-  const _excluded$6 = ["children", "variantIcon"];
+  const _excluded$7 = ["children", "variantIcon"];
   var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
@@ -21790,7 +21800,7 @@
         children,
         variantIcon
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     const getIcon = () => {
       const isLeading = variantIcon === 'leading';
       return {
@@ -21842,7 +21852,7 @@
     dot: PropTypes__default["default"].bool
   };
 
-  const _excluded$5 = ["className", "children", "radius", "padding", "width", "height"];
+  const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
   var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
@@ -21888,7 +21898,7 @@
         width,
         height
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     return /*#__PURE__*/React__default["default"].createElement(PaperComponent, _extends({
       className: className,
       css: Object.assign({
@@ -22094,7 +22104,7 @@
     return newObj;
   };
 
-  const _excluded$4 = ["isActive", "onClick"];
+  const _excluded$5 = ["isActive", "onClick"];
   var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
   const PrevNextButton = styled(Text$1, {
     padding: '$spacing-01',
@@ -22181,7 +22191,7 @@
         isActive,
         onClick
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     return /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       type: "button",
       onClick: onClick,
@@ -22582,7 +22592,7 @@
     }, t('btnSubmitText', 'Lanjutkan'))))));
   };
 
-  const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
+  const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
   var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
   const LimitContainer = styled(Flex$1, {
     cursor: 'pointer'
@@ -22608,7 +22618,7 @@
         totalData,
         onChange
       } = _ref;
-      _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      _objectWithoutPropertiesLoose(_ref, _excluded$4);
     const {
       t
     } = reactI18next.useTranslation('MajooUI/pagination');
@@ -22815,7 +22825,7 @@
     }, limit.toString()))))));
   }
 
-  const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
+  const _excluded$3 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
   var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
   function Pagination(_ref) {
     let {
@@ -22830,7 +22840,7 @@
         hidePagination,
         hideInputPageSection
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     const totalPages = totalPage || Math.ceil(totalData / limit);
     const isMobile = useMediaQuery('(max-width: 700px)');
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
@@ -25868,7 +25878,7 @@
     layer: '$modal'
   };
 
-  const _excluded$1 = ["children"];
+  const _excluded$2 = ["children"];
   var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
   const overlayShow = keyframes({
     '0%': {
@@ -25941,7 +25951,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     return /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Portal, {
       __self: undefined,
       __source: {
@@ -26501,7 +26511,7 @@
   const AlertDialogCancel = ADialog__namespace.Cancel;
   const AlertDialogConfirm = ADialog__namespace.Action;
 
-  const _excluded = ["side", "align", "children"],
+  const _excluded$1 = ["side", "align", "children"],
     _excluded2 = ["children"],
     _excluded3 = ["asChild"];
   var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
@@ -26644,7 +26654,7 @@
         align,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     return /*#__PURE__*/React__default["default"].createElement(DropdownMenuPrimitive__namespace.Root, _extends({}, props, {
       __self: undefined,
       __source: {
@@ -28639,6 +28649,7 @@
     });
   }
 
+  const _excluded = ["customPreviewIcon"];
   var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
   const Input$2 = styled('input', {
     display: 'none !important'
@@ -28713,7 +28724,11 @@
     height: 32,
     padding: '$spacing-02'
   });
-  const IconStateFull = props => {
+  const IconStateFull = _ref => {
+    let {
+        customPreviewIcon
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
     const [isHover, setIsHover] = React.useState(false);
     function handleEnter() {
       setIsHover(true);
@@ -28731,6 +28746,25 @@
         lineNumber: 119,
         columnNumber: 5
       }
+    })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 126,
+        columnNumber: 5
+      }
+    }, !!customPreviewIcon ? /*#__PURE__*/React__default["default"].cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
+      color: isHover ? '#04C99E' : customPreviewIcon.props.color,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      style: Object.assign({
+        cursor: 'pointer',
+        background: 'rgba(39, 42, 42, 0.6)',
+        borderRadius: 50,
+        padding: '4px',
+        width: 32,
+        height: 32
+      }, customPreviewIcon.props.style)
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
       color: isHover ? '#04C99E' : '#A5ABAB',
       onMouseEnter: handleEnter,
@@ -28738,10 +28772,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
-        columnNumber: 5
+        lineNumber: 145,
+        columnNumber: 9
       }
-    }));
+    })));
   };
   const Upload = ({
     placeholder,
@@ -28780,7 +28814,9 @@
     hiddenToggleAspect,
     hiddenPreview,
     fullAspectCrop,
-    isDefaultCustomRatio
+    isDefaultCustomRatio,
+    customPreviewIcon,
+    onPreviewIconClick
   }) => {
     const {
       t
@@ -28938,7 +28974,7 @@
         let newFile = files[i];
         newFile.uid = new Date().getTime();
         newFile.url = URL.createObjectURL(newFile);
-        if (action) {
+        if (action && (newFile.size / 1024 / 1024).toFixed(1) <= maxSizeMB) {
           upload({
             url: action,
             file: newFile,
@@ -28956,10 +28992,16 @@
               let uid = fileProgress.uid;
               fileProgress.status = 'uploading';
               fileProgress.percent = percent;
+              fileProgress.name = newFile.name;
+              fileProgress.type = newFile.type;
+              fileProgress.size = newFile.size;
               let arrProgress = [...arrFile];
               for (let i = 0; i < arrProgress.length; i++) {
                 if (arrProgress[i].uid === uid) {
                   arrProgress[i] = fileProgress;
+                  arrProgress[i].name = newFile.name;
+                  arrProgress[i].type = newFile.type;
+                  arrProgress[i].size = newFile.size;
                 }
               }
               onChange == null ? void 0 : (_onChange = onChange({
@@ -28975,9 +29017,15 @@
             let uid = fileSuccess.uid;
             fileSuccess.url = result;
             fileSuccess.status = 'done';
-            for (let i = 0; i < arrFile.length; i++) {
-              if (arrFile[i].uid === uid) {
-                arrFile[i] = fileSuccess;
+            fileSuccess.name = newFile.name;
+            fileSuccess.type = newFile.type;
+            fileSuccess.size = newFile.size;
+            for (let j = 0; j < arrFile.length; j++) {
+              if (arrFile[j].uid === uid) {
+                arrFile[j] = fileSuccess;
+                arrFile[j].name = newFile.name;
+                arrFile[j].type = newFile.type;
+                arrFile[j].size = newFile.size;
               }
             }
             onChange == null ? void 0 : (_onChange2 = onChange({
@@ -28992,9 +29040,15 @@
             let uid = fileError.uid;
             fileError.status = 'error';
             fileError.error = error;
+            fileError.name = newFile.name;
+            fileError.type = newFile.type;
+            fileError.size = newFile.size;
             for (let i = 0; i < arrFile.length; i++) {
               if (arrFile[i].uid === uid) {
                 arrFile[i] = fileError;
+                arrFile[i].name = newFile.name;
+                arrFile[i].type = newFile.type;
+                arrFile[i].size = newFile.size;
               }
             }
             onChange == null ? void 0 : (_onChange3 = onChange({
@@ -29210,7 +29264,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 664,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -29220,7 +29274,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 616,
+          lineNumber: 665,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29235,7 +29289,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 626,
+              lineNumber: 675,
               columnNumber: 16
             }
           });
@@ -29246,7 +29300,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 629,
+            lineNumber: 678,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29256,7 +29310,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 630,
+            lineNumber: 679,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29265,7 +29319,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 631,
+            lineNumber: 680,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29278,16 +29332,23 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 633,
+            lineNumber: 682,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
-          onClick: () => handlePreview(item),
+          onClick: () => {
+            if (onPreviewIconClick) {
+              onPreviewIconClick(item);
+            } else {
+              handlePreview(item);
+            }
+          },
+          customPreviewIcon: customPreviewIcon,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 641,
+            lineNumber: 690,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -29297,7 +29358,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 703,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29314,7 +29375,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 655,
+              lineNumber: 714,
               columnNumber: 16
             }
           });
@@ -29324,7 +29385,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 658,
+            lineNumber: 717,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29334,7 +29395,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 659,
+            lineNumber: 718,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29343,7 +29404,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 660,
+            lineNumber: 719,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29356,7 +29417,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 661,
+            lineNumber: 720,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29366,14 +29427,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 669,
+            lineNumber: 728,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 670,
+            lineNumber: 729,
             columnNumber: 17
           }
         }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29381,7 +29442,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 671,
+            lineNumber: 730,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29396,7 +29457,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 672,
+            lineNumber: 731,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29409,16 +29470,23 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 688,
+            lineNumber: 747,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
-          onClick: () => handleOpenFile(item),
+          onClick: () => {
+            if (onPreviewIconClick) {
+              onPreviewIconClick(item);
+            } else {
+              handleOpenFile(item);
+            }
+          },
+          customPreviewIcon: customPreviewIcon,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 696,
+            lineNumber: 755,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -29426,7 +29494,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 699,
+            lineNumber: 768,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29441,7 +29509,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 779,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29455,7 +29523,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 711,
+          lineNumber: 780,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -29481,7 +29549,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 712,
+          lineNumber: 781,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29489,14 +29557,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 725,
+          lineNumber: 794,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 726,
+          lineNumber: 795,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29508,7 +29576,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 803,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -29524,7 +29592,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 804,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -29536,21 +29604,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 746,
+          lineNumber: 815,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 747,
+          lineNumber: 816,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 749,
+          lineNumber: 818,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -29559,7 +29627,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 750,
+          lineNumber: 819,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -29567,7 +29635,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 820,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29577,7 +29645,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 822,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -29587,7 +29655,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 829,
           columnNumber: 19
         }
       }, error));
@@ -29599,7 +29667,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 767,
+          lineNumber: 836,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -29607,7 +29675,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 837,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -29615,7 +29683,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 838,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -29628,7 +29696,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 771,
+          lineNumber: 840,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -29641,7 +29709,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 774,
+          lineNumber: 843,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -29652,7 +29720,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 775,
+          lineNumber: 851,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -29666,14 +29734,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 852,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 787,
+          lineNumber: 863,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29685,14 +29753,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 788,
+          lineNumber: 864,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 790,
+          lineNumber: 866,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29700,7 +29768,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 792,
+          lineNumber: 868,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -29712,7 +29780,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 793,
+          lineNumber: 869,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29720,7 +29788,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 800,
+          lineNumber: 876,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -29729,7 +29797,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 801,
+          lineNumber: 877,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -29739,7 +29807,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 804,
+          lineNumber: 880,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -29756,7 +29824,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 813,
+        lineNumber: 889,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -29765,7 +29833,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 816,
+        lineNumber: 892,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());