framepexls-ui-lib 0.3.1 → 0.3.3

package/dist/MediaSelector.js

@@ -33,7 +33,7 @@ __export(MediaSelector_exports, {
 });
 module.exports = __toCommonJS(MediaSelector_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ChartCard = __toESM(require("./ChartCard"));
 var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
@@ -51,24 +51,24 @@ function MediaSelector({
   onClose
 }) {
   const { obtenerMedios, items, page, lastPage, setPage, subirMedio } = medios;
-  const [openPicker, setOpenPicker] = (0, import_react.useState)(false);
-  const [uploading, setUploading] = (0, import_react.useState)(false);
-  const [progress, setProgress] = (0, import_react.useState)(0);
-  const inputRef = (0, import_react.useRef)(null);
-  const [linkValue, setLinkValue] = (0, import_react.useState)(value != null ? value : "");
-  const [linkLoading, setLinkLoading] = (0, import_react.useState)(false);
-  const [linkError, setLinkError] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
+  const [openPicker, setOpenPicker] = import_react.default.useState(false);
+  const [uploading, setUploading] = import_react.default.useState(false);
+  const [progress, setProgress] = import_react.default.useState(0);
+  const inputRef = import_react.default.useRef(null);
+  const [linkValue, setLinkValue] = import_react.default.useState(value != null ? value : "");
+  const [linkLoading, setLinkLoading] = import_react.default.useState(false);
+  const [linkError, setLinkError] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
     if (openPicker) obtenerMedios({ page: page || 1 });
   }, [openPicker, page, obtenerMedios]);
-  (0, import_react.useEffect)(() => {
+  import_react.default.useEffect(() => {
     if (autoOpen) setOpenPicker(true);
   }, [autoOpen]);
-  (0, import_react.useEffect)(() => {
+  import_react.default.useEffect(() => {
     if (openPicker) setLinkValue(value != null ? value : "");
   }, [openPicker, value]);
   const onFiles = async (files) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (!(files == null ? void 0 : files.length)) return;
     const file = files[0];
     setUploading(true);
@@ -76,7 +76,8 @@ function MediaSelector({
     const res = await subirMedio(file, { onProgress: (p) => setProgress(p.porcentaje) });
     setUploading(false);
     if (res.ok) {
-      const url = (_d = (_c = (_a = res.data) == null ? void 0 : _a.url) != null ? _c : (_b = res.data) == null ? void 0 : _b.url) != null ? _d : null;
+      const anyData = (_a = res.data) != null ? _a : res;
+      const url = (_b = anyData == null ? void 0 : anyData.url) != null ? _b : null;
       onChange(url, res.data);
     }
   };
@@ -87,140 +88,239 @@ function MediaSelector({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
     !dialogOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { value: value != null ? value : "", onChange: (e) => onChange(e.target.value || null), placeholder: "URL de imagen", clearable: true, onClear: () => onChange(null) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Input.default,
+          {
+            value: value != null ? value : "",
+            onChange: (e) => onChange(e.target.value || null),
+            placeholder: "URL de imagen",
+            clearable: true,
+            onClear: () => onChange(null)
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => setOpenPicker(true), children: "Elegir" })
       ] }),
-      value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
+      value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open: openPicker, onClose: () => {
-      setOpenPicker(false);
-      onClose == null ? void 0 : onClose();
-    }, size: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: "Biblioteca de medios", description: "Selecciona una imagen o sube una nueva", onClose: () => {
-        setOpenPicker(false);
-        onClose == null ? void 0 : onClose();
-      } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {
-            var _a;
-            return (_a = inputRef.current) == null ? void 0 : _a.click();
-          }, disabled: uploading, children: "Seleccionar" })
-        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            onDragOver: (e) => {
-              e.preventDefault();
-              e.dataTransfer.dropEffect = "copy";
-            },
-            onDrop: handleDrop,
-            onClick: () => {
-              var _a;
-              return (_a = inputRef.current) == null ? void 0 : _a.click();
-            },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-8 w-8 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Soltar imagen aqu\xED" }),
-              uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-1 text-xs text-slate-500", children: [
-                  progress,
-                  "%"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform", initial: { scaleX: 0 }, animate: { scaleX: progress / 100 }, transition: import_animations.springSm }) })
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartCard.default, { className: "lg:col-span-1", title: "Desde enlace", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Pega una URL http(s) v\xE1lida" }), compact: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_Input.default,
-              {
-                type: "url",
-                placeholder: "https://\u2026",
-                value: linkValue,
-                onChange: (e) => {
-                  setLinkValue(e.target.value);
-                  setLinkError(null);
-                }
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Dialog.default,
+      {
+        open: openPicker,
+        onClose: () => {
+          setOpenPicker(false);
+          onClose == null ? void 0 : onClose();
+        },
+        size: "full",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Dialog.default.Header,
+            {
+              title: "Biblioteca de medios",
+              description: "Selecciona una imagen o sube una nueva",
+              onClose: () => {
+                setOpenPicker(false);
+                onClose == null ? void 0 : onClose();
               }
-            ),
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_Button.default,
+              import_ChartCard.default,
               {
-                onClick: async () => {
-                  var _a, _b, _c, _d;
-                  if (!linkValue) return;
-                  setLinkError(null);
-                  const isHttp = /^https?:\/\//i.test(linkValue);
-                  if (!isHttp) {
-                    setLinkError("Ingresa un enlace v\xE1lido (http/https)");
-                    return;
-                  }
-                  const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
-                  if (importer) {
-                    setLinkLoading(true);
-                    const res = await importer(linkValue);
-                    setLinkLoading(false);
-                    if (res && res.ok) {
-                      const d = (_b = res.data) != null ? _b : res;
-                      onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
-                      setOpenPicker(false);
-                      onClose == null ? void 0 : onClose();
-                    } else {
-                      setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                className: "lg:col-span-1",
+                title: "Subir imagen",
+                subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }),
+                right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_Input.default,
+                    {
+                      unstyled: true,
+                      ref: inputRef,
+                      type: "file",
+                      accept,
+                      className: "hidden",
+                      onChange: (e) => onFiles(e.target.files)
                     }
-                  } else {
-                    onChange(linkValue || null, null);
-                    setOpenPicker(false);
-                    onClose == null ? void 0 : onClose();
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {
+                    var _a;
+                    return (_a = inputRef.current) == null ? void 0 : _a.click();
+                  }, disabled: uploading, children: "Seleccionar" })
+                ] }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    onDragOver: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "copy";
+                    },
+                    onDrop: handleDrop,
+                    onClick: () => {
+                      var _a;
+                      return (_a = inputRef.current) == null ? void 0 : _a.click();
+                    },
+                    className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          className: "h-8 w-8 text-slate-400",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.6",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: "Formatos: JPG, PNG, WEBP, GIF" }),
+                      uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 w-full rounded-xl border border-slate-200 p-2 text-left text-sm dark:border-white/10", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Subiendo\u2026" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                            progress,
+                            "%"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_framer_motion.motion.div,
+                          {
+                            className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                            initial: { scaleX: 0 },
+                            animate: { scaleX: progress / 100 },
+                            transition: import_animations.springSm
+                          }
+                        ) })
+                      ] })
+                    ]
                   }
-                },
-                disabled: !linkValue || linkLoading,
-                children: linkLoading ? "Importando\u2026" : "Usar"
+                )
               }
-            )
-          ] }),
-          linkError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:col-span-2 space-y-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
-              "P\xE1gina ",
-              page,
-              " de ",
-              Math.max(1, lastPage)
-            ] }),
-            lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: items.map((m) => {
-            var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { layout: true, initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: import_animations.springSm, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              import_Button.default,
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ChartCard.default,
               {
-                unstyled: true,
-                className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-2 focus:ring-slate-300 dark:border-white/10 dark:bg-white/5",
-                onClick: () => {
-                  var _a2;
-                  onChange((_a2 = m.url) != null ? _a2 : null, m);
-                  setOpenPicker(false);
-                  onClose == null ? void 0 : onClose();
-                },
+                className: "lg:col-span-1",
+                title: "Desde enlace",
+                subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Pega una URL http(s) v\xE1lida" }),
+                compact: true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-105" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_Input.default,
+                      {
+                        type: "url",
+                        placeholder: "https://\u2026",
+                        value: linkValue,
+                        onChange: (e) => {
+                          setLinkValue(e.target.value);
+                          setLinkError(null);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_Button.default,
+                      {
+                        onClick: async () => {
+                          var _a, _b, _c, _d;
+                          if (!linkValue) return;
+                          setLinkError(null);
+                          const isHttp = /^https?:\/\//i.test(linkValue);
+                          if (!isHttp) {
+                            setLinkError("Ingresa un enlace v\xE1lido (http/https)");
+                            return;
+                          }
+                          const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
+                          if (importer) {
+                            setLinkLoading(true);
+                            const res = await importer(linkValue);
+                            setLinkLoading(false);
+                            if (res && res.ok) {
+                              const d = (_b = res.data) != null ? _b : res;
+                              onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
+                              setOpenPicker(false);
+                              onClose == null ? void 0 : onClose();
+                            } else {
+                              setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                            }
+                          } else {
+                            onChange(linkValue || null, null);
+                            setOpenPicker(false);
+                            onClose == null ? void 0 : onClose();
+                          }
+                        },
+                        disabled: !linkValue || linkLoading,
+                        children: linkLoading ? "Importando\u2026" : "Usar"
+                      }
+                    )
+                  ] }),
+                  linkError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
                 ]
               }
-            ) }, m.id);
-          }) }) })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => {
-        setOpenPicker(false);
-        onClose == null ? void 0 : onClose();
-      }, children: "Cerrar" }) })
-    ] })
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:col-span-2 space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
+                  "P\xE1gina ",
+                  page,
+                  " de ",
+                  Math.max(1, lastPage)
+                ] }),
+                lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: items.map((m) => {
+                var _a;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_framer_motion.motion.div,
+                  {
+                    layout: true,
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: 8 },
+                    transition: import_animations.springSm,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_Button.default,
+                      {
+                        unstyled: true,
+                        className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-2 focus:ring-slate-300 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+                        onClick: () => {
+                          var _a2;
+                          onChange((_a2 = m.url) != null ? _a2 : null, m);
+                          setOpenPicker(false);
+                          onClose == null ? void 0 : onClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "img",
+                            {
+                              src: (_a = m.url) != null ? _a : "",
+                              alt: m.nombre,
+                              className: "h-full w-full object-cover transition group-hover:scale-105"
+                            }
+                          ) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                        ]
+                      }
+                    )
+                  },
+                  String(m.id)
+                );
+              }) }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setOpenPicker(false);
+                onClose == null ? void 0 : onClose();
+              },
+              children: "Cerrar"
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }