@majoo-ui/react 1.55.4 → 1.55.6

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('react-i18next'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'react-i18next', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactI18next, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactI18next, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3465,15 +3465,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 15,
-        columnNumber: 10
+        lineNumber: 11,
+        columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 16,
-        columnNumber: 5
+        lineNumber: 12,
+        columnNumber: 7
       }
     }, children));
   }
@@ -8756,6 +8756,12 @@
           left: '0',
           transform: 'translate(0, -100%)'
         }
+      },
+      withFooter: {
+        true: {
+          float: 'unset',
+          position: 'unset'
+        }
       }
     },
     defaultVariants: {
@@ -8781,6 +8787,14 @@
       borderBottom: '1px solid $bgBorder'
     }
   });
+  var StyledFooter = styled('div', {
+    position: 'sticky',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '$bgWhite',
+    boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.1)'
+  });
   var StyledDiv$2 = styled('div', {
     color: '$textDisable',
     display: 'flex',
@@ -8897,7 +8911,8 @@
         _s = _a.showTooltip,
         showTooltip = _s === void 0 ? false : _s,
         css = _a.css,
-        props = __rest(_a, ["option", "onChange", "value", "placeholder", "searchPlaceholder", "embedSearch", "size", "disabled", "search", "iconColor", "hideArrowicon", "showLeadingIcon", "placement", "disabledOptions", "textSelector", "valueSelector", "readOnly", "isInvalid", "noOptionIcon", "fetchData", "onSearch", "isLoading", "showTooltip", "css"]);
+        renderFooter = _a.renderFooter,
+        props = __rest(_a, ["option", "onChange", "value", "placeholder", "searchPlaceholder", "embedSearch", "size", "disabled", "search", "iconColor", "hideArrowicon", "showLeadingIcon", "placement", "disabledOptions", "textSelector", "valueSelector", "readOnly", "isInvalid", "noOptionIcon", "fetchData", "onSearch", "isLoading", "showTooltip", "css", "renderFooter"]);
 
     var _t = React.useState([]),
         options = _t[0],
@@ -9134,86 +9149,106 @@
             }, {
               children: "Loading...."
             }), void 0)
-          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({
-            ref: scrollerRef
-          }, {
-            suppressRefError: true
-          }), {
-            css: {
-              display: isOpen ? 'block' : 'none',
-              zIndex: '$popover'
-            },
-            placement: placement
+          }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
+            condition: renderFooter && typeof renderFooter === 'function',
+            wrapper: function (child) {
+              return jsxRuntime.jsxs(Box, __assign({
+                css: {
+                  position: 'absolute',
+                  float: 'left',
+                  display: isOpen ? 'block' : 'none',
+                  zIndex: '$popover',
+                  width: '100%'
+                }
+              }, {
+                children: [child, renderFooter && typeof renderFooter === 'function' && jsxRuntime.jsx(StyledFooter, {
+                  children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+                }, void 0)]
+              }), void 0);
+            }
           }, {
-            children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
-              css: {
-                position: 'sticky',
-                top: 0,
-                zIndex: '$sticky',
-                padding: '$spacing-04 $spacing-05 0',
-                backgroundColor: '$bgWhite'
-              }
+            children: jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({
+              ref: scrollerRef
             }, {
-              children: jsxRuntime.jsx(InputSearchbox, {
-                size: 'sm',
-                onChange: handleInputValue,
-                placeholder: searchPlaceholder
-              }, void 0)
-            }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
-              condition: !!fetchData && item.length > 0,
-              wrapper: function (children) {
-                return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
-                  loadMore: function (_) {
-                    if (!isLoading && fetchData) fetchData({
-                      query: query
-                    });
-                  },
-                  hasMore: true,
-                  threshold: 5,
-                  useWindow: false
-                }, {
-                  children: children
-                }), void 0);
-              }
+              suppressRefError: true
+            }), {
+              css: {
+                display: isOpen ? 'block' : 'none',
+                zIndex: '$popover'
+              },
+              withFooter: renderFooter && typeof renderFooter === 'function',
+              placement: placement
             }, {
-              children: jsxRuntime.jsx(SelectOption, {
-                children: item.map(function (item, index) {
-                  var _a;
+              children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
+                css: {
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: '$sticky',
+                  padding: '$spacing-04 $spacing-05 0',
+                  backgroundColor: '$bgWhite'
+                }
+              }, {
+                children: jsxRuntime.jsx(InputSearchbox, {
+                  size: 'sm',
+                  onChange: handleInputValue,
+                  placeholder: searchPlaceholder
+                }, void 0)
+              }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
+                condition: !!fetchData && item.length > 0,
+                wrapper: function (children) {
+                  return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
+                    loadMore: function (_) {
+                      if (!isLoading && fetchData) fetchData({
+                        query: query
+                      });
+                    },
+                    hasMore: true,
+                    threshold: 5,
+                    useWindow: false
+                  }, {
+                    children: children
+                  }), void 0);
+                }
+              }, {
+                children: jsxRuntime.jsx(SelectOption, {
+                  children: item.map(function (item, index) {
+                    var _a;
 
-                  return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
-                    item: item,
-                    disabled: item.isDisabled
-                  }), {
-                    key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
-                    css: item.isDisabled ? {
-                      backgroundColor: 'unset',
-                      cursor: 'not-allowed',
-                      color: '$textDisable'
-                    } : {
-                      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-                      fontWeight: 'normal',
-                      color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
-                    }
-                  }), item.render ? item.render(selectedItem) : item.name);
-                })
-              }, void 0)
-            }), void 0) : jsxRuntime.jsx(SelectOption, {
-              children: jsxRuntime.jsxs(StyledDiv$2, {
-                children: [jsxRuntime.jsx("div", __assign({
-                  style: {
-                    marginRight: '6px'
-                  }
-                }, {
-                  children: jsxRuntime.jsx(icons.CircleInfoOutline, {
-                    size: "16px",
-                    color: colors$4.iconDisable,
+                    return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
+                      item: item,
+                      disabled: item.isDisabled
+                    }), {
+                      key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                      css: item.isDisabled ? {
+                        backgroundColor: 'unset',
+                        cursor: 'not-allowed',
+                        color: '$textDisable'
+                      } : {
+                        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                        fontWeight: 'normal',
+                        color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
+                      }
+                    }), item.render ? item.render(selectedItem) : item.name);
+                  })
+                }, void 0)
+              }), void 0) : jsxRuntime.jsx(SelectOption, {
+                children: jsxRuntime.jsxs(StyledDiv$2, {
+                  children: [jsxRuntime.jsx("div", __assign({
                     style: {
-                      verticalAlign: 'text-bottom'
+                      marginRight: '6px'
                     }
-                  }, void 0)
-                }), void 0), "Item tidak ditemukan"]
-              }, void 0)
-            }, void 0)]
+                  }, {
+                    children: jsxRuntime.jsx(icons.CircleInfoOutline, {
+                      size: "16px",
+                      color: colors$4.iconDisable,
+                      style: {
+                        verticalAlign: 'text-bottom'
+                      }
+                    }, void 0)
+                  }), void 0), "Item tidak ditemukan"]
+                }, void 0)
+              }, void 0)]
+            }), void 0)
           }), void 0)]
         }), void 0);
       }
