@majoo-ui/react 1.35.0 → 1.36.1

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useReducer, useRef, useCallback } from 'react';
+import React__default, { useState, useEffect, useContext, cloneElement, createContext, useCallback, useReducer, useRef } from 'react';
 import PropTypes, { string, bool, func } from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, SortingOutline, EllipsisHorizontalOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CaretDownOutline, CircleInfoOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, SortingOutline, EllipsisHorizontalOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { Portal } from '@majoo-ui/helpers';
 import { jsx } from 'react/jsx-runtime';
@@ -15,7 +15,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useFloating, offset, flip, shift, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -28,8 +28,9 @@ import { useTable, useSortBy, useExpanded, usePagination, useRowSelect } from 'r
 import moment from 'moment';
 import debounce from 'lodash.debounce';
 import * as ADialog from '@radix-ui/react-alert-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-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,
@@ -39,7 +40,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1105,7 +1106,8 @@ const {
     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 => ({
@@ -2172,9 +2174,9 @@ Flex$1.defaultProps = {
 };
 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: {
@@ -2348,7 +2350,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2359,7 +2361,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2415,7 +2417,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2645,8 +2647,8 @@ Paragraph.defaultProps = {
 
 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',
@@ -2853,7 +2855,8 @@ const ButtonComponent = styled('button', {
     }
   }
 });
-function Button$1(_ref) {
+const ButtonPrimitive = ButtonComponent;
+const Button$1 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
     children,
@@ -2868,7 +2871,7 @@ function Button$1(_ref) {
     rightIcon,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(ButtonComponent, _extends({
     className: className,
@@ -2881,37 +2884,38 @@ function Button$1(_ref) {
     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.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.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.createElement(React__default.Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__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.string,
   buttonType: PropTypes.string,
@@ -2932,7 +2936,7 @@ Button$1.defaultProps = {
   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',
@@ -2964,7 +2968,7 @@ const Link = props => {
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 31,
       columnNumber: 5
     }
@@ -2985,8 +2989,8 @@ Link.defaultProps = {
   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';
@@ -3119,7 +3123,7 @@ const DescriptionField = styled(Paragraph, {
   '-webkit-box-orient': 'vertical',
   overflow: 'hidden'
 });
-const CloseButton = styled(Flex$1, {
+const CloseButton$1 = styled(Flex$1, {
   cursor: 'pointer',
   size: '20px',
   borderRadius: '$round',
@@ -3151,7 +3155,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3180,7 +3184,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3192,7 +3196,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3202,7 +3206,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3210,7 +3214,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3218,7 +3222,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3226,7 +3230,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3238,7 +3242,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3246,7 +3250,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3261,7 +3265,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3270,11 +3274,11 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 250,
       columnNumber: 19
     }
-  }, description)), /*#__PURE__*/React.createElement(CloseButton, {
+  }, description)), /*#__PURE__*/React.createElement(CloseButton$1, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
@@ -3284,7 +3288,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3293,7 +3297,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 263,
       columnNumber: 19
     }
@@ -3309,7 +3313,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 268,
       columnNumber: 15
     }
@@ -3333,7 +3337,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.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: {
@@ -3375,7 +3379,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3383,7 +3387,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3394,7 +3398,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3402,8 +3406,8 @@ const ToastContainer = ({
   })));
 };
 
-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 = ({
@@ -3415,7 +3419,7 @@ const ToastProvider = ({
     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;
@@ -3441,7 +3445,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 41,
       columnNumber: 5
     }
@@ -3450,7 +3454,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 43,
       columnNumber: 7
     }
@@ -3459,7 +3463,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 47,
       columnNumber: 7
     }
@@ -3468,7 +3472,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 51,
       columnNumber: 7
     }
@@ -3477,14 +3481,14 @@ const ToastProvider = ({
     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,
@@ -3497,14 +3501,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3559,9 +3563,11 @@ styled(Flex$1, {
     backgroundColor: 'rgba(0, 0, 0, .05)'
   },
   alignSelf: 'start',
+  alignItems: 'center',
+  justifyContent: 'center',
   variants: {
-    hasTitle: {
-      false: {
+    closeCenter: {
+      true: {
         alignSelf: 'center'
       }
     }
@@ -3571,12 +3577,14 @@ styled(Flex$1, {
   title: PropTypes.string,
   description: PropTypes.string,
   variant: PropTypes.string,
+  link: PropTypes.string,
+  linkText: PropTypes.string,
   onClick: PropTypes.func,
   onRemove: PropTypes.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',
@@ -3713,7 +3721,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -3726,7 +3734,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -3734,14 +3742,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 114,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -3750,14 +3758,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -3810,8 +3818,8 @@ function __rest(s, e) {
     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': {
@@ -3857,7 +3865,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3868,20 +3876,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4087,8 +4095,8 @@ Badge.defaultProps = {
 
 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.Root, {
   width: '32px',
   height: '32px',
@@ -4132,7 +4140,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4141,7 +4149,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4151,7 +4159,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4159,21 +4167,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4190,8 +4198,8 @@ Avatar.defaultProps = {
   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',
@@ -4214,7 +4222,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4229,7 +4237,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4249,8 +4257,8 @@ Image.defaultProps = {
   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,
@@ -4355,14 +4363,14 @@ const Tooltip = _ref => {
     color,
     withClick
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4370,7 +4378,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4378,7 +4386,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4387,7 +4395,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? dark : ligth,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4395,7 +4403,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -4411,8 +4419,8 @@ Tooltip.defaultProps = {
   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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4530,7 +4538,7 @@ function Progress(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress, _extends({
     className: className,
@@ -4546,7 +4554,7 @@ function Progress(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4559,7 +4567,7 @@ function Progress(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -4582,8 +4590,8 @@ Progress.defaultProps = {
   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 {
@@ -4591,7 +4599,7 @@ const FormGroup = _ref => {
     direction,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: direction,
@@ -4599,7 +4607,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 6,
       columnNumber: 3
     }
@@ -4616,9 +4624,9 @@ FormGroup.defaultProps = {
   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.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.Root, Text, {
   display: 'inline-block',
   fontSize: '$label',
   lineHeight: '$label',
@@ -4649,13 +4657,13 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -4665,17 +4673,17 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 37,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(StyledLabel, {
+  }), /*#__PURE__*/React__default.createElement(StyledLabel$1, {
     htmlFor: htmlFor,
     variant: variant,
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -4690,7 +4698,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -4698,14 +4706,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -4714,7 +4722,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -4730,8 +4738,8 @@ FormLabel.propTypes = {
 };
 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',
@@ -4749,7 +4757,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -4757,7 +4765,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -4769,7 +4777,7 @@ FormHelper.propTypes = {
 };
 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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4787,7 +4795,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$D,
+    fileName: _jsxFileName$E,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4799,7 +4807,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$D,
+    fileName: _jsxFileName$E,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4811,13 +4819,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4835,7 +4843,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$C,
+    fileName: _jsxFileName$D,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4847,7 +4855,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$C,
+    fileName: _jsxFileName$D,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4859,14 +4867,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   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.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -4923,7 +4931,7 @@ const Checkbox = _ref => {
     disabled,
     onCheckedChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -4933,28 +4941,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 56,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 63,
       columnNumber: 5
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 63,
       columnNumber: 39
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 63,
       columnNumber: 58
     }
@@ -4968,14 +4976,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 69,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 70,
       columnNumber: 7
     }
@@ -4991,14 +4999,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 71,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$C,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5014,8 +5022,8 @@ InputCheckbox.propTypes = {
 };
 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%',
@@ -5128,7 +5136,7 @@ const InputGroup = _ref => {
     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');
@@ -5152,7 +5160,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$B,
       lineNumber: 143,
       columnNumber: 10
     }
@@ -5465,8 +5473,8 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -5543,14 +5551,14 @@ const InputRadio = _ref => {
     id,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$A,
       lineNumber: 82,
       columnNumber: 3
     }
@@ -5560,14 +5568,14 @@ const InputRadio = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$A,
       lineNumber: 83,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$A,
       lineNumber: 84,
       columnNumber: 7
     }
@@ -5584,7 +5592,7 @@ const InputRadio = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$A,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5627,8 +5635,8 @@ InputRightElement.propTypes = {
 };
 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',
@@ -5704,7 +5712,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     leftIcon,
     rightIcon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(TagComponent, _extends({
     ref: ref,
@@ -5716,21 +5724,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$z,
       lineNumber: 54,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__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.createElement(StyledIconRight$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$z,
       lineNumber: 65,
       columnNumber: 34
     }
@@ -5749,8 +5757,8 @@ Tag.defaultProps = {
   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',
@@ -5869,7 +5877,7 @@ function TagsInput(_ref) {
     readOnly,
     max
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   const [tags, setTags] = React__default.useState(value || []);
 
@@ -5899,14 +5907,14 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$y,
       lineNumber: 129,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(TagContainer, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$y,
       lineNumber: 139,
       columnNumber: 7
     }
@@ -5917,7 +5925,7 @@ function TagsInput(_ref) {
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 144,
         columnNumber: 24
       }
@@ -5931,7 +5939,7 @@ function TagsInput(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$y,
       lineNumber: 141,
       columnNumber: 11
     }
@@ -5945,7 +5953,7 @@ function TagsInput(_ref) {
     readOnly: readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$y,
       lineNumber: 157,
       columnNumber: 7
     }
@@ -5970,8 +5978,8 @@ TagsInput.defaultProps = {
   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.Thumb, {
   display: 'block',
   width: '16px',
@@ -6043,7 +6051,7 @@ const InputSwitch = _ref => {
     dataOffLabel,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
@@ -6054,14 +6062,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$x,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -6079,7 +6087,7 @@ InputSwitch.propTypes = {
 };
 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.createElement("svg", _extends({
   width: props.size,
@@ -6089,7 +6097,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$w,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -6098,7 +6106,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: "white",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$w,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -6108,7 +6116,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   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
   }
@@ -6119,7 +6127,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$w,
     lineNumber: 12,
     columnNumber: 5
   }
@@ -6129,7 +6137,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   mask: "url(#path-1-inside-1_2883_7918)",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$w,
     lineNumber: 18,
     columnNumber: 5
   }
@@ -6140,7 +6148,7 @@ SvgCloseFilled.defaultProps = {
   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.createElement("svg", _extends({
   width: props.size,
@@ -6150,7 +6158,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$v,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -6162,7 +6170,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   strokeWidth: 2,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$v,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -6171,7 +6179,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$v,
     lineNumber: 6,
     columnNumber: 5
   }
@@ -6182,15 +6190,15 @@ SvgSearchOutline.defaultProps = {
   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.useState('');
   const handleChange = React__default.useCallback(e => {
@@ -6212,7 +6220,7 @@ const InputSearchbox = _ref => {
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$u,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -6220,14 +6228,14 @@ const InputSearchbox = _ref => {
     children: /*#__PURE__*/React__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
     }
@@ -6237,7 +6245,7 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$u,
       lineNumber: 30,
       columnNumber: 7
     }
@@ -6245,14 +6253,14 @@ const InputSearchbox = _ref => {
     children: value.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 31,
         columnNumber: 55
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 31,
         columnNumber: 73
       }
@@ -6260,7 +6268,7 @@ const InputSearchbox = _ref => {
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$u,
       lineNumber: 31,
       columnNumber: 7
     }
@@ -6619,8 +6627,8 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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',
@@ -6674,6 +6682,19 @@ const BoxSelect = styled('div', {
           border: '1px solid $gray300'
         }
       }
+    },
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textPrimary',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $gray300'
+        },
+        '&:focus-within': {
+          border: '1px solid $gray300'
+        }
+      }
     }
   }
 });
@@ -6698,6 +6719,12 @@ const Button = styled('button', {
       lg: {
         padding: '11px 16px 12px'
       }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed',
+        color: '$textPrimary'
+      }
     }
   }
 });
@@ -6714,6 +6741,14 @@ const Input$1 = styled('input', {
   '&:disabled': {
     cursor: 'not-allowed',
     color: '$textDisable'
+  },
+  variants: {
+    readOnly: {
+      true: {
+        cursor: 'not-allowed',
+        color: '$textPrimary'
+      }
+    }
   }
 });
 const IconContainer = styled('div', {
@@ -6728,6 +6763,11 @@ const IconContainer = styled('div', {
       true: {
         cursor: 'not-allowed'
       }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
     }
   }
 });
@@ -6779,10 +6819,16 @@ const SelectItem = styled('div', {
   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,
@@ -6797,9 +6843,10 @@ function Select$1(_ref) {
     textSelector,
     disabledOptions,
     css,
-    onSearch
+    onSearch,
+    readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   const [item, setItem] = React.useState(option || []);
 
@@ -6845,8 +6892,8 @@ function Select$1(_ref) {
     initialSelectedItem: value !== undefined ? value : null,
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 218,
+      fileName: _jsxFileName$t,
+      lineNumber: 259,
       columnNumber: 5
     }
   }), ({
@@ -6864,8 +6911,8 @@ function Select$1(_ref) {
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 236,
+      fileName: _jsxFileName$t,
+      lineNumber: 277,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -6873,10 +6920,11 @@ function Select$1(_ref) {
   }), {
     size: size,
     disabled: disabled,
+    readOnly: readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 237,
+      fileName: _jsxFileName$t,
+      lineNumber: 278,
       columnNumber: 11
     }
   }), search ? /*#__PURE__*/React.createElement("div", {
@@ -6885,84 +6933,129 @@ function Select$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 239,
+      fileName: _jsxFileName$t,
+      lineNumber: 280,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React.createElement(Input$1, _extends({
-    placeholder: placeholder
+  }, icon ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      height: '100%'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$t,
+      lineNumber: 282,
+      columnNumber: 19
+    }
+  }, /*#__PURE__*/React.createElement(InputLeftElement, {
+    children: /*#__PURE__*/React.createElement(SearchOutline, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$t,
+        lineNumber: 283,
+        columnNumber: 49
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$t,
+      lineNumber: 283,
+      columnNumber: 21
+    }
+  }), /*#__PURE__*/React.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.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.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.createElement(Paragraph, {
+  }), selectedItem ? /*#__PURE__*/React.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.createElement(Paragraph, {
+  }, selectedItem.name) : /*#__PURE__*/React.createElement(Text, {
     color: "primary",
+    css: StyledText,
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 251,
+      fileName: _jsxFileName$t,
+      lineNumber: 305,
       columnNumber: 19
     }
-  }, placeholder)), /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps({
-    disabled
+  }, placeholder)), !icon ? /*#__PURE__*/React.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.createElement(CaretDownOutline, {
+  }), /*#__PURE__*/React.createElement(CaretDownOutline, {
     color: iconColor,
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 256,
-      columnNumber: 30
+      fileName: _jsxFileName$t,
+      lineNumber: 311,
+      columnNumber: 17
     }
-  }))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
+  })) : null), /*#__PURE__*/React.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.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 261,
+      fileName: _jsxFileName$t,
+      lineNumber: 317,
       columnNumber: 15
     }
   }), item.map((item, index) => {
@@ -6974,37 +7067,58 @@ function Select$1(_ref) {
     }), {
       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.createElement(SelectOption, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 286,
+      fileName: _jsxFileName$t,
+      lineNumber: 341,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.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.createElement("div", {
+    style: {
+      marginRight: '6px'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$t,
+      lineNumber: 343,
+      columnNumber: 19
+    }
+  }, /*#__PURE__*/React.createElement(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.string,
@@ -7015,12 +7129,13 @@ Select$1.propTypes = {
   search: PropTypes.bool,
   value: PropTypes.object,
   iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  icon: PropTypes.node,
+  icon: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   textSelector: PropTypes.string,
   valueSelector: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  onSearch: PropTypes.func
+  onSearch: PropTypes.func,
+  readOnly: PropTypes.bool
 };
 Select$1.defaultProps = {
   placeholder: 'Select Item',
@@ -7028,11 +7143,12 @@ Select$1.defaultProps = {
   disabled: false,
   search: false,
   iconColor: 'currentColor',
-  icon: undefined,
+  icon: false,
   placement: 'bottom',
   disabledOptions: [],
   textSelector: 'name',
-  valueSelector: 'value'
+  valueSelector: 'value',
+  readOnly: false
 };
 
 var $$2 = _export;
@@ -7070,7 +7186,7 @@ $$2({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
   }
 });
 
-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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -7088,7 +7204,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$r,
+    fileName: _jsxFileName$s,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -7100,7 +7216,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$r,
+    fileName: _jsxFileName$s,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -7112,13 +7228,13 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __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',
@@ -7338,7 +7454,7 @@ function SelectTag({
   return /*#__PURE__*/React.createElement(Wrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 209,
       columnNumber: 5
     }
@@ -7347,7 +7463,7 @@ function SelectTag({
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 210,
       columnNumber: 7
     }
@@ -7355,7 +7471,7 @@ function SelectTag({
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 212,
       columnNumber: 11
     }
@@ -7376,7 +7492,7 @@ function SelectTag({
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$r,
         lineNumber: 224,
         columnNumber: 28
       }
@@ -7389,7 +7505,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 214,
       columnNumber: 15
     }
@@ -7398,7 +7514,7 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 237,
       columnNumber: 9
     }
@@ -7410,21 +7526,21 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 238,
       columnNumber: 11
     }
   }))), /*#__PURE__*/React.createElement(IconWrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 244,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(IconCaretDown, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 245,
       columnNumber: 11
     }
@@ -7434,14 +7550,14 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 248,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 250,
       columnNumber: 11
     }
@@ -7453,7 +7569,7 @@ function SelectTag({
   }), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 253,
       columnNumber: 17
     }
@@ -7465,7 +7581,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 260,
       columnNumber: 19
     }
@@ -7473,7 +7589,7 @@ function SelectTag({
     color: colors.iconGreen,
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 261,
       columnNumber: 53
     }
@@ -7484,14 +7600,14 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 263,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 275,
       columnNumber: 11
     }
@@ -7501,7 +7617,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$r,
       lineNumber: 276,
       columnNumber: 13
     }
@@ -7521,83 +7637,136 @@ SelectTag.defaultProps = {
   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.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__*/createContext();
+const Popover = ({
+  children,
+  open: _open = false,
+  onOpenChange,
+  placement,
+  sideOffset: _sideOffset = 5
+}) => {
+  const [openState, setOpenState] = useState(false);
+  useEffect(() => {
+    setOpenState(_open);
+  }, [_open]);
+  useEffect(() => {
+    if (onOpenChange) onOpenChange(openState);
+  }, [openState, onOpenChange]);
+  const floatingHook = useFloating({
+    open: openState,
+    onOpenChange: setOpenState,
+    middleware: [offset(_sideOffset), flip(), shift()],
+    placement
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useClick(floatingHook.context), useDismiss(floatingHook.context)]);
+  const value = {
+    openState,
+    setOpenState,
+    floatingHook,
+    getReferenceProps,
+    getFloatingProps
+  };
+  return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
+    value: value,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$q,
+      lineNumber: 42,
+      columnNumber: 10
     }
-  }
-});
-const StyledTrigger$2 = styled(PopoverPrimitive.Trigger, {
-  all: 'unset'
-});
-const StyledArrow = styled(PopoverPrimitive.Arrow, {
-  fill: 'white'
-});
-const StyledClose$1 = styled(PopoverPrimitive.Close, {});
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = StyledTrigger$2;
-const PopoverContent = StyledContent$5;
-const PopoverArrow = StyledArrow;
-const PopoverClose = StyledClose$1;
-const StyledAnchor = styled(PopoverPrimitive.Anchor, {});
-const PopoverAnchor = StyledAnchor;
+  }, children);
+};
+const PopoverTrigger = ({
+  children
+}) => {
+  const {
+    floatingHook: {
+      reference
+    },
+    getReferenceProps
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/cloneElement(children, getReferenceProps(Object.assign({
+    ref: reference
+  }, children.props)));
+};
+const PopoverContent = ({
+  children,
+  isMobile,
+  style
+}) => {
+  const {
+    openState,
+    floatingHook: {
+      x,
+      y,
+      floating,
+      strategy,
+      context
+    },
+    getFloatingProps
+  } = useContext(PopoverContext);
+  return openState ? /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+    context: context,
+    modal: false,
+    order: ['reference', 'content'],
+    returnFocus: false,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$q,
+      lineNumber: 60,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null);
+};
+const PopoverClose = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+
+  const {
+    setOpenState
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/React__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.bool,
+  onOpenChange: PropTypes.func,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+  sideOffset: PropTypes.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";
@@ -7981,7 +8150,7 @@ const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
     boxShadow: 'inset 0 -2px 0 0 $colors$primary500, 0 2px 0 0 $colors$primary500'
   }
 });
-const StyledContent$4 = styled(TabsPrimitive.Content, {
+const StyledContent$5 = styled(TabsPrimitive.Content, {
   flexGrow: 1,
   borderBottomLeftRadius: '$lg',
   borderBottomRightRadius: '$lg',
@@ -7992,9 +8161,9 @@ const StyledContent$4 = styled(TabsPrimitive.Content, {
 const Tabs = StyledTabs;
 const TabsList = StyledList;
 const TabsTrigger = StyledTrigger$1;
-const TabsContent = StyledContent$4;
+const TabsContent = StyledContent$5;
 
-const StyledSeparator = styled(SeparatorPrimitive.Root, {
+const StyledSeparator$1 = styled(SeparatorPrimitive.Root, {
   backgroundColor: '$gray150',
   '&[data-orientation=horizontal]': {
     height: 1,
@@ -8004,7 +8173,7 @@ const StyledSeparator = styled(SeparatorPrimitive.Root, {
     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"];
@@ -8245,7 +8414,6 @@ const NotificationBadgeRootStyle = styled('span', {
 });
 const NotificationBadgeStyle = styled('span', {
   position: 'absolute',
-  zIndex: 1,
   minWidth: 20,
   height: 20,
   borderRadius: 10,
@@ -8368,7 +8536,7 @@ const NotificationBadge = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 133,
+      lineNumber: 132,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React__default.createElement(NotificationBadgeStyle, _extends({}, props, {
@@ -8376,7 +8544,7 @@ const NotificationBadge = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 135,
+      lineNumber: 134,
       columnNumber: 7
     }
   })));
@@ -8485,11 +8653,11 @@ const IconButton = styled('button', {
       secondary: {
         backgroundColor: 'transparent',
         '&:hover': {
-          backgroundColor: '$bgGray',
+          backgroundColor: '$primary50',
           color: '$textGreen'
         },
         '&:active': {
-          backgroundColor: '$gray100'
+          backgroundColor: '$primary100'
         }
       }
     }
@@ -8522,25 +8690,32 @@ const ModalDialog = _ref => {
   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 = useCallback(node => {
+    if (node !== null) {
+      document.body.classList.add('noscroll');
+    } else {
+      document.body.classList.remove('noscroll');
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Dialog, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 41,
+      lineNumber: 49,
       columnNumber: 5
     }
   }), pageDialogTrigger && /*#__PURE__*/React__default.createElement(DialogTrigger, _extends({}, pageDialogTrigger.props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 42,
+      lineNumber: 50,
       columnNumber: 29
     }
   })), /*#__PURE__*/React__default.createElement(DialogPortal, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 43,
+      lineNumber: 51,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DialogOverlay, {
@@ -8550,7 +8725,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 44,
+      lineNumber: 52,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(DialogContent, {
@@ -8558,10 +8733,11 @@ const ModalDialog = _ref => {
     css: Object.assign({}, css, {
       zIndex: layer
     }),
+    ref: ref,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 45,
+      lineNumber: 53,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -8574,7 +8750,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 46,
+      lineNumber: 54,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -8588,7 +8764,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 47,
+      lineNumber: 55,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -8602,7 +8778,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 56,
+      lineNumber: 64,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(DialogTitle, {
@@ -8612,7 +8788,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 57,
+      lineNumber: 65,
       columnNumber: 17
     }
   }, headerTitle && /*#__PURE__*/React__default.createElement(Heading, _extends({
@@ -8621,7 +8797,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 58,
+      lineNumber: 66,
       columnNumber: 35
     }
   }))), /*#__PURE__*/React__default.createElement(DialogClose, {
@@ -8629,7 +8805,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 60,
+      lineNumber: 68,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -8645,7 +8821,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 61,
+      lineNumber: 69,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -8653,7 +8829,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 72,
+      lineNumber: 80,
       columnNumber: 21
     }
   }))))), pageDialogChildren && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, pageDialogChildren.props, {
@@ -8664,7 +8840,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 77,
+      lineNumber: 85,
       columnNumber: 36
     }
   })), footerChildren && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, footerChildren.props, {
@@ -8677,7 +8853,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 78,
+      lineNumber: 86,
       columnNumber: 32
     }
   }))))));
@@ -8688,6 +8864,10 @@ ModalDialog.defaultProps = {
 
 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.createContext();
+const {
+  sizes
+} = foundations;
 const fadeIn = keyframes({
   from: {
     opacity: '0'
@@ -8729,17 +8909,25 @@ function Drawer(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 36,
+      lineNumber: 40,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledOverlay$2, {
     __self: this,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 37,
+      lineNumber: 41,
       columnNumber: 7
     }
-  }), children);
+  }), /*#__PURE__*/React__default.createElement(Context.Provider, {
+    value: Object.assign({}, props),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 42,
+      columnNumber: 7
+    }
+  }, children));
 }
 const slideIn = keyframes({
   from: {
@@ -8757,20 +8945,18 @@ const slideOut = keyframes({
     transform: '$$transformValue'
   }
 });
-const StyledContent$3 = styled(DialogPrimitive.Content, {
-  backgroundColor: '$panel',
+const StyledContent$4 = styled(DialogPrimitive.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)`
   },
@@ -8778,12 +8964,33 @@ const StyledContent$3 = styled(DialogPrimitive.Content, {
     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)',
@@ -8791,15 +8998,11 @@ const StyledContent$3 = styled(DialogPrimitive.Content, {
       },
       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)',
@@ -8808,7 +9011,8 @@ const StyledContent$3 = styled(DialogPrimitive.Content, {
     }
   },
   defaultVariants: {
-    side: 'right'
+    side: 'right',
+    size: 'xs'
   }
 });
 const StyledClose = styled(DialogPrimitive.Close, {
@@ -8822,6 +9026,129 @@ const StyledClose = styled(DialogPrimitive.Close, {
   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.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.createElement(Context.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 199,
+      columnNumber: 10
+    }
+  }, value => /*#__PURE__*/React__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.createElement(Context.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 203,
+      columnNumber: 10
+    }
+  }, value => /*#__PURE__*/React__default.createElement(Header, _extends({}, value, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 203,
+      columnNumber: 38
+    }
+  }), props.children));
+};
+const DrawerFooter = props => {
+  return /*#__PURE__*/React__default.createElement(Context.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 207,
+      columnNumber: 10
+    }
+  }, value => /*#__PURE__*/React__default.createElement(Footer, _extends({}, value, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 207,
+      columnNumber: 38
+    }
+  }), props.children));
+};
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerClose = StyledClose;
+const DrawerTitle = DialogPrimitive.Title;
+const DrawerDescription = DialogPrimitive.Description;
+const DrawerBody = Body;
+const DrawerCloseButton = () => {
+  return /*#__PURE__*/React__default.createElement(CloseButton, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 217,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(CloseOutline, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 218,
+      columnNumber: 7
+    }
+  }));
+};
 Drawer.propTypes = {
   defaultOpen: PropTypes.bool,
   open: PropTypes.bool,
@@ -8830,20 +9157,20 @@ Drawer.propTypes = {
   allowPinchZoom: PropTypes.bool,
   id: PropTypes.string
 };
-const DrawerContent = StyledContent$3;
 DrawerContent.propTypes = {
   side: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
   isMobile: PropTypes.bool
 };
-const DrawerTrigger = DialogPrimitive.Trigger;
-const DrawerClose = StyledClose;
-const DrawerTitle = DialogPrimitive.Title;
-const DrawerDescription = DialogPrimitive.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"],
@@ -8877,7 +9204,7 @@ const Accordion = _ref => {
     }
   }), children);
 };
-const StyledItem = styled(AccordionPrimitive.Item, {
+const StyledItem$1 = styled(AccordionPrimitive.Item, {
   borderTop: '1px solid $colors$slate6',
   '&:last-of-type': {
     borderBottom: '1px solid $colors$slate6'
@@ -8956,15 +9283,15 @@ const AccordionTrigger = _ref2 => {
     }
   })));
 };
-const StyledContent$2 = styled(AccordionPrimitive.Content, {});
-const AccordionItem = StyledItem;
+const StyledContent$3 = styled(AccordionPrimitive.Content, {});
+const AccordionItem = StyledItem$1;
 const AccordionContent = _ref3 => {
   let {
     children
   } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
 
-  return /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
+  return /*#__PURE__*/React__default.createElement(StyledContent$3, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
@@ -10788,6 +11115,7 @@ function InputDatePicker({
   defaultDate,
   date,
   advanceView,
+  placement = 'bottom-start',
   css
 }) {
   const [{
@@ -10804,7 +11132,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 113,
+      lineNumber: 114,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -10812,14 +11140,14 @@ function InputDatePicker({
       __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.createElement(InputText, {
@@ -10831,7 +11159,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 115,
+      lineNumber: 116,
       columnNumber: 7
     }
   }));
@@ -10846,7 +11174,7 @@ function InputDatePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 129,
+        lineNumber: 130,
         columnNumber: 11
       }
     }) : {
@@ -10868,7 +11196,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 5
     }
   });
@@ -10876,17 +11204,18 @@ function InputDatePicker({
   return !isMobile ? /*#__PURE__*/React__default.createElement(Popover, {
     open: openPicker,
     onOpenChange: setOpenPicker,
+    placement: placement,
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 147,
+      lineNumber: 148,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 148,
+      lineNumber: 149,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -10894,18 +11223,14 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 149,
+      lineNumber: 150,
       columnNumber: 9
     }
   }, renderInputGroup())), /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -10913,7 +11238,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 157,
+      lineNumber: 158,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -10922,7 +11247,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 158,
+      lineNumber: 159,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -10934,7 +11259,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$e,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 9
     }
   }, renderDatePicker())));
@@ -11002,8 +11327,16 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 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: {
@@ -11034,7 +11367,7 @@ const PageButton = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 23,
+      lineNumber: 31,
       columnNumber: 5
     }
   }));
@@ -11107,7 +11440,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 91,
+      lineNumber: 99,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11116,10 +11449,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 92,
+      lineNumber: 100,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     buttonType: "secondary",
     disabled: currentPage === 1,
     onClick: () => handleSelectPage(1),
@@ -11132,16 +11465,16 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 93,
-      columnNumber: 9
+      lineNumber: 103,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(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.createElement(PrevNextButton, {
     variant: "caption",
@@ -11151,10 +11484,10 @@ const PaginationButton = ({
     __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.createElement(PageButton, {
       key: index.toString(),
       isActive: page === currentPage,
@@ -11162,11 +11495,11 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 114,
+        lineNumber: 126,
         columnNumber: 13
       }
     }, page);
-  }), /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }), currentPage < totalPages && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PrevNextButton, {
     variant: "caption",
     isDisabled: currentPage === totalPages,
     color: currentPage === totalPages ? 'disable' : 'primary',
@@ -11174,8 +11507,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 123,
-      columnNumber: 9
+      lineNumber: 137,
+      columnNumber: 13
     }
   }, "Selanjutnya"), /*#__PURE__*/React__default.createElement(IconButton, {
     buttonType: "secondary",
@@ -11190,18 +11523,18 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 131,
-      columnNumber: 9
+      lineNumber: 145,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(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.createElement(Separator, {
+  })))), /*#__PURE__*/React__default.createElement(Separator, {
     orientation: "vertical",
     css: {
       height: '100%',
@@ -11210,7 +11543,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 144,
+      lineNumber: 160,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -11222,7 +11555,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 146,
+      lineNumber: 162,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -11230,7 +11563,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 147,
+      lineNumber: 163,
       columnNumber: 9
     }
   }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
@@ -11254,7 +11587,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 148,
+      lineNumber: 164,
       columnNumber: 9
     }
   })));
@@ -11262,6 +11595,23 @@ const PaginationButton = ({
 
 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 {
@@ -11275,82 +11625,105 @@ function PaginationInfo(_ref) {
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
-    gap: 3,
+    gap: 3,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 28,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    color: "secondary",
+    variant: "label",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, "Tampilkan:"), /*#__PURE__*/React__default.createElement(Popover, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 32,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 33,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(LimitContainer, {
+    align: "center",
     __self: this,
     __source: {
       fileName: _jsxFileName$c,
-      lineNumber: 10,
-      columnNumber: 5
+      lineNumber: 34,
+      columnNumber: 11
     }
   }, /*#__PURE__*/React__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.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.createElement(ChevronDownOutline, {
-      color: colors.iconSecondary,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 24,
-        columnNumber: 15
-      }
-    }),
+  }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: colors.gray400,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 36,
+      columnNumber: 13
+    }
+  }))), /*#__PURE__*/React__default.createElement(PopoverContent, {
     placement: "top",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 39,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.createElement(PopoverClose, {
+    css: limitItemContainerStyle(selectedLimit === limit),
+    onClick: () => onChange(limit),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 49,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    variant: "status",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 50,
+      columnNumber: 17
     }
-  }), /*#__PURE__*/React__default.createElement(Text, {
+  }, limit.toString())))))), /*#__PURE__*/React__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`));
@@ -11380,7 +11753,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 13,
+      lineNumber: 12,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(PaginationInfo, {
@@ -11392,18 +11765,18 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 14,
+      lineNumber: 13,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(PaginationButton, {
+  }), totalPages > 1 && /*#__PURE__*/React__default.createElement(PaginationButton, {
     currentPage: currentPage,
     totalPages: totalPages,
     onSelect: onPageChange,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 21,
-      columnNumber: 7
+      lineNumber: 20,
+      columnNumber: 26
     }
   }));
 }
@@ -11482,28 +11855,28 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 74,
+      lineNumber: 71,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 75,
+      lineNumber: 72,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 76,
+      lineNumber: 73,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 78,
+      lineNumber: 75,
       columnNumber: 13
     }
   }), headerGroup.headers.map(column => {
@@ -11512,14 +11885,14 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 82,
+        lineNumber: 79,
         columnNumber: 19
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 84,
+        lineNumber: 81,
         columnNumber: 23
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -11528,7 +11901,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 86,
+        lineNumber: 83,
         columnNumber: 27
       }
     }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
@@ -11536,7 +11909,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 89,
+        lineNumber: 86,
         columnNumber: 27
       }
     }))) : headerRender);
@@ -11544,7 +11917,7 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 101,
+      lineNumber: 98,
       columnNumber: 9
     }
   }), page.map(row => {
@@ -11554,14 +11927,14 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 105,
+        lineNumber: 102,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(TableRow$1, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 106,
+        lineNumber: 103,
         columnNumber: 17
       }
     }), row.cells.map(cell => {
@@ -11569,7 +11942,7 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 109,
+          lineNumber: 106,
           columnNumber: 23
         }
       }), cell.column.accessor ? /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11588,21 +11961,21 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 111,
+          lineNumber: 108,
           columnNumber: 27
         }
       }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 125,
+          lineNumber: 122,
           columnNumber: 47
         }
       }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 125,
+          lineNumber: 122,
           columnNumber: 70
         }
       })) : cell.render('Cell'));
