componentes-sinco 1.1.10 → 1.1.11

package/dist/index.cjs

@@ -98,6 +98,7 @@ __export(index_exports, {
   SCCard: () => SCCard,
   SCDataGrid: () => SCDataGrid,
   SCDataGridInitial: () => SCDataGridInitial,
+  SCDatePicker: () => SCDatePicker,
   SCDateRange: () => SCDateRange,
   SCDialog: () => SCDialog,
   SCDrawer: () => SCDrawer,
@@ -2305,7 +2306,7 @@ var DrawerActions = ({ actions, anchor }) => {
       sx: { borderTop: 1, borderColor: "#1018403B", zIndex: 1500 },
       container: true,
       gap: 2,
-      padding: "8px 12px",
+      padding: "8px 16px",
       height: "42px",
       alignItems: "center",
       flexWrap: "nowrap",
@@ -2466,6 +2467,11 @@ function SCDrawer({
       onOpen: toggleDrawer(true),
       anchor: "bottom",
       swipeAreaWidth: drawerBleeding,
+      transitionDuration: { enter: 500, exit: 400 },
+      ModalProps: {
+        BackdropProps: { timeout: 400 }
+      },
+      hysteresis: 0.2,
       sx: {
         zIndex: 1400,
         "& .MuiDrawer-paper": {
@@ -2474,6 +2480,11 @@ function SCDrawer({
           boxSizing: "border-box",
           borderRadius: "4px 4px 0px 0px"
         }
+      },
+      slotProps: {
+        backdrop: {
+          sx: { backgroundColor: "#00000038" }
+        }
       }
     },
     /* @__PURE__ */ import_react20.default.createElement(
@@ -2498,7 +2509,33 @@ function SCDrawer({
         onClose: handleDrawerClose,
         anchor
       }
-    ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(DrawerActions, { actions: drawerActions, anchor }))
+    ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(
+      import_Grid4.default,
+      {
+        sx: { zIndex: 1500 },
+        container: true,
+        gap: 2,
+        padding: "8px 16px 40px 16px",
+        height: "86px",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        justifyContent: Array.isArray(drawerActions) && drawerActions.length > 1 ? "space-between" : "flex-end",
+        flexDirection: "row-reverse"
+      },
+      Array.isArray(drawerActions) && drawerActions.map((btn, index) => /* @__PURE__ */ import_react20.default.createElement(
+        import_material14.Button,
+        {
+          key: index,
+          variant: index === 0 || drawerActions.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: btn.fn,
+          disabled: btn.disabled || false,
+          size: "small",
+          fullWidth: anchor === "bottom" ? true : false
+        },
+        btn.text
+      ))
+    ))
   ));
 }
 
@@ -2613,7 +2650,7 @@ function MultiSelect({
   selectAll = false,
   getItemLabel
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     anchorEl,
     open: openMultiselect,
@@ -2660,7 +2697,7 @@ function MultiSelect({
       startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react24.default.createElement(Icon, null) : null,
       endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react24.default.createElement(Icon, null) : null
     },
-    capitalize(textButton != null ? textButton : "MultiSelect")
+    capitalize((_c = button == null ? void 0 : button.text) != null ? _c : "")
   ), /* @__PURE__ */ import_react24.default.createElement(
     import_material16.Popover,
     {
@@ -2796,7 +2833,7 @@ var SCCalendarSwipeable = ({
       // 0 = domingo, 1 = lunes
     })
   });
-  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "100%", padding: "0px 16px", background: "transparent" } }, /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react26.default.createElement(import_material18.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react26.default.createElement(
     import_material18.Box,
     {
       onClick: () => setFecha(dia),
@@ -2820,7 +2857,22 @@ var SCCalendarSwipeable = ({
       openTo: "day",
       value: fecha,
       slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
-      sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
+      sx: {
+        "& .MuiDateCalendar-root": {
+          width: "100%",
+          maxWidth: "unset",
+          margin: 0,
+          padding: "0px 16px"
+        },
+        fontSize: "12px !important",
+        height: "260px !important",
+        background: background ? background : "white",
+        "& .MuiDayCalendar-header": { justifyContent: "space-between" },
+        "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" },
+        "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" },
+        "& .MuiPickersDay-root": { fontSize: "12px !important" },
+        "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" }
+      },
       onChange: (newValue) => setFecha(newValue)
     }
   ), /* @__PURE__ */ import_react26.default.createElement(import_Grid5.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react26.default.createElement(import_material18.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react26.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
@@ -2833,7 +2885,7 @@ var import_x_license2 = require("@mui/x-license");
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"), 1);
 var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"), 1);
 var import_styles = require("@mui/material/styles");
-function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) {
+function SCDataGridInitial({ data, columns, getRowId, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) {
   import_x_license2.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
@@ -3065,6 +3117,7 @@ function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSel
   return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, data && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react27.default.createElement(
     import_x_data_grid_pro.DataGridPro,
     {
+      getRowId,
       apiRef,
       rowHeight: styleRowHeight,
       rows: arrayRows,
@@ -3392,7 +3445,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : "")),
+    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, typeView == "web" ? /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")) : /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : ""), typeView == "mobile" ? /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { sx: { display: "flex", flexDirection: "column", padding: "12px 0px 4px 0px" }, gap: 1.5 }, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h5" }, title ? title : ""), subtitle ? subtitle : "") : ""),
     /* @__PURE__ */ import_react33.default.createElement(
       import_material20.DialogContent,
       {
@@ -3505,14 +3558,14 @@ var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" })
       }
     }
   });
-  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => {
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => {
     var _a, _b;
     return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, { key: index }, /* @__PURE__ */ import_react34.default.createElement(
       import_material21.ListItemButton,
       {
         disabled: option.disable,
         onClick: option.fn,
-        sx: { gap: 1 }
+        sx: { gap: 1, padding: iconLeftType == "Icon" ? "8px 8px" : "8px 8px 8px 0px" }
       },
       option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", sx: { color: option.iconLeftColor || "action" }, component: option.iconLeft })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, { sx: { width: 25, height: 25, fontSize: "11px", bgcolor: option.iconLeftColor ? `${option.iconLeftColor}.main` : "default" } }, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", component: option.iconLeft }) : option.iconLeft) : "",
       /* @__PURE__ */ import_react34.default.createElement(
@@ -4863,7 +4916,7 @@ var SCActivityCalendar = ({
       // 0 = domingo, 1 = lunes
     })
   });
