@gait-financial/react 0.1.12 → 0.1.15

package/wc/button.js

@@ -1,128 +1,25 @@
-(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 `
+(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`
     <style>
       :host {
         display: inline-block;
-        --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};
+        --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};
       }
 
       button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: ${spacing.sm};
+        gap: ${E.sm};
         
-        font-family: ${typography.fontFamily.primary};
-        font-weight: ${typography.fontWeight.medium};
-        line-height: ${typography.lineHeight.normal};
+        font-family: ${y.fontFamily.primary};
+        font-weight: ${y.fontWeight.medium};
+        line-height: ${y.lineHeight.normal};
         font-size: var(--gait-button-font-size);
         
         padding: var(--gait-button-padding);
@@ -132,10 +29,10 @@
         color: var(--gait-button-color);
         
         border: none;
-        border-radius: ${borderRadius.md};
+        border-radius: ${P.md};
         cursor: pointer;
         
-        transition: all ${transitions.normal};
+        transition: all ${f.normal};
         
         /* Remove default button styles */
         outline: none;
@@ -184,15 +81,7 @@
         width: 100%;
       }
     </style>
-  `;
-  }
-  function injectModalStyles() {
-    if (document.getElementById("gait-modal-styles")) {
-      return;
-    }
-    const style = document.createElement("style");
-    style.id = "gait-modal-styles";
-    style.textContent = `
+  `}function V(){if(document.getElementById("gait-modal-styles"))return;const r=document.createElement("style");r.id="gait-modal-styles",r.textContent=`
     /* Modal Backdrop - The overlay behind the modal */
     .gait-modal-backdrop {
       position: fixed;
@@ -204,9 +93,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: ${zIndex.modalBackdrop};
+      z-index: ${O.modalBackdrop};
       opacity: 0;
-      transition: opacity ${transitions.normal};
+      transition: opacity ${f.normal};
       overflow: hidden;
     }
 
@@ -507,7 +396,7 @@
       border: 1px solid #e5e7eb;
       border-radius: 8px;
       cursor: pointer;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
       color: #6b7280;
     }
 
@@ -518,9 +407,9 @@
     }
 
     .gait-modal-split-option.selected {
-      background: ${GAIT_SECONDARY_COLOR};
-      border: 1px solid ${GAIT_BRAND_COLOR};
-      color: ${GAIT_BRAND_COLOR};
+      background: ${C};
+      border: 1px solid ${g};
+      color: ${g};
     }
 
     .gait-modal-email-inputs {
@@ -539,11 +428,11 @@
       background: #fff;
       color: #111827;
       outline: none;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
     }
 
     .gait-modal-email-input:focus {
-      border-color: ${colors.primary.main};
+      border-color: ${h.primary.main};
       box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
     }
 
@@ -606,7 +495,7 @@
 
     .gait-modal-email-item-amount {
       font-weight: 500;
-      color: ${colors.primary.main};
+      color: ${h.primary.main};
       font-size: 14px;
     }
 
@@ -625,12 +514,12 @@
       border: none;
       cursor: pointer;
       padding: 2px 4px;
-      transition: color ${transitions.normal};
+      transition: color ${f.normal};
     }
 
     .gait-modal-email-item-edit:hover,
     .gait-modal-email-item-remove:hover {
-      color: ${colors.primary.main};
+      color: ${h.primary.main};
     }
 
     /* For "By amount" mode - two input fields side by side */
@@ -653,18 +542,18 @@
       padding: 8px 16px;
       font-size: 13px;
       font-weight: 500;
-      border: 1px solid ${colors.primary.main};
+      border: 1px solid ${h.primary.main};
       border-radius: 6px;
-      background: ${colors.primary.main};
-      color: ${colors.primary.contrastText};
+      background: ${h.primary.main};
+      color: ${h.primary.contrastText};
       cursor: pointer;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
       white-space: nowrap;
     }
 
     .gait-modal-done-button:hover {
-      background: ${colors.primary.dark};
-      border-color: ${colors.primary.dark};
+      background: ${h.primary.dark};
+      border-color: ${h.primary.dark};
     }
 
     .gait-modal-email-amount-input {
@@ -680,7 +569,7 @@
     }
 
     .gait-modal-email-amount-input:focus {
-      border-color: ${colors.primary.main};
+      border-color: ${h.primary.main};
       box-shadow: 0 0 0 2px rgba(47, 44, 37, 0.1);
     }
 
@@ -692,11 +581,11 @@
       border: none;
       cursor: pointer;
       text-align: left;
-      transition: color ${transitions.normal};
+      transition: color ${f.normal};
     }
 
     .gait-modal-add-email-button:hover {
-      color: ${colors.primary.main};
+      color: ${h.primary.main};
       text-decoration: underline;
     }
 
@@ -716,7 +605,7 @@
     .gait-modal-split-amount {
       font-size: 18px;
       font-weight: 600;
-      color: ${GAIT_BRAND_COLOR};
+      color: ${g};
     }
 
     .gait-modal-send-split-button {
@@ -725,16 +614,16 @@
       font-size: 14px;
       font-weight: 500;
       border-radius: 8px;
-      border: 1px solid ${GAIT_BRAND_COLOR};
-      background: ${GAIT_SECONDARY_COLOR};
-      color: ${GAIT_BRAND_COLOR};
+      border: 1px solid ${g};
+      background: ${C};
+      color: ${g};
       cursor: pointer;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
       margin-top: 16px;
     }
 
     .gait-modal-send-split-button:hover {
-      background: ${GAIT_SECONDARY_COLOR};
+      background: ${C};
       filter: brightness(0.98);
     }
 
