@majoo-ui/react 1.55.4 → 1.55.6

package/index.esm.js

@@ -18,6 +18,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
+import { useTranslation } from 'react-i18next';
 import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -3388,15 +3389,15 @@ function MajooProvider({
     __self: this,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 15,
-      columnNumber: 10
+      lineNumber: 11,
+      columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 16,
-      columnNumber: 5
+      lineNumber: 12,
+      columnNumber: 7
     }
   }, children));
 }
@@ -8678,6 +8679,12 @@ const OptionWrapper$2 = styled('div', {
         left: '0',
         transform: 'translate(0, -100%)'
       }
+    },
+    withFooter: {
+      true: {
+        float: 'unset',
+        position: 'unset'
+      }
     }
   },
   defaultVariants: {
@@ -8703,6 +8710,14 @@ const SelectItem = styled('div', {
     borderBottom: '1px solid $bgBorder'
   }
 });
+const StyledFooter = styled('div', {
+  position: 'sticky',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.1)'
+});
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
   display: 'flex',
@@ -8801,9 +8816,10 @@ function InputSelect(_a) {
     onSearch,
     isLoading = false,
     showTooltip = false,
-    css
+    css,
+    renderFooter
   } = _a,
-      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"]);
+      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"]);
 
   const [options, setOptions] = useState([]);
   const [item, setItem] = useState([]);
@@ -9001,84 +9017,102 @@ function InputSelect(_a) {
           }, {
             children: "Loading...."
           }), void 0)
-        }), void 0), jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({
-          ref: scrollerRef
-        }, {
-          suppressRefError: true
-        }), {
-          css: {
-            display: isOpen ? 'block' : 'none',
-            zIndex: '$popover'
-          },
-          placement: placement
-        }, {
-          children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
+        }), void 0), jsx(ConditionalWrapper, Object.assign({
+          condition: renderFooter && typeof renderFooter === 'function',
+          wrapper: child => jsxs(Box, Object.assign({
             css: {
-              position: 'sticky',
-              top: 0,
-              zIndex: '$sticky',
-              padding: '$spacing-04 $spacing-05 0',
-              backgroundColor: '$bgWhite'
+              position: 'absolute',
+              float: 'left',
+              display: isOpen ? 'block' : 'none',
+              zIndex: '$popover',
+              width: '100%'
             }
           }, {
-            children: jsx(InputSearchbox, {
-              size: 'sm',
-              onChange: handleInputValue,
-              placeholder: searchPlaceholder
-            }, void 0)
-          }), void 0), item.length > 0 || isLoading ? jsx(ConditionalWrapper, Object.assign({
-            condition: !!fetchData && item.length > 0,
-            wrapper: children => jsx(InfiniteScroll, Object.assign({
-              loadMore: _ => {
-                if (!isLoading && fetchData) fetchData({
-                  query
-                });
-              },
-              hasMore: true,
-              threshold: 5,
-              useWindow: false
-            }, {
-              children: children
-            }), void 0)
+            children: [child, renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+              children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+            }, void 0)]
+          }), void 0)
+        }, {
+          children: jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({
+            ref: scrollerRef
           }, {
-            children: jsx(SelectOption, {
-              children: item.map((item, index) => {
-                var _a;
-
-                return /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
-                  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) : jsx(SelectOption, {
-            children: jsxs(StyledDiv$2, {
-              children: [jsx("div", Object.assign({
-                style: {
-                  marginRight: '6px'
-                }
+            suppressRefError: true
+          }), {
+            css: {
+              display: isOpen ? 'block' : 'none',
+              zIndex: '$popover'
+            },
+            withFooter: renderFooter && typeof renderFooter === 'function',
+            placement: placement
+          }, {
+            children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
+              css: {
+                position: 'sticky',
+                top: 0,
+                zIndex: '$sticky',
+                padding: '$spacing-04 $spacing-05 0',
+                backgroundColor: '$bgWhite'
+              }
+            }, {
+              children: jsx(InputSearchbox, {
+                size: 'sm',
+                onChange: handleInputValue,
+                placeholder: searchPlaceholder
+              }, void 0)
+            }), void 0), item.length > 0 || isLoading ? jsx(ConditionalWrapper, Object.assign({
+              condition: !!fetchData && item.length > 0,
+              wrapper: children => jsx(InfiniteScroll, Object.assign({
+                loadMore: _ => {
+                  if (!isLoading && fetchData) fetchData({
+                    query
+                  });
+                },
+                hasMore: true,
+                threshold: 5,
+                useWindow: false
               }, {
-                children: jsx(CircleInfoOutline, {
-                  size: "16px",
-                  color: colors$4.iconDisable,
+                children: children
+              }), void 0)
+            }, {
+              children: jsx(SelectOption, {
+                children: item.map((item, index) => {
+                  var _a;
+
+                  return /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
+                    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) : jsx(SelectOption, {
+              children: jsxs(StyledDiv$2, {
+                children: [jsx("div", Object.assign({
                   style: {
-                    verticalAlign: 'text-bottom'
+                    marginRight: '6px'
                   }
-                }, void 0)
-              }), void 0), "Item tidak ditemukan"]
-            }, void 0)
-          }, void 0)]
+                }, {
+                  children: jsx(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);
     }
@@ -10654,8 +10688,8 @@ function InputResourceList({
   disabled = false,
   onItemCheck,
   onItemUncheck,
-  searchPlaceholder = 'Cari ...',
-  counterFooterText = 'kategori dipilih',
+  searchPlaceholder,
+  counterFooterText,
   isLoading = false,
   enabledItems,
   emptyDataMessage,
@@ -10667,6 +10701,9 @@ function InputResourceList({
   title,
   hideSelectAll
 }) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputResourceList', 'translation']);
   const [checkedResources, setCheckedResources] = useState([]);
   const [query, setQuery] = useState();
   const [sortType, setSortType] = useState('asc');
@@ -10838,7 +10875,9 @@ function InputResourceList({
   }, {
     children: [onQueryChange && jsx(InputSearchbox, {
       size: "lg",
-      placeholder: searchPlaceholder,
+      placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...', {
+        ns: 'translation'
+      }),
       onChange: debounce(query => {
         setQuery(query);
         onQueryChange(query);
@@ -10862,7 +10901,7 @@ function InputResourceList({
       }, void 0), jsx(Heading, Object.assign({
         heading: "headerTable"
       }, {
-        children: title || 'Urutkan'
+        children: title || t('defaultTitle', 'Urutkan')
       }), void 0), jsx(SortingIcon, Object.assign({
         onClick: toggleSort
       }, {
@@ -10913,7 +10952,9 @@ function InputResourceList({
           align: "center",
           color: "secondary"
         }, {
-          children: emptyDataMessage || 'Tidak ada data'
+          children: emptyDataMessage || t('label.noData', 'Tidak ada data', {
+            ns: 'translation'
+          })
         }), void 0)
       }), void 0), jsx(ConditionalWrapper, Object.assign({
         condition: !!fetchData && data.length > 0,
@@ -10943,7 +10984,7 @@ function InputResourceList({
         variant: "helper",
         color: disabled ? 'disable' : 'green'
       }, {
-        children: `${(value === null || value === void 0 ? void 0 : value.length) || checkedResources.length} ${counterFooterText}`
+        children: `${(value === null || value === void 0 ? void 0 : value.length) || checkedResources.length} ${counterFooterText || t('counterFooterText', 'kategori dipilih')}`
       }), void 0)
     }), void 0)]
   }), void 0);
@@ -14891,8 +14932,10 @@ const AdvancedOption = ({
   }), 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;
@@ -14908,9 +14951,7 @@ const yearRangesList = rangeStart => {
 };
 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(date).locale(locale).format('D MMMM YYYY');
 
 const DateNumber = styled('div', {
   display: 'inline-flex',
@@ -15190,6 +15231,10 @@ const CalendarBox = ({
   maxDate,
   allowReset
 }) => {
+  const {
+    t,
+    i18n
+  } = useTranslation(['MajooUI/datePicker', 'translation']);
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
     selectedMonth: Number(calendars[0].month),
@@ -15197,6 +15242,9 @@ const CalendarBox = ({
     selectedYearRange: getCalendarStartYear(calendars[0].year),
     selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
   });
+  const language = i18n.language;
+  const monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+  const weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
   useEffect(() => {
     const selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
 
@@ -15494,7 +15542,7 @@ const CalendarBox = ({
             fontSize: '$short-content-regular'
           }
         }, {
-          children: selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : !selected || selected.length <= 0 ? 'Tanggal belum dipilih' : toDateFormat(selected[0])
+          children: selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : !selected || selected.length <= 0 ? t('notSelectedDateText', 'Tanggal belum dipilih') : toDateFormat(selected[0], language)
         }), void 0), jsxs(Flex$1, Object.assign({
           gap: 3
         }, {
@@ -15517,7 +15565,9 @@ const CalendarBox = ({
             disabled: disabled,
             size: "sm"
           }, {
-            children: "Batal"
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
           }), void 0), jsx(Button$4, Object.assign({
             css: {
               fontWeight: 600
@@ -15526,7 +15576,9 @@ const CalendarBox = ({
             disabled: disabled || !selected || selected.length <= 1,
             size: "sm"
           }, {
-            children: "Proses"
+            children: t('label.process', 'Proses', {
+              ns: 'translation'
+            })
           }), void 0)]
         }), void 0)]
       }), void 0)]
@@ -15804,6 +15856,10 @@ const MobileCalendarBox = ({
   maxDate,
   allowReset
 }) => {
+  const {
+    t,
+    i18n
+  } = useTranslation('MajooUI/datePicker');
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
     selectedMonth: Number(calendars[0].month),
@@ -15811,6 +15867,9 @@ const MobileCalendarBox = ({
     selectedYearRange: getCalendarStartYear(calendars[0].year),
     selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
   });
+  const language = i18n.language;
+  const monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+  const weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
   const [expandAdvanceView, setExpandAdvanceView] = useState(false);
   useEffect(() => {
     const selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
@@ -16067,7 +16126,7 @@ const MobileCalendarBox = ({
               color: '$textPrimary'
             }
           }, {
-            children: "Pilih Rentang Waktu"
+            children: t('selectTimeRangeText', 'Pilih Rentang Waktu')
           }), void 0), expandAdvanceView ? jsx(ChevronDownOutline, {}, void 0) : jsx(ChevronUpOutline, {}, void 0)]
         }), void 0), expandAdvanceView && advanceView, jsx(Separator$2, {
           css: {
@@ -16081,7 +16140,7 @@ const MobileCalendarBox = ({
         variant: "status",
         color: selected && selected.length > 1 ? 'primary' : 'disable'
       }, {
-        children: selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'
+        children: selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
       }), void 0), jsxs(Flex$1, Object.assign({
         gap: 3
       }, {
@@ -16987,7 +17046,7 @@ const THIS_WEEK = 'THIS_WEEK';
 const LAST_MONTH = 'LAST_MONTH';
 const LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
 const THIS_MONTH = 'THIS_MONTH';
-const advancePickerOptions = [{
+const advancePickerOptionsId = [{
   label: 'Hari Ini',
   value: TODAY
 }, {
@@ -17012,6 +17071,31 @@ const advancePickerOptions = [{
   label: 'Bulan Ini',
   value: THIS_MONTH
 }];
+const 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) {
   const tempDate = new Date();
   const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
@@ -17372,15 +17456,13 @@ function InputDateRangePicker(props) {
   }), void 0);
 }
 
-moment.locale('id');
-
 const getInputPickerValue = (type, date, isTimePicker) => {
   if (!date) return '';
 
   if (type === SINGLE_PICKER) {
     return `${moment(date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY')}`;
   } else {
-    return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
+    return `${moment(date[0]).format('D MMM YYYY')} - ${moment(date[1]).format('D MMM YYYY')}`;
   }
 };
 
@@ -17388,7 +17470,7 @@ function InputDatePicker({
   type = SINGLE_PICKER,
   showRangeControl,
   rangePickerType = WEEKLY,
-  placeholder = 'Pilih Tanggal',
+  placeholder,
   size = 'sm',
   disabled,
   onChange,
@@ -17406,8 +17488,14 @@ function InputDatePicker({
   isInvalid,
   allowReset
 }) {
+  const {
+    t,
+    i18n
+  } = useTranslation('MajooUI/datePicker');
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  const language = i18n.language;
+  moment.locale(language);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -17468,7 +17556,7 @@ function InputDatePicker({
         children: [jsx(InputLeftElement, {
           children: jsx(CalendarOutline, {}, void 0)
         }, void 0), 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: () => {},
@@ -17479,7 +17567,7 @@ function InputDatePicker({
     } else {
       return jsx(InputDateRangePicker, {
         value: getInputPickerValue(ADVANCE_PICKER, selectedDate, false),
-        placeholder: placeholder,
+        placeholder: placeholder || t('datePickerPlaceholder', 'Pilih Tanggal'),
         disabled: disabled,
         readOnly: readOnly,
         size: size,
@@ -17516,7 +17604,7 @@ function InputDatePicker({
 
     return jsx(DatePicker, {
       advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
-        options: advancePickerOptions,
+        options: language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn,
         disabled: disabled,
         optionHandler: value => {
           dispatch({
@@ -17681,7 +17769,7 @@ function CustomDatePicker({
   const renderDatePicker = () => {
     return jsx(DatePicker, {
       advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
-        options: advancePickerOptions,
+        options: advancePickerOptionsId,
         disabled: disabled,
         optionHandler: value => {
           dispatch({
@@ -17795,7 +17883,7 @@ const PageButton = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 34,
+      lineNumber: 35,
       columnNumber: 5
     }
   }));
@@ -17806,6 +17894,9 @@ const PaginationButton = ({
   totalPages,
   onSelect
 }) => {
+  const {
+    t
+  } = useTranslation('MajooUI/pagination');
   const isLg = useMediaQuery('(max-width: 800px)');
 
   const handleSelectPage = page => {
@@ -17873,7 +17964,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 106,
+      lineNumber: 108,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -17882,7 +17973,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 112,
+      lineNumber: 114,
       columnNumber: 7
     }
   }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -17893,7 +17984,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 116,
+      lineNumber: 118,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -17901,7 +17992,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 117,
+      lineNumber: 119,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -17912,10 +18003,10 @@ const PaginationButton = ({
     __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.createElement(PageButton, {
       key: index.toString(),
       isActive: page === currentPage,
@@ -17923,7 +18014,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 132,
+        lineNumber: 134,
         columnNumber: 13
       }
     }, page);
@@ -17935,10 +18026,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 143,
+      lineNumber: 145,
       columnNumber: 13
     }
-  }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
     type: "button",
     buttonType: "secondary",
     disabled: currentPage === totalPages,
@@ -17946,7 +18037,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 152,
+      lineNumber: 154,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -17954,7 +18045,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 158,
+      lineNumber: 160,
       columnNumber: 17
     }
   })))), totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -17967,7 +18058,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 169,
+      lineNumber: 171,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -17980,7 +18071,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 177,
+      lineNumber: 179,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -17993,10 +18084,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 178,
+      lineNumber: 180,
       columnNumber: 15
     }
-  }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputNumber, {
+  }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default.createElement(InputNumber, {
     ref: inputPageRef,
     isAllowed: ({
       floatValue
@@ -18020,7 +18111,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 181,
+      lineNumber: 183,
       columnNumber: 15
     }
   }))));
@@ -18056,13 +18147,16 @@ function PaginationInfo(_ref) {
   } = _ref;
       _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+  const {
+    t
+  } = useTranslation('MajooUI/pagination');
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
     gap: 3,
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 28,
+      lineNumber: 30,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18071,21 +18165,21 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 29,
+      lineNumber: 31,
       columnNumber: 7
     }
-  }, "Tampilkan:"), /*#__PURE__*/React__default.createElement(Popover, {
+  }, t('showingText', 'Tampilkan:')), /*#__PURE__*/React__default.createElement(Popover, {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 32,
+      lineNumber: 34,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 33,
+      lineNumber: 35,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(LimitContainer, {
@@ -18093,7 +18187,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 34,
+      lineNumber: 36,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18101,7 +18195,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 35,
+      lineNumber: 37,
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -18109,7 +18203,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 36,
+      lineNumber: 38,
       columnNumber: 13
     }
   }))), /*#__PURE__*/React__default.createElement(PopoverContent, {
@@ -18117,7 +18211,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -18130,7 +18224,7 @@ function PaginationInfo(_ref) {
     __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.createElement(PopoverClose, {
@@ -18140,7 +18234,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 49,
+      lineNumber: 51,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18148,7 +18242,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 54,
+      lineNumber: 56,
       columnNumber: 17
     }
   }, limit.toString())))))), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18157,10 +18251,14 @@ function PaginationInfo(_ref) {
     __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"];
@@ -18391,7 +18489,7 @@ const TableRow$4 = styled('tr', {
   }
 });
 const TableCell$4 = styled('td', {
-  height: '40px',
+  height: '48px',
   fontSize: '$short-content-regular',
   lineHeight: '$short-content-regular',
   letterSpacing: '$short-content-regular',
@@ -18410,7 +18508,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   hiddenColumns,
   css,
   customRowsStyle,
-  cellAlign
+  cellAlign,
+  renderContextMenu
 }, ref) => {
   const {
     getTableProps,
@@ -18439,11 +18538,11 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
     }
   };
 
-  return jsx(TableContainer$4, Object.assign({
+  return jsxs(TableContainer$4, Object.assign({
     css: css,
     ref: ref
   }, {
-    children: infiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
+    children: [infiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$3, {
         children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
           children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
@@ -18473,7 +18572,14 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         }), void 0))
       }, void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
         children: page.map(row => {
+          var _a;
+
           prepareRow(row);
+          const isContextMenu = (_a = row.cells.filter(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;
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
           let customStyle = {};
 
@@ -18494,6 +18600,30 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               css: customStyle
             }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
+                var _a;
+
+                const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+
+                const renderCell = () => jsx(ConditionalWrapper, Object.assign({
+                  condition: isContextMenu && !exceptionId,
+                  wrapper: children => jsx(ContextMenuTrigger, Object.assign({
+                    id: "context-menu-table",
+                    triggerSide: "left"
+                  }, {
+                    children: jsx(Box, Object.assign({
+                      css: {
+                        cursor: 'pointer',
+                        width: 'calc(100vw - 120px)'
+                      }
+                    }, {
+                      children: children
+                    }), void 0)
+                  }), void 0)
+                }, {
+                  children: cell.render('Cell')
+                }), void 0);
+
                 return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
@@ -18509,8 +18639,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       cursor: 'pointer'
                     }
                   }, {
-                    children: [cell.render('Cell'), row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)]
-                  }), void 0) : cell.render('Cell')
+                    children: [renderCell(), row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(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 ? jsx(TableRow$4, {
@@ -18578,7 +18708,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
           }), void 0)
         }, void 0)
       }, void 0)]
-    }), void 0))
+    }), void 0)), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
   }), void 0);
 });
 
@@ -18887,7 +19017,7 @@ const formattingData = (rawData, groupKey) => {
   return rawData;
 };
 
-const defaultEmptyDataProps = {
+const defaultEmptyDataProps = t => ({
   doodleImage: jsx(EmptyDataDoodle, {}, void 0),
   title: jsx(Paragraph, Object.assign({
     paragraph: "shortContentBold",
@@ -18897,16 +19027,17 @@ const defaultEmptyDataProps = {
       marginTop: '$spacing-05'
     }
   }, {
-    children: "Data tidak tersedia"
+    children: t('dataNotAvailableTitle', 'Data tidak tersedia')
   }), void 0),
   description: jsxs(Paragraph, Object.assign({
     paragraph: "shortContentRegular",
     color: "secondary",
     align: "center"
   }, {
-    children: ["Belum ada data yang dapat ditampilkan", jsx("br", {}, void 0), "di halaman ini"]
+    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
   }), void 0)
-};
+});
+
 function Table({
   columns,
   data: rawData,
@@ -18918,7 +19049,7 @@ function Table({
   hideDataInfo = false,
   rowsPerPageOptions = [10, 25, 50, 100],
   emptyDataMessage = 'Tidak ada data',
-  customEmptyDataProps = defaultEmptyDataProps,
+  customEmptyDataProps: emptyDataProps,
   isLoading = false,
   css,
   headerCss,
@@ -18940,6 +19071,10 @@ function Table({
   const [dataRow, setDataRow] = useState({});
   const [tableScrollPosition, setTableScrollPosition] = useState('start');
   const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
 
   const getInitialState = () => {
     const initialState = {};
@@ -19368,7 +19503,8 @@ function Table({
       hiddenColumns: hiddenColumns,
       css: css,
       customRowsStyle: customRowsStyle,
-      cellAlign: cellAlign
+      cellAlign: cellAlign,
+      renderContextMenu: renderContextMenu
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -20765,7 +20901,7 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 74,
+      lineNumber: 75,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
@@ -20775,14 +20911,14 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 75,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 76,
+      lineNumber: 77,
       columnNumber: 7
     }
   }), children));
@@ -20796,14 +20932,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 85,
+        lineNumber: 86,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -20811,6 +20947,9 @@ function AlertDialogFunction(properties) {
 }
 
 const TemplateAlertFunction = props => {
+  const {
+    t
+  } = useTranslation('translation');
   const [open, setOpen] = React__default.useState(true);
   const isMobileCss = props.isMobile && {
     minWidth: '100%',
@@ -20847,7 +20986,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 127,
+      lineNumber: 129,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -20864,14 +21003,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 128,
+      lineNumber: 130,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 139,
+      lineNumber: 141,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -20879,7 +21018,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 140,
+      lineNumber: 142,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -20887,7 +21026,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 141,
+      lineNumber: 143,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -20898,7 +21037,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 144,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -20906,7 +21045,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 143,
+      lineNumber: 145,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -20914,14 +21053,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 147,
+      lineNumber: 149,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 148,
+      lineNumber: 150,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -20932,7 +21071,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 149,
+      lineNumber: 151,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -20942,7 +21081,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 153,
+      lineNumber: 155,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -20950,7 +21089,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 154,
+      lineNumber: 156,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -20964,7 +21103,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 155,
+      lineNumber: 157,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -20972,7 +21111,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 157,
+      lineNumber: 159,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -20984,15 +21123,15 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 158,
+      lineNumber: 160,
       columnNumber: 17
     }
-  }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 170,
+      lineNumber: 172,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21008,15 +21147,15 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 171,
+      lineNumber: 173,
       columnNumber: 19
     }
-  }), props.labelCancel ? props.labelCancel : 'Batal')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
+  }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 185,
+      lineNumber: 187,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21031,13 +21170,16 @@ const TemplateAlertFunction = props => {
     __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
+  } = useTranslation('translation');
   const isMobileCss = props.isMobile && {
     minWidth: '100%',
     borderBottomLeftRadius: 0,
@@ -21056,7 +21198,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 217,
+      lineNumber: 220,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -21069,14 +21211,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 218,
+      lineNumber: 221,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 226,
+      lineNumber: 229,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -21084,7 +21226,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 227,
+      lineNumber: 230,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -21092,7 +21234,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 228,
+      lineNumber: 231,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21103,7 +21245,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 229,
+      lineNumber: 232,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -21111,7 +21253,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 230,
+      lineNumber: 233,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21119,14 +21261,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 234,
+      lineNumber: 237,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 238,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -21137,7 +21279,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 236,
+      lineNumber: 239,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -21147,7 +21289,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 243,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21155,7 +21297,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 241,
+      lineNumber: 244,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21169,7 +21311,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 242,
+      lineNumber: 245,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21177,7 +21319,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 244,
+      lineNumber: 247,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21192,15 +21334,15 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 245,
+      lineNumber: 248,
       columnNumber: 17
     }
-  }), props.labelConfirm ? props.labelConfirm : 'Ya, Lanjutkan')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 258,
+      lineNumber: 261,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21216,15 +21358,15 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 259,
+      lineNumber: 262,
       columnNumber: 19
     }
