@codezee/sixtify-brahma 0.2.81 → 0.2.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.81",
+  "version": "0.2.83",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.js

@@ -19,10 +19,10 @@ const ActionCell = ({ items, disabled }) => {
         setAnchorEl(event.currentTarget);
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { component: "div", sx: { cursor: "pointer", alignItems: "center", width: "100%" }, onClick: HandleClick, disabled: disabled, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: true, anchorEl: anchorEl, onClose: HandleClose, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: items.map((item) => {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "center" }, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "start" }, onClick: () => {
                                     item?.onClick();
                                     setAnchorEl(null);
-                                }, children: item.title }) }, item.title));
+                                }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: item.title }) }) }, item.title));
                     }) }) }))] }));
 };
 exports.ActionCell = ActionCell;

package/packages/shared-components/dist/AgGrid/AgGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EAmFd,UAAU,CAAC"}
+{"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EAmFd,UAAU,CAAC"}

package/packages/shared-components/dist/AgGrid/AgGrid.js

@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
 const ag_grid_react_1 = require("ag-grid-react");
 const react_1 = require("react");
 const PadBox_1 = require("../PadBox");
+const AgGridStyleProvider_1 = require("./AgGridStyleProvider");
 exports.defaultPageSize = 50;
 exports.pageSizeOptions = [20, 50, 100, 200];
 exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
@@ -34,6 +35,6 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
                 backgroundColor: color.butterflyBlue[700],
             }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "No result found" }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, cacheBlockSize: cacheBlockSize, defaultColDef: defaultColDef, rowHeight: rowHeight, rowModelType: rowModelType, rowBuffer: rowBuffer, infiniteInitialRowCount: infiniteInitialRowCount, overlayNoRowsTemplate: overlayNoRowsTemplate, pagination: pagination, ...(pagination ? { paginationPageSize: exports.defaultPageSize } : {}), paginationPageSizeSelector: pagination ? exports.pageSizeOptions : false, ...rest }), !!props.selectedItems && pagination && ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "absolute", bottom: "15px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: ["Selected Rows ", props.selectedItems] }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(AgGridStyleProvider_1.AgGridStyleProvider, { className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, cacheBlockSize: cacheBlockSize, defaultColDef: defaultColDef, rowHeight: rowHeight, rowModelType: rowModelType, rowBuffer: rowBuffer, infiniteInitialRowCount: infiniteInitialRowCount, overlayNoRowsTemplate: overlayNoRowsTemplate, pagination: pagination, ...(pagination ? { paginationPageSize: exports.defaultPageSize } : {}), paginationPageSizeSelector: pagination ? exports.pageSizeOptions : false, ...rest }), !!props.selectedItems && pagination && ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "absolute", bottom: "15px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: ["Selected Rows ", props.selectedItems] }) }) }))] }));
 });
 exports.AgGrid.displayName = "AgGrid";

package/packages/shared-components/dist/AgGrid/AgGridStyleProvider.d.ts

@@ -0,0 +1,4 @@
+import type { StyledComponent } from "@emotion/styled";
+import type { BoxProps } from "@mui/material";
+export declare const AgGridStyleProvider: StyledComponent<BoxProps>;
+//# sourceMappingURL=AgGridStyleProvider.d.ts.map

package/packages/shared-components/dist/AgGrid/AgGridStyleProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridStyleProvider.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGridStyleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,eAAO,MAAM,mBAAmB,EAAE,eAAe,CAAC,QAAQ,CAyCzD,CAAC"}

package/packages/shared-components/dist/AgGrid/AgGridStyleProvider.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgGridStyleProvider = void 0;
+const material_1 = require("@mui/material");
+exports.AgGridStyleProvider = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    "& .ag-paging-panel": {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        padding: "8px",
+    },
+    "& .ag-paging-page-summary-panel": {
+        fontSize: "14px",
+    },
+    "& .ag-paging-button": {
+        minWidth: "28px",
+    },
+    [theme.breakpoints.down("sm")]: {
+        "& .ag-paging-panel": {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "5px",
+            height: "60px",
+            margin: 0,
+        },
+        "& .ag-paging-button, & .ag-paging-page-summary-panel": {
+            fontSize: "12px",
+        },
+        "& .ag-paging-page-size": {
+            display: "none",
+        },
+        "& .ag-paging-row-summary-panel": {
+            margin: 0,
+        },
+    },
+}));

