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

package/index.umd.js

@@ -1723,7 +1723,7 @@
     return target;
   }
 
-  const _excluded$B = ["children"],
+  const _excluded$C = ["children"],
     _excluded2$4 = ["children"];
   var _jsxFileName$10 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
@@ -1914,7 +1914,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
         gridAutoColumns: props.autoColumns,
@@ -1994,7 +1994,7 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+  const _excluded$B = ["children", "isCollapse", "css", "contentHeader"];
   var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
   const StyledDiv$2 = styled(Flex$1, {
     justifyContent: 'center',
@@ -2038,7 +2038,7 @@
         css,
         contentHeader
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
       id: "retina-container",
       css: Object.assign({
@@ -2461,7 +2461,7 @@
     }), void 0);
   });
 
-  const _excluded$z = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
+  const _excluded$A = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
   var _jsxFileName$_ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
@@ -2798,7 +2798,7 @@
         bannerBlock,
         icon
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
       hasAction: !!onClick,
@@ -3463,7 +3463,7 @@
   Card.Label = StyledLabel$2;
   Card.Description = StyledDescription$3;
 
-  const _excluded$y = ["children"];
+  const _excluded$z = ["children"];
   var _jsxFileName$Z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
@@ -3519,7 +3519,7 @@
     let {
         children
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
@@ -3781,7 +3781,7 @@
   };
   Badge.displayName = 'Badge';
 
-  const _excluded$x = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  const _excluded$y = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
   var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
@@ -3826,7 +3826,7 @@
         onClick,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
       onClick: onClick,
@@ -3883,7 +3883,7 @@
     delayMs: 0
   };
 
