@majoo-ui/react 1.35.0 → 1.36.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('@radix-ui/react-popover'), 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')) :
-  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', '@radix-ui/react-popover', '@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'], 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.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.ReactDOM, global.reactTable, global.moment, global.debounce, global.ADialog));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactDom, reactTable, moment, debounce, ADialog) { '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('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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +35,6 @@
   var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
   var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
   var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
-  var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
   var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
   var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
   var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -45,8 +44,9 @@
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
+  var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 
-  var _jsxFileName$U = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+  var _jsxFileName$V = "/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$U,
+        fileName: _jsxFileName$V,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1122,7 +1122,8 @@
       md: '(min-width: 767px)',
       lg: '(min-width: 1023px)',
       xl: '(min-width: 1199px)',
-      '2xl': '(min-width: 1399px)'
+      '2xl': '(min-width: 1399px)',
+      '3xl': '(min-width: 1600px)'
     },
     utils: {
       m: value => ({
@@ -2189,9 +2190,9 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$y = ["children"],
+  const _excluded$z = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$T = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/grid/Grid.js";
+  var _jsxFileName$U = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2365,7 +2366,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2376,7 +2377,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2432,7 +2433,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2662,8 +2663,8 @@
 
   Paragraph.displayName = 'Paragraph';
 
-  const _excluded$x = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$S = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/Button.js";
+  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 ButtonPrimary = {
     backgroundColor: '$btnPrimary',
     color: '$textWhite',
@@ -2870,7 +2871,8 @@
       }
     }
   });
-  function Button$1(_ref) {
+  const ButtonPrimitive = ButtonComponent;
+  const Button$1 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     let {
       className,
       children,
@@ -2885,7 +2887,7 @@
       rightIcon,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
       className: className,
@@ -2898,37 +2900,38 @@
       css: Object.assign({}, props.css, {
         display: block ? 'block' : 'inline-block',
         width: block ? '100%' : width
-      })
+      }),
+      ref: ref
     }, props, {
-      __self: this,
+      __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 240,
-        columnNumber: 5
+        fileName: _jsxFileName$T,
+        lineNumber: 241,
+        columnNumber: 3
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
-      __self: this,
+      __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 251,
-        columnNumber: 33
+        fileName: _jsxFileName$T,
+        lineNumber: 253,
+        columnNumber: 31
       }
     }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
-      __self: this,
+      __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 252,
-        columnNumber: 15
+        fileName: _jsxFileName$T,
+        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: this,
+      __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 253,
-        columnNumber: 34
+        fileName: _jsxFileName$T,
+        lineNumber: 255,
+        columnNumber: 32
       }
     }, rightIcon) : null);
-  }
+  });
   Button$1.propTypes = {
     className: PropTypes__default["default"].string,
     buttonType: PropTypes__default["default"].string,
@@ -2949,7 +2952,7 @@
     icon: false
   };
 
-  var _jsxFileName$R = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/ButtonLink.js";
+  var _jsxFileName$S = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/ButtonLink.js";
   const StyledLink = styled('a', {
     fontSize: '$short-content-regular',
     textDecoration: 'underline',
@@ -2981,7 +2984,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 31,
         columnNumber: 5
       }
@@ -3002,8 +3005,8 @@
     onClick: () => {}
   };
 
-  const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$Q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/Toast.js";
+  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 TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -3136,7 +3139,7 @@
     '-webkit-box-orient': 'vertical',
     overflow: 'hidden'
   });
-  const CloseButton = styled(Flex$1, {
+  const CloseButton$1 = styled(Flex$1, {
     cursor: 'pointer',
     size: '20px',
     borderRadius: '$round',
@@ -3168,7 +3171,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3197,7 +3200,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3209,7 +3212,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3219,7 +3222,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3227,7 +3230,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3235,7 +3238,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3243,7 +3246,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3255,7 +3258,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3263,7 +3266,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3278,7 +3281,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3287,11 +3290,11 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 250,
         columnNumber: 19
       }
-    }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton, {
+    }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
@@ -3301,7 +3304,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3310,7 +3313,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 263,
         columnNumber: 19
       }
@@ -3326,7 +3329,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 268,
         columnNumber: 15
       }
@@ -3350,7 +3353,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$P = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+  var _jsxFileName$Q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3392,7 +3395,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3400,7 +3403,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3411,7 +3414,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$P,
+          fileName: _jsxFileName$Q,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3419,8 +3422,8 @@
     })));
   };
 
-  const _excluded$v = ["id"];
-  var _jsxFileName$O = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+  const _excluded$w = ["id"];
+  var _jsxFileName$P = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3432,7 +3435,7 @@
       const {
         id
       } = toast,
-            rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
+            rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
       const uniqueId = ++toastCount;
@@ -3458,7 +3461,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 41,
         columnNumber: 5
       }
@@ -3467,7 +3470,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 43,
         columnNumber: 7
       }
@@ -3476,7 +3479,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 47,
         columnNumber: 7
       }
@@ -3485,7 +3488,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 51,
         columnNumber: 7
       }
@@ -3494,14 +3497,14 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 55,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$N = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+  var _jsxFileName$O = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3514,14 +3517,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3576,9 +3579,11 @@
       backgroundColor: 'rgba(0, 0, 0, .05)'
     },
     alignSelf: 'start',
+    alignItems: 'center',
+    justifyContent: 'center',
     variants: {
-      hasTitle: {
-        false: {
+      closeCenter: {
+        true: {
           alignSelf: 'center'
         }
       }
@@ -3588,12 +3593,14 @@
     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
   });
 
-  const _excluded$u = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$M = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/card/Card.js";
+  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";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -3730,7 +3737,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -3743,7 +3750,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -3751,14 +3758,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         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$M,
+        fileName: _jsxFileName$N,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -3767,14 +3774,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -3838,8 +3845,8 @@
       return t;
   }
 
-  const _excluded$t = ["children"];
-  var _jsxFileName$L = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+  const _excluded$u = ["children"];
+  var _jsxFileName$M = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -3885,7 +3892,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3896,20 +3903,20 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4113,8 +4120,8 @@
 
   Badge.displayName = 'Badge';
 
-  const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$K = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+  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";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4158,7 +4165,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4167,7 +4174,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4177,7 +4184,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4185,21 +4192,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         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$K,
+        fileName: _jsxFileName$L,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4216,8 +4223,8 @@
     delayMs: 0
   };
 
-  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$J = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/image/Image.js";
+  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";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4240,7 +4247,7 @@
       objectFit,
       fallback
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
       className: className,
@@ -4255,7 +4262,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4275,8 +4282,8 @@
     rounded: false
   };
 
-  const _excluded$q = ["children", "label", "color", "contentCss", "withClick"];
-  var _jsxFileName$I = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+  const _excluded$r = ["children", "label", "color", "contentCss", "withClick"];
+  var _jsxFileName$J = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4381,14 +4388,14 @@
       color,
       withClick
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4396,7 +4403,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4404,7 +4411,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4413,7 +4420,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4421,7 +4428,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$J,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4437,8 +4444,8 @@
     color: 'light'
   };
 