package/packages/shared-components/dist/AppBar/AppBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../src/AppBar/AppBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,2BAGpB,iBAAiB,CAAC,WAAW,CAAC,4CAMhC,CAAC"}
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../src/AppBar/AppBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,2BAGpB,iBAAiB,CAAC,WAAW,CAAC,4CAkBhC,CAAC"}

package/packages/shared-components/dist/AppBar/AppBar.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const PadBox_1 = require("../PadBox");
 const AppBar_styled_1 = require("./AppBar.styled");
 const AppBar = ({ drawerOpen, children, }) => {
-    return ((0, jsx_runtime_1.jsx)(AppBar_styled_1.StyledAppBar, { position: "fixed", open: drawerOpen, children: (0, jsx_runtime_1.jsx)(material_1.Toolbar, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(AppBar_styled_1.StyledAppBar, { position: "fixed", open: drawerOpen, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", alignItems: "center", minHeight: { xs: "58px", lg: "64px" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: {
+                    padding: { lg: "0 20px", xs: "0px 5px" },
+                }, children: children }) }) }));
 };
 exports.AppBar = AppBar;

package/packages/shared-components/dist/AppBar/AppBar.styled.d.ts

@@ -1,4 +1,4 @@
-import type { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import { type AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
 import type { ComponentType } from "react";
 type StyledAppBarProps = {
     open?: boolean;

package/packages/shared-components/dist/AppBar/AppBar.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.styled.d.ts","sourceRoot":"","sources":["../../src/AppBar/AppBar.styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAuBvD,CAAC"}
+{"version":3,"file":"AppBar.styled.d.ts","sourceRoot":"","sources":["../../src/AppBar/AppBar.styled.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAChB,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAgDxD,CAAC"}

package/packages/shared-components/dist/AppBar/AppBar.styled.js

@@ -4,26 +4,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledAppBar = void 0;
-const material_1 = require("@mui/material");
 const AppBar_1 = __importDefault(require("@mui/material/AppBar"));
-exports.StyledAppBar = (0, material_1.styled)(AppBar_1.default, {
+const styles_1 = require("@mui/material/styles");
+exports.StyledAppBar = (0, styles_1.styled)(AppBar_1.default, {
     shouldForwardProp: (prop) => prop !== "open",
-})(({ theme, open }) => ({
-    background: theme.palette.app.color.iron[600],
-    boxShadow: "unset",
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    marginLeft: "80px",
-    width: "calc(100% - 80px)",
-    ...(open && {
-        marginLeft: "300px",
-        width: "calc(100% - 300px)",
+})(({ theme, open }) => {
+    const drawerWidth = 300;
+    const collapsedWidth = 80;
+    const mobileOffset = open ? collapsedWidth : 0;
+    const desktopOffset = open ? drawerWidth : collapsedWidth;
+    return {
+        background: theme.palette.app.color.iron[600],
+        boxShadow: "unset",
+        zIndex: theme.zIndex.drawer + 1,
         transition: theme.transitions.create(["width", "margin"], {
             easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
+            duration: theme.transitions.duration.standard,
         }),
-    }),
-}));
+        width: "100%",
+        [theme.breakpoints.down("md")]: {
+            paddingLeft: "0px",
+            paddingRight: "0px",
+            marginLeft: `${mobileOffset}px`,
+            width: `calc(100% - ${mobileOffset}px)`,
+        },
+        [theme.breakpoints.up("md")]: {
+            paddingLeft: "0px",
+            paddingRight: "0px",
+            marginLeft: `${desktopOffset}px`,
+            width: `calc(100% - ${desktopOffset}px)`,
+        },
+        ...(open && {
+            marginLeft: "300px",
+            width: "calc(100% - 300px)",
+            transition: theme.transitions.create(["width", "margin"], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        }),
+    };
+});

package/packages/shared-components/dist/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,4CAsDrD,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,4CAuErD,CAAC"}

package/packages/shared-components/dist/Breadcrumbs/Breadcrumbs.js

@@ -7,7 +7,22 @@ const uuid_1 = require("uuid");
 const Breadcrumbs = ({ items }) => {
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(material_1.Breadcrumbs, { children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Breadcrumbs, { sx: {
+            display: "flex",
+            flexWrap: "nowrap",
+            overflowX: "auto",
+            whiteSpace: "nowrap",
+            "& .MuiBreadcrumbs-ol": {
+                display: "flex",
+                flexWrap: "nowrap",
+            },
+            "& .MuiBreadcrumbs-li": {
+                whiteSpace: "nowrap",
+            },
+            "&::-webkit-scrollbar": {
+                display: "none",
+            },
+        }, children: items.map((item) => {
             const { icon, text, onClick } = item;
             if (onClick) {
                 return ((0, jsx_runtime_1.jsxs)(material_1.Link, { underline: "hover", sx: { display: "flex", alignItems: "center" }, onClick: (e) => {

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,IAAI,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAEnE,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,EAAE,UAAU,KACV,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,oFAQhC,QAAQ,CAAC,uBAAuB,CAAC,4CA0XnC,CAAC"}
+{"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,IAAI,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAEnE,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,EAAE,UAAU,KACV,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,oFAQhC,QAAQ,CAAC,uBAAuB,CAAC,4CA4YnC,CAAC"}

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const Tooltip_1 = require("../Tooltip");
+const useOutsideClick_1 = require("./hook/useOutsideClick");
 const useStickyColumns_1 = require("./hook/useStickyColumns");
 const EmployeeCell_1 = require("./SubComponents/EmployeeCell");
 const TableBodyLoader_1 = require("./SubComponents/TableBodyLoader");
@@ -14,12 +15,23 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
     const theme = (0, material_1.useTheme)();
     const { slate, iron, butterflyBlue } = theme.palette.app.color;
     const selectingRef = (0, react_1.useRef)(false);
+    const tableRef = (0, react_1.useRef)(null);
     const selectionModeRef = (0, react_1.useRef)("add");
     const anchorRef = (0, react_1.useRef)(null);
     const hoveringRef = (0, react_1.useRef)(null);
     const [selectedRanges, setSelectedRanges] = (0, react_1.useState)([]);
     const [currentSelectedRanges, setCurrentSelectedRanges] = (0, react_1.useState)([]);
     const { stickyMap } = (0, useStickyColumns_1.useStickyColumns)(columns);
+    (0, useOutsideClick_1.useOutsideClick)(tableRef, () => {
+        setSelectedRanges([]);
+        setCurrentSelectedRanges([]);
+    });
+    (0, react_1.useMemo)(() => {
+        if (loading && selectedRanges.length > 0) {
+            setSelectedRanges([]);
+            setCurrentSelectedRanges([]);
+        }
+    }, [loading]);
     const isSelectedCell = (rowIndex, colIndex) => {
         if (selectedRanges.length === 0 && currentSelectedRanges.length === 0) {
             return false;
@@ -59,7 +71,8 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
         return iron[600];
     }
     const handleCellMouseDown = (0, react_1.useCallback)((ri, ci) => (e) => {
-        if (columns[ci]?.disableSelection) {
+        e.preventDefault();
+        if (columns[ci]?.disableSelection && ci > 0) {
             const nextSelectableIndex = columns.findIndex((col, index) => !col.disableSelection && index > ci);
             if (nextSelectableIndex !== -1) {
                 return (0, helper_1.handleMouseDown)({
@@ -153,7 +166,8 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
             onCellSelection,
         });
     }, [onCellSelection, selectedRanges]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "relative", overflow: "auto", height: height, bgcolor: iron[600], children: (0, jsx_runtime_1.jsxs)(material_1.Table, { stickyHeader: true, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "relative", overflow: "auto", height: height, bgcolor: iron[600], children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ref: tableRef, stickyHeader: true, sx: {
+                userSelect: "none",
                 borderCollapse: "separate",
                 borderSpacing: 0,
                 "& th, & td": {

package/packages/shared-components/dist/CellSelectionTable/hook/useOutsideClick.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from "react";
+export declare function isClickInsideAnyOverlay(event: MouseEvent): boolean;
+export declare function useOutsideClick<T extends HTMLElement>(ref: RefObject<T>, onOutsideClick: () => void): void;
+//# sourceMappingURL=useOutsideClick.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/hook/useOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/hook/useOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAWlD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAsBlE;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EACnD,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,cAAc,EAAE,MAAM,IAAI,QAyB3B"}

package/packages/shared-components/dist/CellSelectionTable/hook/useOutsideClick.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isClickInsideAnyOverlay = isClickInsideAnyOverlay;
+exports.useOutsideClick = useOutsideClick;
+const react_1 = require("react");
+const OVERLAY_ROLES = new Set([
+    "dialog",
+    "alertdialog",
+    "menu",
+    "listbox",
+    "tooltip",
+    "combobox",
+]);
+function isClickInsideAnyOverlay(event) {
+    const path = (event.composedPath ? event.composedPath() : []);
+    for (const node of path) {
+        if (!(node instanceof Element)) {
+            continue;
+        }
+        if (node.getAttribute("aria-modal") === "true") {
+            return true;
+        }
+        const role = node.getAttribute("role");
+        if (role && OVERLAY_ROLES.has(role)) {
+            return true;
+        }
+    }
+    return getComputedStyle(document.body).overflow === "hidden";
+}
+function useOutsideClick(ref, onOutsideClick) {
+    (0, react_1.useEffect)(() => {
+        const handleMouseDown = (event) => {
+            if (isClickInsideAnyOverlay(event)) {
+                return;
+            }
+            const target = event.target;
+            const el = ref.current;
+            if (el && el.contains(target)) {
+                return;
+            }
+            onOutsideClick();
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => {
+            document.removeEventListener("mousedown", handleMouseDown);
+        };
+    }, [ref, onOutsideClick]);
+}

package/packages/shared-components/dist/Dialog/DeleteDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DeleteDialog.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,4CA4BnB,CAAC"}
+{"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DeleteDialog.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,4CA4BnB,CAAC"}

package/packages/shared-components/dist/Dialog/DeleteDialog.js

@@ -9,7 +9,8 @@ const InfoTwoTone_1 = __importDefault(require("@mui/icons-material/InfoTwoTone")
 const material_1 = require("@mui/material");
 const Button_1 = require("../Button");
 const Dialog_1 = require("./Dialog");
+const Layouts_1 = require("../Layouts");
 const DeleteDialog = ({ title, open, isDeleteLoading, onDelete, onClose, }) => {
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "xs", isHideCloseIcon: true, isHideDividers: true, open: open, actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDelete, color: "error", loading: isDeleteLoading, children: "Delete" })] }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(InfoTwoTone_1.default, { color: "error", sx: { mt: "1px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", fontWeight: 700, children: title })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "xs", isHideCloseIcon: true, isHideDividers: true, open: open, actions: (0, jsx_runtime_1.jsxs)(Layouts_1.ButtonContainer, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDelete, color: "error", loading: isDeleteLoading, children: "Delete" })] }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(InfoTwoTone_1.default, { color: "error", sx: { mt: "1px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", fontWeight: 700, children: title })] }) }));
 };
 exports.DeleteDialog = DeleteDialog;

package/packages/shared-components/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,cAAc,GAAG;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kFAQpB,WAAW,4CA6Bb,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,cAAc,GAAG;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kFAQpB,WAAW,4CAuCb,CAAC"}

package/packages/shared-components/dist/Dialog/Dialog.js

@@ -7,8 +7,15 @@ exports.Dialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const HighlightOff_1 = __importDefault(require("@mui/icons-material/HighlightOff"));
 const material_1 = require("@mui/material");
-const PadBox_1 = require("../PadBox");
+const utils_1 = require("../utils");
+const DialogContent_Styled_1 = require("./DialogContent.Styled");
+const DialogActions_Styled_1 = require("./DialogActions.Styled");
 const Dialog = ({ title, isHideCloseIcon = false, isHideDividers = false, children, onClose, actions, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { fullWidth: true, ...props, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { textAlign: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", fontWeight: 500, flex: 1, children: title }), !isHideCloseIcon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: (event) => onClose && onClose(event, "escapeKeyDown"), color: "secondary", children: (0, jsx_runtime_1.jsx)(HighlightOff_1.default, { fontSize: "large" }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { dividers: !isHideDividers, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: children }) }), actions && ((0, jsx_runtime_1.jsx)(material_1.DialogActions, { sx: { py: "16px", px: "24px" }, children: actions }))] }));
+    const { layout } = (0, utils_1.useGetDeviceType)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { fullWidth: true, ...props, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { padding: {
+                    xs: "10px",
+                    sm: "16px 20px",
+                    md: "16px 24px",
+                }, textAlign: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", fontWeight: 500, flex: 1, children: title }), !isHideCloseIcon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: (event) => onClose && onClose(event, "escapeKeyDown"), color: "secondary", size: "small", children: (0, jsx_runtime_1.jsx)(HighlightOff_1.default, { fontSize: layout === "desktop" ? "large" : "medium" }) }))] }) }), (0, jsx_runtime_1.jsx)(DialogContent_Styled_1.StyledDialogContent, { dividers: !isHideDividers, children: children }), actions && (0, jsx_runtime_1.jsx)(DialogActions_Styled_1.StyledDialogActions, { children: actions })] }));
 };
 exports.Dialog = Dialog;

package/packages/shared-components/dist/Dialog/DialogActions.Styled.d.ts

@@ -0,0 +1,10 @@
+import type { DialogActionsProps } from "@mui/material/DialogActions";
+import { type Theme } from "@mui/material/styles";
+export declare const getDialogTheme: (theme: Theme) => {
+    [x: string]: string | {
+        padding: string;
+    };
+    padding: string;
+};
+export declare const StyledDialogActions: React.ComponentType<DialogActionsProps>;
+//# sourceMappingURL=DialogActions.Styled.d.ts.map

package/packages/shared-components/dist/Dialog/DialogActions.Styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.Styled.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogActions.Styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK;;;;;CAYzC,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAGnE,CAAC"}

package/packages/shared-components/dist/Dialog/DialogActions.Styled.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDialogActions = exports.getDialogTheme = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const getDialogTheme = (theme) => ({
+    padding: "16px 24px",
+    [theme.breakpoints.up("xs")]: {
+        padding: "10px",
+    },
+    [theme.breakpoints.up("sm")]: {
+        padding: "16px 20px",
+    },
+    [theme.breakpoints.up("md")]: {
+        padding: "16px 24px",
+    },
+});
+exports.getDialogTheme = getDialogTheme;
+exports.StyledDialogActions = (0, styles_1.styled)(material_1.DialogActions)(({ theme }) => ({
+    ...(0, exports.getDialogTheme)(theme),
+}));

package/packages/shared-components/dist/Dialog/DialogContent.Styled.d.ts

@@ -0,0 +1,3 @@
+import { type DialogContentProps } from "@mui/material";
+export declare const StyledDialogContent: React.ComponentType<DialogContentProps>;
+//# sourceMappingURL=DialogContent.Styled.d.ts.map

package/packages/shared-components/dist/Dialog/DialogContent.Styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.Styled.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogContent.Styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIvE,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAGnE,CAAC"}

package/packages/shared-components/dist/Dialog/DialogContent.Styled.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDialogContent = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const DialogActions_Styled_1 = require("./DialogActions.Styled");
+exports.StyledDialogContent = (0, styles_1.styled)(material_1.DialogContent)(({ theme }) => ({
+    ...(0, DialogActions_Styled_1.getDialogTheme)(theme),
+}));

package/packages/shared-components/dist/Dialog/SaveDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/SaveDialog.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kDAMxB,eAAe,4CA8BjB,CAAC"}
+{"version":3,"file":"SaveDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/SaveDialog.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kDAMxB,eAAe,4CA8BjB,CAAC"}

package/packages/shared-components/dist/Dialog/SaveDialog.js

@@ -8,10 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const InfoTwoTone_1 = __importDefault(require("@mui/icons-material/InfoTwoTone"));
 const material_1 = require("@mui/material");
 const Button_1 = require("../Button");
+const Layouts_1 = require("../Layouts");
 const Dialog_1 = require("./Dialog");
 const SaveDialog = ({ title, open, isSaveLoading = false, onSave, onClose, }) => {
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "xs", isHideCloseIcon: true, isHideDividers: true, open: open, actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, loading: isSaveLoading, children: "Save" })] }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(InfoTwoTone_1.default, { htmlColor: butterflyBlue[900], sx: { mt: "1px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", children: title })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "xs", isHideCloseIcon: true, isHideDividers: true, open: open, actions: (0, jsx_runtime_1.jsxs)(Layouts_1.ButtonContainer, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, loading: isSaveLoading, children: "Save" })] }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(InfoTwoTone_1.default, { htmlColor: butterflyBlue[900], sx: { mt: "1px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", children: title })] }) }));
 };
 exports.SaveDialog = SaveDialog;

package/packages/shared-components/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,uCAIpB,WAAW,4CAgCb,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,uCAIpB,WAAW,4CA2Db,CAAC"}

package/packages/shared-components/dist/Drawer/Drawer.js

@@ -12,6 +12,7 @@ const react_1 = require("react");
 const PadBox_1 = require("../PadBox");
 const AppLogoMedium_1 = require("../Svgs/AppLogo/AppLogoMedium");
 const AppLogoSmall_1 = require("../Svgs/AppLogo/AppLogoSmall");
+const useGetDeviceType_1 = require("../utils/hooks/useGetDeviceType");
 const CloseDrawerMenuItemList_1 = require("./CloseDrawer/CloseDrawerMenuItemList");
 const Drawer_styled_1 = require("./Drawer.styled");
 const OpenDrawerMenuItemList_1 = require("./OpenDrawer/OpenDrawerMenuItemList");
@@ -20,6 +21,8 @@ const Drawer = ({ menuItems = [], open, currentPathname, }) => {
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return ((0, jsx_runtime_1.jsxs)(Drawer_styled_1.StyledDrawer, { variant: "permanent", open: open, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingTop: "1.5rem" }, children: open ? (0, jsx_runtime_1.jsx)(AppLogoMedium_1.AppLogoMedium, {}) : (0, jsx_runtime_1.jsx)(AppLogoSmall_1.AppLogoSmall, {}) }) }), (0, jsx_runtime_1.jsx)(List_1.default, { component: "nav", onMouseLeave: handleClose, children: open ? ((0, jsx_runtime_1.jsx)(OpenDrawerMenuItemList_1.OpenDrawerMenuItemList, { menuItems: menuItems, currentPathname: currentPathname })) : ((0, jsx_runtime_1.jsx)(CloseDrawerMenuItemList_1.CloseDrawerMenuItemList, { menuItems: menuItems, currentPathname: currentPathname, anchorEl: anchorEl, setAnchorEl: setAnchorEl })) })] }));
+    const { layout } = (0, useGetDeviceType_1.useGetDeviceType)();
+    const isDesktop = layout === "desktop";
+    return ((0, jsx_runtime_1.jsxs)(Drawer_styled_1.StyledDrawer, { variant: "permanent", open: open, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { textAlign: "center", children: [isDesktop && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingTop: "1.5rem" }, children: open ? (0, jsx_runtime_1.jsx)(AppLogoMedium_1.AppLogoMedium, {}) : (0, jsx_runtime_1.jsx)(AppLogoSmall_1.AppLogoSmall, {}) })), !isDesktop && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingTop: "0.5rem", paddingBottom: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(AppLogoSmall_1.AppLogoSmall, {}) }))] }), isDesktop && ((0, jsx_runtime_1.jsx)(List_1.default, { component: "nav", onMouseLeave: handleClose, children: open ? ((0, jsx_runtime_1.jsx)(OpenDrawerMenuItemList_1.OpenDrawerMenuItemList, { menuItems: menuItems, currentPathname: currentPathname })) : ((0, jsx_runtime_1.jsx)(CloseDrawerMenuItemList_1.CloseDrawerMenuItemList, { menuItems: menuItems, currentPathname: currentPathname, anchorEl: anchorEl, setAnchorEl: setAnchorEl })) })), !isDesktop && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(List_1.default, { component: "nav", onMouseLeave: handleClose, children: (0, jsx_runtime_1.jsx)(CloseDrawerMenuItemList_1.CloseDrawerMenuItemList, { menuItems: menuItems, currentPathname: currentPathname, anchorEl: anchorEl, setAnchorEl: setAnchorEl }) }) }))] }));
 };
 exports.Drawer = Drawer;

