@gait-financial/react 0.1.6 → 0.1.7

package/dist/wc/button.js

@@ -1,25 +1,128 @@
-(function(I){"use strict";function F(r,t){const e=r.replace("#",""),i=parseInt(e,16),a=i>>16&255,n=i>>8&255,o=i&255,d=Math.max(0,Math.floor(a*(1-t))),l=Math.max(0,Math.floor(n*(1-t))),s=Math.max(0,Math.floor(o*(1-t)));return`#${(d<<16|l<<8|s).toString(16).padStart(6,"0")}`}function q(r){const t=r.replace("#",""),e=parseInt(t,16),i=e>>16&255,a=e>>8&255,n=e&255;return(.299*i+.587*a+.114*n)/255<.5}const h={primary:{main:"rgb(47, 44, 37)",dark:"rgb(35, 33, 28)",contrastText:"#ffffff"}},E={sm:"8px",md:"16px",lg:"24px"},P={md:"8px"},f={normal:"250ms ease-in-out"},O={modalBackdrop:1040},y={fontFamily:{primary:'"Inter", "Helvetica", "Arial", sans-serif'},fontSize:{sm:"0.875rem",md:"1rem",lg:"1.125rem"},fontWeight:{medium:500},lineHeight:{normal:1.5}},g="#4147BF",C="#F3F2FF",B={fee:10};function N(r,t){return{bg:g,bgHover:r(g,.15),bgActive:r(g,.25),color:t(g)?"#ffffff":"#000000"}}function G(r){return{small:{padding:"8px 20px",fontSize:y.fontSize.sm,minHeight:"36px"},medium:{padding:"12px 28px",fontSize:y.fontSize.md,minHeight:"44px"},large:{padding:"16px 36px",fontSize:y.fontSize.lg,minHeight:"52px"}}[r]}function D(r,t,e){const i=N(t,e),a=G(r);return`
+(function(exports) {
+  "use strict";
+  function darkenColor(hex, percent) {
+    const color = hex.replace("#", "");
+    const num = parseInt(color, 16);
+    const r = num >> 16 & 255;
+    const g = num >> 8 & 255;
+    const b = num & 255;
+    const newR = Math.max(0, Math.floor(r * (1 - percent)));
+    const newG = Math.max(0, Math.floor(g * (1 - percent)));
+    const newB = Math.max(0, Math.floor(b * (1 - percent)));
+    return `#${(newR << 16 | newG << 8 | newB).toString(16).padStart(6, "0")}`;
+  }
+  function isColorDark(hex) {
+    const color = hex.replace("#", "");
+    const num = parseInt(color, 16);
+    const r = num >> 16 & 255;
+    const g = num >> 8 & 255;
+    const b = num & 255;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5;
+  }
+  const colors = {
+    // Primary colors (CTA button - dark)
+    primary: {
+      main: "rgb(47, 44, 37)",
+      dark: "rgb(35, 33, 28)",
+      contrastText: "#ffffff"
+    }
+  };
+  const spacing = {
+    sm: "8px",
+    md: "16px",
+    lg: "24px"
+  };
+  const borderRadius = {
+    md: "8px"
+  };
+  const transitions = {
+    normal: "250ms ease-in-out"
+  };
+  const zIndex = {
+    modalBackdrop: 1040
+  };
+  const typography = {
+    fontFamily: {
+      primary: '"Inter", "Helvetica", "Arial", sans-serif'
+    },
+    fontSize: {
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      md: "1rem",
+      // 16px
+      lg: "1.125rem"
+    },
+    fontWeight: {
+      medium: 500
+    },
+    lineHeight: {
+      normal: 1.5
+    }
+  };
+  const GAIT_BRAND_COLOR = "#4147BF";
+  const GAIT_SECONDARY_COLOR = "#F3F2FF";
+  const splitPaymentConfig = {
+    /**
+     * Split payment fee amount
+     * This fee is added to the total cost when using split payment
+     */
+    fee: 10
+  };
+  function getThemeStyles(darkenColor2, isColorDark2) {
+    return {
+      bg: GAIT_BRAND_COLOR,
+      bgHover: darkenColor2(GAIT_BRAND_COLOR, 0.15),
+      bgActive: darkenColor2(GAIT_BRAND_COLOR, 0.25),
+      color: isColorDark2(GAIT_BRAND_COLOR) ? "#ffffff" : "#000000"
+    };
+  }
+  function getSizeStyles(size) {
+    const sizeStyles = {
+      small: {
+        padding: "8px 20px",
+        fontSize: typography.fontSize.sm,
+        minHeight: "36px"
+      },
+      medium: {
+        padding: "12px 28px",
+        fontSize: typography.fontSize.md,
+        minHeight: "44px"
+      },
+      large: {
+        padding: "16px 36px",
+        fontSize: typography.fontSize.lg,
+        minHeight: "52px"
+      }
+    };
+    return sizeStyles[size];
+  }
+  function generateButtonStyles(size, darkenColorFn, isColorDarkFn) {
+    const themeStyles = getThemeStyles(darkenColorFn, isColorDarkFn);
+    const currentSize = getSizeStyles(size);
+    return `
     <style>
       :host {
         display: inline-block;
-        --gait-button-bg: ${i.bg};
-        --gait-button-bg-hover: ${i.bgHover};
-        --gait-button-bg-active: ${i.bgActive};
-        --gait-button-color: ${i.color};
-        --gait-button-padding: ${a.padding};
-        --gait-button-font-size: ${a.fontSize};
-        --gait-button-min-height: ${a.minHeight};
+        --gait-button-bg: ${themeStyles.bg};
+        --gait-button-bg-hover: ${themeStyles.bgHover};
+        --gait-button-bg-active: ${themeStyles.bgActive};
+        --gait-button-color: ${themeStyles.color};
+        --gait-button-padding: ${currentSize.padding};
+        --gait-button-font-size: ${currentSize.fontSize};
+        --gait-button-min-height: ${currentSize.minHeight};
       }
 
       button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: ${E.sm};
+        gap: ${spacing.sm};
         
-        font-family: ${y.fontFamily.primary};
-        font-weight: ${y.fontWeight.medium};
-        line-height: ${y.lineHeight.normal};
+        font-family: ${typography.fontFamily.primary};
+        font-weight: ${typography.fontWeight.medium};
+        line-height: ${typography.lineHeight.normal};
         font-size: var(--gait-button-font-size);
         
         padding: var(--gait-button-padding);
@@ -29,10 +132,10 @@
         color: var(--gait-button-color);
         
         border: none;
-        border-radius: ${P.md};
+        border-radius: ${borderRadius.md};
         cursor: pointer;
         
-        transition: all ${f.normal};
+        transition: all ${transitions.normal};
         
         /* Remove default button styles */
         outline: none;
@@ -81,7 +184,15 @@
         width: 100%;
       }
     </style>
-  `}function V(){if(document.getElementById("gait-modal-styles"))return;const r=document.createElement("style");r.id="gait-modal-styles",r.textContent=`
+  `;
+  }
+  function injectModalStyles() {
+    if (document.getElementById("gait-modal-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "gait-modal-styles";
+    style.textContent = `
     /* Modal Backdrop - The overlay behind the modal */
     .gait-modal-backdrop {
       position: fixed;
@@ -93,9 +204,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: ${O.modalBackdrop};
+      z-index: ${zIndex.modalBackdrop};
       opacity: 0;
-      transition: opacity ${f.normal};
+      transition: opacity ${transitions.normal};
       overflow: hidden;
     }
 
@@ -396,7 +507,7 @@
       border: 1px solid #e5e7eb;
       border-radius: 8px;
       cursor: pointer;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
       color: #6b7280;
     }
 
@@ -407,9 +518,9 @@
     }
 
     .gait-modal-split-option.selected {
-      background: ${C};
-      border: 1px solid ${g};
-      color: ${g};
+      background: ${GAIT_SECONDARY_COLOR};
+      border: 1px solid ${GAIT_BRAND_COLOR};
+      color: ${GAIT_BRAND_COLOR};
     }
 
     .gait-modal-email-inputs {
@@ -428,11 +539,11 @@
       background: #fff;
       color: #111827;
       outline: none;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
     }
 
     .gait-modal-email-input:focus {
-      border-color: ${h.primary.main};
+      border-color: ${colors.primary.main};
       box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
     }
 
@@ -495,7 +606,7 @@
 
     .gait-modal-email-item-amount {
       font-weight: 500;
-      color: ${h.primary.main};
+      color: ${colors.primary.main};
       font-size: 14px;
     }
 
@@ -514,12 +625,12 @@
       border: none;
       cursor: pointer;
       padding: 2px 4px;
-      transition: color ${f.normal};
+      transition: color ${transitions.normal};
     }
 
     .gait-modal-email-item-edit:hover,
     .gait-modal-email-item-remove:hover {
-      color: ${h.primary.main};
+      color: ${colors.primary.main};
     }
 
     /* For "By amount" mode - two input fields side by side */
@@ -542,18 +653,18 @@
       padding: 8px 16px;
       font-size: 13px;
       font-weight: 500;
-      border: 1px solid ${h.primary.main};
+      border: 1px solid ${colors.primary.main};
       border-radius: 6px;
-      background: ${h.primary.main};
-      color: ${h.primary.contrastText};
+      background: ${colors.primary.main};
+      color: ${colors.primary.contrastText};
       cursor: pointer;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
       white-space: nowrap;
     }
 
     .gait-modal-done-button:hover {
-      background: ${h.primary.dark};
-      border-color: ${h.primary.dark};
+      background: ${colors.primary.dark};
+      border-color: ${colors.primary.dark};
     }
 
     .gait-modal-email-amount-input {
@@ -569,7 +680,7 @@
     }
 
     .gait-modal-email-amount-input:focus {
-      border-color: ${h.primary.main};
+      border-color: ${colors.primary.main};
       box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
     }
 
@@ -581,11 +692,11 @@
       border: none;
       cursor: pointer;
       text-align: left;
-      transition: color ${f.normal};
+      transition: color ${transitions.normal};
     }
 
     .gait-modal-add-email-button:hover {
-      color: ${h.primary.main};
+      color: ${colors.primary.main};
       text-decoration: underline;
     }
 
@@ -605,7 +716,7 @@
     .gait-modal-split-amount {
       font-size: 18px;
       font-weight: 600;
-      color: ${g};
+      color: ${GAIT_BRAND_COLOR};
     }
 
     .gait-modal-send-split-button {
@@ -614,16 +725,16 @@
       font-size: 14px;
       font-weight: 500;
       border-radius: 8px;
-      border: 1px solid ${g};
-      background: ${C};
-      color: ${g};
+      border: 1px solid ${GAIT_BRAND_COLOR};
+      background: ${GAIT_SECONDARY_COLOR};
+      color: ${GAIT_BRAND_COLOR};
       cursor: pointer;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
       margin-top: 16px;
     }
 
     .gait-modal-send-split-button:hover {
-      background: ${C};
+      background: ${GAIT_SECONDARY_COLOR};
       filter: brightness(0.98);
     }
 
@@ -643,10 +754,10 @@
       font-weight: 600;
       border-radius: 10px;
       border: none;
-      background: var(--gait-modal-button-bg, ${h.primary.main});
-      color: var(--gait-modal-button-color, ${h.primary.contrastText});
+      background: var(--gait-modal-button-bg, ${colors.primary.main});
+      color: var(--gait-modal-button-color, ${colors.primary.contrastText});
       cursor: pointer;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
       margin-top: 12px;
       display: flex;
       flex-direction: row;
@@ -657,7 +768,7 @@
     }
 
     .gait-modal-confirm-button-with-amount:hover {
-      background-color: var(--gait-modal-button-bg-hover, ${h.primary.dark});
+      background-color: var(--gait-modal-button-bg-hover, ${colors.primary.dark});
     }
 
     .gait-modal-confirm-button-with-amount:active {
@@ -704,7 +815,7 @@
       background: var(--gait-modal-button-bg, #e91e63);
       color: var(--gait-modal-button-color, #fff);
       cursor: pointer;
-      transition: all ${f.normal};
+      transition: all ${transitions.normal};
     }
 
     .gait-modal-confirm-button:hover {
@@ -717,29 +828,29 @@
 
     /* Modal Footer - The button section */
     .gait-modal-footer {
-      padding: ${E.lg};
+      padding: ${spacing.lg};
       border-top: 1px solid #e5e7eb;
       display: flex;
       justify-content: flex-end;
-      gap: ${E.md};
+      gap: ${spacing.md};
     }
 
     /* Modal Button - The close button */
     .gait-modal-button {
-      padding: ${E.sm} ${E.lg};
-      font-family: ${y.fontFamily.primary};
-      font-size: ${y.fontSize.md};
-      font-weight: ${y.fontWeight.medium};
+      padding: ${spacing.sm} ${spacing.lg};
+      font-family: ${typography.fontFamily.primary};
+      font-size: ${typography.fontSize.md};
+      font-weight: ${typography.fontWeight.medium};
       border: none;
-      border-radius: ${P.md};
+      border-radius: ${borderRadius.md};
       cursor: pointer;
-      transition: all ${f.normal};
-      background-color: ${h.primary.main};
-      color: ${h.primary.contrastText};
+      transition: all ${transitions.normal};
+      background-color: ${colors.primary.main};
+      color: ${colors.primary.contrastText};
     }
 
     .gait-modal-button:hover {
-      background-color: ${h.primary.dark};
+      background-color: ${colors.primary.dark};
     }
 
     .gait-modal-button:active {
@@ -834,55 +945,73 @@
       background-color: #ef4444;
       color: #fff;
     }
-  `,document.head.appendChild(r)}const j='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.96 313.95" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M168.07,139.33c6.81-15.69,22.45-26.66,40.65-26.66s33.83,10.97,40.66,26.66h62.58C303.19,60.94,236.71,0,155.98,0S8.77,60.95,0,139.33h168.07Z"/><path fill="currentColor" d="M249.37,174.62c-6.81,15.68-22.46,26.65-40.65,26.65s-33.82-10.97-40.64-26.65H0c8.77,78.39,75.25,139.33,155.98,139.33s147.21-60.94,155.98-139.33h-62.59Z"/></svg>';function H(r,t){return`
+  `;
+    document.head.appendChild(style);
+  }
+  const GAIT_LOGO_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.96 313.95" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M168.07,139.33c6.81-15.69,22.45-26.66,40.65-26.66s33.83,10.97,40.66,26.66h62.58C303.19,60.94,236.71,0,155.98,0S8.77,60.95,0,139.33h168.07Z"/><path fill="currentColor" d="M249.37,174.62c-6.81,15.68-22.46,26.65-40.65,26.65s-33.82-10.97-40.64-26.65H0c8.77,78.39,75.25,139.33,155.98,139.33s147.21-60.94,155.98-139.33h-62.59Z"/></svg>`;
+  function generateButtonTemplate(disabled, customStyle) {
+    return `
     <button 
       type="button" 
-      ${r?"disabled":""}
-      style="${t}"
+      ${disabled ? "disabled" : ""}
+      style="${customStyle}"
     >
-      <span class="gait-button-icon">${j}</span>
+      <span class="gait-button-icon">${GAIT_LOGO_ICON}</span>
       <span class="gait-button-label">Gait</span>
     </button>
-  `}function A(r){return`R ${r.toFixed(2)}`}const _=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M18 6L6 18M6 6l12 12" />
-</svg>
-`,$=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M20 6L9 17l-5-5" />
-</svg>
-`,U=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M18 6L6 18M6 6l12 12" />
-</svg>
-`,W=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-  <path d="M21 12a9 9 0 11-6.22-8.56" />
-</svg>
-`;function J(r){return!r||r.length===0?"":r.map(t=>`
+  `;
+  }
+  function formatCurrency(amount) {
+    return `R ${amount.toFixed(2)}`;
+  }
+  const closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n  <path d="M18 6L6 18M6 6l12 12" />\n</svg>\n';
+  const checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n  <path d="M20 6L9 17l-5-5" />\n</svg>\n';
+  const crossIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n  <path d="M18 6L6 18M6 6l12 12" />\n</svg>\n';
+  const spinnerIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n  <path d="M21 12a9 9 0 11-6.22-8.56" />\n</svg>\n';
+  function renderItems(items) {
+    if (!items || items.length === 0) {
+      return "";
+    }
+    return items.map((item) => `
     <div class="gait-modal-item">
       <img
-        src="${t.image||""}"
-        alt="${t.name||"Product"}"
+        src="${item.image || ""}"
+        alt="${item.name || "Product"}"
         class="gait-modal-item-image"
       />
       <div class="gait-modal-item-meta">
         <h3 class="gait-modal-item-title">
-          ${t.name||""}
+          ${item.name || ""}
         </h3>
         <div class="gait-modal-item-quantity">
-          Qty: ${t.quantity||0}
-          <span class="gait-modal-item-price">${A(t.price||0)}</span>
+          Qty: ${item.quantity || 0}
+          <span class="gait-modal-item-price">${formatCurrency(item.price || 0)}</span>
         </div>
       </div>
     </div>
-  `).join("")}function Y(r){return!r||r.length===0?"":r.map(t=>{const e=typeof t.price=="number"?t.price:parseFloat(String(t.price))||0;return`
+  `).join("");
+  }
+  function renderPriceBreakdown(breakdown) {
+    if (!breakdown || breakdown.length === 0) {
+      return "";
+    }
+    return breakdown.map((item) => {
+      const price = typeof item.price === "number" ? item.price : parseFloat(String(item.price)) || 0;
+      return `
       <div class="gait-modal-price-item">
-        <span>${t.name||""}</span>
-        <span>${A(e)}</span>
+        <span>${item.name || ""}</span>
+        <span>${formatCurrency(price)}</span>
       </div>
-    `}).join("")}function K(r,t,e){return`
+    `;
+    }).join("");
+  }
+  function generateModalTemplate(items, priceBreakdown, totalCost) {
+    return `
     <div class="gait-modal-container">
       <div class="gait-modal-header">
         <h2 class="gait-modal-header-title">Split Payment</h2>
         <button class="gait-modal-close-icon" data-gait-modal-close aria-label="Close">
-          ${_}
+          ${closeIcon}
         </button>
       </div>
 
@@ -890,20 +1019,20 @@
         <!-- LEFT -->
         <div class="gait-modal-left-panel">
           <div class="gait-modal-items-container">
-            ${J(r)}
+            ${renderItems(items)}
           </div>
 
           <div class="gait-modal-price-section">
             <h4 class="gait-modal-price-title">Price details</h4>
 
-            ${Y(t)}
+            ${renderPriceBreakdown(priceBreakdown)}
 
-            ${e>0?`
+            ${totalCost > 0 ? `
             <div class="gait-modal-price-total">
               <span>Total</span>
-              <span>${A(e)}</span>
+              <span>${formatCurrency(totalCost)}</span>
             </div>
-            `:""}
+            ` : ""}
           </div>
         </div>
 
@@ -937,22 +1066,1560 @@
         </div>
       </div>
     </div>
-  `}function Z(r){const t={};return Array.from(r.attributes).forEach(e=>{e.name.startsWith("data-")&&(t[e.name]=e.value)}),t}function Q(r){const t={};return Array.from(r.attributes).forEach(e=>{t[e.name]=e.value}),t}function X(r){return{get dataId(){return r.getAttribute("data-id")||null},get disabled(){return r.hasAttribute("disabled")&&r.getAttribute("disabled")!=="false"},get size(){return r.getAttribute("size")||"medium"},get items(){const t=r.getAttribute("items");if(!t)return[];try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse items attribute:",e),[]}},get totalCost(){const t=r.getAttribute("total-cost");if(!t)return 0;const e=parseFloat(t);return(isNaN(e)?0:e)+B.fee},get priceBreakdown(){const t=r.getAttribute("total-cost"),e=parseFloat(t||"0");return[{name:"Subtotal",price:isNaN(e)?0:e},{name:"Split Payment Fee",price:B.fee}]},get customer(){const t=r.getAttribute("customer");if(!t)return null;try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse customer attribute:",e),null}},get webhook(){const t=r.getAttribute("webhook");if(!t)return null;try{return JSON.parse(t)}catch(e){return console.warn("[GaitButton] Failed to parse webhook attribute:",e),null}},get merchantStoreUrl(){const t=r.getAttribute("merchant-store-url");return t&&t.trim()!==""?t.trim():typeof window<"u"&&window.location?window.location.origin:""}}}function v(r){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)}function L(r,t,e){if(e.length===0)return r;if(t==="equally"){const i=e.length+1,a=r/i;return Math.max(0,r-a*e.length)}else if(t==="by-amount"){let i=0;return e.forEach(a=>{const n=a.amount||0;i+=n}),Math.max(0,r-i)}return r}function w(r,t){return r/t}function R(r,t,e){const i=[],a=r.querySelectorAll("[data-email-item]");return a.forEach(n=>{const o=n.getAttribute("data-email-item")||"";if(o)if(t==="by-amount"){const d=n.querySelector(".gait-modal-email-item-amount"),l=d&&parseFloat(d.textContent?.replace(/[^\d.]/g,"")||"0")||0;i.push({email:o,amount:l})}else{const d=a.length+1,l=w(e,d);i.push({email:o,amount:l})}}),i}function z(r){const t=r.querySelectorAll("[data-email-item]"),e=r.querySelectorAll("[data-email-input]");return t.length+e.length}class tt{modalElement;totalCost;currentSplitMethod="equally";dispatchEventFn;isSplitSent=!1;isSplitLoading=!1;splitFeedbackElement=null;feedbackHandler=null;constructor(t,e,i){this.modalElement=t,this.totalCost=e,this.dispatchEventFn=i,this.setup(),this.setupFeedbackListener()}setup(){const t=this.modalElement.querySelectorAll("[data-split-method]"),e=this.modalElement.querySelector("[data-email-inputs]"),i=this.modalElement.querySelector("[data-add-email]"),a=this.modalElement.querySelector("[data-send-split]");!e||!i||!a||(t.forEach(n=>{n.addEventListener("click",()=>{if(this.isSplitSent)return;t.forEach(l=>l.classList.remove("selected")),n.classList.add("selected");const o=n.getAttribute("data-split-method")||"equally",d=this.currentSplitMethod;this.currentSplitMethod=o,d!==o&&this.updateActiveInputsForSplitMethod(d,o),this.updateEmailItemsForSplitMethod(),this.updateSplitCalculation()})}),i.addEventListener("click",()=>this.addEmailField()),e.addEventListener("input",n=>{n.target.hasAttribute("data-email-input")&&this.updateSplitCalculation()}),a.addEventListener("click",()=>this.handleSendSplit()),this.updateSplitCalculation())}addEmailField(){if(this.isSplitSent)return;const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;const e=this.findEmptyInput(t);if(e){if(e instanceof HTMLInputElement)e.focus();else{const i=e.querySelector("[data-email-input]");i&&i.focus()}return}this.currentSplitMethod==="by-amount"?this.addByAmountInput(t):this.addEquallyInput(t)}findEmptyInput(t){if(this.currentSplitMethod==="by-amount"){const e=t.querySelectorAll(".gait-modal-email-amount-row");for(const i of Array.from(e)){const a=i.querySelector("[data-email-input]");if(a&&!a.value.trim())return i}}else{const e=t.querySelectorAll("[data-email-input]");for(const i of Array.from(e))if(!i.parentElement?.classList.contains("gait-modal-email-amount-row")&&!i.value.trim())return i}return null}removeEmptyInputs(t){t.querySelectorAll(".gait-modal-email-amount-row").forEach(a=>{const n=a.querySelector("[data-email-input]");n&&!n.value.trim()&&t.removeChild(a)}),t.querySelectorAll("[data-email-input]").forEach(a=>{a.parentElement?.classList.contains("gait-modal-email-amount-row")||a.value.trim()||t.removeChild(a)})}calculateRemainingAmount(t){const e=this.modalElement.querySelector("[data-email-inputs]");if(!e)return this.totalCost;let i=0;return e.querySelectorAll("[data-email-item]").forEach(d=>{const l=d.querySelector(".gait-modal-email-item-amount");if(l){const s=l.textContent||"0.00",m=parseFloat(s.replace(/[^\d.]/g,""))||0;i+=m}}),e.querySelectorAll(".gait-modal-email-amount-row").forEach(d=>{if(d===t)return;const l=d.querySelector("[data-email-amount-input]");if(l&&l.value){const s=parseFloat(l.value)||0;i+=s}}),Math.max(0,this.totalCost-i)}updateAmountInputMaxValues(t){const e=this.modalElement.querySelector("[data-email-inputs]");if(!e)return;const i=this.calculateRemainingAmount(t),a=i.toFixed(2);e.querySelectorAll("[data-email-amount-input]").forEach(o=>{o.closest(".gait-modal-email-amount-row")!==t&&(o.max=a,(parseFloat(o.value)||0)>i&&(o.value=a,o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)))})}addByAmountInput(t){const e=document.createElement("div");e.className="gait-modal-email-amount-row";const i=document.createElement("input");i.type="email",i.className="gait-modal-email-input",i.placeholder="Email address",i.setAttribute("data-email-input","");const a=document.createElement("input");a.type="number",a.className="gait-modal-email-amount-input",a.placeholder="0.00",a.step="0.01",a.min="0",a.setAttribute("data-email-amount-input","");const n=this.calculateRemainingAmount();a.max=n.toFixed(2);const o=document.createElement("button");o.type="button",o.className="gait-modal-done-button",o.textContent="Done",o.setAttribute("data-done-email","");const d=()=>{const l=i.value.trim();let s=parseFloat(a.value)||0;const m=this.calculateRemainingAmount(e);if(s>m&&(s=m,a.value=m.toFixed(2),a.style.borderColor="#ef4444",setTimeout(()=>{a.style.borderColor=""},2e3)),l&&v(l)){const u=this.createEmailItem(l,s);t.replaceChild(u,e),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}else l||(t.removeChild(e),this.updateAmountInputMaxValues())};a.addEventListener("input",()=>{const l=this.calculateRemainingAmount(e);(parseFloat(a.value)||0)>l?(a.value=l.toFixed(2),a.style.borderColor="#ef4444",setTimeout(()=>{a.style.borderColor=""},2e3)):a.style.borderColor="",this.updateAmountInputMaxValues(e)}),o.addEventListener("click",d),i.addEventListener("blur",()=>{!i.value.trim()&&!a.value&&setTimeout(()=>{e.parentElement&&!i.value.trim()&&t.removeChild(e)},100)}),e.appendChild(i),e.appendChild(a),e.appendChild(o),t.appendChild(e),i.focus()}addEquallyInput(t){const e=document.createElement("input");e.type="email",e.className="gait-modal-email-input",e.placeholder="Email address",e.setAttribute("data-email-input","");const i=()=>{const a=e.value.trim();a&&v(a)&&(this.convertInputToEmailItem(e),this.updateSplitCalculation())};e.addEventListener("blur",()=>{const a=e.value.trim();a&&v(a)?i():a||setTimeout(()=>{e.parentElement&&!e.value.trim()&&t.removeChild(e)},100)}),e.addEventListener("keydown",a=>{a.key==="Enter"&&(a.preventDefault(),i())}),t.appendChild(e),e.focus()}createEmailItem(t,e=0,i=!1){const a=document.createElement("div");a.className=`gait-modal-email-item${i?" sent":""}`,a.setAttribute("data-email-item",t);let n=e;if(this.currentSplitMethod==="equally"){const s=this.modalElement.querySelector("[data-email-inputs]"),m=s?z(s)+1:2;n=w(this.totalCost,m)}const o=i?`<div class="gait-modal-email-item-sent-check">${$}</div>`:"";a.innerHTML=`
-      <span class="gait-modal-email-item-email">${t}</span>
+  `;
+  }
+  function getDataAttributes(element) {
+    const dataAttrs = {};
+    Array.from(element.attributes).forEach((attr) => {
+      if (attr.name.startsWith("data-")) {
+        dataAttrs[attr.name] = attr.value;
+      }
+    });
+    return dataAttrs;
+  }
+  function getAllAttributes(element) {
+    const attrs = {};
+    Array.from(element.attributes).forEach((attr) => {
+      attrs[attr.name] = attr.value;
+    });
+    return attrs;
+  }
+  function createAttributeGetters(element) {
+    return {
+      get dataId() {
+        return element.getAttribute("data-id") || null;
+      },
+      get disabled() {
+        return element.hasAttribute("disabled") && element.getAttribute("disabled") !== "false";
+      },
+      get size() {
+        return element.getAttribute("size") || "medium";
+      },
+      get items() {
+        const itemsAttr = element.getAttribute("items");
+        if (!itemsAttr) {
+          return [];
+        }
+        try {
+          return JSON.parse(itemsAttr);
+        } catch (e) {
+          console.warn("[GaitButton] Failed to parse items attribute:", e);
+          return [];
+        }
+      },
+      get totalCost() {
+        const totalCostAttr = element.getAttribute("total-cost");
+        if (!totalCostAttr) {
+          return 0;
+        }
+        const parsed = parseFloat(totalCostAttr);
+        const baseTotal = isNaN(parsed) ? 0 : parsed;
+        return baseTotal + splitPaymentConfig.fee;
+      },
+      get priceBreakdown() {
+        const totalCostAttr = element.getAttribute("total-cost");
+        const parsed = parseFloat(totalCostAttr || "0");
+        const baseTotal = isNaN(parsed) ? 0 : parsed;
+        const allPriceBreakdown = [
+          {
+            name: "Subtotal",
+            price: baseTotal
+          },
+          {
+            name: "Split Payment Fee",
+            price: splitPaymentConfig.fee
+          }
+        ];
+        return allPriceBreakdown;
+      },
+      get customer() {
+        const customerAttr = element.getAttribute("customer");
+        if (!customerAttr) {
+          return null;
+        }
+        try {
+          return JSON.parse(customerAttr);
+        } catch (e) {
+          console.warn("[GaitButton] Failed to parse customer attribute:", e);
+          return null;
+        }
+      },
+      get webhook() {
+        const webhookAttr = element.getAttribute("webhook");
+        if (!webhookAttr) {
+          return null;
+        }
+        try {
+          return JSON.parse(webhookAttr);
+        } catch (e) {
+          console.warn("[GaitButton] Failed to parse webhook attribute:", e);
+          return null;
+        }
+      },
+      get merchantStoreUrl() {
+        const url = element.getAttribute("merchant-store-url");
+        if (url && url.trim() !== "") {
+          return url.trim();
+        }
+        if (typeof window !== "undefined" && window.location) {
+          return window.location.origin;
+        }
+        return "";
+      }
+    };
+  }
+  function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+  function calculateSplit(totalCost, splitMethod, emailData) {
+    if (emailData.length === 0) {
+      return totalCost;
+    }
+    if (splitMethod === "equally") {
+      const participantCount = emailData.length + 1;
+      const perPerson = totalCost / participantCount;
+      return Math.max(0, totalCost - perPerson * emailData.length);
+    } else if (splitMethod === "by-amount") {
+      let totalSplit = 0;
+      emailData.forEach((item) => {
+        const amount = item.amount || 0;
+        totalSplit += amount;
+      });
+      return Math.max(0, totalCost - totalSplit);
+    }
+    return totalCost;
+  }
+  function calculateEqualSplit(totalCost, participantCount) {
+    return totalCost / participantCount;
+  }
+  function getEmailData(container, splitMethod, totalCost) {
+    const data = [];
+    const items = container.querySelectorAll("[data-email-item]");
+    items.forEach((item) => {
+      const email = item.getAttribute("data-email-item") || "";
+      if (email) {
+        if (splitMethod === "by-amount") {
+          const amountSpan = item.querySelector(".gait-modal-email-item-amount");
+          const amount = amountSpan ? parseFloat(amountSpan.textContent?.replace(/[^\d.]/g, "") || "0") || 0 : 0;
+          data.push({ email, amount });
+        } else {
+          const participantCount = items.length + 1;
+          const amount = calculateEqualSplit(totalCost, participantCount);
+          data.push({ email, amount });
+        }
+      }
+    });
+    return data;
+  }
+  function getEmailDataCount(container) {
+    const items = container.querySelectorAll("[data-email-item]");
+    const inputs = container.querySelectorAll("[data-email-input]");
+    return items.length + inputs.length;
+  }
+  class SplitPaymentManager {
+    modalElement;
+    totalCost;
+    currentSplitMethod = "equally";
+    dispatchEventFn;
+    isSplitSent = false;
+    isSplitLoading = false;
+    splitFeedbackElement = null;
+    feedbackHandler = null;
+    constructor(modalElement, totalCost, dispatchEventFn) {
+      this.modalElement = modalElement;
+      this.totalCost = totalCost;
+      this.dispatchEventFn = dispatchEventFn;
+      this.setup();
+      this.setupFeedbackListener();
+    }
+    setup() {
+      const splitOptions = this.modalElement.querySelectorAll("[data-split-method]");
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      const addEmailButton = this.modalElement.querySelector("[data-add-email]");
+      const sendSplitButton = this.modalElement.querySelector("[data-send-split]");
+      if (!emailInputsContainer || !addEmailButton || !sendSplitButton) {
+        return;
+      }
+      splitOptions.forEach((option) => {
+        option.addEventListener("click", () => {
+          if (this.isSplitSent) {
+            return;
+          }
+          splitOptions.forEach((opt) => opt.classList.remove("selected"));
+          option.classList.add("selected");
+          const newSplitMethod = option.getAttribute("data-split-method") || "equally";
+          const oldSplitMethod = this.currentSplitMethod;
+          this.currentSplitMethod = newSplitMethod;
+          if (oldSplitMethod !== newSplitMethod) {
+            this.updateActiveInputsForSplitMethod(oldSplitMethod, newSplitMethod);
+          }
+          this.updateEmailItemsForSplitMethod();
+          this.updateSplitCalculation();
+        });
+      });
+      addEmailButton.addEventListener("click", () => this.addEmailField());
+      emailInputsContainer.addEventListener("input", (e) => {
+        const target = e.target;
+        if (target.hasAttribute("data-email-input")) {
+          this.updateSplitCalculation();
+        }
+      });
+      sendSplitButton.addEventListener("click", () => this.handleSendSplit());
+      this.updateSplitCalculation();
+    }
+    addEmailField() {
+      if (this.isSplitSent) {
+        return;
+      }
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return;
+      const existingEmptyInput = this.findEmptyInput(emailInputsContainer);
+      if (existingEmptyInput) {
+        if (existingEmptyInput instanceof HTMLInputElement) {
+          existingEmptyInput.focus();
+        } else {
+          const emailInput = existingEmptyInput.querySelector("[data-email-input]");
+          if (emailInput) {
+            emailInput.focus();
+          }
+        }
+        return;
+      }
+      if (this.currentSplitMethod === "by-amount") {
+        this.addByAmountInput(emailInputsContainer);
+      } else {
+        this.addEquallyInput(emailInputsContainer);
+      }
+    }
+    findEmptyInput(container) {
+      if (this.currentSplitMethod === "by-amount") {
+        const rows = container.querySelectorAll(".gait-modal-email-amount-row");
+        for (const row of Array.from(rows)) {
+          const emailInput = row.querySelector("[data-email-input]");
+          if (emailInput && !emailInput.value.trim()) {
+            return row;
+          }
+        }
+      } else {
+        const inputs = container.querySelectorAll("[data-email-input]");
+        for (const input of Array.from(inputs)) {
+          if (!input.parentElement?.classList.contains("gait-modal-email-amount-row")) {
+            if (!input.value.trim()) {
+              return input;
+            }
+          }
+        }
+      }
+      return null;
+    }
+    removeEmptyInputs(container) {
+      const rows = container.querySelectorAll(".gait-modal-email-amount-row");
+      rows.forEach((row) => {
+        const emailInput = row.querySelector("[data-email-input]");
+        if (emailInput && !emailInput.value.trim()) {
+          container.removeChild(row);
+        }
+      });
+      const inputs = container.querySelectorAll("[data-email-input]");
+      inputs.forEach((input) => {
+        if (!input.parentElement?.classList.contains("gait-modal-email-amount-row")) {
+          if (!input.value.trim()) {
+            container.removeChild(input);
+          }
+        }
+      });
+    }
+    /**
+     * Calculate the remaining amount available for a new split
+     * This is totalCost minus all amounts already assigned to other people
+     */
+    calculateRemainingAmount(excludeRow) {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return this.totalCost;
+      let totalAssigned = 0;
+      const items = emailInputsContainer.querySelectorAll("[data-email-item]");
+      items.forEach((item) => {
+        const amountSpan = item.querySelector(".gait-modal-email-item-amount");
+        if (amountSpan) {
+          const amountText = amountSpan.textContent || "0.00";
+          const amount = parseFloat(amountText.replace(/[^\d.]/g, "")) || 0;
+          totalAssigned += amount;
+        }
+      });
+      const rows = emailInputsContainer.querySelectorAll(".gait-modal-email-amount-row");
+      rows.forEach((row) => {
+        if (row === excludeRow) return;
+        const amountInput = row.querySelector("[data-email-amount-input]");
+        if (amountInput && amountInput.value) {
+          const amount = parseFloat(amountInput.value) || 0;
+          totalAssigned += amount;
+        }
+      });
+      const remaining = Math.max(0, this.totalCost - totalAssigned);
+      return remaining;
+    }
+    /**
+     * Update max attribute on all amount inputs
+     */
+    updateAmountInputMaxValues(excludeRow) {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return;
+      const remaining = this.calculateRemainingAmount(excludeRow);
+      const maxValue = remaining.toFixed(2);
+      const amountInputs = emailInputsContainer.querySelectorAll("[data-email-amount-input]");
+      amountInputs.forEach((input) => {
+        const row = input.closest(".gait-modal-email-amount-row");
+        if (row !== excludeRow) {
+          input.max = maxValue;
+          const currentValue = parseFloat(input.value) || 0;
+          if (currentValue > remaining) {
+            input.value = maxValue;
+            input.style.borderColor = "#ef4444";
+            setTimeout(() => {
+              input.style.borderColor = "";
+            }, 2e3);
+          }
+        }
+      });
+    }
+    addByAmountInput(container) {
+      const row = document.createElement("div");
+      row.className = "gait-modal-email-amount-row";
+      const emailInput = document.createElement("input");
+      emailInput.type = "email";
+      emailInput.className = "gait-modal-email-input";
+      emailInput.placeholder = "Email address";
+      emailInput.setAttribute("data-email-input", "");
+      const amountInput = document.createElement("input");
+      amountInput.type = "number";
+      amountInput.className = "gait-modal-email-amount-input";
+      amountInput.placeholder = "0.00";
+      amountInput.step = "0.01";
+      amountInput.min = "0";
+      amountInput.setAttribute("data-email-amount-input", "");
+      const remaining = this.calculateRemainingAmount();
+      amountInput.max = remaining.toFixed(2);
+      const doneButton = document.createElement("button");
+      doneButton.type = "button";
+      doneButton.className = "gait-modal-done-button";
+      doneButton.textContent = "Done";
+      doneButton.setAttribute("data-done-email", "");
+      const handleDone = () => {
+        const email = emailInput.value.trim();
+        let amount = parseFloat(amountInput.value) || 0;
+        const remaining2 = this.calculateRemainingAmount(row);
+        if (amount > remaining2) {
+          amount = remaining2;
+          amountInput.value = remaining2.toFixed(2);
+          amountInput.style.borderColor = "#ef4444";
+          setTimeout(() => {
+            amountInput.style.borderColor = "";
+          }, 2e3);
+        }
+        if (email && isValidEmail(email)) {
+          const item = this.createEmailItem(email, amount);
+          container.replaceChild(item, row);
+          this.updateSplitCalculation();
+          this.updateAmountInputMaxValues();
+        } else if (!email) {
+          container.removeChild(row);
+          this.updateAmountInputMaxValues();
+        }
+      };
+      amountInput.addEventListener("input", () => {
+        const remaining2 = this.calculateRemainingAmount(row);
+        const currentValue = parseFloat(amountInput.value) || 0;
+        if (currentValue > remaining2) {
+          amountInput.value = remaining2.toFixed(2);
+          amountInput.style.borderColor = "#ef4444";
+          setTimeout(() => {
+            amountInput.style.borderColor = "";
+          }, 2e3);
+        } else {
+          amountInput.style.borderColor = "";
+        }
+        this.updateAmountInputMaxValues(row);
+      });
+      doneButton.addEventListener("click", handleDone);
+      emailInput.addEventListener("blur", () => {
+        if (!emailInput.value.trim() && !amountInput.value) {
+          setTimeout(() => {
+            if (row.parentElement && !emailInput.value.trim()) {
+              container.removeChild(row);
+            }
+          }, 100);
+        }
+      });
+      row.appendChild(emailInput);
+      row.appendChild(amountInput);
+      row.appendChild(doneButton);
+      container.appendChild(row);
+      emailInput.focus();
+    }
+    addEquallyInput(container) {
+      const input = document.createElement("input");
+      input.type = "email";
+      input.className = "gait-modal-email-input";
+      input.placeholder = "Email address";
+      input.setAttribute("data-email-input", "");
+      const handleEmailDone = () => {
+        const email = input.value.trim();
+        if (email && isValidEmail(email)) {
+          this.convertInputToEmailItem(input);
+          this.updateSplitCalculation();
+        }
+      };
+      input.addEventListener("blur", () => {
+        const email = input.value.trim();
+        if (email && isValidEmail(email)) {
+          handleEmailDone();
+        } else if (!email) {
+          setTimeout(() => {
+            if (input.parentElement && !input.value.trim()) {
+              container.removeChild(input);
+            }
+          }, 100);
+        }
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleEmailDone();
+        }
+      });
+      container.appendChild(input);
+      input.focus();
+    }
+    createEmailItem(email, amount = 0, isSent = false) {
+      const item = document.createElement("div");
+      item.className = `gait-modal-email-item${isSent ? " sent" : ""}`;
+      item.setAttribute("data-email-item", email);
+      let displayAmount = amount;
+      if (this.currentSplitMethod === "equally") {
+        const container = this.modalElement.querySelector("[data-email-inputs]");
+        const participantCount = container ? getEmailDataCount(container) + 1 : 2;
+        displayAmount = calculateEqualSplit(this.totalCost, participantCount);
+      }
+      const checkmark = isSent ? `<div class="gait-modal-email-item-sent-check">${checkIcon}</div>` : "";
+      item.innerHTML = `
+      <span class="gait-modal-email-item-email">${email}</span>
       <div class="gait-modal-email-item-right">
         <div class="gait-modal-email-item-amount-container">
-          <span class="gait-modal-email-item-amount">R ${n.toFixed(2)}</span>
-          ${o}
+          <span class="gait-modal-email-item-amount">R ${displayAmount.toFixed(2)}</span>
+          ${checkmark}
         </div>
         <div class="gait-modal-email-item-actions">
-          <button class="gait-modal-email-item-edit" data-edit-email="${t}">Edit</button>
-          <button class="gait-modal-email-item-remove" data-remove-email="${t}">Remove</button>
+          <button class="gait-modal-email-item-edit" data-edit-email="${email}">Edit</button>
+          <button class="gait-modal-email-item-remove" data-remove-email="${email}">Remove</button>
         </div>
       </div>
-    `;const d=a.querySelector(`[data-edit-email="${t}"]`);d&&d.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),this.convertEmailItemToInput(a)});const l=a.querySelector(`[data-remove-email="${t}"]`);return l&&l.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),this.removeEmailItem(a)}),a}convertEmailItemToInput(t){if(!t.parentElement)return;const i=t.getAttribute("data-email-item")||"";if(this.currentSplitMethod==="by-amount"){const a=document.createElement("div");a.className="gait-modal-email-amount-row";const n=document.createElement("input");n.type="email",n.className="gait-modal-email-input",n.placeholder="Email address",n.setAttribute("data-email-input",""),n.value=i;const o=document.createElement("input");o.type="number",o.className="gait-modal-email-amount-input",o.placeholder="0.00",o.step="0.01",o.min="0",o.setAttribute("data-email-amount-input","");const d=t.querySelector(".gait-modal-email-item-amount");let l=0;if(d){const u=d.textContent||"0.00";l=parseFloat(u.replace(/[^\d.]/g,""))||0,o.value=l.toFixed(2)}const s=this.calculateRemainingAmount(a)+l;o.max=s.toFixed(2);const m=document.createElement("button");m.type="button",m.className="gait-modal-done-button",m.textContent="Done",m.setAttribute("data-done-email",""),m.addEventListener("click",()=>{const u=n.value.trim();let c=parseFloat(o.value)||0;const p=this.calculateRemainingAmount(a)+l;if(c>p&&(c=p,o.value=p.toFixed(2),o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)),u&&v(u)){const b=this.createEmailItem(u,c);a.parentElement&&a.parentElement.replaceChild(b,a),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}else u||(a.parentElement&&a.parentElement.removeChild(a),this.updateAmountInputMaxValues())}),o.addEventListener("input",()=>{const u=this.calculateRemainingAmount(a)+l;(parseFloat(o.value)||0)>u?(o.value=u.toFixed(2),o.style.borderColor="#ef4444",setTimeout(()=>{o.style.borderColor=""},2e3)):o.style.borderColor="",this.updateAmountInputMaxValues(a)}),a.appendChild(n),a.appendChild(o),a.appendChild(m),t.parentElement&&t.parentElement.replaceChild(a,t),n.focus(),n.select()}else{const a=document.createElement("input");a.type="email",a.className="gait-modal-email-input",a.placeholder="Email address",a.setAttribute("data-email-input",""),a.value=i;const n=()=>{const o=a.value.trim();o&&v(o)?(this.convertInputToEmailItem(a),this.updateSplitCalculation()):o||setTimeout(()=>{a.parentElement&&!a.value.trim()&&a.parentElement.removeChild(a)},100)};a.addEventListener("blur",n),a.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),n())}),t.parentElement&&t.parentElement.replaceChild(a,t),a.focus(),a.select()}}convertInputToEmailItem(t){const e=t.value.trim();if(!e||!v(e))return;const i=t.parentElement;if(!i)return;const a=z(i)+1,n=this.currentSplitMethod==="equally"?w(this.totalCost,a):0,o=this.createEmailItem(e,n);i.replaceChild(o,t)}removeEmailItem(t){const e=t.parentElement;e&&(e.removeChild(t),this.updateSplitCalculation(),this.updateAmountInputMaxValues())}updateActiveInputsForSplitMethod(t,e){const i=this.modalElement.querySelector("[data-email-inputs]");i&&(this.removeEmptyInputs(i),t==="equally"&&e==="by-amount"&&Array.from(i.querySelectorAll("[data-email-input]")).filter(n=>!n.parentElement?.classList.contains("gait-modal-email-amount-row")).forEach(n=>{const o=n.value.trim(),d=n.parentElement;if(!d)return;const l=document.createElement("div");l.className="gait-modal-email-amount-row";const s=document.createElement("input");s.type="email",s.className="gait-modal-email-input",s.placeholder="Email address",s.setAttribute("data-email-input",""),s.value=o;const m=document.createElement("input");m.type="number",m.className="gait-modal-email-amount-input",m.placeholder="0.00",m.step="0.01",m.min="0",m.setAttribute("data-email-amount-input","");const u=this.calculateRemainingAmount(l);m.max=u.toFixed(2);const c=document.createElement("button");c.type="button",c.className="gait-modal-done-button",c.textContent="Done",c.setAttribute("data-done-email",""),c.addEventListener("click",()=>{const p=s.value.trim();let b=parseFloat(m.value)||0;const T=this.calculateRemainingAmount(l);if(b>T&&(b=T,m.value=T.toFixed(2),m.style.borderColor="#ef4444",setTimeout(()=>{m.style.borderColor=""},2e3)),p&&v(p)){const st=this.createEmailItem(p,b);d.replaceChild(st,l),this.updateSplitCalculation(),this.updateAmountInputMaxValues()}}),m.addEventListener("input",()=>{const p=this.calculateRemainingAmount(l);(parseFloat(m.value)||0)>p?(m.value=p.toFixed(2),m.style.borderColor="#ef4444",setTimeout(()=>{m.style.borderColor=""},2e3)):m.style.borderColor="",this.updateAmountInputMaxValues(l)}),l.appendChild(s),l.appendChild(m),l.appendChild(c),d.replaceChild(l,n),s.focus()}),t==="by-amount"&&e==="equally"&&i.querySelectorAll(".gait-modal-email-amount-row").forEach(n=>{const o=n.querySelector("[data-email-input]");if(!o)return;const d=o.value.trim(),l=n.parentElement;if(!l)return;const s=document.createElement("input");s.type="email",s.className="gait-modal-email-input",s.placeholder="Email address",s.setAttribute("data-email-input",""),s.value=d;const m=()=>{const u=s.value.trim();u&&v(u)&&(this.convertInputToEmailItem(s),this.updateSplitCalculation())};s.addEventListener("blur",m),s.addEventListener("keydown",u=>{u.key==="Enter"&&(u.preventDefault(),m())}),l.replaceChild(s,n),s.focus()}))}updateEmailItemsForSplitMethod(){const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;const e=t.querySelectorAll("[data-email-item]"),i=e.length+1;e.forEach(a=>{const n=a.querySelector(".gait-modal-email-item-right");if(!n)return;const o=n.querySelector(".gait-modal-email-item-amount");if(o){if(this.currentSplitMethod==="equally"){const d=w(this.totalCost,i);o.textContent=`R ${d.toFixed(2)}`}else if(this.currentSplitMethod==="by-amount"){const d=o.textContent||"R 0.00",l=parseFloat(d.replace(/[^\d.]/g,""))||0;o.textContent=`R ${l.toFixed(2)}`}}})}updateSplitCalculation(){const t=this.modalElement.querySelector("[data-email-inputs]"),e=this.modalElement.querySelector("[data-confirm-amount]");if(!t||!e)return;const i=R(t,this.currentSplitMethod,this.totalCost),a=t.querySelectorAll("[data-email-input]");a.forEach(o=>{const d=o.value.trim();if(d&&v(d)){const l=i.length+a.length+1,s=this.currentSplitMethod==="equally"?w(this.totalCost,l):0;i.push({email:d,amount:s})}});const n=i.length>0?L(this.totalCost,this.currentSplitMethod,i):this.totalCost;e.textContent=`R ${n.toFixed(2)}`,this.currentSplitMethod==="by-amount"&&this.updateAmountInputMaxValues()}handleSendSplit(){const t=this.modalElement.querySelector("[data-email-inputs]"),e=this.modalElement.querySelector("[data-send-split]");if(!t||!e)return;const i=R(t,this.currentSplitMethod,this.totalCost);if(i.length===0){this.showFeedback("Please add at least one email address","error");return}if(this.isSplitSent||this.isSplitLoading)return;this.isSplitLoading=!0,e.disabled=!0,e.textContent="Sending...",this.showFeedback("Sending split payment...","loading");const a=L(this.totalCost,this.currentSplitMethod,i);this.dispatchEventFn(new CustomEvent("gait-split-sent",{detail:{splitMethod:this.currentSplitMethod,emails:i.map(n=>n.email),emailData:i,totalCost:this.totalCost,yourAmount:a,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}setupFeedbackListener(){this.feedbackHandler=t=>{const e=t;e.detail&&this.handleSplitFeedback(e.detail)},document.addEventListener("gait-split-feedback",this.feedbackHandler)}cleanup(){this.feedbackHandler&&(document.removeEventListener("gait-split-feedback",this.feedbackHandler),this.feedbackHandler=null)}handleSplitFeedback(t){this.isSplitLoading=!1;const e=this.modalElement.querySelector("[data-send-split]");t.success?(this.isSplitSent=!0,this.markEmailsAsSent(),this.disableSplitOptions(),e&&(e.disabled=!0,e.textContent="Split sent!"),this.showFeedback(t.message||"Split payment sent successfully","success")):(e&&(e.disabled=!1,e.textContent="Send split"),this.showFeedback(t.message||t.error||"Failed to send split payment","error"))}markEmailsAsSent(){const t=this.modalElement.querySelector("[data-email-inputs]");if(!t)return;t.querySelectorAll("[data-email-item]").forEach(i=>{if(!i.classList.contains("sent")){i.classList.add("sent");const a=i.querySelector(".gait-modal-email-item-right");if(a){let o=a.querySelector(".gait-modal-email-item-amount-container");const d=a.querySelector(".gait-modal-email-item-amount");if(!o&&d&&(o=document.createElement("div"),o.className="gait-modal-email-item-amount-container",d.parentElement?.replaceChild(o,d),o.appendChild(d)),o&&!o.querySelector(".gait-modal-email-item-sent-check")){const l=document.createElement("div");l.className="gait-modal-email-item-sent-check",l.innerHTML=$,o.appendChild(l)}}const n=i.querySelector(".gait-modal-email-item-actions");n&&(n.style.display="none")}})}showFeedback(t,e){this.splitFeedbackElement&&(this.splitFeedbackElement.remove(),this.splitFeedbackElement=null);const i=document.createElement("div");i.className=`gait-modal-feedback gait-modal-feedback-${e}`,i.setAttribute("data-split-feedback","");const a=e==="success"?$:e==="error"?U:W;i.innerHTML=`
-      <span class="gait-modal-feedback-icon">${a}</span>
-      <span class="gait-modal-feedback-message">${t}</span>
-    `;const n=this.modalElement.querySelector(".gait-modal-split-section");n&&(n.insertBefore(i,n.firstChild),this.splitFeedbackElement=i,e!=="loading"&&setTimeout(()=>{this.splitFeedbackElement===i&&(i.style.opacity="0",setTimeout(()=>{i.parentElement&&i.remove(),this.splitFeedbackElement===i&&(this.splitFeedbackElement=null)},300))},5e3))}disableSplitOptions(){this.modalElement.querySelectorAll("[data-split-method]").forEach(i=>{const a=i;a.style.pointerEvents="none",a.style.opacity="0.5",a.style.cursor="not-allowed",a.setAttribute("aria-disabled","true")});const e=this.modalElement.querySelector("[data-add-email]");e&&(e.style.pointerEvents="none",e.style.opacity="0.5",e.style.cursor="not-allowed",e.setAttribute("aria-disabled","true"))}}async function et(r,t=2e3){console.log("[SplitPaymentAPI] Sending split payment request:",r);const e="https://api.usegait.com/checkout";try{const a=await(await fetch(`${e}/v1/payments`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r),signal:AbortSignal.timeout(t)})).json().catch(()=>({success:!1,error:"Failed to parse API response"}));if(a.success){const n={success:!0,message:a.message,data:a.data};return console.log("[SplitPaymentAPI] Split payment sent successfully:",n),n}else{const n={success:!1,message:a.message,error:a.error};return console.error("[SplitPaymentAPI] Split payment failed:",n),n}}catch(i){const a={success:!1,message:"Failed to send split payment",error:i instanceof Error?i.message:"Network error or server unavailable"};return console.error("[SplitPaymentAPI] Split payment failed:",a,i),a}}let at=r=>crypto.getRandomValues(new Uint8Array(r)),it=(r,t,e)=>{let i=(2<<Math.log2(r.length-1))-1,a=-~(1.6*i*t/r.length);return(n=t)=>{let o="";for(;;){let d=e(a),l=a|0;for(;l--;)if(o+=r[d[l]&i]||"",o.length>=n)return o}}},ot=(r,t=21)=>it(r,t|0,at);const M={apiGateway:{MERCHANT_SERVICE_API:"https://api.usegait.com/merchant",CHECKOUT_SERVICE_API:"https://api.usegait.com/checkout"},paylink:{DOMAIN:"https://checkout.usegait.com"}},nt=M.apiGateway.MERCHANT_SERVICE_API;class rt{static async getMerchant(t){try{return await(await fetch(`${nt}/v1/merchant/identity/${t}`,{method:"GET",headers:{"Content-Type":"application/json"}})).json()}catch(e){return e}}}const k=M.apiGateway.CHECKOUT_SERVICE_API;class lt{static async getPayment(t){try{return await(await fetch(`${k}/v1/payments/${t}`,{method:"GET",headers:{"Content-Type":"application/json"}})).json()}catch(e){return e}}static async updatePaymentStatus(t,e,i){try{return await(await fetch(`${k}/v1/payments/merchants/${t}/${e}/status`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:i})})).json()}catch(a){return a}}static async createWebhook(t,e,i){try{return await(await fetch(`${k}/v1/webhooks/${t}/${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)})).json()}catch(a){return a}}static async updatePayment(t,e,i){try{return await(await fetch(`${k}/v1/payments/merchants/${t}/${i}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({paymentId:e})})).json()}catch(a){return a}}}const S=(typeof process<"u"&&process.env?"0.1.0":void 0)||"0.0.0";class x extends HTMLElement{buttonElement=null;hasRendered=!1;mutationObserver=null;modalElement=null;modalId;splitPaymentManager=null;attributeGetters;storedSplitPaymentRequest=null;merchantId=null;paymentProvider="stripe";static version=S;version=S;static get observedAttributes(){return["data-id","disabled","size","style","items","price-breakdown","total-cost","webhook","merchant-store-url"]}constructor(){super(),this.attachShadow({mode:"open"}),this.modalId=`gait-modal-${Math.random().toString(36).substr(2,9)}`,this.attributeGetters=X(this)}connectedCallback(){!this.hasRendered&&this.shadowRoot&&this.render(),this.setupEventListeners(),this.setupMutationObserver(),this.setupApiListeners(),setTimeout(()=>this.processData(),0)}disconnectedCallback(){this.buttonElement&&this.buttonElement.removeEventListener("click",this.handleClick),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.closeModal(),this.splitPaymentManager&&(this.splitPaymentManager=null),this.removeEventListener("gait-split-sent",this.handleSplitSent)}attributeChangedCallback(t,e,i){if(e!==i&&!(!this.isConnected||!this.shadowRoot)){if(t==="style"&&this.buttonElement&&this.hasRendered){const a=(i||"").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");this.buttonElement.setAttribute("style",a);return}this.hasRendered&&(this.render(),this.setupEventListeners()),(t==="data-id"||t.startsWith("data-"))&&(t==="data-id"&&(this.merchantId=null),setTimeout(()=>this.processData(),0))}}get dataId(){return this.attributeGetters.dataId}get disabled(){return this.attributeGetters.disabled}get size(){return this.attributeGetters.size}get items(){return this.attributeGetters.items}get priceBreakdown(){return this.attributeGetters.priceBreakdown}get totalCost(){return this.attributeGetters.totalCost}get customer(){return this.attributeGetters.customer}get webhook(){return this.attributeGetters.webhook}get merchantStoreUrl(){return this.attributeGetters.merchantStoreUrl}getDataAttributes(){return Z(this)}async fetchMerchantId(){const t=this.dataId;if(!t)return console.warn("[GaitButton] No checkoutId (data-id) provided, cannot fetch merchantId"),this.showMerchantIdError(),!1;try{const e=await rt.getMerchant(t);return e.success&&e.data?.merchantId?(this.merchantId=e.data.merchantId,this.paymentProvider=e.data.paymentProvider,!0):(console.error("[GaitButton] Failed to fetch merchantId:",e),this.showMerchantIdError(),!1)}catch(e){return console.error("[GaitButton] Error fetching merchantId:",e),this.showMerchantIdError(),!1}}showMerchantIdError(){const t="Unable to identify your account. Please go to your dashboard and copy your checkout identity.";alert(t),this.dispatchEvent(new CustomEvent("gait-merchant-id-error",{detail:{message:t,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}async processData(){const t=this.dataId,e=this.getDataAttributes();if(t&&!this.merchantId&&await this.fetchMerchantId(),t||Object.keys(e).length>0){const i={id:t,...e,timestamp:new Date().toISOString()};this.dispatchEvent(new CustomEvent("gait-data-processed",{detail:i,bubbles:!0,composed:!0}))}}handleClick=async t=>{if(this.disabled){t.preventDefault(),t.stopPropagation();return}const e={label:"Gait",dataId:this.dataId,dataAttributes:this.getDataAttributes(),timestamp:new Date().toISOString()};this.dispatchEvent(new CustomEvent("gait-click",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("click",{detail:e,bubbles:!0,composed:!0})),!(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))&&this.openModal()};setupEventListeners(){this.shadowRoot&&(this.buttonElement&&this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement=this.shadowRoot.querySelector("button"),this.buttonElement&&this.buttonElement.addEventListener("click",this.handleClick))}setupMutationObserver(){this.mutationObserver&&this.mutationObserver.disconnect(),this.mutationObserver=new MutationObserver(t=>{let e=!1;for(const i of t)if(i.type==="attributes"){const a=i.attributeName;if(a&&a.startsWith("data-")&&!x.observedAttributes.includes(a)){e=!0;break}}e&&this.isConnected&&this.processData()}),this.mutationObserver.observe(this,{attributes:!0,attributeFilter:void 0})}setupApiListeners(){this.addEventListener("gait-split-sent",this.handleSplitSent)}handleConfirmPayment=async()=>{if(console.log("[GaitButton] Pay remaining button clicked"),!this.storedSplitPaymentRequest){console.error("[GaitButton] Split payment must be sent first before paying remaining amount");return}if(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))return;const t={merchantId:this.merchantId,splitId:this.storedSplitPaymentRequest.splitId,paymentId:this.storedSplitPaymentRequest.paymentSplits.find(a=>a.initiator)?.paymentId},i=`${M.paylink.DOMAIN}/payment/${t.paymentId}`;window.open(i,"_blank"),this.dispatchEvent(new CustomEvent("gait-confirm",{detail:t,bubbles:!0,composed:!0})),this.closeModal()};handleSplitSent=async t=>{const i=t.detail;if(!this.merchantId&&(!await this.fetchMerchantId()||!this.merchantId))return;const a=this.merchantId,n=this.customer;if(!n||!n.email){console.error("[GaitButton] Customer email is required for split payment");return}const o=this.webhook;if(!o||!o.url||o.body==null){console.error("[GaitButton] Webhook with url and body is required");return}const l=ot("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",6),s=l(),m=[];m.push({paymentId:l(),email:n.email,amount:i.yourAmount,isPaid:!1,datePaid:null,initiator:!0}),i.emailData.forEach(c=>{m.push({paymentId:l(),email:c.email,amount:c.amount||0,isPaid:!1,datePaid:null,initiator:!1})});const u={merchantId:a,splitId:s,paymentSplits:m,splitMethod:i.splitMethod,timestamp:i.timestamp,totalCost:i.totalCost,items:this.items,priceBreakdown:this.priceBreakdown,brandColor:g,merchantStoreUrl:this.merchantStoreUrl,subTotal:this.priceBreakdown.find(c=>c.name==="Subtotal")?.price||0,paymentProvider:this.paymentProvider};console.log("[GaitButton] Split payment request body:",JSON.stringify(u,null,2));try{const c=await et(u,2e3);if(c.success){const p=c.data?.splitId||s;this.storedSplitPaymentRequest={...u,splitId:p};try{const b=await lt.createWebhook(a,p,{url:o.url,body:o.body});console.log("[GaitButton] Webhook created:",b)}catch(b){console.error("[GaitButton] Failed to create webhook:",b)}}if(this.modalElement){const p=this.modalElement.querySelector("[data-gait-modal-confirm]");p&&(p.disabled=!1,p.style.opacity="1",p.style.cursor="pointer")}this.dispatchEvent(new CustomEvent("gait-split-feedback",{detail:{success:c.success,message:c.message,data:c.success?this.storedSplitPaymentRequest:c.data,error:c.error,timestamp:new Date().toISOString()},bubbles:!0,composed:!0})),console.log("[GaitButton] Split payment API response:",c)}catch(c){console.error("[GaitButton] Split payment API error:",c),this.dispatchEvent(new CustomEvent("gait-split-feedback",{detail:{success:!1,message:"Failed to send split payment",error:c instanceof Error?c.message:"Unknown error",timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}};openModal(){V(),this.closeModal(),this.modalElement=document.createElement("div"),this.modalElement.className="gait-modal-backdrop",this.modalElement.id=this.modalId,this.modalElement&&(this.modalElement.style.setProperty("--gait-modal-brand-color",g),this.modalElement.style.setProperty("--gait-modal-button-bg",g),this.modalElement.style.setProperty("--gait-modal-button-bg-hover",F(g,.15)),this.modalElement.style.setProperty("--gait-modal-button-color",q(g)?"#ffffff":"#000000")),this.modalElement.innerHTML=K(this.items,this.priceBreakdown,this.totalCost);const t=this.modalElement.querySelector("[data-gait-modal-close]");t&&t.addEventListener("click",this.closeModal);const e=this.modalElement.querySelector("[data-gait-modal-confirm]");e&&(e.disabled=!0,e.style.opacity="0.5",e.style.cursor="not-allowed",e.addEventListener("click",this.handleConfirmPayment)),this.splitPaymentManager=new tt(this.modalElement,this.totalCost,a=>this.dispatchEvent(a)),this.modalElement._splitPaymentManager=this.splitPaymentManager,this.modalElement.addEventListener("click",a=>{a.target===this.modalElement&&this.closeModal()});const i=a=>{a.key==="Escape"&&this.modalElement&&(this.closeModal(),document.removeEventListener("keydown",i))};document.addEventListener("keydown",i),document.body.appendChild(this.modalElement),requestAnimationFrame(()=>{this.modalElement&&this.modalElement.classList.add("gait-modal-open")})}closeModal=()=>{this.modalElement&&(this.splitPaymentManager&&this.splitPaymentManager.cleanup(),this.modalElement.classList.remove("gait-modal-open"),setTimeout(()=>{this.modalElement&&this.modalElement.parentNode&&this.modalElement.parentNode.removeChild(this.modalElement),this.modalElement=null,this.splitPaymentManager=null},250))};render(){const t=this.shadowRoot;if(!t)return;const e=!this.hasRendered,i=D(this.size,F,q),n=(this.getAttribute("style")||"").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");if(t.innerHTML=`
-      ${i}
-      ${H(this.disabled,n)}
-    `,this.hasRendered=!0,this.setupEventListeners(),e){const o=Q(this);console.log("[GaitButton] rendered",o),this.dispatchEvent(new CustomEvent("gait-loaded",{detail:{attributes:o,dataId:this.dataId,dataAttributes:this.getDataAttributes(),label:"Gait",size:this.size,disabled:this.disabled,timestamp:new Date().toISOString()},bubbles:!0,composed:!0}))}}}customElements.get("gait-button")||customElements.define("gait-button",x),customElements.get("gait-button")||customElements.define("gait-button",x),typeof window<"u"&&(window.GaitButton=x,window.GaitButtonVersion=S,console.log(`[GaitButton] Version: ${S}`)),I.GAIT_BUTTON_VERSION=S,I.GaitButton=x,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})})(this.GaitButton=this.GaitButton||{});
+    `;
+      const editButton = item.querySelector(`[data-edit-email="${email}"]`);
+      if (editButton) {
+        editButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.convertEmailItemToInput(item);
+        });
+      }
+      const removeButton = item.querySelector(`[data-remove-email="${email}"]`);
+      if (removeButton) {
+        removeButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.removeEmailItem(item);
+        });
+      }
+      return item;
+    }
+    convertEmailItemToInput(item) {
+      const container = item.parentElement;
+      if (!container) return;
+      const email = item.getAttribute("data-email-item") || "";
+      if (this.currentSplitMethod === "by-amount") {
+        const row = document.createElement("div");
+        row.className = "gait-modal-email-amount-row";
+        const emailInput = document.createElement("input");
+        emailInput.type = "email";
+        emailInput.className = "gait-modal-email-input";
+        emailInput.placeholder = "Email address";
+        emailInput.setAttribute("data-email-input", "");
+        emailInput.value = email;
+        const amountInput = document.createElement("input");
+        amountInput.type = "number";
+        amountInput.className = "gait-modal-email-amount-input";
+        amountInput.placeholder = "0.00";
+        amountInput.step = "0.01";
+        amountInput.min = "0";
+        amountInput.setAttribute("data-email-amount-input", "");
+        const amountSpan = item.querySelector(".gait-modal-email-item-amount");
+        let initialAmount = 0;
+        if (amountSpan) {
+          const amountText = amountSpan.textContent || "0.00";
+          initialAmount = parseFloat(amountText.replace(/[^\d.]/g, "")) || 0;
+          amountInput.value = initialAmount.toFixed(2);
+        }
+        const remaining = this.calculateRemainingAmount(row) + initialAmount;
+        amountInput.max = remaining.toFixed(2);
+        const doneButton = document.createElement("button");
+        doneButton.type = "button";
+        doneButton.className = "gait-modal-done-button";
+        doneButton.textContent = "Done";
+        doneButton.setAttribute("data-done-email", "");
+        doneButton.addEventListener("click", () => {
+          const emailVal = emailInput.value.trim();
+          let amountVal = parseFloat(amountInput.value) || 0;
+          const remaining2 = this.calculateRemainingAmount(row) + initialAmount;
+          if (amountVal > remaining2) {
+            amountVal = remaining2;
+            amountInput.value = remaining2.toFixed(2);
+            amountInput.style.borderColor = "#ef4444";
+            setTimeout(() => {
+              amountInput.style.borderColor = "";
+            }, 2e3);
+          }
+          if (emailVal && isValidEmail(emailVal)) {
+            const newItem = this.createEmailItem(emailVal, amountVal);
+            if (row.parentElement) {
+              row.parentElement.replaceChild(newItem, row);
+            }
+            this.updateSplitCalculation();
+            this.updateAmountInputMaxValues();
+          } else if (!emailVal) {
+            if (row.parentElement) {
+              row.parentElement.removeChild(row);
+            }
+            this.updateAmountInputMaxValues();
+          }
+        });
+        amountInput.addEventListener("input", () => {
+          const remaining2 = this.calculateRemainingAmount(row) + initialAmount;
+          const currentValue = parseFloat(amountInput.value) || 0;
+          if (currentValue > remaining2) {
+            amountInput.value = remaining2.toFixed(2);
+            amountInput.style.borderColor = "#ef4444";
+            setTimeout(() => {
+              amountInput.style.borderColor = "";
+            }, 2e3);
+          } else {
+            amountInput.style.borderColor = "";
+          }
+          this.updateAmountInputMaxValues(row);
+        });
+        row.appendChild(emailInput);
+        row.appendChild(amountInput);
+        row.appendChild(doneButton);
+        if (item.parentElement) {
+          item.parentElement.replaceChild(row, item);
+        }
+        emailInput.focus();
+        emailInput.select();
+      } else {
+        const input = document.createElement("input");
+        input.type = "email";
+        input.className = "gait-modal-email-input";
+        input.placeholder = "Email address";
+        input.setAttribute("data-email-input", "");
+        input.value = email;
+        const handleEmailDone = () => {
+          const emailVal = input.value.trim();
+          if (emailVal && isValidEmail(emailVal)) {
+            this.convertInputToEmailItem(input);
+            this.updateSplitCalculation();
+          } else if (!emailVal) {
+            setTimeout(() => {
+              if (input.parentElement && !input.value.trim()) {
+                input.parentElement.removeChild(input);
+              }
+            }, 100);
+          }
+        };
+        input.addEventListener("blur", handleEmailDone);
+        input.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleEmailDone();
+          }
+        });
+        if (item.parentElement) {
+          item.parentElement.replaceChild(input, item);
+        }
+        input.focus();
+        input.select();
+      }
+    }
+    convertInputToEmailItem(input) {
+      const email = input.value.trim();
+      if (!email || !isValidEmail(email)) {
+        return;
+      }
+      const container = input.parentElement;
+      if (!container) return;
+      const participantCount = getEmailDataCount(container) + 1;
+      const perPersonAmount = this.currentSplitMethod === "equally" ? calculateEqualSplit(this.totalCost, participantCount) : 0;
+      const item = this.createEmailItem(email, perPersonAmount);
+      container.replaceChild(item, input);
+    }
+    removeEmailItem(item) {
+      const container = item.parentElement;
+      if (container) {
+        container.removeChild(item);
+        this.updateSplitCalculation();
+        this.updateAmountInputMaxValues();
+      }
+    }
+    updateActiveInputsForSplitMethod(oldMethod, newMethod) {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return;
+      this.removeEmptyInputs(emailInputsContainer);
+      if (oldMethod === "equally" && newMethod === "by-amount") {
+        const emailInputs = Array.from(emailInputsContainer.querySelectorAll("[data-email-input]")).filter((input) => !input.parentElement?.classList.contains("gait-modal-email-amount-row"));
+        emailInputs.forEach((input) => {
+          const email = input.value.trim();
+          const container = input.parentElement;
+          if (!container) return;
+          const row = document.createElement("div");
+          row.className = "gait-modal-email-amount-row";
+          const emailInput = document.createElement("input");
+          emailInput.type = "email";
+          emailInput.className = "gait-modal-email-input";
+          emailInput.placeholder = "Email address";
+          emailInput.setAttribute("data-email-input", "");
+          emailInput.value = email;
+          const amountInput = document.createElement("input");
+          amountInput.type = "number";
+          amountInput.className = "gait-modal-email-amount-input";
+          amountInput.placeholder = "0.00";
+          amountInput.step = "0.01";
+          amountInput.min = "0";
+          amountInput.setAttribute("data-email-amount-input", "");
+          const remaining = this.calculateRemainingAmount(row);
+          amountInput.max = remaining.toFixed(2);
+          const doneButton = document.createElement("button");
+          doneButton.type = "button";
+          doneButton.className = "gait-modal-done-button";
+          doneButton.textContent = "Done";
+          doneButton.setAttribute("data-done-email", "");
+          doneButton.addEventListener("click", () => {
+            const emailVal = emailInput.value.trim();
+            let amountVal = parseFloat(amountInput.value) || 0;
+            const remaining2 = this.calculateRemainingAmount(row);
+            if (amountVal > remaining2) {
+              amountVal = remaining2;
+              amountInput.value = remaining2.toFixed(2);
+              amountInput.style.borderColor = "#ef4444";
+              setTimeout(() => {
+                amountInput.style.borderColor = "";
+              }, 2e3);
+            }
+            if (emailVal && isValidEmail(emailVal)) {
+              const item = this.createEmailItem(emailVal, amountVal);
+              container.replaceChild(item, row);
+              this.updateSplitCalculation();
+              this.updateAmountInputMaxValues();
+            }
+          });
+          amountInput.addEventListener("input", () => {
+            const remaining2 = this.calculateRemainingAmount(row);
+            const currentValue = parseFloat(amountInput.value) || 0;
+            if (currentValue > remaining2) {
+              amountInput.value = remaining2.toFixed(2);
+              amountInput.style.borderColor = "#ef4444";
+              setTimeout(() => {
+                amountInput.style.borderColor = "";
+              }, 2e3);
+            } else {
+              amountInput.style.borderColor = "";
+            }
+            this.updateAmountInputMaxValues(row);
+          });
+          row.appendChild(emailInput);
+          row.appendChild(amountInput);
+          row.appendChild(doneButton);
+          container.replaceChild(row, input);
+          emailInput.focus();
+        });
+      }
+      if (oldMethod === "by-amount" && newMethod === "equally") {
+        const rows = emailInputsContainer.querySelectorAll(".gait-modal-email-amount-row");
+        rows.forEach((row) => {
+          const emailInput = row.querySelector("[data-email-input]");
+          if (!emailInput) return;
+          const email = emailInput.value.trim();
+          const container = row.parentElement;
+          if (!container) return;
+          const input = document.createElement("input");
+          input.type = "email";
+          input.className = "gait-modal-email-input";
+          input.placeholder = "Email address";
+          input.setAttribute("data-email-input", "");
+          input.value = email;
+          const handleEmailDone = () => {
+            const emailVal = input.value.trim();
+            if (emailVal && isValidEmail(emailVal)) {
+              this.convertInputToEmailItem(input);
+              this.updateSplitCalculation();
+            }
+          };
+          input.addEventListener("blur", handleEmailDone);
+          input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleEmailDone();
+            }
+          });
+          container.replaceChild(input, row);
+          input.focus();
+        });
+      }
+    }
+    updateEmailItemsForSplitMethod() {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return;
+      const items = emailInputsContainer.querySelectorAll("[data-email-item]");
+      const participantCount = items.length + 1;
+      items.forEach((item) => {
+        const rightColumn = item.querySelector(".gait-modal-email-item-right");
+        if (!rightColumn) return;
+        const amountSpan = rightColumn.querySelector(".gait-modal-email-item-amount");
+        if (!amountSpan) return;
+        if (this.currentSplitMethod === "equally") {
+          const perPerson = calculateEqualSplit(this.totalCost, participantCount);
+          amountSpan.textContent = `R ${perPerson.toFixed(2)}`;
+        } else if (this.currentSplitMethod === "by-amount") {
+          const currentAmountText = amountSpan.textContent || "R 0.00";
+          const currentAmount = parseFloat(currentAmountText.replace(/[^\d.]/g, "")) || 0;
+          amountSpan.textContent = `R ${currentAmount.toFixed(2)}`;
+        }
+      });
+    }
+    updateSplitCalculation() {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      const confirmAmountDisplay = this.modalElement.querySelector("[data-confirm-amount]");
+      if (!emailInputsContainer || !confirmAmountDisplay) {
+        return;
+      }
+      const emailData = getEmailData(emailInputsContainer, this.currentSplitMethod, this.totalCost);
+      const emailInputs = emailInputsContainer.querySelectorAll("[data-email-input]");
+      emailInputs.forEach((input) => {
+        const email = input.value.trim();
+        if (email && isValidEmail(email)) {
+          const participantCount = emailData.length + emailInputs.length + 1;
+          const amount = this.currentSplitMethod === "equally" ? calculateEqualSplit(this.totalCost, participantCount) : 0;
+          emailData.push({ email, amount });
+        }
+      });
+      const yourAmount = emailData.length > 0 ? calculateSplit(this.totalCost, this.currentSplitMethod, emailData) : this.totalCost;
+      confirmAmountDisplay.textContent = `R ${yourAmount.toFixed(2)}`;
+      if (this.currentSplitMethod === "by-amount") {
+        this.updateAmountInputMaxValues();
+      }
+    }
+    handleSendSplit() {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      const sendSplitButton = this.modalElement.querySelector("[data-send-split]");
+      if (!emailInputsContainer || !sendSplitButton) return;
+      const emailData = getEmailData(emailInputsContainer, this.currentSplitMethod, this.totalCost);
+      if (emailData.length === 0) {
+        this.showFeedback("Please add at least one email address", "error");
+        return;
+      }
+      if (this.isSplitSent || this.isSplitLoading) {
+        return;
+      }
+      this.isSplitLoading = true;
+      sendSplitButton.disabled = true;
+      sendSplitButton.textContent = "Sending...";
+      this.showFeedback("Sending split payment...", "loading");
+      const yourAmount = calculateSplit(this.totalCost, this.currentSplitMethod, emailData);
+      this.dispatchEventFn(new CustomEvent("gait-split-sent", {
+        detail: {
+          splitMethod: this.currentSplitMethod,
+          emails: emailData.map((d) => d.email),
+          emailData,
+          totalCost: this.totalCost,
+          yourAmount,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
+    setupFeedbackListener() {
+      this.feedbackHandler = (event) => {
+        const customEvent = event;
+        if (customEvent.detail) {
+          this.handleSplitFeedback(customEvent.detail);
+        }
+      };
+      document.addEventListener("gait-split-feedback", this.feedbackHandler);
+    }
+    // Cleanup method (can be called when modal is closed)
+    cleanup() {
+      if (this.feedbackHandler) {
+        document.removeEventListener("gait-split-feedback", this.feedbackHandler);
+        this.feedbackHandler = null;
+      }
+    }
+    handleSplitFeedback(feedback) {
+      this.isSplitLoading = false;
+      const sendSplitButton = this.modalElement.querySelector("[data-send-split]");
+      if (feedback.success) {
+        this.isSplitSent = true;
+        this.markEmailsAsSent();
+        this.disableSplitOptions();
+        if (sendSplitButton) {
+          sendSplitButton.disabled = true;
+          sendSplitButton.textContent = "Split sent!";
+        }
+        this.showFeedback(feedback.message || "Split payment sent successfully", "success");
+      } else {
+        if (sendSplitButton) {
+          sendSplitButton.disabled = false;
+          sendSplitButton.textContent = "Send split";
+        }
+        this.showFeedback(feedback.message || feedback.error || "Failed to send split payment", "error");
+      }
+    }
+    markEmailsAsSent() {
+      const emailInputsContainer = this.modalElement.querySelector("[data-email-inputs]");
+      if (!emailInputsContainer) return;
+      const emailItems = emailInputsContainer.querySelectorAll("[data-email-item]");
+      emailItems.forEach((item) => {
+        if (!item.classList.contains("sent")) {
+          item.classList.add("sent");
+          const rightColumn = item.querySelector(".gait-modal-email-item-right");
+          if (rightColumn) {
+            let amountContainer = rightColumn.querySelector(".gait-modal-email-item-amount-container");
+            const amountSpan = rightColumn.querySelector(".gait-modal-email-item-amount");
+            if (!amountContainer && amountSpan) {
+              amountContainer = document.createElement("div");
+              amountContainer.className = "gait-modal-email-item-amount-container";
+              amountSpan.parentElement?.replaceChild(amountContainer, amountSpan);
+              amountContainer.appendChild(amountSpan);
+            }
+            if (amountContainer && !amountContainer.querySelector(".gait-modal-email-item-sent-check")) {
+              const checkmark = document.createElement("div");
+              checkmark.className = "gait-modal-email-item-sent-check";
+              checkmark.innerHTML = checkIcon;
+              amountContainer.appendChild(checkmark);
+            }
+          }
+          const actions = item.querySelector(".gait-modal-email-item-actions");
+          if (actions) {
+            actions.style.display = "none";
+          }
+        }
+      });
+    }
+    showFeedback(message, type) {
+      if (this.splitFeedbackElement) {
+        this.splitFeedbackElement.remove();
+        this.splitFeedbackElement = null;
+      }
+      const feedback = document.createElement("div");
+      feedback.className = `gait-modal-feedback gait-modal-feedback-${type}`;
+      feedback.setAttribute("data-split-feedback", "");
+      const icon = type === "success" ? checkIcon : type === "error" ? crossIcon : spinnerIcon;
+      feedback.innerHTML = `
+      <span class="gait-modal-feedback-icon">${icon}</span>
+      <span class="gait-modal-feedback-message">${message}</span>
+    `;
+      const splitSection = this.modalElement.querySelector(".gait-modal-split-section");
+      if (splitSection) {
+        splitSection.insertBefore(feedback, splitSection.firstChild);
+        this.splitFeedbackElement = feedback;
+        if (type !== "loading") {
+          setTimeout(() => {
+            if (this.splitFeedbackElement === feedback) {
+              feedback.style.opacity = "0";
+              setTimeout(() => {
+                if (feedback.parentElement) {
+                  feedback.remove();
+                }
+                if (this.splitFeedbackElement === feedback) {
+                  this.splitFeedbackElement = null;
+                }
+              }, 300);
+            }
+          }, 5e3);
+        }
+      }
+    }
+    disableSplitOptions() {
+      const splitOptions = this.modalElement.querySelectorAll("[data-split-method]");
+      splitOptions.forEach((option) => {
+        const optionElement = option;
+        optionElement.style.pointerEvents = "none";
+        optionElement.style.opacity = "0.5";
+        optionElement.style.cursor = "not-allowed";
+        optionElement.setAttribute("aria-disabled", "true");
+      });
+      const addEmailButton = this.modalElement.querySelector("[data-add-email]");
+      if (addEmailButton) {
+        addEmailButton.style.pointerEvents = "none";
+        addEmailButton.style.opacity = "0.5";
+        addEmailButton.style.cursor = "not-allowed";
+        addEmailButton.setAttribute("aria-disabled", "true");
+      }
+    }
+  }
+  async function sendSplitPayment(request, timeout = 2e3) {
+    console.log("[SplitPaymentAPI] Sending split payment request:", request);
+    const apiUrl = "https://api.usegait.cloud/checkout";
+    try {
+      const response = await fetch(`${apiUrl}/v1/payments`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(request),
+        signal: AbortSignal.timeout(timeout)
+      });
+      const apiResponse = await response.json().catch(() => ({
+        success: false,
+        error: "Failed to parse API response"
+      }));
+      if (apiResponse.success) {
+        const successResponse = {
+          success: true,
+          message: apiResponse.message,
+          data: apiResponse.data
+        };
+        console.log("[SplitPaymentAPI] Split payment sent successfully:", successResponse);
+        return successResponse;
+      } else {
+        const errorResponse = {
+          success: false,
+          message: apiResponse.message,
+          error: apiResponse.error
+        };
+        console.error("[SplitPaymentAPI] Split payment failed:", errorResponse);
+        return errorResponse;
+      }
+    } catch (error) {
+      const errorResponse = {
+        success: false,
+        message: "Failed to send split payment",
+        error: error instanceof Error ? error.message : "Network error or server unavailable"
+      };
+      console.error("[SplitPaymentAPI] Split payment failed:", errorResponse, error);
+      return errorResponse;
+    }
+  }
+  let random = (bytes) => crypto.getRandomValues(new Uint8Array(bytes));
+  let customRandom = (alphabet, defaultSize, getRandom) => {
+    let mask = (2 << Math.log2(alphabet.length - 1)) - 1;
+    let step = -~(1.6 * mask * defaultSize / alphabet.length);
+    return (size = defaultSize) => {
+      let id = "";
+      while (true) {
+        let bytes = getRandom(step);
+        let j = step | 0;
+        while (j--) {
+          id += alphabet[bytes[j] & mask] || "";
+          if (id.length >= size) return id;
+        }
+      }
+    };
+  };
+  let customAlphabet = (alphabet, size = 21) => customRandom(alphabet, size | 0, random);
+  const config = {
+    apiGateway: {
+      MERCHANT_SERVICE_API: "https://api.usegait.cloud/merchant",
+      CHECKOUT_SERVICE_API: "https://api.usegait.cloud/checkout"
+    },
+    paylink: {
+      DOMAIN: "https://checkout.usegait.cloud"
+    }
+  };
+  const domain$1 = config.apiGateway.MERCHANT_SERVICE_API;
+  class MerchantService {
+    static async getMerchant(checkoutId) {
+      try {
+        const resp = await fetch(`${domain$1}/v1/merchant/identity/${checkoutId}`, {
+          "method": "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        return await resp.json();
+      } catch (error) {
+        return error;
+      }
+    }
+  }
+  const domain = config.apiGateway.CHECKOUT_SERVICE_API;
+  class PaymentsService {
+    static async getPayment(paymentId) {
+      try {
+        const resp = await fetch(`${domain}/v1/payments/${paymentId}`, {
+          "method": "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        return await resp.json();
+      } catch (error) {
+        return error;
+      }
+    }
+    static async updatePaymentStatus(merchantId, splitId, status) {
+      try {
+        const resp = await fetch(`${domain}/v1/payments/merchants/${merchantId}/${splitId}/status`, {
+          "method": "PUT",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            status
+          })
+        });
+        return await resp.json();
+      } catch (error) {
+        return error;
+      }
+    }
+    static async createWebhook(merchantId, splitId, webhook) {
+      try {
+        const resp = await fetch(`${domain}/v1/webhooks/${merchantId}/${splitId}`, {
+          "method": "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(webhook)
+        });
+        return await resp.json();
+      } catch (error) {
+        return error;
+      }
+    }
+    static async updatePayment(merchantId, paymentId, splitId) {
+      try {
+        const resp = await fetch(`${domain}/v1/payments/merchants/${merchantId}/${splitId}`, {
+          "method": "PUT",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            paymentId
+          })
+        });
+        return await resp.json();
+      } catch (error) {
+        return error;
+      }
+    }
+  }
+  function devLog(...args) {
+    {
+      console.log(...args);
+    }
+  }
+  const _GAIT_BUTTON_VERSION_ENV = typeof process !== "undefined" && process.env ? "0.1.0" : void 0;
+  const GAIT_BUTTON_VERSION = _GAIT_BUTTON_VERSION_ENV || "0.1.4";
+  class GaitButton extends HTMLElement {
+    buttonElement = null;
+    hasRendered = false;
+    mutationObserver = null;
+    modalElement = null;
+    modalId;
+    splitPaymentManager = null;
+    attributeGetters;
+    storedSplitPaymentRequest = null;
+    merchantId = null;
+    paymentProvider = "stripe";
+    // Expose version as static and instance properties for easy access
+    static version = GAIT_BUTTON_VERSION;
+    version = GAIT_BUTTON_VERSION;
+    // Observed attributes for reactivity (label, theme, brand-color removed - fixed to Gait / #4147BF)
+    static get observedAttributes() {
+      return ["data-id", "disabled", "size", "style", "items", "price-breakdown", "total-cost", "webhook", "merchant-store-url"];
+    }
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+      this.modalId = `gait-modal-${Math.random().toString(36).substr(2, 9)}`;
+      this.attributeGetters = createAttributeGetters(this);
+    }
+    // Lifecycle: Called when element is connected to DOM
+    connectedCallback() {
+      if (!this.hasRendered && this.shadowRoot) {
+        this.render();
+      }
+      this.setupEventListeners();
+      this.setupMutationObserver();
+      this.setupApiListeners();
+      setTimeout(() => this.processData(), 0);
+    }
+    // Lifecycle: Called when element is disconnected from DOM
+    disconnectedCallback() {
+      if (this.buttonElement) {
+        this.buttonElement.removeEventListener("click", this.handleClick);
+      }
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver = null;
+      }
+      this.closeModal();
+      if (this.splitPaymentManager) {
+        this.splitPaymentManager = null;
+      }
+      this.removeEventListener("gait-split-sent", this.handleSplitSent);
+    }
+    // Lifecycle: Called when observed attributes change
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (oldValue === newValue) {
+        return;
+      }
+      if (!this.isConnected || !this.shadowRoot) {
+        return;
+      }
+      if (name === "style" && this.buttonElement && this.hasRendered) {
+        const sanitizedStyle = (newValue || "").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+        this.buttonElement.setAttribute("style", sanitizedStyle);
+        return;
+      }
+      if (this.hasRendered) {
+        this.render();
+        this.setupEventListeners();
+      }
+      if (name === "data-id" || name.startsWith("data-")) {
+        if (name === "data-id") {
+          this.merchantId = null;
+        }
+        setTimeout(() => this.processData(), 0);
+      }
+    }
+    // Getters for attributes with defaults (using attribute getters)
+    get dataId() {
+      return this.attributeGetters.dataId;
+    }
+    get disabled() {
+      return this.attributeGetters.disabled;
+    }
+    get size() {
+      return this.attributeGetters.size;
+    }
+    get items() {
+      return this.attributeGetters.items;
+    }
+    get priceBreakdown() {
+      return this.attributeGetters.priceBreakdown;
+    }
+    get totalCost() {
+      return this.attributeGetters.totalCost;
+    }
+    get customer() {
+      return this.attributeGetters.customer;
+    }
+    get webhook() {
+      return this.attributeGetters.webhook;
+    }
+    get merchantStoreUrl() {
+      return this.attributeGetters.merchantStoreUrl;
+    }
+    // Get all data-* attributes
+    getDataAttributes() {
+      return getDataAttributes(this);
+    }
+    // Fetch merchantId from API using checkoutId (data-id)
+    async fetchMerchantId() {
+      const checkoutId = this.dataId;
+      if (!checkoutId) {
+        console.warn("[GaitButton] No checkoutId (data-id) provided, cannot fetch merchantId");
+        this.showMerchantIdError();
+        return false;
+      }
+      try {
+        const response = await MerchantService.getMerchant(checkoutId);
+        if (response.success && response.data?.merchantId) {
+          this.merchantId = response.data.merchantId;
+          this.paymentProvider = response.data.paymentProvider;
+          return true;
+        } else {
+          console.error("[GaitButton] Failed to fetch merchantId:", response);
+          this.showMerchantIdError();
+          return false;
+        }
+      } catch (error) {
+        console.error("[GaitButton] Error fetching merchantId:", error);
+        this.showMerchantIdError();
+        return false;
+      }
+    }
+    // Show error message when merchantId cannot be identified
+    showMerchantIdError() {
+      const errorMessage = "Unable to identify your account. Please go to your dashboard and copy your checkout identity.";
+      alert(errorMessage);
+      this.dispatchEvent(new CustomEvent("gait-merchant-id-error", {
+        detail: {
+          message: errorMessage,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
+    // Process data from attributes and do something (like console.log)
+    async processData() {
+      const dataId = this.dataId;
+      const allDataAttrs = this.getDataAttributes();
+      if (dataId && !this.merchantId) {
+        await this.fetchMerchantId();
+      }
+      if (dataId || Object.keys(allDataAttrs).length > 0) {
+        const data = {
+          id: dataId,
+          ...allDataAttrs,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        devLog("[GaitButton] Processing data v0.0.16:", data);
+        this.dispatchEvent(new CustomEvent("gait-data-processed", {
+          detail: data,
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+    // Handle click events
+    handleClick = async (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const clickData = {
+        label: "Gait",
+        dataId: this.dataId,
+        dataAttributes: this.getDataAttributes(),
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      this.dispatchEvent(new CustomEvent("gait-click", {
+        detail: clickData,
+        bubbles: true,
+        composed: true
+      }));
+      this.dispatchEvent(new CustomEvent("click", {
+        detail: clickData,
+        bubbles: true,
+        composed: true
+      }));
+      if (!this.merchantId) {
+        const fetched = await this.fetchMerchantId();
+        if (!fetched || !this.merchantId) {
+          return;
+        }
+      }
+      this.openModal();
+    };
+    // Setup event listeners
+    setupEventListeners() {
+      if (!this.shadowRoot) {
+        return;
+      }
+      if (this.buttonElement) {
+        this.buttonElement.removeEventListener("click", this.handleClick);
+      }
+      this.buttonElement = this.shadowRoot.querySelector("button");
+      if (this.buttonElement) {
+        this.buttonElement.addEventListener("click", this.handleClick);
+      }
+    }
+    // Setup MutationObserver to watch for data-* attribute changes
+    setupMutationObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
+      this.mutationObserver = new MutationObserver((mutations) => {
+        let shouldProcessData = false;
+        for (const mutation of mutations) {
+          if (mutation.type === "attributes") {
+            const attrName = mutation.attributeName;
+            if (attrName && attrName.startsWith("data-") && !GaitButton.observedAttributes.includes(attrName)) {
+              shouldProcessData = true;
+              break;
+            }
+          }
+        }
+        if (shouldProcessData && this.isConnected) {
+          this.processData();
+        }
+      });
+      this.mutationObserver.observe(this, {
+        attributes: true,
+        attributeFilter: void 0
+        // Observe all attributes
+      });
+    }
+    // Setup API event listeners
+    setupApiListeners() {
+      this.addEventListener("gait-split-sent", this.handleSplitSent);
+    }
+    // Handle confirm payment (Pay remaining button)
+    handleConfirmPayment = async () => {
+      console.log("[GaitButton] Pay remaining button clicked");
+      if (!this.storedSplitPaymentRequest) {
+        console.error("[GaitButton] Split payment must be sent first before paying remaining amount");
+        return;
+      }
+      if (!this.merchantId) {
+        const fetched = await this.fetchMerchantId();
+        if (!fetched || !this.merchantId) {
+          return;
+        }
+      }
+      const initiatorObject = {
+        merchantId: this.merchantId,
+        splitId: this.storedSplitPaymentRequest.splitId,
+        paymentId: this.storedSplitPaymentRequest.paymentSplits.find((payment) => payment.initiator)?.paymentId
+      };
+      const paylinkDomain = config.paylink.DOMAIN;
+      const paylink = `${paylinkDomain}/payment/${initiatorObject.paymentId}`;
+      window.open(paylink, "_blank");
+      this.dispatchEvent(new CustomEvent("gait-confirm", {
+        detail: initiatorObject,
+        bubbles: true,
+        composed: true
+      }));
+      this.closeModal();
+    };
+    // Handle split payment sent event and make API call
+    handleSplitSent = async (event) => {
+      const customEvent = event;
+      const splitData = customEvent.detail;
+      if (!this.merchantId) {
+        const fetched = await this.fetchMerchantId();
+        if (!fetched || !this.merchantId) {
+          return;
+        }
+      }
+      const merchantId = this.merchantId;
+      const customer = this.customer;
+      if (!customer || !customer.email) {
+        console.error("[GaitButton] Customer email is required for split payment");
+        return;
+      }
+      const webhook = this.webhook;
+      if (!webhook || !webhook.url || webhook.body == null) {
+        console.error("[GaitButton] Webhook with url and body is required");
+        return;
+      }
+      const alphabet = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+      const generateId = customAlphabet(alphabet, 6);
+      const splitId = generateId();
+      const paymentSplits = [];
+      paymentSplits.push({
+        paymentId: generateId(),
+        email: customer.email,
+        amount: splitData.yourAmount,
+        isPaid: false,
+        datePaid: null,
+        initiator: true
+      });
+      splitData.emailData.forEach((emailData) => {
+        paymentSplits.push({
+          paymentId: generateId(),
+          email: emailData.email,
+          amount: emailData.amount || 0,
+          isPaid: false,
+          datePaid: null,
+          initiator: false
+        });
+      });
+      const id = {
+        merchantId,
+        splitId,
+        paymentSplits,
+        splitMethod: splitData.splitMethod,
+        timestamp: splitData.timestamp,
+        totalCost: splitData.totalCost,
+        items: this.items,
+        priceBreakdown: this.priceBreakdown,
+        brandColor: GAIT_BRAND_COLOR,
+        merchantStoreUrl: this.merchantStoreUrl,
+        subTotal: this.priceBreakdown.find((item) => item.name === "Subtotal")?.price || 0,
+        paymentProvider: this.paymentProvider
+      };
+      console.log("[GaitButton] Split payment request body:", JSON.stringify(id, null, 2));
+      try {
+        const response = await sendSplitPayment(id, 2e3);
+        if (response.success) {
+          const finalSplitId = response.data?.splitId || splitId;
+          this.storedSplitPaymentRequest = {
+            ...id,
+            splitId: finalSplitId
+          };
+          try {
+            const webhookResponse = await PaymentsService.createWebhook(
+              merchantId,
+              finalSplitId,
+              {
+                url: webhook.url,
+                body: webhook.body
+              }
+            );
+            console.log("[GaitButton] Webhook created:", webhookResponse);
+          } catch (webhookError) {
+            console.error("[GaitButton] Failed to create webhook:", webhookError);
+          }
+        }
+        if (this.modalElement) {
+          const confirmButton = this.modalElement.querySelector("[data-gait-modal-confirm]");
+          if (confirmButton) {
+            confirmButton.disabled = false;
+            confirmButton.style.opacity = "1";
+            confirmButton.style.cursor = "pointer";
+          }
+        }
+        this.dispatchEvent(new CustomEvent("gait-split-feedback", {
+          detail: {
+            success: response.success,
+            message: response.message,
+            data: response.success ? this.storedSplitPaymentRequest : response.data,
+            error: response.error,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          bubbles: true,
+          composed: true
+        }));
+        console.log("[GaitButton] Split payment API response:", response);
+      } catch (error) {
+        console.error("[GaitButton] Split payment API error:", error);
+        this.dispatchEvent(new CustomEvent("gait-split-feedback", {
+          detail: {
+            success: false,
+            message: "Failed to send split payment",
+            error: error instanceof Error ? error.message : "Unknown error",
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    // Open modal
+    openModal() {
+      injectModalStyles();
+      this.closeModal();
+      this.modalElement = document.createElement("div");
+      this.modalElement.className = "gait-modal-backdrop";
+      this.modalElement.id = this.modalId;
+      if (this.modalElement) {
+        this.modalElement.style.setProperty("--gait-modal-brand-color", GAIT_BRAND_COLOR);
+        this.modalElement.style.setProperty("--gait-modal-button-bg", GAIT_BRAND_COLOR);
+        this.modalElement.style.setProperty("--gait-modal-button-bg-hover", darkenColor(GAIT_BRAND_COLOR, 0.15));
+        this.modalElement.style.setProperty("--gait-modal-button-color", isColorDark(GAIT_BRAND_COLOR) ? "#ffffff" : "#000000");
+      }
+      this.modalElement.innerHTML = generateModalTemplate(
+        this.items,
+        this.priceBreakdown,
+        this.totalCost
+      );
+      const closeButton = this.modalElement.querySelector("[data-gait-modal-close]");
+      if (closeButton) {
+        closeButton.addEventListener("click", this.closeModal);
+      }
+      const confirmButton = this.modalElement.querySelector("[data-gait-modal-confirm]");
+      if (confirmButton) {
+        confirmButton.disabled = true;
+        confirmButton.style.opacity = "0.5";
+        confirmButton.style.cursor = "not-allowed";
+        confirmButton.addEventListener("click", this.handleConfirmPayment);
+      }
+      this.splitPaymentManager = new SplitPaymentManager(
+        this.modalElement,
+        this.totalCost,
+        (event) => this.dispatchEvent(event)
+      );
+      this.modalElement._splitPaymentManager = this.splitPaymentManager;
+      this.modalElement.addEventListener("click", (e) => {
+        if (e.target === this.modalElement) {
+          this.closeModal();
+        }
+      });
+      const handleEscape = (e) => {
+        if (e.key === "Escape" && this.modalElement) {
+          this.closeModal();
+          document.removeEventListener("keydown", handleEscape);
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      document.body.appendChild(this.modalElement);
+      requestAnimationFrame(() => {
+        if (this.modalElement) {
+          this.modalElement.classList.add("gait-modal-open");
+        }
+      });
+    }
+    // Close modal
+    closeModal = () => {
+      if (this.modalElement) {
+        if (this.splitPaymentManager) {
+          this.splitPaymentManager.cleanup();
+        }
+        this.modalElement.classList.remove("gait-modal-open");
+        setTimeout(() => {
+          if (this.modalElement && this.modalElement.parentNode) {
+            this.modalElement.parentNode.removeChild(this.modalElement);
+          }
+          this.modalElement = null;
+          this.splitPaymentManager = null;
+        }, 250);
+      }
+    };
+    // Render the component
+    render() {
+      const shadow = this.shadowRoot;
+      if (!shadow) {
+        return;
+      }
+      const wasFirstRender = !this.hasRendered;
+      const styles = generateButtonStyles(
+        this.size,
+        darkenColor,
+        isColorDark
+      );
+      const hostStyle = this.getAttribute("style") || "";
+      const sanitizedStyle = hostStyle.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+      shadow.innerHTML = `
+      ${styles}
+      ${generateButtonTemplate(this.disabled, sanitizedStyle)}
+    `;
+      this.hasRendered = true;
+      this.setupEventListeners();
+      if (wasFirstRender) {
+        const allAttributes = getAllAttributes(this);
+        console.log("[GaitButton] rendered", allAttributes);
+        this.dispatchEvent(new CustomEvent("gait-loaded", {
+          detail: {
+            attributes: allAttributes,
+            dataId: this.dataId,
+            dataAttributes: this.getDataAttributes(),
+            label: "Gait",
+            size: this.size,
+            disabled: this.disabled,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  }
+  if (!customElements.get("gait-button")) {
+    customElements.define("gait-button", GaitButton);
+  }
+  if (!customElements.get("gait-button")) {
+    customElements.define("gait-button", GaitButton);
+  }
+  if (typeof window !== "undefined") {
+    window.GaitButton = GaitButton;
+    window.GaitButtonVersion = GAIT_BUTTON_VERSION;
+    console.log(`[GaitButton] Version: ${GAIT_BUTTON_VERSION}`);
+  }
+  exports.GAIT_BUTTON_VERSION = GAIT_BUTTON_VERSION;
+  exports.GaitButton = GaitButton;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+})(this.GaitButton = this.GaitButton || {});