next-recomponents 2.0.38 → 2.0.40

package/dist/index.mjs

@@ -3862,98 +3862,97 @@ function Input({
   className,
   regex,
   invalidMessage = "Valor no v\xE1lido",
+  icon = null,
   ...props
 }) {
   const value = `${(props == null ? void 0 : props.value) || ""}`;
   const isValid = !regex ? true : regex.test(value);
   const isPassword = props.type === "password";
   const [showPassword, setShowPassword] = useState4(false);
-  return /* @__PURE__ */ jsxs4("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "font-bold", children: [
+  const svg = icon;
+  return /* @__PURE__ */ jsxs4("div", { className: "w-full relative", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "relative flex items-center border rounded bg-white pr-1 mb-5", children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ...props,
+          type: isPassword && showPassword ? "text" : props.type,
+          className: [
+            "flex p-2 w-full bg-transparent pt-4",
+            isPassword && "pr-10",
+            value !== "" && !isValid && "bg-red-200 text-black",
+            value !== "" && isValid && "bg-green-200 text-black",
+            className
+          ].filter(Boolean).join(" ")
+        }
+      ),
+      /* @__PURE__ */ jsxs4("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
         label,
-        " ",
-        (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx5("span", { className: "text-red-500", children: "*" })
+        (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx5("span", { className: "text-red-500 ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx5(
-          "input",
-          {
-            ...props,
-            type: isPassword && showPassword ? "text" : props.type,
-            className: [
-              "p-2 w-full rounded border shadow",
-              isPassword && "pr-10",
-              value !== "" && !isValid && "bg-red-200 text-black",
-              value !== "" && isValid && "bg-green-200 text-black",
-              className
-            ].filter(Boolean).join(" ")
-          }
-        ),
-        isPassword && /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            onClick: () => setShowPassword((prev) => !prev),
-            className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none",
-            "aria-label": showPassword ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
-            children: showPassword ? (
-              // Ojo cerrado (ocultar)
-              /* @__PURE__ */ jsx5(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  className: "h-5 w-5",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx5(
+      isPassword ? /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none",
+          "aria-label": showPassword ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
+          children: showPassword ? (
+            // Ojo cerrado (ocultar)
+            /* @__PURE__ */ jsx5(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx5(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                  }
+                )
+              }
+            )
+          ) : (
+            // Ojo abierto (mostrar)
+            /* @__PURE__ */ jsxs4(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "h-5 w-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: [
+                  /* @__PURE__ */ jsx5(
                     "path",
                     {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       strokeWidth: 2,
-                      d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx5(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                     }
                   )
-                }
-              )
-            ) : (
-              // Ojo abierto (mostrar)
-              /* @__PURE__ */ jsxs4(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  className: "h-5 w-5",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: [
-                    /* @__PURE__ */ jsx5(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx5(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                      }
-                    )
-                  ]
-                }
-              )
+                ]
+              }
             )
-          }
-        )
-      ] })
+          )
+        }
+      ) : /* @__PURE__ */ jsx5("i", { className: "absulute right-[12px] text-[#3a7bd5] ", children: svg })
     ] }),
     !isValid && value !== "" && /* @__PURE__ */ jsx5("div", { className: "text-red-800 invalid", children: invalidMessage })
   ] });