@@ -754,10 +643,10 @@
       font-weight: 600;
       border-radius: 10px;
       border: none;
-      background: var(--gait-modal-button-bg, ${colors.primary.main});
-      color: var(--gait-modal-button-color, ${colors.primary.contrastText});
+      background: var(--gait-modal-button-bg, ${h.primary.main});
+      color: var(--gait-modal-button-color, ${h.primary.contrastText});
       cursor: pointer;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
       margin-top: 12px;
       display: flex;
       flex-direction: row;
@@ -768,7 +657,7 @@
     }
 
     .gait-modal-confirm-button-with-amount:hover {
-      background-color: var(--gait-modal-button-bg-hover, ${colors.primary.dark});
+      background-color: var(--gait-modal-button-bg-hover, ${h.primary.dark});
     }
 
     .gait-modal-confirm-button-with-amount:active {
@@ -815,7 +704,7 @@
       background: var(--gait-modal-button-bg, #e91e63);
       color: var(--gait-modal-button-color, #fff);
       cursor: pointer;
-      transition: all ${transitions.normal};
+      transition: all ${f.normal};
     }
 
     .gait-modal-confirm-button:hover {
@@ -828,29 +717,29 @@
 
     /* Modal Footer - The button section */
     .gait-modal-footer {
-      padding: ${spacing.lg};
+      padding: ${E.lg};
       border-top: 1px solid #e5e7eb;
       display: flex;
       justify-content: flex-end;
-      gap: ${spacing.md};
+      gap: ${E.md};
     }
 
     /* Modal Button - The close button */
     .gait-modal-button {
-      padding: ${spacing.sm} ${spacing.lg};
-      font-family: ${typography.fontFamily.primary};
-      font-size: ${typography.fontSize.md};
-      font-weight: ${typography.fontWeight.medium};
+      padding: ${E.sm} ${E.lg};
+      font-family: ${y.fontFamily.primary};
+      font-size: ${y.fontSize.md};
+      font-weight: ${y.fontWeight.medium};
       border: none;
-      border-radius: ${borderRadius.md};
+      border-radius: ${P.md};
       cursor: pointer;
-      transition: all ${transitions.normal};
-      background-color: ${colors.primary.main};
-      color: ${colors.primary.contrastText};
+      transition: all ${f.normal};
+      background-color: ${h.primary.main};
+      color: ${h.primary.contrastText};
     }
 
     .gait-modal-button:hover {
-      background-color: ${colors.primary.dark};
+      background-color: ${h.primary.dark};
     }
 
     .gait-modal-button:active {
@@ -945,73 +834,55 @@
       background-color: #ef4444;
       color: #fff;
     }
-  `;
-    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 `
+  `,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`
     <button 
       type="button" 
-      ${disabled ? "disabled" : ""}
-      style="${customStyle}"
+      ${r?"disabled":""}
+      style="${t}"
     >
-      <span class="gait-button-icon">${GAIT_LOGO_ICON}</span>
+      <span class="gait-button-icon">${j}</span>
       <span class="gait-button-label">Gait</span>
     </button>
-  `;
-  }
-  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) => `
+  `}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=>`
     <div class="gait-modal-item">
       <img
-        src="${item.image || ""}"
-        alt="${item.name || "Product"}"
+        src="${t.image||""}"
+        alt="${t.name||"Product"}"
         class="gait-modal-item-image"
       />
       <div class="gait-modal-item-meta">
         <h3 class="gait-modal-item-title">
-          ${item.name || ""}
+          ${t.name||""}
         </h3>
         <div class="gait-modal-item-quantity">
-          Qty: ${item.quantity || 0}
-          <span class="gait-modal-item-price">${formatCurrency(item.price || 0)}</span>
+          Qty: ${t.quantity||0}
+          <span class="gait-modal-item-price">${A(t.price||0)}</span>
         </div>
       </div>
     </div>
-  `).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 `
+  `).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`
       <div class="gait-modal-price-item">
-        <span>${item.name || ""}</span>
-        <span>${formatCurrency(price)}</span>
+        <span>${t.name||""}</span>
+        <span>${A(e)}</span>
       </div>
-    `;
-    }).join("");
-  }
-  function generateModalTemplate(items, priceBreakdown, totalCost) {
-    return `
+    `}).join("")}function K(r,t,e){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>
 
@@ -1019,20 +890,20 @@
         <!-- LEFT -->
         <div class="gait-modal-left-panel">
           <div class="gait-modal-items-container">
-            ${renderItems(items)}
+            ${J(r)}
           </div>
 
           <div class="gait-modal-price-section">
             <h4 class="gait-modal-price-title">Price details</h4>
 
-            ${renderPriceBreakdown(priceBreakdown)}
+            ${Y(t)}
 
-            ${totalCost > 0 ? `
+            ${e>0?`
             <div class="gait-modal-price-total">
               <span>Total</span>
-              <span>${formatCurrency(totalCost)}</span>
+              <span>${A(e)}</span>
             </div>
-            ` : ""}
+            `:""}
           </div>
         </div>
 
@@ -1066,1560 +937,22 @@
         </div>
       </div>
     </div>
-  `;
-  }
-  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>
+  `}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>
       <div class="gait-modal-email-item-right">
         <div class="gait-modal-email-item-amount-container">
-          <span class="gait-modal-email-item-amount">R ${displayAmount.toFixed(2)}</span>
-          ${checkmark}
+          <span class="gait-modal-email-item-amount">R ${n.toFixed(2)}</span>
+          ${o}
         </div>
         <div class="gait-modal-email-item-actions">
-          <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>
+          <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>
         </div>
       </div>
-    `;
-      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 || {});
+    `;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.1.4";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||{});