@majoo-ui/react 1.60.37-rc.4 → 1.60.37-rc.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('react-i18next'), require('moment'), require('react/jsx-runtime'), require('@majoo-ui/icons'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), 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('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), 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-virtual'), 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', 'react-i18next', 'moment', 'react/jsx-runtime', '@majoo-ui/icons', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', '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', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', '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.reactI18next, global.moment, global.jsxRuntime, global.icons, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, jsxRuntime, icons, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, 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('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), 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('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), 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-virtual'), 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', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', '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', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', '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.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,7 +57,7 @@
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
-  var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+  var _jsxFileName$12 = "/Users/majoo/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
   function ThemeProvider({
     theme,
     children
@@ -66,7 +66,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$12,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1503,7 +1503,7 @@
     globalStyles();
   };
 
-  var _jsxFileName$_ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+  var _jsxFileName$11 = "/Users/majoo/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
   function MajooProvider({
     children,
     theme: theme$1 = theme,
@@ -1519,7 +1519,7 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$11,
         lineNumber: 14,
         columnNumber: 5
       }
@@ -1532,7 +1532,7 @@
     disableGlobalStyle: PropTypes__default["default"].bool
   };
 
-  var Box = styled('div', {
+  const Box = styled('div', {
     variants: {
       mobileOnly: {
         true: {
@@ -1563,7 +1563,7 @@
     return variants;
   }
 
-  var Flex$1 = styled('div', {
+  const Flex$1 = styled('div', {
     display: 'flex',
     variants: {
       direction: {
@@ -1628,48 +1628,30 @@
           flexWrap: 'wrap-reverse'
         }
       },
-      gap: seqNumberVariants$1(function (value) {
-        return {
-          gap: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      m: seqNumberVariants$1(function (value) {
-        return {
-          margin: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      mt: seqNumberVariants$1(function (value) {
-        return {
-          marginTop: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      mb: seqNumberVariants$1(function (value) {
-        return {
-          marginBottom: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      mr: seqNumberVariants$1(function (value) {
-        return {
-          marginRight: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      ml: seqNumberVariants$1(function (value) {
-        return {
-          marginLeft: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      mx: seqNumberVariants$1(function (value) {
-        return {
-          marginRight: "$spacing-".concat(value < 10 ? '0' + value : value),
-          marginLeft: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
-      my: seqNumberVariants$1(function (value) {
-        return {
-          marginTop: "$spacing-".concat(value < 10 ? '0' + value : value),
-          marginBottom: "$spacing-".concat(value < 10 ? '0' + value : value)
-        };
-      }, 12),
+      gap: seqNumberVariants$1(value => ({
+        gap: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      m: seqNumberVariants$1(value => ({
+        m: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      mt: seqNumberVariants$1(value => ({
+        mt: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      mb: seqNumberVariants$1(value => ({
+        mb: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      mr: seqNumberVariants$1(value => ({
+        mr: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      ml: seqNumberVariants$1(value => ({
+        ml: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      mx: seqNumberVariants$1(value => ({
+        mx: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
+      my: seqNumberVariants$1(value => ({
+        my: `$spacing-${value < 10 ? '0' + value : value}`
+      }), 12),
       mobileOnly: {
         true: {
           '@lg': {
@@ -1687,278 +1669,29 @@
       }
     }
   });
+  Flex$1.propTypes = {
+    direction: PropTypes__default["default"].string,
+    align: PropTypes__default["default"].string,
+    justify: PropTypes__default["default"].string,
+    wrap: PropTypes__default["default"].string,
+    gap: PropTypes__default["default"].number,
+    m: PropTypes__default["default"].number,
+    mt: PropTypes__default["default"].number,
+    mb: PropTypes__default["default"].number,
+    mr: PropTypes__default["default"].number,
+    ml: PropTypes__default["default"].number,
+    mx: PropTypes__default["default"].number,
+    my: PropTypes__default["default"].number
+  };
   Flex$1.defaultProps = {
     direction: 'row',
     align: 'stretch',
     justify: 'start',
-    wrap: 'noWrap'
+    wrap: 'noWrap',
+    gap: 0
   };
   Flex$1.displayName = 'Flex';
 
-  var GridComponent = styled('div', {
-    display: 'grid',
-    variants: {
-      align: {
-        start: {
-          alignItems: 'start'
-        },
-        center: {
-          alignItems: 'center'
-        },
-        end: {
-          alignItems: 'end'
-        },
-        stretch: {
-          alignItems: 'stretch'
-        },
-        baseline: {
-          alignItems: 'baseline'
-        }
-      },
-      justify: {
-        start: {
-          justifyContent: 'start'
-        },
-        center: {
-          justifyContent: 'center'
-        },
-        end: {
-          justifyContent: 'end'
-        },
-        between: {
-          justifyContent: 'space-between'
-        }
-      },
-      flow: {
-        row: {
-          gridAutoFlow: 'row'
-        },
-        column: {
-          gridAutoFlow: 'column'
-        },
-        dense: {
-          gridAutoFlow: 'dense'
-        },
-        rowDense: {
-          gridAutoFlow: 'row dense'
-        },
-        columnDense: {
-          gridAutoFlow: 'column dense'
-        }
-      },
-      columns: seqNumberVariants$1(function (value) {
-        return {
-          gridTemplateColumns: "repeat(".concat(value, ", 1fr)")
-        };
-      }, 10),
-      rows: seqNumberVariants$1(function (value) {
-        return {
-          gridTemplateRows: "repeat(".concat(value, ", 1fr)")
-        };
-      }, 10),
-      placeItems: {
-        stretch: {
-          placeItems: 'stretch'
-        },
-        start: {
-          placeItems: 'start'
-        },
-        end: {
-          placeItems: 'end'
-        },
-        center: {
-          placeItems: 'center'
-        },
-        left: {
-          placeItems: 'left'
-        },
-        right: {
-          placeItems: 'right'
-        }
-      },
-      gap: {
-        1: {
-          gap: '$spacing-03'
-        },
-        2: {
-          gap: '$spacing-05'
-        },
-        3: {
-          gap: '$spacing-06'
-        },
-        4: {
-          gap: '$spacing-07'
-        },
-        5: {
-          gap: '$spacing-08'
-        },
-        6: {
-          gap: '$spacing-09'
-        },
-        7: {
-          gap: '$spacing-10'
-        },
-        8: {
-          gap: '$spacing-11'
-        },
-        9: {
-          gap: '$spacing-12'
-        }
-      },
-      gapX: {
-        normal: {
-          columnGap: 'normal'
-        },
-        1: {
-          columnGap: '$spacing-03'
-        },
-        2: {
-          columnGap: '$spacing-05'
-        },
-        3: {
-          columnGap: '$spacing-06'
-        },
-        4: {
-          columnGap: '$spacing-07'
-        },
-        5: {
-          columnGap: '$spacing-08'
-        },
-        6: {
-          columnGap: '$spacing-09'
-        },
-        7: {
-          columnGap: '$spacing-10'
-        },
-        8: {
-          columnGap: '$spacing-11'
-        },
-        9: {
-          columnGap: '$spacing-12'
-        }
-      },
-      gapY: {
-        1: {
-          rowGap: '$spacing-03'
-        },
-        2: {
-          rowGap: '$spacing-05'
-        },
-        3: {
-          rowGap: '$spacing-06'
-        },
-        4: {
-          rowGap: '$spacing-07'
-        },
-        5: {
-          rowGap: '$spacing-08'
-        },
-        6: {
-          rowGap: '$spacing-09'
-        },
-        7: {
-          rowGap: '$spacing-10'
-        },
-        8: {
-          rowGap: '$spacing-11'
-        },
-        9: {
-          rowGap: '$spacing-12'
-        }
-      },
-      mobileOnly: {
-        true: {
-          '@lg': {
-            display: 'none !important'
-          }
-        }
-      },
-      desktopOnly: {
-        true: {
-          display: 'none !important',
-          '@lg': {
-            display: 'grid !important'
-          }
-        }
-      }
-    }
-  });
-  var Grid = function Grid(_a) {
-    var children = _a.children,
-      props = __rest(_a, ["children"]);
-    return jsxRuntime.jsx(GridComponent, __assign({}, props, {
-      css: __assign(__assign({}, props.css), {
-        gridAutoColumns: props.autoColumns,
-        gridAutoRows: props.autoRows,
-        gridTemplateColumns: props.templateColumns,
-        gridTemplateRows: props.templateRows
-      })
-    }, {
-      children: children
-    }), void 0);
-  };
-  Grid.propTypes = {
-    align: PropTypes__default["default"].string,
-    justify: PropTypes__default["default"].string,
-    autoColumns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    autoRows: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    autoFlow: PropTypes__default["default"].string,
-    templateColumns: PropTypes__default["default"].string,
-    templateRows: PropTypes__default["default"].string,
-    columns: PropTypes__default["default"].number,
-    rows: PropTypes__default["default"].number,
-    gap: PropTypes__default["default"].number,
-    gapX: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    gapY: PropTypes__default["default"].number
-  };
-  Grid.displayName = 'Grid';
-  function spanFn(value) {
-    return value === 'auto' ? 'auto' : "span ".concat(value, "/span ").concat(value);
-  }
-  var GridItemComponent = styled('div', {
-    variants: {
-      colSpan: __assign({
-        auto: spanFn('auto')
-      }, seqNumberVariants$1(function (value) {
-        return {
-          gridColumn: spanFn(value)
-        };
-      }, 10)),
-      rowSpan: __assign({
-        auto: spanFn('auto')
-      }, seqNumberVariants$1(function (value) {
-        return {
-          gridRow: spanFn(value)
-        };
-      }, 10))
-    }
-  });
-  var GridItem = function GridItem(_a) {
-    var children = _a.children,
-      props = __rest(_a, ["children"]);
-    return jsxRuntime.jsx(GridItemComponent, __assign({}, props, {
-      css: __assign(__assign({}, props.css), {
-        gridArea: props.area,
-        gridColumnStart: props.colStart,
-        gridColumnEnd: props.colEnd,
-        gridRowStart: props.rowStart,
-        gridRowEnd: props.rowEnd
-      })
-    }, {
-      children: children
-    }), void 0);
-  };
-  GridItem.propTypes = {
-    gridArea: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    colSpan: PropTypes__default["default"].number,
-    rowSpan: PropTypes__default["default"].number,
-    colStart: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    colEnd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    rowStart: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    rowEnd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-  };
-  GridItem.displayName = 'Grid Item';
-
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -1989,8 +1722,279 @@
     return target;
   }
 
-  const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
-  var _jsxFileName$Z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
+  const _excluded$B = ["children"],
+    _excluded2$4 = ["children"];
+  var _jsxFileName$10 = "/Users/majoo/majoo-ui/packages/react/src/layout/grid/Grid.js";
+  const GridComponent = styled('div', {
+    display: 'grid',
+    variants: {
+      align: {
+        start: {
+          alignItems: 'start'
+        },
+        center: {
+          alignItems: 'center'
+        },
+        end: {
+          alignItems: 'end'
+        },
+        stretch: {
+          alignItems: 'stretch'
+        },
+        baseline: {
+          alignItems: 'baseline'
+        }
+      },
+      justify: {
+        start: {
+          justifyContent: 'start'
+        },
+        center: {
+          justifyContent: 'center'
+        },
+        end: {
+          justifyContent: 'end'
+        },
+        between: {
+          justifyContent: 'space-between'
+        }
+      },
+      flow: {
+        row: {
+          gridAutoFlow: 'row'
+        },
+        column: {
+          gridAutoFlow: 'column'
+        },
+        dense: {
+          gridAutoFlow: 'dense'
+        },
+        rowDense: {
+          gridAutoFlow: 'row dense'
+        },
+        columnDense: {
+          gridAutoFlow: 'column dense'
+        }
+      },
+      columns: seqNumberVariants$1(value => ({
+        gridTemplateColumns: `repeat(${value}, 1fr)`
+      }), 10),
+      rows: seqNumberVariants$1(value => ({
+        gridTemplateRows: `repeat(${value}, 1fr)`
+      }), 10),
+      placeItems: {
+        stretch: {
+          placeItems: 'stretch'
+        },
+        start: {
+          placeItems: 'start'
+        },
+        end: {
+          placeItems: 'end'
+        },
+        center: {
+          placeItems: 'center'
+        },
+        left: {
+          placeItems: 'left'
+        },
+        right: {
+          placeItems: 'right'
+        }
+      },
+      gap: {
+        1: {
+          gap: '$spacing-03'
+        },
+        2: {
+          gap: '$spacing-05'
+        },
+        3: {
+          gap: '$spacing-06'
+        },
+        4: {
+          gap: '$spacing-07'
+        },
+        5: {
+          gap: '$spacing-08'
+        },
+        6: {
+          gap: '$spacing-09'
+        },
+        7: {
+          gap: '$spacing-10'
+        },
+        8: {
+          gap: '$spacing-11'
+        },
+        9: {
+          gap: '$spacing-12'
+        }
+      },
+      gapX: {
+        normal: {
+          columnGap: 'normal'
+        },
+        1: {
+          columnGap: '$spacing-03'
+        },
+        2: {
+          columnGap: '$spacing-05'
+        },
+        3: {
+          columnGap: '$spacing-06'
+        },
+        4: {
+          columnGap: '$spacing-07'
+        },
+        5: {
+          columnGap: '$spacing-08'
+        },
+        6: {
+          columnGap: '$spacing-09'
+        },
+        7: {
+          columnGap: '$spacing-10'
+        },
+        8: {
+          columnGap: '$spacing-11'
+        },
+        9: {
+          columnGap: '$spacing-12'
+        }
+      },
+      gapY: {
+        1: {
+          rowGap: '$spacing-03'
+        },
+        2: {
+          rowGap: '$spacing-05'
+        },
+        3: {
+          rowGap: '$spacing-06'
+        },
+        4: {
+          rowGap: '$spacing-07'
+        },
+        5: {
+          rowGap: '$spacing-08'
+        },
+        6: {
+          rowGap: '$spacing-09'
+        },
+        7: {
+          rowGap: '$spacing-10'
+        },
+        8: {
+          rowGap: '$spacing-11'
+        },
+        9: {
+          rowGap: '$spacing-12'
+        }
+      },
+      mobileOnly: {
+        true: {
+          '@lg': {
+            display: 'none !important'
+          }
+        }
+      },
+      desktopOnly: {
+        true: {
+          display: 'none !important',
+          '@lg': {
+            display: 'grid !important'
+          }
+        }
+      }
+    }
+  });
+  const Grid = _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
+      css: Object.assign({}, props.css, {
+        gridAutoColumns: props.autoColumns,
+        gridAutoRows: props.autoRows,
+        gridTemplateColumns: props.templateColumns,
+        gridTemplateRows: props.templateRows
+      }),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$10,
+        lineNumber: 200,
+        columnNumber: 5
+      }
+    }), children);
+  };
+  Grid.propTypes = {
+    align: PropTypes__default["default"].string,
+    justify: PropTypes__default["default"].string,
+    autoColumns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    autoRows: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    autoFlow: PropTypes__default["default"].string,
+    templateColumns: PropTypes__default["default"].string,
+    templateRows: PropTypes__default["default"].string,
+    columns: PropTypes__default["default"].number,
+    rows: PropTypes__default["default"].number,
+    gap: PropTypes__default["default"].number,
+    gapX: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    gapY: PropTypes__default["default"].number
+  };
+  Grid.displayName = 'Grid';
+  function spanFn(value) {
+    return value === 'auto' ? 'auto' : `span ${value}/span ${value}`;
+  }
+  const GridItemComponent = styled('div', {
+    variants: {
+      colSpan: Object.assign({
+        auto: spanFn('auto')
+      }, seqNumberVariants$1(value => ({
+        gridColumn: spanFn(value)
+      }), 10)),
+      rowSpan: Object.assign({
+        auto: spanFn('auto')
+      }, seqNumberVariants$1(value => ({
+        gridRow: spanFn(value)
+      }), 10))
+    }
+  });
+  const GridItem = _ref2 => {
+    let {
+        children
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    return /*#__PURE__*/React__default["default"].createElement(GridItemComponent, _extends({}, props, {
+      css: Object.assign({}, props.css, {
+        gridArea: props.area,
+        gridColumnStart: props.colStart,
+        gridColumnEnd: props.colEnd,
+        gridRowStart: props.rowStart,
+        gridRowEnd: props.rowEnd
+      }),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$10,
+        lineNumber: 265,
+        columnNumber: 5
+      }
+    }), children);
+  };
+  GridItem.propTypes = {
+    gridArea: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    colSpan: PropTypes__default["default"].number,
+    rowSpan: PropTypes__default["default"].number,
+    colStart: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    colEnd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    rowStart: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    rowEnd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  };
+  GridItem.displayName = 'Grid Item';
+
+  const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+  var _jsxFileName$$ = "/Users/majoo/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
   const StyledDiv$2 = styled(Flex$1, {
     justifyContent: 'center',
     marginLeft: 'auto',
@@ -2033,7 +2037,7 @@
         css,
         contentHeader
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
       id: "retina-container",
       css: Object.assign({
@@ -2042,7 +2046,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$$,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -2456,8 +2460,8 @@
     }), void 0);
   });
 
-  const _excluded$x = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
-  var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
+  const _excluded$z = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
+  var _jsxFileName$_ = "/Users/majoo/majoo-ui/packages/react/src/components/banner/Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -2559,7 +2563,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 111,
       columnNumber: 3
     }
@@ -2580,7 +2584,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 128,
       columnNumber: 3
     }
@@ -2616,7 +2620,7 @@
     return /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 159,
         columnNumber: 5
       }
@@ -2628,7 +2632,7 @@
       color: variant ? generateVariant(variant) : generateVariant(value.variant),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 161,
         columnNumber: 9
       }
@@ -2654,7 +2658,7 @@
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 193,
       columnNumber: 3
     }
@@ -2666,7 +2670,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 195,
       columnNumber: 7
     }
@@ -2675,7 +2679,7 @@
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 202,
       columnNumber: 9
     }
@@ -2686,14 +2690,14 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 210,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 211,
         columnNumber: 7
       }
@@ -2702,7 +2706,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 212,
         columnNumber: 9
       }
@@ -2712,7 +2716,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 213,
         columnNumber: 27
       }
@@ -2725,21 +2729,21 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 214,
         columnNumber: 11
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 222,
         columnNumber: 29
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 223,
         columnNumber: 35
       }
@@ -2752,7 +2756,7 @@
       closeCenter: !props.title && !props.link,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 226,
         columnNumber: 9
       }
@@ -2761,7 +2765,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 234,
         columnNumber: 11
       }
@@ -2774,7 +2778,7 @@
       variant: props.variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 238,
         columnNumber: 9
       }
@@ -2793,7 +2797,7 @@
         bannerBlock,
         icon
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
       hasAction: !!onClick,
@@ -2802,7 +2806,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 260,
         columnNumber: 5
       }
@@ -2819,7 +2823,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 262,
         columnNumber: 9
       }
@@ -2830,7 +2834,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 269,
         columnNumber: 11
       }
@@ -2845,7 +2849,7 @@
       onRemove: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 272,
         columnNumber: 9
       }
@@ -3458,8 +3462,8 @@
   Card.Label = StyledLabel$2;
   Card.Description = StyledDescription$3;
 
-  const _excluded$w = ["children"];
-  var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+  const _excluded$y = ["children"];
+  var _jsxFileName$Z = "/Users/majoo/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -3504,7 +3508,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Z,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3514,19 +3518,19 @@
     let {
         children
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Z,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Z,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -3776,8 +3780,8 @@
   };
   Badge.displayName = 'Badge';
 
-  const _excluded$v = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+  const _excluded$x = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  var _jsxFileName$Y = "/Users/majoo/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -3821,7 +3825,7 @@
         onClick,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
       onClick: onClick,
@@ -3829,7 +3833,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -3839,7 +3843,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -3847,21 +3851,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -3878,8 +3882,8 @@
     delayMs: 0
   };
 
-  const _excluded$u = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-  var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
+  const _excluded$w = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+  var _jsxFileName$X = "/Users/majoo/majoo-ui/packages/react/src/components/image/Image.js";
   const ContainerFallback = styled(Flex$1, {
     boxSizing: 'border-box',
     border: '2px dashed #C0C4C4',
@@ -3928,7 +3932,7 @@
         cssFallback,
         rounded
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     const {
       t
     } = reactI18next.useTranslation('translation');
@@ -3947,7 +3951,7 @@
       }, props, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$V,
+          fileName: _jsxFileName$X,
           lineNumber: 61,
           columnNumber: 7
         }
@@ -3963,14 +3967,14 @@
         }, cssFallback),
         __self: this,
         __source: {
-          fileName: _jsxFileName$V,
+          fileName: _jsxFileName$X,
           lineNumber: 75,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TextFallback, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$V,
+          fileName: _jsxFileName$X,
           lineNumber: 76,
           columnNumber: 9
         }
@@ -4028,338 +4032,6 @@
     fallbackTitle: 'Tidak ada foto'
   };
 
-  var zIndices$2 = core.foundations.zIndices;
-  var slideUpAndFade$2 = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateY(2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateY(0)'
-    }
-  });
-  var slideRightAndFade$2 = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateX(-2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateX(0)'
-    }
-  });
-  var slideDownAndFade$2 = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateY(-2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateY(0)'
-    }
-  });
-  var slideLeftAndFade$2 = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateX(2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateX(0)'
-    }
-  });
-  var StyledContent$6 = styled(TooltipPrimitive__namespace.Content, {
-    zIndex: zIndices$2.tooltip,
-    borderRadius: 8,
-    padding: '8px',
-    fontSize: '$helper',
-    letterSpacing: '$helper',
-    lineHeight: '$helper',
-    fontWeight: '400',
-    backgroundColor: '$white',
-    boxShadow: '$large',
-    '@media (prefers-reduced-motion: no-preference)': {
-      animationDuration: '400ms',
-      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-      animationFillMode: 'forwards',
-      willChange: 'transform, opacity',
-      '&[data-state="delayed-open"]': {
-        '&[data-side="top"]': {
-          animationName: slideDownAndFade$2
-        },
-        '&[data-side="right"]': {
-          animationName: slideLeftAndFade$2
-        },
-        '&[data-side="bottom"]': {
-          animationName: slideUpAndFade$2
-        },
-        '&[data-side="left"]': {
-          animationName: slideRightAndFade$2
-        }
-      }
-    },
-    maxWidth: '100vw'
-  });
-  var TriggerSpan = styled('span', {
-    display: 'flex'
-  });
-  var StyledArrow$1 = styled(TooltipPrimitive__namespace.Arrow, {
-    boxShadow: '$large'
-  });
-  var TooltipBase = styled(TooltipPrimitive__namespace.Root, {
-    defaultVariants: {
-      color: 'ligth'
-    }
-  });
-  // Exports
-  var Provider = TooltipPrimitive__namespace.Provider;
-  var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-  var TooltipContent = StyledContent$6;
-  var dark = {
-    color: core.foundations.colors.white,
-    backgroundColor: core.foundations.colors.gray800
-  };
-  var ligth = {
-    color: core.foundations.colors.textPrimary,
-    backgroundColor: core.foundations.colors.bgWhite
-  };
-  var darkArrow = {
-    fill: core.foundations.colors.gray800
-  };
-  var lightArrow = {
-    fill: core.foundations.colors.bgWhite
-  };
-  var Tooltip$1 = function Tooltip(_a) {
-    var children = _a.children,
-      label = _a.label,
-      color = _a.color,
-      css = _a.css,
-      withClick = _a.withClick,
-      side = _a.side,
-      align = _a.align,
-      delayDuration = _a.delayDuration,
-      rest = __rest(_a, ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"]);
-    var _b = React.useState(false),
-      open = _b[0],
-      setOpen = _b[1];
-    return jsxRuntime.jsx(Provider, {
-      children: jsxRuntime.jsxs(TooltipBase, __assign({}, rest, {
-        open: withClick ? open : undefined,
-        delayDuration: delayDuration
-      }, {
-        children: [jsxRuntime.jsx(TooltipTrigger, __assign({
-          asChild: true
-        }, {
-          children: jsxRuntime.jsx(TriggerSpan, __assign({
-            onClick: function () {
-              return withClick && !open && setOpen(true);
-            }
-          }, {
-            children: children
-          }), void 0)
-        }), void 0), jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, {
-          children: jsxRuntime.jsxs(StyledContent$6, __assign({
-            align: align,
-            side: side,
-            sideOffset: 5,
-            css: color === 'dark' ? __assign(__assign({}, dark), css) : __assign(__assign({}, ligth), css),
-            onPointerDownOutside: function () {
-              return setTimeout(function () {
-                setOpen(false);
-              }, 100);
-            }
-          }, {
-            children: [label, jsxRuntime.jsx(StyledArrow$1, {
-              offset: 10,
-              css: color === 'dark' ? darkArrow : lightArrow
-            }, void 0)]
-          }), void 0)
-        }, void 0)]
-      }), void 0)
-    }, void 0);
-  };
-  Tooltip$1.defaultProps = {
-    color: 'dark',
-    side: 'bottom',
-    align: 'center',
-    label: '',
-    children: jsxRuntime.jsx("div", {}, void 0),
-    delayDuration: 200
-  };
-
-  const _excluded$t = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
-  const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
-    position: 'relative',
-    overflow: 'hidden',
-    background: '$chartLightGreen',
-    width: 'auto',
-    height: '12px',
-    variants: {
-      rounded: {
-        true: {
-          borderRadius: '100px'
-        }
-      },
-      color: {
-        green: {
-          backgroundColor: '$chartLightGreen'
-        },
-        orange: {
-          backgroundColor: '$chartLightOrange'
-        },
-        blue: {
-          backgroundColor: '$chartLightBlue'
-        },
-        purple: {
-          backgroundColor: '$chartLightPurple'
-        },
-        yellow: {
-          backgroundColor: '$chartLightYellow'
-        },
-        red: {
-          backgroundColor: '$chartLightRed'
-        },
-        dark: {
-          backgroundColor: '$chartLightGray'
-        }
-      },
-      size: {
-        xs: {
-          height: '4px'
-        },
-        sm: {
-          height: '8px'
-        },
-        m: {
-          height: '12px'
-        },
-        l: {
-          height: '16px'
-        },
-        xl: {
-          height: '20px'
-        }
-      }
-    }
-  });
-  const StyledIndicator$3 = react.styled(ProgressPrimitive__namespace.Indicator, {
-    backgroundColor: '$chartGreen',
-    height: '60%',
-    transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',
-    variants: {
-      rounded: {
-        true: {
-          borderRadius: '100px'
-        }
-      },
-      color: {
-        green: {
-          backgroundColor: '$chartGreen'
-        },
-        orange: {
-          backgroundColor: '$chartOrange'
-        },
-        blue: {
-          backgroundColor: '$chartBlue'
-        },
-        purple: {
-          backgroundColor: '$chartPurple'
-        },
-        yellow: {
-          backgroundColor: '$chartYellow'
-        },
-        red: {
-          backgroundColor: '$chartRed'
-        },
-        dark: {
-          backgroundColor: '$chartDark'
-        }
-      },
-      size: {
-        xs: {
-          height: '100%'
-        },
-        sm: {
-          height: '100%'
-        },
-        m: {
-          margin: "2px 2px 0"
-        },
-        l: {
-          margin: "3px 3px 0"
-        },
-        xl: {
-          margin: "4px 4px 0"
-        }
-      }
-    }
-  });
-  function Progress$1(_ref) {
-    let {
-        className,
-        value,
-        max,
-        getValueLabel,
-        color,
-        size,
-        rounded,
-        width
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
-    return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
-      className: className,
-      value: value,
-      max: max,
-      getValueLabel: getValueLabel,
-      color: color,
-      size: size,
-      rounded: rounded,
-      css: Object.assign({
-        width: width
-      }, props.css)
-    }, props, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$U,
-        lineNumber: 88,
-        columnNumber: 5
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$3, {
-      color: color,
-      size: size,
-      rounded: rounded,
-      css: {
-        width: `${value}%`
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$U,
-        lineNumber: 89,
-        columnNumber: 7
-      }
-    }));
-  }
-  Progress$1.propTypes = {
-    className: PropTypes__default["default"].string,
-    value: PropTypes__default["default"].number,
-    max: PropTypes__default["default"].number,
-    getValueLabel: PropTypes__default["default"].func,
-    color: PropTypes__default["default"].string,
-    size: PropTypes__default["default"].string,
-    rounded: PropTypes__default["default"].bool,
-    width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-  };
-  Progress$1.defaultProps = {
-    max: 100,
-    color: 'green',
-    size: 'm',
-    rounded: true
-  };
-
-  const ToastContext = /*#__PURE__*/React__namespace.createContext({});
-
   var objectDefineProperties = {};
 
   var DESCRIPTORS$6 = descriptors;
@@ -4896,6 +4568,384 @@
 
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+  const _excluded$v = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
+  var _jsxFileName$W = "/Users/majoo/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+  const {
+    zIndices: zIndices$2
+  } = core.foundations;
+  const slideUpAndFade$2 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  const slideRightAndFade$2 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  const slideDownAndFade$2 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  const slideLeftAndFade$2 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  const StyledContent$6 = styled(TooltipPrimitive__namespace.Content, {
+    zIndex: zIndices$2.tooltip,
+    borderRadius: 8,
+    padding: '8px',
+    fontSize: '$helper',
+    letterSpacing: '$helper',
+    lineHeight: '$helper',
+    fontWeight: '400',
+    backgroundColor: '$white',
+    boxShadow: '$large',
+    '@media (prefers-reduced-motion: no-preference)': {
+      animationDuration: '400ms',
+      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      animationFillMode: 'forwards',
+      willChange: 'transform, opacity',
+      '&[data-state="delayed-open"]': {
+        '&[data-side="top"]': {
+          animationName: slideDownAndFade$2
+        },
+        '&[data-side="right"]': {
+          animationName: slideLeftAndFade$2
+        },
+        '&[data-side="bottom"]': {
+          animationName: slideUpAndFade$2
+        },
+        '&[data-side="left"]': {
+          animationName: slideRightAndFade$2
+        }
+      }
+    },
+    maxWidth: '100vw'
+  });
+  const TriggerSpan = styled('span', {
+    display: 'flex'
+  });
+  const StyledArrow$1 = styled(TooltipPrimitive__namespace.Arrow, {
+    boxShadow: '$large'
+  });
+  const TooltipBase = styled(TooltipPrimitive__namespace.Root, {
+    defaultVariants: {
+      color: 'ligth'
+    }
+  });
+
+  // Exports
+  const Provider = TooltipPrimitive__namespace.Provider;
+  const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+  const dark = {
+    color: core.foundations.colors.white,
+    backgroundColor: core.foundations.colors.gray800
+  };
+  const ligth = {
+    color: core.foundations.colors.textPrimary,
+    backgroundColor: core.foundations.colors.bgWhite
+  };
+  const darkArrow = {
+    fill: core.foundations.colors.gray800
+  };
+  const lightArrow = {
+    fill: core.foundations.colors.bgWhite
+  };
+  const Tooltip$1 = _ref => {
+    let {
+        children,
+        label,
+        color,
+        css,
+        withClick,
+        side,
+        align,
+        delayDuration
+      } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    const [open, setOpen] = React.useState(false);
+    return /*#__PURE__*/React__default["default"].createElement(Provider, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 92,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
+      open: withClick ? open : undefined,
+      delayDuration: delayDuration,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 93,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(TooltipTrigger, {
+      asChild: true,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 94,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TriggerSpan, {
+      onClick: () => withClick && !open && setOpen(true),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 95,
+        columnNumber: 11
+      }
+    }, children)), /*#__PURE__*/React__default["default"].createElement(TooltipPrimitive__namespace.Portal, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 97,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledContent$6, {
+      align: align,
+      side: side,
+      sideOffset: 5,
+      css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
+      onPointerDownOutside: () => setTimeout(() => {
+        setOpen(false);
+      }, 100),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 98,
+        columnNumber: 11
+      }
+    }, label, /*#__PURE__*/React__default["default"].createElement(StyledArrow$1, {
+      offset: 10,
+      css: color === 'dark' ? darkArrow : lightArrow,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 110,
+        columnNumber: 13
+      }
+    })))));
+  };
+  Tooltip$1.propTypes = {
+    children: PropTypes__default["default"].node,
+    label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
+    color: PropTypes__default["default"].string,
+    side: PropTypes__default["default"].oneOf(['top', 'bottom', 'right', 'left']),
+    align: PropTypes__default["default"].oneOf(['start', 'center', 'end'])
+  };
+  Tooltip$1.defaultProps = {
+    color: 'dark',
+    side: 'bottom',
+    align: 'center',
+    label: '',
+    children: /*#__PURE__*/React__default["default"].createElement("div", {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 131,
+        columnNumber: 13
+      }
+    }),
+    delayDuration: 200
+  };
+
+  const _excluded$u = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  var _jsxFileName$V = "/Users/majoo/majoo-ui/packages/react/src/components/progress/Progress.js";
+  const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
+    position: 'relative',
+    overflow: 'hidden',
+    background: '$chartLightGreen',
+    width: 'auto',
+    height: '12px',
+    variants: {
+      rounded: {
+        true: {
+          borderRadius: '100px'
+        }
+      },
+      color: {
+        green: {
+          backgroundColor: '$chartLightGreen'
+        },
+        orange: {
+          backgroundColor: '$chartLightOrange'
+        },
+        blue: {
+          backgroundColor: '$chartLightBlue'
+        },
+        purple: {
+          backgroundColor: '$chartLightPurple'
+        },
+        yellow: {
+          backgroundColor: '$chartLightYellow'
+        },
+        red: {
+          backgroundColor: '$chartLightRed'
+        },
+        dark: {
+          backgroundColor: '$chartLightGray'
+        }
+      },
+      size: {
+        xs: {
+          height: '4px'
+        },
+        sm: {
+          height: '8px'
+        },
+        m: {
+          height: '12px'
+        },
+        l: {
+          height: '16px'
+        },
+        xl: {
+          height: '20px'
+        }
+      }
+    }
+  });
+  const StyledIndicator$3 = react.styled(ProgressPrimitive__namespace.Indicator, {
+    backgroundColor: '$chartGreen',
+    height: '60%',
+    transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',
+    variants: {
+      rounded: {
+        true: {
+          borderRadius: '100px'
+        }
+      },
+      color: {
+        green: {
+          backgroundColor: '$chartGreen'
+        },
+        orange: {
+          backgroundColor: '$chartOrange'
+        },
+        blue: {
+          backgroundColor: '$chartBlue'
+        },
+        purple: {
+          backgroundColor: '$chartPurple'
+        },
+        yellow: {
+          backgroundColor: '$chartYellow'
+        },
+        red: {
+          backgroundColor: '$chartRed'
+        },
+        dark: {
+          backgroundColor: '$chartDark'
+        }
+      },
+      size: {
+        xs: {
+          height: '100%'
+        },
+        sm: {
+          height: '100%'
+        },
+        m: {
+          margin: "2px 2px 0"
+        },
+        l: {
+          margin: "3px 3px 0"
+        },
+        xl: {
+          margin: "4px 4px 0"
+        }
+      }
+    }
+  });
+  function Progress$1(_ref) {
+    let {
+        className,
+        value,
+        max,
+        getValueLabel,
+        color,
+        size,
+        rounded,
+        width
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
+      className: className,
+      value: value,
+      max: max,
+      getValueLabel: getValueLabel,
+      color: color,
+      size: size,
+      rounded: rounded,
+      css: Object.assign({
+        width: width
+      }, props.css)
+    }, props, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$V,
+        lineNumber: 88,
+        columnNumber: 5
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$3, {
+      color: color,
+      size: size,
+      rounded: rounded,
+      css: {
+        width: `${value}%`
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$V,
+        lineNumber: 89,
+        columnNumber: 7
+      }
+    }));
+  }
+  Progress$1.propTypes = {
+    className: PropTypes__default["default"].string,
+    value: PropTypes__default["default"].number,
+    max: PropTypes__default["default"].number,
+    getValueLabel: PropTypes__default["default"].func,
+    color: PropTypes__default["default"].string,
+    size: PropTypes__default["default"].string,
+    rounded: PropTypes__default["default"].bool,
+    width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  };
+  Progress$1.defaultProps = {
+    max: 100,
+    color: 'green',
+    size: 'm',
+    rounded: true
+  };
+
+  const ToastContext = /*#__PURE__*/React__namespace.createContext({});
+
   var anObject$d = anObject$j;
 
   // `RegExp.prototype.flags` getter implementation
@@ -5536,8 +5586,8 @@
     return matches;
   }
 
-  const _excluded$s = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
+  const _excluded$t = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  var _jsxFileName$U = "/Users/majoo/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -5705,7 +5755,7 @@
         captionOfAction,
         hrefOfAction
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const isMobile = useMediaQuery(`(max-width: 767px`);
     const close = React__namespace.useCallback(() => {
@@ -5734,7 +5784,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 216,
         columnNumber: 5
       }
@@ -5749,7 +5799,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 227,
         columnNumber: 9
       }
@@ -5759,7 +5809,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 235,
         columnNumber: 11
       }
@@ -5767,7 +5817,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 236,
         columnNumber: 13
       }
@@ -5775,7 +5825,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 237,
         columnNumber: 15
       }
@@ -5783,7 +5833,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 238,
         columnNumber: 17
       }
@@ -5795,7 +5845,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 239,
         columnNumber: 17
       }
@@ -5803,7 +5853,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 247,
         columnNumber: 21
       }
@@ -5818,7 +5868,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 248,
         columnNumber: 23
       }
@@ -5827,7 +5877,7 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 262,
         columnNumber: 19
       }
@@ -5842,7 +5892,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 266,
         columnNumber: 17
       }
@@ -5851,7 +5901,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 276,
         columnNumber: 19
       }