@@ -10790,12 +10825,10 @@
         disabled = _b === void 0 ? false : _b,
         onItemCheck = _a.onItemCheck,
         onItemUncheck = _a.onItemUncheck,
-        _c = _a.searchPlaceholder,
-        searchPlaceholder = _c === void 0 ? 'Cari ...' : _c,
-        _d = _a.counterFooterText,
-        counterFooterText = _d === void 0 ? 'kategori dipilih' : _d,
-        _e = _a.isLoading,
-        isLoading = _e === void 0 ? false : _e,
+        searchPlaceholder = _a.searchPlaceholder,
+        counterFooterText = _a.counterFooterText,
+        _c = _a.isLoading,
+        isLoading = _c === void 0 ? false : _c,
         enabledItems = _a.enabledItems,
         emptyDataMessage = _a.emptyDataMessage,
         value = _a.value,
@@ -10805,18 +10838,19 @@
         defaultSort = _a.defaultSort,
         title = _a.title,
         hideSelectAll = _a.hideSelectAll;
+    var t = reactI18next.useTranslation(['MajooUI/inputResourceList', 'translation']).t;
 
-    var _f = React.useState([]),
-        checkedResources = _f[0],
-        setCheckedResources = _f[1];
+    var _d = React.useState([]),
+        checkedResources = _d[0],
+        setCheckedResources = _d[1];
 
-    var _g = React.useState(),
-        query = _g[0],
-        setQuery = _g[1];
+    var _e = React.useState(),
+        query = _e[0],
+        setQuery = _e[1];
 
-    var _h = React.useState('asc'),
-        sortType = _h[0],
-        setSortType = _h[1];
+    var _f = React.useState('asc'),
+        sortType = _f[0],
+        setSortType = _f[1];
 
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
@@ -11002,7 +11036,9 @@
     }, {
       children: [onQueryChange && jsxRuntime.jsx(InputSearchbox, {
         size: "lg",
-        placeholder: searchPlaceholder,
+        placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...', {
+          ns: 'translation'
+        }),
         onChange: debounce__default["default"](function (query) {
           setQuery(query);
           onQueryChange(query);
@@ -11026,7 +11062,7 @@
         }, void 0), jsxRuntime.jsx(Heading, __assign({
           heading: "headerTable"
         }, {
-          children: title || 'Urutkan'
+          children: title || t('defaultTitle', 'Urutkan')
         }), void 0), jsxRuntime.jsx(SortingIcon, __assign({
           onClick: toggleSort
         }, {
@@ -11077,7 +11113,9 @@
             align: "center",
             color: "secondary"
           }, {
-            children: emptyDataMessage || 'Tidak ada data'
+            children: emptyDataMessage || t('label.noData', 'Tidak ada data', {
+              ns: 'translation'
+            })
           }), void 0)
         }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
           condition: !!fetchData && data.length > 0,
@@ -11109,7 +11147,7 @@
           variant: "helper",
           color: disabled ? 'disable' : 'green'
         }, {
-          children: "".concat((value === null || value === void 0 ? void 0 : value.length) || checkedResources.length, " ").concat(counterFooterText)
+          children: "".concat((value === null || value === void 0 ? void 0 : value.length) || checkedResources.length, " ").concat(counterFooterText || t('counterFooterText', 'kategori dipilih'))
         }), void 0)
       }), void 0)]
     }), void 0);
@@ -15068,8 +15106,10 @@
     }), void 0);
   };
 
-  const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
-  const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+  const monthNamesFullId = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  const monthNamesFullEng = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const weekdayNamesShortId = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+  const weekdayNamesShortEng = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   const yearRangesList = rangeStart => {
     let start = rangeStart;
     let end = start + 9;
@@ -15085,9 +15125,7 @@
   };
   const getCalendarStartYear = year => year - year % 10 + 1;
   const getCalendarStartYearRange = year => year - year % 100 + 1;