-  }), props.labelCancel ? props.labelCancel : 'Batal')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
+  }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 273,
+      lineNumber: 276,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21239,10 +21381,10 @@ function AlertDialog(props) {
     __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.string.isRequired,
@@ -23439,7 +23581,6 @@ const ErrorMessage = styled('p', {
   fontWeight: 400,
   fontStyle: 'normal',
   textAlign: 'center',
-  width: 135,
   marginTop: '$spacing-02'
 });
 const IconCard = styled(Flex$1, {
@@ -23547,8 +23688,12 @@ const Upload = ({
   errorMessage,
   maxSizeMB,
   imageCompression,
-  hiddenToggleAspect
+  hiddenToggleAspect,
+  hiddenPreview
 }) => {
+  const {
+    t
+  } = useTranslation(['MajooUI/upload', 'translation']);
   const isFile = listType === 'file';
   const imgRef = useRef(null);
   const indexReplace = useRef(null);
@@ -24016,7 +24161,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 608,
+        lineNumber: 610,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -24026,10 +24171,10 @@ const Upload = ({
       __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 = () => {
@@ -24042,7 +24187,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 619,
+            lineNumber: 621,
             columnNumber: 16
           }
         });
@@ -24054,7 +24199,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 622,
+          lineNumber: 624,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24064,7 +24209,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 625,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24073,10 +24218,10 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 626,
           columnNumber: 27
         }
-      }), /*#__PURE__*/React__default.createElement(Box, {
+      }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '50%',
@@ -24086,8 +24231,8 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
-          columnNumber: 13
+          lineNumber: 628,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "eye",
@@ -24095,8 +24240,8 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 633,
-          columnNumber: 15
+          lineNumber: 636,
+          columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
@@ -24105,7 +24250,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 635,
+          lineNumber: 639,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24124,7 +24269,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 646,
+            lineNumber: 650,
             columnNumber: 16
           }
         });
@@ -24135,7 +24280,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 653,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24145,7 +24290,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 654,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24154,7 +24299,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 655,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -24167,7 +24312,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 652,
+          lineNumber: 656,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24177,14 +24322,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 660,
+          lineNumber: 664,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -24192,7 +24337,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 666,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -24207,10 +24352,10 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 667,
           columnNumber: 19
         }
-      }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
+      }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '45%',
@@ -24220,8 +24365,8 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 678,
-          columnNumber: 13
+          lineNumber: 683,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "eye",
@@ -24229,15 +24374,15 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 686,
-          columnNumber: 15
+          lineNumber: 691,
+          columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
         disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 688,
+          lineNumber: 694,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24253,7 +24398,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 705,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24267,7 +24412,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 706,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -24293,7 +24438,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 701,
+        lineNumber: 707,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -24301,17 +24446,17 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 714,
+        lineNumber: 720,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__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() {
@@ -24321,7 +24466,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 723,
+        lineNumber: 729,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -24337,7 +24482,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 724,
+        lineNumber: 730,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -24349,21 +24494,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 741,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 736,
+        lineNumber: 742,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 738,
+        lineNumber: 744,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -24372,7 +24517,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 739,
+        lineNumber: 745,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -24380,7 +24525,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 740,
+        lineNumber: 746,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -24390,14 +24535,17 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
+    }, placeholder !== null && placeholder !== void 0 ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+      css: {
+        width: width - 5
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 749,
+        lineNumber: 755,
         columnNumber: 19
       }
     }, error));
