@majoo-ui/react 1.61.0-rc.1 → 1.61.0-rc.10

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']);
@@ -15453,7 +15453,8 @@ function InputResourceList({
   defaultSort,
   title,
   hideSelectAll,
-  customHeader
+  customHeader,
+  checkDisableItems
 }) {
   const {
     t
@@ -15462,6 +15463,12 @@ function InputResourceList({
   const [query, setQuery] = useState();
   const [sortType, setSortType] = useState('asc');
   const [data, setData] = useState([]);
+  const filteredValue = useMemo(() => {
+    const dataValues = data.map(({
+      value
+    }) => value);
+    return (value || []).filter(x => dataValues.includes(x.value));
+  }, [JSON.stringify(value), JSON.stringify(data)]);
   const scrollerRef = useRef(null);
   useEffect(() => {
     function filterUnique(params) {
@@ -15491,7 +15498,7 @@ function InputResourceList({
       children: [jsxs(Flex$1, Object.assign({
         align: "center"
       }, {
-        children: [jsx(InputCheckbox, {
+        children: [jsx(InputCheckbox, Object.assign({
           label: jsxs(Flex$1, Object.assign({
             gap: 3,
             align: "center"
@@ -15523,7 +15530,9 @@ function InputResourceList({
           index: index,
           value: resource.value,
           disabled: isDisabled
-        }, void 0), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsx(Box, Object.assign({
+        }, Object.assign({}, checkDisableItems && isDisabled && {
+          checked: isDisabled
+        })), void 0), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsx(Box, Object.assign({
           css: {
             marginLeft: '$spacing-03'
           }
@@ -15623,13 +15632,14 @@ function InputResourceList({
     }), void 0);
   }
   function toggleCheckAll() {
-    if ((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length) || (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length)) {
-      for (let i = 0; i < (value === null || value === void 0 ? void 0 : value.length); i++) {
-        onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(value === null || value === void 0 ? void 0 : value[i]);
+    if ((filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) && (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) < (data === null || data === void 0 ? void 0 : data.length) || (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) === (data === null || data === void 0 ? void 0 : data.length)) {
+      for (let i = 0; i < filteredValue.length; i++) {
+        onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue[i]);
       }
     } else {
       for (let i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i++) {
-        onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data === null || data === void 0 ? void 0 : data[i]);
+        const isEnabled = enabledItems ? enabledItems.find(id => id === (data === null || data === void 0 ? void 0 : data[i].value)) || enabledItems.length === 0 : true;
+        if (isEnabled) onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(data === null || data === void 0 ? void 0 : data[i]);
       }
     }
   }
@@ -15657,8 +15667,8 @@ function InputResourceList({
       }
     }, {
       children: [!hideSelectAll && jsx(InputCheckbox, {
-        checked: (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length) && data.length > 0,
-        indeterminate: Boolean((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length)),
+        checked: (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) === (data === null || data === void 0 ? void 0 : data.length) && data.length > 0,
+        indeterminate: Boolean((filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) && (filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue.length) < (data === null || data === void 0 ? void 0 : data.length)),
         onCheckedChange: toggleCheckAll,
         css: {
           marginRight: '$spacing-02'
@@ -16222,7 +16232,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     disabledDecrement,
     prefix,
     suffix,
-    size
+    size,
+    disableManualInput
   } = props;
   const [inputValue, setInputValue] = useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0);
   useEffect(() => {
@@ -16278,8 +16289,8 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       }, void 0)
     }), void 0), jsx(Input$4, {
       ref: ref,
-      disabled: disabled || disabledIncrement || disabledDecrement,
-      disabledChange: disabledIncrement || disabledDecrement,
+      disabled: disabled || disabledIncrement || disabledDecrement || disableManualInput,
+      disabledChange: disabledIncrement || disabledDecrement || disableManualInput,
       value: inputValue,
       allowNegative: allowNegative,
       onChange: handleChange,
@@ -16308,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();
@@ -16350,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: {
@@ -16658,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, {
@@ -16864,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();
@@ -19676,22 +19687,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:
@@ -20438,10 +20449,8 @@ const SignatureContainer = styled$1(Flex$1, {
     },
     disabled: {
       true: {
-        border: 'none',
         cursor: 'not-allowed',
         '&:hover': {
-          border: 'none',
           background: '$bgGray'
         }
       }
@@ -20471,7 +20480,7 @@ function InputSignature({
     children: [jsx(SignatureContainer, Object.assign({
       hasContent: !!signatureImage,
       onClick: () => {
-        if (!disabled) {
+        if (!disabled && !signatureImage) {
           setOpen(true);
         }
       },
@@ -20504,7 +20513,7 @@ function InputSignature({
         variant: "label",
         color: "disable"
       }, {
-        children: t('placeholder', 'Tanda tangan disini')
+        children: t('placeholder', 'Tanda tangan di sini')
       }), void 0)
     }), void 0), jsx(SignatureModal, {
       t: t,
@@ -20512,12 +20521,12 @@ function InputSignature({
       onOpenChange: setOpen,
       onSave: handleSave,
       isMobile: isMobile,
-      title: title || t('modalTitle', 'Tambah Tanda Tangan')
+      title: title || signatureImage ? t('editTitle', 'Ubah Tanda Tangan') : t('addTitle', 'Tambah Tanda Tangan')
     }, void 0)]
   }, 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',
@@ -20777,7 +20786,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,
@@ -20861,7 +20870,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',
@@ -20962,7 +20971,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,
@@ -21022,7 +21031,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"];
@@ -21170,7 +21179,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 => {
@@ -21364,7 +21373,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',
@@ -21467,7 +21476,7 @@ const NotificationBadge = _ref => {
       children,
       variantIcon
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const getIcon = () => {
     const isLeading = variantIcon === 'leading';
     return {
@@ -21519,7 +21528,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',
@@ -21565,7 +21574,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({
@@ -21772,7 +21781,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',
@@ -21859,7 +21868,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,
@@ -22260,7 +22269,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'
@@ -22286,7 +22295,7 @@ function PaginationInfo(_ref) {
       totalData,
       onChange
     } = _ref;
-    _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const {
     t
   } = useTranslation('MajooUI/pagination');
@@ -22493,7 +22502,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 {
@@ -22508,7 +22517,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({
@@ -23890,13 +23899,15 @@ function Table({
   hidePagination = false,
   searchQuery,
   additionalExceptionIds = [],
-  onExpand,
+  expanded: controlledExpanded = {},
+  onExpandedChange,
   id = null,
   onColumnChange,
   virtualized = true,
   withoutLimit = false,
   additionalHeader,
-  outerContainerCss
+  outerContainerCss,
+  autoResetExpanded = true
 }) {
   var _a, _b, _c, _d;
   const [openMenu, setOpen] = useState(false);
@@ -23924,18 +23935,27 @@ function Table({
         selectedRowIds: selectedIds
       });
     }
+    if (controlledExpanded) {
+      Object.assign(initialState, {
+        expanded: controlledExpanded
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const instance = useTable({
     columns,
     data: useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]),
     initialState: getInitialState(),
+    state: {
+      expanded: controlledExpanded
+    },
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
     defaultCanSort: true,
     pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
-    autoResetExpanded: true,
+    autoResetExpanded,
+    onExpandedChange,
     autoResetPage: false,
     autoResetSelectedRows: false,
     getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
@@ -24180,8 +24200,8 @@ function Table({
       firstUpdate.current = false;
       return;
     }
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expanded);
-  }, [expanded, onExpand]);
+    onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(expanded);
+  }, [expanded, onExpandedChange]);
   useEffect(() => {
     if (hiddenColumns) setHiddenColumns(hiddenColumns);
   }, [hiddenColumns]);
@@ -25369,7 +25389,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%': {
@@ -25442,7 +25462,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: {
@@ -26002,7 +26022,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";
@@ -26145,7 +26165,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: {
@@ -28116,6 +28136,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'
@@ -28190,7 +28211,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);
@@ -28208,6 +28233,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,
@@ -28215,10 +28259,10 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 126,
-      columnNumber: 5
+      lineNumber: 145,
+      columnNumber: 9
     }
-  }));
+  })));
 };
 const Upload = ({
   placeholder,
@@ -28257,7 +28301,9 @@ const Upload = ({
   hiddenToggleAspect,
   hiddenPreview,
   fullAspectCrop,
-  isDefaultCustomRatio
+  isDefaultCustomRatio,
+  customPreviewIcon,
+  onPreviewIconClick
 }) => {
   const {
     t
@@ -28687,7 +28733,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 615,
+        lineNumber: 643,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -28697,7 +28743,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 616,
+        lineNumber: 644,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -28712,7 +28758,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 654,
             columnNumber: 16
           }
         });
@@ -28723,7 +28769,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 629,
+          lineNumber: 657,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28733,7 +28779,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 630,
+          lineNumber: 658,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28742,7 +28788,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 631,
+          lineNumber: 659,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28755,16 +28801,23 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 633,
+          lineNumber: 661,
           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: 669,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -28774,7 +28827,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 682,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28791,7 +28844,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 693,
             columnNumber: 16
           }
         });
@@ -28801,7 +28854,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 696,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28811,7 +28864,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 697,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28820,7 +28873,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 660,
+          lineNumber: 698,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28833,7 +28886,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 661,
+          lineNumber: 699,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28843,14 +28896,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 707,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 670,
+          lineNumber: 708,
           columnNumber: 17
         }
       }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -28858,7 +28911,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 671,
+          lineNumber: 709,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -28873,7 +28926,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 710,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28886,16 +28939,23 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 726,
           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: 734,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -28903,7 +28963,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 747,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28918,7 +28978,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 758,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28932,7 +28992,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 711,
+        lineNumber: 759,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -28958,7 +29018,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 712,
+        lineNumber: 760,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -28966,14 +29026,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 725,
+        lineNumber: 773,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 726,
+        lineNumber: 774,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -28985,7 +29045,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 782,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -29001,7 +29061,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 783,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -29013,21 +29073,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 746,
+        lineNumber: 794,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 747,
+        lineNumber: 795,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 749,
+        lineNumber: 797,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -29036,7 +29096,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 750,
+        lineNumber: 798,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29044,7 +29104,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 751,
+        lineNumber: 799,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29054,7 +29114,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 801,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -29064,7 +29124,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 808,
         columnNumber: 19
       }
     }, error));
@@ -29076,7 +29136,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 767,
+        lineNumber: 815,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29084,7 +29144,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 816,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -29092,7 +29152,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 817,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -29105,7 +29165,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 771,
+        lineNumber: 819,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -29118,7 +29178,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 774,
+        lineNumber: 822,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -29129,7 +29189,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 775,
+        lineNumber: 830,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -29143,14 +29203,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 831,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 787,
+        lineNumber: 842,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29162,14 +29222,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 788,
+        lineNumber: 843,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 790,
+        lineNumber: 845,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29177,7 +29237,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 792,
+        lineNumber: 847,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -29189,7 +29249,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 793,
+        lineNumber: 848,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29197,7 +29257,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 800,
+        lineNumber: 855,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -29206,7 +29266,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 801,
+        lineNumber: 856,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -29216,7 +29276,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 804,
+        lineNumber: 859,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -29233,7 +29293,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 813,
+      lineNumber: 868,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -29242,7 +29302,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 816,
+      lineNumber: 871,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());