-  const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
-    dateStyle
-  }).format(date);
+  const toDateFormat = (date, locale = 'id') => moment__default["default"](date).locale(locale).format('D MMMM YYYY');
 
   var DateNumber = styled('div', {
     display: 'inline-flex',
@@ -15366,16 +15404,23 @@
         maxDate = _a.maxDate,
         allowReset = _a.allowReset;
 
-    var _b = React.useState({
+    var _b = reactI18next.useTranslation(['MajooUI/datePicker', 'translation']),
+        t = _b.t,
+        i18n = _b.i18n;
+
+    var _c = React.useState({
       type: DATE_PICKER,
       selectedMonth: Number(calendars[0].month),
       selectedYear: Number(calendars[0].year),
       selectedYearRange: getCalendarStartYear(calendars[0].year),
       selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
     }),
-        pickerState = _b[0],
-        setPickerState = _b[1];
+        pickerState = _c[0],
+        setPickerState = _c[1];
 
+    var language = i18n.language;
+    var monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+    var weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
     React.useEffect(function () {
       var selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
 
@@ -15705,7 +15750,7 @@
               fontSize: '$short-content-regular'
             }
           }, {
-            children: selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0]), " - ").concat(toDateFormat(selected[1])) : !selected || selected.length <= 0 ? 'Tanggal belum dipilih' : toDateFormat(selected[0])
+            children: selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0], language), " - ").concat(toDateFormat(selected[1], language)) : !selected || selected.length <= 0 ? t('notSelectedDateText', 'Tanggal belum dipilih') : toDateFormat(selected[0], language)
           }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
             gap: 3
           }, {
@@ -15728,7 +15773,9 @@
               disabled: disabled,
               size: "sm"
             }, {
-              children: "Batal"
+              children: t('label.cancel', 'Batal', {
+                ns: 'translation'
+              })
             }), void 0), jsxRuntime.jsx(Button$4, __assign({
               css: {
                 fontWeight: 600
@@ -15737,7 +15784,9 @@
               disabled: disabled || !selected || selected.length <= 1,
               size: "sm"
             }, {
-              children: "Proses"
+              children: t('label.process', 'Proses', {
+                ns: 'translation'
+              })
             }), void 0)]
           }), void 0)]
         }), void 0)]
@@ -16022,19 +16071,27 @@
         maxDate = _a.maxDate,
         allowReset = _a.allowReset;
 
-    var _b = React.useState({
+    var _b = reactI18next.useTranslation('MajooUI/datePicker'),
+        t = _b.t,
+        i18n = _b.i18n;
+
+    var _c = React.useState({
       type: DATE_PICKER,
       selectedMonth: Number(calendars[0].month),
       selectedYear: Number(calendars[0].year),
       selectedYearRange: getCalendarStartYear(calendars[0].year),
       selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
     }),
-        pickerState = _b[0],
-        setPickerState = _b[1];
+        pickerState = _c[0],
+        setPickerState = _c[1];
+
+    var language = i18n.language;
+    var monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+    var weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
 
-    var _c = React.useState(false),
-        expandAdvanceView = _c[0],
-        setExpandAdvanceView = _c[1];
+    var _d = React.useState(false),
+        expandAdvanceView = _d[0],
+        setExpandAdvanceView = _d[1];
 
     React.useEffect(function () {
       var selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
@@ -16319,7 +16376,7 @@
                 color: '$textPrimary'
               }
             }, {
-              children: "Pilih Rentang Waktu"
+              children: t('selectTimeRangeText', 'Pilih Rentang Waktu')
             }), void 0), expandAdvanceView ? jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0)]
           }), void 0), expandAdvanceView && advanceView, jsxRuntime.jsx(Separator$2, {
             css: {
@@ -16333,7 +16390,7 @@
           variant: "status",
           color: selected && selected.length > 1 ? 'primary' : 'disable'
         }, {
-          children: selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0]), " - ").concat(toDateFormat(selected[1])) : 'Tanggal belum dipilih'
+          children: selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0], language), " - ").concat(toDateFormat(selected[1], language)) : t('notSelectedDateText', 'Tanggal belum dipilih')
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
         }, {
@@ -17250,7 +17307,7 @@
   var LAST_MONTH = 'LAST_MONTH';
   var LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
   var THIS_MONTH = 'THIS_MONTH';
-  var advancePickerOptions = [{
+  var advancePickerOptionsId = [{
     label: 'Hari Ini',
     value: TODAY
   }, {
@@ -17275,6 +17332,31 @@
     label: 'Bulan Ini',
     value: THIS_MONTH
   }];
+  var advancePickerOptionsEn = [{
+    label: 'Today',
+    value: TODAY
+  }, {
+    label: 'Yesterday',
+    value: YESTERDAY
+  }, {
+    label: 'Last 7 Days',
+    value: LAST_7_DAYS
+  }, {
+    label: 'Last Week',
+    value: LAST_WEEK
+  }, {
+    label: 'This Week',
+    value: THIS_WEEK
+  }, {
+    label: 'Last Month',
+    value: LAST_MONTH
+  }, {
+    label: 'Last 2 Months',
+    value: LAST_TWO_MONTHS
+  }, {
+    label: 'This Month',
+    value: THIS_MONTH
+  }];
   function pickerReducer(state, action) {
     var tempDate = new Date();
     var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
@@ -17637,15 +17719,13 @@
     }), void 0);
   }
 