-  const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$H = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/progress/Progress.js";
+  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";
   const StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -4556,7 +4563,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress, _extends({
       className: className,
@@ -4572,7 +4579,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4585,7 +4592,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4608,8 +4615,8 @@
     rounded: true
   };
 
-  const _excluded$o = ["gap", "direction", "children"];
-  var _jsxFileName$G = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+  const _excluded$p = ["gap", "direction", "children"];
+  var _jsxFileName$H = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
 
   const FormGroup = _ref => {
     let {
@@ -4617,7 +4624,7 @@
       direction,
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: direction,
@@ -4625,7 +4632,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 6,
         columnNumber: 3
       }
@@ -4642,9 +4649,9 @@
     direction: 'column'
   };
 
-  const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-  var _jsxFileName$F = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
-  const StyledLabel = styled(LabelPrimitive__namespace.Root, Text, {
+  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";
+  const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text, {
     display: 'inline-block',
     fontSize: '$label',
     lineHeight: '$label',
@@ -4675,13 +4682,13 @@
       maxCount,
       labelCss
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4691,17 +4698,17 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 37,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, {
       htmlFor: htmlFor,
       variant: variant,
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4716,7 +4723,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4724,14 +4731,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -4740,7 +4747,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4756,8 +4763,8 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$m = ["children", "error"];
-  var _jsxFileName$E = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+  const _excluded$n = ["children", "error"];
+  var _jsxFileName$F = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -4775,7 +4782,7 @@
       children,
       error
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
@@ -4783,7 +4790,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$F,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4795,7 +4802,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$D = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+  var _jsxFileName$E = "/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",
@@ -4813,7 +4820,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4825,7 +4832,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4837,13 +4844,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$C = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+  var _jsxFileName$D = "/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",
@@ -4861,7 +4868,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$D,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4873,7 +4880,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$D,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4885,14 +4892,14 @@
     d: "M14.31 10.41H3.9v-2.6h10.41z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$D,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  const _excluded$l = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
-  var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+  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";
   const StyledIndicator$1 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -4949,7 +4956,7 @@
       disabled,
       onCheckedChange
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -4959,28 +4966,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 56,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 63,
         columnNumber: 5
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 63,
         columnNumber: 39
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 63,
         columnNumber: 58
       }
@@ -4994,14 +5001,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 69,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 70,
         columnNumber: 7
       }
@@ -5017,14 +5024,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 71,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5040,8 +5047,8 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$k = ["children", "size"];
-  var _jsxFileName$A = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+  const _excluded$l = ["children", "size"];
+  var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -5154,7 +5161,7 @@
       children,
       size = 'lg'
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
     const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
@@ -5178,7 +5185,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -5491,8 +5498,8 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled"];
-  var _jsxFileName$z = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+  const _excluded$k = ["id", "disabled"];
+  var _jsxFileName$A = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -5569,14 +5576,14 @@
       id,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5586,14 +5593,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5610,7 +5617,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5653,8 +5660,8 @@
   };
   InputRightElement.name = 'InputRightElement';
 
-  const _excluded$i = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-  var _jsxFileName$y = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tag/Tag.js";
+  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";
   const TagComponent = styled('span', {
     boxSizing: 'border-box',
     color: '$white',
@@ -5730,7 +5737,7 @@
       leftIcon,
       rightIcon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(TagComponent, _extends({
       ref: ref,
@@ -5742,21 +5749,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 63,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5775,8 +5782,8 @@
     size: 'sm'
   };
 
-  const _excluded$h = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
-  var _jsxFileName$x = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+  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";
   const InputTagsComponent = styled('div', {
     display: 'flex',
     position: 'relative',
@@ -5895,7 +5902,7 @@
       readOnly,
       max
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
     const [tags, setTags] = React__default["default"].useState(value || []);
 
@@ -5925,14 +5932,14 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 129,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(TagContainer, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 139,
         columnNumber: 7
       }
@@ -5943,7 +5950,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$x,
+          fileName: _jsxFileName$y,
           lineNumber: 144,
           columnNumber: 24
         }
@@ -5957,7 +5964,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 141,
         columnNumber: 11
       }
@@ -5971,7 +5978,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 157,
         columnNumber: 7
       }
@@ -5996,8 +6003,8 @@
     readOnly: false
   };
 
-  const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$w = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+  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";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -6069,7 +6076,7 @@
       dataOffLabel,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
@@ -6080,14 +6087,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$x,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$x,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -6105,7 +6112,7 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  var _jsxFileName$v = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+  var _jsxFileName$w = "/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,
@@ -6115,7 +6122,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6124,7 +6131,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6134,7 +6141,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$v,
+      fileName: _jsxFileName$w,
       lineNumber: 6,
       columnNumber: 7
     }
@@ -6145,7 +6152,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -6155,7 +6162,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$w,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -6166,7 +6173,7 @@
     size: 24
   };
 
-  var _jsxFileName$u = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+  var _jsxFileName$v = "/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,
@@ -6176,7 +6183,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$v,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6188,7 +6195,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$v,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6197,7 +6204,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$v,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -6208,15 +6215,15 @@
     size: 24
   };
 
-  const _excluded$f = ["size", "onChange"];
-  var _jsxFileName$t = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+  const _excluded$g = ["size", "onChange"];
+  var _jsxFileName$u = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
       size,
       onChange
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     const [value, setValue] = React__default["default"].useState('');
     const handleChange = React__default["default"].useCallback(e => {
@@ -6238,7 +6245,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -6246,14 +6253,14 @@
       children: /*#__PURE__*/React__default["default"].createElement(SvgSearchOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$t,
+          fileName: _jsxFileName$u,
           lineNumber: 29,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 29,
         columnNumber: 7
       }
@@ -6263,7 +6270,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 30,
         columnNumber: 7
       }
@@ -6271,14 +6278,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$t,
+          fileName: _jsxFileName$u,
           lineNumber: 31,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$t,
+          fileName: _jsxFileName$u,
           lineNumber: 31,
           columnNumber: 73
         }
@@ -6286,7 +6293,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -6645,8 +6652,8 @@
     ];
   });
 
-  const _excluded$e = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch"];
-  var _jsxFileName$s = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+  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";
   const Box = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -6700,6 +6707,19 @@
             border: '1px solid $gray300'
           }
         }
+      },
+      readOnly: {
+        true: {
+          backgroundColor: '$formDisable',
+          color: '$textPrimary',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: '1px solid $gray300'
+          },
+          '&:focus-within': {
+            border: '1px solid $gray300'
+          }
+        }
       }
     }
   });
@@ -6724,6 +6744,12 @@
         lg: {
           padding: '11px 16px 12px'
         }
+      },
+      readOnly: {
+        true: {
+          cursor: 'not-allowed',
+          color: '$textPrimary'
+        }
       }
     }
   });
@@ -6740,6 +6766,14 @@
     '&:disabled': {
       cursor: 'not-allowed',
       color: '$textDisable'
+    },
+    variants: {
+      readOnly: {
+        true: {
+          cursor: 'not-allowed',
+          color: '$textPrimary'
+        }
+      }
     }
   });
   const IconContainer = styled('div', {
@@ -6754,6 +6788,11 @@
         true: {
           cursor: 'not-allowed'
         }
+      },
+      readOnly: {
+        true: {
+          cursor: 'not-allowed'
+        }
       }
     }
   });
@@ -6805,10 +6844,16 @@
     lineHeight: '20px'
   });
   const StyledDiv$1 = styled('div', {
-    color: '$textDisable'
+    color: '$textDisable',
+    display: 'inline-flex'
   });
-  function Select$1(_ref) {
-    let {
+  const StyledText = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'clip'
+  };
+  function Select$1(_ref) {
+    let {
       placeholder,
       option,
       onChange,
@@ -6823,9 +6868,10 @@
       textSelector,
       disabledOptions,
       css,
-      onSearch
+      onSearch,
+      readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
     const [item, setItem] = React__namespace.useState(option || []);
 
@@ -6871,8 +6917,8 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 218,
+        fileName: _jsxFileName$t,
+        lineNumber: 259,
         columnNumber: 5
       }
     }), ({
@@ -6890,8 +6936,8 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 236,
+        fileName: _jsxFileName$t,
+        lineNumber: 277,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -6899,10 +6945,11 @@
     }), {
       size: size,
       disabled: disabled,
+      readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 237,
+        fileName: _jsxFileName$t,
+        lineNumber: 278,
         columnNumber: 11
       }
     }), search ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -6911,84 +6958,129 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 239,
+        fileName: _jsxFileName$t,
+        lineNumber: 280,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
-      placeholder: placeholder
+    }, icon ? /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        display: 'flex',
+        height: '100%'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 282,
+        columnNumber: 19
+      }
+    }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
+      children: /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$t,
+          lineNumber: 283,
+          columnNumber: 49
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 283,
+        columnNumber: 21
+      }
+    }), /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
+      placeholder: placeholder,
+      disabled: disabled,
+      readOnly: readOnly
     }, getInputProps({
       onChange: event => handleInputValue(event.target.value),
       disabled
     }), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 284,
+        columnNumber: 21
+      }
+    }))) : /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
+      placeholder: placeholder,
       disabled: disabled,
