@majoo-ui/react 1.36.1 → 1.37.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('@majoo-ui/helpers'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-dom'), require('react-table'), require('moment'), require('lodash.debounce'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-dom', 'react-table', 'moment', 'lodash.debounce', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.ReactDOM, global.reactTable, global.moment, global.debounce, global.ADialog, global.DropdownMenuPrimitive));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactDom, reactTable, moment, debounce, ADialog, DropdownMenuPrimitive) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('@majoo-ui/helpers'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('lodash.debounce'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', 'lodash.debounce', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.debounce, global.ADialog, global.DropdownMenuPrimitive));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactDom, reactTable, debounce, ADialog, DropdownMenuPrimitive) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,7 +46,7 @@
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
   var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 
-  var _jsxFileName$V = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+  var _jsxFileName$Y = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -56,7 +56,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$Y,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -2190,9 +2190,9 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$z = ["children"],
+  const _excluded$B = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$U = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/grid/Grid.js";
+  var _jsxFileName$X = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2366,7 +2366,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2377,7 +2377,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$X,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2433,7 +2433,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$X,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2450,6 +2450,55 @@
   };
   GridItem.displayName = 'Grid Item';
 
+  const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+  var _jsxFileName$W = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
+  const StyledDiv$1 = styled(Flex$1, {
+    justifyContent: 'center',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    '@sm': {
+      padding: '$spacing-04',
+      backgroundColor: '$white',
+      width: '100%'
+    },
+    '@md': {
+      padding: '0',
+      backgroundColor: '$bgGray'
+    },
+    '@3xl': {
+      maxWidth: '1206px !important'
+    },
+    defaultVariants: {
+      direction: 'column'
+    }
+  });
+
+  const PageContainer = _ref => {
+    let {
+      children,
+      isCollapse,
+      css,
+      contentHeader
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, _extends({
+      id: "retina-container",
+      css: Object.assign({
+        maxWidth: isCollapse ? '1206px' : '1006px'
+      }, css)
+    }, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$W,
+        lineNumber: 28,
+        columnNumber: 5
+      }
+    }), contentHeader, children);
+  };
+
+  PageContainer.displayName = 'PageContainer';
+
   const Text = styled('p', {
     margin: 0,
     // padding: 0,
@@ -2663,8 +2712,8 @@
 
   Paragraph.displayName = 'Paragraph';
 
-  const _excluded$y = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$T = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/Button.js";
+  const _excluded$z = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
+  var _jsxFileName$V = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/Button.js";
   const ButtonPrimary = {
     backgroundColor: '$btnPrimary',
     color: '$textWhite',
@@ -2887,7 +2936,7 @@
       rightIcon,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
       className: className,
@@ -2905,28 +2954,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 241,
         columnNumber: 3
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 253,
         columnNumber: 31
       }
     }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 254,
         columnNumber: 13
       }
     }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 255,
         columnNumber: 32
       }
@@ -2952,7 +3001,7 @@
     icon: false
   };
 
-  var _jsxFileName$S = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/ButtonLink.js";
+  var _jsxFileName$U = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/ButtonLink.js";
   const StyledLink = styled('a', {
     fontSize: '$short-content-regular',
     textDecoration: 'underline',
@@ -2984,7 +3033,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 31,
         columnNumber: 5
       }
@@ -3005,8 +3054,8 @@
     onClick: () => {}
   };
 
-  const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$R = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/Toast.js";
+  const _excluded$y = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  var _jsxFileName$T = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -3139,7 +3188,7 @@
     '-webkit-box-orient': 'vertical',
     overflow: 'hidden'
   });
-  const CloseButton$1 = styled(Flex$1, {
+  const CloseButton$2 = styled(Flex$1, {
     cursor: 'pointer',
     size: '20px',
     borderRadius: '$round',
@@ -3171,7 +3220,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3200,7 +3249,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3212,7 +3261,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3222,7 +3271,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3230,7 +3279,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3238,7 +3287,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3246,7 +3295,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3258,7 +3307,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3266,7 +3315,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3281,7 +3330,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3290,11 +3339,11 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 250,
         columnNumber: 19
       }
-    }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
+    }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$2, {
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
@@ -3304,7 +3353,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3313,7 +3362,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 263,
         columnNumber: 19
       }
@@ -3329,7 +3378,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 268,
         columnNumber: 15
       }
@@ -3353,7 +3402,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$Q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+  var _jsxFileName$S = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3395,7 +3444,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$S,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3403,7 +3452,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$S,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3414,7 +3463,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$S,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3422,8 +3471,8 @@
     })));
   };
 
-  const _excluded$w = ["id"];
-  var _jsxFileName$P = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+  const _excluded$x = ["id"];
+  var _jsxFileName$R = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3435,7 +3484,7 @@
       const {
         id
       } = toast,
-            rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
+            rest = _objectWithoutPropertiesLoose(toast, _excluded$x); // eslint-disable-next-line no-plusplus
 
 
       const uniqueId = ++toastCount;
@@ -3461,7 +3510,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 41,
         columnNumber: 5
       }
@@ -3470,7 +3519,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 43,
         columnNumber: 7
       }
@@ -3479,7 +3528,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 47,
         columnNumber: 7
       }
@@ -3488,7 +3537,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 51,
         columnNumber: 7
       }
@@ -3497,14 +3546,14 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 55,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$O = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+  var _jsxFileName$Q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3517,14 +3566,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$Q,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$Q,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3538,14 +3587,24 @@
     disableGlobalStyle: PropTypes__default["default"].bool
   };
 