-  moment__default["default"].locale('id');
-
   var getInputPickerValue = function getInputPickerValue(type, date, isTimePicker) {
     if (!date) return '';
 
     if (type === SINGLE_PICKER) {
       return "".concat(moment__default["default"](date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY'));
     } else {
-      return "".concat(moment__default["default"](date[0]).format('ll'), " - ").concat(moment__default["default"](date[1]).format('ll'));
+      return "".concat(moment__default["default"](date[0]).format('D MMM YYYY'), " - ").concat(moment__default["default"](date[1]).format('D MMM YYYY'));
     }
   };
 
@@ -17655,10 +17735,9 @@
         showRangeControl = _a.showRangeControl,
         _c = _a.rangePickerType,
         rangePickerType = _c === void 0 ? WEEKLY : _c,
-        _d = _a.placeholder,
-        placeholder = _d === void 0 ? 'Pilih Tanggal' : _d,
-        _e = _a.size,
-        size = _e === void 0 ? 'sm' : _e,
+        placeholder = _a.placeholder,
+        _d = _a.size,
+        size = _d === void 0 ? 'sm' : _d,
         disabled = _a.disabled,
         onChange = _a.onChange,
         defaultDateValue = _a.defaultValue,
@@ -17666,8 +17745,8 @@
         defaultDate = _a.defaultDate,
         date = _a.date,
         advanceView = _a.advanceView,
-        _f = _a.placement,
-        placement = _f === void 0 ? 'bottom-start' : _f,
+        _e = _a.placement,
+        placement = _e === void 0 ? 'bottom-start' : _e,
         css = _a.css,
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
@@ -17676,6 +17755,10 @@
         isInvalid = _a.isInvalid,
         allowReset = _a.allowReset;
 
+    var _f = reactI18next.useTranslation('MajooUI/datePicker'),
+        t = _f.t,
+        i18n = _f.i18n;
+
     var _g = React.useState(date || dateValue),
         value = _g[0],
         setValue = _g[1];
@@ -17684,6 +17767,8 @@
         defaultValue = _h[0],
         setDefaultValue = _h[1];
 
+    var language = i18n.language;
+    moment__default["default"].locale(language);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -17749,7 +17834,7 @@
           children: [jsxRuntime.jsx(InputLeftElement, {
             children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
           }, void 0), jsxRuntime.jsx(InputText, {
-            placeholder: placeholder,
+            placeholder: placeholder || t('datePickerPlaceholder', 'Pilih Tanggal'),
             value: getInputPickerValue(type, selectedDate, showTimePicker),
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             onChange: function () {},
@@ -17760,7 +17845,7 @@
       } else {
         return jsxRuntime.jsx(InputDateRangePicker, {
           value: getInputPickerValue(ADVANCE_PICKER, selectedDate, false),
-          placeholder: placeholder,
+          placeholder: placeholder || t('datePickerPlaceholder', 'Pilih Tanggal'),
           disabled: disabled,
           readOnly: readOnly,
           size: size,
@@ -17797,7 +17882,7 @@
 
       return jsxRuntime.jsx(DatePicker, {
         advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
-          options: advancePickerOptions,
+          options: language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn,
           disabled: disabled,
           optionHandler: function (value) {
             dispatch({
@@ -17984,7 +18069,7 @@
     var renderDatePicker = function renderDatePicker() {
       return jsxRuntime.jsx(DatePicker, {
         advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
-          options: advancePickerOptions,
+          options: advancePickerOptionsId,
           disabled: disabled,
           optionHandler: function (value) {
             dispatch({
@@ -18100,7 +18185,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 34,
+        lineNumber: 35,
         columnNumber: 5
       }
     }));
@@ -18111,6 +18196,9 @@
     totalPages,
     onSelect
   }) => {
+    const {
+      t
+    } = reactI18next.useTranslation('MajooUI/pagination');
     const isLg = useMediaQuery('(max-width: 800px)');
 
     const handleSelectPage = page => {
@@ -18178,7 +18266,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 106,
+        lineNumber: 108,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -18187,7 +18275,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 112,
+        lineNumber: 114,
         columnNumber: 7
       }
     }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18198,7 +18286,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 116,
+        lineNumber: 118,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
@@ -18206,7 +18294,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 117,
+        lineNumber: 119,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -18217,10 +18305,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 120,
+        lineNumber: 122,
         columnNumber: 13
       }
-    }, "Sebelumnya")), generatePages().map((page, index) => {
+    }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
       return /*#__PURE__*/React__default["default"].createElement(PageButton, {
         key: index.toString(),
         isActive: page === currentPage,
@@ -18228,7 +18316,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 132,
+          lineNumber: 134,
           columnNumber: 13
         }
       }, page);
@@ -18240,10 +18328,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 143,
+        lineNumber: 145,
         columnNumber: 13
       }
-    }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       type: "button",
       buttonType: "secondary",
       disabled: currentPage === totalPages,
@@ -18251,7 +18339,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 152,
+        lineNumber: 154,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
@@ -18259,7 +18347,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 158,
+        lineNumber: 160,
         columnNumber: 17
       }
     })))), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18272,7 +18360,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 169,
+        lineNumber: 171,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18285,7 +18373,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 177,
+        lineNumber: 179,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18298,10 +18386,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 178,
+        lineNumber: 180,
         columnNumber: 15
       }
-    }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
+    }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
       ref: inputPageRef,
       isAllowed: ({
         floatValue
@@ -18325,7 +18413,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 181,
+        lineNumber: 183,
         columnNumber: 15
       }
     }))));
@@ -18361,13 +18449,16 @@
     } = _ref;
         _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+    const {
+      t
+    } = reactI18next.useTranslation('MajooUI/pagination');
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       gap: 3,
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 28,
+        lineNumber: 30,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18376,21 +18467,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 29,
+        lineNumber: 31,
         columnNumber: 7
       }
-    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Popover, {
+    }, t('showingText', 'Tampilkan:')), /*#__PURE__*/React__default["default"].createElement(Popover, {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 32,
+        lineNumber: 34,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 33,
+        lineNumber: 35,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(LimitContainer, {
@@ -18398,7 +18489,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 34,
+        lineNumber: 36,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18406,7 +18497,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 35,
+        lineNumber: 37,
         columnNumber: 13
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -18414,7 +18505,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 36,
+        lineNumber: 38,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
@@ -18422,7 +18513,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -18435,7 +18526,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 40,
+        lineNumber: 42,
         columnNumber: 11
       }
     }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
@@ -18445,7 +18536,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 49,
+        lineNumber: 51,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18453,7 +18544,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 54,
+        lineNumber: 56,
         columnNumber: 17
       }
     }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18462,10 +18553,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 60,
+        lineNumber: 62,
         columnNumber: 7
       }
-    }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
+    }, t('showingCountText', `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`, {
+      start: (currentPage - 1) * selectedLimit + 1,
+      end: selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData,
+      totalData
+    })));
   }
 
   const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
@@ -18696,7 +18791,7 @@
     }
   });
   var TableCell$4 = styled('td', {
-    height: '40px',
+    height: '48px',
     fontSize: '$short-content-regular',
     lineHeight: '$short-content-regular',
     letterSpacing: '$short-content-regular',
@@ -18715,7 +18810,8 @@
         _a.hiddenColumns;
         var css = _a.css,
         customRowsStyle = _a.customRowsStyle,
-        cellAlign = _a.cellAlign;
+        cellAlign = _a.cellAlign,
+        renderContextMenu = _a.renderContextMenu;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -18739,11 +18835,11 @@
       }
     };
 