@@ -11610,7 +11983,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 135,
+        lineNumber: 132,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(TableCell$1, {
@@ -11618,7 +11991,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 136,
+        lineNumber: 133,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11626,7 +11999,7 @@ function MobileTable({
       __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.createElement(Flex$1, {
@@ -11641,7 +12014,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 144,
+        lineNumber: 141,
         columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -11650,7 +12023,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 154,
+        lineNumber: 151,
         columnNumber: 33
       }
     }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11663,7 +12036,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 160,
+        lineNumber: 157,
         columnNumber: 31
       }
     }, cell.render('Cell')))))) : null);
@@ -11671,14 +12044,14 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 180,
+      lineNumber: 177,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 181,
+      lineNumber: 178,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -11686,7 +12059,7 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 182,
+      lineNumber: 179,
       columnNumber: 13
     }
   }, footer)))));
@@ -11735,14 +12108,18 @@ const TableHeaderCellContainer = styled(Flex$1, {
   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
+      }
     }
   }
 });
@@ -11920,7 +12297,7 @@ function Table({
       gotoPage(page - 1);
     },
     css: {
-      padding: '$spacing-04',
+      padding: '$spacing-04 0',
       '@md': {
         padding: '$spacing-06'
       }
@@ -11928,7 +12305,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 244,
+      lineNumber: 248,
       columnNumber: 5
     }
   });