-  styled(Flex$1, {
-    width: 'fit-content',
+  const _excluded$w = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+  var _jsxFileName$P = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/banner/Banner.js";
+  const Context$2 = /*#__PURE__*/React__namespace.createContext();
+  const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
     padding: '$spacing-03',
     textAlign: 'left',
     borderRadius: 8,
     pointer: 'default',
     variants: {
+      bannerBlock: {
+        true: {
+          width: '100%'
+        },
+        false: {
+          width: 'fit-content'
+        }
+      },
       variant: {
         info: {
           backgroundColor: '$blue100',
@@ -3571,7 +3630,24 @@
       }
     }
   });
-  styled(Flex$1, {
+  const Title = styled(Heading, {
+    lineHeight: '$long-content-regular',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '956px',
+    marginInlineEnd: 12
+  });
+  const Description = styled(Paragraph, {
+    lineHeight: '$long-content-regular',
+    flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '956px',
+    marginInlineEnd: 12
+  });
+  const CloseButton$1 = styled(Flex$1, {
     cursor: 'pointer',
     size: '20px',
     borderRadius: '$round',
@@ -3589,18 +3665,251 @@
       }
     }
   });
-  ({
+  const BannerTitle = props => /*#__PURE__*/React__namespace.createElement(Title, _extends({
+    heading: "sectionTitle"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 91,
+      columnNumber: 3
+    }
+  }), props.children);
+  const BannerDescription = props => /*#__PURE__*/React__namespace.createElement(Description, _extends({
+    paragraph: "longContentRegular",
+    color: "secondary"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 97,
+      columnNumber: 3
+    }
+  }), props.children);
+  const BannerLink = ({
+    link,
+    children,
+    variant
+  }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 103,
+      columnNumber: 3
+    }
+  }, value => /*#__PURE__*/React__namespace.createElement(Link, {
+    href: link,
+    caption: children ? children : 'Learn more',
+    color: variant ? variant : value.variant,
+    css: {
+      marginInlineEnd: 12
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 105,
+      columnNumber: 7
+    }
+  }));
+  const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 116,
+      columnNumber: 3
+    }
+  }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      value === null || value === void 0 ? void 0 : value.onRemove();
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 118,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
+    color: colors.iconSecondary,
+    size: "16px",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 125,
+      columnNumber: 9
+    }
+  })));
+
+  const SingleTagBanner = props => {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 133,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
+      gap: 3,
+      direction: "column",
+      align: "end",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 134,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
+      gap: 2,
+      direction: "column",
+      css: {
+        flex: 1,
+        marginRight: '$spacing-04'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 135,
+        columnNumber: 9
+      }
+    }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 143,
+        columnNumber: 27
+      }
+    }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 144,
+        columnNumber: 33
+      }
+    }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
+      link: props.link,
+      variant: props.variant,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 147,
+        columnNumber: 11
+      }
+    }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        props === null || props === void 0 ? void 0 : props.onRemove();
+      },
+      closeCenter: !props.title && !props.link,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 152,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
+      color: colors.iconSecondary,
+      size: "16px",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 160,
+        columnNumber: 9
+      }
+    })));
+  };
+
+  const Banner = _ref => {
+    let {
+      title,
+      description,
+      variant,
+      link,
+      linkText,
+      onClick,
+      onRemove,
+      children,
+      bannerBlock
+    } = _ref,
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+
+    return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
+      variant: variant,
+      hasAction: !!onClick,
+      onClick: onClick,
+      bannerBlock: bannerBlock
+    }, rest, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 168,
+        columnNumber: 5
+      }
+    }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
+      direction: "row",
+      gap: 3,
+      align: "center",
+      wrap: "wrap",
+      css: {
+        maxWidth: '100vw',
+        position: 'relative',
+        flex: 1,
+        overflowX: 'hidden'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 170,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
+      value: {
+        onRemove,
+        variant
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 177,
+        columnNumber: 11
+      }
+    }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
+      title: title,
+      description: description,
+      variant: variant,
+      link: link,
+      linkText: linkText,
+      onClick: onClick,
+      onRemove: onRemove,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 180,
+        columnNumber: 9
+      }
+    }));
+  };
+
+  Banner.displayName = 'Banner';
+  BannerTitle.displayName = 'BannerTitle';
+  BannerDescription.displayName = 'BannerDescription';
+  Banner.propTypes = {
     title: PropTypes__default["default"].string,
     description: PropTypes__default["default"].string,
     variant: PropTypes__default["default"].string,
     link: PropTypes__default["default"].string,
     linkText: PropTypes__default["default"].string,
     onClick: PropTypes__default["default"].func,
-    onRemove: PropTypes__default["default"].func
-  });
-
+    onRemove: PropTypes__default["default"].func,
+    bannerBlock: PropTypes__default["default"].bool
+  };
+  Banner.defaultProps = {
+    variant: 'info'
+  };
+
   const _excluded$v = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$N = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/card/Card.js";
+  var _jsxFileName$O = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/card/Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -3750,7 +4059,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -3758,14 +4067,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 114,
         columnNumber: 7
       }
     }), title !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -3774,14 +4083,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -3846,7 +4155,7 @@
   }
 
   const _excluded$u = ["children"];
-  var _jsxFileName$M = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+  var _jsxFileName$N = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -3892,7 +4201,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3909,14 +4218,14 @@
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4121,7 +4430,7 @@
   Badge.displayName = 'Badge';
 
   const _excluded$t = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$L = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+  var _jsxFileName$M = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4174,7 +4483,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4184,7 +4493,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4192,21 +4501,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4224,7 +4533,7 @@
   };
 
   const _excluded$s = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$K = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/image/Image.js";
+  var _jsxFileName$L = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/image/Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4262,7 +4571,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4283,7 +4592,7 @@
   };
 
   const _excluded$r = ["children", "label", "color", "contentCss", "withClick"];
-  var _jsxFileName$J = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+  var _jsxFileName$K = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4395,7 +4704,7 @@
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4403,7 +4712,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4411,7 +4720,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4420,7 +4729,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4428,7 +4737,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4445,7 +4754,7 @@
   };
 
   const _excluded$q = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$I = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/progress/Progress.js";
+  var _jsxFileName$J = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -4579,7 +4888,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4592,7 +4901,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4616,7 +4925,7 @@
   };
 
   const _excluded$p = ["gap", "direction", "children"];
-  var _jsxFileName$H = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+  var _jsxFileName$I = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
 
   const FormGroup = _ref => {
     let {
@@ -4632,7 +4941,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 6,
         columnNumber: 3
       }
@@ -4650,7 +4959,7 @@
   };
 
   const _excluded$o = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-  var _jsxFileName$G = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+  var _jsxFileName$H = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text, {
     display: 'inline-block',
     fontSize: '$label',
@@ -4688,7 +4997,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4698,7 +5007,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -4708,7 +5017,7 @@
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4723,7 +5032,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4731,14 +5040,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -4747,7 +5056,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4764,7 +5073,7 @@
   FormLabel.displayName = 'FormLabel';
 
   const _excluded$n = ["children", "error"];
-  var _jsxFileName$F = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+  var _jsxFileName$G = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -4790,7 +5099,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4802,7 +5111,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$E = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+  var _jsxFileName$F = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 
   const CheckOutline$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4820,7 +5129,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4832,7 +5141,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4844,13 +5153,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$D = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+  var _jsxFileName$E = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
 
   const SvgMinusOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4868,7 +5177,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4880,7 +5189,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4892,14 +5201,14 @@
     d: "M14.31 10.41H3.9v-2.6h10.41z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
   const _excluded$m = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
-  var _jsxFileName$C = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+  var _jsxFileName$D = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$1 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -4966,28 +5275,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 56,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 63,
         columnNumber: 5
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 63,
         columnNumber: 39
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 63,
         columnNumber: 58
       }
@@ -5001,14 +5310,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 69,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 70,
         columnNumber: 7
       }
@@ -5024,14 +5333,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 71,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5048,7 +5357,7 @@
   InputCheckbox.displayName = 'InputCheckbox';
 
   const _excluded$l = ["children", "size"];
-  var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+  var _jsxFileName$C = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -5185,7 +5494,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -5499,7 +5808,7 @@
   InputRadioGroup.displayName = 'InputRadioGroup';
 
   const _excluded$k = ["id", "disabled"];
-  var _jsxFileName$A = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+  var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -5583,7 +5892,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5593,14 +5902,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5617,7 +5926,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5661,7 +5970,7 @@
   InputRightElement.name = 'InputRightElement';
 
   const _excluded$j = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-  var _jsxFileName$z = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tag/Tag.js";
+  var _jsxFileName$A = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagComponent = styled('span', {
     boxSizing: 'border-box',
     color: '$white',
@@ -5749,21 +6058,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 63,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5783,7 +6092,7 @@
   };
 
   const _excluded$i = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
-  var _jsxFileName$y = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+  var _jsxFileName$z = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const InputTagsComponent = styled('div', {
     display: 'flex',
     position: 'relative',
@@ -5855,7 +6164,7 @@
     flexWrap: 'wrap',
     maxWidth: '100%'
   });
-  const Input$2 = styled('input', {
+  const Input$3 = styled('input', {
     display: 'flex',
     position: 'relative',
     flex: 'auto',
@@ -5932,14 +6241,14 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 129,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(TagContainer, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 139,
         columnNumber: 7
       }
@@ -5950,7 +6259,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$y,
+          fileName: _jsxFileName$z,
           lineNumber: 144,
           columnNumber: 24
         }
@@ -5964,11 +6273,11 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 141,
         columnNumber: 11
       }
-    }, tag))), /*#__PURE__*/React__default["default"].createElement(Input$2, {
+    }, tag))), /*#__PURE__*/React__default["default"].createElement(Input$3, {
       type: "text",
       onKeyUp: event => addTags(event),
       onKeyDown: event => removeTags(tags.length - 1, event.key),
@@ -5978,7 +6287,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 157,
         columnNumber: 7
       }
@@ -6004,7 +6313,7 @@
   };
 
   const _excluded$h = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$x = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+  var _jsxFileName$y = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -6087,14 +6396,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -6112,7 +6421,7 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  var _jsxFileName$w = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+  var _jsxFileName$x = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
 
   const SvgCloseFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -6122,7 +6431,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6131,7 +6440,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6141,7 +6450,7 @@
     d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 6,
       columnNumber: 7
     }