-    return jsxRuntime.jsx(TableContainer$4, __assign({
+    return jsxRuntime.jsxs(TableContainer$4, __assign({
       css: css,
       ref: ref
     }, {
-      children: infiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
+      children: [infiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
         children: [jsxRuntime.jsx(TableHead$3, {
           children: headerGroups.map(function (headerGroup) {
             return jsxRuntime.jsx(TableHeadRow$4, __assign({}, headerGroup.getHeaderGroupProps(), {
@@ -18777,7 +18873,14 @@
           })
         }, void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
           children: page.map(function (row) {
+            var _a;
+
             prepareRow(row);
+            var isContextMenu = (_a = row.cells.filter(function (cell) {
+              var _a, _b;
+
+              return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+            })) === null || _a === void 0 ? void 0 : _a.length;
             var actionCells = row.allCells.filter(function (cell) {
               return cell.column.id === 'menu' || cell.column.isAction;
             });
@@ -18802,6 +18905,34 @@
                 children: row.cells.filter(function (cell) {
                   return cell.column.isMobileHeader || cell.column.id === 'selection';
                 }).map(function (cell) {
+                  var _a;
+
+                  var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                  var exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+
+                  var renderCell = function renderCell() {
+                    return jsxRuntime.jsx(ConditionalWrapper, __assign({
+                      condition: isContextMenu && !exceptionId,
+                      wrapper: function (children) {
+                        return jsxRuntime.jsx(ContextMenuTrigger, __assign({
+                          id: "context-menu-table",
+                          triggerSide: "left"
+                        }, {
+                          children: jsxRuntime.jsx(Box, __assign({
+                            css: {
+                              cursor: 'pointer',
+                              width: 'calc(100vw - 120px)'
+                            }
+                          }, {
+                            children: children
+                          }), void 0)
+                        }), void 0);
+                      }
+                    }, {
+                      children: cell.render('Cell')
+                    }), void 0);
+                  };
+
                   return jsxRuntime.jsx(TableCell$4, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                     children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
                       justify: "between",
@@ -18817,8 +18948,8 @@
                         cursor: 'pointer'
                       }
                     }, {
-                      children: [cell.render('Cell'), row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)]
-                    }), void 0) : cell.render('Cell')
+                      children: [renderCell(), row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)]
+                    }), void 0) : renderCell()
                   }), void 0);
                 })
               }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$4, {
@@ -18890,7 +19021,7 @@
             }), void 0)
           }, void 0)
         }, void 0)]
-      }), void 0))
+      }), void 0)), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
     }), void 0);
   });
 
@@ -19201,26 +19332,29 @@
     return rawData;
   };
 
-  var defaultEmptyDataProps = {
-    doodleImage: jsxRuntime.jsx(EmptyDataDoodle, {}, void 0),
-    title: jsxRuntime.jsx(Paragraph, __assign({
-      paragraph: "shortContentBold",
-      color: "primary",
-      align: "center",
-      css: {
-        marginTop: '$spacing-05'
-      }
-    }, {
-      children: "Data tidak tersedia"
-    }), void 0),
-    description: jsxRuntime.jsxs(Paragraph, __assign({
-      paragraph: "shortContentRegular",
-      color: "secondary",
-      align: "center"
-    }, {
-      children: ["Belum ada data yang dapat ditampilkan", jsxRuntime.jsx("br", {}, void 0), "di halaman ini"]
-    }), void 0)
+  var defaultEmptyDataProps = function defaultEmptyDataProps(t) {
+    return {
+      doodleImage: jsxRuntime.jsx(EmptyDataDoodle, {}, void 0),
+      title: jsxRuntime.jsx(Paragraph, __assign({
+        paragraph: "shortContentBold",
+        color: "primary",
+        align: "center",
+        css: {
+          marginTop: '$spacing-05'
+        }
+      }, {
+        children: t('dataNotAvailableTitle', 'Data tidak tersedia')
+      }), void 0),
+      description: jsxRuntime.jsxs(Paragraph, __assign({
+        paragraph: "shortContentRegular",
+        color: "secondary",
+        align: "center"
+      }, {
+        children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsxRuntime.jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+      }), void 0)
+    };
   };
+
   function Table(_a) {
     var columns = _a.columns,
         rawData = _a.data,
@@ -19237,21 +19371,20 @@
         _f = _a.rowsPerPageOptions,
         rowsPerPageOptions = _f === void 0 ? [10, 25, 50, 100] : _f;
         _a.emptyDataMessage;
-        var _h = _a.customEmptyDataProps,
-        customEmptyDataProps = _h === void 0 ? defaultEmptyDataProps : _h,
-        _j = _a.isLoading,
-        isLoading = _j === void 0 ? false : _j,
+        var emptyDataProps = _a.customEmptyDataProps,
+        _h = _a.isLoading,
+        isLoading = _h === void 0 ? false : _h,
         css = _a.css,
         headerCss = _a.headerCss,
         onSelectedChange = _a.onSelectedChange,
-        _k = _a.isInfiniteScroll,
-        isInfiniteScroll = _k === void 0 ? false : _k,
-        _l = _a.hasMoreItems,
-        hasMoreItems = _l === void 0 ? true : _l,
-        _m = _a.rowLimit,
-        rowLimit = _m === void 0 ? 10 : _m,
-        _o = _a.cellAlign,
-        cellAlign = _o === void 0 ? 'center' : _o,
+        _j = _a.isInfiniteScroll,
+        isInfiniteScroll = _j === void 0 ? false : _j,
+        _k = _a.hasMoreItems,
+        hasMoreItems = _k === void 0 ? true : _k,
+        _l = _a.rowLimit,
+        rowLimit = _l === void 0 ? 10 : _l,
+        _m = _a.cellAlign,
+        cellAlign = _m === void 0 ? 'center' : _m,
         selectedIds = _a.selectedIds,
         rowGroup = _a.rowGroup,
         hiddenColumns = _a.hiddenColumns,
@@ -19261,21 +19394,24 @@
         showDuplicatedData = _a.showDuplicatedData,
         onRowClick = _a.onRowClick;
 
-    var _p = React.useState(rowLimit),
-        limit = _p[0],
-        setLimit = _p[1];
+    var _o = React.useState(rowLimit),
+        limit = _o[0],
+        setLimit = _o[1];
 
-    var _q = React.useState({}),
-        dataRow = _q[0],
-        setDataRow = _q[1];
+    var _p = React.useState({}),
+        dataRow = _p[0],
+        setDataRow = _p[1];
 
-    var _r = React.useState('start'),
-        tableScrollPosition = _r[0],
-        setTableScrollPosition = _r[1];
+    var _q = React.useState('start'),
+        tableScrollPosition = _q[0],
+        setTableScrollPosition = _q[1];
 
-    var _s = React.useState(0),
-        scrollAreaWidth = _s[0],
-        setScrollAreaWidth = _s[1];
+    var _r = React.useState(0),
+        scrollAreaWidth = _r[0],
+        setScrollAreaWidth = _r[1];
+
+    var t = reactI18next.useTranslation('MajooUI/table').t;
+    var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
 
     var getInitialState = function getInitialState() {
       var initialState = {};
@@ -19325,11 +19461,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _t = instance.state,
-        pageIndex = _t.pageIndex,
-        pageSize = _t.pageSize,
-        sortBy = _t.sortBy,
-        selectedRowIds = _t.selectedRowIds,
+        _s = instance.state,
+        pageIndex = _s.pageIndex,
+        pageSize = _s.pageSize,
+        sortBy = _s.sortBy,
+        selectedRowIds = _s.selectedRowIds,
         setHiddenColumns = instance.setHiddenColumns,
         setColumnOrder = instance.setColumnOrder;
 
@@ -19741,7 +19877,8 @@
         hiddenColumns: hiddenColumns,
         css: css,
         customRowsStyle: customRowsStyle,
-        cellAlign: cellAlign
+        cellAlign: cellAlign,
+        renderContextMenu: renderContextMenu
       }, void 0)]
     }), void 0);
   } //Dummy component for mdx docs purpose only
