@xscriptor/xcomponents 0.1.0

package/dist/components/index.js

@@ -0,0 +1,1317 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  XContactForm: () => XContactForm,
+  XEmailIcon: () => XEmailIcon,
+  XFooter: () => XFooter,
+  XGitHubIcon: () => XGitHubIcon,
+  XInstagramIcon: () => XInstagramIcon,
+  XInteractivePhrase: () => XInteractivePhrase,
+  XLinkedInIcon: () => XLinkedInIcon,
+  XMicroGalleryText: () => XMicroGalleryText_default2,
+  XNavbar: () => XNavbar,
+  XNewsletter: () => XNewsletter,
+  XSeparator: () => XSeparator,
+  XSocialContact: () => XSocialContact,
+  XStaticGallery: () => XStaticGallery,
+  XTelegramIcon: () => XTelegramIcon,
+  XTwitterIcon: () => XTwitterIcon,
+  XWhatsappIcon: () => XWhatsappIcon,
+  XZigZagLayout: () => XZigZagLayout
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/components/forms/xcontactform/XContactForm.tsx
+var import_react = require("react");
+
+// src/components/forms/xcontactform/XContactForm.module.css
+var XContactForm_default = {};
+
+// src/components/forms/xcontactform/XContactForm.tsx
+var import_jsx_runtime = require("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] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${XContactForm_default.wrapper} ${XContactForm_default[size]} ${decorativeX ? XContactForm_default.withDecorativeX : ""}`, style: customStyles, children: [
+    decorativeX && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: XContactForm_default.decorativeXTop, children: "\u2715" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit, className: `${XContactForm_default.form} ${XContactForm_default[layout]}`, noValidate: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.honeypot, "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "website", children: "Tu web" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "website", name: "website", type: "text", tabIndex: -1, autoComplete: "off" })
+      ] }),
+      (showName || showEmail || showPhone) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.row, children: [
+        showName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "name", children: "Nombre" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "name", name: "name", type: "text", placeholder: namePlaceholder, required: true, maxLength: 80 })
+        ] }),
+        showEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "email", name: "email", type: "email", inputMode: "email", placeholder: emailPlaceholder, required: true })
+        ] }),
+        showPhone && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "phone", children: "Tel\xE9fono" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "phone", name: "phone", type: "tel", inputMode: "tel", placeholder: phonePlaceholder, required: true, maxLength: 20 })
+        ] })
+      ] }),
+      showSubject && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.field, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "subject", children: "Asunto" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "subject", name: "subject", type: "text", placeholder: subjectPlaceholder, required: true, maxLength: 120 })
+      ] }),
+      showMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XContactForm_default.field, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "message", children: "Mensaje" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { id: "message", name: "message", rows: 6, placeholder: messagePlaceholder, required: true, maxLength: 3e3 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: XContactForm_default.buttoncontainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", className: XContactForm_default.button, children: "Enviar" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: XContactForm_default.decorativeXBottom, children: "\u2715" })
+  ] });
+}
+
+// src/components/forms/xnewsletter/XNewsletter.tsx
+var import_react2 = require("react");
+var import_link = __toESM(require("next/link"));
+
+// src/components/forms/xnewsletter/XNewsletter.module.css
+var XNewsletter_default = {};
+
+// src/components/forms/xnewsletter/XNewsletter.tsx
+var import_jsx_runtime2 = require("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] = (0, import_react2.useState)("");
+  const [acceptedTerms, setAcceptedTerms] = (0, import_react2.useState)(false);
+  const [message, setMessage] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `${XNewsletter_default.container} ${containerClassName}`,
+      style: customCssVariables,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            className: `${XNewsletter_default.form} ${XNewsletter_default[layout]}`,
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: XNewsletter_default.title, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  type: "email",
+                  placeholder,
+                  className: XNewsletter_default.input,
+                  "aria-label": "email",
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value),
+                  required: true,
+                  disabled: isLoading
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  className: `${XNewsletter_default.actions} ${layout === "horizontal" ? XNewsletter_default.actionsHorizontal : XNewsletter_default.actionsVertical}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: XNewsletter_default.checkboxLabel, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: XNewsletter_default.checkbox,
+                          checked: acceptedTerms,
+                          onChange: (e) => setAcceptedTerms(e.target.checked),
+                          required: true,
+                          disabled: isLoading
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                        termsText,
+                        " ",
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_link.default,
+                          {
+                            href: termsLink,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: XNewsletter_default.termsLink,
+                            children: termsLinkText
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        type: "submit",
+                        disabled: isLoading,
+                        className: XNewsletter_default.button,
+                        children: isLoading ? "Enviando..." : buttonText
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "p",
+          {
+            className: `${XNewsletter_default.message} ${layout === "horizontal" ? XNewsletter_default.messageHorizontal : XNewsletter_default.messageVertical}`,
+            children: message
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/navigation/xnavbar/XNavbar.tsx
+var import_react3 = require("react");
+var import_framer_motion = require("framer-motion");
+var import_link2 = __toESM(require("next/link"));
+var import_navigation = require("next/navigation");
+
+// src/components/navigation/xnavbar/XNavbar.module.css
+var XNavbar_default = {};
+
+// src/components/navigation/xnavbar/XNavbar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var iconTrayRightVariants = {
+  hidden: { opacity: 0, x: -6, pointerEvents: "none" },
+  visible: { opacity: 1, x: 0, pointerEvents: "none", transition: { duration: 0.18 } }
+};
+var iconTrayLeftVariants = {
+  hidden: { opacity: 0, x: 6, pointerEvents: "none" },
+  visible: { opacity: 1, x: 0, pointerEvents: "none", transition: { duration: 0.18 } }
+};
+var topVariants = { closed: { rotate: 0 }, opened: { rotate: 45 } };
+var centerVariants = { closed: { opacity: 1 }, opened: { opacity: 0 } };
+var bottomVariants = { closed: { rotate: 0 }, opened: { rotate: -45 } };
+var listVariants = {
+  closed: { x: "100vw" },
+  opened: { x: 0, transition: { when: "beforeChildren", staggerChildren: 0.02 } }
+};
+var itemVariants = {
+  closed: { x: -10, opacity: 0 },
+  opened: { x: 0, opacity: 1 }
+};
+function renderIcon(icon, size, color) {
+  if (typeof icon === "function") return icon(size, color);
+  return icon;
+}
+function XNavLink({ link, onClick, mobile }) {
+  const pathname = (0, import_navigation.usePathname)();
+  const isActive = link.url === "/" ? pathname === "/" : pathname?.startsWith(link.url);
+  const baseClass = mobile ? XNavbar_default.mobileNavLink : XNavbar_default.navLink;
+  const activeClass = mobile ? XNavbar_default.mobileNavLinkActive : XNavbar_default.navLinkActive;
+  const externalClass = link.external ? XNavbar_default.navLinkExternal : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_link2.default,
+    {
+      href: link.url,
+      onClick,
+      target: link.external ? "_blank" : void 0,
+      rel: link.external ? "noopener noreferrer" : void 0,
+      "aria-label": `Ir a ${link.title}`,
+      "aria-current": isActive ? "page" : void 0,
+      className: [baseClass, isActive ? activeClass : "", externalClass].filter(Boolean).join(" "),
+      children: link.title
+    }
+  );
+}
+function XNavbar({
+  linksLeft = [],
+  linksRight = [],
+  logo = "X",
+  logoAsThemeToggle = true,
+  onLogoClick,
+  themeIcons,
+  defaultTheme = "light",
+  storageKey = "theme",
+  linkColor,
+  linkHoverColor,
+  linkActiveColor,
+  iconColor,
+  iconHoverColor,
+  iconSize = 22,
+  hamburgerColor,
+  hamburgerBarWidth,
+  hamburgerBarThickness,
+  cssVars,
+  labelOpen = "Abrir men\xFA",
+  labelClose = "Cerrar men\xFA",
+  labelDark = "Oscuro",
+  labelLight = "Claro",
+  className
+}) {
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [hoverX, setHoverX] = (0, import_react3.useState)(false);
+  const [theme, setTheme] = (0, import_react3.useState)(defaultTheme);
+  (0, import_react3.useEffect)(() => {
+    const saved = typeof window !== "undefined" && localStorage.getItem(storageKey);
+    applyTheme(saved ?? defaultTheme);
+  }, []);
+  function applyTheme(t) {
+    setTheme(t);
+    const root = document.documentElement;
+    if (t === "dark") root.setAttribute("data-theme", "dark");
+    else root.removeAttribute("data-theme");
+    localStorage.setItem(storageKey, t);
+  }
+  function toggleTheme() {
+    applyTheme(theme === "dark" ? "light" : "dark");
+  }
+  (0, import_react3.useEffect)(() => {
+    document.documentElement.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.documentElement.style.overflow = "";
+    };
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+  const allLinks = [...linksLeft, ...linksRight];
+  const headerStyle = {
+    ...linkColor && { "--xnav-link-color": linkColor },
+    ...linkHoverColor && { "--xnav-link-hover": linkHoverColor },
+    ...linkActiveColor && { "--xnav-link-active": linkActiveColor },
+    ...iconColor && { "--xnav-icon-color": iconColor },
+    ...iconHoverColor && { "--xnav-icon-hover": iconHoverColor },
+    ...hamburgerColor && { "--xnav-bar-color": hamburgerColor },
+    ...hamburgerBarWidth && { "--xnav-bar-w": hamburgerBarWidth },
+    ...hamburgerBarThickness && { "--xnav-bar-h": hamburgerBarThickness },
+    ...cssVars
+  };
+  const handleLogoClick = () => {
+    if (logoAsThemeToggle) {
+      toggleTheme();
+    } else {
+      onLogoClick?.();
+    }
+  };
+  const logoAriaLabel = logoAsThemeToggle ? `Cambiar a tema ${theme === "dark" ? "claro" : "oscuro"}` : void 0;
+  const logoTitle = logoAsThemeToggle ? theme === "dark" ? "Cambiar a tema claro" : "Cambiar a tema oscuro" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "header",
+    {
+      className: [XNavbar_default.header, className].filter(Boolean).join(" "),
+      style: headerStyle,
+      role: "banner",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("nav", { className: XNavbar_default.desktopNav, "aria-label": "Navegaci\xF3n principal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: XNavbar_default.desktopLinksLeft, children: linksLeft.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XNavLink, { link }, link.url + link.title)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: XNavbar_default.logoSlot, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: XNavbar_default.logoWrapper,
+              onMouseEnter: () => setHoverX(true),
+              onMouseLeave: () => setHoverX(false),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleLogoClick,
+                    "aria-label": logoAriaLabel,
+                    title: logoTitle,
+                    className: XNavbar_default.logoBtn,
+                    children: logo
+                  }
+                ),
+                logoAsThemeToggle && themeIcons && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_framer_motion.motion.div,
+                  {
+                    initial: false,
+                    animate: hoverX ? "visible" : "hidden",
+                    variants: iconTrayRightVariants,
+                    className: `${XNavbar_default.iconTray} ${XNavbar_default.iconTrayRight}`,
+                    style: {
+                      color: (hoverX ? iconHoverColor ?? iconColor : iconColor) || void 0
+                    },
+                    "aria-hidden": true,
+                    children: renderIcon(themeIcons.toDark, iconSize, iconColor)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_framer_motion.motion.div,
+                  {
+                    initial: false,
+                    animate: hoverX ? "visible" : "hidden",
+                    variants: iconTrayLeftVariants,
+                    className: `${XNavbar_default.iconTray} ${XNavbar_default.iconTrayLeft}`,
+                    style: {
+                      color: (hoverX ? iconHoverColor ?? iconColor : iconColor) || void 0
+                    },
+                    "aria-hidden": true,
+                    children: renderIcon(themeIcons.toLight, iconSize, iconColor)
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: XNavbar_default.desktopLinksRight, children: linksRight.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XNavLink, { link }, link.url + link.title)) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: XNavbar_default.mobileToggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            "aria-label": open ? labelClose : labelOpen,
+            "aria-expanded": open,
+            "aria-controls": "xnavbar-mobile-menu",
+            onClick: () => setOpen((p) => !p),
+            className: XNavbar_default.hamburgerBtn,
+            title: open ? labelClose : labelOpen,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_framer_motion.motion.div,
+                {
+                  variants: topVariants,
+                  initial: "closed",
+                  animate: open ? "opened" : "closed",
+                  className: XNavbar_default.bar,
+                  style: { originX: "left" },
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_framer_motion.motion.div,
+                {
+                  variants: centerVariants,
+                  initial: "closed",
+                  animate: open ? "opened" : "closed",
+                  className: XNavbar_default.bar,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_framer_motion.motion.div,
+                {
+                  variants: bottomVariants,
+                  initial: "closed",
+                  animate: open ? "opened" : "closed",
+                  className: XNavbar_default.bar,
+                  style: { originX: "left" },
+                  "aria-hidden": true
+                }
+              )
+            ]
+          }
+        ) }),
+        open && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_framer_motion.motion.div,
+          {
+            id: "xnavbar-mobile-menu",
+            variants: listVariants,
+            initial: "closed",
+            animate: "opened",
+            className: XNavbar_default.mobileOverlay,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Men\xFA de navegaci\xF3n",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  "aria-label": labelClose,
+                  onClick: () => setOpen(false),
+                  className: XNavbar_default.mobileCloseBtn,
+                  style: { WebkitTapHighlightColor: "transparent" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: XNavbar_default.closeBar,
+                        style: { transform: "rotate(45deg)" }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: XNavbar_default.closeBar,
+                        style: { transform: "rotate(-45deg)" }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: labelClose })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.motion.div, { variants: itemVariants, className: XNavbar_default.mobileLogo, children: logo }),
+              allLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                XNavLink,
+                {
+                  link,
+                  onClick: () => setOpen(false),
+                  mobile: true
+                }
+              ) }, link.url + link.title)),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_framer_motion.motion.button,
+                {
+                  variants: itemVariants,
+                  onClick: toggleTheme,
+                  className: XNavbar_default.themeToggleMobile,
+                  children: themeIcons ? theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    renderIcon(themeIcons.toDark, iconSize, iconColor),
+                    labelDark
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    renderIcon(themeIcons.toLight, iconSize, iconColor),
+                    labelLight
+                  ] }) : theme === "light" ? labelDark : labelLight
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/xfooter/XFooter.tsx
+var import_link3 = __toESM(require("next/link"));
+
+// src/components/layout/xfooter/XFooter.module.css
+var XFooter_default = {};
+
+// src/components/layout/xfooter/XFooter.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function XFooter({
+  links,
+  copyright,
+  layout = "horizontal",
+  columns = 1,
+  colors,
+  className = ""
+}) {
+  const customStyles = {
+    "--xf-bg": colors?.bg,
+    "--xf-text": colors?.text,
+    "--xf-accent": colors?.accent,
+    "--xf-border": colors?.border,
+    "--xf-cols": layout === "horizontal" ? columns : 1
+  };
+  const currentYear = copyright?.customYear || (/* @__PURE__ */ new Date()).getFullYear();
+  const copyLabel = copyright?.text || "Xscriptor";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("footer", { className: `${XFooter_default.XFooter} ${className}`, style: customStyles, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: XFooter_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: layout === "vertical" ? XFooter_default.navVertical : XFooter_default.nav, children: links.map((link, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link3.default, { href: link.href, className: XFooter_default.link, children: link.label }, idx)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: XFooter_default.copyright, children: [
+      "\xA9 ",
+      copyright?.yearFirst ? `${currentYear} ${copyLabel}` : `${copyLabel} ${currentYear}`
+    ] })
+  ] }) });
+}
+
+// src/components/layout/xseparator/XSeparator.module.css
+var XSeparator_default = {};
+
+// src/components/layout/xseparator/XSeparator.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function XSeparator({
+  orientation = "horizontal",
+  variant = "solid",
+  isFaded = false,
+  hasX = false,
+  xColor,
+  xBg = "white",
+  thickness = "1px",
+  color = "#e2e8f0",
+  gap = "1rem",
+  className = ""
+}) {
+  const dynamicStyles = {
+    "--separator-color": color,
+    "--separator-thickness": thickness,
+    "--separator-margin": gap,
+    "--x-color": xColor || color,
+    // Si no se define xColor, usa el color de la línea
+    "--x-bg": xBg
+  };
+  const classes = [
+    XSeparator_default.separator,
+    orientation === "vertical" ? XSeparator_default.vertical : XSeparator_default.horizontal,
+    variant !== "solid" && XSeparator_default[variant],
+    isFaded && XSeparator_default.faded
+  ].filter(Boolean).join(" ");
+  const line = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { className: classes, style: dynamicStyles });
+  if (!hasX) return line;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${XSeparator_default.separatorContainer} ${className}`, style: dynamicStyles, children: [
+    line,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: XSeparator_default.iconWrapper, children: "\u2715" })
+  ] });
+}
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+var import_react4 = require("react");
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.module.css
+var XZigZagLayout_default = {};
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function XZigZagLayout({
+  children,
+  className,
+  style,
+  startSide = "left",
+  gap,
+  offset,
+  textAlign = "inherit",
+  showLine = false,
+  lineColor = "#cccccc",
+  lineThickness = 2,
+  ...rest
+}) {
+  const items = import_react4.Children.toArray(children).filter(Boolean);
+  const containerRef = (0, import_react4.useRef)(null);
+  const itemsRef = (0, import_react4.useRef)([]);
+  const pathRef = (0, import_react4.useRef)(null);
+  const [points, setPoints] = (0, import_react4.useState)([]);
+  const [pathLength, setPathLength] = (0, import_react4.useState)(0);
+  const [drawProgress, setDrawProgress] = (0, import_react4.useState)(0);
+  const calculatePoints = (0, import_react4.useCallback)(() => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newPoints = itemsRef.current.filter(Boolean).map((el) => {
+      const rect = el.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2 - containerRect.left,
+        y: rect.top + rect.height / 2 - containerRect.top
+      };
+    });
+    if (newPoints.length > 0) {
+      newPoints.unshift({ x: newPoints[0].x, y: 0 });
+      newPoints.push({ x: newPoints[newPoints.length - 1].x, y: containerRect.height });
+    }
+    setPoints(newPoints);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!showLine || !containerRef.current) return;
+    const observer = new ResizeObserver(() => calculatePoints());
+    observer.observe(containerRef.current);
+    calculatePoints();
+    return () => observer.disconnect();
+  }, [showLine, calculatePoints]);
+  (0, import_react4.useEffect)(() => {
+    if (pathRef.current) setPathLength(pathRef.current.getTotalLength());
+  }, [points]);
+  (0, import_react4.useEffect)(() => {
+    if (!showLine) return;
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const { top, height } = containerRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const start = windowHeight / 2;
+      const progress = (start - top) / height;
+      setDrawProgress(Math.min(Math.max(progress, 0), 1));
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [showLine]);
+  const cssVars = {};
+  if (gap !== void 0) cssVars["--x-zigzag-gap"] = typeof gap === "number" ? `${gap}px` : gap;
+  if (offset !== void 0) cssVars["--x-zigzag-offset"] = typeof offset === "number" ? `${offset}px` : offset;
+  const mergedStyle = { ...style, ...cssVars };
+  const pathD = points.length > 0 ? `M ${points[0].x} ${points[0].y} ` + points.slice(1).map((p) => `L ${p.x} ${p.y}`).join(" ") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      ...rest,
+      className: [XZigZagLayout_default.layout, className].filter(Boolean).join(" "),
+      style: mergedStyle,
+      children: [
+        showLine && points.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: XZigZagLayout_default.svgLine, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "path",
+          {
+            ref: pathRef,
+            d: pathD,
+            fill: "none",
+            stroke: lineColor,
+            strokeWidth: lineThickness,
+            strokeDasharray: pathLength,
+            strokeDashoffset: pathLength - pathLength * drawProgress,
+            style: { transition: "stroke-dashoffset 0.1s ease-out" }
+          }
+        ) }),
+        items.map((child, index) => {
+          const isStartLeft = startSide === "left";
+          const alignLeft = isStartLeft ? index % 2 === 0 : index % 2 !== 0;
+          const alignmentClass = textAlign === "side" ? alignLeft ? XZigZagLayout_default.textLeft : XZigZagLayout_default.textRight : textAlign === "left" ? XZigZagLayout_default.textLeft : textAlign === "right" ? XZigZagLayout_default.textRight : "";
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${XZigZagLayout_default.item} ${alignLeft ? XZigZagLayout_default.left : XZigZagLayout_default.right} ${alignmentClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: (el) => {
+            itemsRef.current[index] = el;
+          }, className: XZigZagLayout_default.contentWrapper, children: child }) }, index);
+        })
+      ]
+    }
+  );
+}
+
+// src/components/content/xinteractivephrase/XInteractivePhrase.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/components/content/xinteractivephrase/XInteractivePhrase.module.css
+var XInteractivePhrase_default = {};
+
+// src/components/content/xinteractivephrase/XInteractivePhrase.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function XInteractivePhrase({
+  words,
+  as: Tag = "p",
+  className = ""
+}) {
+  const [active1, setActive1] = (0, import_react5.useState)(false);
+  const [active2, setActive2] = (0, import_react5.useState)(false);
+  const handleAction = (type) => {
+    if (type === "underline") setActive1(!active1);
+    if (type === "button") setActive2(!active2);
+  };
+  const onKeyDown = (e, type) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleAction(type);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${XInteractivePhrase_default.container} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tag, { className: XInteractivePhrase_default.title, children: words.map((word, index) => {
+    let dynamicClass = "";
+    let clickHandler = void 0;
+    let keyHandler = void 0;
+    if (word.type === "underline") {
+      dynamicClass = XInteractivePhrase_default.underlineEffect;
+      clickHandler = () => handleAction("underline");
+      keyHandler = (e) => onKeyDown(e, "underline");
+    } else if (word.type === "button") {
+      dynamicClass = XInteractivePhrase_default.buttonEffect;
+      clickHandler = () => handleAction("button");
+      keyHandler = (e) => onKeyDown(e, "button");
+    } else if (word.type === "blur1") {
+      dynamicClass = `${XInteractivePhrase_default.blurEffect} ${active1 ? XInteractivePhrase_default.isVisible : XInteractivePhrase_default.isHidden}`;
+    } else if (word.type === "blur2") {
+      dynamicClass = `${XInteractivePhrase_default.blurEffect} ${active2 ? XInteractivePhrase_default.isVisible : XInteractivePhrase_default.isHidden}`;
+    }
+    let content = word.text;
+    if (word.italic) content = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("em", { children: content });
+    if (word.bold) content = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react5.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "span",
+        {
+          className: dynamicClass,
+          onClick: clickHandler,
+          onKeyDown: keyHandler,
+          role: clickHandler ? "button" : void 0,
+          tabIndex: clickHandler ? 0 : void 0,
+          children: content
+        }
+      ),
+      word.breakAfter ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: XInteractivePhrase_default.lineBreak }) : " "
+    ] }, index);
+  }) }) });
+}
+
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.tsx
+var import_react6 = __toESM(require("react"));
+var import_image = __toESM(require("next/image"));
+var import_framer_motion2 = require("framer-motion");
+
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.module.css
+var XMicroGalleryText_default = {};
+
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DISPLAY_COUNT = 3;
+var XMicroGalleryText = ({
+  images,
+  text,
+  textPosition = "left",
+  textAlign = "left",
+  autoShuffle = false,
+  shuffleInterval = 5e3
+}) => {
+  const containerRef = (0, import_react6.useRef)(null);
+  const [startIndex, setStartIndex] = import_react6.default.useState(0);
+  const visibleImages = import_react6.default.useMemo(() => {
+    const result = [];
+    for (let i = 0; i < DISPLAY_COUNT; i++) {
+      result.push(images[(startIndex + i) % images.length]);
+    }
+    return result;
+  }, [images, startIndex]);
+  import_react6.default.useEffect(() => {
+    if (!autoShuffle || images.length <= DISPLAY_COUNT) return;
+    const intervalId = setInterval(() => {
+      setStartIndex((prev) => (prev + 1) % images.length);
+    }, shuffleInterval);
+    return () => clearInterval(intervalId);
+  }, [autoShuffle, shuffleInterval, images.length]);
+  const [isVisible, setIsVisible] = import_react6.default.useState(false);
+  (0, import_react6.useEffect)(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.1,
+        rootMargin: "0px 0px -50px 0px"
+      }
+    );
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  const isTextRight = textPosition === "right";
+  const alignClass = {
+    left: XMicroGalleryText_default.textLeft,
+    right: XMicroGalleryText_default.textRight,
+    center: XMicroGalleryText_default.textCenter
+  }[textAlign];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: `${XMicroGalleryText_default.container} ${isTextRight ? XMicroGalleryText_default.reverse : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${XMicroGalleryText_default.textContent} ${alignClass} ${isVisible ? XMicroGalleryText_default.visible : ""}`, children: typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { dangerouslySetInnerHTML: { __html: text } }) : text }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: XMicroGalleryText_default.gallery, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: XMicroGalleryText_default.artisticGrid, children: visibleImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_framer_motion2.motion.div,
+      {
+        layout: true,
+        className: `${XMicroGalleryText_default.imageWrapper} ${XMicroGalleryText_default[`artistic${index + 1}`]} ${isVisible ? XMicroGalleryText_default.visible : ""}`,
+        style: { transitionProperty: "opacity, box-shadow" },
+        transition: {
+          layout: { type: "spring", stiffness: 80, damping: 20 }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_image.default,
+          {
+            src: image.src,
+            alt: image.alt,
+            fill: true,
+            className: XMicroGalleryText_default.previewImage,
+            sizes: "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+          }
+        )
+      },
+      image.src
+    )) }) })
+  ] });
+};
+var XMicroGalleryText_default2 = XMicroGalleryText;
+
+// src/components/gallery/xstaticgallery/XStaticGallery.tsx
+var import_react7 = require("react");
+var import_image2 = __toESM(require("next/image"));
+
+// src/components/gallery/xstaticgallery/XStaticGallery.module.css
+var XStaticGallery_default = {};
+
+// src/components/gallery/xstaticgallery/XStaticGallery.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var COLUMN_CLASSES = {
+  1: XStaticGallery_default.cols1,
+  2: XStaticGallery_default.cols2,
+  3: XStaticGallery_default.cols3,
+  4: XStaticGallery_default.cols4,
+  5: XStaticGallery_default.cols5
+};
+function XStaticGallery({ images, columns = 4, title }) {
+  const containerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add(XStaticGallery_default.visible);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+        rootMargin: "0px 0px -50px 0px"
+      }
+    );
+    const items = containerRef.current?.querySelectorAll(`.${XStaticGallery_default.masonryItem}`);
+    items?.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+  const colClass = COLUMN_CLASSES[columns] || COLUMN_CLASSES[4];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, className: XStaticGallery_default.galleryContainer, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: XStaticGallery_default.galleryTitle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${XStaticGallery_default.masonryGrid} ${colClass}`, children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: XStaticGallery_default.masonryItem, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: XStaticGallery_default.imageContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_image2.default,
+        {
+          src: image.src,
+          alt: image.alt,
+          width: 600,
+          height: 600,
+          className: XStaticGallery_default.galleryImage,
+          loading: "lazy",
+          sizes: "(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: XStaticGallery_default.imageOverlay })
+    ] }) }, index)) })
+  ] });
+}
+
+// src/components/social/xsocialcontact/XSocialContact.module.css
+var XSocialContact_default = {};
+
+// src/components/social/xsocialcontact/XSocialContact.tsx
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: `${containerClass} ${XSocialContact_default[size]}`,
+      style: customStyles,
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("div", { className: XSocialContact_default.iconWrapper, children: item.icon }),
+            item.text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: XSocialContact_default.text, children: item.text })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+
+// src/components/social/xsocialcontact/XSocialIcons.tsx
+var import_react8 = require("react");
+var import_jsx_runtime11 = require("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] = (0, import_react8.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__ */ (0, import_jsx_runtime11.jsxs)(
+    "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__ */ (0, import_jsx_runtime11.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "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__ */ (0, import_jsx_runtime11.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "18", cy: "18", r: "2.6", fill: badgeFill, stroke: badgeStroke, strokeWidth: "1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.8, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "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__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "9.75", fill: "none", stroke: palette.stroke, strokeOpacity: "0.18", strokeWidth: "1" })
+  ] }) });
+}
+function XInstagramIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "3.15", stroke: palette.stroke, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "16.3", cy: "7.7", r: "0.7", fill: palette.fill })
+  ] }) });
+}
+function XWhatsappIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.5, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "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__ */ (0, import_jsx_runtime11.jsx)(
+      "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__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "4.5", y: "7", width: "15", height: "10", rx: "1.4", stroke: palette.stroke, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.6, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 4l7 8.7L7 21h2.2l7-8.7L21 4h-2.2l-7 8.7L7 4z", fill: palette.fill }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(XSocialIconShell, { ...props, strokeWidth: props.strokeWidth ?? 1.35, children: ({ palette }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "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
+    }
+  ) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  XContactForm,
+  XEmailIcon,
+  XFooter,
+  XGitHubIcon,
+  XInstagramIcon,
+  XInteractivePhrase,
+  XLinkedInIcon,
+  XMicroGalleryText,
+  XNavbar,
+  XNewsletter,
+  XSeparator,
+  XSocialContact,
+  XStaticGallery,
+  XTelegramIcon,
+  XTwitterIcon,
+  XWhatsappIcon,
+  XZigZagLayout
+});
+//# sourceMappingURL=index.js.map