recur-tw 0.10.4 → 0.10.6

package/dist/index.cjs

@@ -476,6 +476,7 @@ var init_skeleton_loader = __esm({
       <style>
         :host {
           display: block;
+          width: 100%;
           container-type: inline-size; /* Enable container queries */
         }
 
@@ -615,7 +616,7 @@ var init_skeleton_loader = __esm({
 var payment_form_skeleton_default;
 var init_payment_form_skeleton = __esm({
   "src/components/styles/payment-form-skeleton.css"() {
-    payment_form_skeleton_default = "/**\n * Payment Form Skeleton - Shadow DOM Styles\n * Loading skeleton that matches the structure of RecurPaymentForm\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Header */\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n/* Sections */\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n/* Skeleton base styles */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0%,\n    #e8e8e8 50%,\n    #f0f0f0 100%\n  );\n  background-size: 200% 100%;\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Order Summary */\n.order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.order-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.order-row:last-child {\n  margin-bottom: 0;\n}\n\n.order-row--total {\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.order-label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.skeleton-order-value {\n  height: 20px;\n  width: 80px;\n}\n\n.skeleton-order-total {\n  height: 26px;\n  width: 100px;\n}\n\n/* Coupon Skeleton */\n.coupon-section {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.skeleton-coupon-trigger {\n  height: 20px;\n  width: 88px;\n}\n\n/* Customer Info Display */\n.customer-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.info-row {\n  margin-bottom: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.skeleton-info-value {\n  height: 20px;\n  width: 120px;\n}\n\n/* Card Fields */\n.card-field {\n  margin-bottom: 16px;\n}\n\n.card-field:last-child {\n  margin-bottom: 0;\n}\n\n.skeleton-input {\n  height: 36px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n}\n\n/* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */\n.skeleton-button {\n  height: 52px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n/* Security Note */\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+    payment_form_skeleton_default = "/**\n * Payment Form Skeleton - Shadow DOM Styles\n * Loading skeleton that matches the structure of RecurPaymentForm\n */\n\n:host {\n  display: block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Header */\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n/* Sections */\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n/* Skeleton base styles */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0%,\n    #e8e8e8 50%,\n    #f0f0f0 100%\n  );\n  background-size: 200% 100%;\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Order Summary */\n.order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.order-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.order-row:last-child {\n  margin-bottom: 0;\n}\n\n.order-row--total {\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.order-label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.skeleton-order-value {\n  height: 20px;\n  width: 80px;\n}\n\n.skeleton-order-total {\n  height: 26px;\n  width: 100px;\n}\n\n/* Coupon Skeleton */\n.coupon-section {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.skeleton-coupon-trigger {\n  height: 20px;\n  width: 88px;\n}\n\n/* Customer Info Display */\n.customer-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.info-row {\n  margin-bottom: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.skeleton-info-value {\n  height: 20px;\n  width: 120px;\n}\n\n/* Card Fields */\n.card-field {\n  margin-bottom: 16px;\n}\n\n.card-field:last-child {\n  margin-bottom: 0;\n}\n\n.skeleton-input {\n  height: 36px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n}\n\n/* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */\n.skeleton-button {\n  height: 52px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n/* Security Note */\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
   }
 });
 
@@ -1027,7 +1028,7 @@ var init_toast = __esm({
 var payment_form_shadow_default;
 var init_payment_form_shadow = __esm({
   "src/components/styles/payment-form-shadow.css"() {
-    payment_form_shadow_default = "/**\n * Payment Form - Shadow DOM Styles\n * These styles are encapsulated within the Shadow DOM\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  touch-action: manipulation;\n  container-type: inline-size;\n}\n\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n::slotted(*) {\n  display: block;\n}\n\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+    payment_form_shadow_default = "/**\n * Payment Form - Shadow DOM Styles\n * These styles are encapsulated within the Shadow DOM\n */\n\n:host {\n  display: block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  touch-action: manipulation;\n  container-type: inline-size;\n}\n\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n::slotted(*) {\n  display: block;\n}\n\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
   }
 });
 
@@ -2652,7 +2653,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.10.3"};
+  version: "0.10.5"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = React.createContext(null);

package/dist/index.js

@@ -470,6 +470,7 @@ var init_skeleton_loader = __esm({
       <style>
         :host {
           display: block;
+          width: 100%;
           container-type: inline-size; /* Enable container queries */
         }
 
@@ -609,7 +610,7 @@ var init_skeleton_loader = __esm({
 var payment_form_skeleton_default;
 var init_payment_form_skeleton = __esm({
   "src/components/styles/payment-form-skeleton.css"() {
-    payment_form_skeleton_default = "/**\n * Payment Form Skeleton - Shadow DOM Styles\n * Loading skeleton that matches the structure of RecurPaymentForm\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Header */\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n/* Sections */\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n/* Skeleton base styles */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0%,\n    #e8e8e8 50%,\n    #f0f0f0 100%\n  );\n  background-size: 200% 100%;\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Order Summary */\n.order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.order-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.order-row:last-child {\n  margin-bottom: 0;\n}\n\n.order-row--total {\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.order-label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.skeleton-order-value {\n  height: 20px;\n  width: 80px;\n}\n\n.skeleton-order-total {\n  height: 26px;\n  width: 100px;\n}\n\n/* Coupon Skeleton */\n.coupon-section {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.skeleton-coupon-trigger {\n  height: 20px;\n  width: 88px;\n}\n\n/* Customer Info Display */\n.customer-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.info-row {\n  margin-bottom: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.skeleton-info-value {\n  height: 20px;\n  width: 120px;\n}\n\n/* Card Fields */\n.card-field {\n  margin-bottom: 16px;\n}\n\n.card-field:last-child {\n  margin-bottom: 0;\n}\n\n.skeleton-input {\n  height: 36px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n}\n\n/* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */\n.skeleton-button {\n  height: 52px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n/* Security Note */\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+    payment_form_skeleton_default = "/**\n * Payment Form Skeleton - Shadow DOM Styles\n * Loading skeleton that matches the structure of RecurPaymentForm\n */\n\n:host {\n  display: block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Header */\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n/* Sections */\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n.label {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2d3748;\n  margin-bottom: 6px;\n}\n\n/* Skeleton base styles */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0%,\n    #e8e8e8 50%,\n    #f0f0f0 100%\n  );\n  background-size: 200% 100%;\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n  border-radius: 4px;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Order Summary */\n.order-summary {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.order-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.order-row:last-child {\n  margin-bottom: 0;\n}\n\n.order-row--total {\n  padding-top: 12px;\n  border-top: 1px solid #e2e8f0;\n}\n\n.order-label {\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.skeleton-order-value {\n  height: 20px;\n  width: 80px;\n}\n\n.skeleton-order-total {\n  height: 26px;\n  width: 100px;\n}\n\n/* Coupon Skeleton */\n.coupon-section {\n  padding: 12px 0;\n  border-top: 1px solid #e2e8f0;\n  margin-top: 12px;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n}\n\n.skeleton-coupon-trigger {\n  height: 20px;\n  width: 88px;\n}\n\n/* Customer Info Display */\n.customer-info-display {\n  background: #f7fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 6px;\n  padding: 12px;\n  margin-bottom: 8px;\n}\n\n.info-row {\n  margin-bottom: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-label {\n  display: block;\n  font-size: 12px;\n  line-height: 16px;\n  color: #718096;\n  margin-bottom: 2px;\n}\n\n.skeleton-info-value {\n  height: 20px;\n  width: 120px;\n}\n\n/* Card Fields */\n.card-field {\n  margin-bottom: 16px;\n}\n\n.card-field:last-child {\n  margin-bottom: 0;\n}\n\n.skeleton-input {\n  height: 36px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.card-row {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  column-gap: 16px;\n}\n\n/* Submit Button - matches .recur-submit-button: padding 14px*2 + font 16px * line-height ~1.5 */\n.skeleton-button {\n  height: 52px;\n  width: 100%;\n  border-radius: 6px;\n}\n\n/* Security Note */\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
   }
 });
 
@@ -1021,7 +1022,7 @@ var init_toast = __esm({
 var payment_form_shadow_default;
 var init_payment_form_shadow = __esm({
   "src/components/styles/payment-form-shadow.css"() {
-    payment_form_shadow_default = "/**\n * Payment Form - Shadow DOM Styles\n * These styles are encapsulated within the Shadow DOM\n */\n\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  touch-action: manipulation;\n  container-type: inline-size;\n}\n\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n::slotted(*) {\n  display: block;\n}\n\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
+    payment_form_shadow_default = "/**\n * Payment Form - Shadow DOM Styles\n * These styles are encapsulated within the Shadow DOM\n */\n\n:host {\n  display: block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.payment-form-wrapper {\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 24px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  touch-action: manipulation;\n  container-type: inline-size;\n}\n\n.form-header {\n  margin-bottom: 24px;\n}\n\n.form-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a202c;\n  margin: 0 0 4px 0;\n}\n\n.form-subtitle {\n  font-size: 14px;\n  color: #718096;\n  margin: 0;\n}\n\n.form-section {\n  margin-bottom: 24px;\n}\n\n.section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d3748;\n  margin: 0 0 12px 0;\n}\n\n::slotted(*) {\n  display: block;\n}\n\n.security-note {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  background: #f7fafc;\n  border-radius: 6px;\n  margin-top: 16px;\n}\n\n.security-icon {\n  color: #48bb78;\n}\n\n.security-text {\n  font-size: 13px;\n  color: #4a5568;\n  margin: 0;\n}\n";
   }
 });
 
@@ -2646,7 +2647,7 @@ function toCamelCase(obj) {
 
 // package.json
 var package_default = {
-  version: "0.10.3"};
+  version: "0.10.5"};
 var SDK_VERSION = package_default.version;
 var SDK_TYPE = "react";
 var RecurContext = createContext(null);

package/dist/recur.umd.js

@@ -255,6 +255,7 @@
       <style>
         :host {
           display: block;
+          width: 100%;
           container-type: inline-size; /* Enable container queries */
         }
 
@@ -390,6 +391,7 @@
 
 :host {
   display: block;
+  width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
@@ -825,6 +827,7 @@
 
 :host {
   display: block;
+  width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
@@ -1944,7 +1947,7 @@
         <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
         <circle cx="12" cy="7" r="4"/>
       </svg>
-    `}setupEventListeners(){let t=this.shadowRoot?.querySelector("button");t&&t.addEventListener("click",this.handleClick)}redirectToPortal(t){let r=this.getAttribute("target");this.dispatchEvent(new CustomEvent("portal-redirect",{detail:{url:t},bubbles:!0,composed:!0})),r==="_blank"?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}async fetchAndRedirect(t){let r=this.getAttribute("customer-id"),o=this.getAttribute("return-url");this._isLoading=!0,this.render(),this.setupEventListeners();try{let i={};r&&(i.customerId=r),o&&(i.returnUrl=o);let s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!s.ok){let d=await s.json().catch(()=>({}));throw new Error(d.error?.message||d.message||`HTTP ${s.status}: Failed to create portal session`)}let a=await s.json(),c=a.url||a.portalUrl;if(!c)throw new Error("Portal URL not found in response");this._isLoading=!1,this.render(),this.setupEventListeners(),this.redirectToPortal(c)}catch(i){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(i.message||"Failed to create portal session")}}dispatchError(t){console.error("[recur-portal]",t),this.dispatchEvent(new CustomEvent("portal-error",{detail:{message:t},bubbles:!0,composed:!0}))}};typeof window<"u"&&!customElements.get("recur-portal")&&customElements.define("recur-portal",ue)});var zt={};C(zt,{RecurCheckout:()=>Z,RecurElements:()=>N,createElements:()=>Se,default:()=>Nt,init:()=>mt});async function Dt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(De(),Re)),Promise.resolve().then(()=>(Me(),Pe)),Promise.resolve().then(()=>(Ue(),Le)),Promise.resolve().then(()=>(Be(),He)),Promise.resolve().then(()=>(Ze(),Ge)),Promise.resolve().then(()=>(et(),Qe)),Promise.resolve().then(()=>(nt(),st)),Promise.resolve().then(()=>(ct(),at)),Promise.resolve().then(()=>(dt(),lt))]);let e=["recur-loading-spinner","recur-success-message","recur-error-display","recur-skeleton-loader","recur-payment-form-skeleton","recur-toast","recur-toast-container","recur-payment-form","recur-checkout","recur-portal"].filter(t=>!customElements.get(t));e.length>0&&console.warn("[Recur SDK] The following components are not registered:",e)}typeof window<"u"&&Dt();function Pt(n){return n.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(n){if(n==null)return n;if(Array.isArray(n))return n.map(e=>w(e));if(n instanceof Date)return n;if(typeof n=="object"){let e={};for(let[t,r]of Object.entries(n)){let o=Pt(t);e[o]=w(r)}return e}return n}var ut={name:"recur-tw",version:"0.10.3",description:"React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",type:"module",private:!1,author:"Recur",license:"Elastic-2.0",keywords:["react","vanilla-js","subscription","checkout","payment","payuni","recurring-billing","taiwan","\u7E41\u9AD4\u4E2D\u6587","sdk","embedded-checkout"],homepage:"https://recur.tw/",bugs:{email:"support@recur.tw"},scripts:{build:"tsup",dev:"tsup --watch",lint:"eslint .","lint:fix":"eslint . --fix","type-check":"tsc --noEmit",examples:"npx http-server . -p 8080 -o /examples/"},main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",exports:{".":{types:"./dist/index.d.ts",import:"./dist/index.js",require:"./dist/index.cjs"},"./server":{types:"./dist/server.d.ts",import:"./dist/server.js",require:"./dist/server.cjs"},"./vanilla":"./dist/recur.umd.js","./checkout":"./dist/checkout.js","./widget":"./dist/widget.js","./package.json":"./package.json"},unpkg:"./dist/recur.umd.js",jsdelivr:"./dist/recur.umd.js",files:["dist","README.md","AGENTS.md","LICENSE"],sideEffects:["src/components/**/*.ts","src/components/**/*.js"],peerDependencies:{react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{react:{optional:!0},"react-dom":{optional:!0}},devDependencies:{"@eslint/js":"^9.39.1","@types/node":"^20.19.9","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@workspace/typescript-config":"workspace:*",autoprefixer:"^10.4.22",eslint:"^9","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1",postcss:"^8.5.6",react:"^19.2.1","react-dom":"^19.2.1",tailwindcss:"^4.1.11",tsup:"^8.3.5",typescript:"^5.9.2","typescript-eslint":"^8.47.0"},dependencies:{"lit-html":"^3.3.1"}};var Lt=ut.version,Ut="vanilla",pe=class{constructor(e){l(this,"config");if(!e.publishableKey)throw new Error("publishableKey is required");this.config={baseUrl:"https://api.recur.tw",...e}}getHeaders(){return{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey,"X-Recur-SDK-Type":Ut,"X-Recur-SDK-Version":Lt,"X-Recur-Source":typeof window<"u"?window.location.origin:"server"}}async createSubscription(e){let{customerName:t,customerEmail:r}=e,o=e.productId||e.planId,i=e.productSlug;if(!o&&!i)throw new Error("Either productId or productSlug is required");let s={customerName:t,customerEmail:r};o&&(s.productId=o),i&&(s.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(s)});if(!a.ok){let d=await a.json().catch(()=>({}));throw{code:d.error||"CHECKOUT_FAILED",message:d.message||"Failed to initiate checkout",details:d}}let c=await a.json();return w(c)}async fetchProducts(e){let t=new URL(`${this.config.baseUrl}/v1/products`);e?.type&&t.searchParams.set("type",e.type);let r=await fetch(t.toString(),{method:"GET",headers:this.getHeaders()});if(!r.ok){let i=await r.json().catch(()=>({}));throw{code:i.error||"FETCH_PRODUCTS_FAILED",message:i.message||"Failed to fetch products",details:i}}let o=await r.json();return w(o)}async fetchPlans(){return{plans:(await this.fetchProducts({type:"SUBSCRIPTION"})).products}}getConfig(){return{...this.config}}};var he=class{constructor(e,t){l(this,"config");l(this,"options");l(this,"container");l(this,"checkoutId",null);l(this,"sdkToken",null);l(this,"sdkTimestamp",null);l(this,"creditToken",null);l(this,"sdkEnv","S");l(this,"payuniSDK",null);l(this,"isFormValid",!1);if(this.config=e,this.options=t,typeof t.container=="string"){let r=document.querySelector(t.container);if(!r)throw new Error(`Container not found: ${t.container}`);this.container=r}else this.container=t.container}async render(){try{await this.initCheckout(),this.renderHTML(),await this.loadPayUniSDK(),await this.initPayUniSDK(),this.setupFormSubmit()}catch(e){this.handleError(e)}}getBaseUrl(){if(this.config.baseUrl)return this.config.baseUrl;if(typeof window<"u"){let e=window.location.hostname;if(e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"}async initCheckout(){let e=this.getBaseUrl(),t=await fetch(`${e}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey},body:JSON.stringify({productId:this.options.productId||this.options.planId,customerEmail:this.options.customerEmail,customerName:this.options.customerName})});if(!t.ok){let i=await t.json().catch(()=>({}));throw new Error(i.error||"Failed to initialize checkout")}let r=await t.json(),o=w(r);this.checkoutId=o.checkout.id,this.sdkToken=o.sdkToken,this.sdkTimestamp=o.sdkTimestamp||null,this.creditToken=o.creditToken||null,this.sdkEnv=this.config.publishableKey.startsWith("pk_test_")?"S":"P"}renderHTML(){this.container.innerHTML=`
+    `}setupEventListeners(){let t=this.shadowRoot?.querySelector("button");t&&t.addEventListener("click",this.handleClick)}redirectToPortal(t){let r=this.getAttribute("target");this.dispatchEvent(new CustomEvent("portal-redirect",{detail:{url:t},bubbles:!0,composed:!0})),r==="_blank"?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}async fetchAndRedirect(t){let r=this.getAttribute("customer-id"),o=this.getAttribute("return-url");this._isLoading=!0,this.render(),this.setupEventListeners();try{let i={};r&&(i.customerId=r),o&&(i.returnUrl=o);let s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!s.ok){let d=await s.json().catch(()=>({}));throw new Error(d.error?.message||d.message||`HTTP ${s.status}: Failed to create portal session`)}let a=await s.json(),c=a.url||a.portalUrl;if(!c)throw new Error("Portal URL not found in response");this._isLoading=!1,this.render(),this.setupEventListeners(),this.redirectToPortal(c)}catch(i){this._isLoading=!1,this.render(),this.setupEventListeners(),this.dispatchError(i.message||"Failed to create portal session")}}dispatchError(t){console.error("[recur-portal]",t),this.dispatchEvent(new CustomEvent("portal-error",{detail:{message:t},bubbles:!0,composed:!0}))}};typeof window<"u"&&!customElements.get("recur-portal")&&customElements.define("recur-portal",ue)});var zt={};C(zt,{RecurCheckout:()=>Z,RecurElements:()=>N,createElements:()=>Se,default:()=>Nt,init:()=>mt});async function Dt(){if(typeof window>"u"){console.warn("[Recur SDK] Cannot register Web Components: window is not defined");return}await Promise.all([Promise.resolve().then(()=>(De(),Re)),Promise.resolve().then(()=>(Me(),Pe)),Promise.resolve().then(()=>(Ue(),Le)),Promise.resolve().then(()=>(Be(),He)),Promise.resolve().then(()=>(Ze(),Ge)),Promise.resolve().then(()=>(et(),Qe)),Promise.resolve().then(()=>(nt(),st)),Promise.resolve().then(()=>(ct(),at)),Promise.resolve().then(()=>(dt(),lt))]);let e=["recur-loading-spinner","recur-success-message","recur-error-display","recur-skeleton-loader","recur-payment-form-skeleton","recur-toast","recur-toast-container","recur-payment-form","recur-checkout","recur-portal"].filter(t=>!customElements.get(t));e.length>0&&console.warn("[Recur SDK] The following components are not registered:",e)}typeof window<"u"&&Dt();function Pt(n){return n.replace(/_([a-z])/g,(e,t)=>t.toUpperCase())}function w(n){if(n==null)return n;if(Array.isArray(n))return n.map(e=>w(e));if(n instanceof Date)return n;if(typeof n=="object"){let e={};for(let[t,r]of Object.entries(n)){let o=Pt(t);e[o]=w(r)}return e}return n}var ut={name:"recur-tw",version:"0.10.5",description:"React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",type:"module",private:!1,author:"Recur",license:"Elastic-2.0",keywords:["react","vanilla-js","subscription","checkout","payment","payuni","recurring-billing","taiwan","\u7E41\u9AD4\u4E2D\u6587","sdk","embedded-checkout"],homepage:"https://recur.tw/",bugs:{email:"support@recur.tw"},scripts:{build:"tsup",dev:"tsup --watch",lint:"eslint .","lint:fix":"eslint . --fix","type-check":"tsc --noEmit",examples:"npx http-server . -p 8080 -o /examples/"},main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",exports:{".":{types:"./dist/index.d.ts",import:"./dist/index.js",require:"./dist/index.cjs"},"./server":{types:"./dist/server.d.ts",import:"./dist/server.js",require:"./dist/server.cjs"},"./vanilla":"./dist/recur.umd.js","./checkout":"./dist/checkout.js","./widget":"./dist/widget.js","./package.json":"./package.json"},unpkg:"./dist/recur.umd.js",jsdelivr:"./dist/recur.umd.js",files:["dist","README.md","AGENTS.md","LICENSE"],sideEffects:["src/components/**/*.ts","src/components/**/*.js"],peerDependencies:{react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{react:{optional:!0},"react-dom":{optional:!0}},devDependencies:{"@eslint/js":"^9.39.1","@types/node":"^20.19.9","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@workspace/typescript-config":"workspace:*",autoprefixer:"^10.4.22",eslint:"^9","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1",postcss:"^8.5.6",react:"^19.2.1","react-dom":"^19.2.1",tailwindcss:"^4.1.11",tsup:"^8.3.5",typescript:"^5.9.2","typescript-eslint":"^8.47.0"},dependencies:{"lit-html":"^3.3.1"}};var Lt=ut.version,Ut="vanilla",pe=class{constructor(e){l(this,"config");if(!e.publishableKey)throw new Error("publishableKey is required");this.config={baseUrl:"https://api.recur.tw",...e}}getHeaders(){return{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey,"X-Recur-SDK-Type":Ut,"X-Recur-SDK-Version":Lt,"X-Recur-Source":typeof window<"u"?window.location.origin:"server"}}async createSubscription(e){let{customerName:t,customerEmail:r}=e,o=e.productId||e.planId,i=e.productSlug;if(!o&&!i)throw new Error("Either productId or productSlug is required");let s={customerName:t,customerEmail:r};o&&(s.productId=o),i&&(s.productSlug=i);let a=await fetch(`${this.config.baseUrl}/v1/subscriptions`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify(s)});if(!a.ok){let d=await a.json().catch(()=>({}));throw{code:d.error||"CHECKOUT_FAILED",message:d.message||"Failed to initiate checkout",details:d}}let c=await a.json();return w(c)}async fetchProducts(e){let t=new URL(`${this.config.baseUrl}/v1/products`);e?.type&&t.searchParams.set("type",e.type);let r=await fetch(t.toString(),{method:"GET",headers:this.getHeaders()});if(!r.ok){let i=await r.json().catch(()=>({}));throw{code:i.error||"FETCH_PRODUCTS_FAILED",message:i.message||"Failed to fetch products",details:i}}let o=await r.json();return w(o)}async fetchPlans(){return{plans:(await this.fetchProducts({type:"SUBSCRIPTION"})).products}}getConfig(){return{...this.config}}};var he=class{constructor(e,t){l(this,"config");l(this,"options");l(this,"container");l(this,"checkoutId",null);l(this,"sdkToken",null);l(this,"sdkTimestamp",null);l(this,"creditToken",null);l(this,"sdkEnv","S");l(this,"payuniSDK",null);l(this,"isFormValid",!1);if(this.config=e,this.options=t,typeof t.container=="string"){let r=document.querySelector(t.container);if(!r)throw new Error(`Container not found: ${t.container}`);this.container=r}else this.container=t.container}async render(){try{await this.initCheckout(),this.renderHTML(),await this.loadPayUniSDK(),await this.initPayUniSDK(),this.setupFormSubmit()}catch(e){this.handleError(e)}}getBaseUrl(){if(this.config.baseUrl)return this.config.baseUrl;if(typeof window<"u"){let e=window.location.hostname;if(e==="localhost"||e.includes(".test")||e.includes(".local")||e==="127.0.0.1")return`${window.location.protocol}//${window.location.host}/api`}return"https://api.recur.tw"}async initCheckout(){let e=this.getBaseUrl(),t=await fetch(`${e}/v1/checkouts`,{method:"POST",headers:{"Content-Type":"application/json","X-Recur-Publishable-Key":this.config.publishableKey},body:JSON.stringify({productId:this.options.productId||this.options.planId,customerEmail:this.options.customerEmail,customerName:this.options.customerName})});if(!t.ok){let i=await t.json().catch(()=>({}));throw new Error(i.error||"Failed to initialize checkout")}let r=await t.json(),o=w(r);this.checkoutId=o.checkout.id,this.sdkToken=o.sdkToken,this.sdkTimestamp=o.sdkTimestamp||null,this.creditToken=o.creditToken||null,this.sdkEnv=this.config.publishableKey.startsWith("pk_test_")?"S":"P"}renderHTML(){this.container.innerHTML=`
       <div class="recur-embedded-checkout" style="max-width: 400px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif;">
         <div class="recur-checkout-header" style="margin-bottom: 24px;">
           <h2 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600; color: #111;">Subscribe</h2>

package/dist/server.cjs

@@ -20,7 +20,7 @@ var RecurAPIError = class extends Error {
 
 // package.json
 var package_default = {
-  version: "0.10.3"};
+  version: "0.10.5"};
 
 // src/server/resources/portal.ts
 var SDK_VERSION = package_default.version;

package/dist/server.js

@@ -18,7 +18,7 @@ var RecurAPIError = class extends Error {
 
 // package.json
 var package_default = {
-  version: "0.10.3"};
+  version: "0.10.5"};
 
 // src/server/resources/portal.ts
 var SDK_VERSION = package_default.version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recur-tw",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "React & Vanilla JS SDK for embedding subscription checkout flows (Taiwan / PAYUNi)",
   "type": "module",
   "private": false,