@@ -21147,7 +21284,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 74,
+        lineNumber: 75,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
@@ -21157,14 +21294,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 76,
+        lineNumber: 77,
         columnNumber: 7
       }
     }), children));
@@ -21178,14 +21315,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 85,
+          lineNumber: 86,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TemplateAlertFunction, _extends({}, props, {
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 86,
+          lineNumber: 87,
           columnNumber: 9
         }
       }))), document.getElementById('a-dialog'));
@@ -21193,6 +21330,9 @@
   }
 
   const TemplateAlertFunction = props => {
+    const {
+      t
+    } = reactI18next.useTranslation('translation');
     const [open, setOpen] = React__default["default"].useState(true);
     const isMobileCss = props.isMobile && {
       minWidth: '100%',
@@ -21229,7 +21369,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 127,
+        lineNumber: 129,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -21246,14 +21386,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 128,
+        lineNumber: 130,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 139,
+        lineNumber: 141,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -21261,7 +21401,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 140,
+        lineNumber: 142,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -21269,7 +21409,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 141,
+        lineNumber: 143,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21280,7 +21420,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 144,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -21288,7 +21428,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 143,
+        lineNumber: 145,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21296,14 +21436,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 147,
+        lineNumber: 149,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 148,
+        lineNumber: 150,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21314,7 +21454,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 149,
+        lineNumber: 151,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21324,7 +21464,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 153,
+        lineNumber: 155,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21332,7 +21472,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 154,
+        lineNumber: 156,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21346,7 +21486,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 155,
+        lineNumber: 157,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21354,7 +21494,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 157,
+        lineNumber: 159,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21366,15 +21506,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 158,
+        lineNumber: 160,
         columnNumber: 17
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 170,
+        lineNumber: 172,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21390,15 +21530,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 173,
         columnNumber: 19
       }
-    }), props.labelCancel ? props.labelCancel : 'Batal')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
+    }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 185,
+        lineNumber: 187,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21413,13 +21553,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 186,
+        lineNumber: 188,
         columnNumber: 19
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')))))));
+    }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
   };
 
   function AlertDialog(props) {
+    const {
+      t
+    } = reactI18next.useTranslation('translation');
     const isMobileCss = props.isMobile && {
       minWidth: '100%',
       borderBottomLeftRadius: 0,
@@ -21438,7 +21581,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 217,
+        lineNumber: 220,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -21451,14 +21594,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 218,
+        lineNumber: 221,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 226,
+        lineNumber: 229,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -21466,7 +21609,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 227,
+        lineNumber: 230,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -21474,7 +21617,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 228,
+        lineNumber: 231,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21485,7 +21628,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 229,
+        lineNumber: 232,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -21493,7 +21636,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 230,
+        lineNumber: 233,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21501,14 +21644,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 234,
+        lineNumber: 237,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 238,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21519,7 +21662,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 236,
+        lineNumber: 239,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21529,7 +21672,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 243,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21537,7 +21680,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 241,
+        lineNumber: 244,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21551,7 +21694,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 242,
+        lineNumber: 245,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21559,7 +21702,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 244,
+        lineNumber: 247,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21574,15 +21717,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 245,
+        lineNumber: 248,
         columnNumber: 17
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 258,
+        lineNumber: 261,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21598,15 +21741,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 259,
+        lineNumber: 262,
         columnNumber: 19
       }
-    }), props.labelCancel ? props.labelCancel : 'Batal')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
+    }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 273,
+        lineNumber: 276,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21621,10 +21764,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 274,
+        lineNumber: 277,
         columnNumber: 19
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')))))));
+    }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
   }
   TemplateAlertFunction.propTypes = {
     title: PropTypes__default["default"].string.isRequired,
@@ -23855,7 +23998,6 @@
     fontWeight: 400,
     fontStyle: 'normal',
     textAlign: 'center',
-    width: 135,
     marginTop: '$spacing-02'
   });
   const IconCard = styled(Flex$1, {
@@ -23963,8 +24105,12 @@
     errorMessage,
     maxSizeMB,
     imageCompression,
-    hiddenToggleAspect
+    hiddenToggleAspect,
+    hiddenPreview
   }) => {
+    const {
+      t
+    } = reactI18next.useTranslation(['MajooUI/upload', 'translation']);
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
     const indexReplace = React.useRef(null);
@@ -24432,7 +24578,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 608,
+          lineNumber: 610,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -24442,10 +24588,10 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 609,
+          lineNumber: 611,
           columnNumber: 9
         }
