@codezee/sixtify-brahma 0.2.80 → 0.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.80",
+  "version": "0.2.82",
   "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/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),
+        }),
+    };
+});

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts

@@ -28,6 +28,7 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     }) => JSX.Element;
     getOptionLabel?: (option: string) => string;
     defaultOption?: AutocompleteValue<Option, boolean, boolean, boolean>;
+    disableClearable?: boolean;
 };
-export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, defaultOption, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, defaultOption, disableClearable, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,IAAI,oBAAoB,EAC1C,MAAM,eAAe,CAAC;AAmBvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAOzB,MAAM,MAAM,MAAM,GAAG;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACvD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;CACtE,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,kBAA0B,EAC1B,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAkYtB"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,IAAI,oBAAoB,EAC1C,MAAM,eAAe,CAAC;AAmBvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAOzB,MAAM,MAAM,MAAM,GAAG;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACvD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,kBAA0B,EAC1B,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,aAAa,EACb,gBAA0C,EAC1C,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAmYtB"}

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ const Actions_1 = require("../../Actions");
 const Toast_1 = require("../../Toast");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const Skeleton_1 = require("./Skeleton");
-function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, defaultOption, ...restProps }) {
+function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, defaultOption, disableClearable = required ? true : false, ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -119,7 +119,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                     highlightedOptionRef.current = option.value;
                                 }
                             }
-                        }, disableCloseOnSelect: shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restProps, ...restField, renderTags: (value, getTagProps) => value.map((option, index) => {
+                        }, disableCloseOnSelect: shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restProps, ...restField, disableClearable: disableClearable, renderTags: (value, getTagProps) => value.map((option, index) => {
                             const { key, ...tagProps } = getTagProps({ index });
                             const label = typeof option === "string" ? option : option.label;
                             let avatarContent = "";

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,KAAgC,EAChC,MAAqC,EACrC,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAgLpB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,KAAgC,EAChC,MAAqC,EACrC,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA8LpB"}

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.js

@@ -40,7 +40,7 @@ const RightArrowIcon = () => {
         } }));
 };
 exports.RightArrowIcon = RightArrowIcon;
-function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = true, rules, disableKeyboardInput = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, ...restProps }) {
+function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, disableKeyboardInput = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, ...restProps }) {
     const [localError, setLocalError] = (0, react_1.useState)();
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -111,12 +111,18 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                                 color: butterflyBlue[900],
                                 backgroundColor: iron[600],
                             },
+                            "&.MuiPickersDay-root:not(.Mui-selected):hover": {
+                                color: butterflyBlue[900],
+                            },
                         },
                     },
                     calendarHeader: {
                         sx: {
                             "& .MuiPickersCalendarHeader-label": {
-                                fontWeight: "bold",
+                                fontWeight: "500",
+                                "&:hover": {
+                                    color: butterflyBlue[900],
+                                },
                             },
                         },
                     },
@@ -124,6 +130,10 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                         sx: {
                             "&.MuiPickersYear-yearButton.Mui-selected": {
                                 backgroundColor: butterflyBlue[900],
+                                color: iron[600],
+                            },
+                            "&.MuiPickersYear-yearButton:not(.Mui-selected):hover": {
+                                color: butterflyBlue[900],
                             },
                         },
                     },
@@ -131,6 +141,10 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                         sx: {
                             "&.MuiPickersMonth-monthButton.Mui-selected": {
                                 backgroundColor: butterflyBlue[900],
+                                color: iron[600],
+                            },
+                            "&.MuiPickersMonth-monthButton:not(.Mui-selected):hover": {
+                                color: butterflyBlue[900],
                             },
                         },
                     },

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC,CAAC;AAkCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAgB,EAChB,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAqKxB"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAgLxB"}

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js

@@ -14,6 +14,11 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const Actions_1 = require("../../Actions");
 const Skeleton_1 = require("./Skeleton");
+const hoverTextStyle = (color) => ({
+    "&:hover": {
+        color,
+    },
+});
 const LeftArrowIcon = () => {
     const theme = (0, material_1.useTheme)();
     const { iron } = theme.palette.app.color;
@@ -32,7 +37,7 @@ const RightArrowIcon = () => {
             p: "4px",
         } }));
 };