@@ -5866,7 +5916,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 280,
         columnNumber: 17
       }
@@ -5888,8 +5938,8 @@
     dismissAfter: 5000
   };
 
-  const _excluded$r = ["preventDuplicate"];
-  var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+  const _excluded$s = ["preventDuplicate"];
+  var _jsxFileName$T = "/Users/majoo/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -5936,7 +5986,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$T,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -5944,7 +5994,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$T,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -5952,14 +6002,14 @@
       const {
           preventDuplicate
         } = item,
-        toast = _objectWithoutPropertiesLoose(item, _excluded$r);
+        toast = _objectWithoutPropertiesLoose(item, _excluded$s);
       return /*#__PURE__*/React__namespace.createElement(Toast, _extends({
         key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
         onRemove: () => removeToast(toast.id)
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$S,
+          fileName: _jsxFileName$T,
           lineNumber: 47,
           columnNumber: 18
         }
@@ -7185,45 +7235,37 @@
     return message;
   };
 
-  const _excluded$q = ["id", "disabledOfflineIntercept"];
-  var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+  const _excluded$r = ["id", "disabledOfflineIntercept"];
+  var _jsxFileName$S = "/Users/majoo/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
   const ToastProvider = ({
     children,
     translations
   }) => {
-    console.warn({
-      providerTranslations: translations
-    });
     const isOnline = useNavigatorOnLine();
     const [toasts, setToasts] = React.useState([]);
     const {
       t,
       i18n
     } = reactI18next.useTranslation(['MajooUI/toast', 'translation']);
-    const catchError$1 = React.useCallback((e, values, trans) => {
+    const catchError$1 = React.useCallback((e, values) => {
       let errorMsg = catchError(e);
-      if (trans && trans[errorMsg]) {
-        errorMsg = trans[errorMsg][i18n.language];
+      if (translations && translations[errorMsg]) {
+        errorMsg = translations[errorMsg][i18n.language];
       }
       if (values) {
         Object.keys(values).forEach(key => {
           errorMsg = errorMsg.replace(`$${key}`, values[key]);
         });
       }
-      console.warn({
-        trans,
-        e,
-        errorMsg
-      });
       return errorMsg;
     }, [translations, i18n.language]);
-    const createToastInstance = React.useCallback((toast, trans) => {
+    const createToastInstance = React.useCallback(toast => {
       const {
           id,
           disabledOfflineIntercept
         } = toast,
-        rest = _objectWithoutPropertiesLoose(toast, _excluded$q);
+        rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
 
       // eslint-disable-next-line no-plusplus
       const uniqueId = ++toastCount;
@@ -7236,23 +7278,15 @@
         onClickOfAction: false,
         isExternalOfAction: false
       };
-      console.warn({
-        toast,
-        isValidElement: /*#__PURE__*/React__namespace.isValidElement(toast.description),
-        trans
-      });
       return Object.assign({
         id: toastId,
         position: TOP_RIGHT_POSITION
       }, rest, {
-        description: /*#__PURE__*/React__namespace.isValidElement(toast.description) ? toast.description : catchError$1(toast.description, toast.values, trans)
+        description: /*#__PURE__*/React__namespace.isValidElement(toast.description) ? toast.description : catchError$1(toast.description, toast.values)
       }, !isOnline && !disabledOfflineIntercept && offlineInstance);
     }, [isOnline, t, translations, i18n.language]);
     const addToast = React__namespace.useCallback(toast => {
-      console.warn({
-        addToastTranslations: translations
-      });
-      const toastInstance = createToastInstance(toast, translations);
+      const toastInstance = createToastInstance(toast);
       setToasts(toastItems => {
         if (!toastItems.some(currToast => toast.id === currToast.id) || !toast.preventDuplicate) {
           return [...toastItems, toastInstance];
@@ -7260,7 +7294,7 @@
         return toastItems;
       });
       return toastInstance;
-    }, [createToastInstance, translations]);
+    }, [createToastInstance]);
     const removeToast = React__namespace.useCallback(id => {
       setToasts(toastItems => toastItems.filter(t => t.id !== id));
     }, [setToasts]);
@@ -7271,8 +7305,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
-        lineNumber: 86,
+        fileName: _jsxFileName$S,
+        lineNumber: 81,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -7280,8 +7314,8 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
-        lineNumber: 88,
+        fileName: _jsxFileName$S,
+        lineNumber: 83,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -7289,8 +7323,8 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
-        lineNumber: 92,
+        fileName: _jsxFileName$S,
+        lineNumber: 87,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -7298,8 +7332,8 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
-        lineNumber: 96,
+        fileName: _jsxFileName$S,
+        lineNumber: 91,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -7307,8 +7341,8 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
-        lineNumber: 100,
+        fileName: _jsxFileName$S,
+        lineNumber: 95,
         columnNumber: 7
       }
     }));
@@ -7320,8 +7354,8 @@
     children
   }) => condition ? wrapper(children) : children;
 
