@xscriptor/xcomponents 0.1.0

package/dist/chunk-QCMWPIG7.mjs

@@ -0,0 +1,320 @@
+// src/components/forms/xcontactform/XContactForm.tsx
+import { useState } from "react";
+
+// src/components/forms/xcontactform/XContactForm.module.css
+var XContactForm_default = {};
+
+// src/components/forms/xcontactform/XContactForm.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function XContactForm({
+  showName = true,
+  showEmail = true,
+  showPhone = true,
+  showSubject = true,
+  showMessage = true,
+  namePlaceholder = "Tu nombre",
+  emailPlaceholder = "tucorreo@ejemplo.com",
+  phonePlaceholder = "+34 600 000 000",
+  subjectPlaceholder = "Tema del mensaje",
+  messagePlaceholder = "Cu\xE9ntame qu\xE9 necesitas\u2026",
+  labelColor,
+  wrapperBackgroundColor,
+  wrapperBorderColor,
+  wrapperBorderWidth,
+  wrapperBorderRadius = "rounded",
+  wrapperBorderStyle = "solid",
+  fieldBorderColor,
+  fieldBorderWidth,
+  fieldBorderRadius = "rounded",
+  fieldBorderStyle = "solid",
+  buttonColor,
+  buttonBorderColor,
+  buttonBorderWidth,
+  buttonBorderRadius = "rounded",
+  buttonBorderStyle = "solid",
+  buttonHoverColor,
+  buttonHoverTextColor,
+  buttonHoverBorderColor,
+  buttonTextColor,
+  buttonAlignment = "left",
+  requiredFieldsMessage = "Rellena los campos obligatorios.",
+  honeypotMessage = "Gracias.",
+  submitSuccessMessage = "Abriendo tu aplicaci\xF3n de correo\u2026",
+  statusSuccessColor,
+  statusErrorColor,
+  decorativeX = false,
+  decorativeXColor = "currentColor",
+  size = "medium",
+  layout = "grid"
+}) {
+  const [status, setStatus] = useState(null);
+  function onSubmit(e) {
+    e.preventDefault();
+    setStatus(null);
+    const form = e.currentTarget;
+    const fd = new FormData(form);
+    if (fd.get("website")?.length) {
+      setStatus({ ok: true, msg: honeypotMessage });
+      form.reset();
+      return;
+    }
+    const name = showName ? String(fd.get("name") || "").trim() : "";
+    const email = showEmail ? String(fd.get("email") || "").trim() : "";
+    const phone = showPhone ? String(fd.get("phone") || "").trim() : "";
+    const subject = showSubject ? String(fd.get("subject") || "Contacto desde web").trim() : "Contacto desde web";
+    const message = showMessage ? String(fd.get("message") || "").trim() : "";
+    if (showName && !name || showEmail && !email || showPhone && !phone || showMessage && !message) {
+      setStatus({ ok: false, msg: requiredFieldsMessage });
+      return;
+    }
+    const bodyLines = [];
+    if (showName) bodyLines.push(`Nombre: ${name}`);
+    if (showEmail) bodyLines.push(`Email: ${email}`);
+    if (showPhone) bodyLines.push(`Tel\xE9fono: ${phone}`);
+    bodyLines.push("");
+    if (showMessage) bodyLines.push(message);
+    const body = bodyLines.join("\n");
+    const to = "x@xscriptor.com";
+    const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(
+      subject
+    )}&body=${encodeURIComponent(body)}`;
+    window.location.href = mailto;
+    setStatus({ ok: true, msg: submitSuccessMessage });
+  }
+  const radiusMap = {
+    rounded: "0.5rem",
+    square: "0"
+  };
+  const alignmentMap = {
+    left: "flex-start",
+    right: "flex-end"
+  };
+  const customStyles = {
+    ...decorativeXColor && { "--decorative-x-color": decorativeXColor },
+    ...labelColor && { "--label-color": labelColor },
+    ...wrapperBackgroundColor && { "--wrapper-bg-color": wrapperBackgroundColor },
+    ...wrapperBorderColor && { "--wrapper-border-color": wrapperBorderColor },
+    ...wrapperBorderWidth && { "--wrapper-border-width": wrapperBorderWidth },
+    "--wrapper-radius": radiusMap[wrapperBorderRadius],
+    "--wrapper-border-style": wrapperBorderStyle,
+    ...fieldBorderColor && { "--field-border-color": fieldBorderColor },
+    ...fieldBorderWidth && { "--field-border-width": fieldBorderWidth },
+    "--field-radius": radiusMap[fieldBorderRadius],
+    "--field-border-style": fieldBorderStyle,
+    ...buttonColor && { "--btn-bg-color": buttonColor },
+    ...buttonBorderColor && { "--btn-border-color": buttonBorderColor },
+    ...buttonBorderWidth && { "--btn-border-width": buttonBorderWidth },
+    "--btn-radius": radiusMap[buttonBorderRadius],
+    "--btn-border-style": buttonBorderStyle,
+    "--btn-alignment": alignmentMap[buttonAlignment],
+    ...buttonHoverColor && { "--btn-hover-bg-color": buttonHoverColor },
+    ...buttonHoverTextColor && { "--btn-hover-text-color": buttonHoverTextColor },
+    ...buttonHoverBorderColor && { "--btn-hover-border-color": buttonHoverBorderColor },
+    ...buttonTextColor && { "--btn-text-color": buttonTextColor },
+    ...statusSuccessColor && { "--status-ok-color": statusSuccessColor },
+    ...statusErrorColor && { "--status-error-color": statusErrorColor }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${XContactForm_default.wrapper} ${XContactForm_default[size]} ${decorativeX ? XContactForm_default.withDecorativeX : ""}`, style: customStyles, children: [
+    decorativeX && /* @__PURE__ */ jsx("div", { className: XContactForm_default.decorativeXTop, children: "\u2715" }),
+    /* @__PURE__ */ jsxs("form", { onSubmit, className: `${XContactForm_default.form} ${XContactForm_default[layout]}`, noValidate: true, children: [
+      /* @__PURE__ */ jsxs("div", { className: XContactForm_default.honeypot, "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "website", children: "Tu web" }),
+        /* @__PURE__ */ jsx("input", { id: "website", name: "website", type: "text", tabIndex: -1, autoComplete: "off" })
+      ] }),
+      (showName || showEmail || showPhone) && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.row, children: [
+        showName && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "name", children: "Nombre" }),
+          /* @__PURE__ */ jsx("input", { id: "name", name: "name", type: "text", placeholder: namePlaceholder, required: true, maxLength: 80 })
+        ] }),
+        showEmail && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx("input", { id: "email", name: "email", type: "email", inputMode: "email", placeholder: emailPlaceholder, required: true })
+        ] }),
+        showPhone && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "phone", children: "Tel\xE9fono" }),
+          /* @__PURE__ */ jsx("input", { id: "phone", name: "phone", type: "tel", inputMode: "tel", placeholder: phonePlaceholder, required: true, maxLength: 20 })
+        ] })
+      ] }),
+      showSubject && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.field, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "subject", children: "Asunto" }),
+        /* @__PURE__ */ jsx("input", { id: "subject", name: "subject", type: "text", placeholder: subjectPlaceholder, required: true, maxLength: 120 })
+      ] }),
+      showMessage && /* @__PURE__ */ jsxs("div", { className: XContactForm_default.field, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "message", children: "Mensaje" }),
+        /* @__PURE__ */ jsx("textarea", { id: "message", name: "message", rows: 6, placeholder: messagePlaceholder, required: true, maxLength: 3e3 })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: XContactForm_default.buttoncontainer, children: /* @__PURE__ */ jsx("button", { type: "submit", className: XContactForm_default.button, children: "Enviar" }) }),
+      /* @__PURE__ */ jsx("p", { className: `${XContactForm_default.status} ${status?.ok ? XContactForm_default.statusOk : status === null ? "" : XContactForm_default.statusError}`, role: "status", "aria-live": "polite", children: status?.msg })
+    ] }),
+    decorativeX && /* @__PURE__ */ jsx("div", { className: XContactForm_default.decorativeXBottom, children: "\u2715" })
+  ] });
+}
+
+// src/components/forms/xnewsletter/XNewsletter.tsx
+import { useState as useState2 } from "react";
+import Link from "next/link";
+
+// src/components/forms/xnewsletter/XNewsletter.module.css
+var XNewsletter_default = {};
+
+// src/components/forms/xnewsletter/XNewsletter.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function XNewsletter({
+  title = "Recibe poes\xEDa y reflexiones",
+  placeholder = "tu@email.com",
+  buttonText = "Suscribirse",
+  termsText = "Acepto",
+  termsLinkText = "t\xE9rminos",
+  successMessage = "\xA1Bienvenido(a)!",
+  errorMessage = "Algo sali\xF3 mal. Por favor, intenta de nuevo.",
+  termsErrorMessage = "Debes aceptar los t\xE9rminos y condiciones para suscribirte...",
+  termsLink = "/terminos-y-condiciones",
+  apiRoute,
+  method = "POST",
+  payloadType = "formData",
+  layout = "horizontal",
+  accentColor = "var(--accent)",
+  textColor = "var(--text)",
+  borderColor = "var(--border)",
+  buttonTextColor = "var(--accent-text)",
+  containerClassName = "w-full max-w-4xl mx-auto px-4 py-6"
+}) {
+  const [email, setEmail] = useState2("");
+  const [acceptedTerms, setAcceptedTerms] = useState2(false);
+  const [message, setMessage] = useState2("");
+  const [isLoading, setIsLoading] = useState2(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setMessage("");
+    if (!acceptedTerms) {
+      setMessage(termsErrorMessage);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      let bodyData = null;
+      let headers = {};
+      if (payloadType === "formData") {
+        const formData = new FormData();
+        formData.append("email", email);
+        bodyData = formData;
+      } else if (payloadType === "json") {
+        bodyData = JSON.stringify({ email });
+        headers = { "Content-Type": "application/json" };
+      }
+      const response = await fetch(apiRoute, {
+        method,
+        headers,
+        body: method !== "GET" ? bodyData : void 0,
+        cache: "no-store"
+      });
+      const data = await response.json();
+      if (response.ok && data.success) {
+        setMessage(data.message || successMessage);
+        setEmail("");
+        setAcceptedTerms(false);
+      } else {
+        setMessage(data.error || errorMessage);
+      }
+    } catch {
+      setMessage(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const customCssVariables = {
+    "--nws-accent": accentColor,
+    "--nws-text": textColor,
+    "--nws-border": borderColor,
+    "--nws-btn-text": buttonTextColor
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `${XNewsletter_default.container} ${containerClassName}`,
+      style: customCssVariables,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            className: `${XNewsletter_default.form} ${XNewsletter_default[layout]}`,
+            children: [
+              title && /* @__PURE__ */ jsx2("span", { className: XNewsletter_default.title, children: title }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "email",
+                  placeholder,
+                  className: XNewsletter_default.input,
+                  "aria-label": "email",
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value),
+                  required: true,
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: `${XNewsletter_default.actions} ${layout === "horizontal" ? XNewsletter_default.actionsHorizontal : XNewsletter_default.actionsVertical}`,
+                  children: [
+                    /* @__PURE__ */ jsxs2("label", { className: XNewsletter_default.checkboxLabel, children: [
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: XNewsletter_default.checkbox,
+                          checked: acceptedTerms,
+                          onChange: (e) => setAcceptedTerms(e.target.checked),
+                          required: true,
+                          disabled: isLoading
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2("span", { children: [
+                        termsText,
+                        " ",
+                        /* @__PURE__ */ jsx2(
+                          Link,
+                          {
+                            href: termsLink,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: XNewsletter_default.termsLink,
+                            children: termsLinkText
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "submit",
+                        disabled: isLoading,
+                        className: XNewsletter_default.button,
+                        children: isLoading ? "Enviando..." : buttonText
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        message && /* @__PURE__ */ jsx2(
+          "p",
+          {
+            className: `${XNewsletter_default.message} ${layout === "horizontal" ? XNewsletter_default.messageHorizontal : XNewsletter_default.messageVertical}`,
+            children: message
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  XContactForm,
+  XNewsletter
+};
+//# sourceMappingURL=chunk-QCMWPIG7.mjs.map

package/dist/chunk-QCMWPIG7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/xcontactform/XContactForm.tsx","../src/components/forms/xcontactform/XContactForm.module.css","../src/components/forms/xnewsletter/XNewsletter.tsx","../src/components/forms/xnewsletter/XNewsletter.module.css"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport styles from \"./XContactForm.module.css\";\n\ntype Status = { ok: boolean; msg: string } | null;\n\nexport interface XContactFormProps {\n  // Visibilidad\n  showName?: boolean;\n  showEmail?: boolean;\n  showPhone?: boolean;\n  showSubject?: boolean;\n  showMessage?: boolean;\n  \n  // Placeholders\n  namePlaceholder?: string;\n  emailPlaceholder?: string;\n  phonePlaceholder?: string;\n  subjectPlaceholder?: string;\n  messagePlaceholder?: string;\n\n  // Diseño\n  labelColor?: string;\n  wrapperBackgroundColor?: string;\n  wrapperBorderColor?: string;\n  wrapperBorderWidth?: string;\n  wrapperBorderRadius?: \"rounded\" | \"square\";\n  wrapperBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n  fieldBorderColor?: string;\n  fieldBorderWidth?: string;\n  fieldBorderRadius?: \"rounded\" | \"square\";\n  fieldBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n  buttonColor?: string;\n  buttonBorderColor?: string;\n  buttonBorderWidth?: string;\n  buttonBorderRadius?: \"rounded\" | \"square\";\n  buttonBorderStyle?: \"solid\" | \"dashed\" | \"dotted\";\n  buttonHoverColor?: string;\n  buttonHoverTextColor?: string;\n  buttonHoverBorderColor?: string;\n  buttonTextColor?: string;\n  buttonAlignment?: \"left\" | \"right\";\n\n  // Mensajes de estado\n  requiredFieldsMessage?: string;\n  honeypotMessage?: string;\n  submitSuccessMessage?: string;\n  statusSuccessColor?: string;\n  statusErrorColor?: string;\n\n  // Decorativos\n  decorativeX?: boolean;\n  decorativeXColor?: string;\n\n  size?: \"small\" | \"medium\" | \"large\";\n  layout?: \"vertical\" | \"grid\";\n}\n\nexport default function XContactForm({\n  showName = true,\n  showEmail = true,\n  showPhone = true,\n  showSubject = true,\n  showMessage = true,\n  namePlaceholder = \"Tu nombre\",\n  emailPlaceholder = \"tucorreo@ejemplo.com\",\n  phonePlaceholder = \"+34 600 000 000\",\n  subjectPlaceholder = \"Tema del mensaje\",\n  messagePlaceholder = \"Cuéntame qué necesitas…\",\n  labelColor,\n  wrapperBackgroundColor,\n  wrapperBorderColor,\n  wrapperBorderWidth,\n  wrapperBorderRadius = \"rounded\",\n  wrapperBorderStyle = \"solid\",\n  fieldBorderColor,\n  fieldBorderWidth,\n  fieldBorderRadius = \"rounded\",\n  fieldBorderStyle = \"solid\",\n  buttonColor,\n  buttonBorderColor,\n  buttonBorderWidth,\n  buttonBorderRadius = \"rounded\",\n  buttonBorderStyle = \"solid\",\n  buttonHoverColor,\n  buttonHoverTextColor,\n  buttonHoverBorderColor,\n  buttonTextColor,\n  buttonAlignment = \"left\",\n  requiredFieldsMessage = \"Rellena los campos obligatorios.\",\n  honeypotMessage = \"Gracias.\",\n  submitSuccessMessage = \"Abriendo tu aplicación de correo…\",\n  statusSuccessColor,\n  statusErrorColor,\n  decorativeX = false,\n  decorativeXColor = \"currentColor\",\n  size = \"medium\",\n  layout = \"grid\",\n}: XContactFormProps) {\n  const [status, setStatus] = useState<Status>(null);\n\n  function onSubmit(e: React.FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    setStatus(null);\n\n    const form = e.currentTarget;\n    const fd = new FormData(form);\n\n    if ((fd.get(\"website\") as string)?.length) {\n      setStatus({ ok: true, msg: honeypotMessage });\n      form.reset();\n      return;\n    }\n\n    const name = showName ? String(fd.get(\"name\") || \"\").trim() : \"\";\n    const email = showEmail ? String(fd.get(\"email\") || \"\").trim() : \"\";\n    const phone = showPhone ? String(fd.get(\"phone\") || \"\").trim() : \"\";\n    const subject = showSubject\n      ? String(fd.get(\"subject\") || \"Contacto desde web\").trim()\n      : \"Contacto desde web\";\n    const message = showMessage ? String(fd.get(\"message\") || \"\").trim() : \"\";\n\n    if (\n      (showName && !name) ||\n      (showEmail && !email) ||\n      (showPhone && !phone) ||\n      (showMessage && !message)\n    ) {\n      setStatus({ ok: false, msg: requiredFieldsMessage });\n      return;\n    }\n\n    const bodyLines = [];\n    if (showName) bodyLines.push(`Nombre: ${name}`);\n    if (showEmail) bodyLines.push(`Email: ${email}`);\n    if (showPhone) bodyLines.push(`Teléfono: ${phone}`);\n    bodyLines.push(\"\");\n    if (showMessage) bodyLines.push(message);\n\n    const body = bodyLines.join(\"\\n\");\n    const to = \"x@xscriptor.com\";\n    const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(\n      subject\n    )}&body=${encodeURIComponent(body)}`;\n\n    window.location.href = mailto;\n    setStatus({ ok: true, msg: submitSuccessMessage });\n  }\n\n  const radiusMap = {\n    rounded: \"0.5rem\",\n    square: \"0\",\n  } as const;\n\n  const alignmentMap = {\n    left: \"flex-start\",\n    right: \"flex-end\",\n  } as const;\n\n  // Variables CSS dinámicas para estilos configurables\n  const customStyles = {\n    ...(decorativeXColor && { \"--decorative-x-color\": decorativeXColor }),\n    ...(labelColor && { \"--label-color\": labelColor }),\n    ...(wrapperBackgroundColor && { \"--wrapper-bg-color\": wrapperBackgroundColor }),\n    ...(wrapperBorderColor && { \"--wrapper-border-color\": wrapperBorderColor }),\n    ...(wrapperBorderWidth && { \"--wrapper-border-width\": wrapperBorderWidth }),\n    \"--wrapper-radius\": radiusMap[wrapperBorderRadius],\n    \"--wrapper-border-style\": wrapperBorderStyle,\n    ...(fieldBorderColor && { \"--field-border-color\": fieldBorderColor }),\n    ...(fieldBorderWidth && { \"--field-border-width\": fieldBorderWidth }),\n    \"--field-radius\": radiusMap[fieldBorderRadius],\n    \"--field-border-style\": fieldBorderStyle,\n    ...(buttonColor && { \"--btn-bg-color\": buttonColor }),\n    ...(buttonBorderColor && { \"--btn-border-color\": buttonBorderColor }),\n    ...(buttonBorderWidth && { \"--btn-border-width\": buttonBorderWidth }),\n    \"--btn-radius\": radiusMap[buttonBorderRadius],\n    \"--btn-border-style\": buttonBorderStyle,\n    \"--btn-alignment\": alignmentMap[buttonAlignment],\n    ...(buttonHoverColor && { \"--btn-hover-bg-color\": buttonHoverColor }),\n    ...(buttonHoverTextColor && { \"--btn-hover-text-color\": buttonHoverTextColor }),\n    ...(buttonHoverBorderColor && { \"--btn-hover-border-color\": buttonHoverBorderColor }),\n    ...(buttonTextColor && { \"--btn-text-color\": buttonTextColor }),\n    ...(statusSuccessColor && { \"--status-ok-color\": statusSuccessColor }),\n    ...(statusErrorColor && { \"--status-error-color\": statusErrorColor }),\n  } as React.CSSProperties;\n\n  return (\n    <div className={`${styles.wrapper} ${styles[size]} ${decorativeX ? styles.withDecorativeX : \"\"}`} style={customStyles}>\n      {decorativeX && <div className={styles.decorativeXTop}>✕</div>}\n      <form onSubmit={onSubmit} className={`${styles.form} ${styles[layout]}`} noValidate>\n        <div className={styles.honeypot} aria-hidden=\"true\">\n          <label htmlFor=\"website\">Tu web</label>\n          <input id=\"website\" name=\"website\" type=\"text\" tabIndex={-1} autoComplete=\"off\" />\n        </div>\n\n        {(showName || showEmail || showPhone) && (\n          <div className={styles.row}>\n            {showName && (\n              <div className={styles.field}>\n                <label htmlFor=\"name\">Nombre</label>\n                <input id=\"name\" name=\"name\" type=\"text\" placeholder={namePlaceholder} required maxLength={80} />\n              </div>\n            )}\n            {showEmail && (\n              <div className={styles.field}>\n                <label htmlFor=\"email\">Email</label>\n                <input id=\"email\" name=\"email\" type=\"email\" inputMode=\"email\" placeholder={emailPlaceholder} required />\n              </div>\n            )}\n            {showPhone && (\n              <div className={styles.field}>\n                <label htmlFor=\"phone\">Teléfono</label>\n                <input id=\"phone\" name=\"phone\" type=\"tel\" inputMode=\"tel\" placeholder={phonePlaceholder} required maxLength={20} />\n              </div>\n            )}\n          </div>\n        )}\n\n        {showSubject && (\n          <div className={styles.field}>\n            <label htmlFor=\"subject\">Asunto</label>\n            <input id=\"subject\" name=\"subject\" type=\"text\" placeholder={subjectPlaceholder} required maxLength={120} />\n          </div>\n        )}\n\n        {showMessage && (\n          <div className={styles.field}>\n            <label htmlFor=\"message\">Mensaje</label>\n            <textarea id=\"message\" name=\"message\" rows={6} placeholder={messagePlaceholder} required maxLength={3000} />\n          </div>\n        )}\n\n        <div className={styles.buttoncontainer}>\n          <button type=\"submit\" className={styles.button}>\n            Enviar\n          </button>\n        </div>\n\n        <p className={`${styles.status} ${status?.ok ? styles.statusOk : status === null ? \"\" : styles.statusError}`} role=\"status\" aria-live=\"polite\">\n          {status?.msg}\n        </p>\n      </form>\n      {decorativeX && <div className={styles.decorativeXBottom}>✕</div>}\n    </div>\n  );\n}","/* Tamaños dinámicos base */\n.wrapper {\n    --input-padding: .65rem .9rem;\n    --font-size: 16px;\n    --form-gap: 1.25rem;\n    --row-gap: .85rem;\n    --field-gap: .45rem;\n    --button-min-width: 140px;\n    --label-color: inherit;\n    --wrapper-bg-color: transparent;\n    --wrapper-border-color: transparent;\n    --wrapper-border-width: 0px;\n    --wrapper-border-style: solid;\n    --wrapper-radius: .5rem;\n    --field-border-color: var(--border, #ccc);\n    --field-border-width: 1px;\n    --field-border-style: solid;\n    --field-radius: .5rem;\n    --btn-bg-color: var(--bg, #333);\n    --btn-text-color: var(--text, #fff);\n    --btn-border-color: transparent;\n    --btn-border-width: 0px;\n    --btn-border-style: solid;\n    --btn-radius: .5rem;\n    --btn-alignment: flex-start;\n    --btn-hover-bg-color: var(--btn-bg-color);\n    --btn-hover-text-color: var(--btn-text-color);\n    --btn-hover-border-color: var(--btn-border-color);\n    --status-ok-color: #1fa37a;\n    --status-error-color: #d16a6a;\n    \n    max-width: 900px;\n    margin: 0 auto;\n    padding: 2rem 1rem;\n    background-color: var(--wrapper-bg-color);\n    border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);\n    border-radius: var(--wrapper-radius);\n}\n\n/* Modificadores de tamaño */\n.small {\n    --input-padding: .35rem .55rem;\n    --font-size: 13px;\n    --form-gap: .75rem;\n    --row-gap: .6rem;\n    --field-gap: .3rem;\n    --button-min-width: 118px;\n}\n.medium {\n    --input-padding: .5rem .7rem;\n    --font-size: 15px;\n    --form-gap: 1rem;\n    --row-gap: .7rem;\n    --field-gap: .4rem;\n    --button-min-width: 130px;\n}\n.large {\n    --input-padding: 1rem 1.2rem;\n    --font-size: 18px;\n    --form-gap: 1.5rem;\n    --row-gap: 1rem;\n    --field-gap: .5rem;\n    --button-min-width: 150px;\n}\n\n.form {\n    display: grid;\n    gap: var(--form-gap);\n    max-width: 100%;\n}\n\n/* Layouts */\n.row {\n    display: grid;\n    gap: var(--row-gap);\n}\n\n.grid .row {\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n\n.vertical .row {\n    grid-template-columns: 1fr;\n}\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n}\n\n.field label {\n    font-size: calc(var(--font-size) - 2px);\n    font-weight: 500;\n    color: var(--label-color);\n}\n\n.field input,\n.field textarea {\n    width: 100%;\n    padding: var(--input-padding);\n    border: var(--field-border-width) var(--field-border-style) var(--field-border-color);\n    border-radius: var(--field-radius);\n    font-size: var(--font-size);\n    box-sizing: border-box;\n    font-family: inherit;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n    color: #888;\n}\n\n.buttoncontainer {\n    display: flex;\n    justify-content: var(--btn-alignment);\n    margin-top: 0.25rem;\n}\n\n.button {\n    padding: var(--input-padding);\n    border-radius: var(--btn-radius);\n    border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);\n    background-color: var(--btn-bg-color);\n    color: var(--btn-text-color);\n    cursor: pointer;\n    font-size: var(--font-size);\n    font-weight: 600;\n    min-width: var(--button-min-width);\n    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;\n}\n\n.button:hover {\n    background-color: var(--btn-hover-bg-color);\n    color: var(--btn-hover-text-color);\n    border-color: var(--btn-hover-border-color);\n    opacity: 0.95;\n}\n\n.status {\n    min-height: 1.5rem;\n    font-size: calc(var(--font-size) - 2px);\n    margin-top: 0.25rem;\n}\n\n.statusOk { color: var(--status-ok-color); }\n.statusError { color: var(--status-error-color); }\n\n.honeypot {\n    position: absolute;\n    left: -9999px;\n    top: -9999px;\n}\n\n.withDecorativeX {\n    position: relative;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n}\n\n.decorativeXTop,\n.decorativeXBottom {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 0.5rem;\n    font-weight: 300;\n    color: var(--decorative-x-color, currentColor);\n    opacity: 1;\n    pointer-events: none;\n    background-color: var(--wrapper-bg-color, transparent);\n    padding: 0 0.3rem;\n    line-height: 1;\n    z-index: 1;\n}\n\n.decorativeXTop {\n    top: 0;\n    transform: translate(-50%, -50%);\n}\n\n.decorativeXBottom {\n    bottom: 0;\n    transform: translate(-50%, 50%);\n}","\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport styles from \"./XNewsletter.module.css\";\n\nexport interface XNewsletterProps {\n  title?: string;\n  placeholder?: string;\n  buttonText?: string;\n  termsText?: string;\n  termsLinkText?: string;\n  successMessage?: string;\n  errorMessage?: string;\n  termsErrorMessage?: string;\n  termsLink?: string;\n  apiRoute: string;\n  method?: \"POST\" | \"GET\" | \"PUT\";\n  payloadType?: \"formData\" | \"json\";\n  layout?: \"horizontal\" | \"vertical\";\n  accentColor?: string;\n  textColor?: string;\n  borderColor?: string;\n  buttonTextColor?: string;\n  containerClassName?: string; // Para clases extra desde afuera si las necesitas\n}\n\nexport default function XNewsletter({\n  title = \"Recibe poesía y reflexiones\",\n  placeholder = \"tu@email.com\",\n  buttonText = \"Suscribirse\",\n  termsText = \"Acepto\",\n  termsLinkText = \"términos\",\n  successMessage = \"¡Bienvenido(a)!\",\n  errorMessage = \"Algo salió mal. Por favor, intenta de nuevo.\",\n  termsErrorMessage = \"Debes aceptar los términos y condiciones para suscribirte...\",\n  termsLink = \"/terminos-y-condiciones\",\n  apiRoute,\n  method = \"POST\",\n  payloadType = \"formData\",\n  layout = \"horizontal\",\n  accentColor = \"var(--accent)\",\n  textColor = \"var(--text)\",\n  borderColor = \"var(--border)\",\n  buttonTextColor = \"var(--accent-text)\",\n  containerClassName = \"w-full max-w-4xl mx-auto px-4 py-6\",\n}: XNewsletterProps) {\n  const [email, setEmail] = useState(\"\");\n  const [acceptedTerms, setAcceptedTerms] = useState(false);\n  const [message, setMessage] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setMessage(\"\");\n\n    if (!acceptedTerms) {\n      setMessage(termsErrorMessage);\n      return;\n    }\n\n    setIsLoading(true);\n\n    try {\n      let bodyData: BodyInit | null | undefined = null;\n      let headers: HeadersInit = {};\n\n      if (payloadType === \"formData\") {\n        const formData = new FormData();\n        formData.append(\"email\", email);\n        bodyData = formData;\n      } else if (payloadType === \"json\") {\n        bodyData = JSON.stringify({ email });\n        headers = { \"Content-Type\": \"application/json\" };\n      }\n\n      const response = await fetch(apiRoute, {\n        method,\n        headers,\n        body: method !== \"GET\" ? bodyData : undefined,\n        cache: \"no-store\",\n      });\n\n      const data = await response.json();\n\n      if (response.ok && data.success) {\n        setMessage(data.message || successMessage);\n        setEmail(\"\");\n        setAcceptedTerms(false);\n      } else {\n        setMessage(data.error || errorMessage);\n      }\n    } catch {\n      setMessage(errorMessage);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  // Convertimos las props de colores a Variables CSS nativas.\n  const customCssVariables = {\n    \"--nws-accent\": accentColor,\n    \"--nws-text\": textColor,\n    \"--nws-border\": borderColor,\n    \"--nws-btn-text\": buttonTextColor,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={`${styles.container} ${containerClassName}`}\n      style={customCssVariables}\n    >\n      <form\n        onSubmit={handleSubmit}\n        className={`${styles.form} ${styles[layout]}`}\n      >\n        {/* Título */}\n        {title && <span className={styles.title}>{title}</span>}\n\n        {/* Input */}\n        <input\n          type=\"email\"\n          placeholder={placeholder}\n          className={styles.input}\n          aria-label=\"email\"\n          value={email}\n          onChange={(e) => setEmail(e.target.value)}\n          required\n          disabled={isLoading}\n        />\n\n        {/* Grupo Acciones (Checkbox + Botón) */}\n        <div\n          className={`${styles.actions} ${\n            layout === \"horizontal\"\n              ? styles.actionsHorizontal\n              : styles.actionsVertical\n          }`}\n        >\n          {/* Checkbox */}\n          <label className={styles.checkboxLabel}>\n            <input\n              type=\"checkbox\"\n              className={styles.checkbox}\n              checked={acceptedTerms}\n              onChange={(e) => setAcceptedTerms(e.target.checked)}\n              required\n              disabled={isLoading}\n            />\n            <span>\n              {termsText}{\" \"}\n              <Link\n                href={termsLink}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={styles.termsLink}\n              >\n                {termsLinkText}\n              </Link>\n            </span>\n          </label>\n\n          {/* Botón */}\n          <button\n            type=\"submit\"\n            disabled={isLoading}\n            className={styles.button}\n          >\n            {isLoading ? \"Enviando...\" : buttonText}\n          </button>\n        </div>\n      </form>\n\n      {/* Mensaje */}\n      {message && (\n        <p\n          className={`${styles.message} ${\n            layout === \"horizontal\"\n              ? styles.messageHorizontal\n              : styles.messageVertical\n          }`}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}","/* XNewsletter.module.css */\n\n.container {\n  /* Estas variables recibirán sus valores desde React */\n  --nws-accent: var(--accent);\n  --nws-text: var(--text);\n  --nws-border: var(--border);\n  --nws-btn-text: var(--accent-text);\n  \n  width: 100%;\n  font-family: \"EB Garamond\", serif;\n}\n\n/* --- Layouts Base --- */\n.form {\n  display: flex;\n  gap: 1rem;\n}\n\n.horizontal {\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n@media (min-width: 768px) {\n  .horizontal {\n    flex-direction: row;\n  }\n}\n\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  max-width: 24rem; /* equivalente a max-w-sm */\n  margin: 0 auto;\n}\n\n/* --- Elementos --- */\n.title {\n  font-size: 0.875rem;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--nws-text);\n}\n\n.input {\n  width: 100%;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--nws-border);\n  background-color: transparent;\n  outline: none;\n  transition: border-color 0.2s ease;\n  color: var(--nws-text);\n  caret-color: var(--nws-accent);\n  font-family: inherit;\n}\n\n.horizontal .input {\n  /* En escritorio, el input horizontal es de tamaño fijo (md:w-64) */\n}\n@media (min-width: 768px) {\n  .horizontal .input {\n    width: 16rem; \n  }\n}\n\n.input:focus {\n  border-color: var(--nws-accent);\n}\n\n/* --- Checkbox y Botón --- */\n.actions {\n  display: flex;\n  gap: 1rem;\n}\n\n.actionsHorizontal {\n  flex-direction: row;\n  align-items: center;\n}\n\n.actionsVertical {\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.checkboxLabel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  cursor: pointer;\n  color: var(--nws-text);\n}\n\n.checkboxLabel span {\n  opacity: 0.7;\n}\n\n.checkbox {\n  height: 0.875rem;\n  width: 0.875rem;\n  border-radius: 0.125rem;\n  cursor: pointer;\n  accent-color: var(--nws-accent);\n}\n\n.termsLink {\n  text-decoration: underline;\n  color: var(--nws-accent);\n  transition: opacity 0.2s ease;\n}\n\n.termsLink:hover {\n  opacity: 1;\n}\n\n.button {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--nws-accent);\n  color: var(--nws-accent);\n  background-color: transparent;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.button:hover:not(:disabled) {\n  background-color: var(--nws-accent);\n  color: var(--nws-btn-text);\n}\n\n.button:disabled, .input:disabled, .checkbox:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.actionsVertical .button {\n  width: 100%;\n}\n\n/* --- Feedback Message --- */\n.message {\n  margin-top: 0.75rem;\n  font-size: 0.75rem;\n  color: var(--nws-accent);\n}\n\n.messageHorizontal {\n  text-align: center;\n}\n\n.messageVertical {\n  text-align: left;\n}"],"mappings":"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","names":["useState","jsx","jsxs","useState"]}

package/dist/chunk-U27ZVCP7.mjs

@@ -0,0 +1,247 @@
+// src/components/social/xsocialcontact/XSocialContact.module.css
+var XSocialContact_default = {};
+
+// src/components/social/xsocialcontact/XSocialContact.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function XSocialContact({
+  items,
+  columns = 3,
+  rows,
+  size = "medium",
+  alignment = "center",
+  gap,
+  backgroundColor,
+  iconDefaultColor,
+  iconDefaultHoverColor,
+  borderColor,
+  borderWidth,
+  borderStyle = "solid",
+  borderRadius = "rounded",
+  padding,
+  textAlign = "center",
+  textColor,
+  textSize
+}) {
+  const sizeMap = {
+    small: "1rem",
+    medium: "1.5rem",
+    large: "2rem"
+  };
+  const alignmentMap = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end"
+  };
+  const textAlignMap = {
+    left: "left",
+    center: "center",
+    right: "right"
+  };
+  const radiusMap = {
+    rounded: "0.5rem",
+    square: "0"
+  };
+  const defaultGap = gap || (size === "small" ? "1rem" : size === "medium" ? "1.5rem" : "2rem");
+  const defaultPadding = padding || (size === "small" ? "1rem" : size === "medium" ? "1.5rem" : "2rem");
+  const defaultTextSize = textSize || (size === "small" ? "0.875rem" : size === "medium" ? "1rem" : "1.125rem");
+  const customStyles = {
+    "--columns": columns.toString(),
+    "--gap": defaultGap,
+    "--padding": defaultPadding,
+    "--text-size": defaultTextSize,
+    "--alignment": alignmentMap[alignment],
+    "--text-align": textAlignMap[textAlign],
+    "--icon-gap": sizeMap[size],
+    "--border-radius": radiusMap[borderRadius],
+    ...backgroundColor && { "--bg-color": backgroundColor },
+    ...iconDefaultColor && { "--icon-color": iconDefaultColor },
+    ...iconDefaultHoverColor && { "--icon-hover-color": iconDefaultHoverColor },
+    ...borderColor && { "--border-color": borderColor },
+    ...borderWidth && { "--border-width": borderWidth },
+    ...textColor && { "--text-color": textColor },
+    "--border-style": borderStyle
+  };
+  let containerClass = XSocialContact_default.container;
+  if (rows) {
+    containerClass += ` ${XSocialContact_default[`rows${rows}`]}`;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${containerClass} ${XSocialContact_default[size]}`,
+      style: customStyles,
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: item.href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: XSocialContact_default.item,
+          title: item.label,
+          style: {
+            ...item.iconColor && { "--item-icon-color": item.iconColor },
+            ...item.iconHoverColor && { "--item-icon-hover-color": item.iconHoverColor }
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: XSocialContact_default.iconWrapper, children: item.icon }),
+            item.text && /* @__PURE__ */ jsx("span", { className: XSocialContact_default.text, children: item.text })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+
+// src/components/social/xsocialcontact/XSocialIcons.tsx
+import { useState } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function XSocialIconShell({
+  size = 24,
+  color = "currentColor",
+  hoverColor,
+  fillColor,
+  hoverFillColor,
+  backgroundColor,
+  badgeColor,
+  badgeBackgroundColor,
+  strokeWidth = 1.8,
+  showBadge = true,
+  title,
+  style,
+  children,
+  ...rest
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const stroke = isHovered && hoverColor ? hoverColor : color;
+  const fill = isHovered && hoverFillColor ? hoverFillColor : fillColor || stroke;
+  const badgeStroke = badgeColor || stroke;
+  const badgeFill = badgeBackgroundColor || "transparent";
+  const palette = {
+    stroke,
+    fill,
+    badgeStroke,
+    badgeFill
+  };
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: title ? "img" : "presentation",
+      "aria-label": title,
+      "aria-hidden": title ? void 0 : true,
+      onPointerEnter: () => setIsHovered(true),
+      onPointerLeave: () => setIsHovered(false),
+      style: { color: stroke, ...style ?? {} },
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx2("title", { children: title }) : null,
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10.5",
+            fill: backgroundColor || "none",
+            stroke: backgroundColor ? "none" : stroke,
+            strokeOpacity: backgroundColor ? void 0 : 0.14,
+            strokeWidth: backgroundColor ? void 0 : strokeWidth
+          }
+        ),
+        children({ palette }),
+        showBadge && /* @__PURE__ */ jsxs2("g", { children: [
+          /* @__PURE__ */ jsx2("circle", { cx: "18", cy: "18", r: "2.6", fill: badgeFill, stroke: badgeStroke, strokeWidth: "1" }),
+          /* @__PURE__ */ jsx2("path", { d: "M17.05 17.05L18.95 18.95M18.95 17.05L17.05 18.95", stroke: badgeStroke, strokeWidth: "1.15", strokeLinecap: "round" })
+        ] })
+      ]
+    }
+  );
+}
+function XTelegramIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.8, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M9.2 12.4l2.15 2.15 5.1-5.1M20.6 4.2L4 12l6.45 1.8 1.8 6.45 2.55-4.2 4.2 2.55 1.6-14.4z",
+        stroke: palette.stroke,
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9.75", fill: "none", stroke: palette.stroke, strokeOpacity: "0.18", strokeWidth: "1" })
+  ] }) });
+}
+function XInstagramIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "6.2", y: "6.2", width: "11.6", height: "11.6", rx: "3.2", ry: "3.2", stroke: palette.stroke, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3.15", stroke: palette.stroke, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "16.3", cy: "7.7", r: "0.7", fill: palette.fill })
+  ] }) });
+}
+function XWhatsappIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.5, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M16.72 13.06c-.29-.15-1.71-.84-1.98-.94-.26-.1-.45-.15-.64.14-.19.29-.74.94-.9 1.13-.16.19-.33.22-.62.08-.29-.15-1.23-.45-2.35-1.45-.87-.77-1.45-1.72-1.62-2.01-.16-.29-.02-.45.12-.59.13-.13.29-.33.43-.49.14-.16.18-.28.27-.47.09-.19.04-.36-.02-.51-.07-.15-.64-1.54-.88-2.1-.23-.55-.47-.48-.64-.49-.16-.01-.36-.01-.55-.01-.19 0-.5.07-.76.36-.26.29-1 1.01-1 2.47 0 1.45 1.04 2.85 1.19 3.05.15.19 2.05 3.12 5.2 4.38.73.31 1.3.49 1.74.63.73.23 1.4.2 1.92.12.59-.09 1.71-.7 1.95-1.37.24-.67.24-1.25.17-1.37-.07-.11-.26-.18-.55-.32z",
+        fill: palette.fill
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M12 3.2C7.13 3.2 3.2 7.13 3.2 12c0 1.56.41 3.02 1.13 4.29L3.2 20.8l4.59-1.09A8.77 8.77 0 0 0 12 20.8c4.87 0 8.8-3.93 8.8-8.8s-3.93-8.8-8.8-8.8z",
+        stroke: palette.stroke,
+        strokeWidth: "1.2",
+        fill: "none",
+        opacity: "0.18"
+      }
+    )
+  ] }) });
+}
+function XEmailIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4.5", y: "7", width: "15", height: "10", rx: "1.4", stroke: palette.stroke, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4.6 7.1l7.4 5.5 7.4-5.5", stroke: palette.stroke, strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
+  ] }) });
+}
+function XLinkedInIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M8.1 9.1l2.6 2.6 4.1-4.1", stroke: palette.stroke, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx2("path", { d: "M6.8 10.2c1.6-1.6 4.3-1.6 5.9 0", stroke: palette.stroke, strokeWidth: "1.6", strokeLinecap: "round", fill: "none" }),
+    /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "14", height: "14", rx: "3", ry: "3", stroke: palette.stroke, strokeWidth: "1.4", fill: "none", opacity: "0.12" })
+  ] }) });
+}
+function XTwitterIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M7 4l7 8.7L7 21h2.2l7-8.7L21 4h-2.2l-7 8.7L7 4z", fill: palette.fill }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 4h2.2l6.2 7.7", stroke: palette.stroke, strokeWidth: "1.2", strokeLinecap: "round", fill: "none", opacity: "0.2" })
+  ] }) });
+}
+function XGitHubIcon(props) {
+  return /* @__PURE__ */ jsx2(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.35, children: ({ palette }) => /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M12 2c5.52 0 10 4.48 10 10 0 4.42-2.87 8.17-6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7 2.78.6 3.37-1.34 3.37-1.34.45-1.16 1.11-1.46 1.11-1.46.91-.62-.07-.61-.07-.61-1 .07-1.53 1.03-1.53 1.03-.89 1.53-2.34 1.54-2.91 1.19-.09-.92-.35-1.54-.63-1.9 2.22-.25 4.55-1.11 4.55-4.94 0-1.09-.39-1.98-1.03-2.68.1-.25.45-1.27-.1-2.65 0 0-.84-.27-2.75 1.03A9.58 9.58 0 0 0 12 6.84c-.85 0-1.7.12-2.51.34-1.91-1.3-2.75-1.03-2.75-1.03-.54 1.38-.2 2.4-.1 2.65-.63.7-1.03 1.59-1.03 2.68 0 3.84 2.33 4.69 4.54 4.94-.29.36-.55.97-.64 1.9-.57.35-2.02.34-2.91-1.19 0 0-.52-.96-1.53-1.03 0 0-.98-.01-.07.61 0 0 .66.3 1.11 1.46 0 0 .59 1.94 3.37 1.34 0 .83-.01 1.46-.01 1.7 0 .26.18.57.68.48C5.87 20.17 3 16.42 3 12 3 6.48 7.48 2 12 2z",
+      fill: palette.fill
+    }
+  ) }) });
+}
+
+export {
+  XSocialContact,
+  XTelegramIcon,
+  XInstagramIcon,
+  XWhatsappIcon,
+  XEmailIcon,
+  XLinkedInIcon,
+  XTwitterIcon,
+  XGitHubIcon
+};
+//# sourceMappingURL=chunk-U27ZVCP7.mjs.map