@@ -6152,7 +6461,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -6162,7 +6471,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -6173,7 +6482,7 @@
     size: 24
   };
 
-  var _jsxFileName$v = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+  var _jsxFileName$w = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
 
   const SvgSearchOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -6183,7 +6492,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6195,7 +6504,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6204,7 +6513,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -6216,7 +6525,7 @@
   };
 
   const _excluded$g = ["size", "onChange"];
-  var _jsxFileName$u = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+  var _jsxFileName$v = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
@@ -6245,7 +6554,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -6253,14 +6562,14 @@
       children: /*#__PURE__*/React__default["default"].createElement(SvgSearchOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$u,
+          fileName: _jsxFileName$v,
           lineNumber: 29,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 29,
         columnNumber: 7
       }
@@ -6270,7 +6579,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 30,
         columnNumber: 7
       }
@@ -6278,14 +6587,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$u,
+          fileName: _jsxFileName$v,
           lineNumber: 31,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$u,
+          fileName: _jsxFileName$v,
           lineNumber: 31,
           columnNumber: 73
         }
@@ -6293,7 +6602,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -6653,7 +6962,7 @@
   });
 
   const _excluded$f = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly"];
-  var _jsxFileName$t = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+  var _jsxFileName$u = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
   const Box = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -6677,7 +6986,7 @@
     appearance: 'none',
     background: 'none',
     boxSizing: 'border-box',
-    border: '1px solid $gray150',
+    border: '1px solid $gray300',
     borderRadius: '$lg',
     outline: 'none',
     '&:focus-within': {
@@ -6732,6 +7041,7 @@
     border: 'none',
     cursor: 'pointer',
     color: '$textContent',
+    alignItems: 'center',
     '&:disabled': {
       cursor: 'not-allowed',
       color: '$textDisable'
@@ -6753,7 +7063,7 @@
       }
     }
   });
-  const Input$1 = styled('input', {
+  const Input$2 = styled('input', {
     marginLeft: '$spacing-05',
     display: 'flex',
     width: '100%',
@@ -6843,7 +7153,7 @@
     cursor: 'pointer',
     lineHeight: '20px'
   });
-  const StyledDiv$1 = styled('div', {
+  const StyledDiv = styled('div', {
     color: '$textDisable',
     display: 'inline-flex'
   });
@@ -6917,8 +7227,8 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 259,
+        fileName: _jsxFileName$u,
+        lineNumber: 260,
         columnNumber: 5
       }
     }), ({
@@ -6936,8 +7246,8 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 277,
+        fileName: _jsxFileName$u,
+        lineNumber: 278,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -6948,8 +7258,8 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 278,
+        fileName: _jsxFileName$u,
+        lineNumber: 279,
         columnNumber: 11
       }
     }), search ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -6958,8 +7268,8 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 280,
+        fileName: _jsxFileName$u,
+        lineNumber: 286,
         columnNumber: 15
       }
     }, icon ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -6969,26 +7279,26 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 282,
+        fileName: _jsxFileName$u,
+        lineNumber: 288,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
       children: /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$t,
-          lineNumber: 283,
+          fileName: _jsxFileName$u,
+          lineNumber: 289,
           columnNumber: 49
         }
       }),
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 283,
+        fileName: _jsxFileName$u,
+        lineNumber: 289,
         columnNumber: 21
       }
-    }), /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
+    }), /*#__PURE__*/React__namespace.createElement(Input$2, _extends({
       placeholder: placeholder,
       disabled: disabled,
       readOnly: readOnly
@@ -6998,11 +7308,11 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 284,
+        fileName: _jsxFileName$u,
+        lineNumber: 290,
         columnNumber: 21
       }
-    }))) : /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
+    }))) : /*#__PURE__*/React__namespace.createElement(Input$2, _extends({
       placeholder: placeholder,
       disabled: disabled,
       readOnly: readOnly
@@ -7012,8 +7322,8 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 292,
+        fileName: _jsxFileName$u,
+        lineNumber: 298,
         columnNumber: 19
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -7024,8 +7334,8 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 301,
+        fileName: _jsxFileName$u,
+        lineNumber: 307,
         columnNumber: 15
       }
     }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text, {
@@ -7033,8 +7343,8 @@
       css: StyledText,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 303,
+        fileName: _jsxFileName$u,
+        lineNumber: 314,
         columnNumber: 19
       }
     }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text, {
@@ -7042,8 +7352,8 @@
       css: StyledText,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 305,
+        fileName: _jsxFileName$u,
+        lineNumber: 318,
         columnNumber: 19
       }
     }, placeholder)), !icon ? /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
@@ -7053,16 +7363,16 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 310,
+        fileName: _jsxFileName$u,
+        lineNumber: 325,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 311,
+        fileName: _jsxFileName$u,
+        lineNumber: 330,
         columnNumber: 17
       }
     })) : null), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -7072,15 +7382,15 @@
       placement: placement,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 315,
+        fileName: _jsxFileName$u,
+        lineNumber: 334,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 317,
+        fileName: _jsxFileName$u,
+        lineNumber: 336,
         columnNumber: 15
       }
     }), item.map((item, index) => {
@@ -7102,23 +7412,23 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$t,
-          lineNumber: 319,
+          fileName: _jsxFileName$u,
+          lineNumber: 338,
           columnNumber: 19
         }
       }), item.name);
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 341,
+        fileName: _jsxFileName$u,
+        lineNumber: 360,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
+    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 342,
+        fileName: _jsxFileName$u,
+        lineNumber: 361,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -7127,8 +7437,8 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 343,
+        fileName: _jsxFileName$u,
+        lineNumber: 362,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -7139,8 +7449,8 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
-        lineNumber: 344,
+        fileName: _jsxFileName$u,
+        lineNumber: 363,
         columnNumber: 21
       }
     })), "Item tidak ditemukan")))));
@@ -7211,7 +7521,7 @@
     }
   });
 
-  var _jsxFileName$s = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/icon/CheckOutline.js";
+  var _jsxFileName$t = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/icon/CheckOutline.js";
 
   const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -7229,7 +7539,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$t,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7241,7 +7551,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$t,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -7253,13 +7563,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$t,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$r = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  var _jsxFileName$s = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
   const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -7335,7 +7645,7 @@
     flexWrap: 'wrap',
     maxWidth: '100%'
   });
-  const Input = styled('input', {
+  const Input$1 = styled('input', {
     background: 'none',
     outline: 'none',
     border: 'none',
@@ -7479,7 +7789,7 @@
     return /*#__PURE__*/React__namespace.createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 209,
         columnNumber: 5
       }
@@ -7488,7 +7798,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 210,
         columnNumber: 7
       }
@@ -7496,7 +7806,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 212,
         columnNumber: 11
       }
@@ -7517,7 +7827,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 224,
           columnNumber: 28
         }
@@ -7530,7 +7840,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 214,
         columnNumber: 15
       }
@@ -7539,11 +7849,11 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 237,
         columnNumber: 9
       }
-    }), /*#__PURE__*/React__namespace.createElement(Input, _extends({
+    }), /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
       placeholder: selectedItems.length !== 0 ? '' : placeholder,
       disabled: disabled
     }, getInputProps(getDropdownProps({
@@ -7551,21 +7861,21 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 238,
         columnNumber: 11
       }
     }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 244,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 245,
         columnNumber: 11
       }
@@ -7575,14 +7885,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 248,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 250,
         columnNumber: 11
       }
@@ -7594,7 +7904,7 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 253,
         columnNumber: 17
       }
@@ -7606,7 +7916,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 260,
         columnNumber: 19
       }
@@ -7614,7 +7924,7 @@
       color: colors.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 261,
         columnNumber: 53
       }
@@ -7625,14 +7935,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 263,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 275,
         columnNumber: 11
       }
@@ -7642,7 +7952,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 276,
         columnNumber: 13
       }
@@ -7663,7 +7973,7 @@
   };
 
   const _excluded$e = ["children"];
-  var _jsxFileName$q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
+  var _jsxFileName$r = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
   const PopoverContext = /*#__PURE__*/React.createContext();
   const Popover = ({
     children,
@@ -7700,7 +8010,7 @@
       value: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -7742,7 +8052,7 @@
       returnFocus: false,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 60,
         columnNumber: 5
       }
@@ -7752,12 +8062,12 @@
         position: strategy,
         top: isMobile ? 0 : y != null ? y : '',
         left: isMobile ? 0 : x != null ? x : '',
-        zIndex: 1
+        zIndex: 50
       }, style)
     }), {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 61,
         columnNumber: 7
       }
@@ -7774,12 +8084,12 @@
     } = React.useContext(PopoverContext);
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({}, props, {
       onClick: () => {
-        props.onClick();
+        if (props.onClick) props.onClick();
         setOpenState(false);
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 84,
         columnNumber: 5
       }
@@ -7794,7 +8104,7 @@
   Popover.displayName = 'Popover';
 
   const _excluded$d = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-  var _jsxFileName$p = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/slider/Slider.js";
+  var _jsxFileName$q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -8076,7 +8386,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -8085,7 +8395,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -8093,7 +8403,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -8102,7 +8412,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -8202,7 +8512,7 @@
 
   const _excluded$c = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
         _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-  var _jsxFileName$o = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+  var _jsxFileName$p = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
   const ButtonGroupComponent = styled(ToggleGroupPrimitive__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -8344,7 +8654,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$p,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -8397,21 +8707,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$p,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$p,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$p,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -8430,7 +8740,7 @@
   };
 
   const _excluded$b = ["children", "value"];
-  var _jsxFileName$n = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
+  var _jsxFileName$o = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
     display: 'inline-flex',
@@ -8560,7 +8870,7 @@
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$o,
         lineNumber: 132,
         columnNumber: 5
       }
@@ -8568,7 +8878,7 @@
       children: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$o,
         lineNumber: 134,
         columnNumber: 7
       }
@@ -8593,7 +8903,7 @@
   };
 
   const _excluded$a = ["className", "children", "radius", "padding", "width", "height"];
-  var _jsxFileName$m = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/paper/Paper.js";
+  var _jsxFileName$n = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -8625,7 +8935,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$m,
+        fileName: _jsxFileName$n,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -8693,7 +9003,7 @@
   });
 
   const _excluded$9 = ["children", "size", "css", "layer"];
-  var _jsxFileName$l = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
+  var _jsxFileName$m = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
   const ModalDialogFooter = styled('div');
   ModalDialogFooter.displayName = 'ModalDialogFooter';
   const ModalDialogTitle = styled('div');
@@ -8725,21 +9035,21 @@
     return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 49,
         columnNumber: 5
       }
     }), pageDialogTrigger && /*#__PURE__*/React__default["default"].createElement(DialogTrigger, _extends({}, pageDialogTrigger.props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 50,
         columnNumber: 29
       }
     })), /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 51,
         columnNumber: 7
       }
@@ -8749,7 +9059,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 52,
         columnNumber: 9
       }
@@ -8761,7 +9071,7 @@
       ref: ref,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 53,
         columnNumber: 9
       }
@@ -8774,7 +9084,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 54,
         columnNumber: 11
       }
@@ -8788,7 +9098,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 55,
         columnNumber: 13
       }
@@ -8802,7 +9112,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 64,
         columnNumber: 15
       }
@@ -8812,7 +9122,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 65,
         columnNumber: 17
       }
@@ -8821,7 +9131,7 @@
     }, headerTitle.props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 66,
         columnNumber: 35
       }
@@ -8829,7 +9139,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 68,
         columnNumber: 17
       }
@@ -8845,7 +9155,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 69,
         columnNumber: 19
       }
@@ -8853,7 +9163,7 @@
       size: "24",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 80,
         columnNumber: 21
       }
@@ -8864,7 +9174,7 @@
       }, pageDialogChildren.props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 85,
         columnNumber: 36
       }
@@ -8877,7 +9187,7 @@
       }, footerChildren.props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$m,
         lineNumber: 86,
         columnNumber: 32
       }
@@ -8888,8 +9198,8 @@
   };
 
   const _excluded$8 = ["children"];
-  var _jsxFileName$k = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/drawer/Drawer.js";
-  const Context = /*#__PURE__*/React__default["default"].createContext();
+  var _jsxFileName$l = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+  const Context$1 = /*#__PURE__*/React__default["default"].createContext();
   const {
     sizes
   } = core.foundations;
@@ -8933,22 +9243,22 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$l,
         lineNumber: 40,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$l,
         lineNumber: 41,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
+    }), /*#__PURE__*/React__default["default"].createElement(Context$1.Provider, {
       value: Object.assign({}, props),
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$l,
         lineNumber: 42,
         columnNumber: 7
       }
@@ -9026,8 +9336,10 @@
           maxWidth: '100vw',
           bottom: 0,
           top: 'auto',
-          height: 300,
-          left: 0
+          left: 0,
+          '@md': {
+            height: 300
+          }
         },
         left: {
           $$transformValue: 'translate3d(-100%,0,0)',
@@ -9102,53 +9414,53 @@
     }
   });
   const DrawerContent = props => {
-    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+    return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 199,
+        fileName: _jsxFileName$l,
+        lineNumber: 201,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 199,
+        fileName: _jsxFileName$l,
+        lineNumber: 201,
         columnNumber: 38
       }
     }), props.children));
   };
   const DrawerHeader = props => {
-    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+    return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 203,
+        fileName: _jsxFileName$l,
+        lineNumber: 205,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Header, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 203,
+        fileName: _jsxFileName$l,
+        lineNumber: 205,
         columnNumber: 38
       }
     }), props.children));
   };
   const DrawerFooter = props => {
-    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+    return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 207,
+        fileName: _jsxFileName$l,
+        lineNumber: 209,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Footer, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 207,
-        columnNumber: 38
+        fileName: _jsxFileName$l,
+        lineNumber: 209,
+        columnNumber: 38
       }
     }), props.children));
   };
@@ -9161,15 +9473,15 @@
     return /*#__PURE__*/React__default["default"].createElement(CloseButton, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 217,
+        fileName: _jsxFileName$l,
+        lineNumber: 219,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 218,
+        fileName: _jsxFileName$l,
+        lineNumber: 220,
         columnNumber: 7
       }
     }));
@@ -9200,7 +9512,7 @@
   const _excluded$7 = ["children", "disabled"],
         _excluded2$1 = ["children", "hasContent", "arrowColor"],
         _excluded3$1 = ["children"];
-  var _jsxFileName$j = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/accordion/Accordion.js";
+  var _jsxFileName$k = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/accordion/Accordion.js";
   //   from: { height: 0 },
   //   to: { height: 'var(--radix-accordion-content-height)' },
   // });
@@ -9223,7 +9535,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$k,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -9286,14 +9598,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$k,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$k,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -9302,7 +9614,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$k,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -9319,7 +9631,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent$3, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$k,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -9372,20 +9684,17 @@
     return matches;
   }
 
-  var _jsxFileName$i = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
-  const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {
-    width: '100%'
-  });
+  var _jsxFileName$j = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
+  const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
   const Item = styled(ButtonGroupItem, {
-    fontSize: '$content-button',
-    lineHeight: '$content-button',
-    letterSpacing: '$content-button',
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
     fontWeight: '600',
     justifyContent: 'start',
-    mb: '$spacing-03',
-    height: '40px',
-    width: '100%',
-    minWidth: '140px'
+    mb: '$spacing-02',
+    height: '32px',
+    width: '100%'
   });
   const AdvancedOption = ({
     options,
@@ -9397,8 +9706,8 @@
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 25,
+        fileName: _jsxFileName$j,
+        lineNumber: 21,
         columnNumber: 5
       }
     }, options.map(option => /*#__PURE__*/React__default["default"].createElement(Item, {
@@ -9409,8 +9718,8 @@
       onClick: () => optionHandler(option.value),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 27,
+        fileName: _jsxFileName$j,
+        lineNumber: 23,
         columnNumber: 9
       }
     }, option.label)));
@@ -9421,9 +9730,9 @@
     alignItems: 'center',
     justifyContent: 'center',
     cursor: 'pointer',
-    fontSize: '$short-content-regular',
-    lineHeight: '$short-content-regular',
-    letterSpacing: '$short-content-regular',
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
     fontWeight: '400',
     color: '$textPrimary',
     variants: {
@@ -9445,7 +9754,10 @@
         selected: {
           backgroundColor: '$bgGreen',
           color: '$white',
-          borderRadius: '$round'
+          borderRadius: '$round',
+          width: 30,
+          height: 30,
+          margin: 'auto'
         },
         start: {
           backgroundColor: '$bgGreen',
@@ -9463,7 +9775,7 @@
       },
       size: {
         large: {
-          size: '42px'
+          padding: '8px 6px 8px 6px'
         },
         small: {
           height: '32px',
@@ -9485,7 +9797,7 @@
   });
   DateNumber.displayName = 'DateNumber';
 
-  var _jsxFileName$h = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
+  var _jsxFileName$i = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
 
   const getVariant$1 = ({
     selectable,
@@ -9548,18 +9860,17 @@
     display: 'inline-block',
     width: '42px',
     textAlign: 'center',
-    marginBottom: '$spacing-05'
+    marginBottom: '$spacing-03'
   });
   const CalendarsContainer$1 = styled(Box$1, {
     width: '100%',
-    padding: '$spacing-04',
+    padding: '$spacing-01',
     display: 'inline-flex',
     borderRadius: '$lg',
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
     backgroundColor: '$white',
-    // alignItems: 'center',
     justifyContent: 'center',
-    gap: '$spacing-04',
+    gap: '$spacing-03',
     '@md': {
       width: 'unset'
     }
@@ -9574,8 +9885,12 @@
       width: 'unset'
     }
   });
-  const TitleButton$1 = styled(Heading, {
-    padding: '2px $spacing-04',
+  const TitleButton$1 = styled('p', {
+    padding: '4px $spacing-06',
+    marginTop: 6,
+    fontWeight: 600,
+    fontStyle: 'normal',
+    fontSize: 18,
     '&:hover': {
       backgroundColor: '$bgSuccess',
       color: '$textGreen'
@@ -9604,9 +9919,9 @@
     borderRadius: '$md',
     padding: '$spacing-05 0',
     cursor: 'pointer',
-    fontSize: '$short-content-regular',
-    lineHeight: '$short-content-regular',
-    letterSpacing: '$short-content-regular',
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
     fontWeight: '400',
     color: '$textPrimary',
     '&:hover': {
@@ -9631,10 +9946,39 @@
       }
     }
   });
+  const ButtonTime = styled('button', {
+    fontWeight: 600,
+    fontStyle: 'normal',
+    fontSize: 14,
+    letterSpacing: 2,
+    textAlign: 'center',
+    padding: 8,
+    width: '100%',
+    outline: 'none',
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    transition: '0.2s',
+    borderRadius: 2,
+    '&:hover': {
+      background: '$bgSuccess',
+      color: '$textGreen'
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: 'none',
+          background: '$btnDisable',
+          color: '$textDisable'
+        }
+      }
+    }
+  });
   const DATE_PICKER$1 = 0;
   const MONTH_PICKER$1 = 1;
   const YEAR_PICKER$1 = 2;
   const YEAR_RANGE_PICKER$1 = 3;
+  const TIME_PICKER = 4;
 
   const CalendarBox = ({
     calendars,
@@ -9647,7 +9991,9 @@
     onCancel,
     selected,
     containerStyle,
-    disabled
+    disabled,
+    showTimePicker,
+    renderTimePicker
   }) => {
     const [pickerState, setPickerState] = React.useState({
       type: pickerType != null ? pickerType : DATE_PICKER$1,
@@ -9683,8 +10029,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 205,
+          fileName: _jsxFileName$i,
+          lineNumber: 240,
           columnNumber: 7
         }
       }, monthNamesFull[calendars[index].month], " ", calendars[index].year) : /*#__PURE__*/React__default["default"].createElement(TitleButton$1, {
@@ -9697,8 +10043,8 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 218,
+          fileName: _jsxFileName$i,
+          lineNumber: 253,
           columnNumber: 7
         }
       }, pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER$1 && pickerState.selectedYear, pickerState.type === YEAR_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
@@ -9715,16 +10061,16 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 250,
+          fileName: _jsxFileName$i,
+          lineNumber: 285,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLeftOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 266,
+          fileName: _jsxFileName$i,
+          lineNumber: 301,
           columnNumber: 9
         }
       }));
@@ -9741,16 +10087,16 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 272,
+          fileName: _jsxFileName$i,
+          lineNumber: 307,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 293,
+          fileName: _jsxFileName$i,
+          lineNumber: 328,
           columnNumber: 9
         }
       }));
@@ -9761,12 +10107,12 @@
         justify: "between",
         align: "center",
         css: {
-          height: '44px'
+          height: '32px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 299,
+          fileName: _jsxFileName$i,
+          lineNumber: 334,
           columnNumber: 7
         }
       }, multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -9778,8 +10124,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 302,
+          fileName: _jsxFileName$i,
+          lineNumber: 337,
           columnNumber: 13
         }
       }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -9788,8 +10134,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 312,
+          fileName: _jsxFileName$i,
+          lineNumber: 347,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9799,8 +10145,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 318,
+          fileName: _jsxFileName$i,
+          lineNumber: 353,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -9812,8 +10158,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 324,
+          fileName: _jsxFileName$i,
+          lineNumber: 359,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -9822,8 +10168,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 332,
+          fileName: _jsxFileName$i,
+          lineNumber: 367,
           columnNumber: 15
         }
       }), renderTitleButton(1), renderForwardButton())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderBackButton(), renderTitleButton(), renderForwardButton()));
@@ -9833,12 +10179,12 @@
       return /*#__PURE__*/React__default["default"].createElement(Grid, {
         columns: 7,
         css: {
-          gridRowGap: '$spacing-04'
+          gridRowGap: '$spacing-02'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 354,
+          fileName: _jsxFileName$i,
+          lineNumber: 389,
           columnNumber: 7
         }
       }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
@@ -9855,8 +10201,8 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$h,
-              lineNumber: 365,
+              fileName: _jsxFileName$i,
+              lineNumber: 400,
               columnNumber: 17
             }
           });
@@ -9877,8 +10223,8 @@
           variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$h,
-            lineNumber: 382,
+            fileName: _jsxFileName$i,
+            lineNumber: 417,
             columnNumber: 15
           }
         }), date.getDate());
@@ -9894,8 +10240,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 398,
+          fileName: _jsxFileName$i,
+          lineNumber: 433,
           columnNumber: 7
         }
       }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
@@ -9908,8 +10254,8 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 406,
+          fileName: _jsxFileName$i,
+          lineNumber: 441,
           columnNumber: 11
         }
       }, range.start, "-", range.end)));
@@ -9921,13 +10267,13 @@
       return /*#__PURE__*/React__default["default"].createElement(Grid, {
         columns: 3,
         css: {
-          gridRowGap: '$spacing-06',
-          gridColumnGap: '20px'
+          gridRowGap: '$spacing-04',
+          gridColumnGap: '12px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 429,
+          fileName: _jsxFileName$i,
+          lineNumber: 464,
           columnNumber: 7
         }
       }, yearsArray.map((year, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
@@ -9940,8 +10286,8 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 437,
+          fileName: _jsxFileName$i,
+          lineNumber: 472,
           columnNumber: 11
         }
       }, year)));
@@ -9951,13 +10297,13 @@
       return /*#__PURE__*/React__default["default"].createElement(Grid, {
         columns: 3,
         css: {
-          gridRowGap: '$spacing-06',
-          gridColumnGap: '20px'
+          gridRowGap: '$spacing-04',
+          gridColumnGap: '12px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 458,
+          fileName: _jsxFileName$i,
+          lineNumber: 493,
           columnNumber: 7
         }
       }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
@@ -9973,8 +10319,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 466,
+          fileName: _jsxFileName$i,
+          lineNumber: 501,
           columnNumber: 11
         }
       }, monthName)));
@@ -9985,19 +10331,20 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 488,
+          fileName: _jsxFileName$i,
+          lineNumber: 523,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
         paragraph: "shortContentBold",
         css: {
-          color: '$textSecondary'
+          color: '$textSecondary',
+          fontSize: '$label'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 489,
+          fileName: _jsxFileName$i,
+          lineNumber: 524,
           columnNumber: 9
         }
       }, weekday)));
@@ -10007,47 +10354,51 @@
       return /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 503,
+          fileName: _jsxFileName$i,
+          lineNumber: 539,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
         css: {
-          my: '$spacing-04'
+          my: '$spacing-03'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 504,
+          fileName: _jsxFileName$i,
+          lineNumber: 540,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         justify: "between",
         align: "center",
+        css: {
+          padding: '0px 8px'
+        },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 505,
+          fileName: _jsxFileName$i,
+          lineNumber: 541,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Heading, {
         heading: "sectionTitle",
         color: selected.length > 1 ? 'primary' : 'disable',
         css: {
-          lineHeight: '$long-content-regular'
+          lineHeight: '$short-content-regular',
+          fontSize: '$short-content-regular'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 506,
+          fileName: _jsxFileName$i,
+          lineNumber: 542,
           columnNumber: 11
         }
       }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : selected.length <= 0 ? 'Tanggal belum dipilih' : toDateFormat(selected[0])), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 519,
+          fileName: _jsxFileName$i,
+          lineNumber: 556,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -10059,8 +10410,8 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 520,
+          fileName: _jsxFileName$i,
+          lineNumber: 557,
           columnNumber: 13
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -10071,51 +10422,121 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 530,
+          fileName: _jsxFileName$i,
+          lineNumber: 567,
           columnNumber: 13
         }
       }, "Proses"))));
     };
 
+    const renderTime = () => {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        css: {
+          padding: 4
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 584,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          my: '$spacing-02'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 585,
+          columnNumber: 9
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(ButtonTime, {
+        disabled: disabled,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          type: TIME_PICKER
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 586,
+          columnNumber: 9
+        }
+      }, selected && selected[0] ? moment__default["default"](selected[0]).format('HH:mm') : moment__default["default"]().format('HH:mm')));
+    };
+
+    const renderButtonTime = () => {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        css: {
+          padding: 4
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 603,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          my: '$spacing-02'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 604,
+          columnNumber: 9
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(ButtonTime, {
+        disabled: disabled,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          type: DATE_PICKER$1
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$i,
+          lineNumber: 605,
+          columnNumber: 9
+        }
+      }, "Done"));
+    };
+
     if (calendars.length) {
       return /*#__PURE__*/React__default["default"].createElement(CalendarsContainer$1, {
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 547,
+          fileName: _jsxFileName$i,
+          lineNumber: 622,
           columnNumber: 7
         }
       }, advanceView, advanceView && /*#__PURE__*/React__default["default"].createElement(Separator, {
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 550,
+          fileName: _jsxFileName$i,
+          lineNumber: 625,
           columnNumber: 25
         }
       }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 551,
+          fileName: _jsxFileName$i,
+          lineNumber: 626,
           columnNumber: 9
         }
       }, renderHeader(), /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer$1, {
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 553,
+          fileName: _jsxFileName$i,
+          lineNumber: 628,
           columnNumber: 11
         }
       }, calendars.map((calendar, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 555,
+          fileName: _jsxFileName$i,
+          lineNumber: 630,
           columnNumber: 15
         }
       }, index > 0 && /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -10125,34 +10546,34 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 557,
+          fileName: _jsxFileName$i,
+          lineNumber: 632,
           columnNumber: 19
         }
       }), /*#__PURE__*/React__default["default"].createElement(DateContainer$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 564,
+          fileName: _jsxFileName$i,
+          lineNumber: 639,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
         css: {
-          mb: '$spacing-05'
+          mb: '$spacing-03'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$h,
-          lineNumber: 565,
+          fileName: _jsxFileName$i,
+          lineNumber: 640,
           columnNumber: 19
         }
-      }), pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList())))), multiDatePicker && renderFooter()));
+      }), pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker())))), multiDatePicker && renderFooter(), showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())));
     }
 
     return null;
   };
 
-  var _jsxFileName$g = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
+  var _jsxFileName$h = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
 
   const getVariant = ({
     selectable,
@@ -10383,7 +10804,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 241,
           columnNumber: 7
         }
@@ -10397,7 +10818,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 254,
           columnNumber: 7
         }
@@ -10415,7 +10836,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 286,
           columnNumber: 7
         }
@@ -10423,7 +10844,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 302,
           columnNumber: 9
         }
@@ -10441,7 +10862,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 308,
           columnNumber: 7
         }
@@ -10449,7 +10870,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 329,
           columnNumber: 9
         }
@@ -10465,7 +10886,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 335,
           columnNumber: 7
         }
@@ -10480,7 +10901,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 347,
           columnNumber: 7
         }
@@ -10498,7 +10919,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$g,
+              fileName: _jsxFileName$h,
               lineNumber: 358,
               columnNumber: 17
             }
@@ -10521,7 +10942,7 @@
           variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$g,
+            fileName: _jsxFileName$h,
             lineNumber: 375,
             columnNumber: 15
           }
@@ -10538,7 +10959,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 392,
           columnNumber: 7
         }
@@ -10552,7 +10973,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 400,
           columnNumber: 11
         }
@@ -10570,7 +10991,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 423,
           columnNumber: 7
         }
@@ -10584,7 +11005,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 431,
           columnNumber: 11
         }
@@ -10600,7 +11021,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 452,
           columnNumber: 7
         }
@@ -10617,7 +11038,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 460,
           columnNumber: 11
         }
@@ -10628,7 +11049,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 482,
           columnNumber: 7
         }
@@ -10636,7 +11057,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 484,
           columnNumber: 11
         }
@@ -10647,7 +11068,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 485,
           columnNumber: 13
         }