-  const _excluded$p = ["count", "maxCount", "css"];
-  var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+  const _excluded$q = ["count", "maxCount", "css"];
+  var _jsxFileName$R = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
   const formLabelClassStyle = {
     alignItems: 'start !important',
     '& > div': {
@@ -7424,7 +7458,7 @@
         maxCount,
         css
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     const withCounter = Boolean(count || maxCount);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: withCounter,
@@ -7433,7 +7467,7 @@
         css: css,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$R,
           lineNumber: 115,
           columnNumber: 9
         }
@@ -7446,14 +7480,14 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$R,
           lineNumber: 116,
           columnNumber: 11
         }
       }, count, "/", maxCount), children),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 112,
         columnNumber: 5
       }
@@ -7463,7 +7497,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 123,
         columnNumber: 7
       }
@@ -7471,8 +7505,8 @@
   };
   FormGroup.displayName = 'FormGroup';
 
-  const _excluded$o = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
-  var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+  const _excluded$p = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
+  var _jsxFileName$Q = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
@@ -7504,13 +7538,13 @@
         maxCount,
         labelCss
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       className: "form-label",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -7520,7 +7554,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -7530,7 +7564,7 @@
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -7545,7 +7579,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -7553,14 +7587,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -7569,7 +7603,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -7588,8 +7622,8 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$n = ["children", "error", "errorMessage"];
-  var _jsxFileName$O = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+  const _excluded$o = ["children", "error", "errorMessage"];
+  var _jsxFileName$P = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text$1, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -7607,7 +7641,7 @@
         error,
         errorMessage
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     const errorByMessage = !!errorMessage;
     if (error === undefined && errorByMessage) {
       return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
@@ -7617,7 +7651,7 @@
       }, props, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$O,
+          fileName: _jsxFileName$P,
           lineNumber: 22,
           columnNumber: 7
         }
@@ -7633,7 +7667,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 31,
         columnNumber: 5
       }
@@ -7644,7 +7678,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$N = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
+  var _jsxFileName$O = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
   const CheckboxContext = /*#__PURE__*/React.createContext();
   const CheckboxGroup = ({
     children,
@@ -7685,7 +7719,7 @@
       value: values,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 35,
         columnNumber: 5
       }
@@ -7702,7 +7736,7 @@
   };
   CheckboxGroup.displayName = 'CheckboxGroup';
 
-  var _jsxFileName$M = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+  var _jsxFileName$N = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
   const CheckOutline$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
@@ -7719,7 +7753,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7731,7 +7765,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -7743,13 +7777,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+  var _jsxFileName$M = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
   const SvgMinusOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
@@ -7766,7 +7800,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7778,7 +7812,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -7790,14 +7824,14 @@
     d: "M14.31 10.41H3.9v-2.6h10.41z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  const _excluded$m = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-  var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+  const _excluded$n = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+  var _jsxFileName$L = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$2 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -7855,7 +7889,7 @@
         index,
         value
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     const context = React.useContext(CheckboxContext);
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
@@ -7876,28 +7910,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 64,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 77,
         columnNumber: 7
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 77,
         columnNumber: 41
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 77,
         columnNumber: 60
       }
@@ -7910,14 +7944,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 84,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 85,
         columnNumber: 7
       }
@@ -7933,14 +7967,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 86,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 101,
         columnNumber: 5
       }
@@ -7957,8 +7991,8 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$l = ["children", "size"];
-  var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+  const _excluded$m = ["children", "size"];
+  var _jsxFileName$K = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -8097,7 +8131,7 @@
         children,
         size = 'lg'
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const clone = children.map((child, index) => {
@@ -8120,7 +8154,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 169,
         columnNumber: 10
       }
@@ -8296,8 +8330,8 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
 
-  const _excluded$k = ["disabled", "readOnly"];
-  var _jsxFileName$I = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
+  const _excluded$l = ["disabled", "readOnly"];
+  var _jsxFileName$J = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
   const disabledStyle = {
     backgroundColor: '$formDisable',
     color: '$textDisable',
@@ -8470,7 +8504,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
       ref: ref,
       disabled: disabled,
@@ -8480,7 +8514,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 185,
         columnNumber: 3
       }
@@ -8498,8 +8532,8 @@
   };
   InputText.displayName = 'InputText';
 