-function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, ...restProps }) {
+function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
     if (error && value && typeof value === "object") {
@@ -41,8 +46,7 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
     const theme = (0, material_1.useTheme)();
     const { iron, butterflyBlue, mirage } = theme.palette.app.color;
     const pickerValue = value
-        ? // eslint-disable-next-line sonarjs/no-nested-conditional
-            luxon_1.DateTime.fromISO(value)
+        ? luxon_1.DateTime.fromISO(value)
         : null;
     if (loading) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label }) }));
@@ -77,23 +81,27 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                             "& .MuiList-padding": {
                                 padding: "10px",
                             },
+                            "& .MuiMultiSectionDigitalClockSection-item:not(.Mui-selected)": {
+                                padding: "4px",
+                                ...hoverTextStyle(butterflyBlue[900]),
+                            },
                             "& .MuiMultiSectionDigitalClockSection-item": {
                                 padding: "4px",
                             },
                             "& .MuiMultiSectionDigitalClockSection-item.Mui-selected": {
                                 backgroundColor: butterflyBlue[900],
                                 borderRadius: "5px",
-                            },
-                            "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:hover": {
-                                backgroundColor: butterflyBlue[900],
-                                borderRadius: "5px",
+                                "&:hover": {
+                                    backgroundColor: butterflyBlue[900],
+                                    color: iron[600],
+                                },
                             },
                             "& .Mui-selected:hover": {
                                 backgroundColor: butterflyBlue[900],
                                 borderRadius: "5px",
                             },
                             "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:focus-visible": {
-                                backgroundColor: butterflyBlue[900],
+                                backgroundColor: `${butterflyBlue[900]} !important`,
                                 borderRadius: "5px",
                             },
                             "& .Mui-selected:focus-visible": {
@@ -114,6 +122,9 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                                 backgroundColor: butterflyBlue[900],
                                 color: iron[600],
                             },
+                            "&.MuiPickersDay-root:not(.Mui-selected)": {
+                                ...hoverTextStyle(butterflyBlue[900]),
+                            },
                             "&.MuiPickersDay-today": {
                                 color: butterflyBlue[900],
                                 backgroundColor: iron[600],
@@ -126,7 +137,8 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                     calendarHeader: {
                         sx: {
                             "& .MuiPickersCalendarHeader-label": {
-                                fontWeight: "bold",
+                                fontWeight: "500",
+                                ...hoverTextStyle(butterflyBlue[900]),
                             },
                         },
                     },
@@ -134,6 +146,11 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         sx: {
                             "&.MuiPickersYear-yearButton.Mui-selected": {
                                 backgroundColor: butterflyBlue[900],
+                                borderRadius: "25px",
+                            },
+                            "&.MuiPickersYear-yearButton:not(.Mui-selected)": {
+                                ...hoverTextStyle(butterflyBlue[900]),
+                                borderRadius: "25px",
                             },
                         },
                     },

