componentes-sinco 1.3.3 → 1.3.5

package/dist/index.cjs

@@ -1446,6 +1446,7 @@ var SCTextField = ({
   required,
   size,
   width = "100%",
+  alignText = "left",
   color,
   background,
   //Funcionales
@@ -1603,7 +1604,14 @@ var SCTextField = ({
         onKeyDown: handleKeyDown,
         onChange: handleInputChange,
         onBlur: handleBlur,
-        inputProps: { maxLength: maxLength ? maxLength : 50 },
+        sx: iconInputStart || iconInputEnd ? {
+          height: "32px",
+          "& .MuiInputAdornment-root": {
+            height: "32px",
+            maxHeight: "32px"
+          }
+        } : void 0,
+        inputProps: { maxLength: maxLength ? maxLength : 50, style: { textAlign: alignText } },
         type: !showPassword && format3 === "password" ? "password" : (format3 || "text").toUpperCase() === "INT" || (format3 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
         className: format3 === "password" && !showPassword ? "" : "",
         placeholder,
@@ -1853,6 +1861,7 @@ function SCSelect({
   const [prevData, setPrevData] = import_react16.default.useState(data);
   const [error, setError] = import_react16.default.useState(false);
   const [placement, setPlacement] = import_react16.default.useState("bottom");
+  const [menuWidth, setMenuWidth] = import_react16.default.useState();
   const containerRef = import_react16.default.useRef(null);
   (0, import_react16.useEffect)(() => {
     if (error) {
@@ -1888,6 +1897,7 @@ function SCSelect({
       const spaceBelow = window.innerHeight - rect.bottom;
       const estimatedMenuHeight = Math.min(300, data.length * 36 + 16);
       setPlacement(spaceBelow < estimatedMenuHeight ? "top" : "bottom");
+      setMenuWidth(rect.width);
     }
   };
   const handleChange = (event2) => {
@@ -1930,6 +1940,20 @@ function SCSelect({
         disabled: disabled || false,
         error,
         sx: { height: "32px" },
+        renderValue: (selected) => {
+          const selectedOption = data.find((item) => getItemValue(item).value === selected);
+          if (!selectedOption) return "";
+          const { icon, text } = getItemValue(selectedOption);
+          return /* @__PURE__ */ import_react16.default.createElement(import_material9.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, overflow: "hidden" } }, icon != void 0 && /* @__PURE__ */ import_react16.default.createElement(import_material9.SvgIcon, { fontSize: "small", color: "action", component: icon, sx: { flexShrink: 0 } }), /* @__PURE__ */ import_react16.default.createElement(
+            import_material9.Box,
+            {
+              component: "span",
+              title: text,
+              sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+            },
+            text
+          ));
+        },
         MenuProps: {
           sx: {
             zIndex: 1400
@@ -1937,7 +1961,8 @@ function SCSelect({
           PaperProps: {
             sx: {
               maxHeight: "300px",
-              minWidth: "100%"
+              width: menuWidth ? `${menuWidth}px` : "100%",
+              maxWidth: menuWidth ? `${menuWidth}px` : "100%"
             }
           },
           anchorOrigin: {
@@ -1953,7 +1978,15 @@ function SCSelect({
         }
       },
       data.map((option, index) => {
-        return /* @__PURE__ */ import_react16.default.createElement(import_material9.MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react16.default.createElement(import_material9.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react16.default.createElement(import_material9.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ import_react16.default.createElement(import_material9.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
+        return /* @__PURE__ */ import_react16.default.createElement(import_material9.MenuItem, { key: index, value: getItemValue(option).value, sx: { minWidth: 0 } }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react16.default.createElement(import_material9.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react16.default.createElement(import_material9.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ import_react16.default.createElement(
+          import_material9.ListItemText,
+          {
+            primary: getItemValue(option).text,
+            color: "text.primary",
+            sx: { overflow: "hidden" },
+            slotProps: { primary: { noWrap: true, title: getItemValue(option).text } }
+          }
+        ));
       })
     )
   )));
@@ -5216,22 +5249,25 @@ var SCCard = ({ width, title, image, iconTitle, actionsTitle, subtitle, dividerH
 var import_react51 = __toESM(require("react"), 1);
 var import_x_data_grid_pro = require("@mui/x-data-grid-pro");
 var import_x_license2 = require("@mui/x-license");
+var import_material36 = require("@mui/material");
 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, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex = 0, setSelectedRow, selectedRow }) {
+function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPage, rowsTable, rowSelection, checkboxSelection, width, maxHeight, density, disableColumnMenu, disableHeader, disableColumnSorting, setSelectedIndex, selectedIndex = 0, setSelectedRow, selectedRow, insertRowFields, onAddRow }) {
+  var _a;
   import_x_license2.LicenseInfo.setLicenseKey(
     "aa892a011e4c240f3cdaf811ecfff54fTz0xMjkyODQsRT0xODEwNDI1NTk5MDAwLFM9cHJvLExNPWFubnVhbCxQVj1RMy0yMDI0LEtWPTI="
   );
   const theme = (0, import_styles.useTheme)();
   const apiRef = (0, import_x_data_grid_pro.useGridApiRef)();
   const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
+  const showInsertRow = insertRowFields != void 0 && insertRowFields.length > 0;
   function generateRandomId() {
     return Math.floor(Math.random() * 1e6);
   }
   const getTreeDataPaths = (row) => {
-    var _a, _b, _c;
-    const group1Value = groupColumns && ((_a = groupColumns(row)) == null ? void 0 : _a.valueGroup1);
+    var _a2, _b, _c;
+    const group1Value = groupColumns && ((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1);
     const group2Value = groupColumns && ((_b = groupColumns(row)) == null ? void 0 : _b.valueGroup2);
     const fieldValue = groupColumns && ((_c = groupColumns(row)) == null ? void 0 : _c.fieldFirstColumn);
     return [
@@ -5245,7 +5281,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     headerName: groupColumns ? groupColumns(data[0]).headerNameFirstColumn : "Agrupador",
     flex: 1,
     renderCell: (params) => {
-      var _a, _b;
+      var _a2, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
       let maxDepth = 0;
       if (groupColumns && data.length > 0) {
@@ -5260,8 +5296,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
           if (groupColumns) {
             const originalItem = data.find(
               (item) => {
-                var _a2;
-                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup1) === label;
+                var _a3;
+                return String((_a3 = groupColumns(item)) == null ? void 0 : _a3.valueGroup1) === label;
               }
             );
             if (originalItem) {
@@ -5270,22 +5306,22 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
             }
           }
           let subgroup1 = arrayRows.filter((r) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === label;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup1) === label;
           }).map((r) => {
-            var _a2, _b2;
-            return groupColumns && String(((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2) || ((_b2 = groupColumns(r)) == null ? void 0 : _b2.fieldFirstColumn));
+            var _a3, _b2;
+            return groupColumns && String(((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup2) || ((_b2 = groupColumns(r)) == null ? void 0 : _b2.fieldFirstColumn));
           });
           const groupedDataLength1 = subgroup1.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);
           label = `${customLabel} (${groupedDataLength1.length})`;
-        } else if (((_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup2) && params.rowNode.depth === 1) {
+        } else if (((_a2 = groupColumns(data[0])) == null ? void 0 : _a2.valueGroup2) && params.rowNode.depth === 1) {
           const labelGrouping1 = (_b = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _b.groupingKey.toString();
           let customLabel = label;
           if (groupColumns) {
             const originalItem = data.find(
               (item) => {
-                var _a2;
-                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup2) === label;
+                var _a3;
+                return String((_a3 = groupColumns(item)) == null ? void 0 : _a3.valueGroup2) === label;
               }
             );
             if (originalItem) {
@@ -5295,8 +5331,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
           }
           const groupedDataLength2 = arrayRows.filter(
             (r) => {
-              var _a2, _b2;
-              return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
+              var _a3, _b2;
+              return groupColumns && String((_a3 = groupColumns(r)) == null ? void 0 : _a3.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
             }
           ).length;
           label = `${customLabel} (${groupedDataLength2})`;
@@ -5341,25 +5377,25 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       );
     },
     colSpan: (params) => {
-      var _a, _b;
+      var _a2, _b;
       const value = String(params);
-      const fieldGrouping1 = groupColumns ? (_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup1 : void 0;
+      const fieldGrouping1 = groupColumns ? (_a2 = groupColumns(data[0])) == null ? void 0 : _a2.valueGroup1 : void 0;
       const fieldGrouping2 = groupColumns ? (_b = groupColumns(data[0])) == null ? void 0 : _b.valueGroup2 : void 0;
       let agrupado1 = false;
       let agrupado2 = false;
       if (fieldGrouping1 != void 0) {
         agrupado1 = arrayRows.some(
           (row) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1) === value;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(row)) == null ? void 0 : _a3.valueGroup1) === value;
           }
         );
       }
       if (fieldGrouping2 != void 0) {
         agrupado2 = arrayRows.some(
           (row) => {
-            var _a2;
-            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup2) === value;
+            var _a3;
+            return groupColumns && String((_a3 = groupColumns(row)) == null ? void 0 : _a3.valueGroup2) === value;
           }
         );
       }
@@ -5381,11 +5417,31 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
   const [pageSize, setPageSize] = (0, import_react51.useState)(rows);
   const [arrayRows, setArrayRows] = (0, import_react51.useState)([]);
   const [selectionModel, setSelectionModel] = (0, import_react51.useState)([]);
+  const [insertRowValues, setInsertRowValues] = (0, import_react51.useState)({});
+  const INSERT_ROW_ID = "__sc-datagrid-insert-row__";
+  const resolvedGetRowId = (row) => (row == null ? void 0 : row.__isInsertRow) ? INSERT_ROW_ID : getRowId ? getRowId(row) : row.id;
+  const pinnedRows = showInsertRow ? { bottom: [{ __isInsertRow: true }] } : void 0;
+  const normalizedInsertRowFields = (insertRowFields && insertRowFields.length > 0 ? insertRowFields : [(_a = columns[0]) == null ? void 0 : _a.field]).map((item) => typeof item === "string" ? { field: item } : item);
+  const insertRowTargetFields = normalizedInsertRowFields.map((item) => item.field);
+  const isInsertRowValueFilled = (value) => value !== void 0 && value !== null && (typeof value !== "string" || value.trim() !== "");
+  const hasInsertRowValue = () => insertRowTargetFields.some((field) => isInsertRowValueFilled(insertRowValues[field]));
+  const handleAddInsertRow = () => {
+    if (!hasInsertRowValue()) return;
+    const nextId = Math.max(0, ...arrayRows.map((row) => typeof row.id === "number" ? row.id : 0)) + 1;
+    const newRow = { id: nextId };
+    insertRowTargetFields.forEach((field) => {
+      const value = insertRowValues[field];
+      if (isInsertRowValueFilled(value)) newRow[field] = typeof value === "string" ? value.trim() : value;
+    });
+    setArrayRows((prev) => [...prev, newRow]);
+    setInsertRowValues({});
+    onAddRow && onAddRow(newRow);
+  };
   (0, import_react51.useEffect)(() => {
-    var _a;
+    var _a2;
     if (setSelectedRow) {
       setSelectedRow(arrayRows[selectedIndex]);
-      setSelectionModel(((_a = arrayRows[selectedIndex]) == null ? void 0 : _a.id) ? [arrayRows[selectedIndex].id] : []);
+      setSelectionModel(((_a2 = arrayRows[selectedIndex]) == null ? void 0 : _a2.id) ? [arrayRows[selectedIndex].id] : []);
     }
   }, [selectedIndex]);
   (0, import_react51.useEffect)(() => {
@@ -5394,7 +5450,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     }
   }, [data]);
   const dataConvertRows = (data2, columnId) => {
-    var _a;
+    var _a2;
     let dataConvert = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
@@ -5412,7 +5468,7 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
     setArrayRows(dataConvert);
     if (arrayRows.length == 0 && (groupDataLenght < 1 && validationTreeData != true)) {
       setSelectedRow && setSelectedRow(dataConvert[selectedIndex]);
-      setSelectionModel([(_a = dataConvert[0]) == null ? void 0 : _a.id]);
+      setSelectionModel([(_a2 = dataConvert[0]) == null ? void 0 : _a2.id]);
     }
   };
   const handleSelectionChange = (newSelection) => {
@@ -5454,15 +5510,56 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       }
     }
   };
-  const processedColumns = columns.map((col) => {
-    if (col.width !== void 0) {
-      return col;
-    }
-    if (col.flex !== void 0) {
-      return col;
-    }
-    return __spreadProps(__spreadValues({}, col), {
-      flex: 1
+  const processedColumns = columns.map((col, index) => {
+    const baseCol = col.width !== void 0 || col.flex !== void 0 ? col : __spreadProps(__spreadValues({}, col), { flex: 1 });
+    if (!showInsertRow) return baseCol;
+    const isLastColumn = index === columns.length - 1;
+    const isInputField = !isLastColumn && insertRowTargetFields.includes(baseCol.field);
+    const originalRenderCell = baseCol.renderCell;
+    return __spreadProps(__spreadValues({}, baseCol), {
+      renderCell: (params) => {
+        if (params.id !== INSERT_ROW_ID) {
+          return originalRenderCell ? originalRenderCell(params) : params.formattedValue;
+        }
+        if (isInputField) {
+          const fieldConfig = normalizedInsertRowFields.find((item) => item.field === baseCol.field);
+          const setFieldValue = (newValue) => setInsertRowValues((prev) => __spreadProps(__spreadValues({}, prev), { [baseCol.field]: newValue }));
+          if (fieldConfig == null ? void 0 : fieldConfig.renderCell) {
+            return fieldConfig.renderCell({
+              value: insertRowValues[baseCol.field],
+              onChange: setFieldValue,
+              field: baseCol.field
+            });
+          }
+          return /* @__PURE__ */ import_react51.default.createElement(
+            import_material36.TextField,
+            {
+              variant: "outlined",
+              size: "small",
+              placeholder: (fieldConfig == null ? void 0 : fieldConfig.placeholder) || baseCol.headerName || `Escribir ${baseCol.field}`,
+              value: insertRowValues[baseCol.field] || "",
+              onChange: (e) => setFieldValue(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleAddInsertRow();
+              },
+              sx: { width: "100%", "& .MuiOutlinedInput-root": { height: "32px" } }
+            }
+          );
+        }
+        if (isLastColumn) {
+          return /* @__PURE__ */ import_react51.default.createElement(
+            import_material36.Button,
+            {
+              variant: "contained",
+              size: "small",
+              disabled: !hasInsertRowValue(),
+              onClick: handleAddInsertRow
+            },
+            "Agregar"
+          );
+        }
+        return null;
+      }
     });
   });
   const columnVisibilityModel = {};
@@ -5485,7 +5582,8 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
   return /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, data && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react51.default.createElement(
     import_x_data_grid_pro.DataGridPro,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      getRowId,
+      getRowId: showInsertRow ? resolvedGetRowId : getRowId,
+      pinnedRows,
       apiRef,
       rowHeight: styleRowHeight,
       rows: arrayRows,
@@ -5522,6 +5620,12 @@ function SCDataGridInitial({ data, columns, getRowId, groupColumns, titleRowsPag
       },
       sx: {
         maxHeight: maxHeight ? `${maxHeight}px` : "none",
+        "& .MuiDataGrid-pinnedRows": {
+          boxShadow: "0px -2px 3px -2px rgba(0,0,0,0.15)"
+        },
+        "& .MuiDataGrid-pinnedRows .MuiDataGrid-cell": {
+          backgroundColor: "#FBFBFB"
+        },
         "& .MuiDataGrid-columnHeaders": {
           display: disableHeader == true ? "none" : "block"
         },
@@ -5718,7 +5822,7 @@ var SCDatePicker = ({ label, required, disabled, background, state, setState, wi
 
 // src/Components/SCDialog.tsx
 var import_react53 = __toESM(require("react"), 1);
-var import_material36 = require("@mui/material");
+var import_material37 = require("@mui/material");
 var import_Grid9 = __toESM(require("@mui/material/Grid"), 1);
 var import_ToggleButton = __toESM(require("@mui/material/ToggleButton"), 1);
 var import_ToggleButtonGroup = __toESM(require("@mui/material/ToggleButtonGroup"), 1);
@@ -5782,9 +5886,9 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
     }
   };
   const dialogActions = actions == false ? false : actions != void 0 ? actions : [{ text: "Cerrar", fn: handleClose }];
-  content = content != null ? content : { component: /* @__PURE__ */ import_react53.default.createElement(import_material36.Box, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ import_react53.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react53.default.createElement(import_material36.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react53.default.createElement(import_material36.Button, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ import_react53.default.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react53.default.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react53.default.createElement(import_material36.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react53.default.createElement(import_material36.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react53.default.createElement(
-    import_material36.Dialog,
+  content = content != null ? content : { component: /* @__PURE__ */ import_react53.default.createElement(import_material37.Box, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ import_react53.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react53.default.createElement(import_material37.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react53.default.createElement(import_material37.Button, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ import_react53.default.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react53.default.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react53.default.createElement(import_material37.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react53.default.createElement(import_material37.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react53.default.createElement(
+    import_material37.Dialog,
     {
       fullScreen: typeView === "mobile" ? true : false,
       "data-testid": "dialog-element",
@@ -5798,9 +5902,9 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ import_react53.default.createElement(import_material36.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, typeView == "web" ? /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react53.default.createElement(import_material36.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react53.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react53.default.createElement(import_material36.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")) : /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }), disableClose != true ? /* @__PURE__ */ import_react53.default.createElement(import_material36.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react53.default.createElement(import_Close2.default, { color: "action" })) : ""), typeView == "mobile" ? /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { sx: { display: "flex", flexDirection: "column", padding: "12px 0px 4px 0px" }, gap: 1.5 }, /* @__PURE__ */ import_react53.default.createElement(import_material36.Typography, { color: "text.primary", variant: "h5" }, title ? title : ""), subtitle ? subtitle : "") : ""),
+    title && /* @__PURE__ */ import_react53.default.createElement(import_material37.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, typeView == "web" ? /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react53.default.createElement(import_material37.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react53.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react53.default.createElement(import_material37.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")) : /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { container: true, size: 11, sx: { alignItems: "center", flexWrap: "nowrap" } }), disableClose != true ? /* @__PURE__ */ import_react53.default.createElement(import_material37.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react53.default.createElement(import_Close2.default, { color: "action" })) : ""), typeView == "mobile" ? /* @__PURE__ */ import_react53.default.createElement(import_Grid9.default, { sx: { display: "flex", flexDirection: "column", padding: "12px 0px 4px 0px" }, gap: 1.5 }, /* @__PURE__ */ import_react53.default.createElement(import_material37.Typography, { color: "text.primary", variant: "h5" }, title ? title : ""), subtitle ? subtitle : "") : ""),
     /* @__PURE__ */ import_react53.default.createElement(
-      import_material36.DialogContent,
+      import_material37.DialogContent,
       {
         "data-testid": "dialog-content",
         dividers: dividers ? dividers : false,
@@ -5838,20 +5942,20 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react53.default.createElement(import_material36.DialogActions, { sx: { zIndex: 1200, gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
-      import_material36.Button,
+    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react53.default.createElement(import_material37.DialogActions, { sx: { zIndex: 1200, gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
+      import_material37.Button,
       {
         variant: "text",
         color: dialogActions[0].color || "primary",
         size: "small",
         onClick: dialogActions[0].fn,
         disabled: dialogActions[0].disabled || false,
-        startIcon: dialogActions[0].icon ? /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { fontSize: "small", component: dialogActions[0].icon }) : void 0
+        startIcon: dialogActions[0].icon ? /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { fontSize: "small", component: dialogActions[0].icon }) : void 0
       },
       dialogActions[0].text
-    ), /* @__PURE__ */ import_react53.default.createElement(import_material36.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+    ), /* @__PURE__ */ import_react53.default.createElement(import_material37.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
       return /* @__PURE__ */ import_react53.default.createElement(
-        import_material36.Button,
+        import_material37.Button,
         {
           key: index + 1,
           variant: index === dialogActions.length - 2 ? "contained" : "text",
@@ -5859,13 +5963,13 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
     }))) : dialogActions.map((boton, index) => {
       return /* @__PURE__ */ import_react53.default.createElement(
-        import_material36.Button,
+        import_material37.Button,
         {
           key: index,
           variant: index === dialogActions.length - 1 ? "contained" : "text",
@@ -5873,20 +5977,20 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
-    })) : /* @__PURE__ */ import_react53.default.createElement(import_material36.Box, { sx: { width: "100%", display: "flex", flexDirection: "row", justifyContent: "center" } }, /* @__PURE__ */ import_react53.default.createElement(import_ToggleButtonGroup.default, { size: "large", fullWidth: true }, dialogActions.map((boton, index) => {
+    })) : /* @__PURE__ */ import_react53.default.createElement(import_material37.Box, { sx: { width: "100%", display: "flex", flexDirection: "row", justifyContent: "center" } }, /* @__PURE__ */ import_react53.default.createElement(import_ToggleButtonGroup.default, { size: "large", fullWidth: true }, dialogActions.map((boton, index) => {
       var _a;
-      return /* @__PURE__ */ import_react53.default.createElement(import_ToggleButton.default, { sx: { color: "primary.main" }, disabled: boton.disabled || false, fullWidth: boton.text ? true : false, size: "medium", value: "text", onClick: boton.fn }, (_a = boton.text) != null ? _a : /* @__PURE__ */ import_react53.default.createElement(import_material36.SvgIcon, { fontSize: "small", component: boton.icon }));
+      return /* @__PURE__ */ import_react53.default.createElement(import_ToggleButton.default, { sx: { color: "primary.main" }, disabled: boton.disabled || false, fullWidth: boton.text ? true : false, size: "medium", value: "text", onClick: boton.fn }, (_a = boton.text) != null ? _a : /* @__PURE__ */ import_react53.default.createElement(import_material37.SvgIcon, { fontSize: "small", component: boton.icon }));
     })))) : "" : ""
   )));
 };
 
 // src/Components/SCDownloadExcelTable.tsx
 var import_react54 = __toESM(require("react"), 1);
-var import_material37 = require("@mui/material");
+var import_material38 = require("@mui/material");
 var import_FileDownloadOutlined2 = __toESM(require("@mui/icons-material/FileDownloadOutlined"), 1);
 var XLSX = __toESM(require("xlsx"), 1);
 var SCDownloadExcelTable = ({
@@ -5920,7 +6024,7 @@ var SCDownloadExcelTable = ({
     XLSX.writeFile(workbook, `${fileName}.xlsx`);
   };
   return /* @__PURE__ */ import_react54.default.createElement(
-    import_material37.Button,
+    import_material38.Button,
     {
       onClick: descargaExcel,
       startIcon: /* @__PURE__ */ import_react54.default.createElement(import_FileDownloadOutlined2.default, null),
@@ -5935,7 +6039,7 @@ var SCDownloadExcelTable = ({
 
 // src/Components/SCMenu.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_material38 = require("@mui/material");
+var import_material39 = require("@mui/material");
 var import_Grid10 = __toESM(require("@mui/material/Grid"), 1);
 
 // src/Components/Hooks/useWindowDimensions.ts
@@ -6002,22 +6106,22 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       setValue(String(index + 1));
     }
   };
-  return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react56.default.createElement(import_material38.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react56.default.createElement(import_material38.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
-    import_material38.MenuItem,
+  return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react56.default.createElement(import_material39.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react56.default.createElement(import_material39.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
+    import_material39.MenuItem,
     {
       disabled: disable == true ? true : false,
       key: index,
       selected: String(index + 1) === selectedIndex,
       onClick: (event2) => handleClickMenusItem(event2, index)
     },
-    option.iconLeft ? /* @__PURE__ */ import_react56.default.createElement(import_material38.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react56.default.createElement(import_material38.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react56.default.createElement(import_material38.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react56.default.createElement(import_material38.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react56.default.createElement(import_material38.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ import_react56.default.createElement(import_material38.Divider, null) : "")))), /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react56.default.createElement(import_material38.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react56.default.createElement(import_material38.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+    option.iconLeft ? /* @__PURE__ */ import_react56.default.createElement(import_material39.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react56.default.createElement(import_material39.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react56.default.createElement(import_material39.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react56.default.createElement(import_material39.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react56.default.createElement(import_material39.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ import_react56.default.createElement(import_material39.Divider, null) : "")))), /* @__PURE__ */ import_react56.default.createElement(import_Grid10.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react56.default.createElement(import_material39.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react56.default.createElement(import_material39.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
 };
 
 // src/Components/SCTabs.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_material39 = require("@mui/material");
+var import_material40 = require("@mui/material");
 var import_TabPanel = __toESM(require("@mui/lab/TabPanel"), 1);
 var import_TabContext = __toESM(require("@mui/lab/TabContext"), 1);
 var Muicon11 = __toESM(require("@mui/icons-material"), 1);
@@ -6079,8 +6183,8 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react57.default.createElement(import_material39.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react57.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react57.default.createElement(
-    import_material39.Tabs,
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react57.default.createElement(import_material40.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react57.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react57.default.createElement(
+    import_material40.Tabs,
     {
       "data-testid": "tab-container",
       value,
@@ -6094,7 +6198,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
     },
     options.map((option) => /* @__PURE__ */ import_react57.default.createElement(
-      import_material39.Tab,
+      import_material40.Tab,
       {
         "data-testid": "tab-item",
         value: String(i = i + 1),
@@ -6103,7 +6207,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
         disabled: option.disabled || false,
         iconPosition: iconPosition || "end",
         icon: typeIcon == "badge" ? /* @__PURE__ */ import_react57.default.createElement(
-          import_material39.Badge,
+          import_material40.Badge,
           {
             sx: {
               width: "20px",
@@ -6117,7 +6221,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
             badgeContent: option.iconOrBadge,
             color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
           }
-        ) : typeIcon == "icon" ? /* @__PURE__ */ import_react57.default.createElement(import_material39.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
+        ) : typeIcon == "icon" ? /* @__PURE__ */ import_react57.default.createElement(import_material40.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
         sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
       }
     ))
@@ -6128,13 +6232,13 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       value: String(l = l + 1),
       sx: { padding: "16px" }
     },
-    option.page ? option.page : /* @__PURE__ */ import_react57.default.createElement(import_material39.Typography, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ import_react57.default.createElement(import_material39.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react57.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+    option.page ? option.page : /* @__PURE__ */ import_react57.default.createElement(import_material40.Typography, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ import_react57.default.createElement(import_material40.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react57.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
 // src/Components/SCTime.tsx
 var import_react58 = __toESM(require("react"), 1);
-var import_material40 = require("@mui/material");
+var import_material41 = require("@mui/material");
 var import_LocalizationProvider5 = require("@mui/x-date-pickers/LocalizationProvider");
 var import_AdapterDayjs3 = require("@mui/x-date-pickers/AdapterDayjs");
 var import_dayjs11 = __toESM(require("dayjs"), 1);
@@ -6190,11 +6294,15 @@ var SCTime = ({
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
+  const handleTimeFieldChange = (newValue) => {
+    const dayjsValue = newValue ? (0, import_dayjs11.default)(newValue) : null;
+    setState(dayjsValue);
+  };
   const handleClose = () => {
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ import_react58.default.createElement(import_LocalizationProvider5.LocalizationProvider, { dateAdapter: import_AdapterDayjs3.AdapterDayjs }, /* @__PURE__ */ import_react58.default.createElement(import_material40.Box, { sx: { position: "relative", minWidth: "120px", width: width ? `${width}%` : "99%" } }, /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(import_LocalizationProvider5.LocalizationProvider, { dateAdapter: import_AdapterDayjs3.AdapterDayjs }, /* @__PURE__ */ import_react58.default.createElement(import_material41.Box, { sx: { position: "relative", minWidth: "120px", width: width ? `${width}%` : "99%" } }, /* @__PURE__ */ import_react58.default.createElement(
     import_TimeField.TimeField,
     {
       label,
@@ -6203,10 +6311,11 @@ var SCTime = ({
       required,
       error: hasError,
       onClick: handleTimeFieldClick,
+      onChange: handleTimeFieldChange,
       slotProps: {
         textField: {
           InputProps: {
-            endAdornment: /* @__PURE__ */ import_react58.default.createElement(import_material40.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react58.default.createElement(
+            endAdornment: /* @__PURE__ */ import_react58.default.createElement(import_material41.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react58.default.createElement(
               import_AccessTime.default,
               {
                 color: disabled ? "disabled" : "action",
@@ -6236,7 +6345,7 @@ var SCTime = ({
       }
     }
   ), /* @__PURE__ */ import_react58.default.createElement(
-    import_material40.Popover,
+    import_material41.Popover,
     {
       open: isOpenPopover,
       anchorEl,
@@ -6266,7 +6375,7 @@ var SCTime = ({
         }
       }
     },
-    /* @__PURE__ */ import_react58.default.createElement(import_material40.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react58.default.createElement(import_material40.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react58.default.createElement(import_material41.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react58.default.createElement(import_material41.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react58.default.createElement(
       import_DigitalClock.DigitalClock,
       {
         value: state,
@@ -6290,7 +6399,7 @@ var SCTime = ({
 
 // src/Components/SCZoom.tsx
 var import_react59 = __toESM(require("react"), 1);
-var import_material41 = require("@mui/material");
+var import_material42 = require("@mui/material");
 var import_Grid11 = __toESM(require("@mui/material/Grid"), 1);
 var import_ZoomOut = __toESM(require("@mui/icons-material/ZoomOut"), 1);
 var import_ZoomIn = __toESM(require("@mui/icons-material/ZoomIn"), 1);
@@ -6306,8 +6415,8 @@ var SCZoom = ({ image, width, height, bottom, left }) => {
   const handleReset = () => {
     setZoom(1);
   };
-  return /* @__PURE__ */ import_react59.default.createElement(import_material41.Box, { style: { width: width || "280px", height: height || "280px" } }, /* @__PURE__ */ import_react59.default.createElement(
-    import_material41.Box,
+  return /* @__PURE__ */ import_react59.default.createElement(import_material42.Box, { style: { width: width || "280px", height: height || "280px" } }, /* @__PURE__ */ import_react59.default.createElement(
+    import_material42.Box,
     {
       sx: {
         overflow: zoom > 1 ? "auto" : "hidden",
@@ -6328,7 +6437,7 @@ var SCZoom = ({ image, width, height, bottom, left }) => {
         }
       }
     )
-  ), /* @__PURE__ */ import_react59.default.createElement(import_Grid11.default, { container: true, flexWrap: "nowrap", alignItems: "center", gap: 1, sx: { position: "relative", bottom: bottom != null ? bottom : `calc(100% - 87%)`, left: left != null ? left : `calc(100% - 72%)`, zIndex: 1, width: "147px", borderRadius: "4px", padding: "4px 12px", border: bottom ? "0px" : "1px solid #0000001F", background: "white", boxShadow: bottom ? "" : "2px 3px 5px 0px #18274B33" } }, /* @__PURE__ */ import_react59.default.createElement(import_Grid11.default, { container: true, alignItems: "center", justifyContent: "center", flexWrap: "nowrap", gap: 0.5, sx: { width: "84px" } }, /* @__PURE__ */ import_react59.default.createElement(import_material41.IconButton, { onClick: handleZoomOut, disabled: zoom <= 0.5, size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_ZoomOut.default, { color: "action", fontSize: "small" })), /* @__PURE__ */ import_react59.default.createElement(import_material41.Typography, { variant: "body2", color: "textSecondary" }, Math.round(zoom * 100), "%"), /* @__PURE__ */ import_react59.default.createElement(import_material41.IconButton, { onClick: handleZoomIn, disabled: zoom >= 3, color: "primary", size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_ZoomIn.default, { color: "action", fontSize: "small" }))), /* @__PURE__ */ import_react59.default.createElement(import_material41.Divider, { orientation: "vertical", sx: { width: "1px", height: "16px" } }), /* @__PURE__ */ import_react59.default.createElement(import_material41.IconButton, { onClick: handleReset, color: "primary", size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_RotateRight.default, { color: "action", fontSize: "small" }))));
+  ), /* @__PURE__ */ import_react59.default.createElement(import_Grid11.default, { container: true, flexWrap: "nowrap", alignItems: "center", gap: 1, sx: { position: "relative", bottom: bottom != null ? bottom : `calc(100% - 87%)`, left: left != null ? left : `calc(100% - 72%)`, zIndex: 1, width: "147px", borderRadius: "4px", padding: "4px 12px", border: bottom ? "0px" : "1px solid #0000001F", background: "white", boxShadow: bottom ? "" : "2px 3px 5px 0px #18274B33" } }, /* @__PURE__ */ import_react59.default.createElement(import_Grid11.default, { container: true, alignItems: "center", justifyContent: "center", flexWrap: "nowrap", gap: 0.5, sx: { width: "84px" } }, /* @__PURE__ */ import_react59.default.createElement(import_material42.IconButton, { onClick: handleZoomOut, disabled: zoom <= 0.5, size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_ZoomOut.default, { color: "action", fontSize: "small" })), /* @__PURE__ */ import_react59.default.createElement(import_material42.Typography, { variant: "body2", color: "textSecondary" }, Math.round(zoom * 100), "%"), /* @__PURE__ */ import_react59.default.createElement(import_material42.IconButton, { onClick: handleZoomIn, disabled: zoom >= 3, color: "primary", size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_ZoomIn.default, { color: "action", fontSize: "small" }))), /* @__PURE__ */ import_react59.default.createElement(import_material42.Divider, { orientation: "vertical", sx: { width: "1px", height: "16px" } }), /* @__PURE__ */ import_react59.default.createElement(import_material42.IconButton, { onClick: handleReset, color: "primary", size: "small" }, /* @__PURE__ */ import_react59.default.createElement(import_RotateRight.default, { color: "action", fontSize: "small" }))));
 };
 
 // src/Theme/index.ts
@@ -6800,7 +6909,6 @@ var components = {
         color: theme.palette.primary.main
       }),
       colorDefault: ({ theme }) => ({
-        backgroundColor: theme.palette.default.main,
         color: theme.palette.default.contrastText
       }),
       deleteIcon: ({ theme }) => ({
@@ -6910,47 +7018,6 @@ var components = {
         height: "inherit",
         borderRadius: 4,
         variants: [
-          {
-            props: { variant: "outlined", color: "default" },
-            style: {
-              border: `1px solid ${theme.palette.grey[400]}`,
-              backgroundColor: "transparent ",
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.default.main
-              }
-            }
-          },
-          {
-            props: { variant: "standard", color: "default" },
-            style: {
-              backgroundColor: theme.palette.default.main,
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.default.dark
-              }
-            }
-          },
-          {
-            props: { variant: "filled", color: "default" },
-            style: {
-              backgroundColor: theme.palette.grey[50],
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.grey[100]
-              }
-            }
-          },
-          {
-            props: { variant: "filled", color: "default" },
-            style: {
-              backgroundColor: theme.palette.grey[50],
-              color: theme.palette.default.contrastText,
-              ":hover": {
-                backgroundColor: theme.palette.grey[100]
-              }
-            }
-          },
           {
             props: { variant: "standard", avatar: true },
             style: {
@@ -7021,7 +7088,40 @@ var components = {
           }
         ]
       })
-    }
+    },
+    variants: [
+      {
+        props: { variant: "outlined", color: "default" },
+        style: ({ theme }) => ({
+          border: `1px solid ${theme.palette.grey[400]}`,
+          backgroundColor: "transparent",
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.default.main
+          }
+        })
+      },
+      {
+        props: { variant: "standard", color: "default" },
+        style: ({ theme }) => ({
+          backgroundColor: theme.palette.default.main,
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.default.dark
+          }
+        })
+      },
+      {
+        props: { variant: "filled", color: "default" },
+        style: ({ theme }) => ({
+          backgroundColor: theme.palette.grey[50],
+          color: theme.palette.default.contrastText,
+          ":hover": {
+            backgroundColor: theme.palette.grey[100]
+          }
+        })
+      }
+    ]
   },
   MuiAvatar: {
     styleOverrides: {