-  const _excluded$j = ["disabled", "readOnly"];
-  var _jsxFileName$H = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
+  const _excluded$k = ["disabled", "readOnly"];
+  var _jsxFileName$I = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
   const StyledTextArea = styled(StyledInput$1, {
     variants: {
       size: {
@@ -8520,7 +8554,7 @@
         disabled,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     const textareaRef = React.useRef(null);
     React.useEffect(() => {
       if (textareaRef.current) {
@@ -8554,7 +8588,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 51,
         columnNumber: 5
       }
@@ -8577,21 +8611,21 @@
 
   const InputRadioContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
+  var _jsxFileName$H = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
   const RadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
     return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 13,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(RadioGroup, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 14,
         columnNumber: 9
       }
@@ -8610,8 +8644,8 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$i = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
-  var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
+  var _jsxFileName$G = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -8776,7 +8810,7 @@
         description,
         readOnly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     function renderInputType(type, checkedValue, onValueChange) {
       switch (type) {
         case 'number':
@@ -8789,7 +8823,7 @@
             asChild: true,
             __self: this,
             __source: {
-              fileName: _jsxFileName$F,
+              fileName: _jsxFileName$G,
               lineNumber: 171,
               columnNumber: 11
             }
@@ -8805,7 +8839,7 @@
             asChild: true,
             __self: this,
             __source: {
-              fileName: _jsxFileName$F,
+              fileName: _jsxFileName$G,
               lineNumber: 184,
               columnNumber: 11
             }
@@ -8824,7 +8858,7 @@
             },
             __self: this,
             __source: {
-              fileName: _jsxFileName$F,
+              fileName: _jsxFileName$G,
               lineNumber: 198,
               columnNumber: 11
             }
@@ -8834,7 +8868,7 @@
     return /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 217,
         columnNumber: 5
       }
@@ -8851,7 +8885,7 @@
         outlined: outlined,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 222,
           columnNumber: 11
         }
@@ -8866,7 +8900,7 @@
         css: css,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 223,
           columnNumber: 13
         }
@@ -8875,7 +8909,7 @@
         gap: 4,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 233,
           columnNumber: 15
         }
@@ -8886,14 +8920,14 @@
       }, props, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 234,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 235,
           columnNumber: 19
         }
@@ -8905,7 +8939,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 240,
           columnNumber: 17
         }
@@ -11059,8 +11093,8 @@
   }(React__default["default"].Component);
   NumberFormat.defaultProps = defaultProps;
 
-  const _excluded$h = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
-  var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
+  const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
+  var _jsxFileName$F = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
   const StyledInput = styled(NumberFormat, {
     // Reset
     appearance: 'none',
@@ -11255,7 +11289,7 @@
         maxLength,
         thousandSeparator
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: Boolean(control),
       wrapper: child => /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
@@ -11273,14 +11307,14 @@
         }),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$E,
+          fileName: _jsxFileName$F,
           lineNumber: 225,
           columnNumber: 9
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$F,
         lineNumber: 222,
         columnNumber: 5
       }
@@ -11298,7 +11332,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$F,
         lineNumber: 234,
         columnNumber: 7
       }
@@ -11320,7 +11354,9 @@
   InputNumber.name = 'InputText';
   InputNumber.displayName = 'InputNumber';
 
-  var TagWrapper$4 = styled('div', {
+  const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+  var _jsxFileName$E = "/Users/majoo/majoo-ui/packages/react/src/components/tag/Tag.js";
+  const TagWrapper$4 = styled('div', {
     boxSizing: 'border-box',
     listStyle: 'none',
     display: 'inline-flex',
@@ -11362,10 +11398,6 @@
         }
       },
       type: {
-        default: {
-          background: '$bgGray',
-          color: '$textPrimary'
-        },
         success: {
           background: '$bgSuccess',
           color: '$textGreen'
@@ -11382,13 +11414,13 @@
       }
     }
   });
-  var TagComponent$1 = styled('span', {
+  const TagComponent$1 = styled('span', {
     textAlign: 'center',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   });
-  var StyledIconRight$1 = styled('div', {
+  const StyledIconRight$1 = styled('div', {
     marginLeft: '6px',
     display: 'flex',
     verticalAlign: 'middle',
@@ -11408,51 +11440,89 @@
       }
     }
   });
-  var StyledIconLeft$3 = styled('div', {
+  const StyledIconLeft$3 = styled('div', {
     margin: '0 3px',
     display: 'flex',
     verticalAlign: 'middle',
     alignItems: 'center',
     color: 'inherit'
   });
-  var Tag = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
-    var children = _a.children,
-      onClick = _a.onClick,
-      size = _a.size,
-      icon = _a.icon,
-      isRemovable = _a.isRemovable,
-      disabled = _a.disabled,
-      type = _a.type,
-      onRemove = _a.onRemove,
-      readOnly = _a.readOnly,
-      props = __rest(_a, ["children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"]);
-    return jsxRuntime.jsxs(TagWrapper$4, __assign({
+  const Tag = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+    let {
+        children,
+        onClick,
+        size,
+        icon,
+        isRemovable,
+        disabled,
+        type,
+        onRemove,
+        readOnly
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    return /*#__PURE__*/React__default["default"].createElement(TagWrapper$4, _extends({
       ref: ref,
       onClick: onClick,
       size: size,
       disabled: disabled,
       type: type,
-      readOnly: readOnly
+      readOnly: readOnly,
+      css: Object.assign({}, props.css)
     }, props, {
-      children: [icon !== undefined ? jsxRuntime.jsx(StyledIconLeft$3, {
-        children: icon
-      }, void 0) : null, jsxRuntime.jsx(TagComponent$1, {
-        children: children
-      }, void 0), isRemovable ? jsxRuntime.jsx(StyledIconRight$1, __assign({
-        disabled: disabled,
-        onClick: onRemove,
-        readOnly: readOnly
-      }, {
-        children: jsxRuntime.jsx(icons.CloseOutline, {
-          size: 16,
-          color: colors$8.iconSecondary,
-          style: {
-            verticalAlign: 'middle'
-          }
-        }, void 0)
-      }), void 0) : null]
-    }), void 0);
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 84,
+        columnNumber: 7
+      }
+    }), icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$3, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 94,
+        columnNumber: 31
+      }
+    }, icon) : null, /*#__PURE__*/React__default["default"].createElement(TagComponent$1, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 95,
+        columnNumber: 9
+      }
+    }, children), isRemovable ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$1, {
+      disabled: disabled,
+      onClick: onRemove,
+      readOnly: readOnly,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 97,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
+      size: 16,
+      color: colors$8.iconSecondary,
+      style: {
+        verticalAlign: 'middle'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 98,
+        columnNumber: 13
+      }
+    })) : null);
   });
+  Tag.propTypes = {
+    size: PropTypes__default["default"].string,
+    disabled: PropTypes__default["default"].bool,
+    type: PropTypes__default["default"].string,
+    icon: PropTypes__default["default"].element,
+    isRemovable: PropTypes__default["default"].bool,
+    onRemove: PropTypes__default["default"].func,
+    onClick: PropTypes__default["default"].func,
+    readOnly: PropTypes__default["default"].bool
+  };
   Tag.defaultProps = {
     size: 'sm',
     isRemovable: false,
@@ -11461,7 +11531,7 @@
   };
 
   const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
-  var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+  var _jsxFileName$D = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -11758,7 +11828,7 @@
   };
 
   const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$C = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+  var _jsxFileName$C = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -11863,7 +11933,7 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  var _jsxFileName$B = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+  var _jsxFileName$B = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
   const SvgCloseFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
     height: props.size,
@@ -11922,7 +11992,7 @@
     size: 24
   };
 
-  var _jsxFileName$A = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+  var _jsxFileName$A = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
   const SvgSearchOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
     height: props.size,
@@ -11963,7 +12033,7 @@
   };
 
   const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue", "mobileOnly", "desktopOnly"];
-  var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+  var _jsxFileName$z = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
   const {
     colors: colors$7
   } = core.foundations;
@@ -12262,7 +12332,7 @@
   });
 
   const _excluded$d = ["children"];
-  var _jsxFileName$y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
+  var _jsxFileName$y = "/Users/majoo/majoo-ui/packages/react/src/components/popover/Popover.js";
   const {
     zIndices: zIndices$1
   } = core.foundations;
@@ -13786,7 +13856,7 @@
     }), void 0);
   });
 
-  var _jsxFileName$x = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
+  var _jsxFileName$x = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
   const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
@@ -13870,7 +13940,7 @@
   }
 
   const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions"];
-  var _jsxFileName$w = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
+  var _jsxFileName$w = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   function _await(value, then, direct) {
     if (direct) {
       return then ? then(value) : value;
@@ -15197,7 +15267,7 @@
     collapsibleLimit: 5
   };
 
-  var _jsxFileName$v = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  var _jsxFileName$v = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
   const InputSelectTag = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     return /*#__PURE__*/React__namespace.createElement(InputSelectCheck, _extends({
       ref: ref,
@@ -15258,7 +15328,7 @@
     defaultValue: []
   };
 
-  var _jsxFileName$u = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
+  var _jsxFileName$u = "/Users/majoo/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
   const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -16440,7 +16510,7 @@
 
   const _excluded$b = ["children"],
     _excluded2$3 = ["children", "showOverlay"];
-  var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+  var _jsxFileName$t = "/Users/majoo/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const Context$1 = /*#__PURE__*/React__default["default"].createContext();
   const {
     sizes
@@ -16790,7 +16860,7 @@
 
   const _excluded$a = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size", "withMaxWidth", "mobileOnly", "desktopOnly"],
     _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-  var _jsxFileName$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+  var _jsxFileName$s = "/Users/majoo/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
   const ScrollButton$1 = styled(Button$4, {
     width: '28px',
     outline: '$btnPrimary solid 1px',
@@ -17325,7 +17395,7 @@
   });
   DateNumber.displayName = 'DateNumber';
 
-  var _jsxFileName$r = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
+  var _jsxFileName$r = "/Users/majoo/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
   const Input$3 = styled('input', {
     display: 'none'
   });
@@ -17881,7 +17951,7 @@
   };
   NativeTimePicker.displayName = 'NativeTimePicker';
 
-  var _jsxFileName$q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
+  var _jsxFileName$q = "/Users/majoo/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
   const getInputPickerValue$1 = date => {
     if (!date) return;
     return moment__default["default"](date).format('HH:mm');
@@ -18158,11 +18228,15 @@
     var selected = _a.selected,
       disabled = _a.disabled,
       language = _a.language,
-      onSetDateValue = _a.onSetDateValue;
+      onSetDateValue = _a.onSetDateValue,
+      isSingle = _a.isSingle;
     var t = reactI18next.useTranslation('MajooUI/datePicker').t;
     var startTime = moment__default["default"]('00:00', 'HH:mm').toDate();
     var endTime = moment__default["default"]('00:00', 'HH:mm').toDate();
-    if (selected && selected.length > 1) {
+    if (isSingle && selected && selected.length) {
+      startTime = selected[0];
+    }
+    if (!isSingle && selected && selected.length > 1) {
       startTime = selected[0];
       endTime = selected[1];
     }
@@ -18183,7 +18257,7 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('dateFromLabel', 'Dari Tanggal')
+          children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
         }), void 0), jsxRuntime.jsx(Text$1, __assign({
           variant: "label",
           color: "disable"
@@ -18198,53 +18272,55 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('timeFromLabel', 'Dari Pukul')
+          children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
         }), void 0), jsxRuntime.jsx(InputTimePicker, {
           onChange: function (val) {
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
+            if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
           },
           size: "sm",
           value: startTime,
-          disabled: !(selected && selected.length > 1)
+          disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
         }, void 0)]
-      }), void 0), jsxRuntime.jsx(Separator$2, {
-        orientation: "horizontal"
-      }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
+      }), void 0), isSingle ? null : jsxRuntime.jsxs(React__default["default"].Fragment, {
+        children: [jsxRuntime.jsx(Separator$2, {
+          orientation: "horizontal"
+        }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: t('dateUntilLabel', 'Hingga Tanggal')
-        }), void 0), jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "disable"
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('dateUntilLabel', 'Hingga Tanggal')
+          }), void 0), jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "disable"
+          }, {
+            children: formattedEndDate
+          }), void 0)]
+        }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: formattedEndDate
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('timeUntilLabel', 'Hingga Pukul')
+          }), void 0), jsxRuntime.jsx(InputTimePicker, {
+            onChange: function (val) {
+              var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
+              var newTime = val.format('HH:mm');
+              var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
+              if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
+            },
+            size: "sm",
+            value: endTime,
+            disabled: !(selected && selected.length > 1)
+          }, void 0)]
         }), void 0)]