-  const _excluded$w = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+  const _excluded$x = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
   var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
   const ContainerFallback = styled(Flex$1, {
     boxSizing: 'border-box',
@@ -3933,7 +3933,7 @@
         cssFallback,
         rounded
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     const {
       t
     } = reactI18next.useTranslation('translation');
@@ -4569,7 +4569,7 @@
 
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-  const _excluded$v = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
+  const _excluded$w = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
   var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const {
     zIndices: zIndices$2
@@ -4686,7 +4686,7 @@
         align,
         delayDuration
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(Provider, {
       __self: undefined,
@@ -4775,7 +4775,7 @@
     delayDuration: 200
   };
 
-  const _excluded$u = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  const _excluded$v = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
   var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
@@ -4894,7 +4894,7 @@
         rounded,
         width
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
       value: value,
@@ -5587,7 +5587,7 @@
     return matches;
   }
 
-  const _excluded$t = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  const _excluded$u = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
   var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
@@ -5756,7 +5756,7 @@
         captionOfAction,
         hrefOfAction
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const isMobile = useMediaQuery(`(max-width: 767px`);
     const close = React__namespace.useCallback(() => {
@@ -5939,7 +5939,7 @@
     dismissAfter: 5000
   };
 
-  const _excluded$s = ["preventDuplicate"];
+  const _excluded$t = ["preventDuplicate"];
   var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
@@ -6003,7 +6003,7 @@
       const {
           preventDuplicate
         } = item,
-        toast = _objectWithoutPropertiesLoose(item, _excluded$s);
+        toast = _objectWithoutPropertiesLoose(item, _excluded$t);
       return /*#__PURE__*/React__namespace.createElement(Toast, _extends({
         key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
         onRemove: () => removeToast(toast.id)
@@ -7236,7 +7236,7 @@
     return message;
   };
 
-  const _excluded$r = ["id", "disabledOfflineIntercept"];
+  const _excluded$s = ["id", "disabledOfflineIntercept"];
   var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
   const ToastProvider = ({
@@ -7266,7 +7266,7 @@
           id,
           disabledOfflineIntercept
         } = toast,
-        rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
+        rest = _objectWithoutPropertiesLoose(toast, _excluded$s);
 
       // eslint-disable-next-line no-plusplus
       const uniqueId = ++toastCount;
@@ -7355,7 +7355,7 @@
     children
   }) => condition ? wrapper(children) : children;
 
-  const _excluded$q = ["count", "maxCount", "css"];
+  const _excluded$r = ["count", "maxCount", "css"];
   var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
   const formLabelClassStyle = {
     alignItems: 'start !important',
@@ -7459,7 +7459,7 @@
         maxCount,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     const withCounter = Boolean(count || maxCount);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: withCounter,
@@ -7506,7 +7506,7 @@
   };
   FormGroup.displayName = 'FormGroup';
 
-  const _excluded$p = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
+  const _excluded$q = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
   var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
@@ -7539,7 +7539,7 @@
         maxCount,
         labelCss
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       className: "form-label",
@@ -7623,7 +7623,7 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$o = ["children", "error", "errorMessage"];
+  const _excluded$p = ["children", "error", "errorMessage"];
   var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text$1, {
     display: 'inline-block',
@@ -7642,7 +7642,7 @@
         error,
         errorMessage
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     const errorByMessage = !!errorMessage;
     if (error === undefined && errorByMessage) {
       return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
@@ -7831,7 +7831,7 @@
     }
   }));
 
-  const _excluded$n = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+  const _excluded$o = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
   var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$2 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
@@ -7890,7 +7890,7 @@
         index,
         value
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     const context = React.useContext(CheckboxContext);
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
@@ -7992,7 +7992,7 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$m = ["children", "size"];
+  const _excluded$n = ["children", "size"];
   var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
@@ -8132,7 +8132,7 @@
         children,
         size = 'lg'
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const clone = children.map((child, index) => {
@@ -8331,7 +8331,7 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
 
-  const _excluded$l = ["disabled", "readOnly"];
+  const _excluded$m = ["disabled", "readOnly"];
   var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
   const disabledStyle = {
     backgroundColor: '$formDisable',
@@ -8505,7 +8505,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
       ref: ref,
       disabled: disabled,
@@ -8533,7 +8533,7 @@
   };
   InputText.displayName = 'InputText';
 
-  const _excluded$k = ["disabled", "readOnly"];
+  const _excluded$l = ["disabled", "readOnly"];
   var _jsxFileName$I = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
   const StyledTextArea = styled(StyledInput$1, {
     variants: {
@@ -8555,7 +8555,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     const textareaRef = React.useRef(null);
     React.useEffect(() => {
       if (textareaRef.current) {
@@ -8645,7 +8645,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
+  const _excluded$k = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
   var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -8811,7 +8811,7 @@
         description,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     function renderInputType(type, checkedValue, onValueChange) {
       switch (type) {
         case 'number':
@@ -8936,7 +8936,7 @@
         variant: "caption",
         color: "secondary",
         css: {
-          marginTop: '10px'
+          marginLeft: '29px'
         },
         __self: undefined,
         __source: {
@@ -11094,7 +11094,7 @@
   }(React__default["default"].Component);
   NumberFormat.defaultProps = defaultProps;
 
-  const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
+  const _excluded$j = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
   var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
   const StyledInput = styled(NumberFormat, {
     // Reset
@@ -11290,7 +11290,7 @@
         maxLength,
         thousandSeparator
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: Boolean(control),
       wrapper: child => /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
@@ -11355,7 +11355,7 @@
   InputNumber.name = 'InputText';
   InputNumber.displayName = 'InputNumber';
 
-  const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+  const _excluded$i = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
   var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagWrapper$4 = styled('div', {
     boxSizing: 'border-box',
@@ -11460,7 +11460,7 @@
         onRemove,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$4, _extends({
       ref: ref,
       onClick: onClick,
@@ -11531,7 +11531,7 @@
     readOnly: false
   };
 
-  const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
+  const _excluded$h = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
   var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
@@ -11654,7 +11654,7 @@
         unremovableTags,
         onRemoveItem
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     const [tags, setTags] = React__default["default"].useState(value);
     const [regexError, setRegexError] = React__default["default"].useState(false);
     React__default["default"].useEffect(() => {
@@ -11828,7 +11828,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+  const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
   var _jsxFileName$C = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
@@ -11900,7 +11900,7 @@
         dataOffLabel,
         disabled
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
       dataOnLabel: dataOnLabel,
@@ -12033,7 +12033,7 @@
     size: 24
   };
 
-  const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
+  const _excluded$f = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
   var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
   const {
     colors: colors$7
@@ -12050,7 +12050,7 @@
         mobileOnly,
         desktopOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSearchbox', 'translation']);
@@ -12332,7 +12332,7 @@
     }
   });
 
-  const _excluded$d = ["children"];
+  const _excluded$e = ["children"];
   var _jsxFileName$y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
   const {
     zIndices: zIndices$1
@@ -12468,7 +12468,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
     const {
       setOpenState
     } = React.useContext(PopoverContext);
@@ -13940,7 +13940,7 @@
     }), void 0);
   }
 
-  const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions"];
+  const _excluded$d = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions"];
   var _jsxFileName$w = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   function _await(value, then, direct) {
     if (direct) {
@@ -14261,7 +14261,7 @@
         onSelectAllChecked,
         totalOptions
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     const {
       t
     } = reactI18next.useTranslation(['MajooUI/inputSelectCheck', 'translation']);
@@ -15615,7 +15615,8 @@
       defaultSort = _a.defaultSort,
       title = _a.title,
       hideSelectAll = _a.hideSelectAll,
-      customHeader = _a.customHeader;
+      customHeader = _a.customHeader,
+      checkDisableItems = _a.checkDisableItems;
     var t = reactI18next.useTranslation(['MajooUI/inputResourceList', 'translation']).t;
     var _e = React.useState([]),
       checkedResources = _e[0],
@@ -15629,6 +15630,15 @@
     var _h = React.useState([]),
       data = _h[0],
       setData = _h[1];
+    var filteredValue = React.useMemo(function () {
+      var dataValues = data.map(function (_a) {
+        var value = _a.value;
+        return value;
+      });
+      return (value || []).filter(function (x) {
+        return dataValues.includes(x.value);
+      });
+    }, [JSON.stringify(value), JSON.stringify(data)]);
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
       function filterUnique(params) {
@@ -15664,7 +15674,7 @@
         children: [jsxRuntime.jsxs(Flex$1, __assign({
           align: "center"
         }, {
-          children: [jsxRuntime.jsx(InputCheckbox, {
+          children: [jsxRuntime.jsx(InputCheckbox, __assign({
             label: jsxRuntime.jsxs(Flex$1, __assign({
               gap: 3,
               align: "center"
@@ -15698,7 +15708,9 @@
             index: index,
             value: resource.value,
             disabled: isDisabled
-          }, void 0), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsxRuntime.jsx(Box, __assign({
+          }, __assign({}, checkDisableItems && isDisabled && {
+            checked: isDisabled
+          })), void 0), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsxRuntime.jsx(Box, __assign({
             css: {
               marginLeft: '$spacing-03'
             }
@@ -15810,13 +15822,19 @@
       }), 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 (var 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 (var i = 0; i < filteredValue.length; i++) {
+          onItemUncheck === null || onItemUncheck === void 0 ? void 0 : onItemUncheck(filteredValue === null || filteredValue === void 0 ? void 0 : filteredValue[i]);
         }
       } else {
+        var _loop_1 = function _loop_1(i) {
+          var isEnabled = enabledItems ? enabledItems.find(function (id) {
+            return 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]);
+        };
         for (var 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]);
+          _loop_1(i);
         }
       }
     }
@@ -15844,8 +15862,8 @@
         }
       }, {
         children: [!hideSelectAll && jsxRuntime.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'
@@ -16422,7 +16440,8 @@
       disabledDecrement = props.disabledDecrement,
       prefix = props.prefix,
       suffix = props.suffix,
-      size = props.size;
+      size = props.size,
+      disableManualInput = props.disableManualInput;
     var _b = React.useState((_a = value !== null && value !== void 0 ? value : min) !== null && _a !== void 0 ? _a : 0),
       inputValue = _b[0],
       setInputValue = _b[1];
@@ -16479,8 +16498,8 @@
         }, void 0)
       }), void 0), jsxRuntime.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,
@@ -16509,7 +16528,7 @@
     size: 'lg'
   };
 
-  const _excluded$b = ["children"],
+  const _excluded$c = ["children"],
     _excluded2$3 = ["children", "showOverlay"];
   var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const Context$1 = /*#__PURE__*/React__default["default"].createContext();
@@ -16551,7 +16570,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
@@ -16859,7 +16878,7 @@
   DrawerFooter.displayName = 'DrawerFooter';
   DrawerCloseButton.displayName = 'DrawerCloseButton';
 
-  const _excluded$a = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size", "withMaxWidth", "mobileOnly", "desktopOnly"],
+  const _excluded$b = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size", "withMaxWidth", "mobileOnly", "desktopOnly"],
     _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
   var _jsxFileName$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
   const ScrollButton$1 = styled(Button$4, {
@@ -17065,7 +17084,7 @@
         mobileOnly,
         desktopOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     const [listContainerScrollPosition, setlistContainerScrollPosition] = React.useState(0);
     const [scrollAreaWidth, setScrollAreaWidth] = React.useState(0);
     const listContainerRef = React.useRef();
@@ -19945,22 +19964,22 @@
       case NEXT_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case RANGE_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case PREV_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
-          var startThisWeek = currentDate.startOf('week').toDate();
-          var endThisWeek = currentDate.endOf('week').toDate();
+          var startThisWeek = currentDate.startOf('isoWeek').toDate();
+          var endThisWeek = currentDate.endOf('isoWeek').toDate();
           return [startThisWeek, endThisWeek];
         }
       case RANGE_MONTH:
@@ -20741,10 +20760,8 @@
       },
       disabled: {
         true: {
-          border: 'none',
           cursor: 'not-allowed',
           '&:hover': {
-            border: 'none',
             background: '$bgGray'
           }
         }
@@ -20777,7 +20794,7 @@
       children: [jsxRuntime.jsx(SignatureContainer, __assign({
         hasContent: !!signatureImage,
         onClick: function () {
-          if (!disabled) {
+          if (!disabled && !signatureImage) {
             setOpen(true);
           }
         },
@@ -20810,7 +20827,7 @@
           variant: "label",
           color: "disable"
         }, {
-          children: t('placeholder', 'Tanda tangan disini')
+          children: t('placeholder', 'Tanda tangan di sini')
         }), void 0)
       }), void 0), jsxRuntime.jsx(SignatureModal, {
         t: t,
@@ -20818,12 +20835,12 @@
         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 = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
@@ -21083,7 +21100,7 @@
         width,
         height
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     return /*#__PURE__*/React__default["default"].createElement(StyledSlider, _extends({
       className: className,
       defaultValue: defaultValue,
@@ -21167,7 +21184,7 @@
     size: 'm'
   };
 
-  const _excluded$8 = ["className", "children", "onClick", "type", "size"];
+  const _excluded$9 = ["className", "children", "onClick", "type", "size"];
   var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
   const TagWrapper$1 = styled('div', {
     boxSizing: 'border-box',
@@ -21268,7 +21285,7 @@
         type,
         size
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, _extends({
       ref: ref,
       className: className,
@@ -21328,7 +21345,7 @@
     }, props)));
   }
 
-  const _excluded$7 = ["children"],
+  const _excluded$8 = ["children"],
     _excluded2$1 = ["children", "activeTabs"],
     _excluded3$1 = ["children", "icon", "activeTabs", "value"],
     _excluded4 = ["activeTabs"];
@@ -21476,7 +21493,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     const [activeTabs, setActiveTabs] = React.useState(props.defaultValue || '');
     return /*#__PURE__*/React__default["default"].createElement(StyledTabs, _extends({}, props, {
       onValueChange: value => {
@@ -21670,7 +21687,7 @@
     value: PropTypes__default["default"].string
   };
 
-  const _excluded$6 = ["children", "variantIcon"];
+  const _excluded$7 = ["children", "variantIcon"];
   var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
@@ -21773,7 +21790,7 @@
         children,
         variantIcon
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     const getIcon = () => {
       const isLeading = variantIcon === 'leading';
       return {
@@ -21825,7 +21842,7 @@
     dot: PropTypes__default["default"].bool
   };
 
-  const _excluded$5 = ["className", "children", "radius", "padding", "width", "height"];
+  const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
   var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
@@ -21871,7 +21888,7 @@
         width,
         height
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     return /*#__PURE__*/React__default["default"].createElement(PaperComponent, _extends({
       className: className,
       css: Object.assign({
@@ -22077,7 +22094,7 @@
     return newObj;
   };
 
-  const _excluded$4 = ["isActive", "onClick"];
+  const _excluded$5 = ["isActive", "onClick"];
   var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
   const PrevNextButton = styled(Text$1, {
     padding: '$spacing-01',
@@ -22164,7 +22181,7 @@
         isActive,
         onClick
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     return /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       type: "button",
       onClick: onClick,
@@ -22565,7 +22582,7 @@
     }, t('btnSubmitText', 'Lanjutkan'))))));
   };
 
-  const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
+  const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
   var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
   const LimitContainer = styled(Flex$1, {
     cursor: 'pointer'
@@ -22591,7 +22608,7 @@
         totalData,
         onChange
       } = _ref;
-      _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      _objectWithoutPropertiesLoose(_ref, _excluded$4);
     const {
       t
     } = reactI18next.useTranslation('MajooUI/pagination');
@@ -22798,7 +22815,7 @@
     }, limit.toString()))))));
   }
 
-  const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
+  const _excluded$3 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
   var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
   function Pagination(_ref) {
     let {
@@ -22813,7 +22830,7 @@
         hidePagination,
         hideInputPageSection
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     const totalPages = totalPage || Math.ceil(totalData / limit);
     const isMobile = useMediaQuery('(max-width: 700px)');
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
@@ -24262,40 +24279,44 @@
       searchQuery = _a.searchQuery,
       _t = _a.additionalExceptionIds,
       additionalExceptionIds = _t === void 0 ? [] : _t,
-      onExpand = _a.onExpand,
-      _u = _a.id,
-      id = _u === void 0 ? null : _u,
+      _u = _a.expanded,
+      controlledExpanded = _u === void 0 ? {} : _u,
+      onExpandedChange = _a.onExpandedChange,
+      _v = _a.id,
+      id = _v === void 0 ? null : _v,
       onColumnChange = _a.onColumnChange,
-      _v = _a.virtualized,
-      virtualized = _v === void 0 ? true : _v,
-      _w = _a.withoutLimit,
-      withoutLimit = _w === void 0 ? false : _w,
+      _w = _a.virtualized,
+      virtualized = _w === void 0 ? true : _w,
+      _x = _a.withoutLimit,
+      withoutLimit = _x === void 0 ? false : _x,
       additionalHeader = _a.additionalHeader,
-      outerContainerCss = _a.outerContainerCss;
-    var _x = React.useState(false),
-      openMenu = _x[0],
-      setOpen = _x[1];
-    var _y = React.useState(rowLimit),
-      limit = _y[0],
-      setLimit = _y[1];
-    var _z = React.useState({}),
-      dataRow = _z[0],
-      setDataRow = _z[1];
-    var _0 = React.useState('start'),
-      tableScrollPosition = _0[0],
-      setTableScrollPosition = _0[1];
-    var _1 = React.useState(0),
-      scrollAreaWidth = _1[0],
-      setScrollAreaWidth = _1[1];
-    var _2 = React.useState(selectedIds ? Object.keys(selectedIds) : []),
-      stateSelectedRowIds = _2[0],
-      setStateSelectedRowIds = _2[1];
-    var _3 = useLocalStorageState("menu:".concat(id), []),
-      filterHeader = _3[0],
-      setFilterHeader = _3[1];
-    var _4 = React.useState([]),
-      filteredHeader = _4[0],
-      setFilteredHeader = _4[1];
+      outerContainerCss = _a.outerContainerCss,
+      _y = _a.autoResetExpanded,
+      autoResetExpanded = _y === void 0 ? true : _y;
+    var _z = React.useState(false),
+      openMenu = _z[0],
+      setOpen = _z[1];
+    var _0 = React.useState(rowLimit),
+      limit = _0[0],
+      setLimit = _0[1];
+    var _1 = React.useState({}),
+      dataRow = _1[0],
+      setDataRow = _1[1];
+    var _2 = React.useState('start'),
+      tableScrollPosition = _2[0],
+      setTableScrollPosition = _2[1];
+    var _3 = React.useState(0),
+      scrollAreaWidth = _3[0],
+      setScrollAreaWidth = _3[1];
+    var _4 = React.useState(selectedIds ? Object.keys(selectedIds) : []),
+      stateSelectedRowIds = _4[0],
+      setStateSelectedRowIds = _4[1];
+    var _5 = useLocalStorageState("menu:".concat(id), []),
+      filterHeader = _5[0],
+      setFilterHeader = _5[1];
+    var _6 = React.useState([]),
+      filteredHeader = _6[0],
+      setFilteredHeader = _6[1];
     var t = reactI18next.useTranslation('MajooUI/table').t;
     var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var customEmptyDataProps = searchQuery ? defaultEmptySearchProps(t, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(t, isMobile);
@@ -24311,6 +24332,11 @@
           selectedRowIds: selectedIds
         });
       }
+      if (controlledExpanded) {
+        Object.assign(initialState, {
+          expanded: controlledExpanded
+        });
+      }
       return Object.keys(initialState).length > 0 ? initialState : undefined;
     };
     var instance = reactTable.useTable({
@@ -24319,12 +24345,16 @@
         return 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: autoResetExpanded,
+      onExpandedChange: onExpandedChange,
       autoResetPage: false,
       autoResetSelectedRows: false,
       getRowId: showDuplicatedData ? undefined : function (row) {
@@ -24341,12 +24371,12 @@
       setPageSize = instance.setPageSize,
       toggleRowSelected = instance.toggleRowSelected,
       toggleAllRowsSelected = instance.toggleAllRowsSelected,
-      _5 = instance.state,
-      pageIndex = _5.pageIndex,
-      pageSize = _5.pageSize,
-      sortBy = _5.sortBy,
-      selectedRowIds = _5.selectedRowIds,
-      expanded = _5.expanded,
+      _7 = instance.state,
+      pageIndex = _7.pageIndex,
+      pageSize = _7.pageSize,
+      sortBy = _7.sortBy,
+      selectedRowIds = _7.selectedRowIds,
+      expanded = _7.expanded,
       setHiddenColumns = instance.setHiddenColumns,
       setColumnOrder = instance.setColumnOrder;
     var scrollerRef = React.useRef(null);
@@ -24592,8 +24622,8 @@
         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]);
     React.useEffect(function () {
       if (hiddenColumns) setHiddenColumns(hiddenColumns);
     }, [hiddenColumns]);
@@ -25838,7 +25868,7 @@
     layer: '$modal'
   };
 
-  const _excluded$1 = ["children"];
+  const _excluded$2 = ["children"];
   var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
   const overlayShow = keyframes({
     '0%': {
@@ -25911,7 +25941,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     return /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Portal, {
       __self: undefined,
       __source: {
@@ -26471,7 +26501,7 @@
   const AlertDialogCancel = ADialog__namespace.Cancel;
   const AlertDialogConfirm = ADialog__namespace.Action;
 
-  const _excluded = ["side", "align", "children"],
+  const _excluded$1 = ["side", "align", "children"],
     _excluded2 = ["children"],
     _excluded3 = ["asChild"];
   var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
@@ -26614,7 +26644,7 @@
         align,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     return /*#__PURE__*/React__default["default"].createElement(DropdownMenuPrimitive__namespace.Root, _extends({}, props, {
       __self: undefined,
       __source: {
@@ -28609,6 +28639,7 @@
     });
   }
 
+  const _excluded = ["customPreviewIcon"];
   var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
   const Input$2 = styled('input', {
     display: 'none !important'
@@ -28683,7 +28714,11 @@
     height: 32,
     padding: '$spacing-02'
   });
-  const IconStateFull = props => {
+  const IconStateFull = _ref => {
+    let {
+        customPreviewIcon
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
     const [isHover, setIsHover] = React.useState(false);
     function handleEnter() {
       setIsHover(true);
@@ -28701,6 +28736,25 @@
         lineNumber: 119,
         columnNumber: 5
       }
+    })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 126,
+        columnNumber: 5
+      }
+    }, !!customPreviewIcon ? /*#__PURE__*/React__default["default"].cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
+      color: isHover ? '#04C99E' : customPreviewIcon.props.color,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      style: Object.assign({
+        cursor: 'pointer',
+        background: 'rgba(39, 42, 42, 0.6)',
+        borderRadius: 50,
+        padding: '4px',
+        width: 32,
+        height: 32
+      }, customPreviewIcon.props.style)
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
       color: isHover ? '#04C99E' : '#A5ABAB',
       onMouseEnter: handleEnter,
@@ -28708,10 +28762,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
-        columnNumber: 5
+        lineNumber: 145,
+        columnNumber: 9
       }
-    }));
+    })));
   };
   const Upload = ({
     placeholder,
@@ -28750,7 +28804,9 @@
     hiddenToggleAspect,
     hiddenPreview,
     fullAspectCrop,
-    isDefaultCustomRatio
+    isDefaultCustomRatio,
+    customPreviewIcon,
+    onPreviewIconClick
   }) => {
     const {
       t
@@ -28926,10 +28982,16 @@
               let uid = fileProgress.uid;
               fileProgress.status = 'uploading';
               fileProgress.percent = percent;
+              fileProgress.name = newFile.name;
+              fileProgress.type = newFile.type;
+              fileProgress.size = newFile.size;
               let arrProgress = [...arrFile];
               for (let i = 0; i < arrProgress.length; i++) {
                 if (arrProgress[i].uid === uid) {
                   arrProgress[i] = fileProgress;
+                  arrProgress[i].name = newFile.name;
+                  arrProgress[i].type = newFile.type;
+                  arrProgress[i].size = newFile.size;
                 }
               }
               onChange == null ? void 0 : (_onChange = onChange({
@@ -28945,9 +29007,15 @@
             let uid = fileSuccess.uid;
             fileSuccess.url = result;
             fileSuccess.status = 'done';
-            for (let i = 0; i < arrFile.length; i++) {
-              if (arrFile[i].uid === uid) {
-                arrFile[i] = fileSuccess;
+            fileSuccess.name = newFile.name;
+            fileSuccess.type = newFile.type;
+            fileSuccess.size = newFile.size;
+            for (let j = 0; j < arrFile.length; j++) {
+              if (arrFile[j].uid === uid) {
+                arrFile[j] = fileSuccess;
+                arrFile[j].name = newFile.name;
+                arrFile[j].type = newFile.type;
+                arrFile[j].size = newFile.size;
               }
             }
             onChange == null ? void 0 : (_onChange2 = onChange({
@@ -28962,9 +29030,15 @@
             let uid = fileError.uid;
             fileError.status = 'error';
             fileError.error = error;
+            fileError.name = newFile.name;
+            fileError.type = newFile.type;
+            fileError.size = newFile.size;
             for (let i = 0; i < arrFile.length; i++) {
               if (arrFile[i].uid === uid) {
                 arrFile[i] = fileError;
+                arrFile[i].name = newFile.name;
+                arrFile[i].type = newFile.type;
+                arrFile[i].size = newFile.size;
               }
             }
             onChange == null ? void 0 : (_onChange3 = onChange({
@@ -29180,7 +29254,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 664,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -29190,7 +29264,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 616,
+          lineNumber: 665,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29205,7 +29279,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 626,
+              lineNumber: 675,
               columnNumber: 16
             }
           });
@@ -29216,7 +29290,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 629,
+            lineNumber: 678,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29226,7 +29300,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 630,
+            lineNumber: 679,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29235,7 +29309,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 631,
+            lineNumber: 680,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29248,16 +29322,23 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 633,
+            lineNumber: 682,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
-          onClick: () => handlePreview(item),
+          onClick: () => {
+            if (onPreviewIconClick) {
+              onPreviewIconClick(item);
+            } else {
+              handlePreview(item);
+            }
+          },
+          customPreviewIcon: customPreviewIcon,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 641,
+            lineNumber: 690,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -29267,7 +29348,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 703,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29284,7 +29365,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 655,
+              lineNumber: 714,
               columnNumber: 16
             }
           });
@@ -29294,7 +29375,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 658,
+            lineNumber: 717,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29304,7 +29385,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 659,
+            lineNumber: 718,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29313,7 +29394,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 660,
+            lineNumber: 719,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29326,7 +29407,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 661,
+            lineNumber: 720,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29336,14 +29417,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 669,
+            lineNumber: 728,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 670,
+            lineNumber: 729,
             columnNumber: 17
           }
         }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29351,7 +29432,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 671,
+            lineNumber: 730,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29366,7 +29447,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 672,
+            lineNumber: 731,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29379,16 +29460,23 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 688,
+            lineNumber: 747,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
-          onClick: () => handleOpenFile(item),
+          onClick: () => {
+            if (onPreviewIconClick) {
+              onPreviewIconClick(item);
+            } else {
+              handleOpenFile(item);
+            }
+          },
+          customPreviewIcon: customPreviewIcon,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 696,
+            lineNumber: 755,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -29396,7 +29484,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 699,
+            lineNumber: 768,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29411,7 +29499,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 779,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29425,7 +29513,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 711,
+          lineNumber: 780,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -29451,7 +29539,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 712,
+          lineNumber: 781,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29459,14 +29547,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 725,
+          lineNumber: 794,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 726,
+          lineNumber: 795,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29478,7 +29566,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 803,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -29494,7 +29582,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 804,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -29506,21 +29594,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 746,
+          lineNumber: 815,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 747,
+          lineNumber: 816,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 749,
+          lineNumber: 818,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -29529,7 +29617,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 750,
+          lineNumber: 819,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -29537,7 +29625,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 820,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29547,7 +29635,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 822,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -29557,7 +29645,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 829,
           columnNumber: 19
         }
       }, error));
@@ -29569,7 +29657,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 767,
+          lineNumber: 836,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -29577,7 +29665,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 837,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -29585,7 +29673,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 838,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -29598,7 +29686,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 771,
+          lineNumber: 840,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -29611,7 +29699,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 774,
+          lineNumber: 843,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -29622,7 +29710,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 775,
+          lineNumber: 851,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -29636,14 +29724,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 852,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 787,
+          lineNumber: 863,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29655,14 +29743,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 788,
+          lineNumber: 864,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 790,
+          lineNumber: 866,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29670,7 +29758,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 792,
+          lineNumber: 868,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -29682,7 +29770,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 793,
+          lineNumber: 869,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29690,7 +29778,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 800,
+          lineNumber: 876,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -29699,7 +29787,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 801,
+          lineNumber: 877,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -29709,7 +29797,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 804,
+          lineNumber: 880,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -29726,7 +29814,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 813,
+        lineNumber: 889,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -29735,7 +29823,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 816,
+        lineNumber: 892,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());