@@ -24408,7 +24556,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 756,
+        lineNumber: 762,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -24416,7 +24564,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -24424,7 +24572,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 758,
+        lineNumber: 764,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -24437,10 +24585,10 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 766,
         columnNumber: 9
       }
-    }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
+    }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
       css: {
         padding: '$spacing-03',
         overflowY: 'auto',
@@ -24449,7 +24597,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 769,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -24460,7 +24608,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 770,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -24474,14 +24622,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 765,
+        lineNumber: 771,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 774,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24493,14 +24641,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 775,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 771,
+        lineNumber: 777,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -24508,7 +24656,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 779,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -24520,7 +24668,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 774,
+        lineNumber: 780,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24528,7 +24676,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 787,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -24537,18 +24685,22 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 782,
+        lineNumber: 788,
         columnNumber: 15
       }
-    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$4, {
+    }, t('label.cancel', 'Batal', {
+      ns: 'translation'
+    })), /*#__PURE__*/React__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.createElement(Flex$1, {
@@ -24561,7 +24713,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 794,
+      lineNumber: 800,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -24570,7 +24722,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 797,
+      lineNumber: 803,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -24581,7 +24733,6 @@ Upload.defaultProps = {
   fileList: [],
   height: 140,
   width: 140,
-  cropperTitle: 'Potong Gambar',
   showCropper: true,
   tokenKey: 'Token',
   reqKey: 'file',
@@ -24763,7 +24914,12 @@ Upload.propTypes = {
   /**
    Callback to handle before crop image.
    */
-  onBeforeCrop: PropTypes.func
+  onBeforeCrop: PropTypes.func,
+
+  /**
+   Hidden preview icon in upload.
+   */
+  hiddenPreview: PropTypes.bool
 };
 Upload.displayName = 'Upload';
 
@@ -28352,33 +28508,36 @@ const Navigation = props => {
   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.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.createElement(Span, {
@@ -28388,7 +28547,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 121,
+          lineNumber: 128,
           columnNumber: 15
         }
       }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -28400,16 +28559,16 @@ const Navigation = props => {
         __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.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.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.createElement(StyledCircleInfoOutline, {
@@ -28421,18 +28580,18 @@ const Navigation = props => {
         __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.createElement(Flex$1, {
+      })), ((_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.comingSoon) && /*#__PURE__*/React__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.createElement(Tag, {
@@ -28441,7 +28600,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 133,
+          lineNumber: 140,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28453,7 +28612,8 @@ const Navigation = props => {
           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);
@@ -28465,7 +28625,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 141,
+          lineNumber: 148,
           columnNumber: 13
         }
       }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -28474,7 +28634,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 159,
+          lineNumber: 167,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28485,12 +28645,12 @@ const Navigation = props => {
           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.createElement(StyledDiv, {
@@ -28500,17 +28660,17 @@ const Navigation = props => {
         __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.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.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.createElement(StyledCircleInfoOutline, {
@@ -28519,19 +28679,19 @@ const Navigation = props => {
         __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.createElement(Flex$1, {
+      })), isActive && ((_data13 = data[i - 1]) === null || _data13 === void 0 ? void 0 : _data13.comingSoon) && /*#__PURE__*/React__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.createElement(Tag, {
@@ -28540,7 +28700,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 183,
+          lineNumber: 191,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -28560,7 +28720,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 196,
+          lineNumber: 204,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28573,7 +28733,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 197,
+          lineNumber: 205,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(Card, {
@@ -28585,14 +28745,14 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 198,
+          lineNumber: 206,
           columnNumber: 13
         }
       }, child), /*#__PURE__*/React__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)));
@@ -28600,7 +28760,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 193,
+      lineNumber: 201,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepperList, {
@@ -28618,7 +28778,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 212,
+      lineNumber: 220,
       columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -28630,7 +28790,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 228,
+      lineNumber: 236,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28643,7 +28803,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 229,
+      lineNumber: 237,
       columnNumber: 13
     }
   }, stepItems)) : stepItems));
@@ -28744,7 +28904,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 327,
+      lineNumber: 335,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28767,7 +28927,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 328,
+      lineNumber: 336,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28781,7 +28941,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 352,
+        lineNumber: 360,
         columnNumber: 13
       }
     }),
@@ -28791,7 +28951,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 346,
+      lineNumber: 354,
       columnNumber: 9
     }
   }), props.children)));