-      }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
-        }, {
-          children: t('timeUntilLabel', 'Hingga Pukul')
-        }), void 0), jsxRuntime.jsx(InputTimePicker, {
-          onChange: function (val) {
-            var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
-            var newTime = val.format('HH:mm');
-            var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
-          },
-          size: "sm",
-          value: endTime,
-          disabled: !(selected && selected.length > 1)
-        }, void 0)]
-      }), void 0)]
+      }, void 0)]
     }), void 0);
   };
 
@@ -18306,17 +18382,22 @@
   });
   var CalendarsContainer$1 = styled(Box, {
     width: '100%',
-    padding: '$spacing-03',
     display: 'inline-flex',
     borderRadius: '$lg',
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
-    backgroundColor: '$white',
     justifyContent: 'center',
     gap: '$spacing-03',
     '@md': {
       width: 'unset'
     }
   });
+  var CalenderBoxContainer = styled(Box, {
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+    borderRadius: '$lg',
+    backgroundColor: '$white',
+    padding: '$spacing-03'
+  });
   var CalendarItemContainer$1 = styled(Flex$1, {});
   var DateContainer$1 = styled(Box, {
     width: '100%',
@@ -18389,7 +18470,7 @@
       }
     }
   });
-  var ButtonTime = styled('button', {
+  styled('button', {
     fontWeight: 600,
     fontStyle: 'normal',
     fontSize: 14,
@@ -18435,9 +18516,9 @@
       selected = _a.selected,
       containerStyle = _a.containerStyle,
       disabled = _a.disabled,
-      showTimePicker = _a.showTimePicker,
-      renderTimePicker = _a.renderTimePicker,
-      minDate = _a.minDate,
+      showTimePicker = _a.showTimePicker;
+      _a.renderTimePicker;
+      var minDate = _a.minDate,
       maxDate = _a.maxDate,
       allowReset = _a.allowReset,
       onSetDateValue = _a.onSetDateValue;
@@ -18816,92 +18897,112 @@
       }, void 0);
     };
     var renderTime = function renderTime() {
-      return jsxRuntime.jsxs(Box, __assign({
-        css: {
-          padding: 4
-        }
-      }, {
+      return jsxRuntime.jsxs(React.Fragment, {
         children: [jsxRuntime.jsx(Separator$2, {
-          css: {
-            my: '$spacing-02'
-          }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
+          orientation: "vertical"
+        }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+          selected: selected,
           disabled: disabled,
-          onClick: function () {
-            return setPickerState(function (current) {
-              return __assign(__assign({}, current), {
-                type: TIME_PICKER
-              });
-            });
-          },
-          type: "button"
+          language: language,
+          onSetDateValue: onSetDateValue
         }, {
-          children: selected && selected[0] ? moment__default["default"](selected[0]).format('HH:mm') : moment__default["default"]().format('HH:mm')
+          isSingle: !multiDatePicker
         }), void 0)]
-      }), void 0);
+      }, void 0);
     };
-    var renderButtonTime = function renderButtonTime() {
+    var renderFooterSingleTimePicker = function renderFooterSingleTimePicker() {
       return jsxRuntime.jsxs(Box, __assign({
         css: {
-          padding: 4
+          width: '$full'
         }
       }, {
         children: [jsxRuntime.jsx(Separator$2, {
           css: {
-            my: '$spacing-02'
+            my: '$spacing-03'
+          }
+        }, void 0), jsxRuntime.jsx(Flex$1, __assign({
+          justify: "end",
+          align: "center",
+          css: {
+            padding: 8
           }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
-          disabled: disabled,
-          onClick: function () {
-            return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-          },
-          type: "button"
         }, {
-          children: "Done"
+          children: jsxRuntime.jsxs(Flex$1, __assign({
+            gap: 3
+          }, {
+            children: [jsxRuntime.jsx(Button$4, __assign({
+              buttonType: "ghost",
+              css: {
+                fontWeight: 600
+              },
+              onClick: onCancel,
+              disabled: disabled,
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.cancel', 'Batal', {
+                ns: 'translation'
+              })
+            }), void 0), jsxRuntime.jsx(Button$4, __assign({
+              css: {
+                fontWeight: 600
+              },
+              onClick: onUpdate,
+              disabled: disabled || !(selected && selected.length),
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.save', 'Simpan', {
+                ns: 'translation'
+              })
+            }), void 0)]
+          }), void 0)
         }), void 0)]
       }), void 0);
     };
     if (calendars.length) {
-      return jsxRuntime.jsxs(CalendarsContainer$1, __assign({
-        css: containerStyle
-      }, {
-        children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
-          orientation: "vertical"
-        }, void 0), jsxRuntime.jsxs(Box, {
-          children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
-            gap: 5
-          }, {
-            children: calendars.map(function (calendar, index) {
-              return jsxRuntime.jsxs(React__default["default"].Fragment, {
-                children: [index > 0 && jsxRuntime.jsx(Separator$2, {
-                  orientation: "vertical",
-                  css: {
-                    height: 'auto'
-                  }
-                }, void 0), jsxRuntime.jsxs(DateContainer$1, {
-                  children: [jsxRuntime.jsx(Separator$2, {
+      return jsxRuntime.jsxs(CalenderBoxContainer, {
+        children: [jsxRuntime.jsxs(CalendarsContainer$1, __assign({
+          css: containerStyle
+        }, {
+          children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
+            orientation: "vertical"
+          }, void 0), jsxRuntime.jsxs(Box, {
+            children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
+              gap: 5
+            }, {
+              children: calendars.map(function (calendar, index) {
+                return jsxRuntime.jsxs(React__default["default"].Fragment, {
+                  children: [index > 0 && jsxRuntime.jsx(Separator$2, {
+                    orientation: "vertical",
                     css: {
-                      mb: '$spacing-04',
-                      mt: '$spacing-02'
+                      height: 'auto'
                     }
-                  }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-                  }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker && renderTimePicker()]
-                }, void 0)]
-              }, "".concat(calendar.month).concat(calendar.year));
-            })
-          }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
-        }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
-          children: [jsxRuntime.jsx(Separator$2, {
-            orientation: "vertical"
-          }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
-            selected: selected,
-            disabled: disabled,
-            language: language,
-            onSetDateValue: onSetDateValue
-          }), void 0)]
-        }, void 0)]
-      }), void 0);
+                  }, void 0), jsxRuntime.jsxs(DateContainer$1, {
+                    children: [jsxRuntime.jsx(Separator$2, {
+                      css: {
+                        mb: '$spacing-04',
+                        mt: '$spacing-02'
+                      }
+                    }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+                    }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+                  }, void 0)]
+                }, "".concat(calendar.month).concat(calendar.year));
+              })
+            }), void 0)]
+          }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
+            children: [jsxRuntime.jsx(Separator$2, {
+              orientation: "vertical"
+            }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+              selected: selected,
+              disabled: disabled,
+              language: language,
+              onSetDateValue: onSetDateValue
+            }), void 0)]
+          }, void 0)]
+        }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+      }, void 0);
     }
     return null;
   };
@@ -19485,13 +19586,24 @@
       calendarDate = _c[0],
       setCalendarDate = _c[1];
     var onDateSelected = function onDateSelected(selectedDate) {
-      setDateValue(selectedDate.date);
-      onClose();
+      if (timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.minDate) {
+        if (moment__default["default"](selectedDate.date).isBefore(timePickerProps.minDate)) {
+          setDateValue(timePickerProps.minDate);
+        } else {
+          setDateValue(selectedDate.date);
+        }
+      } else {
+        setDateValue(selectedDate.date);
+      }
+      if (!showTimePicker) {
+        onClose();
+      }
     };
     var updateHandler = function updateHandler() {
       if (dateValue && onChange) {
         onChange(dateValue);
       }
+      onClose();
     };
     var dayzedData = dayzed.useDayzed(__assign(__assign({}, props), {
       date: calendarDate,
@@ -19508,41 +19620,22 @@
       }
     }, [selected]);
     React.useEffect(function () {
-      if (dateValue && !isMultiDatePicker && onChange) {
+      if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
         onChange(dateValue);
       }
     }, [dateValue]);