-  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", padding: "0px 16px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       onClick: () => setFecha(dia),
@@ -4884,10 +4937,25 @@ var SCActivityCalendar = ({
       openTo: "day",
       value: fecha,
       slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
-      sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
+      sx: {
+        "& .MuiDateCalendar-root": {
+          width: "100%",
+          maxWidth: "unset",
+          margin: 0,
+          padding: "0px 16px"
+        },
+        fontSize: "12px !important",
+        height: "260px !important",
+        background: background ? background : "white",
+        "& .MuiDayCalendar-header": { justifyContent: "space-between" },
+        "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" },
+        "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" },
+        "& .MuiPickersDay-root": { fontSize: "12px !important" },
+        "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" }
+      },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 300px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       key: dayIndex
@@ -4998,6 +5066,7 @@ var import_system = require("@mui/system");
 var import_icons_material13 = require("@mui/icons-material");
 var import_PhotoCamera = __toESM(require("@mui/icons-material/PhotoCamera"), 1);
 var import_CancelOutlined = __toESM(require("@mui/icons-material/CancelOutlined"), 1);
+var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"), 1);
 var AttachmentMobile = ({
   buttonAttachment,
   maxSize = 400,
@@ -5163,7 +5232,7 @@ var AttachmentMobile = ({
     }
   });
   const AttachtmentActions = [
-    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "primary" }), color: "primary", label: "Galer\xEDa", onClick: () => {
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_ImageOutlined.default, { type: "file", color: "primary" }), color: "primary", label: "Galer\xEDa", onClick: () => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.click();
     } },
@@ -5188,14 +5257,22 @@ var AttachmentMobile = ({
   )), /* @__PURE__ */ import_react52.default.createElement(import_CssBaseline.default, null), /* @__PURE__ */ import_react52.default.createElement(
     import_material36.SwipeableDrawer,
     {
+      slotProps: {
+        backdrop: {
+          sx: { backgroundColor: "#00000038" }
+        }
+      },
       ModalProps: {
         sx: {
           zIndex: 1400,
           "& .MuiPaper-root": {
             borderRadius: "16px 16px 0 0"
           }
-        }
+        },
+        BackdropProps: { timeout: 400 }
       },
+      transitionDuration: { enter: 500, exit: 400 },
+      hysteresis: 0.2,
       anchor: "bottom",
       swipeAreaWidth: 56,
       open,
@@ -5203,7 +5280,7 @@ var AttachmentMobile = ({
       onOpen: toggleAttachment(true)
     },
     toast && /* @__PURE__ */ import_react52.default.createElement(SCToastNotification, __spreadValues({}, toast)),
-    /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", alignItems: "center", p: 2, gap: 2 }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", gap: 1, p: 1 }, /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "h6", color: "text.primary" }, "Agregar adjuntos"), /* @__PURE__ */ import_react52.default.createElement(import_material36.IconButton, { size: "medium", onClick: toggleAttachment(false) }, /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.CloseOutlined, { color: "action" }))), /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", alignItems: "center", p: 2, gap: 2 }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", gap: 1, p: 1 }, /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "h6", color: "text.primary" }, "Agrega adjuntos"), /* @__PURE__ */ import_react52.default.createElement(import_material36.IconButton, { size: "medium", onClick: toggleAttachment(false) }, /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.CloseOutlined, { color: "action" }))), /* @__PURE__ */ import_react52.default.createElement(
       "input",
       {
         type: "file",
@@ -5212,22 +5289,21 @@ var AttachmentMobile = ({
         ref: inputRef,
         onChange: handleUpload
       }
-    ), /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", justifyContent: "space-around", alignItems: "center", width: "100%", gap: 2 }, AttachtmentActions.map((option, index) => /* @__PURE__ */ import_react52.default.createElement(
+    ), /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", justifyContent: "space-around", alignItems: "center", width: "100%", gap: 2, sx: { padding: "0px 0px 52px 0px !important" } }, AttachtmentActions.map((option, index) => /* @__PURE__ */ import_react52.default.createElement(
       import_system.Box,
       {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        width: 100,
+        width: "100%",
         height: 80,
         borderRadius: 1,
-        bgcolor: "grey.100",
+        bgcolor: "grey.50",
         border: "1px solid",
-        borderColor: "grey.50",
-        boxShadow: 1,
+        borderColor: "grey.100",
         justifyContent: "center",
         p: 1,
-        gap: 1,
+        gap: 0.5,
         onClick: option.onClick,
         sx: {
           cursor: "pointer"
@@ -5243,7 +5319,7 @@ var AttachmentMobile = ({
         },
         option.icon
       ),
-      /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "body2", color: "text.primary" }, option.label)
+      /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "body2", color: "text.secondary" }, option.label)
     ))))
   ), abrirCamara && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(import_CancelOutlined.default, { onClick: closeCam, sx: { borderRadius: "50px", height: "35px", width: "35px", zIndex: 1700, background: "white", position: "absolute", left: `calc(100% - 50px)`, bottom: `calc(100% - 50px)` } }), /* @__PURE__ */ import_react52.default.createElement(import_material36.Stack, { className: "camras" }, /* @__PURE__ */ import_react52.default.createElement(
     import_react_webcam.default,
@@ -5475,11 +5551,77 @@ var SCAppBar = ({
   )))), /* @__PURE__ */ import_react54.default.createElement(import_material37.Box, { sx: { padding: "8px 16px 0px 16px" } }, contenidoExtra)));
 };
 