package/packages/shared-components/dist/Layouts/ButtonContainer.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+type ButtonContainerProps = PropsWithChildren & {
+    columns?: number;
+    columnsOnMobile?: number;
+};
+export declare const ButtonContainer: ({ columns, columnsOnMobile, children, }: ButtonContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonContainer.d.ts.map

package/packages/shared-components/dist/Layouts/ButtonContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../src/Layouts/ButtonContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,KAAK,oBAAoB,GAAG,iBAAiB,GAAG;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,yCAI7B,oBAAoB,4CAYtB,CAAC"}

package/packages/shared-components/dist/Layouts/ButtonContainer.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const useGetDeviceType_1 = require("../utils/hooks/useGetDeviceType");
+const FormGridLayout_1 = require("./FormGridLayout");
+const ButtonContainer = ({ columns = 2, columnsOnMobile = 2, children, }) => {
+    const { layout } = (0, useGetDeviceType_1.useGetDeviceType)();
+    return layout === "mobile" ? ((0, jsx_runtime_1.jsx)(FormGridLayout_1.FormGridLayout, { columnsOnMobile: columnsOnMobile, columns: columns, children: children })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", children: children }));
+};
+exports.ButtonContainer = ButtonContainer;

package/packages/shared-components/dist/Layouts/FormGridLayout.d.ts

@@ -2,7 +2,8 @@ import { type ReactNode } from "react";
 type FormGridLayoutProps = {
     children: ReactNode;
     columns?: number;
+    columnsOnMobile?: number;
 };
-export declare const FormGridLayout: ({ children, columns, }: FormGridLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormGridLayout: ({ children, columns, columnsOnMobile, }: FormGridLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormGridLayout.d.ts.map

package/packages/shared-components/dist/Layouts/FormGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormGridLayout.d.ts","sourceRoot":"","sources":["../../src/Layouts/FormGridLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,wBAG5B,mBAAmB,4CAerB,CAAC"}
+{"version":3,"file":"FormGridLayout.d.ts","sourceRoot":"","sources":["../../src/Layouts/FormGridLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,yCAI5B,mBAAmB,4CA+BrB,CAAC"}

package/packages/shared-components/dist/Layouts/FormGridLayout.js

@@ -4,9 +4,15 @@ exports.FormGridLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const FormGridLayout = ({ children, columns = 3, }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, children: react_1.Children.map(children, (child, index) => child && (
+const FormGridLayout = ({ children, columns = 3, columnsOnMobile = 1, }) => {
+    const validColumns = columns ? columns : 3;
+    const validColumnsOnMobile = columnsOnMobile ? columnsOnMobile : 1;
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, rowSpacing: 1, children: react_1.Children.map(children, (child, index) => child && ((0, jsx_runtime_1.jsx)(material_1.Grid
         // eslint-disable-next-line sonarjs/no-array-index-key
-        (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12 / columns, children: child }, index))) }));
+        , { sx: {
+                "& > *": {
+                    width: { xs: "100%", sm: "auto" },
+                },
+            }, item: true, xs: 12 / validColumnsOnMobile, sm: 12 / Math.min(validColumns, 2), md: 12 / Math.min(validColumns, 3), lg: 12 / validColumns, children: child }, index))) }));
 };
 exports.FormGridLayout = FormGridLayout;

package/packages/shared-components/dist/Layouts/MasterPageLayout.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { DialogTypes } from "../utils";
+type MasterPageLayoutProps = {
+    breadcrumbs: ReactNode;
+    btnLabel?: string;
+    dialogKey: DialogTypes;
+    dialogRenderer?: Record<string, ReactNode>;
+    list: ReactNode;
+    onDialogOpen: (key: DialogTypes) => void;
+    openedDialog?: DialogTypes;
+    title: string;
+};
+export declare const MasterPageLayout: ({ breadcrumbs, btnLabel, dialogKey, dialogRenderer, list, onDialogOpen, openedDialog, title, }: MasterPageLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MasterPageLayout.d.ts.map

package/packages/shared-components/dist/Layouts/MasterPageLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterPageLayout.d.ts","sourceRoot":"","sources":["../../src/Layouts/MasterPageLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,qBAAqB,GAAG;IAC3B,WAAW,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,WAAW,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,gGAS9B,qBAAqB,4CAsDvB,CAAC"}

package/packages/shared-components/dist/Layouts/MasterPageLayout.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasterPageLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const Button_1 = require("../Button");
+const ContentBox_1 = require("../ContentBox");
+const PadBox_1 = require("../PadBox");
+const useGetDeviceType_1 = require("../utils/hooks/useGetDeviceType");
+const MasterPageLayout = ({ breadcrumbs, btnLabel, dialogKey = "add", dialogRenderer, list, onDialogOpen, openedDialog, title, }) => {
+    const { layout } = (0, useGetDeviceType_1.useGetDeviceType)();
+    const isMobile = layout === "mobile";
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: isMobile ? "6px" : "10px", children: [breadcrumbs, (0, jsx_runtime_1.jsxs)(ContentBox_1.ContentBox, { children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: isMobile ? "6px" : "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", children: title }), isMobile ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", onClick: () => {
+                                        onDialogOpen(dialogKey);
+                                    }, sx: {
+                                        borderRadius: "6px",
+                                        height: "36px",
+                                        minWidth: "36px",
+                                        padding: 0,
+                                        width: "36px",
+                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Add, { fontSize: "small" }) })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", onClick: () => {
+                                        onDialogOpen(dialogKey);
+                                    }, startIcon: (0, jsx_runtime_1.jsx)(icons_material_1.Add, {}), children: btnLabel }))] }) }), list] }), dialogRenderer && openedDialog && dialogRenderer[openedDialog]] }));
+};
+exports.MasterPageLayout = MasterPageLayout;