+      readOnly: readOnly
+    }, getInputProps({
+      onChange: event => handleInputValue(event.target.value),
+      disabled
+    }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 240,
-        columnNumber: 17
+        fileName: _jsxFileName$t,
+        lineNumber: 292,
+        columnNumber: 19
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
-      disabled
+      disabled: disabled || readOnly
     }), {
       disabled: disabled,
       size: size,
+      readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 247,
+        fileName: _jsxFileName$t,
+        lineNumber: 301,
         columnNumber: 15
       }
-    }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Paragraph, {
+    }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text, {
       color: "primary",
+      css: StyledText,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 249,
+        fileName: _jsxFileName$t,
+        lineNumber: 303,
         columnNumber: 19
       }
-    }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Paragraph, {
+    }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text, {
       color: "primary",
+      css: StyledText,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 251,
+        fileName: _jsxFileName$t,
+        lineNumber: 305,
         columnNumber: 19
       }
-    }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
-      disabled
+    }, placeholder)), !icon ? /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
+      disabled: disabled || readOnly
     }), {
       disabled: disabled,
+      readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 255,
-        columnNumber: 13
+        fileName: _jsxFileName$t,
+        lineNumber: 310,
+        columnNumber: 15
       }
-    }), icon ? icon : /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
+    }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 256,
-        columnNumber: 30
+        fileName: _jsxFileName$t,
+        lineNumber: 311,
+        columnNumber: 17
       }
-    }))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
+    })) : null), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
       css: {
         display: isOpen ? 'block' : 'none'
       },
       placement: placement,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 259,
+        fileName: _jsxFileName$t,
+        lineNumber: 315,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 261,
+        fileName: _jsxFileName$t,
+        lineNumber: 317,
         columnNumber: 15
       }
     }), item.map((item, index) => {
@@ -7000,37 +7092,58 @@
       }), {
         key: (_item$value = item.value) != null ? _item$value : index,
         css: item.isDisabled ? {
-          backgroundColor: '$formDisable',
+          backgroundColor: 'unset',
           cursor: 'not-allowed',
-          fontWeight: selectedItem === item ? 'bold' : 'normal',
-          color: '$textPrimary'
+          color: '$textDisable'
         } : {
           backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-          fontWeight: selectedItem === item ? 'bold' : 'normal',
-          color: '$textPrimary'
+          fontWeight: 'normal',
+          color: selectedItem === item ? '$textGreen' : '$textPrimary'
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$s,
-          lineNumber: 263,
+          fileName: _jsxFileName$t,
+          lineNumber: 319,
           columnNumber: 19
         }
       }), item.name);
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 286,
+        fileName: _jsxFileName$t,
+        lineNumber: 341,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 287,
+        fileName: _jsxFileName$t,
+        lineNumber: 342,
         columnNumber: 17
       }
-    }, "Item yang anda cari tidak ada")))));
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        marginRight: '6px'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 343,
+        columnNumber: 19
+      }
+    }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
+      size: "16px",
+      color: colors.iconDisable,
+      style: {
+        verticalAlign: 'text-bottom'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 344,
+        columnNumber: 21
+      }
+    })), "Item tidak ditemukan")))));
   }
   Select$1.propTypes = {
     placeholder: PropTypes__default["default"].string,
@@ -7041,12 +7154,13 @@
     search: PropTypes__default["default"].bool,
     value: PropTypes__default["default"].object,
     iconColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
-    icon: PropTypes__default["default"].node,
+    icon: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     textSelector: PropTypes__default["default"].string,
     valueSelector: PropTypes__default["default"].string,
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    onSearch: PropTypes__default["default"].func
+    onSearch: PropTypes__default["default"].func,
+    readOnly: PropTypes__default["default"].bool
   };
   Select$1.defaultProps = {
     placeholder: 'Select Item',
@@ -7054,11 +7168,12 @@
     disabled: false,
     search: false,
     iconColor: 'currentColor',
-    icon: undefined,
+    icon: false,
     placement: 'bottom',
     disabledOptions: [],
     textSelector: 'name',
-    valueSelector: 'value'
+    valueSelector: 'value',
+    readOnly: false
   };
 
   var $$2 = _export;
@@ -7096,7 +7211,7 @@
     }
   });
 
-  var _jsxFileName$r = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/icon/CheckOutline.js";
+  var _jsxFileName$s = "/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",
@@ -7114,7 +7229,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$s,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7126,7 +7241,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$s,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -7138,13 +7253,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$s,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  var _jsxFileName$r = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
   const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -7364,7 +7479,7 @@
     return /*#__PURE__*/React__namespace.createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 209,
         columnNumber: 5
       }
@@ -7373,7 +7488,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 210,
         columnNumber: 7
       }
@@ -7381,7 +7496,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 212,
         columnNumber: 11
       }
@@ -7402,7 +7517,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 224,
           columnNumber: 28
         }
@@ -7415,7 +7530,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 214,
         columnNumber: 15
       }
@@ -7424,7 +7539,7 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 237,
         columnNumber: 9
       }
@@ -7436,21 +7551,21 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 238,
         columnNumber: 11
       }
     }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 244,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 245,
         columnNumber: 11
       }
@@ -7460,14 +7575,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 248,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 250,
         columnNumber: 11
       }
@@ -7479,7 +7594,7 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 253,
         columnNumber: 17
       }
@@ -7491,7 +7606,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 260,
         columnNumber: 19
       }
@@ -7499,7 +7614,7 @@
       color: colors.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 261,
         columnNumber: 53
       }
@@ -7510,14 +7625,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 263,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 275,
         columnNumber: 11
       }
@@ -7527,7 +7642,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 276,
         columnNumber: 13
       }
@@ -7547,83 +7662,136 @@
     disabled: false
   };
 