@@ -11957,28 +12334,28 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 287,
+      lineNumber: 291,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 288,
+      lineNumber: 292,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 289,
+      lineNumber: 293,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__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 => {
@@ -11995,14 +12372,14 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 297,
+        lineNumber: 301,
         columnNumber: 21
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 311,
+        lineNumber: 317,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -12010,7 +12387,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 313,
+        lineNumber: 319,
         columnNumber: 29
       }
     }, headerRender.toUpperCase()))) : headerRender);
@@ -12018,7 +12395,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 328,
+      lineNumber: 334,
       columnNumber: 9
     }
   }), page.map((row, i) => {
@@ -12032,21 +12409,21 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 334,
+        lineNumber: 340,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__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.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.createElement(TableRow, {
@@ -12055,7 +12432,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 346,
+        lineNumber: 352,
         columnNumber: 23
       }
     }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
@@ -12063,7 +12440,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 348,
+        lineNumber: 354,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -12071,7 +12448,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 350,
+        lineNumber: 356,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(TableCell, {
@@ -12080,7 +12457,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 351,
+        lineNumber: 357,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -12088,7 +12465,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 352,
+        lineNumber: 358,
         columnNumber: 29
       }
     }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
@@ -12097,7 +12474,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 354,
+        lineNumber: 360,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -12105,7 +12482,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 355,
+        lineNumber: 361,
         columnNumber: 29
       }
     }, cell.render('Cell')))))) : null);
