@majoo-ui/react 1.60.37-rc.5 → 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,16 +7165,13 @@ 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({
-    translations
-  });
   const isOnline = useNavigatorOnLine();
   const [toasts, setToasts] = useState([]);
   const {
@@ -7119,11 +7188,6 @@ const ToastProvider = ({
         errorMsg = errorMsg.replace(`$${key}`, values[key]);
       });
     }
-    console.warn({
-      translations,
-      e,
-      errorMsg
-    });
     return errorMsg;
   }, [translations, i18n.language]);
   const createToastInstance = useCallback(toast => {
@@ -7131,7 +7195,7 @@ const ToastProvider = ({
         id,
         disabledOfflineIntercept
       } = toast,
-      rest = _objectWithoutPropertiesLoose(toast, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
 
     // eslint-disable-next-line no-plusplus
     const uniqueId = ++toastCount;
@@ -7144,11 +7208,6 @@ const ToastProvider = ({
       onClickOfAction: false,
       isExternalOfAction: false
     };
-    console.warn({
-      toast,
-      isValidElement: /*#__PURE__*/React.isValidElement(toast.description),
-      translations
-    });
     return Object.assign({
       id: toastId,
       position: TOP_RIGHT_POSITION
@@ -7176,8 +7235,8 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 85,
+      fileName: _jsxFileName$S,
+      lineNumber: 81,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7185,8 +7244,8 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 87,
+      fileName: _jsxFileName$S,
+      lineNumber: 83,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7194,8 +7253,8 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 91,
+      fileName: _jsxFileName$S,
+      lineNumber: 87,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7203,8 +7262,8 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 95,
+      fileName: _jsxFileName$S,
+      lineNumber: 91,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -7212,8 +7271,8 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
-      lineNumber: 99,
+      fileName: _jsxFileName$S,
+      lineNumber: 95,
       columnNumber: 7
     }
   }));
@@ -7225,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': {
@@ -7329,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,
@@ -7338,7 +7397,7 @@ const FormGroup = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 115,
         columnNumber: 9
       }
@@ -7351,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
     }
@@ -7368,7 +7427,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 123,
       columnNumber: 7
     }
@@ -7376,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',
@@ -7409,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
     }
@@ -7425,7 +7484,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -7435,7 +7494,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -7450,7 +7509,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -7458,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
     }
@@ -7474,7 +7533,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -7493,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',
@@ -7512,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({
@@ -7522,7 +7581,7 @@ const FormHelper = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 22,
         columnNumber: 7
       }
@@ -7538,7 +7597,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 31,
       columnNumber: 5
     }
@@ -7549,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,
@@ -7590,7 +7649,7 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 35,
       columnNumber: 5
     }
@@ -7607,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",
@@ -7624,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
   }
@@ -7636,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
   }
@@ -7648,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",
@@ -7671,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
   }
@@ -7683,7 +7742,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$L,
+    fileName: _jsxFileName$M,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -7695,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',
@@ -7760,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(() => {
@@ -7781,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
     }
@@ -7815,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
     }
@@ -7838,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
     }
@@ -7862,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%',
@@ -8002,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) => {
@@ -8025,7 +8084,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 169,
       columnNumber: 10
     }
@@ -8201,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',
@@ -8375,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,
@@ -8385,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
     }
@@ -8403,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: {
@@ -8425,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) {
@@ -8459,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
     }
@@ -8482,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
     }
@@ -8515,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',
@@ -8681,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':
@@ -8694,7 +8753,7 @@ const InputRadio = _ref => {
           asChild: true,
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 171,
             columnNumber: 11
           }
@@ -8710,7 +8769,7 @@ const InputRadio = _ref => {
           asChild: true,
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 184,
             columnNumber: 11
           }
@@ -8729,7 +8788,7 @@ const InputRadio = _ref => {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$F,
+            fileName: _jsxFileName$G,
             lineNumber: 198,
             columnNumber: 11
           }