-  const slideUpAndFade = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateY(2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateY(0)'
-    }
-  });
-  const slideRightAndFade = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateX(-2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateX(0)'
-    }
-  });
-  const slideDownAndFade = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateY(-2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateY(0)'
-    }
-  });
-  const slideLeftAndFade = keyframes({
-    '0%': {
-      opacity: 0,
-      transform: 'translateX(2px)'
-    },
-    '100%': {
-      opacity: 1,
-      transform: 'translateX(0)'
-    }
-  });
-  const StyledContent$5 = styled(PopoverPrimitive__namespace.Content, {
-    width: '100%',
-    '@media (prefers-reduced-motion: no-preference)': {
-      animationDuration: '400ms',
-      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-      animationFillMode: 'forwards',
-      willChange: 'transform, opacity',
-      '&[data-state="open"]': {
-        '&[data-side="top"]': {
-          animationName: slideDownAndFade
-        },
-        '&[data-side="right"]': {
-          animationName: slideLeftAndFade
-        },
-        '&[data-side="bottom"]': {
-          animationName: slideUpAndFade
-        },
-        '&[data-side="left"]': {
-          animationName: slideRightAndFade
-        }
+  const _excluded$e = ["children"];
+  var _jsxFileName$q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
+  const PopoverContext = /*#__PURE__*/React.createContext();
+  const Popover = ({
+    children,
+    open: _open = false,
+    onOpenChange,
+    placement,
+    sideOffset: _sideOffset = 5
+  }) => {
+    const [openState, setOpenState] = React.useState(false);
+    React.useEffect(() => {
+      setOpenState(_open);
+    }, [_open]);
+    React.useEffect(() => {
+      if (onOpenChange) onOpenChange(openState);
+    }, [openState, onOpenChange]);
+    const floatingHook = reactDomInteractions.useFloating({
+      open: openState,
+      onOpenChange: setOpenState,
+      middleware: [reactDomInteractions.offset(_sideOffset), reactDomInteractions.flip(), reactDomInteractions.shift()],
+      placement
+    });
+    const {
+      getReferenceProps,
+      getFloatingProps
+    } = reactDomInteractions.useInteractions([reactDomInteractions.useClick(floatingHook.context), reactDomInteractions.useDismiss(floatingHook.context)]);
+    const value = {
+      openState,
+      setOpenState,
+      floatingHook,
+      getReferenceProps,
+      getFloatingProps
+    };
+    return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
+      value: value,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 42,
+        columnNumber: 10
       }
-    }
-  });
-  const StyledTrigger$2 = styled(PopoverPrimitive__namespace.Trigger, {
-    all: 'unset'
-  });
-  const StyledArrow = styled(PopoverPrimitive__namespace.Arrow, {
-    fill: 'white'
-  });
-  const StyledClose$1 = styled(PopoverPrimitive__namespace.Close, {});
-  const Popover = PopoverPrimitive__namespace.Root;
-  const PopoverTrigger = StyledTrigger$2;
-  const PopoverContent = StyledContent$5;
-  const PopoverArrow = StyledArrow;
-  const PopoverClose = StyledClose$1;
-  const StyledAnchor = styled(PopoverPrimitive__namespace.Anchor, {});
-  const PopoverAnchor = StyledAnchor;
+    }, children);
+  };
+  const PopoverTrigger = ({
+    children
+  }) => {
+    const {
+      floatingHook: {
+        reference
+      },
+      getReferenceProps
+    } = React.useContext(PopoverContext);
+    return /*#__PURE__*/React.cloneElement(children, getReferenceProps(Object.assign({
+      ref: reference
+    }, children.props)));
+  };
+  const PopoverContent = ({
+    children,
+    isMobile,
+    style
+  }) => {
+    const {
+      openState,
+      floatingHook: {
+        x,
+        y,
+        floating,
+        strategy,
+        context
+      },
+      getFloatingProps
+    } = React.useContext(PopoverContext);
+    return openState ? /*#__PURE__*/React__default["default"].createElement(reactDomInteractions.FloatingFocusManager, {
+      context: context,
+      modal: false,
+      order: ['reference', 'content'],
+      returnFocus: false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 60,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
+      ref: floating,
+      style: Object.assign({
+        position: strategy,
+        top: isMobile ? 0 : y != null ? y : '',
+        left: isMobile ? 0 : x != null ? x : '',
+        zIndex: 1
+      }, style)
+    }), {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 61,
+        columnNumber: 7
+      }
+    }), children)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  };
+  const PopoverClose = _ref => {
+    let {
+      children
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+
+    const {
+      setOpenState
+    } = React.useContext(PopoverContext);
+    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({}, props, {
+      onClick: () => {
+        props.onClick();
+        setOpenState(false);
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 84,
+        columnNumber: 5
+      }
+    }), children);
+  };
+  Popover.propTypes = {
+    open: PropTypes__default["default"].bool,
+    onOpenChange: PropTypes__default["default"].func,
+    placement: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+    sideOffset: PropTypes__default["default"].number
+  };
+  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";
@@ -8007,7 +8175,7 @@
       boxShadow: 'inset 0 -2px 0 0 $colors$primary500, 0 2px 0 0 $colors$primary500'
     }
   });
-  const StyledContent$4 = styled(TabsPrimitive__namespace.Content, {
+  const StyledContent$5 = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
     borderBottomLeftRadius: '$lg',
     borderBottomRightRadius: '$lg',
@@ -8018,9 +8186,9 @@
   const Tabs = StyledTabs;
   const TabsList = StyledList;
   const TabsTrigger = StyledTrigger$1;
-  const TabsContent = StyledContent$4;
+  const TabsContent = StyledContent$5;
 
-  const StyledSeparator = styled(SeparatorPrimitive__namespace.Root, {
+  const StyledSeparator$1 = styled(SeparatorPrimitive__namespace.Root, {
     backgroundColor: '$gray150',
     '&[data-orientation=horizontal]': {
       height: 1,
@@ -8030,7 +8198,7 @@
       width: 1
     }
   });
-  const Separator = StyledSeparator;
+  const Separator = StyledSeparator$1;
 
   const _excluded$c = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
         _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
@@ -8271,7 +8439,6 @@
   });
   const NotificationBadgeStyle = styled('span', {
     position: 'absolute',
-    zIndex: 1,
     minWidth: 20,
     height: 20,
     borderRadius: 10,
@@ -8394,7 +8561,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 133,
+        lineNumber: 132,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__default["default"].createElement(NotificationBadgeStyle, _extends({}, props, {
@@ -8402,7 +8569,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 135,
+        lineNumber: 134,
         columnNumber: 7
       }
     })));
@@ -8511,11 +8678,11 @@
         secondary: {
           backgroundColor: 'transparent',
           '&:hover': {
-            backgroundColor: '$bgGray',
+            backgroundColor: '$primary50',
             color: '$textGreen'
           },
           '&:active': {
-            backgroundColor: '$gray100'
+            backgroundColor: '$primary100'
           }
         }
       }
@@ -8548,25 +8715,32 @@
     const headerTitle = children.find(child => child.type.displayName === 'ModalDialogTitle');
     const pageDialogChildren = children.find(child => child.type.displayName === 'ModalDialogContent');
     const pageDialogTrigger = children.find(child => child.type.displayName === 'ModalDialogTrigger');
+    const ref = React.useCallback(node => {
+      if (node !== null) {
+        document.body.classList.add('noscroll');
+      } else {
+        document.body.classList.remove('noscroll');
+      }
+    }, []);
     return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 41,
+        lineNumber: 49,
         columnNumber: 5
       }
     }), pageDialogTrigger && /*#__PURE__*/React__default["default"].createElement(DialogTrigger, _extends({}, pageDialogTrigger.props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 42,
+        lineNumber: 50,
         columnNumber: 29
       }
     })), /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 43,
+        lineNumber: 51,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogOverlay, {
@@ -8576,7 +8750,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 44,
+        lineNumber: 52,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(DialogContent, {
@@ -8584,10 +8758,11 @@
       css: Object.assign({}, css, {
         zIndex: layer
       }),
+      ref: ref,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 45,
+        lineNumber: 53,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -8600,7 +8775,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 46,
+        lineNumber: 54,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -8614,7 +8789,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 47,
+        lineNumber: 55,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -8628,7 +8803,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 56,
+        lineNumber: 64,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
@@ -8638,7 +8813,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 57,
+        lineNumber: 65,
         columnNumber: 17
       }
     }, headerTitle && /*#__PURE__*/React__default["default"].createElement(Heading, _extends({
@@ -8647,7 +8822,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 58,
+        lineNumber: 66,
         columnNumber: 35
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -8655,7 +8830,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 60,
+        lineNumber: 68,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -8671,7 +8846,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 61,
+        lineNumber: 69,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -8679,7 +8854,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 72,
+        lineNumber: 80,
         columnNumber: 21
       }
     }))))), pageDialogChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, pageDialogChildren.props, {
@@ -8690,7 +8865,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 77,
+        lineNumber: 85,
         columnNumber: 36
       }
     })), footerChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, footerChildren.props, {
@@ -8703,7 +8878,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 78,
+        lineNumber: 86,
         columnNumber: 32
       }
     }))))));
@@ -8714,6 +8889,10 @@
 
   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();
+  const {
+    sizes
+  } = core.foundations;
   const fadeIn = keyframes({
     from: {
       opacity: '0'
@@ -8755,17 +8934,25 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 36,
+        lineNumber: 40,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 37,
+        lineNumber: 41,
         columnNumber: 7
       }
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
+      value: Object.assign({}, props),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 42,
+        columnNumber: 7
+      }
+    }, children));
   }
   const slideIn = keyframes({
     from: {
@@ -8783,20 +8970,18 @@
       transform: '$$transformValue'
     }
   });
