componentes-sinco 1.0.2-rc.1 → 1.0.2-rc.4

package/dist/index.js

@@ -0,0 +1,3872 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Components/Drawer/SCDrawer.tsx
+import React4 from "react";
+import { Box as Box4, Drawer, Typography as Typography4, IconButton as IconButton3, Button as Button2, Stack as Stack3 } from "@mui/material";
+import Grid3 from "@mui/material/Grid2";
+import CloseIcon from "@mui/icons-material/Close";
+
+// src/Components/Textfield/SCTextField.tsx
+import React, { useEffect, useState } from "react";
+import { FormControl, IconButton, InputAdornment, InputLabel, OutlinedInput, FilledInput, Popover, Input, Box, Typography, SvgIcon, Tooltip } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { Visibility, VisibilityOff, InfoOutlined } from "@mui/icons-material";
+
+// src/Components/Textfield/Helpers/validateIcon.tsx
+import * as Muicon from "@mui/icons-material";
+function getIconComponent(name) {
+  if (typeof name !== "string") return name;
+  return name in Muicon ? Muicon[name] : void 0;
+}
+function getIconValidation(name) {
+  if (typeof name !== "string") {
+    return (name == null ? void 0 : name.type) ? "icon" : "text";
+  }
+  return name in Muicon ? "icon" : "text";
+}
+
+// src/Components/Textfield/Helpers/validateKeyDown.tsx
+function validateKeyDown(event2, format2) {
+  const key = event2.key;
+  const target = event2.target;
+  if (format2 === "int" && !/^[0-9]$/.test(key)) {
+    event2.preventDefault();
+  }
+  if (format2 === "decimal" && (target.value === "" && key === "." || key === "-" || key === "+")) {
+    event2.preventDefault();
+  }
+  if (target.type === "text") {
+    const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9\s_\-.,@]+$/;
+    if (!regex.test(key)) {
+      event2.preventDefault();
+    }
+  }
+}
+
+// src/Components/Textfield/Helpers/validateOnBlur.tsx
+var validateOnBlurField = ({
+  value,
+  required = false,
+  setError,
+  onBlur
+}) => (event2) => {
+  const isError = !value.trim() && required;
+  setError(isError);
+  if (onBlur) {
+    onBlur(event2);
+  }
+};
+
+// src/Components/Textfield/SCTextField.tsx
+var SCTextField = ({
+  //informativas
+  title,
+  iconTitle,
+  infoTitle,
+  label = "",
+  placeholder = "",
+  infoElement,
+  iconInputStart,
+  iconInputEnd,
+  maxLength,
+  //Apariencia
+  variant = "outlined",
+  format: format2,
+  disabled,
+  required,
+  size,
+  width = "100%",
+  color,
+  background,
+  //Funcionales
+  state,
+  value,
+  onChange,
+  onBlur,
+  onKeyDown
+}) => {
+  const inputComponents = {
+    outlined: OutlinedInput,
+    filled: FilledInput,
+    standard: Input
+  };
+  const InputComponent = inputComponents[variant] || OutlinedInput;
+  let IconInputStartValidation;
+  let IconInputEndValidation;
+  let IconInputStart;
+  let IconInputEnd;
+  let IconTitle;
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = useState(null);
+  const openInfoTitle = Boolean(anchorInfoTitle);
+  const [anchorInfoElement, setAnchorInfoElement] = useState(null);
+  const openInfoElement = Boolean(anchorInfoElement);
+  useEffect(() => {
+    if (error) {
+      setTimeout(() => {
+        setError(false);
+      }, 1e3);
+    }
+  }, [error]);
+  if (iconInputStart) {
+    IconInputStartValidation = getIconValidation(iconInputStart);
+    IconInputStart = getIconComponent(iconInputStart);
+  }
+  if (iconInputEnd) {
+    IconInputEndValidation = getIconValidation(iconInputEnd);
+    IconInputEnd = getIconComponent(iconInputEnd);
+  }
+  if (iconTitle) {
+    IconTitle = getIconComponent(iconTitle);
+  }
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleMouseDownPassword = (event2) => {
+    event2.preventDefault();
+  };
+  const handleKeyDown = (event2) => {
+    validateKeyDown(event2, format2);
+    if (onKeyDown) onKeyDown(event2);
+  };
+  const handleInputChange = (event2) => {
+    let valueMax = maxLength ? maxLength + 1 : 50;
+    if (event2.target.value.length < valueMax) {
+      if (state) {
+        state(event2.target.value);
+      }
+      if (onChange) {
+        onChange(event2);
+      }
+    }
+  };
+  const handleBlur = validateOnBlurField({ value, required, setError, onBlur });
+  const handleOpenInfoTitle = (event2) => {
+    setAnchorInfoTitle(event2.currentTarget);
+  };
+  const handleCloseInfoTitle = () => {
+    setAnchorInfoTitle(null);
+  };
+  const handleOpenInfoElement = (event2) => {
+    setAnchorInfoElement(event2.currentTarget);
+  };
+  const handleCloseInfoElement = () => {
+    setAnchorInfoElement(null);
+  };
+  return /* @__PURE__ */ React.createElement(Box, { sx: { width } }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center", mb: 1.25, gap: 0.5 }, iconTitle && IconTitle ? /* @__PURE__ */ React.createElement(SvgIcon, { color: "action", fontSize: "small", component: IconTitle }) : "", title ? /* @__PURE__ */ React.createElement(Typography, { mx: 0.5, variant: "subtitle2", color: "text.secondary" }, title) : "", infoTitle ? /* @__PURE__ */ React.createElement(React.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event2) => handleOpenInfoTitle(event2),
+      onMouseLeave: () => handleCloseInfoTitle()
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      sx: {
+        pointerEvents: "none",
+        "& .MuiBackdrop-root": {
+          backgroundColor: "transparent"
+        }
+      },
+      open: openInfoTitle,
+      anchorEl: anchorInfoTitle,
+      onClose: handleCloseInfoTitle,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      disableRestoreFocus: true
+    },
+    /* @__PURE__ */ React.createElement(Typography, { p: 2 }, infoTitle.text)
+  )) : /* @__PURE__ */ React.createElement(Tooltip, { title: infoTitle.text, "data-testid": "test-infoTitle", placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      color: "action",
+      fontSize: "small"
+    }
+  ))) : ""), /* @__PURE__ */ React.createElement(Grid, { container: true, sx: { flexWrap: "nowrap", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      color,
+      fullWidth: true,
+      size: size ? size : "medium",
+      variant,
+      sx: { background: background || "transparent", borderRadius: "4px" }
+    },
+    /* @__PURE__ */ React.createElement(
+      InputLabel,
+      {
+        "data-testid": "test-label",
+        htmlFor: "",
+        required: required && label !== "" ? true : false,
+        error,
+        disabled: disabled || false
+      },
+      label ? label : ""
+    ),
+    /* @__PURE__ */ React.createElement(
+      InputComponent,
+      {
+        size: size ? size : "medium",
+        fullWidth: true,
+        value,
+        error,
+        id: label == null ? void 0 : label.replace(/\s+/g, ""),
+        disabled: disabled != null ? disabled : false,
+        onKeyDown: handleKeyDown,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        inputProps: { maxLength: maxLength ? maxLength : 50 },
+        type: !showPassword && format2 === "password" ? "password" : (format2 || "text").toUpperCase() === "INT" || (format2 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
+        className: format2 === "password" && !showPassword ? "" : "",
+        placeholder,
+        startAdornment: iconInputStart ? /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ React.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
+        endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, format2 === "password" ? /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            "aria-label": "toggle password visibility",
+            onClick: handleClickShowPassword,
+            onMouseDown: handleMouseDownPassword,
+            edge: "end"
+          },
+          showPassword ? /* @__PURE__ */ React.createElement(VisibilityOff, null) : /* @__PURE__ */ React.createElement(Visibility, null)
+        ) : iconInputEnd === void 0 && infoElement !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          InfoOutlined,
+          {
+            "data-testid": "test-infoElement",
+            sx: { ml: 0.5 },
+            color: "action",
+            fontSize: "small",
+            component: "svg",
+            onMouseEnter: (event2) => handleOpenInfoElement(event2),
+            onMouseLeave: () => handleCloseInfoElement()
+          }
+        ), /* @__PURE__ */ React.createElement(
+          Popover,
+          {
+            sx: {
+              pointerEvents: "none",
+              "& .MuiBackdrop-root": {
+                backgroundColor: "transparent"
+              }
+            },
+            open: openInfoElement,
+            anchorEl: anchorInfoElement,
+            onClose: handleCloseInfoElement,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "left"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "left"
+            },
+            disableRestoreFocus: true
+          },
+          /* @__PURE__ */ React.createElement(Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
+        )) : /* @__PURE__ */ React.createElement(Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React.createElement(
+          InfoOutlined,
+          {
+            color: "action",
+            fontSize: "small"
+          }
+        ))) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ React.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
+        label: label ? label + (format2 === "password" && !showPassword ? "" : "") : "",
+        autoComplete: format2 === "password" ? "new-password" : "off"
+      }
+    )
+  ), (iconInputEnd !== void 0 || format2 === "password") && infoElement ? /* @__PURE__ */ React.createElement(React.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      "data-testid": "test-infoElement",
+      component: "svg",
+      sx: { marginLeft: "4px" },
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event2) => handleOpenInfoElement(event2),
+      onMouseLeave: handleCloseInfoElement
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      sx: { pointerEvents: "none" },
+      open: openInfoElement,
+      anchorEl: anchorInfoElement,
+      onClose: handleCloseInfoElement,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      disableRestoreFocus: true
+    },
+    /* @__PURE__ */ React.createElement(Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
+  )) : /* @__PURE__ */ React.createElement(Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      sx: { marginLeft: "4px" },
+      color: "action",
+      fontSize: "small"
+    }
+  ))) : ""));
+};
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+import React2, { useEffect as useEffect3, useState as useState3 } from "react";
+import { Stack, LinearProgress, Divider, Box as Box2, Typography as Typography2, IconButton as IconButton2, Button } from "@mui/material";
+import { Close, InfoRounded, CheckCircleRounded, WarningRounded, ErrorRounded, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+
+// src/Components/ToastNotification/useProgress.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useProgress = (timeProgress, lote) => {
+  const [progress, setProgress] = useState2(0);
+  useEffect2(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+        }
+        if (lote) {
+          const nextProgress = prev + lote;
+          return nextProgress <= 100 ? nextProgress : 100;
+        } else {
+          return prev + 1;
+        }
+      });
+    }, timeProgress * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeProgress, lote]);
+  return {
+    progress
+  };
+};
+var ToastProgress = (timeProgress) => {
+  const [progress, setProgress] = useState2(100);
+  useEffect2(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev <= 0) {
+          clearInterval(interval);
+        }
+        return prev - 1;
+      });
+    }, timeProgress * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeProgress]);
+  return {
+    progressToast: progress
+  };
+};
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+var SCToastNotification = (toast) => {
+  var _a;
+  const [stateOptions, setStateOptions] = useState3(true);
+  const [stateToast, setStateToast] = useState3(true);
+  const timeProgress = toast.time || 10;
+  const { progress } = useProgress(timeProgress);
+  const toastColorConfig = toast.type || "info";
+  const toastIconOption = {
+    success: /* @__PURE__ */ React2.createElement(CheckCircleRounded, { color: "success" }),
+    error: /* @__PURE__ */ React2.createElement(ErrorRounded, { color: "error" }),
+    warning: /* @__PURE__ */ React2.createElement(WarningRounded, { color: "warning" }),
+    info: /* @__PURE__ */ React2.createElement(InfoRounded, { color: "info" })
+  };
+  const acciones = [...toast.actions || [{ text: "Action", fn: () => {
+    alert("");
+  } }, { text: "Consultar", fn: () => {
+  } }]];
+  const ToastIconConfig = toastIconOption[toast.type];
+  const closeToast = () => {
+    setStateToast(false);
+  };
+  const toggleToastOptions = () => {
+    setStateOptions((prevShowOptions) => !prevShowOptions);
+  };
+  useEffect3(() => {
+    progress >= 100 && setStateToast(false);
+  }, [progress]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, stateToast && /* @__PURE__ */ React2.createElement(
+    Stack,
+    {
+      position: "fixed",
+      zIndex: 1400,
+      right: 16,
+      top: 16,
+      width: 370,
+      sx: {
+        boxShadow: (theme) => theme.shadows[8]
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      Box2,
+      {
+        padding: 1.5,
+        gap: 1.5,
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          backgroundColor: {
+            success: "success.50",
+            error: "error.50",
+            warning: "warning.50",
+            info: "info.50"
+          }[toastColorConfig]
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        Stack,
+        {
+          p: 1,
+          gap: 1,
+          borderRadius: 50,
+          bgcolor: {
+            success: "success.100",
+            error: "error.100",
+            warning: "warning.100",
+            info: "info.100"
+          }[(_a = toast.type) != null ? _a : "info"]
+        },
+        /* @__PURE__ */ React2.createElement(Stack, null, ToastIconConfig)
+      ),
+      /* @__PURE__ */ React2.createElement(Divider, { orientation: "vertical", flexItem: true }),
+      /* @__PURE__ */ React2.createElement(Stack, { width: 285 }, /* @__PURE__ */ React2.createElement(
+        Stack,
+        {
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2", color: "text.primary" }, toast.title),
+        /* @__PURE__ */ React2.createElement(
+          IconButton2,
+          {
+            size: "small",
+            "data-testid": "close-icon",
+            onClick: closeToast
+          },
+          /* @__PURE__ */ React2.createElement(Close, { fontSize: "small" })
+        )
+      ), /* @__PURE__ */ React2.createElement(Stack, { gap: 0.5 }, /* @__PURE__ */ React2.createElement(Typography2, { color: "text.primary", variant: "body2" }, toast.subtitle), !stateOptions && toast.listITems && toast.listITems.length > 0 && /* @__PURE__ */ React2.createElement(Stack, null, toast.listITems.map((element, i) => /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", key: i }, "\u2022 ", element)))), /* @__PURE__ */ React2.createElement(Stack, { justifyContent: "flex-end", flexDirection: "row", gap: 0.5 }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ React2.createElement(Stack, { flexDirection: "row", gap: 0.5 }, toast.actions.map((button, index) => /* @__PURE__ */ React2.createElement(
+        Button,
+        {
+          key: index,
+          color: toast.type === "info" ? "info" : toast.type === "success" ? "success" : toast.type === "error" ? "error" : "warning",
+          variant: "text",
+          onClick: button.fn,
+          disabled: button.disabled || false,
+          size: "small"
+        },
+        button.text.charAt(0).toUpperCase() + button.text.slice(1).toLowerCase()
+      ))), toast.seeMore && /* @__PURE__ */ React2.createElement(
+        Button,
+        {
+          onClick: toggleToastOptions,
+          size: "small",
+          variant: "text",
+          color: toastColorConfig
+        },
+        stateOptions ? "Ver m\xE1s" : "Ver menos",
+        stateOptions ? /* @__PURE__ */ React2.createElement(KeyboardArrowDown, null) : /* @__PURE__ */ React2.createElement(KeyboardArrowUp, null)
+      )))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      LinearProgress,
+      {
+        sx: {
+          ".MuiLinearProgress-bar": {
+            transition: "0.1s linear !important",
+            transform: "scaleX(-1)"
+          }
+        },
+        color: toastColorConfig,
+        variant: "determinate",
+        value: 100 - progress
+      }
+    )
+  ));
+};
+
+// src/Components/TextArea/Helpers/validateIcon.tsx
+import * as MuiIcons from "@mui/icons-material";
+function getIcon(name) {
+  if (!name || !(name in MuiIcons)) {
+    return null;
+  }
+  return MuiIcons[name];
+}
+
+// src/Components/TextArea/SCTextArea.tsx
+import React3, { useEffect as useEffect4, useState as useState4 } from "react";
+import { Typography as Typography3, Stack as Stack2, TextField, Box as Box3, Popover as Popover2, Tooltip as Tooltip2, SvgIcon as SvgIcon2, Grid2 } from "@mui/material";
+import { InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
+var SCTextArea = ({
+  //informativas
+  title,
+  iconTitle,
+  infoTitle,
+  label = "",
+  placeholder,
+  maxLength = 200,
+  //apariencia
+  variant,
+  disabled,
+  required,
+  width = "100%",
+  rows = 3,
+  colorTitle,
+  background,
+  //funcionales
+  state,
+  value,
+  onBlur
+}) => {
+  const [helperCount, setHelperCount] = useState4(0);
+  const [stateError, setStateError] = useState4(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = React3.useState(null);
+  const openInfoTitle = Boolean(anchorInfoTitle);
+  useEffect4(() => {
+    setHelperCount(value == null ? void 0 : value.length);
+  }, [value]);
+  const IconTitle = getIcon(iconTitle);
+  const handleBlur = (event2) => {
+    if (required && value.trim() === "") {
+      setStateError(true);
+      setTimeout(() => {
+        setStateError(false);
+      }, 1e3);
+      return;
+    }
+    if (onBlur) {
+      onBlur(event2);
+    }
+  };
+  const handleOpenInfoTitle = (event2) => {
+    setAnchorInfoTitle(event2.currentTarget);
+  };
+  const handleCloseInfoTitle = () => {
+    setAnchorInfoTitle(null);
+  };
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Box3, { sx: { width } }, /* @__PURE__ */ React3.createElement(Grid2, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ React3.createElement(SvgIcon2, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ React3.createElement(Typography3, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    InfoOutlined2,
+    {
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event2) => handleOpenInfoTitle(event2),
+      onMouseLeave: () => handleCloseInfoTitle()
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Popover2,
+    {
+      sx: { pointerEvents: "none" },
+      open: openInfoTitle,
+      anchorEl: anchorInfoTitle,
+      onClose: handleCloseInfoTitle,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      disableRestoreFocus: true
+    },
+    /* @__PURE__ */ React3.createElement(Typography3, { sx: { p: 2 } }, infoTitle.text)
+  )) : /* @__PURE__ */ React3.createElement(Tooltip2, { title: infoTitle.text, placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React3.createElement(
+    InfoOutlined2,
+    {
+      color: "action",
+      fontSize: "small"
+    }
+  ))) : ""), /* @__PURE__ */ React3.createElement(Stack2, null, /* @__PURE__ */ React3.createElement(
+    TextField,
+    {
+      required,
+      placeholder,
+      error: stateError,
+      variant,
+      sx: { mt: "10px", background: background || "transparent", borderRadius: "4px" },
+      id: "outlined-multiline-static",
+      label,
+      multiline: true,
+      disabled,
+      rows,
+      value,
+      onBlur: handleBlur,
+      onChange: (e) => {
+        if (state) {
+          state(e.target.value.substring(0, maxLength));
+        }
+      },
+      autoComplete: "off"
+    }
+  )), /* @__PURE__ */ React3.createElement(Stack2, null, /* @__PURE__ */ React3.createElement(
+    Typography3,
+    {
+      variant: "caption",
+      color: "text.secondary",
+      mr: 1,
+      mt: 1,
+      align: "right"
+    },
+    helperCount + "/" + maxLength
+  ))));
+};
+
+// src/Components/Drawer/Helpers/Utils.tsx
+import * as Muicon2 from "@mui/icons-material";
+import { FilterListOutlined } from "@mui/icons-material";
+var getIcon2 = (iconName) => {
+  if (iconName && iconName in Muicon2) {
+    return Muicon2[iconName];
+  }
+  return FilterListOutlined;
+};
+var cleanInputs = (arrayElements) => {
+  var _a, _b;
+  for (let i = 0; i < arrayElements.length; i++) {
+    if (arrayElements[i].component === void 0) {
+      (_b = (_a = arrayElements[i]).state) == null ? void 0 : _b.call(_a, "");
+    }
+  }
+};
+
+// src/Components/Drawer/Helpers/validateInput.tsx
+var validateInputs = (arrayElements, onError, onSuccess) => {
+  var _a;
+  let requiredValues = 0;
+  let filledValues = 0;
+  for (let i = 0; i < arrayElements.length; i++) {
+    if (arrayElements[i].component === void 0) {
+      if (arrayElements[i].required) {
+        requiredValues++;
+      }
+      if (arrayElements[i].required && ((_a = arrayElements[i].value) == null ? void 0 : _a.trim()) !== "") {
+        filledValues++;
+      }
+    }
+  }
+  if (requiredValues === filledValues) {
+    onSuccess();
+  } else {
+    onError({
+      type: "error",
+      title: "Algunos campos son requeridos",
+      time: 10
+    });
+  }
+};
+
+// src/generales/capitalize.tsx
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+// src/Components/Drawer/SCDrawer.tsx
+var SCDrawer = ({
+  //informativas
+  title,
+  arrayElements = [],
+  actions,
+  buttonDrawer,
+  //Apariencia
+  colorTitle,
+  anchor = "left",
+  width,
+  //Funcionales
+  open
+}) => {
+  var _a;
+  const [drawerOpen, setDrawerOpen] = React4.useState(open);
+  const [toast, setToast] = React4.useState(null);
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
+  };
+  const toggleDrawer = (newOpen) => () => {
+    setDrawerOpen(newOpen);
+  };
+  const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
+  const setToastWithDelay = (toastContent) => {
+    setToast(null);
+    setTimeout(() => {
+      setToast(toastContent);
+    }, 10);
+  };
+  const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
+  const clean = () => cleanInputs(arrayElements);
+  actions = actions != null ? actions : [{ text: "Limpiar", fn: clean }, { text: "Consultar", fn: inputValidation }];
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, toast && /* @__PURE__ */ React4.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ React4.createElement(
+    Button2,
+    {
+      "data-testid": "test-buttonDrawer",
+      sx: { textTransform: "capitalize" },
+      color: buttonDrawer == null ? void 0 : buttonDrawer.color,
+      onClick: toggleDrawer(true),
+      size: "small",
+      variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.variant : "text",
+      startIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) ? /* @__PURE__ */ React4.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" ? /* @__PURE__ */ React4.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null
+    },
+    capitalize((_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "Drawer")
+  ), /* @__PURE__ */ React4.createElement(
+    Drawer,
+    {
+      open: drawerOpen,
+      onClose: toggleDrawer(false),
+      anchor: anchor != null ? anchor : "left",
+      sx: {
+        "& .MuiDrawer-paper": {
+          width: width != null ? width : "450px",
+          boxSizing: "border-box",
+          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
+        }
+      }
+    },
+    /* @__PURE__ */ React4.createElement(Stack3, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React4.createElement(Grid3, { container: true, sx: { backgroundColor: "secondary.main", alignItems: "center", height: "42px", textAlign: "left", padding: "10px 12px 10px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React4.createElement(IconButton3, { onClick: handleDrawerClose }, /* @__PURE__ */ React4.createElement(CloseIcon, { color: "action", "data-testid": "test-button-close" }))), /* @__PURE__ */ React4.createElement(Stack3, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "12px 16px 12px 16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
+      var _a2, _b;
+      return /* @__PURE__ */ React4.createElement(
+        Box4,
+        {
+          key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b = arrayElement.label) != null ? _b : ""}${index}`,
+          sx: { width: "100%" }
+        },
+        arrayElement.component ? /* @__PURE__ */ React4.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ React4.createElement(
+          SCTextField,
+          {
+            title: arrayElement.title,
+            iconTitle: arrayElement.iconTitle,
+            infoTitle: arrayElement.infoTitle,
+            label: arrayElement.label,
+            placeholder: arrayElement.placeholder,
+            infoElement: arrayElement.infoElement,
+            iconInputStart: arrayElement.iconInputStart,
+            iconInputEnd: arrayElement.iconInputEnd,
+            maxLength: arrayElement.maxLength,
+            variant: arrayElement.variant,
+            format: arrayElement.format,
+            disabled: arrayElement.disabled,
+            required: arrayElement.required,
+            size: arrayElement.size,
+            width: arrayElement.width,
+            color: arrayElement.color,
+            background: arrayElement.background,
+            state: arrayElement.state,
+            value: arrayElement.value || "",
+            onChange: arrayElement.onChange,
+            onBlur: arrayElement.onBlur,
+            onKeyDown: arrayElement.onKeyDown
+          }
+        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ React4.createElement(
+          SCTextArea,
+          {
+            title: arrayElement.title,
+            iconTitle: arrayElement.iconTitle,
+            infoTitle: arrayElement.infoTitle,
+            label: arrayElement.label,
+            placeholder: arrayElement.placeholder,
+            maxLength: arrayElement.maxLength,
+            variant: arrayElement.variant,
+            disabled: arrayElement.disabled,
+            required: arrayElement.required,
+            width: arrayElement.width,
+            rows: arrayElement.rows,
+            background: arrayElement.background,
+            state: arrayElement.state,
+            value: arrayElement.value || "",
+            onBlur: arrayElement.onBlur
+          }
+        ) : null
+      );
+    })), actions != void 0 && actions.length > 0 ? /* @__PURE__ */ React4.createElement(
+      Grid3,
+      {
+        container: true,
+        bgcolor: "background.default",
+        gap: 2,
+        padding: "9px 16px 9px 16px",
+        height: "42px",
+        alignItems: "center",
+        justifyContent: actions.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
+        flexDirection: anchor != "right" ? "row-reverse" : "row"
+      },
+      actions.map((btn, index) => /* @__PURE__ */ React4.createElement(
+        Button2,
+        {
+          key: index,
+          variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: btn.fn,
+          disabled: btn.disabled || false,
+          size: "small"
+        },
+        btn.text
+      ))
+    ) : "")
+  ));
+};
+
+// src/Components/MultiSelect/SCMultiSelect.tsx
+import React5, { useEffect as useEffect5, useMemo as useMemo2 } from "react";
+import { Button as Button3, Checkbox, FormControl as FormControl2, InputAdornment as InputAdornment2, ListItemIcon, MenuItem, Popover as Popover3, Stack as Stack4, TextField as TextField2 } from "@mui/material";
+import { SearchOutlined } from "@mui/icons-material";
+
+// src/Components/MultiSelect/helpers/useHandlers.tsx
+import { useCallback, useState as useState5 } from "react";
+function useMultiSelectHandlers() {
+  const [anchorEl, setAnchorEl] = useState5(null);
+  const [open, setOpen] = useState5(false);
+  const [selectedItems, setSelectedItems] = useState5([]);
+  const [filterValue, setFilterValue] = useState5("");
+  const handleOpen = useCallback((e) => {
+    setAnchorEl(e.currentTarget);
+    setOpen(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+    setOpen(false);
+  }, []);
+  const handleFilterChange = useCallback(
+    (e) => {
+      setFilterValue(e.target.value);
+    },
+    []
+  );
+  const handleCheckboxToggle = useCallback((item) => {
+    setSelectedItems(
+      (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
+    );
+  }, []);
+  return {
+    anchorEl,
+    open,
+    selectedItems,
+    filterValue,
+    setSelectedItems,
+    handleOpen,
+    handleClose,
+    handleFilterChange,
+    handleCheckboxToggle,
+    setOpen
+  };
+}
+
+// src/Components/MultiSelect/helpers/Utils.tsx
+import * as MuiIcons2 from "@mui/icons-material";
+import { FilterListOutlined as FilterListOutlined2 } from "@mui/icons-material";
+function getIconMultiSelect(name) {
+  return name in MuiIcons2 ? MuiIcons2[name] : FilterListOutlined2;
+}
+
+// src/Components/MultiSelect/helpers/useFilteredItems.tsx
+import { useMemo } from "react";
+function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
+  const filteredItems = useMemo(
+    () => items.filter(
+      (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
+    ),
+    [items, filterValue, getItemLabel]
+  );
+  const sortedItems = useMemo(() => {
+    return [
+      ...filteredItems.filter((item) => selectedItems.includes(item)),
+      ...filteredItems.filter((item) => !selectedItems.includes(item))
+    ];
+  }, [filteredItems, selectedItems]);
+  return { filteredItems, sortedItems };
+}
+
+// src/Components/MultiSelect/SCMultiSelect.tsx
+function SCMultiSelect({
+  textButton,
+  button,
+  items,
+  topPanel,
+  actions,
+  dense = false,
+  open,
+  selectAll = false,
+  getItemLabel
+}) {
+  var _a, _b;
+  const {
+    anchorEl,
+    open: openMultiselect,
+    selectedItems,
+    filterValue,
+    setSelectedItems,
+    handleOpen,
+    handleClose,
+    handleFilterChange,
+    handleCheckboxToggle,
+    setOpen
+  } = useMultiSelectHandlers();
+  useEffect5(() => {
+    if (open !== void 0) {
+      setOpen(open);
+    }
+  }, [open, setOpen]);
+  useEffect5(() => {
+    setSelectedItems([]);
+  }, [items, setSelectedItems]);
+  const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
+  const Icon = useMemo2(() => {
+    var _a2;
+    return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
+  }, [button == null ? void 0 : button.icon]);
+  const handleSelectAll = () => {
+    const allSelected2 = selectedItems.length === filteredItems.length;
+    setSelectedItems(allSelected2 ? [] : filteredItems);
+  };
+  const allSelected = filteredItems.length > 0 && selectedItems.length === filteredItems.length;
+  const resolvedActions = actions != null ? actions : [
+    { text: "Limpiar", fn: handleClose },
+    { text: "Aplicar", fn: () => {
+    } }
+  ];
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Button3,
+    {
+      "test-id": "multiselect-button",
+      color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
+      onClick: handleOpen,
+      variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
+      size: "small",
+      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ React5.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ React5.createElement(Icon, null) : null
+    },
+    capitalize(textButton != null ? textButton : "MultiSelect")
+  ), /* @__PURE__ */ React5.createElement(
+    Popover3,
+    {
+      elevation: 8,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      open: openMultiselect,
+      onClose: () => setOpen(false)
+    },
+    /* @__PURE__ */ React5.createElement(Stack4, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ React5.createElement(Stack4, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ React5.createElement(FormControl2, { fullWidth: true, size: "small" }, /* @__PURE__ */ React5.createElement(
+      TextField2,
+      {
+        "data-testid": "multiselect-input",
+        fullWidth: true,
+        size: "small",
+        variant: "outlined",
+        placeholder: "Buscar",
+        value: filterValue,
+        onChange: handleFilterChange,
+        slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */ React5.createElement(InputAdornment2, { position: "end" }, /* @__PURE__ */ React5.createElement(SearchOutlined, { fontSize: "small" }))
+          }
+        }
+      }
+    ))), /* @__PURE__ */ React5.createElement(Stack4, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ React5.createElement(MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ React5.createElement(ListItemIcon, null, /* @__PURE__ */ React5.createElement(Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ React5.createElement(
+      MenuItem,
+      {
+        key: getItemLabel(item),
+        dense,
+        onClick: () => handleCheckboxToggle(item)
+      },
+      /* @__PURE__ */ React5.createElement(ListItemIcon, null, /* @__PURE__ */ React5.createElement(
+        Checkbox,
+        {
+          checked: selectedItems.includes(item),
+          color: "primary"
+        }
+      )),
+      getItemLabel(item)
+    )) : /* @__PURE__ */ React5.createElement(MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ React5.createElement(Stack4, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
+      var _a2;
+      return /* @__PURE__ */ React5.createElement(
+        Button3,
+        {
+          key: index,
+          variant: index === 0 || resolvedActions.length < 2 ? "text" : "contained",
+          onClick: button2.fn,
+          disabled: (_a2 = button2.disabled) != null ? _a2 : false,
+          size: "small"
+        },
+        capitalize(button2.text)
+      );
+    })))
+  ));
+}
+
+// src/Components/SCDialog.tsx
+import React6, { useEffect as useEffect6, useState as useState6 } from "react";
+import { Button as Button4, Typography as Typography5, Modal, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton4, Tooltip as Tooltip3, Box as Box5, SvgIcon as SvgIcon3 } from "@mui/material";
+import Grid4 from "@mui/material/Grid2";
+import CloseIcon2 from "@mui/icons-material/Close";
+import * as Muicon3 from "@mui/icons-material";
+var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, setShow, show }) => {
+  let i = 0;
+  let iconTitleValidation = "";
+  let IconTitle;
+  let ButtonIcon;
+  const [open, setOpen] = useState6(show);
+  useEffect6(() => {
+    if (show) {
+      handleOpen();
+    }
+  }, [show]);
+  if ((buttonDialog == null ? void 0 : buttonDialog.icon) != void 0) {
+    if (Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon] == void 0) {
+      ButtonIcon = buttonDialog == null ? void 0 : buttonDialog.icon;
+    } else {
+      ButtonIcon = Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon];
+    }
+  }
+  if (iconTitle) {
+    if (Muicon3[iconTitle] == void 0) {
+      if (iconTitle && React6.isValidElement(iconTitle) && iconTitle.type == void 0) {
+        iconTitleValidation = "image";
+        IconTitle = iconTitle;
+      } else {
+        iconTitleValidation = "icon";
+        IconTitle = iconTitle;
+      }
+    } else {
+      iconTitleValidation = "icon";
+      IconTitle = Muicon3[iconTitle];
+    }
+  }
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    setOpen(false);
+    if (setShow) {
+      setShow(false);
+    }
+  };
+  const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
+  content = content != null ? content : { component: /* @__PURE__ */ React6.createElement(Box5, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ React6.createElement("div", null, buttonDialog ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React6.createElement(Tooltip3, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React6.createElement(Button4, { 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) == "left" || !(buttonDialog == null ? void 0 : buttonDialog.iconPosition) ? /* @__PURE__ */ React6.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React6.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React6.createElement(IconButton4, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React6.createElement(SvgIcon3, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React6.createElement(Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React6.createElement(
+    Dialog,
+    {
+      open: open || false,
+      onClose: disableClose ? void 0 : handleClose,
+      maxWidth: "xl",
+      sx: {
+        width: "100% !important",
+        "& .MuiBackdrop-root": {
+          backdropFilter: "blur(0px) !important"
+        }
+      }
+    },
+    title && /* @__PURE__ */ React6.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, id: "dialog-title" }, /* @__PURE__ */ React6.createElement(Grid4, { container: true, size: 12, sx: { justifyContent: "space-between" } }, /* @__PURE__ */ React6.createElement(Grid4, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React6.createElement(Box5, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React6.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React6.createElement(SvgIcon3, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React6.createElement(Grid4, null, /* @__PURE__ */ React6.createElement(Typography5, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React6.createElement(Typography5, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React6.createElement(IconButton4, { onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React6.createElement(CloseIcon2, null)) : "")),
+    /* @__PURE__ */ React6.createElement(
+      DialogContent,
+      {
+        dividers: dividers ? dividers : false,
+        sx: {
+          m: 0,
+          padding: "12px 16px 8px 16px",
+          background: background ? background : "white",
+          height: !heightContent ? "508px" : heightContent,
+          width: widthContent == "extra-small" ? "444px" : widthContent == "small" ? "600px" : widthContent == "medium" ? "900px" : widthContent == "large" ? "1200px" : widthContent == "extra-large" ? "1536px" : "900px"
+        }
+      },
+      content.url ? /* @__PURE__ */ React6.createElement(
+        "iframe",
+        {
+          style: { border: "none", minWidth: "100%", minHeight: "100%" },
+          id: "inlineFrameExample",
+          title: "Inline Frame Example",
+          src: content.url
+        }
+      ) : content.component
+    ),
+    dialogActions.length > 0 ? /* @__PURE__ */ React6.createElement(DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px" } }, dialogActions.map((boton) => /* @__PURE__ */ React6.createElement(
+      Button4,
+      {
+        key: i = i + 1,
+        autoFocus: true,
+        variant: i == 1 || dialogActions.length < 2 ? "contained" : "text",
+        color: "primary",
+        size: "small",
+        onClick: boton.fn,
+        disabled: boton.disabled || false
+      },
+      boton.text
+    ))) : ""
+  )));
+};
+
+// src/Components/SCMenu.tsx
+import React7 from "react";
+import { Box as Box6, Typography as Typography6, Paper, Divider as Divider2, MenuList, MenuItem as MenuItem2, ListItemIcon as ListItemIcon2, SvgIcon as SvgIcon4 } from "@mui/material";
+import Grid5 from "@mui/material/Grid2";
+
+// src/Components/Hooks/useWindowDimensions.ts
+import { useState as useState7, useEffect as useEffect7 } from "react";
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState7(getWindowDimensions());
+  useEffect7(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+}
+
+// src/Components/SCMenu.tsx
+import * as Muicon4 from "@mui/icons-material";
+var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
+  const { height, width } = useWindowDimensions();
+  const menuSize = widthMenu ? parseInt(widthMenu) : 284;
+  const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
+  const widthContainer = menuSize + pageSize;
+  let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  const [selectedIndex, setSelectedIndex] = React7.useState("1");
+  const [value, setValue] = React7.useState("1");
+  React7.useEffect(() => {
+    heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  }, [height]);
+  React7.useEffect(() => {
+    if (defaultOption) {
+      handleClickMenusItem(event, void 0);
+    }
+  }, [defaultOption]);
+  options.map(function(option, index, array) {
+    if (option == null ? void 0 : option.iconLeft) {
+      if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
+        option.iconLeft = Muicon4[option == null ? void 0 : option.iconLeft];
+      } else {
+        option;
+      }
+    }
+    if (option == null ? void 0 : option.iconRight) {
+      if ((option == null ? void 0 : option.iconRight.type) == void 0) {
+        option.iconRight = Muicon4[option == null ? void 0 : option.iconRight];
+      } else {
+        option;
+      }
+    }
+  });
+  const handleClickMenusItem = (event2, index) => {
+    if (defaultOption && index == void 0) {
+      setSelectedIndex(defaultOption);
+      setValue(defaultOption);
+    } else if (index != void 0) {
+      setSelectedIndex(String(index + 1));
+      setValue(String(index + 1));
+    }
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Grid5, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React7.createElement(Paper, { sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React7.createElement(MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    MenuItem2,
+    {
+      disabled: disable == true ? true : false,
+      key: index,
+      selected: String(index + 1) === selectedIndex,
+      onClick: (event2) => handleClickMenusItem(event2, index)
+    },
+    option.iconLeft ? /* @__PURE__ */ React7.createElement(ListItemIcon2, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React7.createElement(SvgIcon4, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ React7.createElement(Grid5, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React7.createElement(Typography6, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React7.createElement(ListItemIcon2, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React7.createElement(SvgIcon4, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ React7.createElement(Divider2, null) : "")))), /* @__PURE__ */ React7.createElement(Grid5, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React7.createElement(Box6, { sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React7.createElement(Typography6, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+};
+
+// src/Components/SCTabs.tsx
+import React8, { useEffect as useEffect8 } from "react";
+import { Typography as Typography7, Box as Box7, SvgIcon as SvgIcon5, Tab, Tabs, Badge } from "@mui/material";
+import TabPanel from "@mui/lab/TabPanel";
+import TabContext from "@mui/lab/TabContext";
+import * as Muicon5 from "@mui/icons-material";
+var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
+  const [toast, setToast] = React8.useState(null);
+  let i = 0;
+  let j = 0;
+  let k = 0;
+  let l = 0;
+  let validateTypeIcon = true;
+  const [value, setValue] = React8.useState("1");
+  useEffect8(() => {
+    if (defaultOption) {
+      handleChange(event, void 0);
+    }
+  }, [defaultOption]);
+  options.map(function(option) {
+    const optionsLength = options.length;
+    if (option == null ? void 0 : option.iconOrBadge) {
+      if (typeIcon == "icon") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == true) {
+          validateTypeIcon = true;
+          option.iconOrBadge = Muicon5[option == null ? void 0 : option.iconOrBadge];
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser iconos de MUI, por favor verificar.",
+              time: 50
+            });
+          }, 10);
+          return;
+        }
+      } else if (typeIcon == "badge") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == false) {
+          validateTypeIcon = true;
+          option;
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser numeros para el badge, por favor verificar.",
+              time: 10
+            });
+          }, 10);
+          return;
+        }
+      }
+    }
+  });
+  const handleChange = (event2, newValue) => {
+    if (defaultOption && newValue == void 0) {
+      setValue(defaultOption);
+    } else if (newValue != void 0) {
+      setValue(newValue);
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React8.createElement(Box7, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React8.createElement(TabContext, { value }, /* @__PURE__ */ React8.createElement(
+    Tabs,
+    {
+      value,
+      onChange: handleChange,
+      variant: variant ? orientation == "vertical" && variant == "fullWidth" ? "standard" : variant : "standard",
+      scrollButtons: scrollButtons == false ? false : true,
+      visibleScrollbar: scrollButtons == false ? true : false,
+      textColor: colorTab,
+      indicatorColor: colorTab,
+      orientation: orientation || "horizontal",
+      sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
+    },
+    options.map((option) => /* @__PURE__ */ React8.createElement(
+      Tab,
+      {
+        value: String(i = i + 1),
+        key: j = j + 1,
+        label: option.name || "",
+        disabled: option.disabled || false,
+        iconPosition: iconPosition || "end",
+        icon: typeIcon == "badge" ? /* @__PURE__ */ React8.createElement(
+          Badge,
+          {
+            sx: {
+              width: "20px",
+              height: "20px",
+              "& .MuiBadge-badge": {
+                top: "10px",
+                right: "10px"
+              }
+            },
+            variant: "standard",
+            badgeContent: option.iconOrBadge,
+            color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
+          }
+        ) : typeIcon == "icon" ? /* @__PURE__ */ React8.createElement(SvgIcon5, { 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" }
+      }
+    ))
+  ), children, options.map((option) => /* @__PURE__ */ React8.createElement(
+    TabPanel,
+    {
+      key: k = k + 1,
+      value: String(l = l + 1),
+      sx: { padding: "16px" }
+    },
+    option.page ? option.page : /* @__PURE__ */ React8.createElement(Typography7, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ React8.createElement(Box7, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React8.createElement(SCToastNotification, __spreadValues({}, toast))));
+};
+
+// src/Components/FooterAction/FooterAction.tsx
+import React9 from "react";
+import { AppBar, Toolbar, Box as Box8, Typography as Typography8 } from "@mui/material";
+var FooterAction = ({
+  leftContent,
+  rightContent,
+  label,
+  variant
+}) => {
+  return /* @__PURE__ */ React9.createElement(
+    AppBar,
+    {
+      color: "inherit",
+      sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
+    },
+    /* @__PURE__ */ React9.createElement(
+      Toolbar,
+      {
+        id: "footer-toolbar",
+        sx: { gap: 1.5, minHeight: "50px !important" }
+      },
+      leftContent,
+      /* @__PURE__ */ React9.createElement(Box8, { flexGrow: 1 }),
+      label && /* @__PURE__ */ React9.createElement(Typography8, { variant: "body2", color: "text.secondary" }, label),
+      rightContent
+    )
+  );
+};
+
+// src/Components/Modal/Helpers/Data.tsx
+import React10 from "react";
+import { Info, Warning } from "@mui/icons-material";
+var modalStateConfig = {
+  info: {
+    color: "info",
+    defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
+    icon: /* @__PURE__ */ React10.createElement(Info, { color: "info", fontSize: "medium" })
+  },
+  delete: {
+    color: "delete",
+    defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
+    icon: /* @__PURE__ */ React10.createElement(Info, { color: "error", fontSize: "medium" })
+  },
+  warning: {
+    color: "warning",
+    defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
+    icon: /* @__PURE__ */ React10.createElement(Warning, { color: "warning", fontSize: "medium" })
+  }
+};
+
+// src/Components/Modal/Helpers/Utils.tsx
+import * as MuiIcons3 from "@mui/icons-material";
+import { FilterListOutlined as FilterListOutlined3 } from "@mui/icons-material";
+var getIconComponent2 = (iconName) => {
+  return iconName && MuiIcons3[iconName] ? MuiIcons3[iconName] : FilterListOutlined3;
+};
+var getModalColor = (state) => {
+  var _a;
+  const colors = {
+    info: "info.100",
+    delete: "error.100",
+    warning: "warning.100"
+  };
+  return (_a = colors[state]) != null ? _a : "warning.100";
+};
+var getButtonColor = (state) => {
+  var _a;
+  const colorMap = {
+    info: "info",
+    delete: "error",
+    warning: "warning"
+  };
+  return (_a = colorMap[state]) != null ? _a : "info";
+};
+
+// src/Components/Modal/SCModal.tsx
+import React11, { useCallback as useCallback2, useEffect as useEffect9, useMemo as useMemo3, useState as useState8 } from "react";
+import { Modal as Modal3, Box as Box9, Typography as Typography9, IconButton as IconButton6, Button as Button6, Stack as Stack5 } from "@mui/material";
+import { Close as Close2 } from "@mui/icons-material";
+var SCModal = ({
+  buttonModal,
+  state = "info",
+  open,
+  title,
+  description,
+  action
+}) => {
+  var _a, _b, _c, _d, _e;
+  const [openModal, setOpenModal] = useState8(open != null ? open : false);
+  useEffect9(() => {
+    if (open !== void 0) {
+      setOpenModal(open);
+    }
+  }, [open]);
+  const Icon = useMemo3(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
+  const handleClose = useCallback2(() => setOpenModal(false), []);
+  const toggleModal = (newOpen) => () => setOpenModal(newOpen);
+  const prevAction = useMemo3(
+    () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
+    } }],
+    [action, handleClose]
+  );
+  const { icon, defaultDescription } = modalStateConfig[state];
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    Button6,
+    {
+      "data-testid": "test-buttonModal",
+      color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
+      onClick: toggleModal(true),
+      variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
+      size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ React11.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ React11.createElement(Icon, null)
+    },
+    capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
+  ), /* @__PURE__ */ React11.createElement(Modal3, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ React11.createElement(
+    Box9,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: 400,
+        bgcolor: "background.paper",
+        borderRadius: 1,
+        boxShadow: 24
+      }
+    },
+    /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ React11.createElement(Typography9, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ React11.createElement(IconButton6, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ React11.createElement(Close2, { color: "action" }))),
+    /* @__PURE__ */ React11.createElement(Stack5, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Typography9, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ React11.createElement(
+      Stack5,
+      {
+        id: "Action",
+        direction: "row",
+        gap: 1,
+        p: 1,
+        justifyContent: "end",
+        bgcolor: "grey.50",
+        sx: { borderRadius: 1 }
+      },
+      /* @__PURE__ */ React11.createElement(
+        Button6,
+        {
+          color: "inherit",
+          variant: "text",
+          onClick: handleClose,
+          size: "small"
+        },
+        capitalize("cancelar")
+      ),
+      /* @__PURE__ */ React11.createElement(
+        Button6,
+        {
+          "data-testid": "test-aceptar",
+          color: getButtonColor(state),
+          variant: "contained",
+          onClick: (_e = action[0]) == null ? void 0 : _e.fn,
+          disabled: false,
+          size: "small"
+        },
+        capitalize(action[0].text)
+      )
+    )
+  )));
+};
+
+// src/Components/PageHeader/PageHeader.tsx
+import React12 from "react";
+import { Stack as Stack6, Typography as Typography10 } from "@mui/material";
+var PageHeader = ({
+  title,
+  subtitle,
+  actions,
+  buttonBack,
+  fixed,
+  shadow = true
+}) => {
+  return /* @__PURE__ */ React12.createElement(
+    Stack6,
+    {
+      "data-testid": "main-container",
+      justifyContent: "center",
+      height: 48,
+      position: fixed ? "fixed" : "relative",
+      width: fixed ? "100%" : "inherit",
+      bgcolor: "background.paper",
+      zIndex: 10,
+      sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
+    },
+    /* @__PURE__ */ React12.createElement(Stack6, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React12.createElement(Stack6, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ React12.createElement(Stack6, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ React12.createElement(Typography10, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ React12.createElement(Typography10, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ React12.createElement(Stack6, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
+  );
+};
+
+// src/Components/SCCalendarSwipeable.tsx
+import React13, { useState as useState9 } from "react";
+import { Typography as Typography11, IconButton as IconButton7, Box as Box10 } from "@mui/material";
+import Grid6 from "@mui/material/Grid2";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
+import { es } from "date-fns/locale";
+import { format, startOfWeek, addDays, isSameDay } from "date-fns";
+import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown";
+import KeyboardDoubleArrowUpIcon from "@mui/icons-material/KeyboardDoubleArrowUp";
+var SCCalendarSwipeable = ({
+  //informativas
+  //apariencia
+  background,
+  //funcionales
+  setState,
+  state
+}) => {
+  let convertFecha;
+  const [fecha, setFecha] = useState9(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = useState9();
+  const [stateVal, setstateVal] = React13.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = React13.useState(false);
+  const hoy = /* @__PURE__ */ new Date();
+  const inicioSemana = startOfWeek(fecha, { weekStartsOn: 0 });
+  const diasSemana = Array.from({ length: 7 }, (_, i) => addDays(inicioSemana, i));
+  React13.useEffect(() => {
+    if (fecha != null) {
+      handleConvertFecha(fecha);
+    }
+  }, [fecha]);
+  const handleConvertFecha = (fecha2) => {
+    if (fecha2) {
+      let day = (fecha2.getDate() < 10 ? "0" : "") + fecha2.getDate();
+      let month = (fecha2.getMonth() + 1 < 10 ? "0" : "") + (fecha2.getMonth() + 1);
+      let year = fecha2.getFullYear();
+      convertFecha = day + "/" + month + "/" + year;
+      setState(convertFecha);
+      setFecha(fecha2);
+    }
+  };
+  const toggleCalendar = (newOpen) => () => {
+    setOpenCalendar(newOpen);
+  };
+  const locale = __spreadValues({}, es);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React13.createElement(Box10, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React13.createElement(Grid6, { container: true, gap: 0.5, sx: {
+    justifyContent: "space-between",
+    padding: "12px 0px",
+    background: "transparent"
+  } }, diasSemana.map((dia) => /* @__PURE__ */ React13.createElement(Grid6, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React13.createElement(
+    Box10,
+    {
+      onClick: () => setFecha(dia),
+      sx: {
+        padding: "10px",
+        textAlign: "center",
+        backgroundColor: isSameDay(dia, fecha) ? "#2063a0" : "transparent",
+        cursor: "pointer",
+        borderRadius: "50%",
+        //border: '1px solid lightgray',
+        position: "relative"
+        //width: '36px',
+        //height: '36px',
+      }
+    },
+    /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
+  )))), /* @__PURE__ */ React13.createElement(Grid6, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React13.createElement(
+    StaticDatePicker,
+    {
+      orientation: "landscape",
+      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" } },
+      onChange: (newValue) => setFecha(newValue)
+    }
+  ), /* @__PURE__ */ React13.createElement(Grid6, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowUpIcon, null))))));
+};
+
+// src/Components/SCDataGrid.tsx
+import React14, { useEffect as useEffect11, useState as useState10 } from "react";
+import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
+import { LicenseInfo } from "@mui/x-license-pro";
+import { makeStyles } from "@mui/styles";
+var useStyles = makeStyles({
+  root: {
+    "& .MuiDataGrid-filler": {
+      display: "none !important"
+    },
+    "& .MuiDataGrid-footerContainer": {
+      minHeight: "26px !important",
+      height: "26px !important"
+    },
+    "& .MuiTablePagination-toolbar": {
+      minHeight: "25px !important",
+      height: "25px !important"
+    },
+    "& .MuiTablePagination-actions .MuiIconButton-root": {
+      padding: "0px !important"
+    },
+    "&.MuiDataGrid-root": {
+      "--DataGrid-topContainerHeight": "0px !important"
+      /* Cambia este valor según tus necesidades */
+    },
+    "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
+      "--height": "0px !important",
+      "minHeight": "0px !important",
+      "maxHeight": "0px !important"
+    },
+    "& .MuiDataGrid-cell": {
+      padding: "0 !important"
+    }
+  }
+});
+var SCDataGrid = (_a) => {
+  var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
+  const apiRef = useGridApiRef();
+  const classes = useStyles();
+  LicenseInfo.setLicenseKey(
+    "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
+  );
+  let validationTreeData = getTreeDataPath ? true : false;
+  let paginalion = 10;
+  let valor = 80;
+  let alto = 345;
+  let estilot = "compact";
+  let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
+  let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
+  let dataConvert = [];
+  const [groupDataLenght, setGroupDataLengh] = useState10(0);
+  checkboxSelection = checkboxSelection || false;
+  const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
+  width = width || "100%";
+  density = density || "compact";
+  agrupacion = agrupacion || false;
+  groupingColDef = groupingColDef || {};
+  getTreeDataPath = getTreeDataPath || void 0;
+  const [pageSize, setPageSize] = useState10(rows);
+  const [arrayRows, setArrayRows] = useState10([]);
+  const [heightTable, setHeightTable] = useState10(height || 0);
+  useEffect11(() => {
+    if ((data == null ? void 0 : data.length) > 0) {
+      dataConvertRows(data, void 0);
+      if (validationTreeData) {
+        countGroupedElements(data, getTreeDataPath);
+      }
+    }
+  }, [data]);
+  useEffect11(() => {
+    if (groupDataLenght > 0 && validationTreeData == true) {
+      setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
+    } else if (groupDataLenght <= 0 && validationTreeData == false) {
+      setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
+    }
+  }, [groupDataLenght]);
+  const dataConvertRows = (data2, columnId) => {
+    let dataConvert2 = [];
+    if ((data2 == null ? void 0 : data2.length) > 0) {
+      const dataKeys = Object.keys(data2[0]);
+      data2.map((item) => {
+        const newKeys = {};
+        let i = 0;
+        let id = dataConvert2.length + 1;
+        for (i = 0; i < dataKeys.length; i++) {
+          newKeys[dataKeys[i]] = item[dataKeys[i]];
+        }
+        newKeys.id = columnId ? item[columnId] : id;
+        dataConvert2 = [...dataConvert2, newKeys];
+      });
+    }
+    setArrayRows(dataConvert2);
+  };
+  const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
+  const [selectionModel, setSelectionModel] = useState10([]);
+  const handleSelectionChange = (newSelection) => {
+    console.log(data);
+    console.log(arrayRows);
+    if (groupDataLenght > 0 && validationTreeData == true) {
+      let numberGrouped = 0;
+      let idsRowSelectBefore = [];
+      let idRowSelect = [];
+      for (let i = 0; i < newSelection.length; i++) {
+        if (typeof newSelection[i] === "string") {
+          if (newSelection[i].includes("auto-generated-row-null")) {
+            numberGrouped = i;
+          }
+        } else {
+          idsRowSelectBefore.push(newSelection[i]);
+        }
+      }
+      arrayRows.forEach((array) => {
+        if (typeof newSelection[numberGrouped] === "string") {
+          if (newSelection[numberGrouped].includes(array.name)) {
+            idRowSelect.push(array.id);
+          }
+        }
+      });
+      if (idRowSelect !== null) {
+        const soloEnArr1 = idsRowSelectBefore.filter((elemento) => !idRowSelect.includes(elemento));
+        const hasCommonElements = idsRowSelectBefore.some((element) => idRowSelect.includes(element));
+        if (hasCommonElements == true) {
+          setSelectionModel([...soloEnArr1]);
+        } else {
+          setSelectionModel([...idsRowSelectBefore, ...idRowSelect]);
+        }
+      }
+    } else {
+      setSelectionModel([...newSelection]);
+    }
+  };
+  const countGroupedElements = (row, getTreeDataPath2) => {
+    const groupedCounts = {};
+    data.forEach((row2) => {
+      const path = getTreeDataPath2(row2) || [];
+      const key = path[0];
+      if (!groupedCounts[key]) {
+        groupedCounts[key] = 0;
+      }
+      groupedCounts[key]++;
+    });
+    setGroupDataLengh(Object.keys(groupedCounts).length);
+    return groupedCounts;
+  };
+  const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, heightTable > 0 ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ React14.createElement(
+    DataGridPro,
+    __spreadProps(__spreadValues({
+      apiRef
+    }, props), {
+      rows: arrayRows,
+      columns,
+      density,
+      treeData: validationTreeData,
+      getTreeDataPath,
+      groupingColDef: validationTreeData == true ? groupingColDef : false,
+      pagination: true,
+      initialState: {
+        pagination: { paginationModel: { pageSize: rows } }
+      },
+      checkboxSelection,
+      rowSelectionModel: selectionModel,
+      onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
+      isRowSelectable,
+      disableRowSelectionOnClick: true,
+      className: classes.root,
+      localeText: {
+        noRowsLabel: "No hay filas",
+        columnMenuLabel: "Men\xFA de columna",
+        footerTotalRows: "Filas Totales:",
+        footerRowSelected: (count) => `${count.toLocaleString()} fila(s) seleccionada(s)`,
+        // Ejemplo de traducción dinámica
+        MuiTablePagination: {
+          labelRowsPerPage: "Filas por p\xE1gina:",
+          labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
+        }
+      }
+    })
+  ))) : "");
+};
+
+// src/Components/SCAutocomplete.tsx
+import React15, { useEffect as useEffect12 } from "react";
+import { Autocomplete, Checkbox as Checkbox2, InputAdornment as InputAdornment3, MenuItem as MenuItem3, TextField as TextField3, Typography as Typography12, SvgIcon as SvgIcon7, ListItemIcon as ListItemIcon3, ListItemText, Divider as Divider3, FormControlLabel, IconButton as IconButton8, Chip, Box as Box11, Button as Button8 } from "@mui/material";
+import Grid7 from "@mui/material/Grid2";
+import { Search, Clear } from "@mui/icons-material";
+import * as Muicon6 from "@mui/icons-material";
+function SCAutocomplete({
+  label = "",
+  data,
+  columnGroup,
+  getItemValue,
+  type = "normal",
+  checkMassive = false,
+  deleteType = "button",
+  fnAplicar,
+  required,
+  disabled,
+  background,
+  setState,
+  state
+}) {
+  const labelContent = `<span class="red-asterisk">* </span>` + label;
+  let group = "";
+  let isSelected = false;
+  const [selectedOptions, setSelectedOptions] = React15.useState([]);
+  const [prevData, setPrevData] = React15.useState(data);
+  useEffect12(() => {
+    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
+    if (dataChangeValidation == false) {
+      setState({ hiddenValue: "-1", textValue: "" });
+      setSelectedOptions([]);
+      setPrevData(data);
+    }
+  }, [data]);
+  useEffect12(() => {
+    if (type == "multiselect") {
+      if (state.hiddenValue != "-1") {
+        setSelectedOptions(data.filter(
+          (item) => Array.isArray(state.hiddenValue) ? state.hiddenValue.includes(getItemValue(item).value) : getItemValue(item).value === state.hiddenValue
+        ));
+      }
+    }
+  }, [state.hiddenValue]);
+  data.map(function(option, index, array) {
+    if (option == null ? void 0 : option.icon) {
+      if ((option == null ? void 0 : option.icon.type) == void 0) {
+        option.icon = Muicon6[option == null ? void 0 : option.icon];
+      } else {
+        option;
+      }
+    }
+  });
+  const cleanOptions = (event2) => {
+    setState({ hiddenValue: "-1", textValue: "" });
+    setSelectedOptions([]);
+  };
+  const handleCheckAll = (event2) => {
+    if (event2.target.checked) {
+      setSelectedOptions(data);
+      setState({
+        hiddenValue: data.map((item) => getItemValue(item).value),
+        textValue: data.map((item) => getItemValue(item).text)
+      });
+    } else {
+      setSelectedOptions([]);
+      setState({ hiddenValue: "-1", textValue: "" });
+    }
+  };
+  const allSelected = data.length > 0 && selectedOptions.length === data.length;
+  const handleChange = (event2, value) => {
+    if (type === "multiselect") {
+      const ids = value.map((v) => getItemValue ? getItemValue(v).value : "");
+      const texts = value.map((v) => getItemValue ? getItemValue(v).text : "");
+      setSelectedOptions(value);
+      setState({
+        hiddenValue: ids,
+        textValue: texts
+      });
+    } else {
+      setState({
+        hiddenValue: getItemValue(value).value,
+        textValue: getItemValue(value).text
+      });
+    }
+  };
+  const selectedValue = type === "multiselect" ? data.filter(
+    (item) => state.hiddenValue.includes(getItemValue(item).value)
+  ) : data.find(
+    (item) => getItemValue(item).value === state.hiddenValue
+  ) || null;
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, data && /* @__PURE__ */ React15.createElement(
+    Autocomplete,
+    {
+      multiple: type === "multiselect",
+      clearOnEscape: true,
+      disabled,
+      options: data,
+      onChange: handleChange,
+      getOptionLabel: (option) => getItemValue(option).text,
+      value: selectedValue,
+      sx: {
+        background: background || "transparent",
+        width: "100%",
+        maxWidth: "100%",
+        "& .MuiAutocomplete-tag": {
+          maxWidth: 120,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          flexWrap: "nowrap !important",
+          overflowX: "auto"
+        }
+      },
+      limitTags: 2,
+      renderTags: (value, getTagProps) => {
+        const limit = 2;
+        return /* @__PURE__ */ React15.createElement(React15.Fragment, null, value.slice(0, limit).map((option, index) => /* @__PURE__ */ React15.createElement(
+          Chip,
+          __spreadProps(__spreadValues({
+            color: "default",
+            size: "small",
+            variant: "filled",
+            label: getItemValue(option).text
+          }, getTagProps({ index })), {
+            style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+          })
+        )), value.length > limit && /* @__PURE__ */ React15.createElement(Box11, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
+      },
+      renderOption: (props, option) => {
+        const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
+        let isValid;
+        if (type == "multiselect") {
+          isSelected = selectedOptions.some(
+            (selected) => getItemValue(selected).value === getItemValue(option).value
+          );
+        }
+        if (columnGroup) {
+          isValid = group == option[columnGroup];
+          group = option[columnGroup];
+        }
+        return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ React15.createElement(Typography12, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ React15.createElement(MenuItem3, __spreadProps(__spreadValues({}, optionProps), { style: { background: type != "multiselect" ? state.hiddenValue == getItemValue(option).value ? "#dfe6ec" : "white" : "white", padding: "7px 16px" } }), type != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ React15.createElement(ListItemIcon3, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React15.createElement(SvgIcon7, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", type == "multiselect" ? /* @__PURE__ */ React15.createElement(Checkbox2, { checked: isSelected, value: getItemValue(option).text, color: "primary" }) : "", /* @__PURE__ */ React15.createElement(ListItemText, { primary: getItemValue(option).text, color: "text.primary" }))));
+      },
+      renderInput: (params) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+        TextField3,
+        __spreadProps(__spreadValues({}, params), {
+          label: required ? /* @__PURE__ */ React15.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+          placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
+          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+            endAdornment: /* @__PURE__ */ React15.createElement(React15.Fragment, null, deleteType == "icon" && state.hiddenValue != "-1" ? /* @__PURE__ */ React15.createElement(IconButton8, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ React15.createElement(Clear, { fontSize: "small" })) : "", /* @__PURE__ */ React15.createElement(InputAdornment3, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ React15.createElement(Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
+          })
+        })
+      )),
+      slotProps: {
+        listbox: {
+          component: React15.forwardRef(function ListboxComponent(props, ref) {
+            return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+              Box11,
+              __spreadProps(__spreadValues({
+                ref
+              }, props), {
+                sx: __spreadValues({
+                  position: "relative",
+                  paddingBottom: "56px",
+                  backgroundColor: "white"
+                }, props.sx)
+              }),
+              checkMassive && type == "multiselect" ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(FormControlLabel, { control: /* @__PURE__ */ React15.createElement(Checkbox2, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los item", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ React15.createElement(Divider3, null)) : "",
+              props.children,
+              deleteType == "button" || fnAplicar ? /* @__PURE__ */ React15.createElement(
+                Grid7,
+                {
+                  container: true,
+                  sx: {
+                    position: "sticky",
+                    bottom: -8,
+                    left: 0,
+                    width: "100%",
+                    backgroundColor: "grey.50",
+                    padding: "8px 16px",
+                    textAlign: "left",
+                    justifyContent: "space-between"
+                  }
+                },
+                deleteType == "button" ? /* @__PURE__ */ React15.createElement(
+                  Button8,
+                  {
+                    variant: "text",
+                    color: "primary",
+                    size: "small",
+                    onClick: (event2) => {
+                      event2.stopPropagation();
+                      cleanOptions(event2);
+                    }
+                  },
+                  "Limpiar"
+                ) : "",
+                fnAplicar && /* @__PURE__ */ React15.createElement(
+                  Button8,
+                  {
+                    variant: "contained",
+                    color: "primary",
+                    size: "small",
+                    onClick: fnAplicar
+                  },
+                  "Aplicar"
+                )
+              ) : ""
+            ));
+          })
+        }
+      }
+    }
+  ));
+}
+
+// src/Theme/index.ts
+import { createTheme } from "@mui/material/styles";
+
+// src/Theme/components.ts
+import React16 from "react";
+import {
+  InfoRounded as InfoRounded2,
+  CheckCircleRounded as CheckCircleRounded2,
+  WarningRounded as WarningRounded2,
+  ErrorRounded as ErrorRounded2
+} from "@mui/icons-material";
+var components = {
+  MuiSelect: {
+    styleOverrides: {
+      outlined: {
+        paddingBlock: "13px"
+      },
+      iconStandard: {
+        "&.MuiSelect-iconStandard.MuiSvgIcon-root": {
+          top: "calc(50% - .4em)"
+        }
+      },
+      iconFilled: {
+        "&.MuiSelect-iconFilled.MuiSvgIcon-root": {
+          top: "calc(50% - .15em)"
+        }
+      },
+      iconOutlined: {
+        "&.MuiSelect-iconOutlined.MuiSvgIcon-root": {
+          top: "calc(50% - .35em)"
+        }
+      },
+      icon: {
+        width: 16,
+        height: 16
+      },
+      root: {
+        fontSize: 13,
+        fontStyle: "normal",
+        fontWeight: 400,
+        letterSpacing: "0.15px",
+        lineHeight: "19px"
+      }
+    }
+  },
+  MuiSpeedDialIcon: {
+    styleOverrides: {
+      icon: {
+        height: 24,
+        width: 24
+      }
+    }
+  },
+  MuiSpeedDialAction: {
+    styleOverrides: {
+      fab: {
+        height: 40,
+        width: 40
+      }
+    }
+  },
+  MuiBadge: {
+    styleOverrides: {
+      badge: {
+        fontSize: "11px",
+        fontWeight: 400,
+        lineHeight: "11px",
+        letterSpacing: ".14px"
+      }
+    }
+  },
+  MuiSpeedDial: {
+    styleOverrides: {
+      fab: {
+        height: 56,
+        width: 56
+      }
+    }
+  },
+  MuiAccordion: {
+    styleOverrides: {
+      root: {
+        ".MuiButtonBase-root.MuiAccordionSummary-root": {
+          minHeight: 44,
+          height: 44
+        }
+      }
+    }
+  },
+  MuiTabs: {
+    styleOverrides: {
+      root: {
+        minHeight: 40
+      }
+    }
+  },
+  MuiTab: {
+    styleOverrides: {
+      labelIcon: {
+        paddingBlock: 10
+      },
+      root: {
+        textTransform: "none",
+        minHeight: 40
+      }
+    }
+  },
+  MuiDataGrid: {
+    defaultProps: {
+      density: "compact"
+    },
+    styleOverrides: {
+      columnHeader: {
+        variants: [
+          {
+            props: { density: "compact" },
+            style: {
+              "--height": "24px",
+              minHeight: "24px !important",
+              maxHeight: "24px !important"
+            }
+          },
+          {
+            props: { density: "standard" },
+            style: {
+              "--height": "36px",
+              minHeight: "36px !important",
+              maxHeight: "36px !important"
+            }
+          },
+          {
+            props: { density: "comfortable" },
+            style: {
+              "--height": "52px",
+              minHeight: "52px !important",
+              maxHeight: "52px !important"
+            }
+          }
+        ]
+      },
+      columnSeparator: {
+        variants: [
+          {
+            props: { density: "compact" },
+            style: {
+              "--height": "24px",
+              minHeight: "24px !important",
+              maxHeight: "24px !important"
+            }
+          },
+          {
+            props: { density: "standard" },
+            style: {
+              "--height": "36px",
+              minHeight: "36px !important",
+              maxHeight: "36px !important"
+            }
+          },
+          {
+            props: { density: "comfortable" },
+            style: {
+              "--height": "52px",
+              minHeight: "52px !important",
+              maxHeight: "52px !important"
+            }
+          }
+        ]
+      },
+      iconButtonContainer: {
+        fontSize: 16
+      },
+      columnHeaderDraggableContainer: {
+        variants: [
+          {
+            props: { density: "compact" },
+            style: {
+              "--height": "24px",
+              minHeight: "24px !important",
+              maxHeight: "24px !important"
+            }
+          },
+          {
+            props: { density: "standard" },
+            style: {
+              "--height": "36px",
+              minHeight: "36px !important",
+              maxHeight: "36px !important"
+            }
+          },
+          {
+            props: { density: "comfortable" },
+            style: {
+              "--height": "52px",
+              minHeight: "52px !important",
+              maxHeight: "52px !important"
+            }
+          }
+        ]
+      },
+      columnHeaderTitle: {
+        fontFamily: "Roboto",
+        fontWeight: 500,
+        fontSize: 13,
+        lineHeight: 1.5,
+        letterSpacing: 0.17
+      },
+      row: {
+        variants: [
+          {
+            props: { density: "compact" },
+            style: {
+              "--height": "22px",
+              minHeight: "22px !important",
+              maxHeight: "22px !important"
+            }
+          },
+          {
+            props: { density: "standard" },
+            style: {
+              "--height": "28px",
+              minHeight: "28px !important",
+              maxHeight: "28px !important"
+            }
+          },
+          {
+            props: { density: "comfortable" },
+            style: {
+              "--height": "48px",
+              minHeight: "48px !important",
+              maxHeight: "48px !important"
+            }
+          }
+        ]
+      },
+      cell: {
+        fontFamily: "Roboto",
+        fontWeight: 300,
+        fontSize: 12,
+        lineHeight: 1.5,
+        letterSpacing: 0.17,
+        display: "flex",
+        alignItems: "center",
+        variants: [
+          {
+            props: { density: "compact" },
+            style: {
+              "--height": "22px",
+              minHeight: "22px !important",
+              maxHeight: "22px !important"
+            }
+          },
+          {
+            props: { density: "standard" },
+            style: {
+              "--height": "28px",
+              minHeight: "28px !important",
+              maxHeight: "28px !important"
+            }
+          },
+          {
+            props: { density: "comfortable" },
+            style: {
+              "--height": "48px",
+              minHeight: "48px !important",
+              maxHeight: "48px !important"
+            }
+          }
+        ],
+        // COMPONENTES DENTRO DE CELDAS
+        ".MuiButtonBase-root": {
+          lineHeight: 0,
+          textTransform: "capitalize"
+        },
+        // CELDA ENFOCADA
+        ".MuiDataGrid-cell": {
+          "&:focus": {
+            outline: "transparent",
+            borderWidth: 0
+          }
+        }
+      },
+      // BOTOM MENU EN LAS CABECERA DE CADA COLUMNA
+      menuIconButton: {
+        svg: {
+          fontSize: "16px"
+        }
+      },
+      menu: {
+        svg: {
+          fontSize: "16px !important"
+        },
+        ".MuiMenuItem-root": {
+          minHeight: "28px",
+          height: "28px"
+        }
+      },
+      pinnedRows: {
+        borderTop: "1px solid rgba(228, 236, 244, 1)"
+      },
+      root: {
+        // FONT-SIZE DE CELDA EN MODO EDICION
+        ".MuiInputBase-root": {
+          fontFamily: "Roboto",
+          fontWeight: 300,
+          fontSize: 12,
+          letterSpacing: 0.17,
+          borderRadius: "0px"
+        },
+        // CELDA FOCUS
+        ".Mui-focused, .MuiOutlinedInput-notchedOutline": {
+          borderWidth: "0px !important"
+        },
+        // TAMAÑO PEQUEÑO
+        "&.MuiDataGrid-root--densityCompact": {
+          ".MuiSvgIcon-root": {
+            fontSize: 16
+          },
+          ".MuiDataGrid-cellCheckbox": {
+            ".MuiButtonBase-root": {
+              padding: 4
+            }
+          }
+        }
+      }
+    }
+  },
+  MuiRating: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      sizeSmall: {
+        fontSize: 18
+      },
+      sizeMedium: {
+        fontSize: 24
+      },
+      sizeLarge: {
+        fontSize: 30
+      }
+    }
+  },
+  MuiDrawer: {
+    styleOverrides: {
+      root: {
+        boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
+      }
+    }
+  },
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        backgroundColor: "#424242"
+      }
+    }
+  },
+  MuiDialog: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        boxShadow: "0px 11px 15px -7px rgba(24, 39, 75, 0.2), 0px 24px 38px 3px rgba(24, 39, 75, 0.14), 0px 9px 46px 8px rgba(24, 39, 75, 0.12)",
+        "& .MuiBackdrop-root": {
+          backgroundColor: "#00000047"
+        }
+      })
+    }
+  },
+  MuiBackdrop: {
+    styleOverrides: {
+      root: {
+        backgroundColor: "#00000047"
+      }
+    }
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px !important"
+      }
+    }
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px !important"
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: {
+        padding: "12px 16px !important"
+      }
+    }
+  },
+  MuiCheckbox: {
+    variants: [
+      {
+        props: { size: "large" },
+        style: {
+          padding: 9,
+          "& .MuiSvgIcon-fontSizeLarge": {
+            height: 24,
+            width: 24,
+            fontSize: 24
+          }
+        }
+      },
+      {
+        props: { size: "small" },
+        style: {
+          padding: 3
+        }
+      },
+      {
+        props: { size: "medium" },
+        style: {
+          padding: 4
+        }
+      }
+    ],
+    defaultProps: {
+      size: "small"
+    }
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      sizeSmall: {
+        height: 32
+      },
+      sizeMedium: {
+        height: 38
+      },
+      sizeLarge: {
+        height: 48
+      }
+    }
+  },
+  MuiChip: {
+    defaultProps: {
+      size: "small",
+      variant: "standard",
+      color: "default"
+    },
+    styleOverrides: {
+      icon: {
+        opacity: "70%"
+      },
+      deleteIconSmall: {
+        height: 16,
+        width: 16
+      },
+      deleteIconMedium: {
+        height: 20,
+        width: 20
+      },
+      sizeSmall: {
+        height: 16
+      },
+      sizeMedium: {
+        height: 20
+      },
+      avatarSmall: {
+        height: 14,
+        width: 14
+      },
+      avatarMedium: {
+        height: 18,
+        width: 18
+      },
+      iconColorPrimary: ({ theme }) => ({
+        color: theme.palette.primary.main
+      }),
+      colorDefault: ({ theme }) => ({
+        backgroundColor: theme.palette.default.main,
+        color: theme.palette.default.contrastText
+      }),
+      deleteIcon: ({ theme }) => ({
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: {
+              color: theme.palette.background.paper,
+              opacity: "50%"
+            }
+          },
+          {
+            props: { variant: "standard" },
+            style: {
+              color: theme.palette.default.contrastText,
+              opacity: "30%",
+              ":hover": {
+                color: theme.palette.default.contrastText,
+                opacity: "30%"
+              }
+            }
+          },
+          {
+            props: { variant: "outlined" },
+            style: {
+              color: theme.palette.action.active,
+              opacity: "54%",
+              ":hover": {
+                color: theme.palette.action.active,
+                opacity: "54%"
+              }
+            }
+          },
+          {
+            props: { variant: "filled", color: "default" },
+            style: {
+              color: theme.palette.default.contrastText,
+              opacity: "30%"
+            }
+          }
+        ]
+      }),
+      avatar: ({ theme }) => ({
+        lineHeight: 1.8,
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: {
+              backgroundColor: theme.palette.background.paper,
+              opacity: "70%",
+              color: theme.palette.default.contrastText
+            }
+          },
+          {
+            props: { variant: "standard" },
+            style: {
+              backgroundColor: theme.palette.default.contrastText,
+              color: theme.palette.primary.contrastText
+            }
+          },
+          {
+            props: { variant: "outlined", color: "error" },
+            style: {
+              backgroundColor: theme.palette.error.main,
+              color: theme.palette.background.paper
+            }
+          },
+          {
+            props: { variant: "outlined", color: "success" },
+            style: {
+              backgroundColor: theme.palette.success.main,
+              color: theme.palette.background.paper
+            }
+          },
+          {
+            props: { variant: "outlined", color: "info" },
+            style: {
+              backgroundColor: theme.palette.info.main,
+              color: theme.palette.background.paper
+            }
+          },
+          {
+            props: { variant: "outlined", color: "warning" },
+            style: {
+              backgroundColor: theme.palette.warning.main,
+              color: theme.palette.background.paper
+            }
+          },
+          {
+            props: { variant: "outlined", color: "default" },
+            style: {
+              backgroundColor: theme.palette.grey[400],
+              color: theme.palette.background.paper
+            }
+          },
+          {
+            props: { variant: "filled", color: "default" },
+            style: {
+              backgroundColor: theme.palette.default.contrastText,
+              color: theme.palette.background.paper
+            }
+          }
+        ]
+      }),
+      label: ({ theme }) => __spreadValues({}, theme.typography.caption),
+      root: ({ theme }) => ({
+        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: {
+              backgroundColor: theme.palette.default.contrastText,
+              color: theme.palette.default.contrastText
+            }
+          },
+          {
+            props: { variant: "standard" },
+            style: {
+              backgroundColor: theme.palette.default.contrastText,
+              color: theme.palette.default.contrastText
+            }
+          },
+          {
+            props: { variant: "standard", color: "primary" },
+            style: {
+              backgroundColor: theme.palette.chipPrimary.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipPrimary.dark
+              }
+            }
+          },
+          {
+            props: { variant: "standard", color: "secondary" },
+            style: {
+              backgroundColor: theme.palette.chipSecondary.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipSecondary.dark
+              }
+            }
+          },
+          {
+            props: { variant: "standard", color: "info" },
+            style: {
+              backgroundColor: theme.palette.chipInfo.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipInfo.dark
+              }
+            }
+          },
+          {
+            props: { variant: "standard", color: "error" },
+            style: {
+              backgroundColor: theme.palette.chipError.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipError.dark
+              }
+            }
+          },
+          {
+            props: { variant: "standard", color: "success" },
+            style: {
+              backgroundColor: theme.palette.chipSuccess.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipSuccess.dark
+              }
+            }
+          },
+          {
+            props: { variant: "standard", color: "warning" },
+            style: {
+              backgroundColor: theme.palette.chipWarning.main,
+              ":hover": {
+                backgroundColor: theme.palette.chipWarning.dark
+              }
+            }
+          }
+        ]
+      })
+    }
+  },
+  MuiAvatar: {
+    styleOverrides: {
+      root: {
+        display: "flex",
+        alignContent: "center"
+      }
+    }
+  },
+  MuiAlert: {
+    defaultProps: {
+      iconMapping: {
+        success: React16.createElement(CheckCircleRounded2),
+        error: React16.createElement(ErrorRounded2),
+        warning: React16.createElement(WarningRounded2),
+        info: React16.createElement(InfoRounded2)
+      }
+    },
+    variants: [
+      {
+        props: { variant: "filled" },
+        style: {
+          color: "#fff"
+        }
+      },
+      {
+        props: { variant: "outlined" },
+        style: {
+          padding: "7px 12px 7px 12px"
+        }
+      }
+    ],
+    styleOverrides: {
+      message: ({ theme }) => ({
+        padding: "0px 4px",
+        minWidth: 0,
+        variants: [
+          {
+            props: { variant: "standard" },
+            style: {
+              color: theme.palette.text.primary
+            }
+          },
+          {
+            props: { variant: "outlined" },
+            style: {
+              color: theme.palette.text.primary
+            }
+          }
+        ]
+      }),
+      icon: ({ theme }) => ({
+        padding: "4px",
+        marginRight: 0,
+        display: "flex",
+        alignItems: "center",
+        borderRadius: 100,
+        variants: [
+          {
+            props: { variant: "standard", color: "success" },
+            style: {
+              backgroundColor: theme.palette.success[100]
+            }
+          },
+          {
+            props: { variant: "standard", color: "error" },
+            style: {
+              backgroundColor: theme.palette.error[100]
+            }
+          },
+          {
+            props: { variant: "standard", color: "info" },
+            style: {
+              backgroundColor: theme.palette.info[100]
+            }
+          },
+          {
+            props: { variant: "standard", color: "warning" },
+            style: {
+              backgroundColor: theme.palette.warning[100]
+            }
+          }
+        ]
+      }),
+      action: ({ theme }) => ({
+        display: "flex",
+        gap: 1.5,
+        padding: "0px",
+        variants: [
+          {
+            props: { variant: "standard" },
+            style: {
+              color: theme.palette.action.active
+            }
+          },
+          {
+            props: { variant: "outlined" },
+            style: {
+              color: theme.palette.action.active
+            }
+          }
+        ]
+      }),
+      root: {
+        padding: "8px 12px 8px 12px",
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        minWidth: "296px"
+      }
+    }
+  },
+  MuiAlertTitle: {
+    defaultProps: {
+      variant: "subtitle2"
+    },
+    styleOverrides: {
+      root: {
+        marginBottom: 0,
+        marginTop: 2.5
+      }
+    }
+  },
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        fontFamily: "Roboto",
+        textTransform: "unset",
+        fontWeightLight: 300,
+        fontSize: "13px",
+        lineHeight: "normal",
+        "@media(max-width: 885px)": {
+          fontSize: 14
+        }
+      },
+      startIcon: {
+        marginLeft: 2
+      },
+      endIcon: {
+        marginRight: 2
+      },
+      sizeSmall: {
+        height: 26,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
+      },
+      sizeMedium: {
+        height: 32,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
+      },
+      sizeLarge: {
+        height: 38,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        "&.MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        }
+      }
+    }
+  },
+  MuiButtonGroup: {
+    defaultProps: {
+      size: "small"
+    }
+  },
+  MuiFab: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      circular: {
+        boxShadow: "0px 1px 18px 0px rgba(24, 39, 75, 0.12), 0px 6px 10px 0px rgba(24, 39, 75, 0.14), 0px 3px 5px -1px rgba(24, 39, 75, 0.20)",
+        sizeSmall: {
+          height: 36,
+          width: 36,
+          svg: {
+            height: 20,
+            width: 20
+          }
+        },
+        sizeMedium: {
+          height: 48,
+          width: 48,
+          svg: {
+            height: 22,
+            width: 22
+          }
+        },
+        sizeLarge: {
+          height: 56,
+          width: 56,
+          svg: {
+            height: 24,
+            width: 24
+          }
+        }
+      },
+      extended: {
+        gap: 1,
+        boxShadow: " 0px 1px 18px 0px rgba(24, 39, 75, 0.12), 0px 6px 10px 0px rgba(24, 39, 75, 0.14), 0px 3px 5px -1px rgba(24, 39, 75, 0.20)",
+        sizeSmall: {
+          height: 32,
+          svg: {
+            height: 20,
+            width: 20,
+            marginRight: 4
+          }
+        },
+        sizeMedium: {
+          height: 38,
+          svg: {
+            height: 22,
+            width: 22,
+            marginRight: 4
+          }
+        },
+        sizeLarge: {
+          height: 48,
+          svg: {
+            height: 24,
+            width: 24,
+            marginRight: 4
+          }
+        }
+      },
+      root: {
+        textTransform: "capitalize"
+      }
+    }
+  },
+  MuiFormControl: {
+    defaultProps: {
+      size: "small",
+      margin: "none"
+    }
+  },
+  MuiFormHelperText: {
+    defaultProps: {
+      margin: "dense"
+    }
+  },
+  MuiSvgIcon: {
+    styleOverrides: {
+      fontSizeLarge: {
+        width: 35,
+        height: 35,
+        fontSize: 35
+      },
+      fontSizeMedium: {
+        width: 20,
+        height: 20,
+        fontSize: 20
+      },
+      fontSizeSmall: {
+        width: 16,
+        height: 16,
+        fontSize: 16
+      }
+    }
+  },
+  MuiIconButton: {
+    defaultProps: {
+      color: "inherit"
+    },
+    styleOverrides: {
+      sizeSmall: {
+        padding: 3
+      },
+      sizeMedium: {
+        padding: 8
+      },
+      sizeLarge: {
+        padding: 12
+      }
+    }
+  },
+  MuiInputBase: {
+    defaultProps: {
+      margin: "none"
+    },
+    styleOverrides: {
+      root: {
+        "&.MuiInput-underline": {
+          marginTop: 9
+        },
+        ".MuiOutlinedInput-input.MuiInputBase-inputSizeSmall": {
+          paddingBlock: 6.51
+        },
+        ".MuiOutlinedInput-input": {
+          paddingBlock: 14
+        }
+      }
+    }
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      notchedOutline: {
+        borderColor: "rgba(16, 24, 64, 0.23)"
+      }
+    }
+  },
+  MuiAutocomplete: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      root: {
+        "&.MuiAutocomplete-root .MuiOutlinedInput-root": {
+          padding: "6px 14px 6px 10px"
+        },
+        "& .MuiAutocomplete-endAdornment": {
+          top: "calc(50% - 12px)",
+          transform: "none"
+        },
+        "&.MuiAutocomplete-root .MuiOutlinedInput-root.MuiInputBase-sizeSmall": {
+          paddingBlock: 3.5,
+          paddingRight: 14,
+          ".MuiIconButton-sizeSmall .MuiAutocomplete-popupIndicator": {
+            padding: 5
+          }
+        }
+      }
+    }
+  },
+  MuiInputLabel: {
+    styleOverrides: {
+      asterisk: ({ theme }) => ({
+        color: theme.palette.error.main
+      }),
+      root: {
+        display: "flex",
+        gap: ".2rem",
+        flexDirection: "row-reverse",
+        fontSize: 13,
+        fontStyle: "normal",
+        fontWeight: 400,
+        letterSpacing: "0.15px"
+      },
+      filled: {
+        "&.MuiInputLabel-filled.MuiInputLabel-sizeSmall:not(.MuiInputLabel-shrink)": {
+          transform: "translate(12px,15px) scale(1)"
+        },
+        "&.MuiInputLabel-filled.MuiInputLabel-sizeMedium:not(.MuiInputLabel-shrink)": {
+          transform: "translate(12px,19px) scale(1)"
+        }
+      },
+      standard: {
+        "&.MuiInputLabel-standard.MuiInputLabel-sizeSmall:not(.MuiInputLabel-shrink)": {
+          transform: "translate(0, 14px) scale(1)"
+        },
+        "&.MuiInputLabel-standard.MuiInputLabel-sizeMedium:not(.MuiInputLabel-shrink)": {
+          transform: "translate(0, 16px) scale(1)"
+        }
+      },
+      outlined: {
+        "&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
+          transform: "translate(14px,8px) scale(1)"
+        },
+        "&.MuiInputLabel-outlined ": {
+          transform: "translate(14px, 14px) scale(1)",
+          "&.MuiInputLabel-shrink": {
+            transform: "translate(14px, -7px) scale(0.75)"
+          }
+        }
+      }
+    },
+    defaultProps: {
+      margin: "dense"
+    }
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: {
+        overflow: "initial",
+        boxShadow: "0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)"
+      }
+    }
+  },
+  MuiCardHeader: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px "
+      }
+    }
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px "
+      }
+    }
+  },
+  MuiCardActions: {
+    styleOverrides: {
+      root: {
+        padding: "8px 16px"
+      }
+    }
+  },
+  MuiRadio: {
+    variants: [
+      {
+        props: { size: "small" },
+        style: {
+          padding: 3
+        }
+      },
+      {
+        props: { size: "medium" },
+        style: {
+          padding: 4
+        }
+      },
+      {
+        props: { size: "large" },
+        style: {
+          padding: 9,
+          "& .MuiSvgIcon-fontSizeLarge": {
+            width: 24,
+            height: 24,
+            fontSize: 24
+          }
+        }
+      }
+    ],
+    defaultProps: {
+      size: "small"
+    }
+  },
+  MuiSwitch: {
+    variants: [
+      {
+        props: { size: "small" },
+        style: {
+          height: 22,
+          ".MuiSwitch-switchBase": {
+            padding: 3
+          }
+        }
+      }
+    ],
+    defaultProps: {
+      size: "small"
+    }
+  },
+  MuiTextField: {
+    defaultProps: {
+      size: "small",
+      margin: "none"
+    },
+    variants: [
+      {
+        props: { variant: "standard" },
+        style: {
+          ".MuiInputBase-input.MuiInputBase-inputSizeSmall": {
+            padding: 1.5
+          }
+        }
+      }
+    ]
+  },
+  MuiList: {
+    defaultProps: {
+      dense: false
+    },
+    styleOverrides: {
+      padding: {
+        ".MuiListItem-padding": {
+          paddingBlock: 1
+        }
+      },
+      dense: {
+        ".MuiListItem-dense": {
+          padding: "0.25px 0px 0.25px 16px"
+        }
+      }
+    }
+  },
+  MuiListItemButton: {
+    styleOverrides: {
+      dense: {
+        padding: "4px 16px 4px 16px "
+      },
+      root: {
+        padding: "8.21px 16px",
+        ".MuiListItemText-multiline": {
+          marginBlock: "4px"
+        }
+      }
+    }
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      dense: {
+        height: 30,
+        minHeight: 30,
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "14.3px",
+          letterSpacing: 0.15
+        }
+      },
+      root: {
+        padding: "7px 16px 7px 16px",
+        ".MuiMenuList-root": {
+          height: 34,
+          minHeight: 34
+        },
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "20px",
+          letterSpacing: 0.17
+        },
+        ".MuiListItemIcon-root": {
+          minWidth: 32
+        }
+      }
+    }
+  },
+  MuiTableBody: {
+    styleOverrides: {
+      root: {
+        ".MuiTableCell-body.MuiTableCell-sizeMedium": {
+          padding: "16px !important"
+        }
+      }
+    }
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      sizeMedium: {
+        padding: 13
+      }
+    }
+  },
+  MuiTable: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      root: {
+        minWidth: 630
+      }
+    }
+  }
+};
+
+// src/Theme/palette.ts
+var BasicPalette = {
+  default: {
+    main: "#E4E5E7",
+    dark: "#D1D3D7",
+    light: "#F2F2F3",
+    contrastText: "#5A5E73"
+  },
+  chipInfo: {
+    main: "#C0E8FC",
+    dark: "#9CD8FA",
+    light: "#E0F4FE",
+    contrastText: "#5A5E73"
+  },
+  chipWarning: {
+    main: "#FCE4C0",
+    dark: "#FAD19C",
+    light: "#F3F2F0",
+    contrastText: "#5A5E73"
+  },
+  chipError: {
+    main: "#FCD4D4",
+    dark: "#F4B9B9",
+    light: "#FEEAEA",
+    contrastText: "#5A5E73"
+  },
+  chipSuccess: {
+    main: "#DDF8C3",
+    dark: "#C8F3A2",
+    light: "#EFFCE2",
+    contrastText: "#5A5E73"
+  },
+  error: {
+    50: "#F9E8E8",
+    100: "#F1C7C7",
+    200: "#E8A1A1",
+    300: "#DF7B7B",
+    light: "#D85F5F",
+    main: "#D14343",
+    600: "#CC3D3D",
+    700: "#C63434",
+    800: "#C02C2C",
+    dark: "#B51E1E",
+    A100: "#FFECEC",
+    A200: "#FFB9B9",
+    A400: "#FF8686",
+    A700: "#FF6D6D",
+    contrastText: "#ffffff"
+  },
+  warning: {
+    50: "#FFF0E0",
+    100: "#FEDAB3",
+    200: "#FDC280",
+    300: "#FCAA4D",
+    light: "#FC9726",
+    main: "#FB8500",
+    600: "#FA7D00",
+    700: "#FA7200",
+    800: "#F96800",
+    dark: "#F85500",
+    A100: "#FFFFFF",
+    A200: "#FFF1EB",
+    A400: "#FFCCB8",
+    A700: "#FFBA9F",
+    contrastText: "#ffffff"
+  },
+  info: {
+    50: "#E6F3F8",
+    100: "#C0E2EE",
+    200: "#96CFE2",
+    300: "#6CBCD6",
+    light: "#4DADCE",
+    main: "#2D9FC5",
+    600: "#2897BF",
+    700: "#228DB8",
+    800: "#1C83B0",
+    dark: "#1172A3",
+    A100: "#D4EFFF",
+    A200: "#A1DCFF",
+    A400: "#6ECAFF",
+    A700: "#54C1FF",
+    contrastText: "#ffffff"
+  },
+  success: {
+    50: "#F2F9E7",
+    100: "#DDEFC4",
+    200: "#C7E49D",
+    300: "#B1D975",
+    light: "#A0D158",
+    main: "#8FC93A",
+    600: "#87C334",
+    700: "#7CBC2C",
+    800: "#72B525",
+    dark: "#60A918",
+    A100: "#EDFFDE",
+    A200: "#D2FFAB",
+    A400: "#B6FF78",
+    A700: "#A9FF5E",
+    contrastText: "#ffffff"
+  },
+  grey: {
+    50: "#FBFBFB",
+    100: "#F5F5F6",
+    200: "#EAEBEC",
+    300: "#DCDEE0",
+    400: "#CED1D4",
+    500: "#C4C7CA",
+    600: "#B9BDC1",
+    700: "#B2B7BB",
+    800: "#AAAEB3",
+    900: "#A2A6AB",
+    A100: "#FFFFFF",
+    A200: "#FFFFFF",
+    A400: "#D4EAFF",
+    A700: "#BBDDFF"
+  },
+  text: {
+    primary: "#101840de",
+    secondary: "#10184099",
+    disabled: "#10184061"
+  },
+  action: {
+    active: "#1018408a",
+    hover: "#1018400a",
+    selected: "#10184014",
+    disabled: "#10184042",
+    disabledBackground: "#1018401f",
+    focus: "#1018401f"
+  },
+  background: {
+    default: "#f5f5f5",
+    paper: "#fff"
+  },
+  common: {
+    black: "#000",
+    white: "#fff"
+  },
+  divider: "#0000001f"
+};
+var paletteERP = __spreadValues({
+  primary: {
+    50: "#E4ECF4",
+    100: "#BCD0E3",
+    200: "#8FB1D0",
+    300: "#6392BD",
+    light: "#417AAE",
+    main: "#2063A0",
+    600: "#1C5B98",
+    700: "#18518E",
+    800: "#134784",
+    dark: "#0B3573",
+    A100: "#A5C5FF",
+    A200: "#72A4FF",
+    A400: "#3F83FF",
+    A700: "#2572FF",
+    contrastText: "#ffffff"
+  },
+  secondary: {
+    50: "#E0F7FA",
+    100: "#B3EBF2",
+    200: "#80DEEA",
+    300: "#4DD0E1",
+    light: "#26C6DA",
+    main: "#00BCD4",
+    600: "#00B6CF",
+    700: "#00ADC9",
+    800: "#00A5C3",
+    dark: "#0097B9",
+    A100: "#E2F9FF",
+    A200: "#AFEEFF",
+    A400: "#7CE3FF",
+    A700: "#63DDFF",
+    contrastText: "#ffffff"
+  },
+  chipPrimary: {
+    main: "#C4E1F5",
+    dark: "#A2CDEE",
+    light: "#E2F0FA",
+    contrastText: "#5A5E73"
+  },
+  chipSecondary: {
+    main: "#C4F6FD",
+    dark: "#A8F1FB",
+    light: "#E0FBFE",
+    contrastText: "#545E73"
+  }
+}, BasicPalette);
+var paletteADPRO = __spreadValues({
+  primary: {
+    50: "#F8FAFB",
+    100: "#E6EFF0",
+    200: "#D2E3E4",
+    300: "#82C6CB",
+    light: "#2B9DA7",
+    main: "#058C97",
+    600: "#04848F",
+    700: "#047984",
+    800: "#036F7A",
+    dark: "#015C69",
+    A100: "#98F0FF",
+    A200: "#65E9FF",
+    A400: "#32E1FF",
+    A700: "#32E1FF"
+  },
+  secondary: {
+    50: "#E0F7FA",
+    100: "#B3EBF2",
+    200: "#80DEEA",
+    300: "#4DD0E1",
+    light: "#26C6DA",
+    main: "#00BCD4",
+    600: "#00B6CF",
+    700: "#00ADC9",
+    800: "#00A5C3",
+    dark: "#0097B9",
+    A100: "#E2F9FF",
+    A200: "#AFEEFF",
+    A400: "#7CE3FF",
+    A700: "#63DDFF",
+    contrastText: "#ffffff"
+  },
+  chipPrimary: {
+    main: "#CEE7E9",
+    dark: "#B2D9DC",
+    light: "#E3F1F2",
+    contrastText: "#5A5E73"
+  },
+  chipSecondary: {
+    main: "#C4F6FD",
+    dark: "#A8F1FB",
+    light: "#E0FBFE",
+    contrastText: "#545E73"
+  }
+}, BasicPalette);
+var paletteADC = __spreadValues({
+  primary: {
+    50: "#F8FAFB",
+    100: "#E6EFF0",
+    200: "#D2E3E4",
+    300: "#82C6CB",
+    light: "#2B9DA7",
+    main: "#058C97",
+    600: "#04848F",
+    700: "#047984",
+    800: "#036F7A",
+    dark: "#015C69",
+    A100: "#98F0FF",
+    A200: "#65E9FF",
+    A400: "#32E1FF",
+    A700: "#32E1FF"
+  },
+  secondary: {
+    50: "#E0F7FA",
+    100: "#B3EBF2",
+    200: "#80DEEA",
+    300: "#4DD0E1",
+    light: "#26C6DA",
+    main: "#00BCD4",
+    600: "#00B6CF",
+    700: "#00ADC9",
+    800: "#00A5C3",
+    dark: "#0097B9",
+    A100: "#E2F9FF",
+    A200: "#AFEEFF",
+    A400: "#7CE3FF",
+    A700: "#63DDFF",
+    contrastText: "#ffffff"
+  },
+  chipPrimary: {
+    main: "#D4D8F7",
+    dark: "#B2B9F0",
+    light: "#E5E8FA",
+    contrastText: "#5A5E73"
+  },
+  chipSecondary: {
+    main: "#E0E0E0",
+    dark: "#D1D1D1",
+    light: "#EBEBEB",
+    contrastText: "#545E73"
+  }
+}, BasicPalette);
+
+// node_modules/@mui/system/esm/createBreakpoints/createBreakpoints.js
+var sortBreakpointsValues = (values) => {
+  const breakpointsAsArray = Object.keys(values).map((key) => ({
+    key,
+    val: values[key]
+  })) || [];
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return __spreadProps(__spreadValues({}, acc), {
+      [obj.key]: obj.val
+    });
+  }, {});
+};
+function createBreakpoints(breakpoints2) {
+  const _a = breakpoints2, {
+    values: values = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536
+      // large screen
+    },
+    unit = "px",
+    step = 5
+  } = _a, other = __objRest(_a, [
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    "values",
+    "unit",
+    "step"
+  ]);
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
+  function up(key) {
+    const value = typeof values[key] === "number" ? values[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  }
+  function down(key) {
+    const value = typeof values[key] === "number" ? values[key] : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+  function between(start, end) {
+    const endIndex = keys.indexOf(end);
+    return `@media (min-width:${typeof values[start] === "number" ? values[start] : start}${unit}) and (max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === "number" ? values[keys[endIndex]] : end) - step / 100}${unit})`;
+  }
+  function only(key) {
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+    return up(key);
+  }
+  function not(key) {
+    const keyIndex = keys.indexOf(key);
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+    return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
+  }
+  return __spreadValues({
+    keys,
+    values: sortedValues,
+    up,
+    down,
+    between,
+    only,
+    not,
+    unit
+  }, other);
+}
+
+// src/Theme/breakpoints.ts
+var breakpoints = createBreakpoints({
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920
+  }
+});
+
+// src/Theme/mixins.ts
+var mixins = {
+  toolbar: {
+    minHeight: 48,
+    [breakpoints.down("md")]: {
+      minHeight: 52
+    }
+  }
+};
+
+// src/Theme/module.ts
+import "@mui/material/Typography";
+import "@mui/material/Radio";
+import "@mui/material/Chip";
+import "@mui/material/Checkbox";
+import "@mui/material/styles";
+
+// src/Theme/typography.ts
+var typography = {
+  fontSize: 13,
+  body1: {
+    fontFamily: "Roboto",
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "16px",
+    letterSpacing: "0.15px",
+    "@media(max-width: 885px)": {
+      fontSize: 15
+    }
+  },
+  body2: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: "16px",
+    letterSpacing: "0.17px",
+    "@media(max-width: 885px)": {
+      fontSize: 14
+    }
+  },
+  body3: {
+    fontFamily: "Roboto",
+    fontWeight: 300,
+    fontSize: 12,
+    lineHeight: "16px",
+    letterSpacing: "0.17px",
+    [breakpoints.down("md")]: {
+      fontSize: 11
+    }
+  },
+  subtitle1: {
+    fontFamily: "Roboto",
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: "16px",
+    letterSpacing: "0.15px",
+    "@media(max-width: 885px)": {
+      fontSize: 15
+    }
+  },
+  subtitle2: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: "16px",
+    letterSpacing: "0.1px",
+    "@media(max-width: 885px)": {
+      fontSize: 14
+    }
+  },
+  caption: {
+    fontFamily: "Roboto",
+    fontSize: 11,
+    fontWeight: 400,
+    lineHeight: "14px",
+    letterSpacing: "0.4px",
+    "@media(max-width: 885px)": {
+      fontSize: 12
+    }
+  },
+  overline: {
+    fontFamily: "Roboto",
+    fontSize: 11,
+    fontWeight: 400,
+    lineHeight: "24px",
+    letterSpacing: "1px",
+    "@media(max-width: 885px)": {
+      fontSize: 12
+    }
+  },
+  h6: {
+    fontFamily: "Nunito",
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: "16px",
+    letterSpacing: "0.15px",
+    "@media(max-width: 885px)": {
+      fontSize: 17
+    }
+  },
+  h5: {
+    fontFamily: "Nunito",
+    fontSize: 18,
+    fontWeight: 600,
+    letterSpacing: 0,
+    lineHeight: "24px"
+  },
+  h4: {
+    fontFamily: "Nunito",
+    fontSize: 22,
+    fontWeight: 600,
+    lineHeight: "24px",
+    letterSpacing: "0.25px"
+  },
+  h3: {
+    fontFamily: "Nunito",
+    fontSize: 28,
+    fontWeight: 500,
+    lineHeight: "32px",
+    letterSpacing: 0
+  },
+  h2: {
+    fontFamily: "Nunito",
+    fontSize: 32,
+    fontWeight: 400,
+    lineHeight: "40px",
+    letterSpacing: -0.5
+  },
+  h1: {
+    fontFamily: "Nunito",
+    fontSize: 40,
+    fontWeight: 300,
+    letterSpacing: -1.5,
+    lineHeight: "48px"
+  }
+};
+
+// src/Theme/shadows.ts
+var shadows = [
+  "none",
+  "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
+  "0px 1px 5px rgba(24, 39, 75, 0.12), 0px 2px 2px rgba(24, 39, 75, 0.14), 0px 3px 1px -2px rgba(24, 39, 75, 0.2)",
+  "0px 1px 8px rgba(24, 39, 75, 0.12), 0px 3px 4px rgba(24, 39, 75, 0.14), 0px 3px 3px -2px rgba(24, 39, 75, 0.2)",
+  "0px 2px 4px -1px rgba(24, 39, 75, 0.2), 0px 4px 5px rgba(24, 39, 75, 0.14), 0px 1px 10px rgba(24, 39, 75, 0.12)",
+  "0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 5px 8px rgba(24, 39, 75, 0.14), 0px 1px 14px rgba(24, 39, 75, 0.12)",
+  "0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 6px 10px rgba(24, 39, 75, 0.14), 0px 1px 18px rgba(24, 39, 75, 0.12)",
+  "0px 4px 5px -2px rgba(24, 39, 75, 0.2), 0px 7px 10px 1px rgba(24, 39, 75, 0.14), 0px 2px 16px 1px rgba(24, 39, 75, 0.12)",
+  "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
+  "0px 5px 6px -3px rgba(24, 39, 75, 0.2), 0px 9px 12px 1px rgba(24, 39, 75, 0.14), 0px 3px 16px 2px rgba(24, 39, 75, 0.12)",
+  "0px 6px 6px -3px rgba(24, 39, 75, 0.2), 0px 10px 14px 1px rgba(24, 39, 75, 0.14), 0px 4px 18px 3px rgba(24, 39, 75, 0.12)",
+  "0px 6px 7px -4px rgba(24, 39, 75, 0.2), 0px 11px 15px 1px rgba(24, 39, 75, 0.14), 0px 4px 20px 3px rgba(24, 39, 75, 0.12)",
+  "0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 12px 17px 2px rgba(24, 39, 75, 0.14), 0px 5px 22px 4px rgba(24, 39, 75, 0.12)",
+  "0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 13px 19px 2px rgba(24, 39, 75, 0.14), 0px 5px 24px 4px rgba(24, 39, 75, 0.12)",
+  "0px 7px 9px -4px rgba(24, 39, 75, 0.2), 0px 14px 21px 2px rgba(24, 39, 75, 0.14), 0px 5px 26px 4px rgba(24, 39, 75, 0.12)",
+  "0px 8px 9px -5px rgba(24, 39, 75, 0.2), 0px 15px 22px 2px rgba(24, 39, 75, 0.14), 0px 6px 28px 5px rgba(24, 39, 75, 0.12)",
+  "0px 8px 10px -5px rgba(24, 39, 75, 0.2), 0px 16px 24px 2px rgba(24, 39, 75, 0.14), 0px 6px 30px 5px rgba(24, 39, 75, 0.12)",
+  "0px 8px 11px -5px rgba(24, 39, 75, 0.2), 0px 17px 26px 2px rgba(24, 39, 75, 0.14), 0px 6px 32px 5px rgba(24, 39, 75, 0.12)",
+  "0px 9px 11px -5px rgba(24, 39, 75, 0.2), 0px 18px 28px 2px rgba(24, 39, 75, 0.14), 0px 7px 34px 6px rgba(24, 39, 75, 0.12)",
+  "0px 9px 12px -6px rgba(24, 39, 75, 0.2), 0px 19px 29px 2px rgba(24, 39, 75, 0.14), 0px 7px 36px 6px rgba(24, 39, 75, 0.12)",
+  "0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 20px 31px 3px rgba(24, 39, 75, 0.14), 0px 8px 38px 7px rgba(24, 39, 75, 0.12)",
+  "0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 21px 33px 3px rgba(24, 39, 75, 0.14), 0px 8px 40px 7px rgba(24, 39, 75, 0.12)",
+  "0px 10px 14px -6px rgba(24, 39, 75, 0.2), 0px 22px 35px 3px rgba(24, 39, 75, 0.14), 0px 8px 42px 7px rgba(24, 39, 75, 0.12)",
+  "0px 11px 14px -7px rgba(24, 39, 75, 0.2), 0px 23px 36px 3px rgba(24, 39, 75, 0.14), 0px 9px 44px 8px rgba(24, 39, 75, 0.12)",
+  "0px 11px 15px -7px rgba(24, 39, 75, 0.2), 0px 24px 38px 3px rgba(24, 39, 75, 0.14), 0px 9px 46px 8px rgba(24, 39, 75, 0.12)"
+];
+
+// src/Theme/theme.ts
+var BasicTheme = {
+  components,
+  typography,
+  spacing: 8,
+  mixins,
+  breakpoints,
+  shadows
+};
+var ERPTheme = __spreadValues({
+  palette: paletteERP
+}, BasicTheme);
+var ADPROTheme = __spreadValues({
+  palette: paletteADPRO
+}, BasicTheme);
+var ADCTheme = __spreadValues({
+  palette: paletteADC
+}, BasicTheme);
+
+// src/Theme/index.ts
+var SincoTheme = createTheme(__spreadValues({}, ERPTheme));
+var AdproSincoTheme = createTheme(__spreadValues({}, ADPROTheme));
+var ADCSincoTheme = createTheme(__spreadValues({}, ADCTheme));
+export {
+  ADCSincoTheme,
+  AdproSincoTheme,
+  FooterAction,
+  PageHeader,
+  SCAutocomplete,
+  SCCalendarSwipeable,
+  SCDataGrid,
+  SCDialog,
+  SCDrawer,
+  SCMenu,
+  SCModal,
+  SCMultiSelect,
+  SCTabs,
+  SCTextArea,
+  SCTextField,
+  SCToastNotification,
+  SincoTheme,
+  ToastProgress,
+  capitalize,
+  getButtonColor,
+  getIcon,
+  getIconComponent2 as getIconComponent,
+  getIconMultiSelect,
+  getModalColor,
+  modalStateConfig,
+  useFilteredItems,
+  useMultiSelectHandlers,
+  useProgress
+};
+/*! Bundled license information:
+
+@mui/system/esm/index.js:
+  (**
+   * @mui/system v7.1.1
+   *
+   * @license MIT
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+*/