bmi-next 1.0.0

package/dist/components/ContratacionPage/index.js

@@ -0,0 +1,460 @@
+import { jsxs as e, jsx as n } from "react/jsx-runtime";
+import S, { useState as h, useEffect as $, useCallback as ie } from "react";
+import te from "./SelectorAñosCobertura.js";
+import ae from "./Slider.js";
+import { s as a } from "../../Contratacion.module-DVSWILuV.js";
+import { useIsMobile as re } from "../../hooks/useIsMobile.js";
+import { Button as j } from "../Button/index.js";
+import oe from "./Link.js";
+import { Radio as _ } from "../Radio/index.js";
+import { Input as le } from "../Input/index.js";
+import "../../index-Cb7Kc3pQ.js";
+const ce = S.createContext({}), V = !0;
+function se({ baseColor: t, highlightColor: o, width: m, height: C, borderRadius: l, circle: N, direction: s, duration: g, enableAnimation: d = V, customHighlightBackground: f }) {
+  const c = {};
+  return s === "rtl" && (c["--animation-direction"] = "reverse"), typeof g == "number" && (c["--animation-duration"] = `${g}s`), d || (c["--pseudo-element-display"] = "none"), (typeof m == "string" || typeof m == "number") && (c.width = m), (typeof C == "string" || typeof C == "number") && (c.height = C), (typeof l == "string" || typeof l == "number") && (c.borderRadius = l), N && (c.borderRadius = "50%"), typeof t < "u" && (c["--base-color"] = t), typeof o < "u" && (c["--highlight-color"] = o), typeof f == "string" && (c["--custom-highlight-background"] = f), c;
+}
+function de({ count: t = 1, wrapper: o, className: m, containerClassName: C, containerTestId: l, circle: N = !1, style: s, ...g }) {
+  var d, f, c;
+  const E = S.useContext(ce), I = { ...g };
+  for (const [u, y] of Object.entries(g))
+    typeof y > "u" && delete I[u];
+  const P = {
+    ...E,
+    ...I,
+    circle: N
+  }, F = {
+    ...s,
+    ...se(P)
+  };
+  let w = "react-loading-skeleton";
+  m && (w += ` ${m}`);
+  const T = (d = P.inline) !== null && d !== void 0 ? d : !1, D = [], p = Math.ceil(t);
+  for (let u = 0; u < p; u++) {
+    let y = F;
+    if (p > t && u === p - 1) {
+      const x = (f = y.width) !== null && f !== void 0 ? f : "100%", k = t % 1, O = typeof x == "number" ? x * k : `calc(${x} * ${k})`;
+      y = { ...y, width: O };
+    }
+    const A = S.createElement("span", { className: w, style: y, key: u }, "‌");
+    T ? D.push(A) : D.push(S.createElement(
+      S.Fragment,
+      { key: u },
+      A,
+      S.createElement("br", null)
+    ));
+  }
+  return S.createElement("span", { className: C, "data-testid": l, "aria-live": "polite", "aria-busy": (c = P.enableAnimation) !== null && c !== void 0 ? c : V }, o ? D.map((u, y) => S.createElement(o, { key: y }, u)) : D);
+}
+const Ie = ({
+  datosUsuario: t,
+  datosCuestionario: o
+}) => {
+  const [m, C] = h(0), [l, N] = h(1e5), [s, g] = h(5), [d, f] = h(!1), [c, E] = h(!1), [I, P] = h(!1), [F, w] = h(!1), [T, D] = h(), [p, u] = h(), [y, A] = h(!1), x = o.limiteInfCobertura || 5e4, k = o.limiteSupCobertura || 25e4, [O, H] = h([5, 10, 15, 20, 30]), v = re("(max-width: 1095px)");
+  $(() => {
+    if (!t.edad) return;
+    let i = [5, 10, 15, 20, 30];
+    o.limiteTermino && (i = o.limiteTermino), t.edad > 45 && (i = i.filter((r) => r !== 30)), t.edad > 55 && (i = i.filter((r) => r !== 20)), t.edad > 60 && (i = i.filter((r) => r !== 15)), t.edad > 65 && (i = i.filter((r) => r !== 10)), t.edad > 70 && (i = []), H(i);
+  }, [o.limiteTermino, t.edad]), $(() => {
+    (async () => {
+      A(!0);
+      try {
+        const r = await fetch(
+          "https://integraciones.bmivida.com/cotizador/getTasas.php",
+          {
+            method: "POST",
+            body: JSON.stringify({
+              sexo: t.sexo,
+              fumador: t.fumador
+            })
+          }
+        ), b = await r.json();
+        if (!r.ok)
+          throw new Error(b.error || "Ha ocurrido un error");
+        D(b.tasas), u(b.comisiones);
+      } catch (r) {
+        console.error(r);
+      } finally {
+        A(!1);
+      }
+    })();
+  }, [t]), $(() => {
+    o.limiteSupCobertura && N(o.limiteSupCobertura), o.limiteTermino && g(Math.max(...o.limiteTermino));
+  }, [o]), $(() => {
+    l < x || l > k ? P(!0) : P(!1), (!s || [5, 10, 15].includes(s)) && f(!1);
+  }, [
+    l,
+    s,
+    x,
+    k
+  ]);
+  const z = ie(() => {
+    const i = document.getElementById(
+      "condiciones"
+    ), r = document.getElementById("veracidad"), b = (i == null ? void 0 : i.checked) && (r == null ? void 0 : r.checked) && !I && m > 0 && t.edad <= 70 && t.edad >= 18;
+    w(b);
+  }, [I, m, t.edad]);
+  $(() => {
+    z();
+  }, [z]);
+  const R = z;
+  $(() => {
+    if (!T || !p) return;
+    const { edad: i } = t, b = (d ? T.siDev : T.noDev)[s];
+    if (!b)
+      return;
+    const B = b[i];
+    if (!B)
+      return;
+    const L = l / p.DIVISOR_MIL * B, Y = L * p.COMISION_BROKER, Z = L * p.CARGOS_ADMIN, M = L + Y + Z, U = M * p.SEGURO_CAMPESINO, ee = M * p.SUPER_BANCOS, ne = (M + U + ee) / 12;
+    C(ne);
+  }, [
+    o,
+    t,
+    T,
+    p,
+    l,
+    s,
+    d
+  ]);
+  const W = (i) => {
+    const r = parseInt(i.target.value.replace(/\D/g, ""));
+    isNaN(r) || N(r);
+  }, G = (i) => {
+    E(!1), N(i);
+  }, J = () => {
+    const i = document.querySelector(`.${a.adjustCard}`);
+    i == null || i.scrollIntoView({ behavior: "smooth" });
+  }, K = () => {
+    const i = document.querySelector(`.${a.priceCard}`);
+    i == null || i.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, Q = () => {
+    const i = "https://integraciones.bmivida.com/placeToPay/checkout.php", r = Math.round((m + Number.EPSILON) * 100) / 100, b = d ? "si" : "no", B = `?id=${t.idUsuario}&name=${t.nombre}&surname=${t.surname}&email=${t.email}&document=${t.document}&mobile=${t.mobile}&amount=${r}&documentType=${t.documentType}&termino=${s}&sumaAsegurada=${l}&devolucionPrima=${b}`;
+    window.location.href = i + B;
+  }, X = () => {
+    window.location.href = "https://bmivida.com";
+  };
+  return /* @__PURE__ */ e("div", { "data-name": "contratacion", children: [
+    /* @__PURE__ */ e("div", { className: a.contenedorContratacion, children: [
+      /* @__PURE__ */ n("h1", { style: { marginTop: v ? "20px" : "75px", fontFamily: "Palanquin BMI Dark Semibold" }, children: "El mejor precio, para ti" }),
+      /* @__PURE__ */ n("p", { className: a.subtitle, children: "Este es el precio que hemos calculado para ti:" }),
+      /* @__PURE__ */ n("div", { style: { maxWidth: "1056px", margin: "0 auto" }, children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: v ? "column" : "row",
+            justifyContent: "center",
+            gap: "20px",
+            alignItems: v ? "center" : "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: a.priceCard,
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  maxWidth: v ? "100%" : "382px"
+                },
+                children: [
+                  y ? /* @__PURE__ */ n(
+                    de,
+                    {
+                      baseColor: "#e7fff4",
+                      highlightColor: "#77e3b2",
+                      height: 88,
+                      style: { marginBottom: "24px", borderRadius: "8px" }
+                    }
+                  ) : /* @__PURE__ */ e("div", { className: a.priceBox, children: [
+                    /* @__PURE__ */ e("span", { className: a.priceAmount, children: [
+                      "$",
+                      Math.round((m + Number.EPSILON) * 100) / 100
+                    ] }),
+                    /* @__PURE__ */ n("span", { className: a.pricePeriod, children: "/mes" })
+                  ] }),
+                  /* @__PURE__ */ e("ul", { className: a.benefitsList, children: [
+                    /* @__PURE__ */ e("li", { children: [
+                      /* @__PURE__ */ n("div", { className: a.bulletPoint }),
+                      /* @__PURE__ */ e("span", { children: [
+                        "Seguro de vida a término para ",
+                        t.nombre
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e("li", { children: [
+                      /* @__PURE__ */ n("div", { className: a.bulletPoint }),
+                      /* @__PURE__ */ e("span", { children: [
+                        l.toLocaleString("es-US", {
+                          style: "currency",
+                          currency: "USD",
+                          minimumFractionDigits: 0,
+                          maximumFractionDigits: 0
+                        }),
+                        " ",
+                        "de cobertura"
+                      ] })
+                    ] }),
+                    s && /* @__PURE__ */ e("li", { children: [
+                      /* @__PURE__ */ n("div", { className: a.bulletPoint }),
+                      /* @__PURE__ */ e("span", { children: [
+                        "Término a ",
+                        s,
+                        " años"
+                      ] })
+                    ] }),
+                    d && /* @__PURE__ */ e("li", { children: [
+                      /* @__PURE__ */ n("div", { className: a.bulletPoint }),
+                      /* @__PURE__ */ n("span", { children: "Devolución de prima" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: a.containerCheckbox, children: [
+                    /* @__PURE__ */ e("label", { children: [
+                      /* @__PURE__ */ n(
+                        "input",
+                        {
+                          type: "checkbox",
+                          name: "condiciones",
+                          id: "condiciones",
+                          onChange: R
+                        }
+                      ),
+                      /* @__PURE__ */ e("span", { children: [
+                        "He leído y acepto las",
+                        " ",
+                        /* @__PURE__ */ n(
+                          "a",
+                          {
+                            href: "https://bmivida.com/terminos-y-condiciones/",
+                            target: "_blank",
+                            children: "Condiciones de contratación del plan"
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e("label", { children: [
+                      /* @__PURE__ */ n(
+                        "input",
+                        {
+                          type: "checkbox",
+                          name: "veracidad",
+                          id: "veracidad",
+                          onChange: R
+                        }
+                      ),
+                      /* @__PURE__ */ n("span", { children: "Como persona asegurada he contestado de forma veraz y detalladamente a cada pregunta de salud. Entiendo que no declarar todos mis antecedentes médicos podrá suponer la pérdida del derecho a la indemnización en caso de siniestro, incluso cuando la causa directa del siniestro no tenga relación con la misma." })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n(
+                    "span",
+                    {
+                      onClick: J,
+                      className: a.customizeLink,
+                      style: { display: v ? "block" : "none" },
+                      children: "Personaliza tu cobertura"
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    j,
+                    {
+                      disabled: !F,
+                      variant: "primary",
+                      onClick: Q,
+                      children: "Activar cobertura"
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: "#",
+                      onClick: X,
+                      style: {
+                        textAlign: "center",
+                        fontSize: "16px",
+                        margin: "4px auto"
+                      },
+                      children: "Activaré en otro momento"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: `${a.flexColumn} ${a.gap10}`,
+                style: { padding: "0", margin: "0", maxWidth: v ? "100%" : "654px" },
+                children: /* @__PURE__ */ e("div", { className: a.adjustCard, children: [
+                  /* @__PURE__ */ n("h1", { style: { fontSize: "32px", lineHeight: "36px", margin: "0" }, children: "Ajusta tu póliza" }),
+                  /* @__PURE__ */ e("div", { children: [
+                    /* @__PURE__ */ e(
+                      "p",
+                      {
+                        style: { fontSize: "25px", lineHeight: "30px", fontWeight: "bold", margin: "0" },
+                        children: [
+                          "Cobertura:",
+                          " ",
+                          l.toLocaleString("es-US", {
+                            style: "currency",
+                            currency: "USD",
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 0
+                          })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      ae,
+                      {
+                        cobertura: l,
+                        setCobertura: G,
+                        limiteInferior: x,
+                        limiteSuperior: k
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      oe,
+                      {
+                        handleClick: () => E(!0),
+                        style: { margin: "10px 0" },
+                        children: [
+                          "Quiero otro monto",
+                          " "
+                        ]
+                      }
+                    ),
+                    c && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        style: {
+                          marginTop: "4px",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: /* @__PURE__ */ n(
+                          le,
+                          {
+                            value: "$" + l.toLocaleString("es-US", {
+                              minimumFractionDigits: 0,
+                              maximumFractionDigits: 0
+                            }),
+                            type: "text",
+                            onChange: W,
+                            placeholder: "Ingresa el valor de la cobertura"
+                          }
+                        )
+                      }
+                    ),
+                    I && /* @__PURE__ */ e("div", { style: me, children: [
+                      "Debes seleccionar una cantidad entre",
+                      " ",
+                      x,
+                      " y ",
+                      k
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n("p", { style: { ...pe }, children: "Te recomendamos seleccionar un monto que cubra las responsabilidades financieras de tu familia, como por ejemplo una hipoteca o la universidad." }),
+                  /* @__PURE__ */ e("div", { children: [
+                    /* @__PURE__ */ n("h3", { style: q, children: "Años de cobertura" }),
+                    /* @__PURE__ */ n(
+                      te,
+                      {
+                        devolucionPrima: d,
+                        añosCobertura: s,
+                        setAñosCobertura: g,
+                        terminos: O
+                      }
+                    )
+                  ] }),
+                  s && ![5, 10, 15].includes(s) && /* @__PURE__ */ e("div", { children: [
+                    /* @__PURE__ */ n("h3", { style: q, children: "Devolución de prima" }),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: `${v ? a.flexColumn : a.flexRow} ${a.gap10}`,
+                        style: { width: "100%" },
+                        children: [
+                          /* @__PURE__ */ n(
+                            _,
+                            {
+                              label: "Sí",
+                              name: "devolucionPrima",
+                              checked: d,
+                              onChange: () => f(!0)
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            _,
+                            {
+                              label: "No",
+                              name: "devolucionPrima",
+                              checked: !d,
+                              onChange: () => f(!1)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    v && /* @__PURE__ */ e("footer", { className: a.resumen, children: [
+      /* @__PURE__ */ e("section", { children: [
+        /* @__PURE__ */ e("div", { children: [
+          /* @__PURE__ */ n("span", { style: { fontSize: "17px" }, children: "Tu precio:" }),
+          /* @__PURE__ */ e("span", { children: [
+            /* @__PURE__ */ e("span", { style: { lineHeight: 1 }, className: a.priceAmount, children: [
+              "$",
+              Math.round((m + Number.EPSILON) * 100) / 100
+            ] }),
+            /* @__PURE__ */ n("span", { className: a.pricePeriod, children: "/mes" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { children: [
+          /* @__PURE__ */ e("span", { className: a.datoResumen, children: [
+            "Cobertura:",
+            " ",
+            /* @__PURE__ */ e("span", { children: [
+              l.toLocaleString("es-US", {
+                style: "currency",
+                currency: "USD",
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0
+              }),
+              " "
+            ] })
+          ] }),
+          /* @__PURE__ */ e("span", { className: a.datoResumen, children: [
+            "Término: ",
+            /* @__PURE__ */ e("span", { children: [
+              s,
+              " años"
+            ] })
+          ] }),
+          /* @__PURE__ */ n("span", { className: a.datoResumen, children: /* @__PURE__ */ n("span", { children: d ? "Devolución de prima" : "Sin devolución de prima" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ n(j, { variant: "secondary", onClick: K, children: "Volver para confirmar cobertura" })
+    ] })
+  ] });
+}, me = {
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  marginTop: "8px",
+  color: "#d90000"
+}, pe = { fontSize: "19px", opacity: 0.75, margin: 0 }, q = {
+  margin: "10px",
+  marginLeft: "0",
+  fontSize: "25px",
+  lineHeight: "30px",
+  fontWeight: "bold"
+};
+export {
+  Ie as ContratacionPage
+};

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Props para el componente SelectDrawer
+ * @interface SelectDrawerProps
+ */
+interface DatePickerProps {
+    /** Texto del título que se muestra en la parte superior del cajón */
+    title: string;
+    /** Texto del botón que se muestra en la parte inferior del cajón */
+    buttonText: string;
+    /** La fecha actualmente seleccionada */
+    selected: Date;
+    /** Función callback para actualizar la fecha seleccionada */
+    setSelected: (selected: Date) => void;
+}
+export declare function DatePicker({ title, buttonText, selected, setSelected }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/index.js

@@ -0,0 +1,169 @@
+import { jsxs as l, Fragment as F, jsx as n } from "react/jsx-runtime";
+import { Icon as j } from "../../icons/icons.js";
+import { useState as s, useRef as k, useEffect as m } from "react";
+import { Button as E } from "../Button/index.js";
+import { Input as J } from "../Input/index.js";
+import '../../assets/index18.css';const q = "_overlay_pyf74_1", z = "_closing_pyf74_12", G = "_bottomDrawer_pyf74_16", K = "_drawerHeader_pyf74_34", L = "_drawerIndicator_pyf74_46", Q = "_dateButton_pyf74_53", U = "_drawerContent_pyf74_69", V = "_closeButton_pyf74_78", W = "_pickerContainer_pyf74_98", X = "_topFade_pyf74_134", Z = "_bottomFade_pyf74_150", ee = "_pickerColumn_pyf74_165", te = "_pickerItem_pyf74_199", oe = "_selected_pyf74_226", ne = "_confirmButton_pyf74_250", t = {
+  overlay: q,
+  closing: z,
+  bottomDrawer: G,
+  drawerHeader: K,
+  drawerIndicator: L,
+  dateButton: Q,
+  drawerContent: U,
+  closeButton: V,
+  pickerContainer: W,
+  topFade: X,
+  bottomFade: Z,
+  pickerColumn: ee,
+  pickerItem: te,
+  selected: oe,
+  confirmButton: ne
+}, re = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
+function de({ title: S, buttonText: $, selected: r, setSelected: M }) {
+  const [p, w] = s(!1), [N, I] = s(!1), [a, b] = s(r.getMonth()), [c, B] = s(r.getFullYear()), [i, _] = s(r.getDate()), [h, Y] = s([]), [y, x] = s([]), D = k(null), C = k(null), g = k(null), d = () => {
+    requestAnimationFrame(() => {
+      if (D.current) {
+        const e = h.findIndex((o) => o.getDate() === i);
+        if (e !== -1) {
+          const o = e * 44;
+          D.current.scrollTo({
+            top: o,
+            behavior: "smooth"
+          });
+        }
+      }
+      if (C.current) {
+        const e = a * 44;
+        C.current.scrollTo({
+          top: e,
+          behavior: "smooth"
+        });
+      }
+      if (g.current) {
+        const e = y.indexOf(c);
+        if (e !== -1) {
+          const o = e * 44;
+          g.current.scrollTo({
+            top: o,
+            behavior: "smooth"
+          });
+        }
+      }
+    });
+  };
+  m(() => {
+    p && (b(r.getMonth()), B(r.getFullYear()), _(r.getDate()), d());
+  }, [p, r]), m(() => {
+    const e = (/* @__PURE__ */ new Date()).getFullYear(), o = Array.from({ length: 100 }, (f, u) => e - 99 + u);
+    x(o);
+  }, []), m(() => {
+    const e = [], o = new Date(c, a, 1), f = new Date(c, a + 1, 0).getDate();
+    for (let u = 1; u <= f; u++)
+      e.push(new Date(o)), o.setDate(o.getDate() + 1);
+    Y(e), i > f && _(f);
+  }, [a, c, i]), m(() => {
+    p && d();
+  }, [i, a, c, h, y]);
+  const A = (e) => {
+    _(e.getDate()), d();
+  }, O = (e) => {
+    b(e), d();
+  }, T = (e) => {
+    B(e), d();
+  }, v = () => {
+    I(!0), setTimeout(() => {
+      w(!1), I(!1);
+    }, 300);
+  }, H = () => {
+    const e = new Date(c, a, i);
+    M(e), v();
+  }, P = (e) => `${e.getDate()}`, R = (e) => e.toISOString().split("T")[0];
+  return m(() => {
+    console.log(r);
+  }, [r]), /* @__PURE__ */ l(F, { children: [
+    /* @__PURE__ */ n(
+      J,
+      {
+        type: "date",
+        className: t.dateButton,
+        onClick: () => w(!0),
+        value: R(r)
+      }
+    ),
+    p && /* @__PURE__ */ l(F, { children: [
+      /* @__PURE__ */ n("div", { className: `${t.overlay} ${N ? t.closing : ""}`, onClick: v }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: `${t.bottomDrawer} ${N ? t.closing : ""}`,
+          children: [
+            /* @__PURE__ */ l("div", { className: t.drawerHeader, children: [
+              /* @__PURE__ */ n("div", { className: t.drawerIndicator }),
+              /* @__PURE__ */ n("div", { className: t.closeButton, onClick: v, children: /* @__PURE__ */ n(j, { name: "Close", fill: "#030c2466" }) })
+            ] }),
+            /* @__PURE__ */ l("div", { className: t.drawerContent, children: [
+              /* @__PURE__ */ n("p", { children: S }),
+              /* @__PURE__ */ l("div", { className: t.pickerContainer, children: [
+                /* @__PURE__ */ n("div", { className: t.topFade }),
+                /* @__PURE__ */ n("div", { className: t.bottomFade }),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    ref: D,
+                    className: t.pickerColumn,
+                    children: h.map((e, o) => /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: `${t.pickerItem} ${e.getDate() === i ? t.selected : ""}`,
+                        onClick: () => A(e),
+                        children: P(e)
+                      },
+                      o
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    ref: C,
+                    className: t.pickerColumn,
+                    children: re.map((e, o) => /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: `${t.pickerItem} ${o === a ? t.selected : ""}`,
+                        onClick: () => O(o),
+                        children: e
+                      },
+                      e
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    ref: g,
+                    className: t.pickerColumn,
+                    children: y.map((e) => /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: `${t.pickerItem} ${e === c ? t.selected : ""}`,
+                        onClick: () => T(e),
+                        children: e
+                      },
+                      e
+                    ))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n(E, { className: t.confirmButton, variant: "secondary", onClick: H, children: $ })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  de as DatePicker
+};

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * Props para el componente Drawer
+ * @interface DrawerProps
+ */
+export interface DrawerProps {
+    /** Indica si el drawer está abierto */
+    isOpen: boolean;
+    /** Función para cerrar el drawer */
+    onClose: () => void;
+    /** Título que se muestra en la parte superior del drawer */
+    title?: string;
+    /** Contenido del drawer */
+    children: ReactNode;
+}
+/**
+ * Un componente de drawer que se abre desde la parte inferior de la pantalla
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Drawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Mi Drawer"
+ * >
+ *   <div>Contenido del drawer</div>
+ * </Drawer>
+ * ```
+ *
+ * Características:
+ * - Interfaz de cajón inferior optimizada para móviles
+ * - Cajón arrastrable con cierre al arrastrar hacia abajo
+ * - Previene el desplazamiento del fondo cuando está abierto
+ * - Animaciones suaves de entrada y salida
+ */
+export declare function Drawer({ isOpen, onClose, title, children }: DrawerProps): import("react/jsx-runtime").JSX.Element;