-  const StyledContent$3 = styled(DialogPrimitive__namespace.Content, {
-    backgroundColor: '$panel',
+  const StyledContent$4 = styled(DialogPrimitive__namespace.Content, {
+    backgroundColor: '$white',
     boxShadow: '$colors$shadowLight 0 0 38px -10px, $colors$shadowDark 0 0 35px -15px',
     position: 'fixed',
     top: 0,
     bottom: 0,
-    maxWidth: '80vh',
+    width: '100%',
     zIndex: 10000,
-    // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
-    // Affects animated and non-animated dialogs alike.
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '100vh',
     willChange: 'transform',
-    // '&:focus': {
-    //   outline: 'none',
-    // },
     '&[data-state="open"]': {
       animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
     },
@@ -8804,12 +8989,33 @@
       animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
     },
     variants: {
+      size: {
+        xs: {
+          maxWidth: sizes.xs
+        },
+        sm: {
+          maxWidth: sizes.sm
+        },
+        md: {
+          maxWidth: sizes.md
+        },
+        lg: {
+          maxWidth: sizes.lg
+        },
+        xl: {
+          maxWidth: sizes.xl
+        },
+        '2xl': {
+          maxWidth: '80vw'
+        }
+      },
       side: {
         top: {
           $$transformValue: 'translate3d(0,-100%,0)',
-          width: '100%',
+          maxWidth: '100vw',
           height: 300,
-          bottom: 'auto'
+          bottom: 'auto',
+          left: 0
         },
         right: {
           $$transformValue: 'translate3d(100%,0,0)',
@@ -8817,15 +9023,11 @@
         },
         bottom: {
           $$transformValue: 'translate3d(0,100%,0)',
-          width: '100%',
-          height: 'fit-content',
-          maxWidth: 'unset',
+          maxWidth: '100vw',
           bottom: 0,
           top: 'auto',
-          '@md': {
-            height: 300,
-            maxWidth: '80vh'
-          }
+          height: 300,
+          left: 0
         },
         left: {
           $$transformValue: 'translate3d(-100%,0,0)',
@@ -8834,7 +9036,8 @@
       }
     },
     defaultVariants: {
-      side: 'right'
+      side: 'right',
+      size: 'xs'
     }
   });
   const StyledClose = styled(DialogPrimitive__namespace.Close, {
@@ -8848,6 +9051,129 @@
     overflow: 'hidden',
     outline: 'none'
   });
+  const Header = styled('header', {
+    display: 'flex',
+    flexShrink: 1,
+    padding: 14,
+    variants: {
+      borderHeader: {
+        true: {
+          borderBottom: '1.5px solid $bgBorder'
+        }
+      }
+    }
+  });
+  const Body = styled('div', {
+    display: 'flex',
+    flexGrow: 1,
+    flexBasis: 1,
+    padding: 14
+  });
+  const Footer = styled('footer', {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: 14,
+    variants: {
+      borderFooter: {
+        true: {
+          borderTop: '1.5px solid $bgBorder'
+        }
+      }
+    }
+  });
+  const CloseButton = styled(DialogPrimitive__namespace.Close, {
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    width: 26,
+    height: 26,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    borderRadius: 12,
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    '&:hover': {
+      backgroundColor: '#FAFAFA'
+    }
+  });
+  const DrawerContent = props => {
+    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 199,
+        columnNumber: 10
+      }
+    }, value => /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, value, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 199,
+        columnNumber: 38
+      }
+    }), props.children));
+  };
+  const DrawerHeader = props => {
+    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 203,
+        columnNumber: 10
+      }
+    }, value => /*#__PURE__*/React__default["default"].createElement(Header, _extends({}, value, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 203,
+        columnNumber: 38
+      }
+    }), props.children));
+  };
+  const DrawerFooter = props => {
+    return /*#__PURE__*/React__default["default"].createElement(Context.Consumer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 207,
+        columnNumber: 10
+      }
+    }, value => /*#__PURE__*/React__default["default"].createElement(Footer, _extends({}, value, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 207,
+        columnNumber: 38
+      }
+    }), props.children));
+  };
+  const DrawerTrigger = DialogPrimitive__namespace.Trigger;
+  const DrawerClose = StyledClose;
+  const DrawerTitle = DialogPrimitive__namespace.Title;
+  const DrawerDescription = DialogPrimitive__namespace.Description;
+  const DrawerBody = Body;
+  const DrawerCloseButton = () => {
+    return /*#__PURE__*/React__default["default"].createElement(CloseButton, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 217,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 218,
+        columnNumber: 7
+      }
+    }));
+  };
   Drawer.propTypes = {
     defaultOpen: PropTypes__default["default"].bool,
     open: PropTypes__default["default"].bool,
@@ -8856,20 +9182,20 @@
     allowPinchZoom: PropTypes__default["default"].bool,
     id: PropTypes__default["default"].string
   };
-  const DrawerContent = StyledContent$3;
   DrawerContent.propTypes = {
     side: PropTypes__default["default"].oneOf(['top', 'left', 'bottom', 'right']),
     isMobile: PropTypes__default["default"].bool
   };
-  const DrawerTrigger = DialogPrimitive__namespace.Trigger;
-  const DrawerClose = StyledClose;
-  const DrawerTitle = DialogPrimitive__namespace.Title;
-  const DrawerDescription = DialogPrimitive__namespace.Description;
   Drawer.displayName = 'Drawer';
+  DrawerTrigger.displayName = 'DrawerTrigger';
   DrawerContent.displayName = 'DrawerContent';
   DrawerClose.displayName = 'DrawerClose';
   DrawerTitle.displayName = 'DrawerTitle';
   DrawerDescription.displayName = 'DrawerDescription';
+  DrawerHeader.displayName = 'DrawerHeader';
+  DrawerBody.displayName = 'DrawerBody';
+  DrawerFooter.displayName = 'DrawerFooter';
+  DrawerCloseButton.displayName = 'DrawerCloseButton';
 
   const _excluded$7 = ["children", "disabled"],
         _excluded2$1 = ["children", "hasContent", "arrowColor"],
@@ -8903,7 +9229,7 @@
       }
     }), children);
   };
-  const StyledItem = styled(AccordionPrimitive__namespace.Item, {
+  const StyledItem$1 = styled(AccordionPrimitive__namespace.Item, {
     borderTop: '1px solid $colors$slate6',
     '&:last-of-type': {
       borderBottom: '1px solid $colors$slate6'
@@ -8982,15 +9308,15 @@
       }
     })));
   };
-  const StyledContent$2 = styled(AccordionPrimitive__namespace.Content, {});
-  const AccordionItem = StyledItem;
+  const StyledContent$3 = styled(AccordionPrimitive__namespace.Content, {});
+  const AccordionItem = StyledItem$1;
   const AccordionContent = _ref3 => {
     let {
       children
     } = _ref3,
         props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledContent$3, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
@@ -10814,6 +11140,7 @@
     defaultDate,
     date,
     advanceView,
+    placement = 'bottom-start',
     css
   }) {
     const [{
@@ -10830,7 +11157,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 113,
+        lineNumber: 114,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -10838,14 +11165,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 114,
+          lineNumber: 115,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 114,
+        lineNumber: 115,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -10857,7 +11184,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 115,
+        lineNumber: 116,
         columnNumber: 7
       }
     }));
@@ -10872,7 +11199,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 129,
+          lineNumber: 130,
           columnNumber: 11
         }
       }) : {
@@ -10894,7 +11221,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 125,
+        lineNumber: 126,
         columnNumber: 5
       }
     });
@@ -10902,17 +11229,18 @@
     return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
       open: openPicker,
       onOpenChange: setOpenPicker,
+      placement: placement,
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 147,
+        lineNumber: 148,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 148,
+        lineNumber: 149,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10920,18 +11248,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 149,
+        lineNumber: 150,
         columnNumber: 9
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
-      sideOffset: 4,
-      placement: 'bottom',
-      align: 'end',
-      onOpenAutoFocus: e => e.preventDefault(),
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 151,
+        lineNumber: 152,
         columnNumber: 7
       }
     }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10939,7 +11263,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 157,
+        lineNumber: 158,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -10948,7 +11272,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 158,
+        lineNumber: 159,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -10960,7 +11284,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 159,
+        lineNumber: 160,
         columnNumber: 9
       }
     }, renderDatePicker())));
@@ -11028,8 +11352,16 @@
   const _excluded$5 = ["isActive", "onClick"];
   var _jsxFileName$d = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
   const PrevNextButton = styled(Text, {
+    padding: '$spacing-01',
     cursor: 'pointer',
     userSelect: 'none',
+    borderRadius: '$md',
+    '&:hover': {
+      backgroundColor: '$primary50'
+    },
+    '&:active': {
+      backgroundColor: '$primary100'
+    },
     variants: {
       isDisabled: {
         true: {
@@ -11060,7 +11392,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 23,
+        lineNumber: 31,
         columnNumber: 5
       }
     }));
@@ -11133,7 +11465,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
+        lineNumber: 99,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11142,10 +11474,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 92,
+        lineNumber: 100,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
@@ -11158,16 +11490,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 93,
-        columnNumber: 9
+        lineNumber: 103,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
       color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 102,
-        columnNumber: 11
+        lineNumber: 112,
+        columnNumber: 15
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
@@ -11177,10 +11509,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 104,
-        columnNumber: 9
+        lineNumber: 114,
+        columnNumber: 13
       }