-      }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
+      }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
     }
 
     const renderPicture = () => {
@@ -24458,7 +24604,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 619,
+              lineNumber: 621,
               columnNumber: 16
             }
           });
@@ -24470,7 +24616,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 622,
+            lineNumber: 624,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24480,7 +24626,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 625,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24489,10 +24635,10 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 626,
             columnNumber: 27
           }
-        }), /*#__PURE__*/React__default["default"].createElement(Box, {
+        }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'absolute',
             top: '50%',
@@ -24502,8 +24648,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 625,
-            columnNumber: 13
+            lineNumber: 628,
+            columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
@@ -24511,8 +24657,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 633,
-            columnNumber: 15
+            lineNumber: 636,
+            columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
           src: item.url,
@@ -24521,7 +24667,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 635,
+            lineNumber: 639,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24540,7 +24686,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 646,
+              lineNumber: 650,
               columnNumber: 16
             }
           });
@@ -24551,7 +24697,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 649,
+            lineNumber: 653,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24561,7 +24707,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 650,
+            lineNumber: 654,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24570,7 +24716,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 651,
+            lineNumber: 655,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24583,7 +24729,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 656,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24593,14 +24739,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 660,
+            lineNumber: 664,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 661,
+            lineNumber: 665,
             columnNumber: 17
           }
         }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -24608,7 +24754,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 662,
+            lineNumber: 666,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24623,10 +24769,10 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 663,
+            lineNumber: 667,
             columnNumber: 19
           }
-        }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
+        }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'absolute',
             top: '45%',
@@ -24636,8 +24782,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 678,
-            columnNumber: 13
+            lineNumber: 683,
+            columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "eye",
@@ -24645,15 +24791,15 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 686,
-            columnNumber: 15
+            lineNumber: 691,
+            columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
           disabled: disabled,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 688,
+            lineNumber: 694,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24669,7 +24815,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 705,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24683,7 +24829,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          lineNumber: 706,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -24709,7 +24855,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 701,
+          lineNumber: 707,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24717,17 +24863,17 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 714,
+          lineNumber: 720,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 715,
+          lineNumber: 721,
           columnNumber: 11
         }
-      }, "Berkas sedang diunggah")));
+      }, t('uploadingLabel', 'Berkas sedang diunggah'))));
     }
 
     function renderUpload() {
@@ -24737,7 +24883,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 723,
+          lineNumber: 729,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -24753,7 +24899,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 724,
+          lineNumber: 730,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -24765,21 +24911,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 741,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 736,
+          lineNumber: 742,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 738,
+          lineNumber: 744,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -24788,7 +24934,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 739,
+          lineNumber: 745,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -24796,7 +24942,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 740,
+          lineNumber: 746,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24806,14 +24952,17 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 742,
+          lineNumber: 748,
           columnNumber: 17
         }
-      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder !== null && placeholder !== void 0 ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+        css: {
+          width: width - 5
+        },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 749,
+          lineNumber: 755,
           columnNumber: 19
         }
       }, error));
@@ -24824,7 +24973,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 762,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -24832,7 +24981,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 757,
+          lineNumber: 763,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24840,7 +24989,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 758,
+          lineNumber: 764,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -24853,10 +25002,10 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 766,
           columnNumber: 9
         }
-      }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
         css: {
           padding: '$spacing-03',
           overflowY: 'auto',
@@ -24865,7 +25014,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 769,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -24876,7 +25025,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 770,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24890,14 +25039,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 765,
+          lineNumber: 771,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 774,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24909,14 +25058,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 775,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 771,
+          lineNumber: 777,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -24924,7 +25073,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 779,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -24936,7 +25085,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 774,
+          lineNumber: 780,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24944,7 +25093,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 781,
+          lineNumber: 787,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -24953,18 +25102,22 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 782,
+          lineNumber: 788,
           columnNumber: 15
         }
-      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      }, t('label.cancel', 'Batal', {
+        ns: 'translation'
+      })), /*#__PURE__*/React__default["default"].createElement(Button$4, {
         onClick: handleCrop,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 785,
+          lineNumber: 791,
           columnNumber: 15
         }
-      }, "Simpan")))));
+      }, t('save', 'Simpan', {
+        ns: 'translation'
+      }))))));
     }
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24977,7 +25130,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 794,
+        lineNumber: 800,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -24986,7 +25139,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 797,
+        lineNumber: 803,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -24997,7 +25150,6 @@
     fileList: [],
     height: 140,
     width: 140,
-    cropperTitle: 'Potong Gambar',
     showCropper: true,
     tokenKey: 'Token',
     reqKey: 'file',
@@ -25179,7 +25331,12 @@
     /**
      Callback to handle before crop image.
      */
-    onBeforeCrop: PropTypes__default["default"].func
+    onBeforeCrop: PropTypes__default["default"].func,
+
+    /**
+     Hidden preview icon in upload.
+     */
+    hiddenPreview: PropTypes__default["default"].bool
   };
   Upload.displayName = 'Upload';
 
