componentes-sinco 1.0.1-rc.1

package/dist/index.js

@@ -0,0 +1,735 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SCDrawer: () => SCDrawer,
+  SCTextArea: () => SCTextArea,
+  SCTextField: () => SCTextField
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Components/SCTextField.tsx
+var import_react = __toESM(require("react"));
+var import_material = require("@mui/material");
+var import_Grid2 = __toESM(require("@mui/material/Grid2"));
+var Muicon = __toESM(require("@mui/icons-material"));
+var import_icons_material = require("@mui/icons-material");
+var SCTextField = ({
+  label = "",
+  placeholder = "",
+  width = "100%",
+  variant = "outlined",
+  color,
+  disabled,
+  required,
+  maxLength,
+  background,
+  size,
+  format,
+  title,
+  iconTitle,
+  infoTitle,
+  iconInputStart,
+  iconInputEnd,
+  infoElement,
+  value,
+  state,
+  onChange,
+  onBlur,
+  onKeyDown
+}) => {
+  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = (0, import_react.useState)(null);
+  const openInfoTitle = Boolean(anchorInfoTitle);
+  const [anchorInfoElement, setAnchorInfoElement] = (0, import_react.useState)(null);
+  const openInfoElement = Boolean(anchorInfoElement);
+  const inputComponents = {
+    outlined: import_material.OutlinedInput,
+    filled: import_material.FilledInput,
+    standard: import_material.Input
+  };
+  const InputComponent = inputComponents[variant] || import_material.OutlinedInput;
+  let IconInputStartValidation;
+  let IconInputEndValidation;
+  let IconInputStart;
+  let IconInputEnd;
+  let IconTitle;
+  if (iconInputStart) {
+    if (!(iconInputStart in Muicon)) {
+      if (iconInputStart.type === void 0) {
+        IconInputStartValidation = "text";
+      } else {
+        IconInputStartValidation = "icon";
+      }
+    } else {
+      IconInputStartValidation = "icon";
+      IconInputStart = Muicon[iconInputStart];
+    }
+  }
+  if (iconInputEnd) {
+    if (!(iconInputEnd in Muicon)) {
+      if (iconInputEnd.type === void 0) {
+        IconInputEndValidation = "text";
+      } else {
+        IconInputEndValidation = "icon";
+      }
+    } else {
+      IconInputEndValidation = "icon";
+      IconInputEnd = Muicon[iconInputEnd];
+    }
+  }
+  if (iconTitle) {
+    if (!(iconTitle in Muicon)) {
+      IconTitle = iconInputStart;
+    } else {
+      IconTitle = Muicon[iconTitle];
+    }
+  }
+  (0, import_react.useEffect)(() => {
+    if (state) {
+      state(value);
+    }
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    if (error) {
+      setTimeout(() => {
+        setError(false);
+      }, 1e3);
+    }
+  }, [error]);
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+  const handleKeyPress = (event) => {
+    const target = event.target;
+    const key = event.key;
+    if (format === "int") {
+      if (!/^[0-9]$/.test(key)) {
+        event.preventDefault();
+      }
+      ;
+    }
+    if (format === "decimal") {
+      if (target.value === "" && key === "." || key === "-" || key === "+") {
+        event.preventDefault();
+      }
+    }
+    if (target.type === "text") {
+      const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9\s_\-.,@]+$/;
+      if (!regex.test(key)) {
+        event.preventDefault();
+      }
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  const handleChange = (event) => {
+    let valueMax = maxLength ? maxLength + 1 : 50;
+    if (event.target.value.length < valueMax) {
+      if (state) {
+        state(event.target.value);
+      }
+      if (onChange) {
+        onChange(event);
+      }
+    }
+  };
+  const handleBlur = (event) => {
+    const error2 = !value.trim() && required ? true : false;
+    setError(error2 ? true : false);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleClickInfoTitle = (event) => {
+    setAnchorInfoTitle(event.currentTarget);
+  };
+  const handleCloseInfoTitle = () => {
+    setAnchorInfoTitle(null);
+  };
+  const handleClickInfoElement = (event) => {
+    setAnchorInfoElement(event.currentTarget);
+  };
+  const handleCloseInfoElement = () => {
+    setAnchorInfoElement(null);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width } }, /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, alignItems: "center", mb: 1.25, gap: 0.5 }, iconTitle && IconTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }) : "", title ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { mx: 0.5, variant: "subtitle2", color: "text.secondary" }, title) : "", infoTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoTitle, placement: "top-end" }, /* @__PURE__ */ import_react.default.createElement(
+    import_icons_material.InfoOutlined,
+    {
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event) => handleClickInfoTitle(event),
+      onMouseLeave: () => handleCloseInfoTitle()
+    }
+  )) : ""), /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, sx: { flexWrap: "nowrap", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_material.FormControl,
+    {
+      color,
+      fullWidth: true,
+      size: size ? size : "medium",
+      variant,
+      sx: { background: background || "transparent", borderRadius: "4px" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_material.InputLabel,
+      {
+        htmlFor: "",
+        required: required && label !== "" ? true : false,
+        error,
+        disabled: disabled || false
+      },
+      label ? label : ""
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      InputComponent,
+      {
+        size: size ? size : "medium",
+        fullWidth: true,
+        value,
+        error,
+        id: label == null ? void 0 : label.replace(/\s+/g, ""),
+        disabled: disabled || false,
+        onKeyUp: handleKeyPress,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        inputProps: { maxLength: maxLength ? maxLength : 50 },
+        type: !showPassword && format === "password" ? "password" : (format || "text").toUpperCase() === "INT" || (format || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
+        className: format === "password" && !showPassword ? "" : "",
+        placeholder,
+        startAdornment: iconInputStart ? /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ import_react.default.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
+        endAdornment: /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "end" }, format === "password" ? /* @__PURE__ */ import_react.default.createElement(
+          import_material.IconButton,
+          {
+            onClick: handleClickShowPassword,
+            onMouseDown: handleMouseDownPassword,
+            edge: "end"
+          },
+          showPassword ? /* @__PURE__ */ import_react.default.createElement(import_icons_material.VisibilityOff, null) : /* @__PURE__ */ import_react.default.createElement(import_icons_material.Visibility, null)
+        ) : iconInputEnd === void 0 && infoElement !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+          import_icons_material.InfoOutlined,
+          {
+            sx: { ml: 0.5 },
+            color: "action",
+            fontSize: "small",
+            component: "svg",
+            onMouseEnter: (event) => handleClickInfoElement(event),
+            onMouseLeave: () => handleCloseInfoElement()
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          import_material.Popover,
+          {
+            sx: { pointerEvents: "none" },
+            open: openInfoElement,
+            anchorEl: anchorInfoElement,
+            onClose: handleCloseInfoElement,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "left"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "left"
+            },
+            disableRestoreFocus: true
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { p: 2 }, infoElement)
+        )) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ import_react.default.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
+        label: label ? label + (format === "password" && !showPassword ? "" : "") : "",
+        autoComplete: format === "password" ? "new-password" : "off"
+      }
+    )
+  ), (iconInputEnd !== void 0 || format === "password") && infoElement ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_icons_material.InfoOutlined,
+    {
+      sx: { marginLeft: "4px" },
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event) => handleClickInfoElement(event),
+      onMouseLeave: handleCloseInfoElement
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_material.Popover,
+    {
+      sx: { pointerEvents: "none" },
+      open: openInfoElement,
+      anchorEl: anchorInfoElement,
+      onClose: handleCloseInfoElement,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      disableRestoreFocus: true
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { p: 2 }, infoElement)
+  )) : ""));
+};
+
+// src/Components/Drawer/SCDrawer.tsx
+var import_react5 = __toESM(require("react"));
+var import_material4 = require("@mui/material");
+var import_Grid23 = __toESM(require("@mui/material/Grid2"));
+var Muicon3 = __toESM(require("@mui/icons-material"));
+var import_icons_material4 = require("@mui/icons-material");
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+var import_react3 = __toESM(require("react"));
+var import_material2 = require("@mui/material");
+var import_icons_material2 = require("@mui/icons-material");
+
+// src/Components/ToastNotification/useProgress.ts
+var import_react2 = require("react");
+var useProgress = (timeProgress, lote) => {
+  const [progress, setProgress] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    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
+  };
+};
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+var SCToastNotification = (toast) => {
+  var _a;
+  const [stateOptions, setStateOptions] = (0, import_react3.useState)(true);
+  const [stateToast, setStateToast] = (0, import_react3.useState)(true);
+  const timeProgress = toast.time || 10;
+  const { progress } = useProgress(timeProgress);
+  const toastColorConfig = toast.type || "info";
+  const toastIconOption = {
+    success: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.CheckCircleRounded, { color: "success" }),
+    error: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.ErrorRounded, { color: "error" }),
+    warning: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.WarningRounded, { color: "warning" }),
+    info: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.InfoRounded, { color: "info" })
+  };
+  toast.actions = (_a = toast.actions) != null ? _a : [{ text: "Action", fn: () => {
+    alert("");
+  } }, { text: "Consultar", fn: () => {
+  } }];
+  const ToastIconConfig = toastIconOption[toast.type];
+  const closeToast = () => {
+    setStateToast(false);
+  };
+  const toggleToastOptions = () => {
+    setStateOptions((prevShowOptions) => !prevShowOptions);
+  };
+  (0, import_react3.useEffect)(() => {
+    progress >= 100 && setStateToast(false);
+  }, [progress]);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, stateToast && /* @__PURE__ */ import_react3.default.createElement(
+    import_material2.Stack,
+    {
+      position: "fixed",
+      zIndex: 1400,
+      right: 16,
+      top: 16,
+      width: 370,
+      sx: {
+        boxShadow: (theme) => theme.shadows[8]
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      import_material2.Box,
+      {
+        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__ */ import_react3.default.createElement(
+        import_material2.Stack,
+        {
+          p: 1,
+          gap: 1,
+          borderRadius: 50,
+          bgcolor: {
+            success: "success.100",
+            error: "error.100",
+            warning: "warning.100",
+            info: "info.100"
+          }[toast.type || "info"]
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, ToastIconConfig)
+      ),
+      /* @__PURE__ */ import_react3.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true }),
+      /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { width: 285 }, /* @__PURE__ */ import_react3.default.createElement(
+        import_material2.Stack,
+        {
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "subtitle2", color: "text.primary" }, toast.title),
+        /* @__PURE__ */ import_react3.default.createElement(
+          import_material2.IconButton,
+          {
+            size: "small",
+            "data-testid": "close-icon",
+            onClick: closeToast
+          },
+          /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Close, { fontSize: "small" })
+        )
+      ), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { color: "text.primary", variant: "body2" }, toast.subtitle), !stateOptions && toast.listITems && toast.listITems.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, toast.listITems.map((element, i) => /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "caption", key: i }, "\u2022 ", element)))), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { justifyContent: "flex-end", flexDirection: "row" }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { flexDirection: "row", gap: 1 }, toast.actions.map((button, index) => /* @__PURE__ */ import_react3.default.createElement(
+        import_material2.Button,
+        {
+          key: index,
+          sx: { textTransform: "capitalize" },
+          color: index === 0 ? "info" : toast.type === "success" ? "success" : toast.type === "error" ? "error" : toast.type === "warning" ? "warning" : "info",
+          variant: "text",
+          onClick: button.fn,
+          disabled: button.disabled || false,
+          size: "small"
+        },
+        button.text
+      ))), toast.seeMore && /* @__PURE__ */ import_react3.default.createElement(
+        import_material2.Button,
+        {
+          onClick: toggleToastOptions,
+          size: "small",
+          variant: "text",
+          color: toastColorConfig
+        },
+        stateOptions ? "Ver m\xE1s" : "Ver menos",
+        stateOptions ? /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowDown, null) : /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowUp, null)
+      )))
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      import_material2.LinearProgress,
+      {
+        sx: {
+          ".MuiLinearProgress-bar": {
+            transition: "0.1s linear !important",
+            transform: "scaleX(-1)"
+          }
+        },
+        color: toastColorConfig,
+        variant: "determinate",
+        value: 100 - progress
+      }
+    )
+  ));
+};
+
+// src/Components/SCTextArea.tsx
+var import_react4 = __toESM(require("react"));
+var import_material3 = require("@mui/material");
+var import_Grid22 = __toESM(require("@mui/material/Grid2"));
+var Muicon2 = __toESM(require("@mui/icons-material"));
+var import_icons_material3 = require("@mui/icons-material");
+var SCTextArea = ({
+  title,
+  infoTitle,
+  colorTitle,
+  iconTitle,
+  placeholder,
+  label = "",
+  variant,
+  required,
+  disabled,
+  width = "100%",
+  rows = 3,
+  maxLength = 200,
+  value,
+  state,
+  onBlur
+}) => {
+  const [helperCount, setHelperCount] = (0, import_react4.useState)(0);
+  const [stateError, setStateError] = (0, import_react4.useState)(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = import_react4.default.useState(null);
+  const openInfoTitle = Boolean(anchorInfoTitle);
+  (0, import_react4.useEffect)(() => {
+    setHelperCount(value.length);
+  }, [value]);
+  let IconTitle = null;
+  if (iconTitle) {
+    if (Muicon2[iconTitle] === void 0) {
+      IconTitle = null;
+    } else {
+      IconTitle = Muicon2[iconTitle];
+    }
+  }
+  const handleBlur = (event) => {
+    if (required && value.trim() === "") {
+      setStateError(true);
+      setTimeout(() => {
+        setStateError(false);
+      }, 1e3);
+      return;
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { width } }, /* @__PURE__ */ import_react4.default.createElement(import_Grid22.default, { container: true, sx: { alignItems: "center" } }, iconTitle && IconTitle && /* @__PURE__ */ import_react4.default.createElement(IconTitle, { color: "action", sx: { mr: "4px" } }), title && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { color: colorTitle || "text.secondary", variant: "body1" }, title), infoTitle && /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: infoTitle, placement: "top-end" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(
+    import_icons_material3.InfoOutlined,
+    {
+      color: "action",
+      fontSize: "small"
+    }
+  )))), /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
+    import_material3.TextField,
+    {
+      required,
+      placeholder,
+      error: stateError,
+      variant,
+      sx: { mt: "10px" },
+      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__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
+    import_material3.Typography,
+    {
+      variant: "caption",
+      color: "text.secondary",
+      mr: 1,
+      mt: 1,
+      align: "right"
+    },
+    helperCount + "/" + maxLength
+  ))));
+};
+
+// src/Components/Drawer/SCDrawer.tsx
+var SCDrawer = ({
+  title,
+  colorTitle,
+  textButton,
+  iconButton,
+  buttonColor,
+  anchor = "left",
+  iconPosition,
+  width,
+  open,
+  arrayElements = [],
+  actions
+}) => {
+  const [drawerOpen, setDrawerOpen] = import_react5.default.useState(open);
+  let IconBoton;
+  if (iconButton && iconButton in Muicon3) {
+    IconBoton = Muicon3[iconButton];
+  } else {
+    IconBoton = import_icons_material4.FilterListOutlined;
+  }
+  import_react5.default.useEffect(() => {
+    if (open !== void 0) {
+      setDrawerOpen(open);
+    }
+  }, [open]);
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
+  };
+  const toggleDrawer = (newOpen) => () => {
+    setDrawerOpen(newOpen);
+  };
+  const inputValidation = () => {
+    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) {
+      handleDrawerClose();
+    } else {
+      SCToastNotification({
+        type: "error",
+        title: "Algunos campos son requeridos",
+        time: 3e3
+      });
+      return;
+    }
+  };
+  const clean = () => {
+    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, "");
+      }
+    }
+  };
+  actions = actions != null ? actions : [{ text: "Limpiar", fn: clean }, { text: "Consultar", fn: inputValidation }];
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+    import_material4.Button,
+    {
+      sx: { textTransform: "capitalize" },
+      color: buttonColor,
+      onClick: toggleDrawer(true),
+      size: "small",
+      startIcon: iconPosition === "left" || !iconPosition ? /* @__PURE__ */ import_react5.default.createElement(import_material4.IconButton, null) : null,
+      endIcon: iconPosition === "right" ? /* @__PURE__ */ import_react5.default.createElement(import_material4.IconButton, null) : null
+    },
+    textButton || "Filtrar"
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    import_material4.Drawer,
+    {
+      open: drawerOpen,
+      onClose: toggleDrawer(false),
+      anchor: anchor || "left",
+      sx: {
+        "& .MuiDrawer-paper": {
+          width: width || "450px",
+          boxSizing: "border-box",
+          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
+        }
+      }
+    },
+    /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_Grid23.default, { container: true, sx: { backgroundColor: "secondary.main", alignItems: "center", height: "42px", textAlign: "left", padding: "10px 12px 10px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react5.default.createElement(import_material4.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title || "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react5.default.createElement(import_material4.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react5.default.createElement(import_Close.default, { color: "action" }))), /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "12px 16px 12px 16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => /* @__PURE__ */ import_react5.default.createElement(
+      import_material4.Box,
+      {
+        key: `Stack_${arrayElement.type || ""} ${arrayElement.name || ""}${index}`,
+        sx: { width: "100%" }
+      },
+      arrayElement.component ? /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "text" ? /* @__PURE__ */ import_react5.default.createElement(
+        SCTextField,
+        {
+          title: arrayElement.title,
+          label: arrayElement.name,
+          placeholder: arrayElement.placeholder,
+          infoTitle: arrayElement.infoTitle,
+          iconTitle: arrayElement.iconTitle,
+          infoElement: arrayElement.infoElement,
+          iconInputEnd: arrayElement.iconInputEnd,
+          iconInputStart: arrayElement.iconInputStart,
+          width: arrayElement.width,
+          maxLength: arrayElement.maxLength,
+          background: arrayElement.background,
+          size: arrayElement.size,
+          variant: arrayElement.variant,
+          disabled: arrayElement.disabled,
+          required: arrayElement.required,
+          value: arrayElement.value,
+          onChange: arrayElement.onChange,
+          onBlur: arrayElement.onBlur,
+          state: arrayElement.state
+        }
+      ) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react5.default.createElement(
+        SCTextArea,
+        {
+          label: arrayElement.name,
+          placeholder: arrayElement.placeholder,
+          title: arrayElement.title,
+          infoTitle: arrayElement.infoTitle,
+          iconTitle: arrayElement.iconTitle,
+          width: arrayElement.width,
+          maxLength: arrayElement.maxLength,
+          background: arrayElement.background,
+          rows: arrayElement.rows,
+          variant: arrayElement.variant,
+          disabled: arrayElement.disabled,
+          required: arrayElement.required,
+          value: arrayElement.value || " ",
+          onBlur: arrayElement.onBlur,
+          state: arrayElement.state
+        }
+      ) : null
+    ))), (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react5.default.createElement(
+      import_Grid23.default,
+      {
+        container: true,
+        bgcolor: "background.default",
+        gap: 2,
+        padding: "9px 16px 9px 16px",
+        height: "42px",
+        alignItems: "center",
+        justifyContent: actions.length > 1 ? "space-between" : "flex-end",
+        flexDirection: "row"
+      },
+      actions.map((button, index) => /* @__PURE__ */ import_react5.default.createElement(
+        import_material4.Button,
+        {
+          key: index,
+          variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: button.fn,
+          disabled: button.disabled || false,
+          size: "small"
+        },
+        button.text
+      ))
+    ))
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SCDrawer,
+  SCTextArea,
+  SCTextField
+});