-    }, "Sebelumnya"), generatePages().map((page, index) => {
+    }, "Sebelumnya")), generatePages().map((page, index) => {
       return /*#__PURE__*/React__default["default"].createElement(PageButton, {
         key: index.toString(),
         isActive: page === currentPage,
@@ -11188,11 +11520,11 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 114,
+          lineNumber: 126,
           columnNumber: 13
         }
       }, page);
-    }), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }), currentPage < totalPages && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === totalPages,
       color: currentPage === totalPages ? 'disable' : 'primary',
@@ -11200,8 +11532,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 123,
-        columnNumber: 9
+        lineNumber: 137,
+        columnNumber: 13
       }
     }, "Selanjutnya"), /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
@@ -11216,18 +11548,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 131,
-        columnNumber: 9
+        lineNumber: 145,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
       color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 140,
-        columnNumber: 11
+        lineNumber: 154,
+        columnNumber: 15
       }
-    }))), /*#__PURE__*/React__default["default"].createElement(Separator, {
+    })))), /*#__PURE__*/React__default["default"].createElement(Separator, {
       orientation: "vertical",
       css: {
         height: '100%',
@@ -11236,7 +11568,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 144,
+        lineNumber: 160,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -11248,7 +11580,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 146,
+        lineNumber: 162,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -11256,7 +11588,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 147,
+        lineNumber: 163,
         columnNumber: 9
       }
     }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -11280,7 +11612,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 148,
+        lineNumber: 164,
         columnNumber: 9
       }
     })));
@@ -11288,6 +11620,23 @@
 
   const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
   var _jsxFileName$c = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
+  const LimitContainer = styled(Flex$1, {
+    cursor: 'pointer'
+  });
+
+  const limitItemContainerStyle = selected => ({
+    justifyContent: 'center',
+    width: '100%',
+    padding: '$spacing-02',
+    cursor: 'pointer',
+    backgroundColor: selected ? '$primary100' : 'transparent',
+    '&:hover': {
+      backgroundColor: '$primary50'
+    },
+    '&:active': {
+      backgroundColor: '$primary100'
+    }
+  });
 
   function PaginationInfo(_ref) {
     let {
@@ -11301,82 +11650,105 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
-      gap: 3,
+      gap: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 28,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      color: "secondary",
+      variant: "label",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 29,
+        columnNumber: 7
+      }
+    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Popover, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 32,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 33,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(LimitContainer, {
+      align: "center",
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 10,
-        columnNumber: 5
+        lineNumber: 34,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
-      color: "secondary",
-      variant: "label",
+      variant: "status",
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 11,
-        columnNumber: 7
+        lineNumber: 35,
+        columnNumber: 13
       }
-    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Select$1, {
-      option: limits.map(item => ({
-        name: item.toString(),
-        value: item
-      })),
-      onChange: selectedItem => onChange(selectedItem.value),
-      value: {
-        name: selectedLimit.toString(),
-        value: selectedLimit
-      },
-      icon: /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-        color: colors.iconSecondary,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 24,
-          columnNumber: 15
-        }
-      }),
+    }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: colors.gray400,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 36,
+        columnNumber: 13
+      }
+    }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       placement: "top",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 39,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      direction: "column",
+      align: "center",
       css: {
-        display: 'flex',
-        justifyContent: 'center',
-        width: 'auto',
-        '& *': {
-          fontSize: '$label',
-          fontWeight: 600,
-          lineHeight: '$label'
-        },
-        '& [role=combobox], [type=button], [role=listbox], button': {
-          padding: 0,
-          height: 'auto',
-          width: 'auto',
-          margin: 0,
-          border: 'none'
-        },
-        '& [role=option]': {
-          padding: '4px 0px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        '& button': {
-          display: 'flex',
-          alignItems: 'center'
-        }
+        backgroundColor: '$white',
+        boxShadow: '$small'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 14,
-        columnNumber: 7
+        lineNumber: 40,
+        columnNumber: 11
+      }
+    }, limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+      css: limitItemContainerStyle(selectedLimit === limit),
+      onClick: () => onChange(limit),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 49,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      variant: "status",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 50,
+        columnNumber: 17
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+    }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text, {
       color: "secondary",
       variant: "label",
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 54,
+        lineNumber: 56,
         columnNumber: 7
       }
     }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
@@ -11406,7 +11778,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 13,
+        lineNumber: 12,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
@@ -11418,18 +11790,18 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 14,
+        lineNumber: 13,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
+    }), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       currentPage: currentPage,
       totalPages: totalPages,
       onSelect: onPageChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 21,
-        columnNumber: 7
+        lineNumber: 20,
+        columnNumber: 26
       }
     }));
   }
@@ -11508,28 +11880,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 74,
+        lineNumber: 71,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 75,
+        lineNumber: 72,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 76,
+        lineNumber: 73,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 78,
+        lineNumber: 75,
         columnNumber: 13
       }
     }), headerGroup.headers.map(column => {
@@ -11538,14 +11910,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 82,
+          lineNumber: 79,
           columnNumber: 19
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 84,
+          lineNumber: 81,
           columnNumber: 23
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -11554,7 +11926,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 86,
+          lineNumber: 83,
           columnNumber: 27
         }
       }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(icons.SortingOutline, {
@@ -11562,7 +11934,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 89,
+          lineNumber: 86,
           columnNumber: 27
         }
       }))) : headerRender);
@@ -11570,7 +11942,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 101,
+        lineNumber: 98,
         columnNumber: 9
       }
     }), page.map(row => {
@@ -11580,14 +11952,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 105,
+          lineNumber: 102,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow$1, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 106,
+          lineNumber: 103,
           columnNumber: 17
         }
       }), row.cells.map(cell => {
@@ -11595,7 +11967,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 109,
+            lineNumber: 106,
             columnNumber: 23
           }
         }), cell.column.accessor ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11614,21 +11986,21 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 111,
+            lineNumber: 108,
             columnNumber: 27
           }
         }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 125,
+            lineNumber: 122,
             columnNumber: 47
           }
         }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 125,
+            lineNumber: 122,
             columnNumber: 70
           }
         })) : cell.render('Cell'));
@@ -11636,7 +12008,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 135,
+          lineNumber: 132,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell$1, {
@@ -11644,7 +12016,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 136,
+          lineNumber: 133,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11652,7 +12024,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 137,
+          lineNumber: 134,
           columnNumber: 23
         }
       }, row.allCells.filter(cell => !cell.column.isMobileHeader && (cell.column.accessor || cell.column.id === 'menu')).map(cell => cell.column.accessor ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11667,7 +12039,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 144,
+          lineNumber: 141,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -11676,7 +12048,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 154,
+          lineNumber: 151,
           columnNumber: 33
         }
       }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11689,7 +12061,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 160,
+          lineNumber: 157,
           columnNumber: 31
         }
       }, cell.render('Cell')))))) : null);
@@ -11697,14 +12069,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 180,
+        lineNumber: 177,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 181,
+        lineNumber: 178,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -11712,7 +12084,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 182,
+        lineNumber: 179,
         columnNumber: 13
       }
     }, footer)))));
@@ -11761,14 +12133,18 @@
     size: '100%',
     minWidth: 0,
     '&::after': {
-      size: '16px',
-      content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
-      marginBottom: '2px',
-      opacity: 0
+      '@lg': {
+        size: '16px',
+        content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
+        marginBottom: '2px',
+        opacity: 0
+      }
     },
     '&:hover': {
       '&::after': {
-        opacity: 1
+        '@lg': {
+          opacity: 1
+        }
       }
     }
   });
