@majoo-ui/react 1.60.37-rc.4 → 1.60.37-rc.6

package/index.esm.js

@@ -5,8 +5,8 @@ import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CloseOutline, UserFilled, CircleQuestionOutline, CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ArrowLeftOutline, ArrowRightOutline, PlusPrimitive, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
@@ -54,7 +54,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 
-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
@@ -63,7 +63,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$12,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1397,7 +1397,7 @@ const applyGlobalStyles = additionaStyles => {
   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,
@@ -1413,7 +1413,7 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$11,
       lineNumber: 14,
       columnNumber: 5
     }
@@ -1527,27 +1527,25 @@ const Flex$1 = styled('div', {
       gap: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     m: seqNumberVariants$1(value => ({
-      margin: `$spacing-${value < 10 ? '0' + value : value}`
+      m: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     mt: seqNumberVariants$1(value => ({
-      marginTop: `$spacing-${value < 10 ? '0' + value : value}`
+      mt: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     mb: seqNumberVariants$1(value => ({
-      marginBottom: `$spacing-${value < 10 ? '0' + value : value}`
+      mb: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     mr: seqNumberVariants$1(value => ({
-      marginRight: `$spacing-${value < 10 ? '0' + value : value}`
+      mr: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     ml: seqNumberVariants$1(value => ({
-      marginLeft: `$spacing-${value < 10 ? '0' + value : value}`
+      ml: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     mx: seqNumberVariants$1(value => ({
-      marginRight: `$spacing-${value < 10 ? '0' + value : value}`,
-      marginLeft: `$spacing-${value < 10 ? '0' + value : value}`
+      mx: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     my: seqNumberVariants$1(value => ({
-      marginTop: `$spacing-${value < 10 ? '0' + value : value}`,
-      marginBottom: `$spacing-${value < 10 ? '0' + value : value}`
+      my: `$spacing-${value < 10 ? '0' + value : value}`
     }), 12),
     mobileOnly: {
       true: {
@@ -1566,51 +1564,62 @@ const Flex$1 = styled('div', {
     }
   }
 });
+Flex$1.propTypes = {
+  direction: PropTypes.string,
+  align: PropTypes.string,
+  justify: PropTypes.string,
+  wrap: PropTypes.string,
+  gap: PropTypes.number,
+  m: PropTypes.number,
+  mt: PropTypes.number,
+  mb: PropTypes.number,
+  mr: PropTypes.number,
+  ml: PropTypes.number,
+  mx: PropTypes.number,
+  my: PropTypes.number
+};
 Flex$1.defaultProps = {
   direction: 'row',
   align: 'stretch',
   justify: 'start',
-  wrap: 'noWrap'
+  wrap: 'noWrap',
+  gap: 0
 };
 Flex$1.displayName = 'Flex';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
 }
 
+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: {
@@ -1795,21 +1804,25 @@ const GridComponent = styled('div', {
     }
   }
 });
-const Grid = _a => {
-  var {
+const Grid = _ref => {
+  let {
       children
-    } = _a,
-    props = __rest(_a, ["children"]);
-  return jsx(GridComponent, Object.assign({}, props, {
-    css: Object.assign(Object.assign({}, props.css), {
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
+    css: Object.assign({}, props.css, {
       gridAutoColumns: props.autoColumns,
       gridAutoRows: props.autoRows,
       gridTemplateColumns: props.templateColumns,
       gridTemplateRows: props.templateRows
-    })
-  }, {
-    children: children
-  }), void 0);
+    }),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$10,
+      lineNumber: 200,
+      columnNumber: 5
+    }
+  }), children);
 };
 Grid.propTypes = {
   align: PropTypes.string,
@@ -1843,22 +1856,26 @@ const GridItemComponent = styled('div', {
     }), 10))
   }
 });
-const GridItem = _a => {
-  var {
+const GridItem = _ref2 => {
+  let {
       children
-    } = _a,
-    props = __rest(_a, ["children"]);
-  return jsx(GridItemComponent, Object.assign({}, props, {
-    css: Object.assign(Object.assign({}, props.css), {
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+  return /*#__PURE__*/React__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
-    })
-  }, {
-    children: children
-  }), void 0);
+    }),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$10,
+      lineNumber: 265,
+      columnNumber: 5
+    }
+  }), children);
 };
 GridItem.propTypes = {
   gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -1871,38 +1888,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure " + obj);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  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$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',
@@ -1945,7 +1932,7 @@ const PageContainer = _ref => {
       css,
       contentHeader
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
     id: "retina-container",
     css: Object.assign({
@@ -1954,7 +1941,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$$,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -2313,6 +2300,43 @@ Paragraph.defaultProps = {
 };
 Paragraph.displayName = 'Paragraph';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const StyledLink = styled('a', {
   fontSize: '$short-content-regular',
   textDecoration: 'underline',
@@ -2366,8 +2390,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -2469,7 +2493,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$Y,
+    fileName: _jsxFileName$_,
     lineNumber: 111,
     columnNumber: 3
   }
@@ -2490,7 +2514,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$Y,
+    fileName: _jsxFileName$_,
     lineNumber: 128,
     columnNumber: 3
   }
@@ -2526,7 +2550,7 @@ const BannerLink = ({
   return /*#__PURE__*/React.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 159,
       columnNumber: 5
     }
@@ -2538,7 +2562,7 @@ const BannerLink = ({
     color: variant ? generateVariant(variant) : generateVariant(value.variant),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 161,
       columnNumber: 9
     }
@@ -2564,7 +2588,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$Y,
+    fileName: _jsxFileName$_,
     lineNumber: 193,
     columnNumber: 3
   }
@@ -2576,7 +2600,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$Y,
+    fileName: _jsxFileName$_,
     lineNumber: 195,
     columnNumber: 7
   }
@@ -2585,7 +2609,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$Y,
+    fileName: _jsxFileName$_,
     lineNumber: 202,
     columnNumber: 9
   }
@@ -2596,14 +2620,14 @@ const SingleTagBanner = props => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 210,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 211,
       columnNumber: 7
     }
@@ -2612,7 +2636,7 @@ const SingleTagBanner = props => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 212,
       columnNumber: 9
     }
@@ -2622,7 +2646,7 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 213,
       columnNumber: 27
     }
@@ -2635,21 +2659,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 214,
       columnNumber: 11
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 222,
       columnNumber: 29
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 223,
       columnNumber: 35
     }
@@ -2662,7 +2686,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 226,
       columnNumber: 9
     }
@@ -2671,7 +2695,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 234,
       columnNumber: 11
     }
@@ -2684,7 +2708,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 238,
       columnNumber: 9
     }
@@ -2703,7 +2727,7 @@ const Banner = _ref => {
       bannerBlock,
       icon
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
     hasAction: !!onClick,
@@ -2712,7 +2736,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 260,
       columnNumber: 5
     }
@@ -2729,7 +2753,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 262,
       columnNumber: 9
     }
@@ -2740,7 +2764,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 269,
       columnNumber: 11
     }
@@ -2755,7 +2779,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$_,
       lineNumber: 272,
       columnNumber: 9
     }
@@ -3367,8 +3391,8 @@ Card.defaultProps = {
 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': {
@@ -3413,7 +3437,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Z,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3423,19 +3447,19 @@ const BreadcrumbBase = _ref => {
   let {
       children
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Z,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Z,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -3687,8 +3711,8 @@ Badge.defaultProps = {
 };
 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.Root, {
   width: '32px',
   height: '32px',
@@ -3732,7 +3756,7 @@ function Avatar(_ref) {
       onClick,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
     onClick: onClick,
@@ -3740,7 +3764,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$Y,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -3750,7 +3774,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$Y,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -3758,21 +3782,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$Y,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$Y,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$Y,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -3789,8 +3813,8 @@ Avatar.defaultProps = {
   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',
@@ -3839,7 +3863,7 @@ function Image(_ref) {
       cssFallback,
       rounded
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   const {
     t
   } = useTranslation('translation');
@@ -3858,7 +3882,7 @@ function Image(_ref) {
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$X,
         lineNumber: 61,
         columnNumber: 7
       }
@@ -3874,14 +3898,14 @@ function Image(_ref) {
       }, cssFallback),
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$X,
         lineNumber: 75,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TextFallback, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$X,
         lineNumber: 76,
         columnNumber: 9
       }
@@ -4475,6 +4499,8 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 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
 } = foundations;
@@ -4561,10 +4587,10 @@ const TooltipBase = styled(TooltipPrimitive.Root, {
     color: 'ligth'
   }
 });
+
 // Exports
 const Provider = TooltipPrimitive.Provider;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = StyledContent$6;
 const dark = {
   color: foundations.colors.white,
   backgroundColor: foundations.colors.gray800
@@ -4579,8 +4605,8 @@ const darkArrow = {
 const lightArrow = {
   fill: foundations.colors.bgWhite
 };
-const Tooltip$1 = _a => {
-  var {
+const Tooltip$1 = _ref => {
+  let {
       children,
       label,
       color,
@@ -4589,52 +4615,98 @@ const Tooltip$1 = _a => {
       side,
       align,
       delayDuration
-    } = _a,
-    rest = __rest(_a, ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"]);
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   const [open, setOpen] = useState(false);
-  return jsx(Provider, {
-    children: jsxs(TooltipBase, Object.assign({}, rest, {
-      open: withClick ? open : undefined,
-      delayDuration: delayDuration
-    }, {
-      children: [jsx(TooltipTrigger, Object.assign({
-        asChild: true
-      }, {
-        children: jsx(TriggerSpan, Object.assign({
-          onClick: () => withClick && !open && setOpen(true)
-        }, {
-          children: children
-        }), void 0)
-      }), void 0), jsx(TooltipPrimitive.Portal, {
-        children: jsxs(StyledContent$6, Object.assign({
-          align: align,
-          side: side,
-          sideOffset: 5,
-          css: color === 'dark' ? Object.assign(Object.assign({}, dark), css) : Object.assign(Object.assign({}, ligth), css),
-          onPointerDownOutside: () => setTimeout(() => {
-            setOpen(false);
-          }, 100)
-        }, {
-          children: [label, jsx(StyledArrow$1, {
-            offset: 10,
-            css: color === 'dark' ? darkArrow : lightArrow
-          }, void 0)]
-        }), void 0)
-      }, void 0)]
-    }), void 0)
-  }, void 0);
+  return /*#__PURE__*/React__default.createElement(Provider, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 92,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
+    open: withClick ? open : undefined,
+    delayDuration: delayDuration,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 93,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(TooltipTrigger, {
+    asChild: true,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 94,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(TriggerSpan, {
+    onClick: () => withClick && !open && setOpen(true),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 95,
+      columnNumber: 11
+    }
+  }, children)), /*#__PURE__*/React__default.createElement(TooltipPrimitive.Portal, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 97,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.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.node,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  color: PropTypes.string,
+  side: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  align: PropTypes.oneOf(['start', 'center', 'end'])
 };
 Tooltip$1.defaultProps = {
   color: 'dark',
   side: 'bottom',
   align: 'center',
   label: '',
-  children: jsx("div", {}, void 0),
+  children: /*#__PURE__*/React__default.createElement("div", {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$W,
+      lineNumber: 131,
+      columnNumber: 13
+    }
+  }),
   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 _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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4752,7 +4824,7 @@ function Progress$1(_ref) {
       rounded,
       width
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
     value: value,
@@ -4767,7 +4839,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4780,7 +4852,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5445,8 +5517,8 @@ function useMediaQuery(query) {
   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';
@@ -5614,7 +5686,7 @@ const Toast = _ref => {
       captionOfAction,
       hrefOfAction
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   const [isOpen, setIsOpen] = React.useState(false);
   const isMobile = useMediaQuery(`(max-width: 767px`);
   const close = React.useCallback(() => {
@@ -5643,7 +5715,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 216,
       columnNumber: 5
     }
@@ -5658,7 +5730,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 227,
       columnNumber: 9
     }
@@ -5668,7 +5740,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 235,
       columnNumber: 11
     }
@@ -5676,7 +5748,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 236,
       columnNumber: 13
     }
@@ -5684,7 +5756,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 237,
       columnNumber: 15
     }
@@ -5692,7 +5764,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 238,
       columnNumber: 17
     }
@@ -5704,7 +5776,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 239,
       columnNumber: 17
     }
@@ -5712,7 +5784,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 247,
       columnNumber: 21
     }
@@ -5727,7 +5799,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 248,
       columnNumber: 23
     }
@@ -5736,7 +5808,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 262,
       columnNumber: 19
     }
@@ -5751,7 +5823,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 266,
       columnNumber: 17
     }
@@ -5760,7 +5832,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 276,
       columnNumber: 19
     }
@@ -5775,7 +5847,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 280,
       columnNumber: 17
     }
@@ -5797,8 +5869,8 @@ Toast.defaultProps = {
   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: {
@@ -5845,7 +5917,7 @@ const ToastContainer = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -5853,7 +5925,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -5861,14 +5933,14 @@ const ToastContainer = ({
     const {
         preventDuplicate
       } = item,
-      toast = _objectWithoutPropertiesLoose(item, _excluded$r);
+      toast = _objectWithoutPropertiesLoose(item, _excluded$s);
     return /*#__PURE__*/React.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
       }
@@ -7093,45 +7165,37 @@ const catchError = e => {
   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] = useState([]);
   const {
     t,
     i18n
   } = useTranslation(['MajooUI/toast', 'translation']);
-  const catchError$1 = useCallback((e, values, trans) => {
+  const catchError$1 = 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 = useCallback((toast, trans) => {
+  const createToastInstance = 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;
@@ -7144,23 +7208,15 @@ const ToastProvider = ({
       onClickOfAction: false,
       isExternalOfAction: false
     };
-    console.warn({
-      toast,
-      isValidElement: /*#__PURE__*/React.isValidElement(toast.description),
-      trans
-    });
     return Object.assign({
       id: toastId,
       position: TOP_RIGHT_POSITION
     }, rest, {
-      description: /*#__PURE__*/React.isValidElement(toast.description) ? toast.description : catchError$1(toast.description, toast.values, trans)
+      description: /*#__PURE__*/React.isValidElement(toast.description) ? toast.description : catchError$1(toast.description, toast.values)
     }, !isOnline && !disabledOfflineIntercept && offlineInstance);
   }, [isOnline, t, translations, i18n.language]);
   const addToast = React.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];
@@ -7168,7 +7224,7 @@ const ToastProvider = ({
       return toastItems;
     });
     return toastInstance;
-  }, [createToastInstance, translations]);
+  }, [createToastInstance]);
   const removeToast = React.useCallback(id => {
     setToasts(toastItems => toastItems.filter(t => t.id !== id));
   }, [setToasts]);
@@ -7179,8 +7235,8 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 86,
+      fileName: _jsxFileName$S,
+      lineNumber: 81,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7188,8 +7244,8 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 88,
+      fileName: _jsxFileName$S,
+      lineNumber: 83,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7197,8 +7253,8 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 92,
+      fileName: _jsxFileName$S,
+      lineNumber: 87,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7206,8 +7262,8 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 96,
+      fileName: _jsxFileName$S,
+      lineNumber: 91,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7215,8 +7271,8 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 100,
+      fileName: _jsxFileName$S,
+      lineNumber: 95,
       columnNumber: 7
     }
   }));
@@ -7228,8 +7284,8 @@ const ConditionalWrapper = ({
   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': {
@@ -7332,7 +7388,7 @@ const FormGroup = _ref => {
       maxCount,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   const withCounter = Boolean(count || maxCount);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: withCounter,
@@ -7341,7 +7397,7 @@ const FormGroup = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 115,
         columnNumber: 9
       }
@@ -7354,14 +7410,14 @@ const FormGroup = _ref => {
       },
       __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
     }
@@ -7371,7 +7427,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 123,
       columnNumber: 7
     }
@@ -7379,8 +7435,8 @@ const FormGroup = _ref => {
 };
 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.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -7412,13 +7468,13 @@ const FormLabel = _ref => {
       maxCount,
       labelCss
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     className: "form-label",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -7428,7 +7484,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -7438,7 +7494,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -7453,7 +7509,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -7461,14 +7517,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -7477,7 +7533,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -7496,8 +7552,8 @@ FormLabel.defaultProps = {
 };
 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',
@@ -7515,7 +7571,7 @@ const FormHelper = _ref => {
       error,
       errorMessage
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   const errorByMessage = !!errorMessage;
   if (error === undefined && errorByMessage) {
     return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
@@ -7525,7 +7581,7 @@ const FormHelper = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 22,
         columnNumber: 7
       }
@@ -7541,7 +7597,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 31,
       columnNumber: 5
     }
@@ -7552,7 +7608,7 @@ FormHelper.propTypes = {
 };
 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__*/createContext();
 const CheckboxGroup = ({
   children,
@@ -7593,7 +7649,7 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 35,
       columnNumber: 5
     }
@@ -7610,7 +7666,7 @@ CheckboxGroup.defaultProps = {
 };
 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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -7627,7 +7683,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$M,
+    fileName: _jsxFileName$N,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -7639,7 +7695,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$M,
+    fileName: _jsxFileName$N,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -7651,13 +7707,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -7674,7 +7730,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$L,
+    fileName: _jsxFileName$M,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -7686,7 +7742,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$L,
+    fileName: _jsxFileName$M,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -7698,14 +7754,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   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.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -7763,7 +7819,7 @@ const Checkbox = _ref => {
       index,
       value
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
@@ -7784,28 +7840,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -7818,14 +7874,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -7841,14 +7897,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -7865,8 +7921,8 @@ InputCheckbox.propTypes = {
 };
 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%',
@@ -8005,7 +8061,7 @@ const InputGroup = _ref => {
       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) => {
@@ -8028,7 +8084,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 169,
       columnNumber: 10
     }
@@ -8204,8 +8260,8 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.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',
@@ -8378,7 +8434,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return /*#__PURE__*/React__default.createElement(StyledInput$1, _extends({
     ref: ref,
     disabled: disabled,
@@ -8388,7 +8444,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 185,
       columnNumber: 3
     }
@@ -8406,8 +8462,8 @@ InputText.propTypes = {
 };
 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: {
@@ -8428,7 +8484,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   const textareaRef = useRef(null);
   useEffect(() => {
     if (textareaRef.current) {
@@ -8462,7 +8518,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 51,
       columnNumber: 5
     }
@@ -8485,21 +8541,21 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__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.Root, Flex$1);
 function InputRadioGroup(props) {
   return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 13,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 14,
       columnNumber: 9
     }
@@ -8518,8 +8574,8 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -8684,7 +8740,7 @@ const InputRadio = _ref => {
       description,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   function renderInputType(type, checkedValue, onValueChange) {
     switch (type) {
       case 'number':
@@ -8697,7 +8753,7 @@ const InputRadio = _ref => {
           asChild: true,
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 171,
             columnNumber: 11
           }
@@ -8713,7 +8769,7 @@ const InputRadio = _ref => {
           asChild: true,
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 184,
             columnNumber: 11
           }
@@ -8732,7 +8788,7 @@ const InputRadio = _ref => {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 198,
             columnNumber: 11
           }
@@ -8742,7 +8798,7 @@ const InputRadio = _ref => {
   return /*#__PURE__*/React__default.createElement(InputRadioContext.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 217,
       columnNumber: 5
     }
@@ -8759,7 +8815,7 @@ const InputRadio = _ref => {
       outlined: outlined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 222,
         columnNumber: 11
       }
@@ -8774,7 +8830,7 @@ const InputRadio = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 223,
         columnNumber: 13
       }
@@ -8783,7 +8839,7 @@ const InputRadio = _ref => {
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 233,
         columnNumber: 15
       }
@@ -8794,14 +8850,14 @@ const InputRadio = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 234,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 235,
         columnNumber: 19
       }
@@ -8813,7 +8869,7 @@ const InputRadio = _ref => {
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 240,
         columnNumber: 17
       }
@@ -10967,8 +11023,8 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
 }(React__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',
@@ -11163,7 +11219,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       maxLength,
       thousandSeparator
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: Boolean(control),
     wrapper: child => /*#__PURE__*/React__default.createElement(Controller, {
@@ -11181,14 +11237,14 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       }),
       __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
     }
@@ -11206,7 +11262,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 234,
       columnNumber: 7
     }
@@ -11228,6 +11284,8 @@ InputNumber.defaultProps = {
 InputNumber.name = 'InputText';
 InputNumber.displayName = 'InputNumber';
 
+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',
@@ -11270,10 +11328,6 @@ const TagWrapper$4 = styled('div', {
       }
     },
     type: {
-      default: {
-        background: '$bgGray',
-        color: '$textPrimary'
-      },
       success: {
         background: '$bgSuccess',
         color: '$textGreen'
@@ -11323,8 +11377,8 @@ const StyledIconLeft$3 = styled('div', {
   alignItems: 'center',
   color: 'inherit'
 });
-const Tag = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
-  var {
+const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
       children,
       onClick,
       size,
@@ -11334,35 +11388,71 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
       type,
       onRemove,
       readOnly
-    } = _a,
-    props = __rest(_a, ["children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"]);
-  return jsxs(TagWrapper$4, Object.assign({
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return /*#__PURE__*/React__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 ? jsx(StyledIconLeft$3, {
-      children: icon
-    }, void 0) : null, jsx(TagComponent$1, {
-      children: children
-    }, void 0), isRemovable ? jsx(StyledIconRight$1, Object.assign({
-      disabled: disabled,
-      onClick: onRemove,
-      readOnly: readOnly
-    }, {
-      children: jsx(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.createElement(StyledIconLeft$3, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$E,
+      lineNumber: 94,
+      columnNumber: 31
+    }
+  }, icon) : null, /*#__PURE__*/React__default.createElement(TagComponent$1, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$E,
+      lineNumber: 95,
+      columnNumber: 9
+    }
+  }, children), isRemovable ? /*#__PURE__*/React__default.createElement(StyledIconRight$1, {
+    disabled: disabled,
+    onClick: onRemove,
+    readOnly: readOnly,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$E,
+      lineNumber: 97,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(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.string,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  icon: PropTypes.element,
+  isRemovable: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  readOnly: PropTypes.bool
+};
 Tag.defaultProps = {
   size: 'sm',
   isRemovable: false,
@@ -11371,7 +11461,7 @@ Tag.defaultProps = {
 };
 
 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',
@@ -11668,7 +11758,7 @@ TagsInput.defaultProps = {
 };
 
 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.Thumb, {
   display: 'block',
   width: '16px',
@@ -11773,7 +11863,7 @@ InputSwitch.propTypes = {
 };
 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.createElement("svg", _extends({
   width: props.size,
   height: props.size,
@@ -11832,7 +11922,7 @@ SvgCloseFilled.defaultProps = {
   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.createElement("svg", _extends({
   width: props.size,
   height: props.size,
@@ -11873,7 +11963,7 @@ SvgSearchOutline.defaultProps = {
 };
 
 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
 } = foundations;
@@ -12172,7 +12262,7 @@ $$5({ target: 'Array', proto: true, forced: FORCED$1 }, {
 });
 
 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
 } = foundations;
@@ -13632,7 +13722,7 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
   }), 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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
@@ -13713,7 +13803,7 @@ function OptionGroupItem({
 }
 
 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";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -15018,7 +15108,7 @@ InputSelectCheck.defaultProps = {
   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.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InputSelectCheck, _extends({
     ref: ref,
@@ -15079,7 +15169,7 @@ InputSelectTag.defaultProps = {
   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',
@@ -16219,7 +16309,7 @@ InputCounter.defaultProps = {
 
 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.createContext();
 const {
   sizes
@@ -16569,7 +16659,7 @@ DrawerCloseButton.displayName = 'DrawerCloseButton';
 
 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',
@@ -17100,7 +17190,7 @@ const DateNumber = styled('div', {
 });
 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'
 });
@@ -17656,7 +17746,7 @@ TimePicker.propTypes = {
 };
 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(date).format('HH:mm');
@@ -17933,14 +18023,18 @@ const CalendarTimePicker = ({
   selected,
   disabled,
   language,
-  onSetDateValue
+  onSetDateValue,
+  isSingle
 }) => {
   const {
     t
   } = useTranslation('MajooUI/datePicker');
   let startTime = moment('00:00', 'HH:mm').toDate();
   let endTime = moment('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];
   }
@@ -17961,7 +18055,7 @@ const CalendarTimePicker = ({
         variant: "label",
         color: "primary"
       }, {
-        children: t('dateFromLabel', 'Dari Tanggal')
+        children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
       }), void 0), jsx(Text$1, Object.assign({
         variant: "label",
         color: "disable"
@@ -17976,53 +18070,55 @@ const CalendarTimePicker = ({
         variant: "label",
         color: "primary"
       }, {
-        children: t('timeFromLabel', 'Dari Pukul')
+        children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
       }), void 0), jsx(InputTimePicker, {
         onChange: 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), jsx(Separator$2, {
-      orientation: "horizontal"
-    }, void 0), jsxs(Flex$1, Object.assign({
-      direction: "column",
-      gap: 3
-    }, {
-      children: [jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "primary"
+    }), void 0), isSingle ? null : jsxs(React__default.Fragment, {
+      children: [jsx(Separator$2, {
+        orientation: "horizontal"
+      }, void 0), jsxs(Flex$1, Object.assign({
+        direction: "column",
+        gap: 3
       }, {
-        children: t('dateUntilLabel', 'Hingga Tanggal')
-      }), void 0), jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "disable"
+        children: [jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "primary"
+        }, {
+          children: t('dateUntilLabel', 'Hingga Tanggal')
+        }), void 0), jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "disable"
+        }, {
+          children: formattedEndDate
+        }), void 0)]
+      }), void 0), jsxs(Flex$1, Object.assign({
+        direction: "column",
+        gap: 3
       }, {
-        children: formattedEndDate
+        children: [jsx(Text$1, Object.assign({
+          variant: "label",
+          color: "primary"
+        }, {
+          children: t('timeUntilLabel', 'Hingga Pukul')
+        }), void 0), jsx(InputTimePicker, {
+          onChange: val => {
+            const endDate = moment(endTime).format('YYYY-MM-DD');
+            const newTime = val.format('HH:mm');
+            const newValue = moment(`${endDate} ${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), jsxs(Flex$1, Object.assign({
-      direction: "column",
-      gap: 3
-    }, {
-      children: [jsx(Text$1, Object.assign({
-        variant: "label",
-        color: "primary"
-      }, {
-        children: t('timeUntilLabel', 'Hingga Pukul')
-      }), void 0), jsx(InputTimePicker, {
-        onChange: val => {
-          const endDate = moment(endTime).format('YYYY-MM-DD');
-          const newTime = val.format('HH:mm');
-          const newValue = moment(`${endDate} ${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);
 };
 
@@ -18085,17 +18181,22 @@ const WeekdayBox$1 = styled(Box, {
 });
 const 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'
   }
 });
+const CalenderBoxContainer = styled(Box, {
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+  borderRadius: '$lg',
+  backgroundColor: '$white',
+  padding: '$spacing-03'
+});
 const CalendarItemContainer$1 = styled(Flex$1, {});
 const DateContainer$1 = styled(Box, {
   width: '100%',
@@ -18168,7 +18269,7 @@ const MonthButton$1 = styled(Text$1, {
     }
   }
 });
-const ButtonTime = styled('button', {
+styled('button', {
   fontWeight: 600,
   fontStyle: 'normal',
   fontSize: 14,
@@ -18564,84 +18665,110 @@ const CalendarBox = ({
     }, void 0);
   };
   const renderTime = () => {
-    return jsxs(Box, Object.assign({
-      css: {
-        padding: 4
-      }
-    }, {
+    return jsxs(Fragment$1, {
       children: [jsx(Separator$2, {
-        css: {
-          my: '$spacing-02'
-        }
-      }, void 0), jsx(ButtonTime, Object.assign({
-        disabled: disabled,
-        onClick: () => setPickerState(current => Object.assign(Object.assign({}, current), {
-          type: TIME_PICKER
-        })),
-        type: "button"
+        orientation: "vertical"
+      }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
+        selected,
+        disabled,
+        language,
+        onSetDateValue
       }, {
-        children: selected && selected[0] ? moment(selected[0]).format('HH:mm') : moment().format('HH:mm')
+        isSingle: !multiDatePicker
       }), void 0)]
-    }), void 0);
+    }, void 0);
   };
-  const renderButtonTime = () => {
+  const renderFooterSingleTimePicker = () => {
     return jsxs(Box, Object.assign({
       css: {
-        padding: 4
+        width: '$full'
       }
     }, {
       children: [jsx(Separator$2, {
         css: {
-          my: '$spacing-02'
+          my: '$spacing-03'
+        }
+      }, void 0), jsx(Flex$1, Object.assign({
+        justify: "end",
+        align: "center",
+        css: {
+          padding: 8
         }
-      }, void 0), jsx(ButtonTime, Object.assign({
-        disabled: disabled,
-        onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(),
-        type: "button"
       }, {
-        children: "Done"
+        children: jsxs(Flex$1, Object.assign({
+          gap: 3
+        }, {
+          children: [jsx(Button$4, Object.assign({
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onCancel,
+            disabled: disabled,
+            size: "sm",
+            type: "button"
+          }, {
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
+          }), void 0), jsx(Button$4, Object.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 jsxs(CalendarsContainer$1, Object.assign({
-      css: containerStyle
-    }, {
-      children: [advanceView, advanceView && jsx(Separator$2, {
-        orientation: "vertical"
-      }, void 0), jsxs(Box, {
-        children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
-          gap: 5
-        }, {
-          children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
-            children: [index > 0 && jsx(Separator$2, {
-              orientation: "vertical",
-              css: {
-                height: 'auto'
-              }
-            }, void 0), jsxs(DateContainer$1, {
-              children: [jsx(Separator$2, {
+    return jsxs(CalenderBoxContainer, {
+      children: [jsxs(CalendarsContainer$1, Object.assign({
+        css: containerStyle
+      }, {
+        children: [advanceView, advanceView && jsx(Separator$2, {
+          orientation: "vertical"
+        }, void 0), jsxs(Box, {
+          children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
+            gap: 5
+          }, {
+            children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
+              children: [index > 0 && jsx(Separator$2, {
+                orientation: "vertical",
                 css: {
-                  mb: '$spacing-04',
-                  mt: '$spacing-02'
+                  height: 'auto'
                 }
-              }, void 0), pickerState.type === DATE_PICKER && jsxs(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)]
-          }, `${calendar.month}${calendar.year}`))
-        }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
-      }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
-        children: [jsx(Separator$2, {
-          orientation: "vertical"
-        }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
-          selected,
-          disabled,
-          language,
-          onSetDateValue
-        }), void 0)]
-      }, void 0)]
-    }), void 0);
+              }, void 0), jsxs(DateContainer$1, {
+                children: [jsx(Separator$2, {
+                  css: {
+                    mb: '$spacing-04',
+                    mt: '$spacing-02'
+                  }
+                }, void 0), pickerState.type === DATE_PICKER && jsxs(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)]
+            }, `${calendar.month}${calendar.year}`))
+          }), void 0)]
+        }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
+          children: [jsx(Separator$2, {
+            orientation: "vertical"
+          }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
+            selected,
+            disabled,
+            language,
+            onSetDateValue
+          }), void 0)]
+        }, void 0)]
+      }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+    }, void 0);
   }
   return null;
 };
@@ -19192,13 +19319,24 @@ const CalendarPicker = _a => {
   const [dateValue, setDateValue] = useState();
   const [calendarDate, setCalendarDate] = useState(selected !== null && selected !== void 0 ? selected : new Date());
   const onDateSelected = selectedDate => {
-    setDateValue(selectedDate.date);
-    onClose();
+    if (timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.minDate) {
+      if (moment(selectedDate.date).isBefore(timePickerProps.minDate)) {
+        setDateValue(timePickerProps.minDate);
+      } else {
+        setDateValue(selectedDate.date);
+      }
+    } else {
+      setDateValue(selectedDate.date);
+    }
+    if (!showTimePicker) {
+      onClose();
+    }
   };
   const updateHandler = () => {
     if (dateValue && onChange) {
       onChange(dateValue);
     }
+    onClose();
   };
   const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
     date: calendarDate,
@@ -19215,39 +19353,22 @@ const CalendarPicker = _a => {
     }
   }, [selected]);
   useEffect(() => {
-    if (dateValue && !isMultiDatePicker && onChange) {
+    if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
       onChange(dateValue);
     }
   }, [dateValue]);
-  const renderTimePicker = props => {
-    return jsx(Box, Object.assign({
-      css: {
-        padding: '40px 60px'
-      }
-    }, {
-      children: jsx(NativeTimePicker, Object.assign({
-        size: "lg",
-        value: dateValue ? moment(dateValue) : moment(),
-        minDate: minDate,
-        maxDate: maxDate,
-        disabled: disabled,
-        onChange: date => {
-          setDateValue(new Date(date));
-        }
-      }, props), void 0)
-    }), void 0);
-  };
   return jsx(CalendarBox, Object.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: () => renderTimePicker(timePickerProps),
     minDate: minDate,
     maxDate: maxDate
+  }, showTimePicker && {
+    onSetDateValue: setDateValue
   }, dayzedData), void 0);
 };
 const CalendarRangePicker = _a => {
@@ -19822,7 +19943,6 @@ function InputDatePicker({
   onClose,
   mobileOnly,
   desktopOnly,
-  advanceOptions,
   drawerCss,
   drawerContentCss = {},
   isMobile = false
@@ -19915,22 +20035,20 @@ function InputDatePicker({
     }
   };
   const renderDatePicker = () => {
-    const options = language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn;
-    const advancePickerReducer = (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.reducer) || advancePickerDate;
     const 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({
@@ -19942,10 +20060,10 @@ function InputDatePicker({
     };
     return jsx(DatePicker, {
       advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
-        options: (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.options) || options,
+        options: language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn,
         disabled: disabled,
         optionHandler: value => {
-          const reducedResult = advancePickerReducer(value, undefined);
+          const reducedResult = advancePickerDate(value, undefined);
           const dateAsString = moment(reducedResult[1]).format('YYYY-MM-DD');
           const payload = [reducedResult[0], moment(`${dateAsString} 23:59`, 'YYYY-MM-DD HH:mm').toDate()];
           dispatch({
@@ -20194,24 +20312,22 @@ const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
       placement = 'bottom',
       readOnly = false,
       isInvalid = false,
-      css,
-      advanceOptions
+      css
     } = _a,
-    props = __rest(_a, ["onChange", "placeholder", "size", "disabled", "placement", "readOnly", "isInvalid", "css", "advanceOptions"]);
+    props = __rest(_a, ["onChange", "placeholder", "size", "disabled", "placement", "readOnly", "isInvalid", "css"]);
   const {
     t,
     i18n
   } = useTranslation('translation');
   const language = i18n.language;
   const pickerOptions = language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn;
-  const advancePickerReducer = (advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.reducer) || advancePickerDate;
   return jsx(InputSelect, Object.assign({}, props, {
-    option: ((advanceOptions === null || advanceOptions === void 0 ? void 0 : advanceOptions.options) || pickerOptions).map(option => ({
+    option: pickerOptions.map(option => ({
       name: option.label,
       value: option.value
     })),
     onChange: 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,
@@ -20224,7 +20340,7 @@ const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 
 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 = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -20568,7 +20684,7 @@ Slider.defaultProps = {
 };
 
 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',
@@ -20732,7 +20848,7 @@ const _excluded$7 = ["children"],
   _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.Root, {
   display: 'flex',
   flexDirection: 'column',
@@ -21071,7 +21187,7 @@ TabsContent$1.propTypes = {
 };
 
 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',
@@ -21226,7 +21342,7 @@ NotificationBadge.propTypes = {
 };
 
 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',
@@ -21479,7 +21595,7 @@ const removeUndefinedFields = obj => {
 };
 
 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',
@@ -21967,7 +22083,7 @@ const PaginationButton = ({
 };
 
 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'
 });
@@ -22200,7 +22316,7 @@ function PaginationInfo(_ref) {
 }
 
 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,
@@ -24368,7 +24484,7 @@ const TableColumn = _a => {
   return 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
@@ -24481,7 +24597,7 @@ const PriceColumn = props => {
   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,
@@ -24522,7 +24638,7 @@ const rowExpanderColumn = {
   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,
@@ -24556,7 +24672,7 @@ const rowExpanderMultipleColumn = {
   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,
@@ -24689,7 +24805,7 @@ const rowMenuColumn = (options, icon, config) => ({
   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: ({
@@ -24738,7 +24854,7 @@ const rowSelectionColumn = {
   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: ({
@@ -25076,7 +25192,7 @@ PageDialog.defaultProps = {
 };
 
 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
@@ -25711,7 +25827,7 @@ const AlertDialogConfirm = ADialog.Action;
 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.createContext();
 const slideUpAndFade = keyframes({
   '0%': {
@@ -27822,7 +27938,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
   });
 }
 
-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'
 });
@@ -27911,7 +28027,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -27921,7 +28037,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 5
     }
   }));
@@ -27982,6 +28098,7 @@ const Upload = ({
   const [aspect, setAspect] = useState(isDefaultCustomRatio ? 0 : 1);
   const [isLoading, setIsLoading] = useState(false);
   const [cropperImgRatio, setCropperImgRatio] = useState(null);
+  const isMobile = useMediaQuery('(max-width: 767px)');
   useEffect(() => {
     if (loading) {
       setIsLoading(true);
@@ -28392,7 +28509,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 612,
+        lineNumber: 615,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -28402,7 +28519,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 613,
+        lineNumber: 616,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -28417,7 +28534,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 626,
             columnNumber: 16
           }
         });
@@ -28428,7 +28545,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 629,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28438,7 +28555,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 630,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28447,7 +28564,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 631,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28460,7 +28577,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 630,
+          lineNumber: 633,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28469,7 +28586,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 638,
+          lineNumber: 641,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -28479,7 +28596,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 641,
+          lineNumber: 644,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28496,7 +28613,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 655,
             columnNumber: 16
           }
         });
@@ -28506,7 +28623,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 655,
+          lineNumber: 658,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -28516,7 +28633,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 656,
+          lineNumber: 659,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28525,7 +28642,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 657,
+          lineNumber: 660,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28538,7 +28655,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 661,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28548,14 +28665,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 669,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -28563,7 +28680,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 668,
+          lineNumber: 671,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -28578,7 +28695,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 672,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -28591,7 +28708,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 688,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -28600,7 +28717,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 693,
+          lineNumber: 696,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -28608,7 +28725,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 699,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -28623,7 +28740,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 707,
+        lineNumber: 710,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28637,7 +28754,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 708,
+        lineNumber: 711,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -28663,7 +28780,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 709,
+        lineNumber: 712,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -28671,14 +28788,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 725,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 723,
+        lineNumber: 726,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -28690,7 +28807,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 731,
+        lineNumber: 734,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -28706,7 +28823,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 732,
+        lineNumber: 735,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -28718,21 +28835,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 743,
+        lineNumber: 746,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 744,
+        lineNumber: 747,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 746,
+        lineNumber: 749,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -28741,7 +28858,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 747,
+        lineNumber: 750,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -28749,7 +28866,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 748,
+        lineNumber: 751,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -28759,7 +28876,7 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
@@ -28769,7 +28886,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 760,
         columnNumber: 19
       }
     }, error));
@@ -28777,10 +28894,11 @@ const Upload = ({
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
       onOpenChange: () => setCrop(null),
+      isMobile: isMobile,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 767,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -28788,7 +28906,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 765,
+        lineNumber: 768,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -28796,7 +28914,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 766,
+        lineNumber: 769,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -28809,7 +28927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 771,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -28822,7 +28940,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 771,
+        lineNumber: 774,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -28833,7 +28951,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 772,
+        lineNumber: 775,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -28847,14 +28965,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 776,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 784,
+        lineNumber: 787,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28866,14 +28984,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 785,
+        lineNumber: 788,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 787,
+        lineNumber: 790,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -28881,7 +28999,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 789,
+        lineNumber: 792,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -28893,7 +29011,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 790,
+        lineNumber: 793,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28901,7 +29019,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 797,
+        lineNumber: 800,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -28910,7 +29028,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 798,
+        lineNumber: 801,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -28920,7 +29038,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 801,
+        lineNumber: 804,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -28937,7 +29055,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 810,
+      lineNumber: 813,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -28946,7 +29064,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 813,
+      lineNumber: 816,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -29746,7 +29864,7 @@ const Device = props => {
 };
 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,
@@ -29899,7 +30017,7 @@ InputColorPicker.defaultProps = {
 
 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',
@@ -31860,7 +31978,7 @@ function ColorMap({
   })));
 }
 
-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',
@@ -32061,7 +32179,7 @@ function ColorFields({
   }, "%")));
 }
 
-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,
@@ -32581,7 +32699,7 @@ ColorPicker.defaultProps = {
 };
 var ColorPicker$1 = 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.createContext({});
 const Stepper = StepWizard$1;
 Stepper.displayName = 'Stepper';
@@ -33304,7 +33422,7 @@ StepWizard.defaultProps = {
   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
@@ -33347,7 +33465,7 @@ Collapse.defaultProps = {
   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': {
@@ -33708,7 +33826,7 @@ TableOfContentPage.defaultProps = {
   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
@@ -51986,236 +52104,12 @@ function PrimitiveLoadingBar({
     }, void 0)]
   }), void 0);
 }
-const rotateKeyframe = keyframes({
-  '100%': {
-    transform: 'rotate(360deg)'
-  }
-});
-const dashKeyframe = keyframes({
-  '0%': {
-    strokeDasharray: '0,125',
-    strokeDashoffset: -8
-  },
-  '50%': {
-    strokeDasharray: 125,
-    strokeDashoffset: -10
-  },
-  '100%': {
-    strokeDasharray: 125,
-    strokeDashoffset: -125
-  }
-});
-const LoadingContainer = styled$1('div', {
-  position: 'absolute',
-  width: 152,
-  height: 152,
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%,-50%)'
-});
-const LogoSvg = styled$1('svg', {
-  height: 152,
-  position: 'absolute',
-  width: 152
-});
-const LoadingSvg = styled$1('svg', {
-  animation: `${rotateKeyframe} 2s linear infinite`,
-  height: 152,
-  position: 'absolute',
-  width: 152,
-  top: '-22px'
-});
-const LoadingBackground = styled$1('div', {
-  background: 'conic-gradient(#fff5f6, #FF97A4, #02B4F3, #81CF77, #6D60AE, #FF6C53 320deg)',
-  width: '100%',
-  height: '100%'
-});
-const LoadingCircle = styled$1('circle', {
-  stroke: 'white',
-  strokeLinecap: 'round',
-  transformOrigin: '50% 50%',
-  transform: 'rotate(-102deg)',
-  animation: `${dashKeyframe} 1.5s ease-in-out infinite`
-});
-const LoadingLabel = styled$1(Paragraph, {
-  position: 'relative',
-  top: 100
-});
-function CircularLoadingBar({
-  label
-}) {
-  return jsxs(LoadingContainer, {
-    children: [jsxs(LogoSvg, Object.assign({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "152",
-      height: "152",
-      viewBox: "0 0 152 152",
-      fill: "none"
-    }, {
-      children: [jsxs("g", Object.assign({
-        filter: "url(#filter0_ddd_4303_695)"
-      }, {
-        children: [jsx("rect", {
-          x: "46.0004",
-          y: "23.9999",
-          width: "60",
-          height: "60",
-          rx: "30",
-          fill: "url(#paint0_linear_4303_695)"
-        }, void 0), 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), 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), jsxs("defs", {
-        children: [jsxs("filter", Object.assign({
-          id: "filter0_ddd_4303_695",
-          x: "0.5",
-          y: "0.5",
-          width: "151",
-          height: "151",
-          filterUnits: "userSpaceOnUse",
-          "color-interpolation-filters": "sRGB"
-        }, {
-          children: [jsx("feFlood", {
-            "flood-opacity": "0",
-            result: "BackgroundImageFix"
-          }, void 0), 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), jsx("feOffset", {
-            dy: "22"
-          }, void 0), jsx("feGaussianBlur", {
-            stdDeviation: "21.5"
-          }, void 0), 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), jsx("feBlend", {
-            mode: "normal",
-            in2: "BackgroundImageFix",
-            result: "effect1_dropShadow_4303_695"
-          }, void 0), 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), jsx("feOffset", {
-            dy: "9"
-          }, void 0), jsx("feGaussianBlur", {
-            stdDeviation: "12"
-          }, void 0), 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), jsx("feBlend", {
-            mode: "normal",
-            in2: "effect1_dropShadow_4303_695",
-            result: "effect2_dropShadow_4303_695"
-          }, void 0), 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), jsx("feOffset", {
-            dy: "3"
-          }, void 0), jsx("feGaussianBlur", {
-            stdDeviation: "4.5"
-          }, void 0), 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), jsx("feBlend", {
-            mode: "normal",
-            in2: "effect2_dropShadow_4303_695",
-            result: "effect3_dropShadow_4303_695"
-          }, void 0), jsx("feBlend", {
-            mode: "normal",
-            in: "SourceGraphic",
-            in2: "effect3_dropShadow_4303_695",
-            result: "shape"
-          }, void 0)]
-        }), void 0), jsxs("linearGradient", Object.assign({
-          id: "paint0_linear_4303_695",
-          x1: "76.0004",
-          y1: "23.9999",
-          x2: "76.0004",
-          y2: "83.9999",
-          gradientUnits: "userSpaceOnUse"
-        }, {
-          children: [jsx("stop", {
-            "stop-color": "#B3DCA7"
-          }, void 0), jsx("stop", {
-            offset: "1",
-            "stop-color": "#22BDB6"
-          }, void 0)]
-        }), void 0), jsxs("linearGradient", Object.assign({
-          id: "paint1_linear_4303_695",
-          x1: "106",
-          y1: "68.8332",
-          x2: "50",
-          y2: "37.3332",
-          gradientUnits: "userSpaceOnUse"
-        }, {
-          children: [jsx("stop", {
-            "stop-color": "#F4F4F4"
-          }, void 0), jsx("stop", {
-            offset: "1",
-            "stop-color": "white"
-          }, void 0)]
-        }), void 0)]
-      }, void 0)]
-    }), void 0), jsxs(LoadingSvg, Object.assign({
-      viewBox: "0 0 100 100",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, {
-      children: [jsx("defs", {
-        children: jsx("mask", Object.assign({
-          id: "mask"
-        }, {
-          children: jsx(LoadingCircle, {
-            cx: "50",
-            cy: "50",
-            r: "20",
-            fill: "none",
-            "stroke-width": "4",
-            "stroke-miterlimit": "10"
-          }, void 0)
-        }), void 0)
-      }, void 0), jsx("foreignObject", Object.assign({
-        x: "0",
-        y: "0",
-        width: "100",
-        height: "100",
-        mask: "url(#mask)"
-      }, {
-        children: jsx(LoadingBackground, {}, void 0)
-      }), void 0)]
-    }), void 0), label && jsx(LoadingLabel, Object.assign({
-      color: "white",
-      align: "center"
-    }, {
-      children: label
-    }), void 0)]
-  }, void 0);
-}
 let interval;
 function LoadingBar(props) {
   const {
     show,
     onCompleted,
-    interval: intervalTime,
-    isPageLoader,
-    pageLoaderLabel
+    interval: intervalTime
   } = props;
   const [progress, setProgress] = useState(0);
   const [visibility, setVisibility] = useState(false);
@@ -52241,34 +52135,6 @@ function LoadingBar(props) {
       onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
     }
   }, [progress, onCompleted]);
-  if (!show) return jsx(React__default.Fragment, {}, void 0);
-  if (isPageLoader) {
-    return jsx(ModalDialog, Object.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: jsx(ModalDialogContent, Object.assign({
-        css: {
-          padding: '$spacing-08 $spacing-11'
-        }
-      }, {
-        children: jsx(CircularLoadingBar, {
-          label: pageLoaderLabel
-        }, void 0)
-      }), void 0)
-    }), void 0);
-  }
   return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
     visibility: true
   }), void 0) : jsx(PrimitiveLoadingBar, Object.assign({}, props, {
@@ -52281,8 +52147,7 @@ LoadingBar.defaultProps = {
   show: false,
   interval: 100,
   description: 'Loading...',
-  size: 'md',
-  isPageLoader: false
+  size: 'md'
 };
 
 const Container$4 = styled(Flex$1, {
@@ -53365,6 +53230,7 @@ const ProductList = props => {
     label: tooltipLabel(name, variants)
   }, {
     children: jsxs(Box, Object.assign({
+      gap: 2,
       css: Object.assign({
         display: 'flex',
         alignItems: 'center',
@@ -53410,7 +53276,7 @@ const ProductList = props => {
             padding: '4px 8px',
             minWidth: 'unset',
             justifyContent: 'flex-start',
-            marginRight: 'auto'
+            mr: 'auto'
           },
           type: "varian"
         }, {
@@ -55474,7 +55340,7 @@ PieChartComponent.defaultProps = {
   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,
@@ -56970,4 +56836,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, Provider, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, TooltipBase, TooltipContent, TooltipTrigger, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };