@netlib/widerrufsbutton 1.1.2 → 2.1.1

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),C=require("react-dom");async function L(e,t){const n={"Content-Type":"application/json"};e.authToken&&(n.Authorization=`Bearer ${e.authToken}`);const d={action:e.action,payload:{...t,datum:new Date().toISOString()}},i=await fetch(e.apiUrl,{method:"PATCH",headers:n,body:JSON.stringify(d)});let l;try{l=await i.json()}catch{if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`);return}if(l!==null&&typeof l=="object"&&"ok"in l&&l.ok===!1){const s=l.message;throw new Error(typeof s=="string"&&s?s:`Server antwortete mit Status ${i.status}`)}if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`)}const z=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),T={name:"",email:"",vertragId:"",widerrufsgrund:"",datum:z};function j(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 W({config:e,onClose:t}){const[n,d]=b.useState(T),[i,l]=b.useState({}),[s,p]=b.useState({}),[x,y]=b.useState("idle"),[k,N]=b.useState(""),S=b.useRef(null);b.useEffect(()=>{var c;(c=S.current)==null||c.focus();const a=o=>o.key==="Escape"&&t();return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[t]);function w(a,c){const o={...n,[a]:c};if(d(o),s[a]){const h=j(o);l(g=>({...g,[a]:h[a]}))}}function v(a){p(o=>({...o,[a]:!0}));const c=j(n);l(o=>({...o,[a]:c[a]}))}async function I(a){var h,g;a.preventDefault();const c=Object.fromEntries(Object.keys(n).map(f=>[f,!0]));p(c);const o=j(n);if(l(o),!(Object.keys(o).length>0)){y("loading"),N("");try{await L(e,n),y("success"),(h=e.onSuccess)==null||h.call(e)}catch(f){const E=f instanceof Error?f:new Error("Ein unbekannter Fehler ist aufgetreten.");N(E.message),y("error"),(g=e.onError)==null||g.call(e,E)}}}const A=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:a=>a.target===a.currentTarget&&t(),children:r.jsxs("div",{className:"wrb-modal",children:[r.jsxs("div",{className:"wrb-modal-header",children:[r.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:A}),r.jsx("button",{className:"wrb-close-btn",onClick:t,"aria-label":"Schließen",type:"button",children:"✕"})]}),x==="success"?r.jsxs("div",{className:"wrb-modal-body",children:[r.jsxs("div",{className:"wrb-success",children:[r.jsx("span",{className:"wrb-success-icon",children:"✓"}),r.jsx("h3",{children:"Widerruf eingegangen"}),r.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",r.jsx("strong",{children:n.email}),"."]})]}),r.jsx($,{links:e.legalLinks})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),x==="error"&&k&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:k}),r.jsxs("form",{onSubmit:I,noValidate:!0,children:[r.jsx(m,{label:"Name",required:!0,error:s.name?i.name:void 0,children:r.jsx("input",{ref:S,className:`wrb-input${s.name&&i.name?" wrb-error":""}`,type:"text",autoComplete:"name",value:n.name,onChange:a=>w("name",a.target.value),onBlur:()=>v("name"),placeholder:"Vor- und Nachname"})}),r.jsx(m,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:s.email?i.email:void 0,children:r.jsx("input",{className:`wrb-input${s.email&&i.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:n.email,onChange:a=>w("email",a.target.value),onBlur:()=>v("email"),placeholder:"name@beispiel.de"})}),r.jsx(m,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:s.vertragId?i.vertragId:void 0,children:r.jsx("input",{className:`wrb-input${s.vertragId&&i.vertragId?" wrb-error":""}`,type:"text",value:n.vertragId,onChange:a=>w("vertragId",a.target.value),onBlur:()=>v("vertragId"),placeholder:"z.B. 10045678"})}),r.jsx(m,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:n.widerrufsgrund,onChange:a=>w("widerrufsgrund",a.target.value),placeholder:"Optional",rows:3})}),r.jsx(m,{label:"Datum der Widerrufserklärung",children:r.jsx("div",{className:"wrb-date-display",children:z})}),r.jsxs("div",{className:"wrb-actions",children:[r.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:t,children:e.cancelLabel??"Abbrechen"}),r.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:x==="loading",children:x==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx($,{links:e.legalLinks})]})]})})}function m({label:e,required:t,hint:n,error:d,children:i}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,t&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),i,n&&!d&&r.jsx("p",{className:"wrb-hint",children:n}),d&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:d})]})}function $({links:e}){return e!=null&&e.length?r.jsx("div",{className:"wrb-legal-links",children:e.map(t=>r.jsx("a",{href:t.href,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:t.name},t.href))}):null}const B=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),T=require("react-dom");async function q(e,a){const t={"Content-Type":"application/json"};e.authToken&&(t.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...a,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},l=await fetch(e.apiUrl,{method:"PATCH",headers:t,body:JSON.stringify(o)});let d;try{d=await l.json()}catch{if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`);return}if(d!==null&&typeof d=="object"&&"ok"in d&&d.ok===!1){const i=d.message;throw new Error(typeof i=="string"&&i?i:`Server antwortete mit Status ${l.status}`)}if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`)}const L={firstName:"",lastName:"",email:"",orderNumber:"",reason:"",userMessage:""};function N(e){const a={};return e.firstName.trim()||(a.firstName="Bitte geben Sie Ihren Vornamen an."),e.lastName.trim()||(a.lastName="Bitte geben Sie Ihren Nachnamen an."),e.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)||(a.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):a.email="Bitte geben Sie Ihre E-Mail-Adresse an.",e.orderNumber.trim()||(a.orderNumber="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),a}function M({config:e,onClose:a}){const[t,o]=c.useState(L),[l,d]=c.useState({}),[i,k]=c.useState({}),[w,y]=c.useState("idle"),[S,$]=c.useState(""),E=c.useRef(null);c.useEffect(()=>{var u;(u=E.current)==null||u.focus();const s=b=>b.key==="Escape"&&a();return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[a]);function m(s,u){const b={...t,[s]:u};if(o(b),i[s]){const x=N(b);d(f=>({...f,[s]:x[s]}))}}function h(s){k(b=>({...b,[s]:!0}));const u=N(t);d(b=>({...b,[s]:u[s]}))}async function A(s){var x,f;s.preventDefault();const u=Object.fromEntries(Object.keys(t).map(g=>[g,!0]));k(u);const b=N(t);if(d(b),!(Object.keys(b).length>0)){y("loading"),$("");try{await q(e,t),y("success"),(x=e.onSuccess)==null||x.call(e)}catch(g){const W=g instanceof Error?g:new Error("Ein unbekannter Fehler ist aufgetreten.");$(W.message),y("error"),(f=e.onError)==null||f.call(e,W)}}}const C=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:s=>s.target===s.currentTarget&&a(),children:r.jsxs("div",{className:"wrb-modal",children:[r.jsxs("div",{className:"wrb-modal-header",children:[r.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:C}),r.jsx("button",{className:"wrb-close-btn",onClick:a,"aria-label":"Schließen",type:"button",children:"✕"})]}),w==="success"?r.jsxs("div",{className:"wrb-modal-body",children:[r.jsxs("div",{className:"wrb-success",children:[r.jsx("span",{className:"wrb-success-icon",children:"✓"}),r.jsx("h3",{children:"Widerruf eingegangen"}),r.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",r.jsx("strong",{children:t.email}),"."]})]}),r.jsx(z,{links:e.legalLinks})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),w==="error"&&S&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:S}),r.jsxs("form",{onSubmit:A,noValidate:!0,children:[r.jsx(p,{label:"Vorname",required:!0,error:i.firstName?l.firstName:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${i.firstName&&l.firstName?" wrb-error":""}`,type:"text",autoComplete:"given-name",value:t.firstName,onChange:s=>m("firstName",s.target.value),onBlur:()=>h("firstName"),placeholder:"Max"})}),r.jsx(p,{label:"Nachname",required:!0,error:i.lastName?l.lastName:void 0,children:r.jsx("input",{className:`wrb-input${i.lastName&&l.lastName?" wrb-error":""}`,type:"text",autoComplete:"family-name",value:t.lastName,onChange:s=>m("lastName",s.target.value),onBlur:()=>h("lastName"),placeholder:"Mustermann"})}),r.jsx(p,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:i.email?l.email:void 0,children:r.jsx("input",{className:`wrb-input${i.email&&l.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:t.email,onChange:s=>m("email",s.target.value),onBlur:()=>h("email"),placeholder:"name@beispiel.de"})}),r.jsx(p,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:i.orderNumber?l.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${i.orderNumber&&l.orderNumber?" wrb-error":""}`,type:"text",value:t.orderNumber,onChange:s=>m("orderNumber",s.target.value),onBlur:()=>h("orderNumber"),placeholder:"z.B. 10045678"})}),r.jsx(p,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:t.reason,onChange:s=>m("reason",s.target.value),placeholder:"Optional",rows:2})}),r.jsx(p,{label:"Nachricht",children:r.jsx("textarea",{className:"wrb-textarea",value:t.userMessage,onChange:s=>m("userMessage",s.target.value),placeholder:"Optional",rows:3})}),r.jsxs("div",{className:"wrb-actions",children:[r.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:a,children:e.cancelLabel??"Abbrechen"}),r.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:w==="loading",children:w==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx(z,{links:e.legalLinks})]})]})})}function p({label:e,required:a,hint:t,error:o,children:l}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,a&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),l,t&&!o&&r.jsx("p",{className:"wrb-hint",children:t}),o&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:o})]})}function z({links:e}){return e!=null&&e.length?r.jsx("div",{className:"wrb-legal-links",children:e.map(a=>r.jsx("a",{href:a.href,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:a.name},a.href))}):null}const j=`
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -158,6 +158,10 @@
   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;
@@ -172,6 +176,10 @@
 .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;
@@ -219,65 +227,31 @@
   color: #374151;
   text-decoration: underline;
 }
-`;function q(){const e="wrb-styles";if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=B,document.head.appendChild(t)}function O({config:e}){const[t,n]=b.useState(!1);return b.useEffect(()=>{q()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>n(!0),children:e.buttonLabel??"Vertrag widerrufen"}),t&&C.createPortal(r.jsx(W,{config:e,onClose:()=>n(!1)}),document.body)]})}function u(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function D(e){var s;const t=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),n=e.companyName?`Widerruf – ${u(e.companyName)}`:"Widerrufsformular",d=u(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=e.introText?`<p class="wrb-intro">${u(e.introText)}</p>`:"",l=(s=e.legalLinks)!=null&&s.length?`
+`;function F(){const e="wrb-styles";if(document.getElementById(e))return;const a=document.createElement("style");a.id=e,a.textContent=j,document.head.appendChild(a)}function O({config:e}){const[a,t]=c.useState(!1);return c.useEffect(()=>{F()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>t(!0),children:e.buttonLabel??"Vertrag widerrufen"}),a&&T.createPortal(r.jsx(M,{config:e,onClose:()=>t(!1)}),document.body)]})}function n(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function v(e){var a;return(a=e.legalLinks)!=null&&a.length?`
       <div class="wrb-legal-links">
-        ${e.legalLinks.map(p=>`<a href="${u(p.href)}" class="wrb-legal-link" rel="noopener noreferrer">${u(p.name)}</a>`).join(`
+        ${e.legalLinks.map(t=>`<a href="${n(t.href)}" class="wrb-legal-link" rel="noopener noreferrer">${n(t.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; }
-    ${B}
-  </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="${d}" novalidate>
+      </div>`:""}function B(e,a="",t=""){const o=n(e.successUrl??a),l=n(e.errorUrl??t);return`
           <div class="wrb-field">
             <label class="wrb-label">
-              Name <span class="wrb-required" aria-hidden="true">*</span>
+              Vorname <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="firstName" autocomplete="given-name"
+              placeholder="Max" required>
+          </div>
+          <div class="wrb-field">
+            <label class="wrb-label">
+              Nachname <span class="wrb-required" aria-hidden="true">*</span>
+            </label>
+            <input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
+              placeholder="Mustermann" 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">
@@ -285,43 +259,131 @@
               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>
+            <textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></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}">
+            <label class="wrb-label">Nachricht</label>
+            <textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
           </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="${n(e.action)}">
+          ${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
+          ${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function I(e){const a=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",t=n(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; }
+    ${j}
+  </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">${n(e.introText)}</p>`:""}
+        <form method="POST" action="${t}" novalidate>
+          ${B(e)}
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
-              ${u(e.submitLabel??"Absenden")}
+              ${n(e.submitLabel??"Absenden")}
             </button>
           </div>
         </form>
-        ${l}
+        ${v(e)}
       </div>
     </div>
   </div>
 </body>
-</html>`}exports.WiderrufsModal=W;exports.WiderrufsWidget=O;exports.generateFallbackHtml=D;
+</html>`}function U(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",o=n(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`${a?`<style>${l}
+${j}</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">${t}</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      ${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
+      <form method="POST" action="${o}" novalidate>
+        ${B(e,"#wrb-success","#wrb-error")}
+        <div class="wrb-actions">
+          <a href="#" class="wrb-cancel-btn">${n(e.cancelLabel??"Abbrechen")}</a>
+          <button type="submit" class="wrb-submit-btn">
+            ${n(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>`}exports.WiderrufsModal=M;exports.WiderrufsWidget=O;exports.generateFallbackHtml=I;exports.generateModalHtml=U;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { WiderrufsWidget } from './components/WiderrufsWidget';
 export { WiderrufsModal } from './components/WiderrufsModal';
-export { generateFallbackHtml } from './fallback';
+export { generateFallbackHtml, generateModalHtml } from './fallback';
 export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus, LegalLink } from './types';