@@ -11946,7 +12322,7 @@
         gotoPage(page - 1);
       },
       css: {
-        padding: '$spacing-04',
+        padding: '$spacing-04 0',
         '@md': {
           padding: '$spacing-06'
         }
@@ -11954,7 +12330,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 244,
+        lineNumber: 248,
         columnNumber: 5
       }
     });
@@ -11983,28 +12359,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 287,
+        lineNumber: 291,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 288,
+        lineNumber: 292,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 289,
+        lineNumber: 293,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 291,
+        lineNumber: 295,
         columnNumber: 13
       }
     }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
@@ -12021,14 +12397,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 297,
+          lineNumber: 301,
           columnNumber: 21
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 311,
+          lineNumber: 317,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -12036,7 +12412,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 313,
+          lineNumber: 319,
           columnNumber: 29
         }
       }, headerRender.toUpperCase()))) : headerRender);
@@ -12044,7 +12420,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 328,
+        lineNumber: 334,
         columnNumber: 9
       }
     }), page.map((row, i) => {
@@ -12058,21 +12434,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 334,
+          lineNumber: 340,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 335,
+          lineNumber: 341,
           columnNumber: 17
         }
       }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default["default"].createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 339,
+          lineNumber: 345,
           columnNumber: 23
         }
       }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default["default"].createElement(TableRow, {
@@ -12081,7 +12457,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 346,
+          lineNumber: 352,
           columnNumber: 23
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
@@ -12089,7 +12465,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 348,
+          lineNumber: 354,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -12097,7 +12473,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 350,
+          lineNumber: 356,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -12106,7 +12482,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 351,
+          lineNumber: 357,
           columnNumber: 27
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12114,7 +12490,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 352,
+          lineNumber: 358,
           columnNumber: 29
         }
       }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -12123,7 +12499,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 354,
+          lineNumber: 360,
           columnNumber: 27
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12131,7 +12507,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 355,
+          lineNumber: 361,
           columnNumber: 29
         }
       }, cell.render('Cell')))))) : null);
@@ -12139,14 +12515,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 365,
+        lineNumber: 371,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 366,
+        lineNumber: 372,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -12154,18 +12530,19 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 367,
+        lineNumber: 373,
         columnNumber: 13
       }
     }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       css: {
         padding: '$spacing-07'
       },
-      center: true,
+      align: "center",
+      justify: "center",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 371,
+        lineNumber: 377,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12174,7 +12551,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 377,
+        lineNumber: 384,
         columnNumber: 19
       }
     }, "Tidak ada data"))))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
@@ -12184,7 +12561,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 388,
+        lineNumber: 395,
         columnNumber: 5
       }
     });
@@ -13087,22 +13464,6 @@
     boxShadow: '0px 0px 8px rgba(131, 131, 131, 0.16)',
     borderRadius: '$sm'
   });
-  const MenuTriggerButton = styled(PopoverTrigger, {
-    cursor: 'pointer',
-    borderRadius: '$round',
-    size: '24px',
-    padding: '$spacing-01',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    '&:hover': {
-      backgroundColor: '$bgGray',
-      color: '$textGreen'
-    },
-    '&:active': {
-      backgroundColor: '$gray100'
-    }
-  });
 
   const rowMenuColumn = options => ({
     id: 'menu',
@@ -13112,31 +13473,39 @@
       return /*#__PURE__*/React__default["default"].createElement(Popover, {
         open: open,
         onOpenChange: setOpen,
+        placement: "bottom-end",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 36,
+          lineNumber: 20,
           columnNumber: 7
         }
-      }, /*#__PURE__*/React__default["default"].createElement(MenuTriggerButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 37,
+          lineNumber: 21,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
+      }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 38,
+          lineNumber: 22,
           columnNumber: 11
         }
-      })), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
+      }, /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$6,
+          lineNumber: 23,
+          columnNumber: 13
+        }
+      }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 40,
+          lineNumber: 26,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(MenuContainer, {
@@ -13144,7 +13513,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 41,
+          lineNumber: 27,
           columnNumber: 11
         }
       }, options.map(option => /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -13157,7 +13526,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$6,
-          lineNumber: 43,
+          lineNumber: 29,
           columnNumber: 15
         }
       }, option.title)))));
@@ -13208,6 +13577,9 @@
   PageDialogContent.displayName = 'PageDialogContent';
   const PageDialogTrigger = styled('div');
   PageDialogTrigger.displayName = 'PageDialogTrigger';
+  const FOOTER_HEIGHT = 64;
+  const HEADER_HEIGHT = 56;
+  const HEADER_HEIGHT_MOBILE = 76;
   const PageDialog = _ref => {
     let {
       children,
@@ -13222,25 +13594,32 @@
     const headerTitle = children.find(child => child.type.displayName === 'PageDialogTitle');
     const pageDialogChildren = children.find(child => child.type.displayName === 'PageDialogContent');
     const pageDialogTrigger = children.find(child => child.type.displayName === 'PageDialogTrigger');
+    const ref = React.useCallback(node => {
+      if (node !== null) {
+        document.body.classList.add('noscroll');
+      } else {
+        document.body.classList.remove('noscroll');
+      }
+    }, []);
     return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 37,
+        lineNumber: 49,
         columnNumber: 5
       }
     }), pageDialogTrigger && /*#__PURE__*/React__default["default"].createElement(DialogTrigger, _extends({}, pageDialogTrigger.props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 38,
+        lineNumber: 50,
         columnNumber: 29
       }
     })), /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 39,
+        lineNumber: 51,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogContent, {
@@ -13248,10 +13627,11 @@
       css: Object.assign({}, css, {
         zIndex: layer
       }),
+      ref: ref,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 40,
+        lineNumber: 52,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13264,7 +13644,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 41,
+        lineNumber: 53,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13274,12 +13654,13 @@
         display: 'flex',
         alignItems: 'center',
         position: 'relative',
-        boxShadow: '$small'
+        boxShadow: '$small',
+        height: isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 49,
+        lineNumber: 61,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13294,7 +13675,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 59,
+        lineNumber: 72,
         columnNumber: 15
       }
     }, !isMobile && /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -13302,7 +13683,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 70,
+        lineNumber: 83,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13319,7 +13700,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 71,
+        lineNumber: 84,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -13327,7 +13708,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 83,
+        lineNumber: 96,
         columnNumber: 23
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
@@ -13337,16 +13718,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 87,
+        lineNumber: 100,
         columnNumber: 17
       }
     }, headerTitle && /*#__PURE__*/React__default["default"].createElement(Heading, _extends({
+      as: "p",
       heading: "pageTitle"
     }, headerTitle.props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 88,
+        lineNumber: 101,
         columnNumber: 35
       }
     }))), isMobile && /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -13354,7 +13736,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 91,
+        lineNumber: 104,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13369,7 +13751,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 92,
+        lineNumber: 105,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -13377,7 +13759,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 102,
+        lineNumber: 115,
         columnNumber: 23
       }
     })))), !isMobile && /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13390,7 +13772,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 108,
+        lineNumber: 121,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -13398,19 +13780,19 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 109,
+        lineNumber: 122,
         columnNumber: 19
       }
     }))), pageDialogChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, pageDialogChildren.props, {
       css: Object.assign({
         flexGrow: 1,
-        maxHeight: 'calc(100vh - 64px - 56px)',
+        maxHeight: footerChildren ? `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)` : `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px)`,
         overflowY: 'scroll'
       }, pageDialogChildren.props.css),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 114,
+        lineNumber: 127,
         columnNumber: 15
       }
     })), footerChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, footerChildren.props, {
@@ -13419,12 +13801,13 @@
         backgroundColor: '$white',
         padding: '16px 24px',
         display: 'flex',
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
+        height: FOOTER_HEIGHT
       }, footerChildren.props.css),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 125,
+        lineNumber: 138,
         columnNumber: 15
       }
     }))))));