@@ -28782,33 +28939,36 @@
     const height = totalNavItems * 24 + (totalNavItems - 1) * 16;
 
     for (let i = 1; i <= totalNavItems; i += 1) {
+      var _data;
+
       const isActive = props.currentStep === i;
-      const isComplete = props.isComplete[i - 1]; // eslint-disable-next-line no-lone-blocks
+      const isComplete = props.isComplete[i - 1];
+      const isAdditional = (_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.additional; // eslint-disable-next-line no-lone-blocks
 
       {
-        var _data$title, _data2, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12;
+        var _data$title, _data3, _data4, _data5, _data6, _data7, _data8, _data9, _data$title2, _data10, _data11, _data12, _data13, _data14;
 
         !isMobile ? stepItems.push( /*#__PURE__*/React__default["default"].createElement(StepperItem, {
           css: {
             opacity: data[i - 1].hidden ? 0 : undefined,
-            color: isActive ? '$textGreen' : isComplete ? '$gray900' : '$textDisable',
+            color: isActive ? '$textGreen' : isComplete ? '$gray900' : isAdditional ? '$textPrimary' : '$textDisable',
             cursor: props.totalSteps !== props.currentStep ? 'pointer' : 'auto'
           },
           align: "center",
           key: `step-${i}`,
           onClick: () => {
-            var _data;
+            var _data2;
 
-            if (props.onNavClicked && !((_data = data[i - 1]) !== null && _data !== void 0 && _data.disabled)) props.onNavClicked(i);
+            if (props.onNavClicked && !((_data2 = data[i - 1]) !== null && _data2 !== void 0 && _data2.disabled) || isAdditional) props.onNavClicked(i);
 
-            if (!forbidClickNav && isComplete && !isHide) {
+            if (!forbidClickNav && isComplete && !isHide || isAdditional) {
               props.goToStep(i);
             }
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 106,
+            lineNumber: 107,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -28818,7 +28978,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 121,
+            lineNumber: 128,
             columnNumber: 15
           }
         }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28830,16 +28990,16 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
+            lineNumber: 130,
             columnNumber: 17
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data2 = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data2), ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data3 = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data3), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
+          label: (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 127,
+            lineNumber: 134,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28851,18 +29011,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 135,
             columnNumber: 19
           }
-        })), ((_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data6 = data[i - 1]) !== null && _data6 !== void 0 && _data6.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data7 = data[i - 1]) !== null && _data7 !== void 0 && _data7.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 132,
+            lineNumber: 139,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28871,7 +29031,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 133,
+            lineNumber: 140,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28883,7 +29043,8 @@
             position: 'relative',
             userSelect: 'none',
             fontSize: '12px',
-            textAlign: '-webkit-center'
+            textAlign: '-webkit-center',
+            display: ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.disabled) && 'none'
           },
           onClick: () => {
             if (props.onNavClicked) props.onNavClicked(i);
@@ -28895,7 +29056,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 141,
+            lineNumber: 148,
             columnNumber: 13
           }
         }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28904,7 +29065,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 159,
+            lineNumber: 167,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28915,12 +29076,12 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data7 = data[i - 1]) !== null && _data7 !== void 0 && _data7.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 161,
+            lineNumber: 169,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28930,17 +29091,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 173,
+            lineNumber: 181,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data8) : ''), isActive && ((_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data10 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data10) : ''), isActive && ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.tooltipsContents,
+          label: (_data12 = data[i - 1]) === null || _data12 === void 0 ? void 0 : _data12.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 177,
+            lineNumber: 185,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28949,19 +29110,19 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 178,
+            lineNumber: 186,
             columnNumber: 19
           }
-        })), isActive && ((_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data12 = data[i - 1]) !== null && _data12 !== void 0 && _data12.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data14 = data[i - 1]) !== null && _data14 !== void 0 && _data14.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 182,
+            lineNumber: 190,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28970,7 +29131,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 183,
+            lineNumber: 191,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -28990,7 +29151,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 196,
+            lineNumber: 204,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29003,7 +29164,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 197,
+            lineNumber: 205,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(Card, {
@@ -29015,14 +29176,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 198,
+            lineNumber: 206,
             columnNumber: 13
           }
         }, child), /*#__PURE__*/React__default["default"].createElement(Box, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 207,
+            lineNumber: 215,
             columnNumber: 13
           }
         }, typeof (props === null || props === void 0 ? void 0 : props.appendContent) === 'function' ? props === null || props === void 0 ? void 0 : (_props$appendContent = props.appendContent) === null || _props$appendContent === void 0 ? void 0 : _props$appendContent.call(props) : props === null || props === void 0 ? void 0 : props.appendContent)));
@@ -29030,7 +29191,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 193,
+        lineNumber: 201,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepperList, {
@@ -29048,7 +29209,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 212,
+        lineNumber: 220,
         columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -29060,7 +29221,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 228,
+        lineNumber: 236,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29073,7 +29234,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 229,
+        lineNumber: 237,
         columnNumber: 13
       }
     }, stepItems)) : stepItems));
@@ -29174,7 +29335,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 327,
+        lineNumber: 335,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -29197,7 +29358,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 328,
+        lineNumber: 336,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -29211,7 +29372,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 352,
+          lineNumber: 360,
           columnNumber: 13
         }
       }),
@@ -29221,7 +29382,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 346,
+        lineNumber: 354,
         columnNumber: 9
       }
     }), props.children)));
@@ -29766,6 +29927,7 @@
     color: '$textRed !important'
   });
   function EditableTableMobile(props) {
+    var t = reactI18next.useTranslation('translation').t;
     var instance = props.instance,
         emptyDataMessage = props.emptyDataMessage,
         showCheckbox = props.showCheckbox,
@@ -29995,7 +30157,7 @@
                   heading: "shortContentRegular",
                   color: "secondary"
                 }, {
-                  children: emptyDataMessage || 'Tidak ada data'
+                  children: emptyDataMessage || t('label.noData', 'Tidak ada data')
                 }), void 0)
               }), void 0)
             }), void 0)
@@ -30305,6 +30467,7 @@
         keyId = _a === void 0 ? 'id' : _a,
         selectedIds = props.selectedIds,
         onExpand = props.onExpand;
+    var t = reactI18next.useTranslation('translation').t;
 
     var _b = React.useState(null),
         selectedIndex = _b[0],
@@ -30551,7 +30714,7 @@
                   heading: "shortContentRegular",
                   color: "secondary"
                 }, {
-                  children: emptyDataMessage || 'Tidak ada data'
+                  children: emptyDataMessage || t('label.noData', 'Tidak ada data')
                 }), void 0)
               }), void 0)
             }), void 0)
@@ -34962,7 +35125,8 @@
   exports.YESTERDAY = YESTERDAY;
   exports.addOnCellStyle = addOnCellStyle;
   exports.advancePickerDate = advancePickerDate;
-  exports.advancePickerOptions = advancePickerOptions;
+  exports.advancePickerOptionsEn = advancePickerOptionsEn;
+  exports.advancePickerOptionsId = advancePickerOptionsId;
   exports.defaultFetchDataParams = defaultFetchDataParams;
   exports.pickerReducer = pickerReducer;
   exports.useListOption = useListOption;