package/packages/shared-components/dist/Layouts/index.d.ts

@@ -3,4 +3,6 @@ export * from "./FormGridLayout";
 export * from "./FormRow";
 export * from "./FormSection";
 export * from "./FilePreviewContainer";
+export * from "./ButtonContainer";
+export * from "./MasterPageLayout";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/packages/shared-components/dist/Layouts/index.js

@@ -19,3 +19,5 @@ __exportStar(require("./FormGridLayout"), exports);
 __exportStar(require("./FormRow"), exports);
 __exportStar(require("./FormSection"), exports);
 __exportStar(require("./FilePreviewContainer"), exports);
+__exportStar(require("./ButtonContainer"), exports);
+__exportStar(require("./MasterPageLayout"), exports);

package/packages/shared-components/dist/Tab/Tabs.d.ts

@@ -1,5 +1,5 @@
 import type { TabOwnProps } from "@mui/material/Tab";
-import type { ReactElement } from "react";
+import type { MouseEvent, ReactElement } from "react";
 export type TabsItems = {
     value: string;
     label: string;
@@ -7,7 +7,8 @@ export type TabsItems = {
     toolTipLabel?: string;
     iconPosition?: TabOwnProps["iconPosition"];
     isView?: boolean;
-    onClick: () => void;
+    onClick: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
 };
 type TabsProps = {
     tabs: TabsItems[];

package/packages/shared-components/dist/Tab/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tab/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,0BAA0B,SAAS,4CAoCvD,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tab/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,0BAA0B,SAAS,4CAoCvD,CAAC"}

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

@@ -23,7 +23,7 @@ function UserProfileMenu({ userDetails, menuItems, }) {
         setAnchorEl(null);
     };
     const { name } = userDetails;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center", textAlign: "center" }, children: (0, jsx_runtime_1.jsx)(UserProfileMenu_styled_1.IconButtonStyled, { onClick: handleClick, size: "small", sx: { ml: 2 }, "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, color: "black", children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: userDetails.avatar, sx: { border: `1px solid ${iron[700]}` } }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: name, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { width: 150, noWrap: true, children: name }) }), open ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowUp, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowDown, {})] }) }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center", textAlign: "center" }, children: (0, jsx_runtime_1.jsx)(UserProfileMenu_styled_1.IconButtonStyled, { onClick: handleClick, size: "small", sx: { ml: 2 }, "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, color: "black", children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: userDetails.avatar, sx: { border: `1px solid ${iron[700]}` } }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: name, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: 150, noWrap: true, children: name }) }), open ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowUp, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowDown, {})] }) }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, sx: {
                     "& .MuiPaper-root": {
                         width: "220px",
                     },

package/packages/shared-components/dist/utils/hooks/useDialogActions.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export type DialogTypes = "add" | "edit" | "delete" | "viewAttachment" | "deleteTemplate" | "editTemplate" | "addTemplate";
+export type DialogTypes = "add" | "edit" | "delete" | "viewAttachment" | "deleteTemplate" | "editTemplate" | "addTemplate" | "addDepartment" | "addWorkType" | "addSubDepartment" | "addDocument" | "addGrade" | "addSkillType" | "addDesignation" | "cancel" | "saveAsDraft" | "history" | "view" | "action" | "updateShift" | "updateWeeklyOff" | "updateHoliday" | "configureLeave" | "approve" | "reject" | "cancelled" | "formulaBuilderDialog" | "revise" | "manageEmployeeAccess" | "saveTemplate" | "confirm" | "reset" | "addExistingEmployee" | "reviewAllEmployees" | "eligibleEmployees" | "saveAsDefault" | "bankRegister" | "applyLeave" | "providentFundReport" | "esicReport" | "professionalTaxReport" | "incomeTaxReport" | "lwfReport" | "approveOvertime" | "rejectOvertime" | "approveExit" | "rejectExit" | "approveLoan" | "rejectLoan" | "approveSalary" | "rejectSalary" | "approveBulkLeave" | "rejectBulkLeave" | "approveBulkOvertime" | "rejectBulkOvertime";
 export type DialogRenderer = {
     [key in DialogTypes]?: ReactNode;
 };

package/packages/shared-components/dist/utils/hooks/useDialogActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogActions.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useDialogActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,WAAW,GACnB,KAAK,GACL,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG;KAAG,GAAG,IAAI,WAAW,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,gBAAgB;;gCAGK,WAAW;;EAU/C"}
+{"version":3,"file":"useDialogActions.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useDialogActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,WAAW,GACnB,KAAK,GACL,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,UAAU,GACV,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,aAAa,GACb,SAAS,GACT,MAAM,GACN,QAAQ,GACR,aAAa,GACb,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,WAAW,GACX,sBAAsB,GACtB,QAAQ,GACR,sBAAsB,GACtB,cAAc,GACd,SAAS,GACT,OAAO,GACP,qBAAqB,GACrB,oBAAoB,GACpB,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,YAAY,GACZ,qBAAqB,GACrB,YAAY,GACZ,uBAAuB,GACvB,iBAAiB,GACjB,WAAW,GACX,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GACb,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,eAAe,GACf,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,qBAAqB,GACrB,oBAAoB,CAAC;AAEzB,MAAM,MAAM,cAAc,GAAG;KAAG,GAAG,IAAI,WAAW,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,gBAAgB;;gCAGK,WAAW;;EAU/C"}

package/packages/shared-components/dist/utils/hooks/useGetDeviceType.d.ts

@@ -0,0 +1,5 @@
+export type Layout = "mobile" | "tablet" | "desktop";
+export declare function useGetDeviceType(): {
+    layout: Layout;
+};
+//# sourceMappingURL=useGetDeviceType.d.ts.map

package/packages/shared-components/dist/utils/hooks/useGetDeviceType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetDeviceType.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useGetDeviceType.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,IAAI;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAgBrD"}

package/packages/shared-components/dist/utils/hooks/useGetDeviceType.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetDeviceType = useGetDeviceType;
+const styles_1 = require("@mui/material/styles");
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
+function useGetDeviceType() {
+    const theme = (0, styles_1.useTheme)();
+    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down("sm")); // <600px
+    const isTablet = (0, useMediaQuery_1.default)(theme.breakpoints.between("sm", "md")); // 600–900px
+    if (isMobile) {
+        return { layout: "mobile" };
+    }
+    if (isTablet) {
+        return { layout: "tablet" };
+    }
+    return { layout: "desktop" };
+}