@@ -13461,7 +13844,7 @@
       animation: `${overlayShow$1} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
     }
   });
-  const StyledContent$1 = styled(DialogPrimitive__namespace.Content, {
+  const StyledContent$2 = styled(DialogPrimitive__namespace.Content, {
     position: 'fixed',
     top: '50%',
     left: '50%',
@@ -13500,23 +13883,22 @@
       size: 'md'
     }
   });
-
-  function Content$1(_ref) {
+  const Content$1 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     let {
       children
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
-      __self: this,
+    return /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
+      ref: ref,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$3,
         lineNumber: 66,
         columnNumber: 5
       }
     }), children);
-  }
-
+  });
   const StyledTitle$1 = styled(DialogPrimitive__namespace.Title, {});
   const StyledDescription$1 = styled(DialogPrimitive__namespace.Description, {
     margin: '10px 0 20px',
@@ -13577,7 +13959,7 @@
       animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
     }
   });
-  const StyledContent = styled(ADialog__namespace.Content, {
+  const StyledContent$1 = styled(ADialog__namespace.Content, {
     backgroundColor: 'white',
     borderRadius: 6,
     boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@@ -13632,7 +14014,7 @@
         lineNumber: 66,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({}, props, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
@@ -13773,7 +14155,7 @@
       padding: '0',
       backgroundColor: '$bgGray'
     },
-    '@2xl': {
+    '@3xl': {
       maxWidth: '1206px !important'
     },
     variants: {
@@ -13806,6 +14188,165 @@
     }), props.children);
   };
 
+  const slideUpAndFade = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  const slideRightAndFade = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  const slideDownAndFade = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  const slideLeftAndFade = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  const StyledContent = styled(DropdownMenuPrimitive__namespace.Content, {
+    width: 143,
+    maxWidth: 243,
+    backgroundColor: 'white',
+    borderRadius: 4,
+    padding: 8,
+    boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+    '@media (prefers-reduced-motion: no-preference)': {
+      animationDuration: '400ms',
+      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      animationFillMode: 'forwards',
+      willChange: 'transform, opacity',
+      '&[data-state="open"]': {
+        '&[data-side="top"]': {
+          animationName: slideDownAndFade
+        },
+        '&[data-side="right"]': {
+          animationName: slideLeftAndFade
+        },
+        '&[data-side="bottom"]': {
+          animationName: slideUpAndFade
+        },
+        '&[data-side="left"]': {
+          animationName: slideRightAndFade
+        }
+      }
+    }
+  });
+  const itemStyles = {
+    all: 'unset',
+    fontSize: 13,
+    lineHeight: 1,
+    // color: colors.gray900,
+    borderRadius: 3,
+    display: 'flex',
+    alignItems: 'center',
+    height: 'calc(36px - 8px)',
+    padding: '8px 0',
+    position: 'relative',
+    userSelect: 'none',
+    '&[data-disabled]': {
+      color: colors.gray400,
+      pointerEvents: 'none'
+    },
+    '&:focus': {
+      backgroundColor: colors.gray50
+    }
+  };
+  const StyledItem = styled(DropdownMenuPrimitive__namespace.Item, Object.assign({}, itemStyles));
+  const StyledCheckboxItem = styled(DropdownMenuPrimitive__namespace.CheckboxItem, Object.assign({}, itemStyles));
+  const StyledRadioItem = styled(DropdownMenuPrimitive__namespace.RadioItem, Object.assign({}, itemStyles));
+  const StyledTriggerItem = styled(DropdownMenuPrimitive__namespace.TriggerItem, Object.assign({
+    '&[data-state="open"]': {
+      backgroundColor: colors.gray50
+    }
+  }, itemStyles));
+  const StyledLabel = styled(DropdownMenuPrimitive__namespace.Label, {
+    padding: '8px 0',
+    fontSize: 12,
+    lineHeight: '25px',
+    color: colors.gray700
+  });
+  const StyledSeparator = styled(DropdownMenuPrimitive__namespace.Separator, {
+    height: 1,
+    backgroundColor: colors.gray150,
+    margin: 5
+  });
+  const StyledItemIndicator = styled(DropdownMenuPrimitive__namespace.ItemIndicator, {
+    position: 'absolute',
+    left: 0,
+    width: 25,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
+  const StyledArrow = styled(DropdownMenuPrimitive__namespace.Arrow, {
+    fill: 'white'
+  });
+  const RightSlot = styled('div', {
+    marginLeft: 'auto',
+    ':focus > &': {
+      color: 'white'
+    },
+    '[data-disabled] &': {
+      color: colors.gray400
+    }
+  });
+  const ButtonDropdown = styled(ButtonPrimitive, {
+    display: 'flex',
+    gap: '8px',
+    padding: '6px 12px'
+  });
+  ButtonDropdown.displayName = 'ButtonDropdown';
+  RightSlot.displayName = 'RightSlot'; // Exports
+
+  const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+  const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+  const DropdownMenuContent = StyledContent;
+  const DropdownMenuItem = StyledItem;
+  const DropdownMenuCheckboxItem = StyledCheckboxItem;
+  const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+  const DropdownMenuRadioItem = StyledRadioItem;
+  const DropdownMenuItemIndicator = StyledItemIndicator;
+  const DropdownMenuTriggerItem = StyledTriggerItem;
+  const DropdownMenuLabel = StyledLabel;
+  const DropdownMenuSeparator = StyledSeparator;
+  const DropdownMenuArrow = StyledArrow;
+  DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+  DropdownMenuContent.displayName = 'DropdownMenuContent';
+  DropdownMenuItem.displayName = 'DropdownMenuItem';
+  DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+  DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';
+  DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+  DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
+  DropdownMenuTriggerItem.displayName = 'DropdownMenuTriggerItem';
+  DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+  DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+  DropdownMenuArrow.displayName = 'DropdownMenuArrow';
+
   var _jsxFileName = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/colors/colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
@@ -13897,8 +14438,10 @@
   exports.BreadcrumbItem = BreadcrumbItem;
   exports.BreadcrumbLink = BreadcrumbLink;
   exports.Button = Button$1;
+  exports.ButtonDropdown = ButtonDropdown;
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
+  exports.ButtonPrimitive = ButtonPrimitive;
   exports.Card = Card;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
@@ -13915,11 +14458,27 @@
   exports.DialogTitle = DialogTitle;
   exports.DialogTrigger = DialogTrigger;
   exports.Drawer = Drawer;
+  exports.DrawerBody = DrawerBody;
   exports.DrawerClose = DrawerClose;
+  exports.DrawerCloseButton = DrawerCloseButton;
   exports.DrawerContent = DrawerContent;
   exports.DrawerDescription = DrawerDescription;
+  exports.DrawerFooter = DrawerFooter;
+  exports.DrawerHeader = DrawerHeader;
   exports.DrawerTitle = DrawerTitle;
   exports.DrawerTrigger = DrawerTrigger;
+  exports.DropdownMenu = DropdownMenu;
+  exports.DropdownMenuArrow = DropdownMenuArrow;
+  exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+  exports.DropdownMenuContent = DropdownMenuContent;
+  exports.DropdownMenuItem = DropdownMenuItem;
+  exports.DropdownMenuItemIndicator = DropdownMenuItemIndicator;
+  exports.DropdownMenuLabel = DropdownMenuLabel;
+  exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+  exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+  exports.DropdownMenuSeparator = DropdownMenuSeparator;
+  exports.DropdownMenuTrigger = DropdownMenuTrigger;
+  exports.DropdownMenuTriggerItem = DropdownMenuTriggerItem;
   exports.Flex = Flex$1;
   exports.FormGroup = FormGroup;
   exports.FormHelper = FormHelper;
@@ -13967,14 +14526,13 @@
   exports.PaperComponent = PaperComponent;
   exports.Paragraph = Paragraph;
   exports.Popover = Popover;
-  exports.PopoverAnchor = PopoverAnchor;
-  exports.PopoverArrow = PopoverArrow;
   exports.PopoverClose = PopoverClose;
   exports.PopoverContent = PopoverContent;
   exports.PopoverTrigger = PopoverTrigger;
   exports.PriceColumn = PriceColumn;
   exports.Progress = Progress;
   exports.RANGE_PICKER = RANGE_PICKER;
+  exports.RightSlot = RightSlot;
   exports.RowExpanderColumn = rowExpanderColumn;
   exports.RowMenuColumn = rowMenuColumn;
   exports.RowSelectionColumn = rowSelectionColumn;