-    var renderTimePicker = function renderTimePicker(props) {
-      return jsxRuntime.jsx(Box, __assign({
-        css: {
-          padding: '40px 60px'
-        }
-      }, {
-        children: jsxRuntime.jsx(NativeTimePicker, __assign({
-          size: "lg",
-          value: dateValue ? moment__default["default"](dateValue) : moment__default["default"](),
-          minDate: minDate,
-          maxDate: maxDate,
-          disabled: disabled,
-          onChange: function (date) {
-            setDateValue(new Date(date));
-          }
-        }, props), void 0)
-      }), void 0);
-    };
     return jsxRuntime.jsx(CalendarBox, __assign({
-      onUpdate: isMultiDatePicker ? updateHandler : undefined,
+      onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
       onCancel: onClose,
       selected: dateValue ? [dateValue] : undefined,
       advanceView: advanceView,
       disabled: disabled,
       onCalendarDateChange: setCalendarDate,
       showTimePicker: showTimePicker,
-      renderTimePicker: function () {
-        return renderTimePicker(timePickerProps);
-      },
       minDate: minDate,
       maxDate: maxDate
+    }, showTimePicker && {
+      onSetDateValue: setDateValue
     }, dayzedData), void 0);
   };
   var CalendarRangePicker = function CalendarRangePicker(_a) {
@@ -20126,7 +20219,6 @@
       onClose = _a.onClose,
       mobileOnly = _a.mobileOnly,
       desktopOnly = _a.desktopOnly,
-      advanceOptions = _a.advanceOptions,
       drawerCss = _a.drawerCss,
       _g = _a.drawerContentCss,
       drawerContentCss = _g === void 0 ? {} : _g,
@@ -20225,22 +20317,20 @@
       }
     };
     var renderDatePicker = function renderDatePicker() {
-      var options = language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn;
-      var advancePickerReducer = (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.reducer) || advancePickerDate;
       var handleDatePickerChange = function handleDatePickerChange(value) {
         if (showRangeControl || type === 'range_picker') {
           if (rangePickerType === 'monthly') {
             dispatch({
               type: 'UPDATE',
-              payload: advancePickerReducer('RANGE_MONTH', value)
+              payload: advancePickerDate('RANGE_MONTH', value)
             });
-            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerReducer('RANGE_MONTH', value));
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
           } else {
             dispatch({
               type: 'UPDATE',
-              payload: advancePickerReducer('RANGE_WEEK', value)
+              payload: advancePickerDate('RANGE_WEEK', value)
             });
-            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerReducer('RANGE_WEEK', value));
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
           }
         } else {
           dispatch({
@@ -20252,10 +20342,10 @@
       };
       return jsxRuntime.jsx(DatePicker, {
         advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
-          options: (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.options) || options,
+          options: language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn,
           disabled: disabled,
           optionHandler: function (value) {
-            var reducedResult = advancePickerReducer(value, undefined);
+            var reducedResult = advancePickerDate(value, undefined);
             var dateAsString = moment__default["default"](reducedResult[1]).format('YYYY-MM-DD');
             var payload = [reducedResult[0], moment__default["default"]("".concat(dateAsString, " 23:59"), 'YYYY-MM-DD HH:mm').toDate()];
             dispatch({
@@ -20527,23 +20617,21 @@
       _f = _a.isInvalid,
       isInvalid = _f === void 0 ? false : _f,
       css = _a.css,
-      advanceOptions = _a.advanceOptions,
-      props = __rest(_a, ["onChange", "placeholder", "size", "disabled", "placement", "readOnly", "isInvalid", "css", "advanceOptions"]);
+      props = __rest(_a, ["onChange", "placeholder", "size", "disabled", "placement", "readOnly", "isInvalid", "css"]);
     var _g = reactI18next.useTranslation('translation'),
       t = _g.t,
       i18n = _g.i18n;
     var language = i18n.language;
     var pickerOptions = language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn;
-    var advancePickerReducer = (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.reducer) || advancePickerDate;
     return jsxRuntime.jsx(InputSelect, __assign({}, props, {
-      option: ((advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.options) || pickerOptions).map(function (option) {
+      option: pickerOptions.map(function (option) {
         return {
           name: option.label,
           value: option.value
         };
       }),
       onChange: function (selectedOption) {
-        if (onChange) onChange(advancePickerReducer(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, undefined));
+        if (onChange) onChange(advancePickerDate(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, undefined));
       },
       placeholder: placeholder || t('placeholder.select', 'Pilih'),
       size: size,
@@ -20556,7 +20644,7 @@
   });
 
   const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-  var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
+  var _jsxFileName$p = "/Users/majoo/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -20900,7 +20988,7 @@
   };
 
   const _excluded$8 = ["className", "children", "onClick", "type", "size"];
-  var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
+  var _jsxFileName$o = "/Users/majoo/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
   const TagWrapper$1 = styled('div', {
     boxSizing: 'border-box',
     fontSize: '12px',
@@ -21064,7 +21152,7 @@
     _excluded2$1 = ["children", "activeTabs"],
     _excluded3$1 = ["children", "icon", "activeTabs", "value"],
     _excluded4 = ["activeTabs"];
-  var _jsxFileName$n = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tabs/Tabs.js";
+  var _jsxFileName$n = "/Users/majoo/majoo-ui/packages/react/src/components/tabs/Tabs.js";
   const StyledTabs = styled(TabsPrimitive__namespace.Root, {
     display: 'flex',
     flexDirection: 'column',
@@ -21403,7 +21491,7 @@
   };
 
   const _excluded$6 = ["children", "variantIcon"];
-  var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
+  var _jsxFileName$m = "/Users/majoo/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
     display: 'inline-flex',
@@ -21558,7 +21646,7 @@
   };
 
   const _excluded$5 = ["className", "children", "radius", "padding", "width", "height"];
-  var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
+  var _jsxFileName$l = "/Users/majoo/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -21810,7 +21898,7 @@
   };
 
   const _excluded$4 = ["isActive", "onClick"];
-  var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
+  var _jsxFileName$k = "/Users/majoo/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
   const PrevNextButton = styled(Text$1, {
     padding: '$spacing-01',
     cursor: 'pointer',
@@ -22298,7 +22386,7 @@
   };
 
   const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
-  var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
+  var _jsxFileName$j = "/Users/majoo/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
   const LimitContainer = styled(Flex$1, {
     cursor: 'pointer'
   });
@@ -22531,7 +22619,7 @@
   }
 
   const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
-  var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
+  var _jsxFileName$i = "/Users/majoo/majoo-ui/packages/react/src/components/pagination/Pagination.js";
   function Pagination(_ref) {
     let {
         limit,
@@ -24856,7 +24944,7 @@
     return jsxRuntime.jsx("div", {}, void 0);
   };
 
-  var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
+  var _jsxFileName$h = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
   const DateColumn = ({
     value,
     customFormat
@@ -24969,7 +25057,7 @@
     return addThousandSeparator(param);
   };
 
-  var _jsxFileName$g = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
+  var _jsxFileName$g = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
   const rowExpanderColumn = {
     id: 'expander',
     Header: () => null,
@@ -25010,7 +25098,7 @@
     unsortable: true
   };
 
-  var _jsxFileName$f = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
+  var _jsxFileName$f = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderMultipleColumn.js";
   const rowExpanderMultipleColumn = {
     id: 'multiple-expander',
     Header: () => null,
@@ -25044,7 +25132,7 @@
     unsortable: true
   };
 
-  var _jsxFileName$e = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
+  var _jsxFileName$e = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
   const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
     options,
@@ -25177,7 +25265,7 @@
     unsortable: true
   });
 
-  var _jsxFileName$d = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
+  var _jsxFileName$d = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
   const rowSelectionColumn = {
     id: 'selection',
     Header: ({
@@ -25226,7 +25314,7 @@
     unsortable: true
   };
 
-  var _jsxFileName$c = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
+  var _jsxFileName$c = "/Users/majoo/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionCallbackColumn.js";
   const rowSelectionWithCallbackColumn = (onCheckedChange, onAllCheckedChange) => ({
     id: 'selection',
     Header: ({
@@ -25571,7 +25659,7 @@
   };
 
   const _excluded$1 = ["children"];
-  var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
+  var _jsxFileName$b = "/Users/majoo/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
   const overlayShow = keyframes({
     '0%': {
       opacity: 0
@@ -26206,7 +26294,7 @@
   const _excluded = ["side", "align", "children"],
     _excluded2 = ["children"],
     _excluded3 = ["asChild"];
-  var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
+  var _jsxFileName$a = "/Users/majoo/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
   const Context = /*#__PURE__*/React__default["default"].createContext();
   const slideUpAndFade = keyframes({
     '0%': {
@@ -28341,7 +28429,7 @@
     });
   }
 
-  var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
+  var _jsxFileName$9 = "/Users/majoo/majoo-ui/packages/react/src/components/upload/Upload.js";
   const Input$2 = styled('input', {
     display: 'none !important'
   });
@@ -28430,7 +28518,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -28440,7 +28528,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 125,
+        lineNumber: 126,
         columnNumber: 5
       }
     }));
@@ -28501,6 +28589,7 @@
     const [aspect, setAspect] = React.useState(isDefaultCustomRatio ? 0 : 1);
     const [isLoading, setIsLoading] = React.useState(false);
     const [cropperImgRatio, setCropperImgRatio] = React.useState(null);
+    const isMobile = useMediaQuery('(max-width: 767px)');
     React.useEffect(() => {
       if (loading) {
         setIsLoading(true);
@@ -28911,7 +29000,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 612,
+          lineNumber: 615,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -28921,7 +29010,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 616,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -28936,7 +29025,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 623,
+              lineNumber: 626,
               columnNumber: 16
             }
           });
@@ -28947,7 +29036,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 629,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28957,7 +29046,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 627,
+            lineNumber: 630,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -28966,7 +29055,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 631,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28979,7 +29068,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 630,
+            lineNumber: 633,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -28988,7 +29077,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 638,
+            lineNumber: 641,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -28998,7 +29087,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 641,
+            lineNumber: 644,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29015,7 +29104,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 652,
+              lineNumber: 655,
               columnNumber: 16
             }
           });
@@ -29025,7 +29114,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 658,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29035,7 +29124,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 656,
+            lineNumber: 659,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29044,7 +29133,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 657,
+            lineNumber: 660,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29057,7 +29146,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 658,
+            lineNumber: 661,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29067,14 +29156,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 666,
+            lineNumber: 669,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 667,
+            lineNumber: 670,
             columnNumber: 17
           }
         }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29082,7 +29171,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 668,
+            lineNumber: 671,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29097,7 +29186,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 669,
+            lineNumber: 672,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29110,7 +29199,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 685,
+            lineNumber: 688,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -29119,7 +29208,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 693,
+            lineNumber: 696,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -29127,7 +29216,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 696,
+            lineNumber: 699,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -29142,7 +29231,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 707,
+          lineNumber: 710,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29156,7 +29245,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 708,
+          lineNumber: 711,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -29182,7 +29271,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 709,
+          lineNumber: 712,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29190,14 +29279,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 725,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 723,
+          lineNumber: 726,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29209,7 +29298,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 734,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -29225,7 +29314,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 735,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -29237,21 +29326,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 743,
+          lineNumber: 746,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 747,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 746,
+          lineNumber: 749,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -29260,7 +29349,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 747,
+          lineNumber: 750,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -29268,7 +29357,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 751,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -29278,7 +29367,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 750,
+          lineNumber: 753,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -29288,7 +29377,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 757,
+          lineNumber: 760,
           columnNumber: 19
         }
       }, error));
@@ -29296,10 +29385,11 @@
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
         onOpenChange: () => setCrop(null),
+        isMobile: isMobile,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 767,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -29307,7 +29397,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 765,
+          lineNumber: 768,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -29315,7 +29405,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 766,
+          lineNumber: 769,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -29328,7 +29418,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 771,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -29341,7 +29431,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 771,
+          lineNumber: 774,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -29352,7 +29442,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 772,
+          lineNumber: 775,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -29366,14 +29456,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 776,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 784,
+          lineNumber: 787,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29385,14 +29475,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 785,
+          lineNumber: 788,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 787,
+          lineNumber: 790,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -29400,7 +29490,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 789,
+          lineNumber: 792,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -29412,7 +29502,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 790,
+          lineNumber: 793,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -29420,7 +29510,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 797,
+          lineNumber: 800,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -29429,7 +29519,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 798,
+          lineNumber: 801,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -29439,7 +29529,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 801,
+          lineNumber: 804,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -29456,7 +29546,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 810,
+        lineNumber: 813,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -29465,7 +29555,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 813,
+        lineNumber: 816,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -30274,7 +30364,7 @@
   };
   Device.displayName = 'DevicePreview';
 
-  var _jsxFileName$8 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
+  var _jsxFileName$8 = "/Users/majoo/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
   const Separator$1 = styled('div', {
     height: 20,
     width: 1,
@@ -30427,7 +30517,7 @@
 
   var img$d = "data:image/gif;base64,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";
 
-  var _jsxFileName$7 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
+  var _jsxFileName$7 = "/Users/majoo/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
   const Container$7 = styled('div', {
     userSelect: 'none',
     margin: 'auto',
@@ -32388,7 +32478,7 @@
     })));
   }
 
-  var _jsxFileName$6 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
+  var _jsxFileName$6 = "/Users/majoo/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
   const CheckBoard = styled(Flex$1, {
     background: '$bgwhite',
     border: '1px solid #E5E7EB',
@@ -32589,7 +32679,7 @@
     }, "%")));
   }
 
-  var _jsxFileName$5 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
+  var _jsxFileName$5 = "/Users/majoo/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
   const Container$6 = styled(Flex$1, {
     background: '$white',
     padding: 16,
@@ -33109,7 +33199,7 @@
   };
   var ColorPicker$1 = common.ColorWrap(ColorPicker);
 
-  var _jsxFileName$4 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
+  var _jsxFileName$4 = "/Users/majoo/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
   const StepWizardContext = /*#__PURE__*/React__default["default"].createContext({});
   const Stepper = StepWizard__default["default"];
   Stepper.displayName = 'Stepper';
@@ -33832,7 +33922,7 @@
     isLazyMount: true
   };
 
-  var _jsxFileName$3 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
+  var _jsxFileName$3 = "/Users/majoo/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
   function Collapse({
     children,
     isOpen
@@ -33875,7 +33965,7 @@
     isOpen: false
   };
 
-  var _jsxFileName$2 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
+  var _jsxFileName$2 = "/Users/majoo/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
@@ -34236,7 +34326,7 @@
     useBoxMethod: true
   };
 
-  var _jsxFileName$1 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/editableTable/transition.js";
+  var _jsxFileName$1 = "/Users/majoo/majoo-ui/packages/react/src/components/editableTable/transition.js";
   function Collapalse({
     children,
     isOpen
@@ -52518,234 +52608,11 @@
       }, void 0)]
     }), void 0);
   }