@@ -36160,35 +36159,32 @@ function TextArea({
   ...props
 }) {
   const [value, setValue] = useState6((props == null ? void 0 : props.value) || "");
-  return /* @__PURE__ */ jsx7("div", { className: "w-full", children: /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "font-bold ", children: [
+  return /* @__PURE__ */ jsx7("div", { className: "w-full relative mb-5", children: /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center border rounded bg-white ", children: [
+    /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        ...props,
+        className: ["p-1 w-full transparent", className].join(" "),
+        value,
+        onChange: (e) => {
+          if (maxLength) {
+            e.target.value = e.target.value.slice(0, maxLength);
+          }
+          setValue(e.target.value);
+          onChange == null ? void 0 : onChange(e);
+        }
+      }
+    ),
+    " ",
+    /* @__PURE__ */ jsxs6("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
       label,
       " ",
       (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx7("span", { className: "text-red-500", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx7(
-        "textarea",
-        {
-          ...props,
-          className: ["p-1 w-full rounded border shadow", className].join(
-            " "
-          ),
-          value,
-          onChange: (e) => {
-            if (maxLength) {
-              e.target.value = e.target.value.slice(0, maxLength);
-            }
-            setValue(e.target.value);
-            onChange == null ? void 0 : onChange(e);
-          }
-        }
-      ),
-      maxLength && /* @__PURE__ */ jsxs6("div", { className: " text-xs text-gray text-right", children: [
-        value.length,
-        " / ",
-        maxLength
-      ] })
+    maxLength && /* @__PURE__ */ jsxs6("div", { className: " text-xs text-gray text-right", children: [
+      value.length,
+      " / ",
+      maxLength
     ] })
   ] }) });
 }
@@ -36389,152 +36385,140 @@ function useResources({
           return error;
         }
       };
-      const mergeDataArray = (existingData, newItem, matchId) => {
-        if (!existingData) return [newItem];
-        const index = existingData.findIndex((d) => (d == null ? void 0 : d.id) == matchId);
-        if (index >= 0) {
-          return existingData.map(
-            (d, i) => i === index ? newItem : d
-          );
-        }
-        return [newItem, ...existingData];
-      };
       const bodyCreateFunc = async (data) => {
-        var _a2, _b2, _c2, _d2, _e2;
+        var _a2, _b2, _c2, _d2, _e2, _f2;
         const options = {
           method: "POST",
           url: `${baseURI}/${key}`,
           data: Array.isArray(data) ? [...data] : { ...data },
           headers: { Authorization: token }
         };
-        const newInfo = {
-          ...info,
-          [key]: {
-            ...info[key],
-            data: [...(_b2 = (_a2 = info[key]) == null ? void 0 : _a2.data) != null ? _b2 : []],
-            state: "loading",
-            errorMessage: ""
-          }
-        };
+        const newInfo = { ...info };
+        newInfo[key].state = "loading";
+        newInfo[key].errorMessage = "";
         setInfo(newInfo);
         try {
           const consulta = await axios.request(options);
           const d = consulta.data;
-          let updatedData;
+          newInfo[key].state = "success";
+          newInfo[key].errorMessage = "";
           if (Array.isArray(data)) {
-            updatedData = [...(_d2 = (_c2 = newInfo[key]) == null ? void 0 : _c2.data) != null ? _d2 : []];
-            for (const datum of data) {
-              updatedData = mergeDataArray(updatedData, d, datum == null ? void 0 : datum.id);
+            for (let datum of data) {
+              const index = (_b2 = (_a2 = newInfo[key]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.findIndex(
+                (d2) => (d2 == null ? void 0 : d2.id) == (datum == null ? void 0 : datum.id)
+              );
+              if (index >= 0) {
+                newInfo[key].data[index] = d;
+              } else {
+                if ((_c2 = newInfo[key]) == null ? void 0 : _c2.data) {
+                  newInfo[key].data.unshift(d);
+                } else {
+                  newInfo[key].data = [d];
+                }
+              }
             }
-            updatedData = updatedData.flat();
+            newInfo[key].data = newInfo[key].data.flat();
           } else {
-            updatedData = mergeDataArray(
-              (_e2 = newInfo[key]) == null ? void 0 : _e2.data,
-              d,
-              data == null ? void 0 : data.id
+            newInfo[key].selectedItem = d;
+            const index = (_e2 = (_d2 = newInfo[key]) == null ? void 0 : _d2.data) == null ? void 0 : _e2.findIndex(
+              (d2) => (d2 == null ? void 0 : d2.id) == (data == null ? void 0 : data.id)
             );
-          }
-          setInfo({
-            ...newInfo,
-            [key]: {
-              ...newInfo[key],
-              state: "success",
-              errorMessage: "",
-              selectedItem: Array.isArray(data) ? newInfo[key].selectedItem : d,
-              data: updatedData
+            if (index >= 0) {
+              newInfo[key].data[index] = d;
+            } else {
+              if ((_f2 = newInfo[key]) == null ? void 0 : _f2.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
+              }
             }
-          });
+          }
+          setInfo({ ...newInfo });
           return d;
         } catch (error) {
           const item = http_codes_default.find((s) => s.code == error.status);
+          newInfo[key].state = "error";
+          newInfo[key].errorMessage = (item == null ? void 0 : item.meaning) || error.message;
           if (error.status == 403) {
-            onError == null ? void 0 : onError({ error, errorMessage: item == null ? void 0 : item.meaning });
+            onError == null ? void 0 : onError({ error, ...{ errorMessage: item == null ? void 0 : item.meaning } });
           }
-          setInfo({
-            ...newInfo,
-            [key]: {
-              ...newInfo[key],
-              state: "error",
-              errorMessage: (item == null ? void 0 : item.meaning) || error.message
-            }
-          });
+          setInfo({ ...newInfo });
           return error;
         }
       };
       const formCreateFunc = async (data) => {
-        var _a2, _b2, _c2, _d2, _e2;
-        const formData = new FormData();
-        if (Array.isArray(data)) {
-          data.forEach((item, i) => {
-            for (const [k, v] of Object.entries(item)) {
-              formData.append(`${k}[${i}]`, v);
-            }
-          });
-        } else {
-          for (const [k, v] of Object.entries(data)) {
-            formData.append(k, v);
-          }
-        }
-        const options = {
-          method: "POST",
-          url: `${baseURI}/${key}`,
-          data: formData,
-          headers: {
-            Authorization: token,
-            "Content-Type": "multipart/form-data"
-          }
-        };
-        const newInfo = {
-          ...info,
-          [key]: {
-            ...info[key],
-            data: [...(_b2 = (_a2 = info[key]) == null ? void 0 : _a2.data) != null ? _b2 : []],
-            state: "loading",
-            errorMessage: ""
-          }
-        };
+        var _a2, _b2, _c2, _d2, _e2, _f2;
+        const newInfo = { ...info };
+        newInfo[key].state = "loading";
+        newInfo[key].errorMessage = "";
         setInfo(newInfo);
         try {
+          const formData = new FormData();
+          if (Array.isArray(data)) {
+            data.forEach((item, i) => {
+              for (const [k, v] of Object.entries(item)) {
+                formData.append(`${k}[${i}]`, v);
+              }
+            });
+          } else {
+            for (const [k, v] of Object.entries(data)) {
+              formData.append(k, v);
+            }
+          }
+          const options = {
+            method: "POST",
+            url: `${baseURI}/${key}`,
+            data: formData,
+            headers: {
+              Authorization: token,
+              "Content-Type": "multipart/form-data"
+            }
+          };
           const consulta = await axios.request(options);
           const d = consulta.data;
-          let updatedData;
+          newInfo[key].state = "success";
+          newInfo[key].errorMessage = "";
           if (Array.isArray(data)) {
-            updatedData = [...(_d2 = (_c2 = newInfo[key]) == null ? void 0 : _c2.data) != null ? _d2 : []];
-            for (const datum of data) {
-              updatedData = mergeDataArray(updatedData, d, datum == null ? void 0 : datum.id);
+            for (let datum of data) {
+              const index = (_b2 = (_a2 = newInfo[key]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.findIndex(
+                (d2) => (d2 == null ? void 0 : d2.id) == (datum == null ? void 0 : datum.id)
+              );
+              if (index >= 0) {
+                newInfo[key].data[index] = d;
+              } else {
+                if ((_c2 = newInfo[key]) == null ? void 0 : _c2.data) {
+                  newInfo[key].data.unshift(d);
+                } else {
+                  newInfo[key].data = [d];
+                }
+              }
             }
-            updatedData = updatedData.flat();
+            newInfo[key].data = newInfo[key].data.flat();
           } else {
-            updatedData = mergeDataArray(
-              (_e2 = newInfo[key]) == null ? void 0 : _e2.data,
-              d,
-              data == null ? void 0 : data.id
+            newInfo[key].selectedItem = d;
+            const index = (_e2 = (_d2 = newInfo[key]) == null ? void 0 : _d2.data) == null ? void 0 : _e2.findIndex(
+              (d2) => (d2 == null ? void 0 : d2.id) == (data == null ? void 0 : data.id)
             );
-          }
-          setInfo({
-            ...newInfo,
-            [key]: {
-              ...newInfo[key],
-              state: "success",
-              errorMessage: "",
-              selectedItem: Array.isArray(data) ? newInfo[key].selectedItem : d,
-              data: updatedData
+            if (index >= 0) {
+              newInfo[key].data[index] = d;
+            } else {
+              if ((_f2 = newInfo[key]) == null ? void 0 : _f2.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
+              }
             }
-          });
+          }
+          setInfo({ ...newInfo });
           return d;
         } catch (error) {
           const item = http_codes_default.find((s) => s.code == error.status);
+          newInfo[key].state = "error";
+          newInfo[key].errorMessage = (item == null ? void 0 : item.meaning) || error.message;
           if (error.status == 403) {
-            onError == null ? void 0 : onError({ error, errorMessage: item == null ? void 0 : item.meaning });
+            onError == null ? void 0 : onError({ error, ...{ errorMessage: item == null ? void 0 : item.meaning } });
           }
-          setInfo({
-            ...newInfo,
-            [key]: {
-              ...newInfo[key],
-              state: "error",
-              errorMessage: (item == null ? void 0 : item.meaning) || error.message
-            }
-          });
+          setInfo({ ...newInfo });
           return error;
         }
       };
@@ -36553,107 +36537,81 @@ function useResources({
           return await bodyCreateFunc(data);
         },
         update: async (id, data) => {
-          var _a2, _b2, _c2, _d2, _e2;
+          var _a2, _b2, _c2;
           const options = {
             method: "PATCH",
             url: `${baseURI}/${key}/${id}`,
             data: Array.isArray(data) ? [...data] : { ...data },
             headers: { Authorization: token }
           };
-          const newInfo = {
-            ...info,
-            [key]: {
-              ...info[key],
-              // ✅ copia superficial del key
-              data: [...(_b2 = (_a2 = info[key]) == null ? void 0 : _a2.data) != null ? _b2 : []],
-              // ✅ copia del array
-              state: "loading",
-              errorMessage: ""
-            }
-          };
+          const newInfo = { ...info };
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
           setInfo(newInfo);
           try {
             const consulta = await axios.request(options);
             const d = consulta.data;
-            const index = (_d2 = (_c2 = newInfo[key]) == null ? void 0 : _c2.data) == null ? void 0 : _d2.findIndex(
-              (item) => (item == null ? void 0 : item.id) == id
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = { ...newInfo[key].selectedItem, ...d };
+            const index = (_b2 = (_a2 = newInfo[key]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.findIndex(
+              (d2) => (d2 == null ? void 0 : d2.id) == id
             );
-            const updatedData = index >= 0 ? newInfo[key].data.map(
-              (item, i) => i === index ? { ...item, ...d } : item
-            ) : ((_e2 = newInfo[key]) == null ? void 0 : _e2.data) ? [d, ...newInfo[key].data] : [d];
-            const updatedInfo = {
-              ...newInfo,
-              [key]: {
-                ...newInfo[key],
-                state: "success",
-                errorMessage: "",
-                selectedItem: { ...newInfo[key].selectedItem, ...d },
-                data: updatedData
+            if (index >= 0) {
+              newInfo[key].data[index] = { ...newInfo[key].data[index], ...d };
+            } else {
+              if ((_c2 = newInfo[key]) == null ? void 0 : _c2.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
               }
-            };
-            setInfo(updatedInfo);
+            }
+            setInfo({ ...newInfo });
             return d;
           } catch (error) {
             const item = http_codes_default.find((s) => s.code == error.status);
-            setInfo({
-              ...newInfo,
-              [key]: {
-                ...newInfo[key],
-                state: "error",
-                errorMessage: (item == null ? void 0 : item.meaning) || error.message
-              }
-            });
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = (item == null ? void 0 : item.meaning) || error.message;
             if (error.status == 403) {
               onError == null ? void 0 : onError({ error, ...{ errorMessage: item == null ? void 0 : item.meaning } });
             }
+            setInfo({ ...newInfo });
             return error;
           }
         },
         remove: async (id) => {
-          var _a2, _b2, _c2, _d2, _e2;
+          var _a2, _b2;
           const options = {
             method: "DELETE",
             url: `${baseURI}/${key}/${id}`,
             headers: { Authorization: token }
           };
-          const newInfo = {
-            ...info,
-            [key]: {
-              ...info[key],
-              data: [...(_b2 = (_a2 = info[key]) == null ? void 0 : _a2.data) != null ? _b2 : []],
-              state: "loading",
-              errorMessage: ""
-            }
-          };
+          const newInfo = { ...info };
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
           setInfo(newInfo);
           try {
             const consulta = await axios.request(options);
             const d = consulta.data;
-            setInfo({
-              ...newInfo,
-              [key]: {
-                ...newInfo[key],
-                state: "success",
-                errorMessage: "",
-                selectedItem: d,
-                data: (_e2 = (_d2 = (_c2 = newInfo[key]) == null ? void 0 : _c2.data) == null ? void 0 : _d2.filter((item) => (item == null ? void 0 : item.id) != id)) != null ? _e2 : []
-                // ✅ filter en lugar de splice
-              }
-            });
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = d;
+            const index = (_b2 = (_a2 = newInfo[key]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.findIndex(
+              (d2) => (d2 == null ? void 0 : d2.id) == id
+            );
+            if (index >= 0) {
+              newInfo[key].data.splice(index, 1);
+            }
+            setInfo({ ...newInfo });
             return d.data;
           } catch (error) {
             const item = http_codes_default.find((s) => s.code == error.status);
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = (item == null ? void 0 : item.meaning) || error.message;
             if (error.status == 403) {
-              onError == null ? void 0 : onError({ error, errorMessage: item == null ? void 0 : item.meaning });
+              onError == null ? void 0 : onError({ error, ...{ errorMessage: item == null ? void 0 : item.meaning } });
             }
-            setInfo({
-              ...newInfo,
-              [key]: {
-                ...newInfo[key],
-                state: "error",
-                errorMessage: (item == null ? void 0 : item.meaning) || error.message
-              }
-            });
+            setInfo({ ...newInfo });
             return error;
           }
         },
@@ -36842,23 +36800,15 @@ function Select({
       }
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: "w-full", children: [
-    label && /* @__PURE__ */ jsxs7("label", { className: "font-bold mb-1 block", children: [
-      label,
-      " ",
-      (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx10("span", { className: "text-red-500", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: "w-full relative mb-5", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center border rounded bg-white", children: [
       /* @__PURE__ */ jsx10(
         "input",
         {
           autoComplete: "off",
           ref: inputRef,
           ...props,
-          className: [
-            "p-2 w-full rounded border shadow",
-            props == null ? void 0 : props.className
-          ].join(" "),
+          className: ["p-2 w-full  transparent", props == null ? void 0 : props.className].join(" "),
           value: inputValue,
           onBlur: (e) => {
             setTimeout(() => {
@@ -36888,6 +36838,11 @@ function Select({
           onKeyDown: handleKeyDown
         }
       ),
+      label && /* @__PURE__ */ jsxs7("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
+        label,
+        " ",
+        (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx10("span", { className: "text-red-500", children: "*" })
+      ] }),
       !isOpen && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ jsx10(SelectIcon, {}) }),
       isOpen && inputValue != "" && /* @__PURE__ */ jsx10(
         "button",
@@ -36911,7 +36866,7 @@ function Select({
         "div",
         {
           style: { zIndex: 9999999999 },
-          className: `absolute w-full border rounded shadow bg-white z-10 max-h-100  overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
+          className: `absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10  overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
           children: filtered.map((opt, index) => /* @__PURE__ */ jsx10(
             "div",
             {
@@ -37118,13 +37073,6 @@ function PopupOverlay({
     {
       className: "fixed inset-0 flex items-center justify-center z-[1000]  ",
       style: { background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" },
-      onClick: (e) => {
-        var _a;
-        if (e.target === e.currentTarget) {
-          onClose(false);
-          (_a = popup.onCancel) == null ? void 0 : _a.call(popup);
-        }
-      },
       children: [
         /* @__PURE__ */ jsx14("style", { children: `
         @keyframes fadeInScale {