package/packages/shared-components/dist/utils/index.d.ts

@@ -7,4 +7,5 @@ export * from "./regex";
 export * from "./theme/colorPaletteUI";
 export * from "./theme/theme";
 export * from "./urlToNestedObject";
+export * from "./hooks/useGetDeviceType";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}

package/packages/shared-components/dist/utils/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./regex"), exports);
 __exportStar(require("./theme/colorPaletteUI"), exports);
 __exportStar(require("./theme/theme"), exports);
 __exportStar(require("./urlToNestedObject"), exports);
+__exportStar(require("./hooks/useGetDeviceType"), exports);

package/packages/shared-components/dist/utils/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/utils/theme/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,OAAO,EACR,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG,MAAM,+BAA+B,CAAC;AAC/D,KAAK,wBAAwB,GAAG;KAC7B,CAAC,IAAI,iBAAiB,GAAG,+BAA+B,CAAC,CAAC,CAAC,SAAS,IAAI,GACrE,CAAC,GACD,KAAK;CACV,CAAC,iBAAiB,CAAC,CAAC;AAErB,eAAO,MAAM,0BAA0B,EAAE,gBAGxC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CACrC,MAAM,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAaxC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAC3C,wBAAwB,EACxB,MAAM,CAQP,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,iBAGpC,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/utils/theme/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,OAAO,EACR,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG,MAAM,+BAA+B,CAAC;AAC/D,KAAK,wBAAwB,GAAG;KAC7B,CAAC,IAAI,iBAAiB,GAAG,+BAA+B,CAAC,CAAC,CAAC,SAAS,IAAI,GACrE,CAAC,GACD,KAAK;CACV,CAAC,iBAAiB,CAAC,CAAC;AAErB,eAAO,MAAM,0BAA0B,EAAE,gBAGxC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CACrC,MAAM,CAAC,OAAO,EAAE,sBAAsB,CAAC,CA8CxC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAC3C,wBAAwB,EACxB,MAAM,CAQP,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,iBAGpC,CAAC"}