+// src/Components/SCDatePicker.tsx
+var import_react55 = __toESM(require("react"), 1);
+var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
+var import_es6 = require("dayjs/locale/es");
+var import_dayjs11 = __toESM(require("dayjs"), 1);
+var import_es7 = require("dayjs/locale/es");
+var import_LocalizationProvider5 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs3 = require("@mui/x-date-pickers/AdapterDayjs");
+var import_InsertInvitationOutlined = __toESM(require("@mui/icons-material/InsertInvitationOutlined"), 1);
+var SCDatePicker = ({ label, required, disabled, background, state, setState, width }) => {
+  return /* @__PURE__ */ import_react55.default.createElement(import_LocalizationProvider5.LocalizationProvider, { dateAdapter: import_AdapterDayjs3.AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ import_react55.default.createElement(
+    import_DatePicker.DatePicker,
+    {
+      disabled,
+      label: label || "Fecha",
+      value: state,
+      onChange: (value) => {
+        if (value && import_dayjs11.default.isDayjs(value) && value.isValid()) {
+          const minDate = (0, import_dayjs11.default)("2015-01-01");
+          const maxDate = (0, import_dayjs11.default)().add(3, "month");
+          if (value.isBefore(minDate, "day")) {
+            alert("La fecha no puede ser anterior al 01/01/2015");
+            return;
+          }
+          if (value.isAfter(maxDate, "day")) {
+            alert("La fecha no puede ser posterior a 3 meses desde hoy");
+            return;
+          }
+          setState(value);
+        }
+      },
+      minDate: (0, import_dayjs11.default)("2015-01-01"),
+      maxDate: (0, import_dayjs11.default)().add(3, "month"),
+      sx: {
+        minWidth: 140,
+        padding: "13px 0px",
+        width: width || "100%",
+        "& .MuiPickersInputBase-sectionsContainer": {
+          padding: "8px 0px"
+        },
+        background: background || "transparent"
+      },
+      slotProps: {
+        popper: {
+          sx: {
+            zIndex: 2e3
+          }
+        },
+        textField: {
+          required: required || false,
+          InputLabelProps: {
+            sx: {
+              "&.MuiInputLabel-shrink": {
+                transform: "translate(10px, 5px) scale(0.9) !important"
+              }
+            }
+          }
+        }
+      },
+      slots: {
+        openPickerIcon: import_InsertInvitationOutlined.default
+      }
+    }
+  ));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react55 = __toESM(require("react"), 1);
+var import_react56 = __toESM(require("react"), 1);
 var import_icons_material15 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
@@ -5836,6 +5978,7 @@ var components = {
       })
     }
   },
+  //este hace claro el fondo
   MuiBackdrop: {
     styleOverrides: {
       root: {
@@ -6177,10 +6320,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react55.default.createElement(import_icons_material15.CheckCircleRounded),
-        error: import_react55.default.createElement(import_icons_material15.ErrorRounded),
-        warning: import_react55.default.createElement(import_icons_material15.WarningRounded),
-        info: import_react55.default.createElement(import_icons_material15.InfoRounded)
+        success: import_react56.default.createElement(import_icons_material15.CheckCircleRounded),
+        error: import_react56.default.createElement(import_icons_material15.ErrorRounded),
+        warning: import_react56.default.createElement(import_icons_material15.WarningRounded),
+        info: import_react56.default.createElement(import_icons_material15.InfoRounded)
       }
     },
     variants: [
@@ -7239,6 +7382,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   SCCard,
   SCDataGrid,
   SCDataGridInitial,
+  SCDatePicker,
   SCDateRange,
   SCDialog,
   SCDrawer,