package/packages/shared-components/dist/Drawer/Drawer.styled.d.ts

@@ -1,9 +1,9 @@
 import type { BoxProps, DrawerProps as MuiDrawerProps } from "@mui/material";
 import type { ComponentType } from "react";
 export declare const Bullet: ComponentType<BoxProps>;
-type StyledDrawerProps = {
+type StyledDrawerProps = MuiDrawerProps & {
     open?: boolean;
-} & MuiDrawerProps;
+};
 export declare const StyledDrawer: ComponentType<StyledDrawerProps>;
 export {};
 //# sourceMappingURL=Drawer.styled.d.ts.map

package/packages/shared-components/dist/Drawer/Drawer.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EAER,WAAW,IAAI,cAAc,EAE9B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,aAAa,CAAC,QAAQ,CAKxC,CAAC;AA2BJ,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,cAAc,CAAC;AACnB,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAkBvD,CAAC"}
+{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EAER,WAAW,IAAI,cAAc,EAE9B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,aAAa,CAAC,QAAQ,CAKxC,CAAC;AAEJ,KAAK,iBAAiB,GAAG,cAAc,GAAG;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAiDxD,CAAC"}

package/packages/shared-components/dist/Drawer/Drawer.styled.js

@@ -8,41 +8,46 @@ exports.Bullet = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
     borderRadius: "50%",
     background: theme.palette.app.color.butterflyBlue[400],
 }));