@@ -12113,14 +12490,14 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 365,
+      lineNumber: 371,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 366,
+      lineNumber: 372,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -12128,18 +12505,19 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 367,
+      lineNumber: 373,
       columnNumber: 13
     }
   }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__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.createElement(Paragraph, {
@@ -12148,7 +12526,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 377,
+      lineNumber: 384,
       columnNumber: 19
     }
   }, "Tidak ada data"))))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
@@ -12158,7 +12536,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 388,
+      lineNumber: 395,
       columnNumber: 5
     }
   });
@@ -13061,22 +13439,6 @@ const MenuContainer = styled(Flex$1, {
   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',
@@ -13086,31 +13448,39 @@ const rowMenuColumn = options => ({
     return /*#__PURE__*/React__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.createElement(MenuTriggerButton, {
+    }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$6,
-        lineNumber: 37,
+        lineNumber: 21,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$6,
-        lineNumber: 38,
+        lineNumber: 22,
         columnNumber: 11
       }
-    })), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    }, /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$6,
+        lineNumber: 23,
+        columnNumber: 13
+      }
+    }))), /*#__PURE__*/React__default.createElement(PopoverContent, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$6,
-        lineNumber: 40,
+        lineNumber: 26,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(MenuContainer, {
@@ -13118,7 +13488,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$6,
-        lineNumber: 41,
+        lineNumber: 27,
         columnNumber: 11
       }
     }, options.map(option => /*#__PURE__*/React__default.createElement(Button$1, {
@@ -13131,7 +13501,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$6,
-        lineNumber: 43,
+        lineNumber: 29,
         columnNumber: 15
       }
     }, option.title)))));
@@ -13182,6 +13552,9 @@ const PageDialogContent = styled('div');
 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,
@@ -13196,25 +13569,32 @@ const PageDialog = _ref => {
   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 = useCallback(node => {
+    if (node !== null) {
+      document.body.classList.add('noscroll');
+    } else {
+      document.body.classList.remove('noscroll');
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Dialog, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 37,
+      lineNumber: 49,
       columnNumber: 5
     }
   }), pageDialogTrigger && /*#__PURE__*/React__default.createElement(DialogTrigger, _extends({}, pageDialogTrigger.props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 38,
+      lineNumber: 50,
       columnNumber: 29
     }
   })), /*#__PURE__*/React__default.createElement(DialogPortal, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 39,
+      lineNumber: 51,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DialogContent, {
@@ -13222,10 +13602,11 @@ const PageDialog = _ref => {
     css: Object.assign({}, css, {
       zIndex: layer
     }),
+    ref: ref,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 40,
+      lineNumber: 52,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13238,7 +13619,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 41,
+      lineNumber: 53,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13248,12 +13629,13 @@ const PageDialog = _ref => {
       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.createElement(Box$1, {
@@ -13268,7 +13650,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 59,
+      lineNumber: 72,
       columnNumber: 15
     }
   }, !isMobile && /*#__PURE__*/React__default.createElement(DialogClose, {
@@ -13276,7 +13658,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 70,
+      lineNumber: 83,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13293,7 +13675,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 71,
+      lineNumber: 84,
       columnNumber: 21
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -13301,7 +13683,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 83,
+      lineNumber: 96,
       columnNumber: 23
     }
   }))), /*#__PURE__*/React__default.createElement(DialogTitle, {
@@ -13311,16 +13693,17 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 87,
+      lineNumber: 100,
       columnNumber: 17
     }
   }, headerTitle && /*#__PURE__*/React__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.createElement(DialogClose, {
@@ -13328,7 +13711,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 91,
+      lineNumber: 104,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13343,7 +13726,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 92,
+      lineNumber: 105,
       columnNumber: 21
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -13351,7 +13734,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 102,
+      lineNumber: 115,
       columnNumber: 23
     }
   })))), !isMobile && /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13364,7 +13747,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 108,
