componentes-sinco 1.0.1-rc.1

package/dist/index.mjs

@@ -0,0 +1,696 @@
+// src/Components/SCTextField.tsx
+import React, { useEffect, useState } from "react";
+import { FormControl, IconButton, InputAdornment, InputLabel, OutlinedInput, FilledInput, Input, Box, Typography, Popover, SvgIcon, Tooltip } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import * as Muicon from "@mui/icons-material";
+import { Visibility, VisibilityOff, InfoOutlined } from "@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] = 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);
+  const inputComponents = {
+    outlined: OutlinedInput,
+    filled: FilledInput,
+    standard: Input
+  };
+  const InputComponent = inputComponents[variant] || 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];
+    }
+  }
+  useEffect(() => {
+    if (state) {
+      state(value);
+    }
+  }, [value]);
+  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__ */ 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(Tooltip, { title: infoTitle, placement: "top-end" }, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event) => handleClickInfoTitle(event),
+      onMouseLeave: () => handleCloseInfoTitle()
+    }
+  )) : ""), /* @__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,
+      {
+        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 || 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__ */ React.createElement(InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ React.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
+        endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, format === "password" ? /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            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, /* @__PURE__ */ React.createElement(
+          InfoOutlined,
+          {
+            sx: { ml: 0.5 },
+            color: "action",
+            fontSize: "small",
+            component: "svg",
+            onMouseEnter: (event) => handleClickInfoElement(event),
+            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, { p: 2 }, infoElement)
+        )) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ React.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
+        label: label ? label + (format === "password" && !showPassword ? "" : "") : "",
+        autoComplete: format === "password" ? "new-password" : "off"
+      }
+    )
+  ), (iconInputEnd !== void 0 || format === "password") && infoElement ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InfoOutlined,
+    {
+      sx: { marginLeft: "4px" },
+      color: "action",
+      fontSize: "small",
+      onMouseEnter: (event) => handleClickInfoElement(event),
+      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, { p: 2 }, infoElement)
+  )) : ""));
+};
+
+// src/Components/Drawer/SCDrawer.tsx
+import React4 from "react";
+import { Box as Box4, Drawer, Typography as Typography4, IconButton as IconButton4, Button as Button2, Stack as Stack3 } from "@mui/material";
+import Grid3 from "@mui/material/Grid2";
+import * as Muicon3 from "@mui/icons-material";
+import { FilterListOutlined } from "@mui/icons-material";
+import CloseIcon from "@mui/icons-material/Close";
+
+// 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
+  };
+};
+
+// 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" })
+  };
+  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);
+  };
+  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"
+          }[toast.type || "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" }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ React2.createElement(Stack, { flexDirection: "row", gap: 1 }, toast.actions.map((button, index) => /* @__PURE__ */ React2.createElement(
+        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__ */ 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/SCTextArea.tsx
+import React3, { useEffect as useEffect4, useState as useState4 } from "react";
+import { Typography as Typography3, Stack as Stack2, TextField, Box as Box3, IconButton as IconButton3, Tooltip as Tooltip2 } from "@mui/material";
+import Grid2 from "@mui/material/Grid2";
+import * as Muicon2 from "@mui/icons-material";
+import { InfoOutlined as InfoOutlined2 } from "@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] = useState4(0);
+  const [stateError, setStateError] = useState4(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = React3.useState(null);
+  const openInfoTitle = Boolean(anchorInfoTitle);
+  useEffect4(() => {
+    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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Box3, { sx: { width } }, /* @__PURE__ */ React3.createElement(Grid2, { container: true, sx: { alignItems: "center" } }, iconTitle && IconTitle && /* @__PURE__ */ React3.createElement(IconTitle, { color: "action", sx: { mr: "4px" } }), title && /* @__PURE__ */ React3.createElement(Typography3, { color: colorTitle || "text.secondary", variant: "body1" }, title), infoTitle && /* @__PURE__ */ React3.createElement(Tooltip2, { title: infoTitle, placement: "top-end" }, /* @__PURE__ */ React3.createElement(IconButton3, { size: "small" }, /* @__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" },
+      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/SCDrawer.tsx
+var SCDrawer = ({
+  title,
+  colorTitle,
+  textButton,
+  iconButton,
+  buttonColor,
+  anchor = "left",
+  iconPosition,
+  width,
+  open,
+  arrayElements = [],
+  actions
+}) => {
+  const [drawerOpen, setDrawerOpen] = React4.useState(open);
+  let IconBoton;
+  if (iconButton && iconButton in Muicon3) {
+    IconBoton = Muicon3[iconButton];
+  } else {
+    IconBoton = FilterListOutlined;
+  }
+  React4.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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Button2,
+    {
+      sx: { textTransform: "capitalize" },
+      color: buttonColor,
+      onClick: toggleDrawer(true),
+      size: "small",
+      startIcon: iconPosition === "left" || !iconPosition ? /* @__PURE__ */ React4.createElement(IconButton4, null) : null,
+      endIcon: iconPosition === "right" ? /* @__PURE__ */ React4.createElement(IconButton4, null) : null
+    },
+    textButton || "Filtrar"
+  ), /* @__PURE__ */ React4.createElement(
+    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__ */ 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 || "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React4.createElement(IconButton4, { onClick: handleDrawerClose }, /* @__PURE__ */ React4.createElement(CloseIcon, { color: "action" }))), /* @__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) => /* @__PURE__ */ React4.createElement(
+      Box4,
+      {
+        key: `Stack_${arrayElement.type || ""} ${arrayElement.name || ""}${index}`,
+        sx: { width: "100%" }
+      },
+      arrayElement.component ? /* @__PURE__ */ React4.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "text" ? /* @__PURE__ */ React4.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__ */ React4.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__ */ 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" : "flex-end",
+        flexDirection: "row"
+      },
+      actions.map((button, index) => /* @__PURE__ */ React4.createElement(
+        Button2,
+        {
+          key: index,
+          variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: button.fn,
+          disabled: button.disabled || false,
+          size: "small"
+        },
+        button.text
+      ))
+    ))
+  ));
+};
+export {
+  SCDrawer,
+  SCTextArea,
+  SCTextField
+};