-const drawerWidth = 300;
-const openedMixin = (theme) => ({
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-    }),
-    overflowX: "hidden",
-    backgroundColor: theme.palette.app.color.mirage[900],
-});
-const closedMixin = (theme) => ({
-    transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    overflowX: "hidden",
-    width: "80px",
-    [theme.breakpoints.up("sm")]: {
-        width: "80px",
-    },
-    backgroundColor: theme.palette.app.color.mirage[900],
-});
 exports.StyledDrawer = (0, material_1.styled)(material_1.Drawer, {
     shouldForwardProp: (prop) => prop !== "open",
-})(({ theme, open }) => ({
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: "nowrap",
-    boxSizing: "border-box",
-    ...(open && {
-        ...openedMixin(theme),
-        "& .MuiDrawer-paper": openedMixin(theme),
-    }),
-    ...(!open && {
-        ...closedMixin(theme),
-        "& .MuiDrawer-paper": closedMixin(theme),
-    }),
-}));
+})(({ theme, open }) => {
+    const drawerWidth = 300;
+    const openedMixin = (theme) => ({
+        width: drawerWidth,
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        overflowX: "hidden",
+        backgroundColor: theme.palette.app.color.mirage[900],
+        [theme.breakpoints.down("md")]: {
+            width: "80px",
+        },
+    });
+    const closedMixin = (theme) => ({
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: "hidden",
+        width: "0px",
+        [theme.breakpoints.up("md")]: {
+            width: "80px",
+        },
+        backgroundColor: theme.palette.app.color.mirage[900],
+    });
+    return {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+        boxSizing: "border-box",
+        ...(open && {
+            ...openedMixin(theme),
+            "& .MuiDrawer-paper": openedMixin(theme),
+        }),
+        ...(!open && {
+            ...closedMixin(theme),
+            "& .MuiDrawer-paper": closedMixin(theme),
+        }),
+    };
+});