@netlib/widerrufsbutton 1.1.1 → 1.2.0

package/dist/index.es.js

@@ -1,259 +1,259 @@
-import { jsx as r, jsxs as d, Fragment as j } from "react/jsx-runtime";
-import { useState as p, useRef as T, useEffect as I } from "react";
-import { createPortal as q } from "react-dom";
-async function O(e, t) {
-  const n = {
+import { jsx as t, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { useState as m, useRef as q, useEffect as T } from "react";
+import { createPortal as D } from "react-dom";
+async function I(e, r) {
+  const a = {
     "Content-Type": "application/json"
   };
-  e.authToken && (n.Authorization = `Bearer ${e.authToken}`);
-  const b = {
+  e.authToken && (a.Authorization = `Bearer ${e.authToken}`);
+  const o = {
     action: e.action,
     payload: {
-      ...t,
+      ...r,
       datum: (/* @__PURE__ */ new Date()).toISOString()
     }
   }, i = await fetch(e.apiUrl, {
     method: "PATCH",
-    headers: n,
-    body: JSON.stringify(b)
+    headers: a,
+    body: JSON.stringify(o)
   });
-  let o;
+  let l;
   try {
-    o = await i.json();
+    l = await i.json();
   } catch {
     if (!i.ok) throw new Error(`Server antwortete mit Status ${i.status}`);
     return;
   }
-  if (o !== null && typeof o == "object" && "ok" in o && o.ok === !1) {
-    const l = o.message;
-    throw new Error(typeof l == "string" && l ? l : `Server antwortete mit Status ${i.status}`);
+  if (l !== null && typeof l == "object" && "ok" in l && l.ok === !1) {
+    const d = l.message;
+    throw new Error(typeof d == "string" && d ? d : `Server antwortete mit Status ${i.status}`);
   }
   if (!i.ok)
     throw new Error(`Server antwortete mit Status ${i.status}`);
 }
-const W = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
+const C = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
   day: "2-digit",
   month: "2-digit",
   year: "numeric"
-}), D = {
+}), U = {
   name: "",
   email: "",
-  vertragId: "",
-  widerrufsgrund: "",
-  datum: W
+  orderNumber: "",
+  reason: "",
+  datum: C
 };
 function N(e) {
-  const t = {};
-  return e.name.trim() || (t.name = "Bitte geben Sie Ihren Namen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (t.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : t.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.vertragId.trim() || (t.vertragId = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), t;
-}
-function F({ config: e, onClose: t }) {
-  const [n, b] = p(D), [i, o] = p({}), [l, m] = p({}), [h, v] = p("idle"), [E, S] = p(""), $ = T(null);
-  I(() => {
-    var c;
-    (c = $.current) == null || c.focus();
-    const a = (s) => s.key === "Escape" && t();
-    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
-  }, [t]);
-  function g(a, c) {
-    const s = { ...n, [a]: c };
-    if (b(s), l[a]) {
-      const f = N(s);
-      o((x) => ({ ...x, [a]: f[a] }));
+  const r = {};
+  return e.name.trim() || (r.name = "Bitte geben Sie Ihren Namen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (r.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : r.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.orderNumber.trim() || (r.orderNumber = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), r;
+}
+function V({ config: e, onClose: r }) {
+  const [a, o] = m(U), [i, l] = m({}), [d, S] = m({}), [w, y] = m("idle"), [E, z] = m(""), W = q(null);
+  T(() => {
+    var u;
+    (u = W.current) == null || u.focus();
+    const n = (b) => b.key === "Escape" && r();
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [r]);
+  function h(n, u) {
+    const b = { ...a, [n]: u };
+    if (o(b), d[n]) {
+      const f = N(b);
+      l((g) => ({ ...g, [n]: f[n] }));
     }
   }
-  function k(a) {
-    m((s) => ({ ...s, [a]: !0 }));
-    const c = N(n);
-    o((s) => ({ ...s, [a]: c[a] }));
+  function k(n) {
+    S((b) => ({ ...b, [n]: !0 }));
+    const u = N(a);
+    l((b) => ({ ...b, [n]: u[n] }));
   }
-  async function C(a) {
-    var f, x;
-    a.preventDefault();
-    const c = Object.fromEntries(
-      Object.keys(n).map((y) => [y, !0])
+  async function F(n) {
+    var f, g;
+    n.preventDefault();
+    const u = Object.fromEntries(
+      Object.keys(a).map((x) => [x, !0])
     );
-    m(c);
-    const s = N(n);
-    if (o(s), !(Object.keys(s).length > 0)) {
-      v("loading"), S("");
+    S(u);
+    const b = N(a);
+    if (l(b), !(Object.keys(b).length > 0)) {
+      y("loading"), z("");
       try {
-        await O(e, n), v("success"), (f = e.onSuccess) == null || f.call(e);
-      } catch (y) {
-        const z = y instanceof Error ? y : new Error("Ein unbekannter Fehler ist aufgetreten.");
-        S(z.message), v("error"), (x = e.onError) == null || x.call(e, z);
+        await I(e, a), y("success"), (f = e.onSuccess) == null || f.call(e);
+      } catch (x) {
+        const A = x instanceof Error ? x : new Error("Ein unbekannter Fehler ist aufgetreten.");
+        z(A.message), y("error"), (g = e.onError) == null || g.call(e, A);
       }
     }
   }
-  const L = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
-  return /* @__PURE__ */ r(
+  const M = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
+  return /* @__PURE__ */ t(
     "div",
     {
       className: "wrb-overlay",
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "wrb-title",
-      onClick: (a) => a.target === a.currentTarget && t(),
-      children: /* @__PURE__ */ d("div", { className: "wrb-modal", children: [
-        /* @__PURE__ */ d("div", { className: "wrb-modal-header", children: [
-          /* @__PURE__ */ r("h2", { className: "wrb-modal-title", id: "wrb-title", children: L }),
-          /* @__PURE__ */ r(
+      onClick: (n) => n.target === n.currentTarget && r(),
+      children: /* @__PURE__ */ c("div", { className: "wrb-modal", children: [
+        /* @__PURE__ */ c("div", { className: "wrb-modal-header", children: [
+          /* @__PURE__ */ t("h2", { className: "wrb-modal-title", id: "wrb-title", children: M }),
+          /* @__PURE__ */ t(
             "button",
             {
               className: "wrb-close-btn",
-              onClick: t,
+              onClick: r,
               "aria-label": "Schließen",
               type: "button",
               children: "✕"
             }
           )
         ] }),
-        h === "success" ? /* @__PURE__ */ d("div", { className: "wrb-modal-body", children: [
-          /* @__PURE__ */ d("div", { className: "wrb-success", children: [
-            /* @__PURE__ */ r("span", { className: "wrb-success-icon", children: "✓" }),
-            /* @__PURE__ */ r("h3", { children: "Widerruf eingegangen" }),
-            /* @__PURE__ */ d("p", { children: [
+        w === "success" ? /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
+          /* @__PURE__ */ c("div", { className: "wrb-success", children: [
+            /* @__PURE__ */ t("span", { className: "wrb-success-icon", children: "✓" }),
+            /* @__PURE__ */ t("h3", { children: "Widerruf eingegangen" }),
+            /* @__PURE__ */ c("p", { children: [
               "Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
-              /* @__PURE__ */ r("strong", { children: n.email }),
+              /* @__PURE__ */ t("strong", { children: a.email }),
               "."
             ] })
           ] }),
-          /* @__PURE__ */ r(B, { links: e.legalLinks })
-        ] }) : /* @__PURE__ */ d("div", { className: "wrb-modal-body", children: [
-          e.introText && /* @__PURE__ */ r("p", { className: "wrb-intro", children: e.introText }),
-          h === "error" && E && /* @__PURE__ */ r("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
-          /* @__PURE__ */ d("form", { onSubmit: C, noValidate: !0, children: [
-            /* @__PURE__ */ r(
-              w,
+          /* @__PURE__ */ t(B, { links: e.legalLinks })
+        ] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
+          e.introText && /* @__PURE__ */ t("p", { className: "wrb-intro", children: e.introText }),
+          w === "error" && E && /* @__PURE__ */ t("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
+          /* @__PURE__ */ c("form", { onSubmit: F, noValidate: !0, children: [
+            /* @__PURE__ */ t(
+              p,
               {
                 label: "Name",
                 required: !0,
-                error: l.name ? i.name : void 0,
-                children: /* @__PURE__ */ r(
+                error: d.name ? i.name : void 0,
+                children: /* @__PURE__ */ t(
                   "input",
                   {
-                    ref: $,
-                    className: `wrb-input${l.name && i.name ? " wrb-error" : ""}`,
+                    ref: W,
+                    className: `wrb-input${d.name && i.name ? " wrb-error" : ""}`,
                     type: "text",
                     autoComplete: "name",
-                    value: n.name,
-                    onChange: (a) => g("name", a.target.value),
+                    value: a.name,
+                    onChange: (n) => h("name", n.target.value),
                     onBlur: () => k("name"),
                     placeholder: "Vor- und Nachname"
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
-              w,
+            /* @__PURE__ */ t(
+              p,
               {
                 label: "E-Mail-Adresse",
                 required: !0,
                 hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
-                error: l.email ? i.email : void 0,
-                children: /* @__PURE__ */ r(
+                error: d.email ? i.email : void 0,
+                children: /* @__PURE__ */ t(
                   "input",
                   {
-                    className: `wrb-input${l.email && i.email ? " wrb-error" : ""}`,
+                    className: `wrb-input${d.email && i.email ? " wrb-error" : ""}`,
                     type: "email",
                     autoComplete: "email",
-                    value: n.email,
-                    onChange: (a) => g("email", a.target.value),
+                    value: a.email,
+                    onChange: (n) => h("email", n.target.value),
                     onBlur: () => k("email"),
                     placeholder: "name@beispiel.de"
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
-              w,
+            /* @__PURE__ */ t(
+              p,
               {
                 label: "Bestell- / Auftrags- / Vertragsnummer",
                 required: !0,
                 hint: "Zu finden in Ihrer Bestellbestätigung.",
-                error: l.vertragId ? i.vertragId : void 0,
-                children: /* @__PURE__ */ r(
+                error: d.orderNumber ? i.orderNumber : void 0,
+                children: /* @__PURE__ */ t(
                   "input",
                   {
-                    className: `wrb-input${l.vertragId && i.vertragId ? " wrb-error" : ""}`,
+                    className: `wrb-input${d.orderNumber && i.orderNumber ? " wrb-error" : ""}`,
                     type: "text",
-                    value: n.vertragId,
-                    onChange: (a) => g("vertragId", a.target.value),
-                    onBlur: () => k("vertragId"),
+                    value: a.orderNumber,
+                    onChange: (n) => h("orderNumber", n.target.value),
+                    onBlur: () => k("orderNumber"),
                     placeholder: "z.B. 10045678"
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
-              w,
+            /* @__PURE__ */ t(
+              p,
               {
-                label: "Widerrufsgrund",
+                label: "reason",
                 hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
-                children: /* @__PURE__ */ r(
+                children: /* @__PURE__ */ t(
                   "textarea",
                   {
                     className: "wrb-textarea",
-                    value: n.widerrufsgrund,
-                    onChange: (a) => g("widerrufsgrund", a.target.value),
+                    value: a.reason,
+                    onChange: (n) => h("reason", n.target.value),
                     placeholder: "Optional",
                     rows: 3
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(w, { label: "Datum der Widerrufserklärung", children: /* @__PURE__ */ r("div", { className: "wrb-date-display", children: W }) }),
-            /* @__PURE__ */ d("div", { className: "wrb-actions", children: [
-              /* @__PURE__ */ r(
+            /* @__PURE__ */ t(p, { label: "Datum der Widerrufserklärung", children: /* @__PURE__ */ t("div", { className: "wrb-date-display", children: C }) }),
+            /* @__PURE__ */ c("div", { className: "wrb-actions", children: [
+              /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   className: "wrb-cancel-btn",
-                  onClick: t,
+                  onClick: r,
                   children: e.cancelLabel ?? "Abbrechen"
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ t(
                 "button",
                 {
                   type: "submit",
                   className: "wrb-submit-btn",
-                  disabled: h === "loading",
-                  children: h === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
+                  disabled: w === "loading",
+                  children: w === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ r(B, { links: e.legalLinks })
+          /* @__PURE__ */ t(B, { links: e.legalLinks })
         ] })
       ] })
     }
   );
 }
-function w({ label: e, required: t, hint: n, error: b, children: i }) {
-  return /* @__PURE__ */ d("div", { className: "wrb-field", children: [
-    /* @__PURE__ */ d("label", { className: "wrb-label", children: [
+function p({ label: e, required: r, hint: a, error: o, children: i }) {
+  return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
+    /* @__PURE__ */ c("label", { className: "wrb-label", children: [
       e,
-      t && /* @__PURE__ */ r("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
+      r && /* @__PURE__ */ t("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
     ] }),
     i,
-    n && !b && /* @__PURE__ */ r("p", { className: "wrb-hint", children: n }),
-    b && /* @__PURE__ */ r("p", { className: "wrb-field-error", role: "alert", children: b })
+    a && !o && /* @__PURE__ */ t("p", { className: "wrb-hint", children: a }),
+    o && /* @__PURE__ */ t("p", { className: "wrb-field-error", role: "alert", children: o })
   ] });
 }
 function B({ links: e }) {
-  return e != null && e.length ? /* @__PURE__ */ r("div", { className: "wrb-legal-links", children: e.map((t) => /* @__PURE__ */ r(
+  return e != null && e.length ? /* @__PURE__ */ t("div", { className: "wrb-legal-links", children: e.map((r) => /* @__PURE__ */ t(
     "a",
     {
-      href: t.href,
+      href: r.href,
       className: "wrb-legal-link",
       target: "_blank",
       rel: "noopener noreferrer",
-      children: t.name
+      children: r.name
     },
-    t.href
+    r.href
   )) }) : null;
 }
-const A = `
+const $ = `
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -413,6 +413,10 @@ const A = `
   border-top: 1px solid #e5e7eb;
 }
 .wrb-submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 22px;
   background: #c0392b;
   color: #fff;
@@ -427,6 +431,10 @@ const A = `
 .wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
 .wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .wrb-cancel-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 18px;
   background: transparent;
   color: #374151;
@@ -475,101 +483,66 @@ const A = `
   text-decoration: underline;
 }
 `;
-function M() {
+function P() {
   const e = "wrb-styles";
   if (document.getElementById(e)) return;
-  const t = document.createElement("style");
-  t.id = e, t.textContent = A, document.head.appendChild(t);
-}
-function P({ config: e }) {
-  const [t, n] = p(!1);
-  return I(() => {
-    M();
-  }, []), /* @__PURE__ */ d(j, { children: [
-    /* @__PURE__ */ r(
+  const r = document.createElement("style");
+  r.id = e, r.textContent = $, document.head.appendChild(r);
+}
+function Y({ config: e }) {
+  const [r, a] = m(!1);
+  return T(() => {
+    P();
+  }, []), /* @__PURE__ */ c(O, { children: [
+    /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         className: `wrb-btn${e.buttonClass ? ` ${e.buttonClass}` : ""}`,
-        onClick: () => n(!0),
+        onClick: () => a(!0),
         children: e.buttonLabel ?? "Vertrag widerrufen"
       }
     ),
-    t && q(
-      /* @__PURE__ */ r(F, { config: e, onClose: () => n(!1) }),
+    r && D(
+      /* @__PURE__ */ t(V, { config: e, onClose: () => a(!1) }),
       document.body
     )
   ] });
 }
-function u(e) {
+function s(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function R(e) {
-  var l;
-  const t = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
+function L() {
+  return (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
     day: "2-digit",
     month: "2-digit",
     year: "numeric"
-  }), n = e.companyName ? `Widerruf – ${u(e.companyName)}` : "Widerrufsformular", b = u(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = e.introText ? `<p class="wrb-intro">${u(e.introText)}</p>` : "", o = (l = e.legalLinks) != null && l.length ? `
+  });
+}
+function v(e) {
+  var r;
+  return (r = e.legalLinks) != null && r.length ? `
       <div class="wrb-legal-links">
-        ${e.legalLinks.map((m) => `<a href="${u(m.href)}" class="wrb-legal-link" rel="noopener noreferrer">${u(m.name)}</a>`).join(`
+        ${e.legalLinks.map((a) => `<a href="${s(a.href)}" class="wrb-legal-link" rel="noopener noreferrer">${s(a.name)}</a>`).join(`
         `)}
       </div>` : "";
-  return `<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${n}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    body { margin: 0; background: #f9fafb; }
-    .wrb-page {
-      min-height: 100vh;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding: 40px 16px;
-    }
-    .wrb-page .wrb-modal { max-height: none; }
-    .wrb-page .wrb-modal-title { font-size: 20px; }
-    ${A}
-  </style>
-</head>
-<body>
-  <div class="wrb-page">
-    <div class="wrb-modal">
-      <div class="wrb-modal-header">
-        <h1 class="wrb-modal-title">${n}</h1>
-      </div>
-      <div class="wrb-modal-body">
-        ${i}
-        <form method="POST" action="${b}" novalidate>
+}
+function j(e, r, a = "", o = "") {
+  const i = s(e.successUrl ?? a), l = s(e.errorUrl ?? o);
+  return `
           <div class="wrb-field">
             <label class="wrb-label">
               Name <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="name"
-              autocomplete="name"
-              placeholder="Vor- und Nachname"
-              required
-            >
+            <input class="wrb-input" type="text" name="name" autocomplete="name"
+              placeholder="Vor- und Nachname" required>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">
               E-Mail-Adresse <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="email"
-              name="email"
-              autocomplete="email"
-              placeholder="name@beispiel.de"
-              required
-            >
+            <input class="wrb-input" type="email" name="email" autocomplete="email"
+              placeholder="name@beispiel.de" required>
             <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
           </div>
           <div class="wrb-field">
@@ -577,49 +550,147 @@ function R(e) {
               Bestell- / Auftrags- / Vertragsnummer
               <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="vertragId"
-              placeholder="z.B. 10045678"
-              required
-            >
+            <input class="wrb-input" type="text" name="orderNumber"
+              placeholder="z.B. 10045678" required>
             <p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
           </div>
           <div class="wrb-field">
-            <label class="wrb-label">Widerrufsgrund</label>
-            <textarea
-              class="wrb-textarea"
-              name="widerrufsgrund"
-              placeholder="Optional"
-              rows="3"
-            ></textarea>
+            <label class="wrb-label">reason</label>
+            <textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="3"></textarea>
             <p class="wrb-hint">
               Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
             </p>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">Datum der Widerrufserklärung</label>
-            <div class="wrb-date-display">${t}</div>
-            <input type="hidden" name="datum" value="${t}">
+            <div class="wrb-date-display">${r}</div>
+            <input type="hidden" name="datum" value="${r}">
           </div>
-          <input type="hidden" name="action" value="${u(e.action)}">
-          ${e.successUrl ? `<input type="hidden" name="successUrl" value="${u(e.successUrl)}">` : ""}
+          <input type="hidden" name="action" value="${s(e.action)}">
+          ${i ? `<input type="hidden" name="successUrl" value="${i}">` : ""}
+          ${l ? `<input type="hidden" name="errorUrl" value="${l}">` : ""}`;
+}
+function _(e) {
+  const r = L(), a = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", o = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
+  return `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${a}</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; background: #f9fafb; }
+    .wrb-page {
+      min-height: 100vh;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 40px 16px;
+    }
+    .wrb-page .wrb-modal { max-height: none; }
+    .wrb-page .wrb-modal-title { font-size: 20px; }
+    ${$}
+  </style>
+</head>
+<body>
+  <div class="wrb-page">
+    <div class="wrb-modal">
+      <div class="wrb-modal-header">
+        <h1 class="wrb-modal-title">${a}</h1>
+      </div>
+      <div class="wrb-modal-body">
+        ${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
+        <form method="POST" action="${o}" novalidate>
+          ${j(e, r)}
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
-              ${u(e.submitLabel ?? "Absenden")}
+              ${s(e.submitLabel ?? "Absenden")}
             </button>
           </div>
         </form>
-        ${o}
+        ${v(e)}
       </div>
     </div>
   </div>
 </body>
 </html>`;
 }
+function G(e, { inlineStyles: r = !0 } = {}) {
+  const a = L(), o = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", i = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), l = `
+#wrb-modal, #wrb-success, #wrb-error { display: none; }
+#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
+  return `${r ? `<style>${l}
+${$}</style>` : `<style>${l}</style>`}
+
+<!-- Widerruf: Form-Modal -->
+<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title" id="wrb-modal-title">${o}</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      ${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
+      <form method="POST" action="${i}" novalidate>
+        ${j(e, a, "#wrb-success", "#wrb-error")}
+        <div class="wrb-actions">
+          <a href="#" class="wrb-cancel-btn">${s(e.cancelLabel ?? "Abbrechen")}</a>
+          <button type="submit" class="wrb-submit-btn">
+            ${s(e.submitLabel ?? "Absenden")}
+          </button>
+        </div>
+      </form>
+      ${v(e)}
+    </div>
+  </div>
+</div>
+
+<!-- Widerruf: Success-Modal -->
+<div id="wrb-success" class="wrb-overlay" role="dialog" aria-modal="true">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title">Widerruf eingegangen</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      <div class="wrb-success">
+        <span class="wrb-success-icon">✓</span>
+        <h3>Widerruf eingegangen</h3>
+        <p>
+          Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine
+          Bestätigung per E-Mail.
+        </p>
+      </div>
+      ${v(e)}
+    </div>
+  </div>
+</div>
+
+<!-- Widerruf: Error-Modal -->
+<div id="wrb-error" class="wrb-overlay" role="alertdialog" aria-modal="true">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title">Fehler beim Senden</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      <div class="wrb-alert wrb-alert-error" role="alert">
+        Ihr Widerruf konnte leider nicht übermittelt werden. Bitte versuchen Sie es
+        erneut oder kontaktieren Sie uns direkt.
+      </div>
+      <div class="wrb-actions">
+        <a href="#" class="wrb-cancel-btn">Schließen</a>
+        <a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
+      </div>
+      ${v(e)}
+    </div>
+  </div>
+</div>`;
+}
 export {
-  F as WiderrufsModal,
-  P as WiderrufsWidget,
-  R as generateFallbackHtml
+  V as WiderrufsModal,
+  Y as WiderrufsWidget,
+  _ as generateFallbackHtml,
+  G as generateModalHtml
 };