package/packages/shared-components/dist/utils/theme/typography.js

@@ -6,17 +6,50 @@ exports.typographyFontStyleOptions = {
     fontFamily: "Poppins",
 };
 exports.typographyOptions = {
-    h1: { fontSize: "96px", lineHeight: "112px" },
-    h2: { fontSize: "60px", lineHeight: "72px" },
-    h3: { fontSize: "48px", lineHeight: "56px" },
-    h4: { fontSize: "36px", lineHeight: "42px" },
-    h5: { fontSize: "24px", lineHeight: "24px" },
-    h6: { fontSize: "20px", lineHeight: "24px" },
-    subtitle1: { fontSize: "18px", lineHeight: "24px" },
-    subtitle2: { fontSize: "14px", lineHeight: "24px" },
-    body1: { fontSize: "16px", lineHeight: "24px" },
-    body2: { fontSize: "14px", lineHeight: "20px" },
-    caption: { fontSize: "12px", lineHeight: "16px" },
+    h1: {
+        fontSize: "clamp(2.5rem, 5vw, 6rem)",
+        lineHeight: "clamp(3rem, 6vw, 7rem)",
+    },
+    h2: {
+        fontSize: "clamp(2rem, 4vw, 3.75rem)",
+        lineHeight: "clamp(2.5rem, 5vw, 4.5rem)",
+    },
+    h3: {
+        fontSize: "clamp(1.75rem, 3.5vw, 3rem)",
+        lineHeight: "clamp(2.25rem, 4vw, 3.5rem)",
+    },
+    h4: {
+        fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+        lineHeight: "clamp(1.75rem, 3.5vw, 2.625rem)",
+    },
+    h5: {
+        fontSize: "clamp(1.25rem, 2.5vw, 1.5rem)",
+        lineHeight: "clamp(1.5rem, 3vw, 1.5rem)",
+    },
+    h6: {
+        fontSize: "clamp(1.125rem, 2vw, 1.25rem)",
+        lineHeight: "clamp(1.5rem, 2.5vw, 1.5rem)",
+    },
+    subtitle1: {
+        fontSize: "clamp(1rem, 1.5vw, 1.125rem)",
+        lineHeight: "clamp(1.5rem, 2vw, 1.5rem)",
+    },
+    subtitle2: {
+        fontSize: "clamp(0.875rem, 1.2vw, 0.875rem)",
+        lineHeight: "clamp(1.25rem, 2vw, 1.5rem)",
+    },
+    body1: {
+        fontSize: "clamp(0.875rem, 1.2vw, 1rem)",
+        lineHeight: "clamp(1.25rem, 2vw, 1.5rem)",
+    },
+    body2: {
+        fontSize: "clamp(0.75rem, 1vw, 0.875rem)",
+        lineHeight: "clamp(1rem, 1.5vw, 1.25rem)",
+    },
+    caption: {
+        fontSize: "clamp(0.625rem, 0.8vw, 0.75rem)",
+        lineHeight: "clamp(0.875rem, 1vw, 1rem)",
+    },
 };
 exports.typographyVariantMapping = {
     subHeader1: "p",