+      lineNumber: 121,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Image, {
@@ -13372,19 +13755,19 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 109,
+      lineNumber: 122,
       columnNumber: 19
     }
   }))), pageDialogChildren && /*#__PURE__*/React__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.createElement(Box$1, _extends({}, footerChildren.props, {
@@ -13393,12 +13776,13 @@ const PageDialog = _ref => {
       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
     }
   }))))));
@@ -13435,7 +13819,7 @@ const StyledOverlay$1 = styled(DialogPrimitive.Overlay, {
     animation: `${overlayShow$1} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
   }
 });
-const StyledContent$1 = styled(DialogPrimitive.Content, {
+const StyledContent$2 = styled(DialogPrimitive.Content, {
   position: 'fixed',
   top: '50%',
   left: '50%',
@@ -13474,23 +13858,22 @@ const StyledContent$1 = styled(DialogPrimitive.Content, {
     size: 'md'
   }
 });
-
-function Content$1(_ref) {
+const Content$1 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  return /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
-    __self: this,
+  return /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
+    ref: ref,
+    __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
       lineNumber: 66,
       columnNumber: 5
     }
   }), children);
-}
-
+});
 const StyledTitle$1 = styled(DialogPrimitive.Title, {});
 const StyledDescription$1 = styled(DialogPrimitive.Description, {
   margin: '10px 0 20px',
@@ -13551,7 +13934,7 @@ const StyledOverlay = styled(ADialog.Overlay, {
     animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
   }
 });
-const StyledContent = styled(ADialog.Content, {
+const StyledContent$1 = styled(ADialog.Content, {
   backgroundColor: 'white',
   borderRadius: 6,
   boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@@ -13606,7 +13989,7 @@ function Content(_ref) {
       lineNumber: 66,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(StyledContent, _extends({}, props, {
+  }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
@@ -13747,7 +14130,7 @@ const StyledDiv = styled('div', {
     padding: '0',
     backgroundColor: '$bgGray'
   },
-  '@2xl': {
+  '@3xl': {
     maxWidth: '1206px !important'
   },
   variants: {
@@ -13780,6 +14163,165 @@ const PageContainer = props => {
   }), 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.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.Item, Object.assign({}, itemStyles));
+const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, itemStyles));
+const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, Object.assign({}, itemStyles));
+const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, Object.assign({
+  '&[data-state="open"]': {
+    backgroundColor: colors.gray50
+  }
+}, itemStyles));
+const StyledLabel = styled(DropdownMenuPrimitive.Label, {
+  padding: '8px 0',
+  fontSize: 12,
+  lineHeight: '25px',
+  color: colors.gray700
+});
+const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
+  height: 1,
+  backgroundColor: colors.gray150,
+  margin: 5
+});
+const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
+  position: 'absolute',
+  left: 0,
+  width: 25,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const StyledArrow = styled(DropdownMenuPrimitive.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.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuContent = StyledContent;
+const DropdownMenuItem = StyledItem;
+const DropdownMenuCheckboxItem = StyledCheckboxItem;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.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',
@@ -13848,4 +14390,4 @@ const Colors = props => {
   }, i.hex))));
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, Colors, DateColumn, DatePicker, DecimalColumn, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledBox, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, ToastContext, Tooltip, addOnCellStyle, defaultFetchDataParams };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Colors, DateColumn, DatePicker, DecimalColumn, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledBox, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, ToastContext, Tooltip, addOnCellStyle, defaultFetchDataParams };