@@ -29336,6 +29496,9 @@ const Required$2 = styled('span', {
   color: '$textRed !important'
 });
 function EditableTableMobile(props) {
+  const {
+    t
+  } = useTranslation('translation');
   const {
     instance,
     emptyDataMessage,
@@ -29564,7 +29727,7 @@ function EditableTableMobile(props) {
                 heading: "shortContentRegular",
                 color: "secondary"
               }, {
-                children: emptyDataMessage || 'Tidak ada data'
+                children: emptyDataMessage || t('label.noData', 'Tidak ada data')
               }), void 0)
             }), void 0)
           }), void 0)
@@ -29873,6 +30036,9 @@ function EditableTable(props) {
     selectedIds,
     onExpand
   } = props;
+  const {
+    t
+  } = useTranslation('translation');
   const [selectedIndex, setSelectedIndex] = useState(null);
 
   const IndeterminateCheckbox = props => {
@@ -30108,7 +30274,7 @@ function EditableTable(props) {
                 heading: "shortContentRegular",
                 color: "secondary"
               }, {
-                children: emptyDataMessage || 'Tidak ada data'
+                children: emptyDataMessage || t('label.noData', 'Tidak ada data')
               }), void 0)
             }), void 0)
           }), void 0)
@@ -34170,4 +34336,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultFetchDataParams, pickerReducer, useListOption, useToggle };