@@ -8739,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
     }
@@ -8756,7 +8815,7 @@ const InputRadio = _ref => {
       outlined: outlined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 222,
         columnNumber: 11
       }
@@ -8771,7 +8830,7 @@ const InputRadio = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 223,
         columnNumber: 13
       }
@@ -8780,7 +8839,7 @@ const InputRadio = _ref => {
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 233,
         columnNumber: 15
       }
@@ -8791,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
       }
@@ -8810,7 +8869,7 @@ const InputRadio = _ref => {
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 240,
         columnNumber: 17
       }
@@ -10964,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',
@@ -11160,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, {
@@ -11178,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
     }
@@ -11203,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
     }
@@ -11225,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',
@@ -11267,10 +11328,6 @@ const TagWrapper$4 = styled('div', {
       }
     },
     type: {
-      default: {
-        background: '$bgGray',
-        color: '$textPrimary'
-      },
       success: {
         background: '$bgSuccess',
         color: '$textGreen'
@@ -11320,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,
@@ -11331,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,
@@ -11368,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',
@@ -11665,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',
@@ -11770,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,
@@ -11829,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,
@@ -11870,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;
@@ -12169,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;
@@ -13629,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",
@@ -13710,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',
@@ -15015,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,
@@ -15076,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',
@@ -16216,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
@@ -16566,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',
@@ -17097,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'
 });
@@ -17653,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');
@@ -17930,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];
   }
@@ -17958,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"
@@ -17973,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);
 };
 
@@ -18082,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%',
@@ -18165,7 +18269,7 @@ const MonthButton$1 = styled(Text$1, {
     }
   }
 });
-const ButtonTime = styled('button', {
+styled('button', {
   fontWeight: 600,
   fontStyle: 'normal',
   fontSize: 14,
@@ -18561,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;
 };
@@ -19206,6 +19336,7 @@ const CalendarPicker = _a => {
     if (dateValue && onChange) {
       onChange(dateValue);
     }
+    onClose();
   };
   const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
     date: calendarDate,
@@ -19222,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 => {
@@ -19829,7 +19943,6 @@ function InputDatePicker({
   onClose,
   mobileOnly,
   desktopOnly,
-  advanceOptions,
   drawerCss,
   drawerContentCss = {},
   isMobile = false
@@ -19922,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({
@@ -19949,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({
@@ -20201,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,
@@ -20231,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',
@@ -20575,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',
@@ -20739,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',
@@ -21078,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',
@@ -21233,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',
@@ -21486,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',
@@ -21974,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'
 });
@@ -22207,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,
@@ -24375,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
@@ -24488,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,
@@ -24529,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,
@@ -24563,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,
@@ -24696,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: ({
@@ -24745,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: ({
@@ -25083,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
@@ -25718,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%': {
@@ -27829,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'
 });
@@ -29755,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,
@@ -29908,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',
@@ -31869,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',
@@ -32070,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,
@@ -32590,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';
@@ -33313,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
@@ -33356,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': {
@@ -33717,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
@@ -51995,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);
@@ -52250,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, {
@@ -52290,8 +52147,7 @@ LoadingBar.defaultProps = {
   show: false,
   interval: 100,
   description: 'Loading...',
-  size: 'md',
-  isPageLoader: false
+  size: 'md'
 };
 
 const Container$4 = styled(Flex$1, {
@@ -53374,6 +53230,7 @@ const ProductList = props => {
     label: tooltipLabel(name, variants)
   }, {
     children: jsxs(Box, Object.assign({
+      gap: 2,
       css: Object.assign({
         display: 'flex',
         alignItems: 'center',
@@ -53419,7 +53276,7 @@ const ProductList = props => {
             padding: '4px 8px',
             minWidth: 'unset',
             justifyContent: 'flex-start',
-            marginRight: 'auto'
+            mr: 'auto'
           },
           type: "varian"
         }, {
@@ -55483,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,
@@ -56979,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 };