@@ -10657,11 +11078,11 @@
     const renderFooter = () => {
       return /*#__PURE__*/React__default["default"].createElement(FooterContainer, {
         direction: "column",
-        center: true,
+        justify: "center",
         gap: 4,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 501,
           columnNumber: 7
         }
@@ -10671,7 +11092,7 @@
         onClick: () => setExpandAdvanceView(!expandAdvanceView),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 504,
           columnNumber: 13
         }
@@ -10679,21 +11100,21 @@
         variant: "contentButton",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 505,
           columnNumber: 15
         }
       }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 506,
           columnNumber: 36
         }
       }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 506,
           columnNumber: 61
         }
@@ -10703,7 +11124,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 509,
           columnNumber: 13
         }
@@ -10712,7 +11133,7 @@
         color: selected.length > 1 ? 'primary' : 'disable',
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 516,
           columnNumber: 9
         }
@@ -10720,7 +11141,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 521,
           columnNumber: 9
         }
@@ -10735,7 +11156,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 522,
           columnNumber: 11
         }
@@ -10749,7 +11170,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 534,
           columnNumber: 11
         }
@@ -10760,7 +11181,7 @@
       return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 552,
           columnNumber: 7
         }
@@ -10768,7 +11189,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 553,
           columnNumber: 9
         }
@@ -10777,7 +11198,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 554,
           columnNumber: 11
         }
@@ -10785,7 +11206,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 556,
           columnNumber: 15
         }
@@ -10795,7 +11216,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$g,
+          fileName: _jsxFileName$h,
           lineNumber: 558,
           columnNumber: 17
         }
@@ -10805,7 +11226,252 @@
     return null;
   };
 
-  const _excluded$6 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled"],
+  var _jsxFileName$g = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
+  const Input = styled('input', {
+    display: 'none'
+  });
+  const Time = styled('p', {
+    fontWeight: 600,
+    fontStyle: 'normal',
+    fontSize: 28,
+    margin: 0,
+    letterSpacing: 2,
+    userSelect: 'none',
+    variants: {
+      size: {
+        sm: {
+          fontSize: 24
+        },
+        md: {
+          fontSize: 28
+        },
+        lg: {
+          fontSize: 32
+        }
+      }
+    }
+  });
+  const Container = styled(Flex$1, {
+    borderRadius: 8,
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
+    width: 200,
+    height: 130,
+    variants: {
+      size: {
+        sm: {
+          width: 180,
+          height: 115
+        },
+        md: {
+          width: 200,
+          height: 130
+        },
+        lg: {
+          width: 219,
+          height: 146
+        }
+      }
+    }
+  });
+  const IconUp = styled(icons.ChevronUpOutline, {
+    cursor: 'pointer',
+    borderRadius: 6,
+    '&:hover': {
+      background: '$bgSuccess'
+    }
+  });
+  const IconDown = styled(icons.ChevronDownOutline, {
+    cursor: 'pointer',
+    borderRadius: 6,
+    '&:hover': {
+      background: '$bgSuccess'
+    }
+  });
+
+  const IconStateFull = props => {
+    const [isHover, setIsHover] = React.useState(false);
+
+    function toggleHover() {
+      setIsHover(!isHover);
+    }
+
+    return props.type === 'up' ? /*#__PURE__*/React__default["default"].createElement(IconUp, _extends({}, props, {
+      color: isHover ? '#04C99E' : '#404545',
+      onMouseEnter: toggleHover,
+      onMouseLeave: toggleHover,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 79,
+        columnNumber: 5
+      }
+    })) : /*#__PURE__*/React__default["default"].createElement(IconDown, _extends({}, props, {
+      color: isHover ? '#04C99E' : '#404545',
+      onMouseEnter: toggleHover,
+      onMouseLeave: toggleHover,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 81,
+        columnNumber: 5
+      }
+    }));
+  };
+
+  const NativeTimePicker = ({
+    size,
+    onChange,
+    defaultValue,
+    value
+  }) => {
+    const [date, setDate] = React.useState(value ? value : defaultValue ? defaultValue : moment__default["default"]());
+    const format = 'HH:mm';
+
+    function handleChange(e) {
+      onChange(e, moment__default["default"](e).format(format));
+    }
+
+    function setNewDate(newDate) {
+      setDate(newDate);
+      onChange && handleChange(newDate);
+    }
+
+    function handleUp(type) {
+      type === 'hour' ? setNewDate(moment__default["default"](date).add(1, 'hours')) : setNewDate(moment__default["default"](date).add(1, 'minutes'));
+    }
+
+    function handleDown(type) {
+      type === 'hour' ? setNewDate(moment__default["default"](date).subtract(1, 'hours')) : setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      direction: "column",
+      gap: 3,
+      align: "center",
+      justify: "center",
+      css: {
+        width: 'fit-content'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 112,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      direction: "row",
+      gap: 6,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 113,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+      type: "up",
+      onClick: () => handleUp('hour'),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 114,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+      type: "up",
+      onClick: () => handleUp('minutes'),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 115,
+        columnNumber: 9
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(Input, {
+      type: "time",
+      defaultValue: moment__default["default"](date).format(format),
+      value: value,
+      onChange: handleChange,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 117,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Time, {
+      size: size,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 118,
+        columnNumber: 7
+      }
+    }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      direction: "row",
+      gap: 6,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 119,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+      type: "down",
+      onClick: () => handleDown('hour'),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 120,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+      type: "down",
+      onClick: () => handleDown('minutes'),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 121,
+        columnNumber: 9
+      }
+    })));
+  };
+  const TimePicker = ({
+    size,
+    onChange,
+    defaultValue,
+    value
+  }) => {
+    return /*#__PURE__*/React__default["default"].createElement(Container, {
+      size: size,
+      direction: "column",
+      gap: 3,
+      center: true,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 129,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
+      size: size,
+      onChange: onChange,
+      defaultValue: defaultValue,
+      value: value,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 130,
+        columnNumber: 7
+      }
+    }));
+  };
+  TimePicker.displayName = 'TimePicker';
+  TimePicker.propTypes = {
+    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+    onChange: PropTypes__default["default"].func,
+    defaultValue: PropTypes__default["default"].instanceOf(Date),
+    value: PropTypes__default["default"].instanceOf(Date)
+  };
+
+  const _excluded$6 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "showTimePicker"],
         _excluded2 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled"],
         _excluded3 = ["type"];
   var _jsxFileName$f = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
@@ -10820,7 +11486,8 @@
       onClose,
       advanceView,
       selected,
-      disabled
+      disabled,
+      showTimePicker
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
@@ -10855,18 +11522,47 @@
         onChange(dateValue);
       }
     }, [dateValue]);
+
+    const timePicker = () => {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        css: {
+          padding: '50px 95px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$f,
+          lineNumber: 60,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
+        size: "lg",
+        value: dateValue ? moment__default["default"](dateValue) : moment__default["default"](),
+        onChange: date => {
+          setDateValue(new Date(date));
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$f,
+          lineNumber: 61,
+          columnNumber: 9
+        }
+      }));
+    };
+
     return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
       onUpdate: multiDatePicker ? updateHandler : undefined,
       onCancel: onClose,
       selected: dateValue ? [dateValue] : undefined,
       advanceView: advanceView,
       disabled: disabled,
-      onCalendarDateChange: date => setCalendarDate(date)
+      onCalendarDateChange: date => setCalendarDate(date),
+      showTimePicker: showTimePicker,
+      renderTimePicker: timePicker
     }, dayzedData, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 42,
+        lineNumber: 73,
         columnNumber: 5
       }
     }));
@@ -10942,7 +11638,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 102,
+        lineNumber: 138,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
@@ -10957,7 +11653,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 113,
+        lineNumber: 149,
         columnNumber: 5
       }
     }));
@@ -10974,7 +11670,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 129,
+          lineNumber: 165,
           columnNumber: 12
         }
       }));
@@ -10984,7 +11680,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 131,
+        lineNumber: 167,
         columnNumber: 10
       }
     }));
@@ -11141,7 +11837,8 @@
     date,
     advanceView,
     placement = 'bottom-start',
-    css
+    css,
+    showTimePicker
   }) {
     const [{
       selectedDate
@@ -11157,7 +11854,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 114,
+        lineNumber: 115,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -11165,14 +11862,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 115,
+          lineNumber: 116,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 115,
+        lineNumber: 116,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -11184,7 +11881,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 116,
+        lineNumber: 117,
         columnNumber: 7
       }
     }));
@@ -11199,7 +11896,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 130,
+          lineNumber: 131,
           columnNumber: 11
         }
       }) : {
@@ -11218,10 +11915,11 @@
         if (onChange) onChange(date);
       },
       onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 126,
+        lineNumber: 127,
         columnNumber: 5
       }
     });
@@ -11233,14 +11931,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 148,
+        lineNumber: 150,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 149,
+        lineNumber: 151,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -11248,14 +11946,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 150,
+        lineNumber: 152,
         columnNumber: 9
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 152,
+        lineNumber: 154,
         columnNumber: 7
       }
     }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -11269,6 +11967,7 @@
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
       open: openPicker,
       onOpenChange: setOpenPicker,
+      side: "bottom",
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
@@ -11276,7 +11975,6 @@
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
-      side: "bottom",
       css: {
         position: 'fixed',
         left: 0
@@ -11298,7 +11996,8 @@
     onChange: PropTypes__default["default"].func,
     date: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
     advanceView: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].node]),
-    css: PropTypes__default["default"].object
+    css: PropTypes__default["default"].object,
+    showTimePicker: PropTypes__default["default"].bool
   };
   InputDatePicker.displayName = 'InputDatePicker';
 
@@ -14140,54 +14839,8 @@
   const AlertDialogCancel = ADialog__namespace.Cancel;
   const AlertDialogConfirm = ADialog__namespace.Action;
 
-  var _jsxFileName$1 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/container/pageContainer.js";
-  const StyledDiv = styled('div', {
-    display: 'flex',
-    justifyContent: 'center',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    '@sm': {
-      padding: '$spacing-04',
-      backgroundColor: '$white',
-      width: '100%'
-    },
-    '@md': {
-      padding: '0',
-      backgroundColor: '$bgGray'
-    },
-    '@3xl': {
-      maxWidth: '1206px !important'
-    },
-    variants: {
-      direction: {
-        column: {
-          flexDirection: 'column'
-        },
-        row: {
-          flexDirection: 'row'
-        }
-      }
-    },
-    defaultVariants: {
-      direction: 'column'
-    }
-  });
-  const PageContainer = props => {
-    return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
-      id: "retina-container"
-    }, props, {
-      css: Object.assign({
-        maxWidth: props.isCollapse ? '1206px' : '1006px'
-      }, props.css),
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 38,
-        columnNumber: 5
-      }
-    }), props.children);
-  };
-
+  var _jsxFileName$1 = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
+  const Context = /*#__PURE__*/React__default["default"].createContext();
   const slideUpAndFade = keyframes({
     '0%': {
       opacity: 0,
@@ -14306,6 +14959,52 @@
   const StyledArrow = styled(DropdownMenuPrimitive__namespace.Arrow, {
     fill: 'white'
   });
+
+  const DropdownMenuContext = ({
+    side,
+    align,
+    children,
+    props
+  }) => {
+    return /*#__PURE__*/React__default["default"].createElement(DropdownMenuPrimitive__namespace.Root, _extends({}, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 111,
+        columnNumber: 5
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
+      value: {
+        side,
+        align
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 112,
+        columnNumber: 7
+      }
+    }, children));
+  };
+
+  const DropdownMenuContentContext = props => {
+    const {
+      side,
+      align
+    } = React__default["default"].useContext(Context);
+    return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({
+      side: side,
+      align: align
+    }, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 120,
+        columnNumber: 5
+      }
+    }), props.children);
+  };
+
   const RightSlot = styled('div', {
     marginLeft: 'auto',
     ':focus > &': {
@@ -14315,17 +15014,37 @@
       color: colors.gray400
     }
   });
-  const ButtonDropdown = styled(ButtonPrimitive, {
+  const StyledDropdown = styled(ButtonPrimitive, {
     display: 'flex',
     gap: '8px',
     padding: '6px 12px'
   });
+  const ButtonDropdown = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(StyledDropdown, _extends({
+    ref: ref,
+    css: props.css
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 139,
+      columnNumber: 3
+    }
+  }), props.children, props.rightIcon && props.rightIcon));
+  ButtonDropdown.propTypes = {
+    children: PropTypes__default["default"].node.isRequired,
+    css: PropTypes__default["default"].object,
+    rightIcon: PropTypes__default["default"].node
+  };
+  ButtonDropdown.defaultProps = {
+    css: {},
+    rightIcon: undefined
+  };
   ButtonDropdown.displayName = 'ButtonDropdown';
   RightSlot.displayName = 'RightSlot'; // Exports
 
-  const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+  const DropdownMenu = DropdownMenuContext;
   const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
-  const DropdownMenuContent = StyledContent;
+  const DropdownMenuContent = DropdownMenuContentContext;
   const DropdownMenuItem = StyledItem;
   const DropdownMenuCheckboxItem = StyledCheckboxItem;
   const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
@@ -14335,6 +15054,7 @@
   const DropdownMenuLabel = StyledLabel;
   const DropdownMenuSeparator = StyledSeparator;
   const DropdownMenuArrow = StyledArrow;
+  DropdownMenu.displayName = 'DropdownMenu';
   DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
   DropdownMenuContent.displayName = 'DropdownMenuContent';
   DropdownMenuItem.displayName = 'DropdownMenuItem';
@@ -14433,6 +15153,11 @@
   exports.BOTTOM_LEFT_POSITION = BOTTOM_LEFT_POSITION;
   exports.BOTTOM_RIGHT_POSITION = BOTTOM_RIGHT_POSITION;
   exports.Badge = Badge;
+  exports.Banner = Banner;
+  exports.BannerClose = BannerClose;
+  exports.BannerDescription = BannerDescription;
+  exports.BannerLink = BannerLink;
+  exports.BannerTitle = BannerTitle;
   exports.Box = Box$1;
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
@@ -14514,6 +15239,7 @@
   exports.ModalDialogFooter = ModalDialogFooter;
   exports.ModalDialogTitle = ModalDialogTitle;
   exports.ModalDialogTrigger = ModalDialogTrigger;
+  exports.NativeTimePicker = NativeTimePicker;
   exports.NotificationBadge = NotificationBadge;
   exports.PageContainer = PageContainer;
   exports.PageDialog = PageDialog;
@@ -14540,6 +15266,7 @@
   exports.Separator = Separator;
   exports.Slider = Slider;
   exports.StyledBox = StyledBox;
+  exports.StyledDropdown = StyledDropdown;
   exports.StyledTitle = StyledTitle$2;
   exports.TOP_LEFT_POSITION = TOP_LEFT_POSITION;
   exports.TOP_RIGHT_POSITION = TOP_RIGHT_POSITION;
@@ -14558,6 +15285,7 @@
   exports.TabsTrigger = TabsTrigger;
   exports.Tag = Tag;
   exports.Text = Text;
+  exports.TimePicker = TimePicker;
   exports.ToastContext = ToastContext;
   exports.Tooltip = Tooltip;
   exports.addOnCellStyle = addOnCellStyle;