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

package/index.esm.js

@@ -1618,7 +1618,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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', {
@@ -1809,7 +1809,7 @@ const Grid = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
       gridAutoColumns: props.autoColumns,
@@ -1889,7 +1889,7 @@ GridItem.propTypes = {
 };
 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',
@@ -1933,7 +1933,7 @@ const PageContainer = _ref => {
       css,
       contentHeader
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
     id: "retina-container",
     css: Object.assign({
@@ -2391,7 +2391,7 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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.createContext();
 const StyledBanner = styled(Flex$1, {
@@ -2728,7 +2728,7 @@ const Banner = _ref => {
       bannerBlock,
       icon
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
     hasAction: !!onClick,
@@ -3392,7 +3392,7 @@ Card.defaultProps = {
 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',
@@ -3448,7 +3448,7 @@ const BreadcrumbBase = _ref => {
   let {
       children
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
@@ -3712,7 +3712,7 @@ Badge.defaultProps = {
 };
 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.Root, {
   width: '32px',
@@ -3757,7 +3757,7 @@ function Avatar(_ref) {
       onClick,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
     onClick: onClick,
@@ -3814,7 +3814,7 @@ Avatar.defaultProps = {
   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',
@@ -3864,7 +3864,7 @@ function Image(_ref) {
       cssFallback,
       rounded
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   const {
     t
   } = useTranslation('translation');
@@ -4500,7 +4500,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 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
@@ -4617,7 +4617,7 @@ const Tooltip$1 = _ref => {
       align,
       delayDuration
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(Provider, {
     __self: undefined,
@@ -4706,7 +4706,7 @@ Tooltip$1.defaultProps = {
   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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
@@ -4825,7 +4825,7 @@ function Progress$1(_ref) {
       rounded,
       width
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
     value: value,
@@ -5518,7 +5518,7 @@ function useMediaQuery(query) {
   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;
@@ -5687,7 +5687,7 @@ const Toast = _ref => {
       captionOfAction,
       hrefOfAction
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   const [isOpen, setIsOpen] = React.useState(false);
   const isMobile = useMediaQuery(`(max-width: 767px`);
   const close = React.useCallback(() => {
@@ -5870,7 +5870,7 @@ Toast.defaultProps = {
   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',
@@ -5934,7 +5934,7 @@ const ToastContainer = ({
     const {
         preventDuplicate
       } = item,
-      toast = _objectWithoutPropertiesLoose(item, _excluded$s);
+      toast = _objectWithoutPropertiesLoose(item, _excluded$t);
     return /*#__PURE__*/React.createElement(Toast, _extends({
       key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
       onRemove: () => removeToast(toast.id)
@@ -7166,7 +7166,7 @@ const catchError = e => {
   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 = ({
@@ -7196,7 +7196,7 @@ const ToastProvider = ({
         id,
         disabledOfflineIntercept
       } = toast,
-      rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
+      rest = _objectWithoutPropertiesLoose(toast, _excluded$s);
 
     // eslint-disable-next-line no-plusplus
     const uniqueId = ++toastCount;
@@ -7285,7 +7285,7 @@ const ConditionalWrapper = ({
   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',
@@ -7389,7 +7389,7 @@ const FormGroup = _ref => {
       maxCount,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   const withCounter = Boolean(count || maxCount);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: withCounter,
@@ -7436,7 +7436,7 @@ const FormGroup = _ref => {
 };
 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.Root, Text$1, {
   display: 'inline-block',
@@ -7469,7 +7469,7 @@ const FormLabel = _ref => {
       maxCount,
       labelCss
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     className: "form-label",
@@ -7553,7 +7553,7 @@ FormLabel.defaultProps = {
 };
 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',
@@ -7572,7 +7572,7 @@ const FormHelper = _ref => {
       error,
       errorMessage
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   const errorByMessage = !!errorMessage;
   if (error === undefined && errorByMessage) {
     return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
@@ -7761,7 +7761,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   }
 }));
 
-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.Indicator, {
   alignItems: 'center',
@@ -7820,7 +7820,7 @@ const Checkbox = _ref => {
       index,
       value
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
@@ -7922,7 +7922,7 @@ InputCheckbox.propTypes = {
 };
 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',
@@ -8062,7 +8062,7 @@ const InputGroup = _ref => {
       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) => {
@@ -8261,7 +8261,7 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.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',
@@ -8435,7 +8435,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(StyledInput$1, _extends({
     ref: ref,
     disabled: disabled,
@@ -8463,7 +8463,7 @@ InputText.propTypes = {
 };
 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: {
@@ -8485,7 +8485,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   const textareaRef = useRef(null);
   useEffect(() => {
     if (textareaRef.current) {
@@ -8575,7 +8575,7 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -8741,7 +8741,7 @@ const InputRadio = _ref => {
       description,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   function renderInputType(type, checkedValue, onValueChange) {
     switch (type) {
       case 'number':
@@ -8866,7 +8866,7 @@ const InputRadio = _ref => {
       variant: "caption",
       color: "secondary",
       css: {
-        marginTop: '10px'
+        marginLeft: '29px'
       },
       __self: undefined,
       __source: {
@@ -11024,7 +11024,7 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
 }(React__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
@@ -11220,7 +11220,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       maxLength,
       thousandSeparator
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: Boolean(control),
     wrapper: child => /*#__PURE__*/React__default.createElement(Controller, {
@@ -11285,7 +11285,7 @@ InputNumber.defaultProps = {
 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',
@@ -11390,7 +11390,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       onRemove,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(TagWrapper$4, _extends({
     ref: ref,
     onClick: onClick,
@@ -11461,7 +11461,7 @@ Tag.defaultProps = {
   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,
@@ -11584,7 +11584,7 @@ function TagsInput(_ref) {
       unremovableTags,
       onRemoveItem
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const [tags, setTags] = React__default.useState(value);
   const [regexError, setRegexError] = React__default.useState(false);
   React__default.useEffect(() => {
@@ -11758,7 +11758,7 @@ TagsInput.defaultProps = {
   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.Thumb, {
   display: 'block',
@@ -11830,7 +11830,7 @@ const InputSwitch = _ref => {
       dataOffLabel,
       disabled
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
     dataOnLabel: dataOnLabel,
@@ -11963,7 +11963,7 @@ SvgSearchOutline.defaultProps = {
   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
@@ -11980,7 +11980,7 @@ const InputSearchbox = _ref => {
       mobileOnly,
       desktopOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   const {
     t
   } = useTranslation(['MajooUI/inputSearchbox', 'translation']);
@@ -12262,7 +12262,7 @@ $$5({ target: 'Array', proto: true, forced: FORCED$1 }, {
   }
 });
 
-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
@@ -12398,7 +12398,7 @@ const PopoverClose = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const {
     setOpenState
   } = useContext(PopoverContext);
@@ -13803,7 +13803,7 @@ function OptionGroupItem({
   }), 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";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -14103,7 +14103,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       onSelectAllChecked,
       totalOptions
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
     t
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
@@ -16319,7 +16319,7 @@ InputCounter.defaultProps = {
   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.createContext();
@@ -16361,7 +16361,7 @@ function Drawer(_ref) {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Root, _extends({}, props, {
     __self: this,
     __source: {
@@ -16669,7 +16669,7 @@ DrawerBody.displayName = 'DrawerBody';
 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, {
@@ -16875,7 +16875,7 @@ function ButtonGroup$1(_ref) {
       mobileOnly,
       desktopOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const [listContainerScrollPosition, setlistContainerScrollPosition] = useState(0);
   const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
   const listContainerRef = useRef();
@@ -17783,7 +17783,8 @@ function InputTimePicker({
   maxDate,
   isInvalid,
   portalled,
-  contentCss
+  contentCss,
+  onInputOpenChange
 }) {
   const [openPicker, setOpenPicker] = useState(false);
   function handleChange() {
@@ -17800,7 +17801,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 47,
+      lineNumber: 48,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -17809,14 +17810,14 @@ function InputTimePicker({
       __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.createElement(InputText, {
@@ -17832,7 +17833,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 49,
+      lineNumber: 50,
       columnNumber: 7
     }
   }));
@@ -17856,18 +17857,23 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 63,
+      lineNumber: 64,
       columnNumber: 5
     }
   });
   return /*#__PURE__*/React__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.createElement(Box, {
@@ -17875,14 +17881,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 84,
+      lineNumber: 94,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 86,
+      lineNumber: 96,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -17890,7 +17896,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 87,
+      lineNumber: 97,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
@@ -17898,7 +17904,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 90,
+      lineNumber: 100,
       columnNumber: 7
     }
   }, renderTimePicker({
@@ -17989,7 +17995,11 @@ InputTimePicker.propTypes = {
   /**
    Additional TimePicker styles.
   */
-  contentCss: PropTypes.object
+  contentCss: PropTypes.object,
+  /**
+   Input open change callback.
+  */
+  onInputOpenChange: PropTypes.func
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
@@ -19687,22 +19697,22 @@ function advancePickerDate(type, date) {
     case NEXT_WEEK:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
-        const startThisWeek = currentDate.startOf('week').toDate();
-        const endThisWeek = currentDate.endOf('week').toDate();
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
         return [startThisWeek, endThisWeek];
       }
     case RANGE_WEEK:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
-        const startThisWeek = currentDate.startOf('week').toDate();
-        const endThisWeek = currentDate.endOf('week').toDate();
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
         return [startThisWeek, endThisWeek];
       }
     case PREV_WEEK:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
-        const startThisWeek = currentDate.startOf('week').toDate();
-        const endThisWeek = currentDate.endOf('week').toDate();
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
         return [startThisWeek, endThisWeek];
       }
     case RANGE_MONTH:
@@ -20526,7 +20536,7 @@ function InputSignature({
   }, 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 = styled$1(SliderPrimitive.Root, {
   position: 'relative',
@@ -20786,7 +20796,7 @@ function Slider(_ref) {
       width,
       height
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/React__default.createElement(StyledSlider, _extends({
     className: className,
     defaultValue: defaultValue,
@@ -20870,7 +20880,7 @@ Slider.defaultProps = {
   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',
@@ -20971,7 +20981,7 @@ const TagStatus = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       type,
       size
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return /*#__PURE__*/React__default.createElement(TagWrapper$1, _extends({
     ref: ref,
     className: className,
@@ -21031,7 +21041,7 @@ function addPropsToChildren(children, props) {
   }, props)));
 }
 
-const _excluded$7 = ["children"],
+const _excluded$8 = ["children"],
   _excluded2$1 = ["children", "activeTabs"],
   _excluded3$1 = ["children", "icon", "activeTabs", "value"],
   _excluded4 = ["activeTabs"];
@@ -21179,7 +21189,7 @@ const Tabs$1 = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const [activeTabs, setActiveTabs] = useState(props.defaultValue || '');
   return /*#__PURE__*/React__default.createElement(StyledTabs, _extends({}, props, {
     onValueChange: value => {
@@ -21373,7 +21383,7 @@ TabsContent$1.propTypes = {
   value: PropTypes.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',
@@ -21476,7 +21486,7 @@ const NotificationBadge = _ref => {
       children,
       variantIcon
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const getIcon = () => {
     const isLeading = variantIcon === 'leading';
     return {
@@ -21528,7 +21538,7 @@ NotificationBadge.propTypes = {
   dot: PropTypes.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',
@@ -21574,7 +21584,7 @@ const Paper = _ref => {
       width,
       height
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return /*#__PURE__*/React__default.createElement(PaperComponent, _extends({
     className: className,
     css: Object.assign({
@@ -21781,7 +21791,7 @@ const removeUndefinedFields = obj => {
   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',
@@ -21868,7 +21878,7 @@ const PageButton = _ref => {
       isActive,
       onClick
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement(Button$4, _extends({
     type: "button",
     onClick: onClick,
@@ -22269,7 +22279,7 @@ const PaginationButton = ({
   }, 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'
@@ -22295,7 +22305,7 @@ function PaginationInfo(_ref) {
       totalData,
       onChange
     } = _ref;
-    _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const {
     t
   } = useTranslation('MajooUI/pagination');
@@ -22502,7 +22512,7 @@ function PaginationInfo(_ref) {
   }, 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 {
@@ -22517,7 +22527,7 @@ function Pagination(_ref) {
       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.createElement(Flex$1, _extends({
@@ -25389,7 +25399,7 @@ PageDialog.defaultProps = {
   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%': {
@@ -25462,7 +25472,7 @@ const Content$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(ADialog.Portal, {
     __self: undefined,
     __source: {
@@ -26022,7 +26032,7 @@ const AlertDialogDescription = StyledDescription$1;
 const AlertDialogCancel = ADialog.Cancel;
 const AlertDialogConfirm = ADialog.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";
@@ -26165,7 +26175,7 @@ const DropdownMenuContext = _ref => {
       align,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement(DropdownMenuPrimitive.Root, _extends({}, props, {
     __self: undefined,
     __source: {
@@ -28136,6 +28146,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
   });
 }
 
+const _excluded = ["customPreviewIcon"];
 var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
 const Input$2 = styled('input', {
   display: 'none !important'
@@ -28210,7 +28221,11 @@ const EyeIcon = styled(EyeOutline, {
   height: 32,
   padding: '$spacing-02'
 });
-const IconStateFull = props => {
+const IconStateFull = _ref => {
+  let {
+      customPreviewIcon
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [isHover, setIsHover] = useState(false);
   function handleEnter() {
     setIsHover(true);
@@ -28228,6 +28243,25 @@ const IconStateFull = props => {
       lineNumber: 119,
       columnNumber: 5
     }
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 126,
+      columnNumber: 5
+    }
+  }, !!customPreviewIcon ? /*#__PURE__*/React__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.createElement(EyeIcon, _extends({}, props, {
     color: isHover ? '#04C99E' : '#A5ABAB',
     onMouseEnter: handleEnter,
@@ -28235,10 +28269,10 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 126,
-      columnNumber: 5
+      lineNumber: 145,
+      columnNumber: 9
     }
-  }));
+  })));
 };
 const Upload = ({
   placeholder,
@@ -28277,7 +28311,9 @@ const Upload = ({
   hiddenToggleAspect,
   hiddenPreview,
   fullAspectCrop,
-  isDefaultCustomRatio
+  isDefaultCustomRatio,
+  customPreviewIcon,
+  onPreviewIconClick
 }) => {
   const {
     t
@@ -28435,7 +28471,7 @@ const Upload = ({
       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,
@@ -28453,10 +28489,16 @@ const Upload = ({
             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({
@@ -28472,9 +28514,15 @@ const Upload = ({
           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({
@@ -28489,9 +28537,15 @@ const Upload = ({
           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({
@@ -28707,7 +28761,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 615,
+        lineNumber: 664,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -28717,7 +28771,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 616,
+        lineNumber: 665,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -28732,7 +28786,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 675,
             columnNumber: 16
           }
         });
@@ -28743,7 +28797,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 629,
+          lineNumber: 678,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28753,7 +28807,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 630,
+          lineNumber: 679,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28762,7 +28816,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 631,
+          lineNumber: 680,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28775,16 +28829,23 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 633,
+          lineNumber: 682,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Image, {
@@ -28794,7 +28855,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 703,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28811,7 +28872,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 714,
             columnNumber: 16
           }
         });
@@ -28821,7 +28882,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 717,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28831,7 +28892,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 718,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28840,7 +28901,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 660,
+          lineNumber: 719,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28853,7 +28914,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 661,
+          lineNumber: 720,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28863,14 +28924,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 728,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -28878,7 +28939,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 671,
+          lineNumber: 730,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -28893,7 +28954,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 731,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28906,16 +28967,23 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 747,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Blank, {
@@ -28923,7 +28991,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 768,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28938,7 +29006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 779,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28952,7 +29020,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 711,
+        lineNumber: 780,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -28978,7 +29046,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 712,
+        lineNumber: 781,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -28986,14 +29054,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 725,
+        lineNumber: 794,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 726,
+        lineNumber: 795,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29005,7 +29073,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 803,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -29021,7 +29089,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 804,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -29033,21 +29101,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 746,
+        lineNumber: 815,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 747,
+        lineNumber: 816,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 749,
+        lineNumber: 818,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -29056,7 +29124,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 750,
+        lineNumber: 819,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29064,7 +29132,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 751,
+        lineNumber: 820,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29074,7 +29142,7 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
@@ -29084,7 +29152,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 829,
         columnNumber: 19
       }
     }, error));
@@ -29096,7 +29164,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 767,
+        lineNumber: 836,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29104,7 +29172,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 837,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -29112,7 +29180,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 838,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -29125,7 +29193,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 771,
+        lineNumber: 840,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -29138,7 +29206,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 774,
+        lineNumber: 843,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -29149,7 +29217,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 775,
+        lineNumber: 851,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -29163,14 +29231,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 852,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 787,
+        lineNumber: 863,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29182,14 +29250,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 788,
+        lineNumber: 864,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 790,
+        lineNumber: 866,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29197,7 +29265,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 792,
+        lineNumber: 868,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -29209,7 +29277,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 793,
+        lineNumber: 869,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29217,7 +29285,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 800,
+        lineNumber: 876,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -29226,7 +29294,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 801,
+        lineNumber: 877,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -29236,7 +29304,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 804,
+        lineNumber: 880,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -29253,7 +29321,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 813,
+      lineNumber: 889,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -29262,7 +29330,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 816,
+      lineNumber: 892,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());