-  var rotateKeyframe = keyframes({
-    '100%': {
-      transform: 'rotate(360deg)'
-    }
-  });
-  var dashKeyframe = keyframes({
-    '0%': {
-      strokeDasharray: '0,125',
-      strokeDashoffset: -8
-    },
-    '50%': {
-      strokeDasharray: 125,
-      strokeDashoffset: -10
-    },
-    '100%': {
-      strokeDasharray: 125,
-      strokeDashoffset: -125
-    }
-  });
-  var LoadingContainer = react.styled('div', {
-    position: 'absolute',
-    width: 152,
-    height: 152,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%,-50%)'
-  });
-  var LogoSvg = react.styled('svg', {
-    height: 152,
-    position: 'absolute',
-    width: 152
-  });
-  var LoadingSvg = react.styled('svg', {
-    animation: "".concat(rotateKeyframe, " 2s linear infinite"),
-    height: 152,
-    position: 'absolute',
-    width: 152,
-    top: '-22px'
-  });
-  var LoadingBackground = react.styled('div', {
-    background: 'conic-gradient(#fff5f6, #FF97A4, #02B4F3, #81CF77, #6D60AE, #FF6C53 320deg)',
-    width: '100%',
-    height: '100%'
-  });
-  var LoadingCircle = react.styled('circle', {
-    stroke: 'white',
-    strokeLinecap: 'round',
-    transformOrigin: '50% 50%',
-    transform: 'rotate(-102deg)',
-    animation: "".concat(dashKeyframe, " 1.5s ease-in-out infinite")
-  });
-  var LoadingLabel = react.styled(Paragraph, {
-    position: 'relative',
-    top: 100
-  });
-  function CircularLoadingBar(_a) {
-    var label = _a.label;
-    return jsxRuntime.jsxs(LoadingContainer, {
-      children: [jsxRuntime.jsxs(LogoSvg, __assign({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "152",
-        height: "152",
-        viewBox: "0 0 152 152",
-        fill: "none"
-      }, {
-        children: [jsxRuntime.jsxs("g", __assign({
-          filter: "url(#filter0_ddd_4303_695)"
-        }, {
-          children: [jsxRuntime.jsx("rect", {
-            x: "46.0004",
-            y: "23.9999",
-            width: "60",
-            height: "60",
-            rx: "30",
-            fill: "url(#paint0_linear_4303_695)"
-          }, void 0), jsxRuntime.jsx("rect", {
-            x: "46",
-            y: "24",
-            width: "60",
-            height: "60",
-            rx: "30",
-            stroke: "url(#paint1_linear_4303_695)",
-            "stroke-opacity": "0.99",
-            "stroke-width": "5"
-          }, void 0), jsxRuntime.jsx("path", {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
-            d: "M87.9634 61.5652C87.9634 63.0968 86.7378 64.3333 85.2195 64.3333C83.7013 64.3333 82.4757 63.0968 82.4757 61.5652C82.4757 58.1698 82.4757 54.7928 82.4757 51.4159C82.9329 51.4159 83.3902 51.4159 83.8476 51.4159C84.1768 51.4159 84.3414 51.1206 84.1037 50.8623C83.0426 49.6074 81.9633 48.371 80.9024 47.1162C80.628 46.7471 80.5366 46.821 80.2805 47.1162C79.2195 48.371 78.1402 49.6074 77.0793 50.8623C76.8415 51.1391 77.0061 51.4159 77.3354 51.4159C77.7927 51.4159 78.25 51.4159 78.7073 51.4159C78.7073 54.8113 78.7256 58.1698 78.7256 61.5652C78.7256 63.0968 77.5 64.3333 75.9817 64.3333C74.4634 64.3333 73.2378 63.0968 73.2378 61.5652C73.2378 59.1848 73.2561 56.8227 73.2561 54.4607C73.7134 54.4607 74.1707 54.4607 74.628 54.4607C74.9573 54.4607 75.1219 54.1654 74.8841 53.9071C73.8232 52.6522 72.7439 51.4159 71.6829 50.161C71.4085 49.792 71.3171 49.8658 71.061 50.161C70 51.4159 68.9207 52.6522 67.8598 53.9071C67.6219 54.1839 67.7866 54.4607 68.1159 54.4607C68.5732 54.4607 69.0305 54.4607 69.4878 54.4607V54.5899V61.5652C69.4878 63.0968 68.2622 64.3333 66.7439 64.3333C65.2256 64.3333 64 63.0968 64 61.5652V50.7515C64 48.7217 64.8232 46.8579 66.1585 45.5108C67.4939 44.1637 69.3415 43.3333 71.372 43.3333C73.128 43.3333 74.7378 43.9607 76 44.9941C77.2622 43.9607 78.872 43.3333 80.628 43.3333C82.6586 43.3333 84.5061 44.1637 85.8414 45.5108C87.1768 46.8579 88 48.7217 88 50.7515V61.5652H87.9634Z",
-            fill: "white"
-          }, void 0)]
-        }), void 0), jsxRuntime.jsxs("defs", {
-          children: [jsxRuntime.jsxs("filter", __assign({
-            id: "filter0_ddd_4303_695",
-            x: "0.5",
-            y: "0.5",
-            width: "151",
-            height: "151",
-            filterUnits: "userSpaceOnUse",
-            "color-interpolation-filters": "sRGB"
-          }, {
-            children: [jsxRuntime.jsx("feFlood", {
-              "flood-opacity": "0",
-              result: "BackgroundImageFix"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              in: "SourceAlpha",
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-              result: "hardAlpha"
-            }, void 0), jsxRuntime.jsx("feOffset", {
-              dy: "22"
-            }, void 0), jsxRuntime.jsx("feGaussianBlur", {
-              stdDeviation: "21.5"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
-            }, void 0), jsxRuntime.jsx("feBlend", {
-              mode: "normal",
-              in2: "BackgroundImageFix",
-              result: "effect1_dropShadow_4303_695"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              in: "SourceAlpha",
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-              result: "hardAlpha"
-            }, void 0), jsxRuntime.jsx("feOffset", {
-              dy: "9"
-            }, void 0), jsxRuntime.jsx("feGaussianBlur", {
-              stdDeviation: "12"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"
-            }, void 0), jsxRuntime.jsx("feBlend", {
-              mode: "normal",
-              in2: "effect1_dropShadow_4303_695",
-              result: "effect2_dropShadow_4303_695"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              in: "SourceAlpha",
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-              result: "hardAlpha"
-            }, void 0), jsxRuntime.jsx("feOffset", {
-              dy: "3"
-            }, void 0), jsxRuntime.jsx("feGaussianBlur", {
-              stdDeviation: "4.5"
-            }, void 0), jsxRuntime.jsx("feColorMatrix", {
-              type: "matrix",
-              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"
-            }, void 0), jsxRuntime.jsx("feBlend", {
-              mode: "normal",
-              in2: "effect2_dropShadow_4303_695",
-              result: "effect3_dropShadow_4303_695"
-            }, void 0), jsxRuntime.jsx("feBlend", {
-              mode: "normal",
-              in: "SourceGraphic",
-              in2: "effect3_dropShadow_4303_695",
-              result: "shape"
-            }, void 0)]
-          }), void 0), jsxRuntime.jsxs("linearGradient", __assign({
-            id: "paint0_linear_4303_695",
-            x1: "76.0004",
-            y1: "23.9999",
-            x2: "76.0004",
-            y2: "83.9999",
-            gradientUnits: "userSpaceOnUse"
-          }, {
-            children: [jsxRuntime.jsx("stop", {
-              "stop-color": "#B3DCA7"
-            }, void 0), jsxRuntime.jsx("stop", {
-              offset: "1",
-              "stop-color": "#22BDB6"
-            }, void 0)]
-          }), void 0), jsxRuntime.jsxs("linearGradient", __assign({
-            id: "paint1_linear_4303_695",
-            x1: "106",
-            y1: "68.8332",
-            x2: "50",
-            y2: "37.3332",
-            gradientUnits: "userSpaceOnUse"
-          }, {
-            children: [jsxRuntime.jsx("stop", {
-              "stop-color": "#F4F4F4"
-            }, void 0), jsxRuntime.jsx("stop", {
-              offset: "1",
-              "stop-color": "white"
-            }, void 0)]
-          }), void 0)]
-        }, void 0)]
-      }), void 0), jsxRuntime.jsxs(LoadingSvg, __assign({
-        viewBox: "0 0 100 100",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, {
-        children: [jsxRuntime.jsx("defs", {
-          children: jsxRuntime.jsx("mask", __assign({
-            id: "mask"
-          }, {
-            children: jsxRuntime.jsx(LoadingCircle, {
-              cx: "50",
-              cy: "50",
-              r: "20",
-              fill: "none",
-              "stroke-width": "4",
-              "stroke-miterlimit": "10"
-            }, void 0)
-          }), void 0)
-        }, void 0), jsxRuntime.jsx("foreignObject", __assign({
-          x: "0",
-          y: "0",
-          width: "100",
-          height: "100",
-          mask: "url(#mask)"
-        }, {
-          children: jsxRuntime.jsx(LoadingBackground, {}, void 0)
-        }), void 0)]
-      }), void 0), label && jsxRuntime.jsx(LoadingLabel, __assign({
-        color: "white",
-        align: "center"
-      }, {
-        children: label
-      }), void 0)]
-    }, void 0);
-  }
   var interval;
   function LoadingBar(props) {
     var show = props.show,
       onCompleted = props.onCompleted,
-      intervalTime = props.interval,
-      isPageLoader = props.isPageLoader,
-      pageLoaderLabel = props.pageLoaderLabel;
+      intervalTime = props.interval;
     var _a = React.useState(0),
       progress = _a[0],
       setProgress = _a[1];
@@ -52778,34 +52645,6 @@
         onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
       }
     }, [progress, onCompleted]);
-    if (!show) return jsxRuntime.jsx(React__default["default"].Fragment, {}, void 0);
-    if (isPageLoader) {
-      return jsxRuntime.jsx(ModalDialog, __assign({
-        open: show,
-        modal: true,
-        allowPinchZoom: false,
-        width: "100%",
-        layer: 2000,
-        isMobile: false,
-        css: {
-          borderRadius: '2px !important',
-          '& > div': {
-            backgroundColor: 'transparent !important',
-            borderRadius: '2px !important'
-          }
-        }
-      }, {
-        children: jsxRuntime.jsx(ModalDialogContent, __assign({
-          css: {
-            padding: '$spacing-08 $spacing-11'
-          }
-        }, {
-          children: jsxRuntime.jsx(CircularLoadingBar, {
-            label: pageLoaderLabel
-          }, void 0)
-        }), void 0)
-      }), void 0);
-    }
     return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
       visibility: true
     }), void 0) : jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
@@ -52818,8 +52657,7 @@
     show: false,
     interval: 100,
     description: 'Loading...',
-    size: 'md',
-    isPageLoader: false
+    size: 'md'
   };
 
   var Container$4 = styled(Flex$1, {
@@ -54002,6 +53840,7 @@
       label: tooltipLabel(name, variants)
     }, {
       children: jsxRuntime.jsxs(Box, __assign({
+        gap: 2,
         css: __assign({
           display: 'flex',
           alignItems: 'center',
@@ -54049,7 +53888,7 @@
               padding: '4px 8px',
               minWidth: 'unset',
               justifyContent: 'flex-start',
-              marginRight: 'auto'
+              mr: 'auto'
             },
             type: "varian"
           }, {
@@ -56202,7 +56041,7 @@
     innerRadius: 70
   };
 
-  var _jsxFileName = "/home/alfiantryp/Project/majoo-ui/packages/react/src/colors/Colors.js";
+  var _jsxFileName = "/Users/majoo/majoo-ui/packages/react/src/colors/Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
     padding: 15,
@@ -57867,7 +57706,6 @@
   exports.PriceColumn = PriceColumn;
   exports.Progress = Progress$1;
   exports.ProgressIndicator = ProgressIndicator;
-  exports.Provider = Provider;
   exports.RANGE_CONTROL = RANGE_CONTROL;
   exports.RANGE_MONTH = RANGE_MONTH;
   exports.RANGE_PICKER = RANGE_PICKER;
@@ -57928,9 +57766,6 @@
   exports.ToastContext = ToastContext;
   exports.ToastProvider = ToastProvider;
   exports.Tooltip = Tooltip$1;
-  exports.TooltipBase = TooltipBase;
-  exports.TooltipContent = TooltipContent;
-  exports.TooltipTrigger = TooltipTrigger;
   exports.UPDATE_PICKER = UPDATE_PICKER;
   exports.Upload = Upload;
   exports.WEEKLY = WEEKLY;