@churnkey/react 0.1.0

package/dist/index.js

@@ -0,0 +1,901 @@
+import { useCancelFlowMachine } from './chunk-QTMZI5I2.js';
+export { useCancelFlow } from './chunk-QTMZI5I2.js';
+import { cn, discountPhrase, formatShortDate, formatPriceFromMinor, formatMonthDay, appearanceToStyle, defaultTitles } from './chunk-GCQ75J4G.js';
+export { BUILT_IN_STEP_TYPES, appearanceToStyle, calculateDiscountedPrice, cn, defaultTitles, formatPrice } from './chunk-GCQ75J4G.js';
+export { AnalyticsClient, CancelFlowMachine, ChurnkeyApi, decodeSessionToken } from './chunk-IFVMM2LB.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function RichText({ html, as = "p", className }) {
+  if (!html) return null;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+function DefaultConfirm({
+  title,
+  description,
+  confirmLabel,
+  goBackLabel,
+  periodEnd,
+  onConfirm,
+  onGoBack,
+  isProcessing,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-confirm", classNames?.root), children: [
+    /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
+    periodEnd && /* @__PURE__ */ jsxs("p", { className: cn("ck-period-end", classNames?.periodEndNotice), children: [
+      "Your access continues until ",
+      periodEnd,
+      "."
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn("ck-button ck-button-danger", classNames?.confirmButton),
+        onClick: onConfirm,
+        disabled: isProcessing,
+        children: isProcessing ? "Processing..." : confirmLabel
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.goBackButton), onClick: onGoBack, children: goBackLabel })
+  ] });
+}
+function DefaultFeedback({
+  title,
+  description,
+  placeholder,
+  required,
+  minLength,
+  value,
+  onChange,
+  onSubmit,
+  classNames
+}) {
+  const [focused, setFocused] = useState(false);
+  const hasMin = minLength > 0;
+  const isUnderMin = hasMin && value.length > 0 && value.length < minLength;
+  const isValid = !required || value.length >= minLength;
+  const placeholderText = placeholder ?? (hasMin ? `At least ${minLength} characters\u2026` : "Type your thoughts\u2026");
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-feedback", classNames?.root), children: [
+    /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "ck-feedback-field",
+          focused && "ck-feedback-field--focused",
+          isUnderMin && "ck-feedback-field--invalid"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: cn("ck-textarea", classNames?.textarea),
+              placeholder: placeholderText,
+              value,
+              onChange: (e) => onChange(e.target.value),
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              rows: 3
+            }
+          ),
+          hasMin && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "ck-character-count",
+                isUnderMin && "ck-character-count--invalid",
+                classNames?.characterCount
+              ),
+              children: [
+                value.length,
+                " / ",
+                minLength
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn("ck-button ck-button-primary", classNames?.submitButton),
+        onClick: onSubmit,
+        disabled: !isValid,
+        children: "Continue"
+      }
+    )
+  ] });
+}
+function DefaultContactOffer({
+  title,
+  description,
+  offer,
+  onAccept,
+  onDecline,
+  isProcessing,
+  classNames
+}) {
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("ck-button ck-button-primary", classNames?.acceptButton),
+          onClick: () => onAccept(),
+          disabled: isProcessing,
+          children: isProcessing ? "Processing..." : offer.copy.cta
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function DefaultDiscountOffer({
+  title,
+  description,
+  offer,
+  onAccept,
+  onDecline,
+  isProcessing,
+  classNames
+}) {
+  const o = offer;
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  const phrase = discountPhrase(o);
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsxs("div", { className: "ck-offer-details ck-offer-discount", children: [
+        /* @__PURE__ */ jsx("div", { className: "ck-offer-discount-eyebrow", children: "Limited-time offer" }),
+        /* @__PURE__ */ jsx("div", { className: "ck-offer-discount-phrase", children: phrase })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("ck-button ck-button-primary", classNames?.acceptButton),
+          onClick: () => onAccept(),
+          disabled: isProcessing,
+          children: isProcessing ? "Processing..." : offer.copy.cta
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function DefaultPauseOffer({
+  title,
+  description,
+  offer,
+  onAccept,
+  onDecline,
+  isProcessing,
+  classNames
+}) {
+  const o = offer;
+  const max = Math.max(1, o.months);
+  const [months, setMonths] = useState(Math.min(2, max));
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  const options = Array.from({ length: max }, (_, i) => i + 1);
+  const resumeAt = /* @__PURE__ */ new Date();
+  resumeAt.setMonth(resumeAt.getMonth() + months);
+  const resumeDate = formatShortDate(resumeAt);
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsxs("div", { className: "ck-offer-details ck-offer-pause", children: [
+        /* @__PURE__ */ jsx("div", { className: "ck-pause-segments", style: { gridTemplateColumns: `repeat(${max}, 1fr)` }, children: options.map((m) => {
+          const isSelected = m === months;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMonths(m),
+              className: cn("ck-pause-segment", isSelected && "ck-pause-segment--selected"),
+              children: [
+                m,
+                " ",
+                m === 1 ? "month" : "months"
+              ]
+            },
+            m
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ck-pause-resume", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "ck-pause-resume-label", children: "Billing resumes" }),
+            /* @__PURE__ */ jsx("div", { className: "ck-pause-resume-date", children: resumeDate })
+          ] }),
+          /* @__PURE__ */ jsx(CalendarIcon, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("ck-button ck-button-primary", classNames?.acceptButton),
+          onClick: () => onAccept({ months }),
+          disabled: isProcessing,
+          children: isProcessing ? "Processing..." : offer.copy.cta
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ck-pause-resume-icon",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+      ]
+    }
+  );
+}
+function Checkmark({ color = "currentColor", size = 14 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 8.5L6.5 12L13 5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function DefaultPlanChangeOffer({
+  title,
+  description,
+  offer,
+  onAccept,
+  onDecline,
+  isProcessing,
+  classNames
+}) {
+  const o = offer;
+  const plans = o.plans ?? [];
+  const [selectedPlanId, setSelectedPlanId] = useState(plans[0]?.id ?? null);
+  const selectedPlan = plans.find((p) => p.id === selectedPlanId) ?? null;
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  const ctaLabel = isProcessing ? "Processing..." : selectedPlan?.name ? `Switch to ${selectedPlan.name}` : offer.copy.cta;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsx("div", { className: "ck-offer-details ck-plan-grid", children: plans.map((plan) => {
+        const interval = plan.duration?.interval ?? "month";
+        const currency = plan.amount.currency ?? "USD";
+        const isSelected = plan.id === selectedPlanId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedPlanId(plan.id),
+            className: cn("ck-plan-card", isSelected && "ck-plan-card--selected"),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ck-plan-name", children: plan.name ?? plan.id }),
+              plan.tagline && /* @__PURE__ */ jsx("div", { className: "ck-plan-tagline", children: plan.tagline }),
+              /* @__PURE__ */ jsxs("div", { className: "ck-plan-price-row", children: [
+                /* @__PURE__ */ jsx("span", { className: "ck-plan-amount", children: formatPriceFromMinor(plan.amount.value, currency) }),
+                /* @__PURE__ */ jsxs("span", { className: "ck-plan-period", children: [
+                  "/",
+                  interval
+                ] }),
+                plan.msrp && /* @__PURE__ */ jsx("span", { className: "ck-plan-msrp", children: plan.msrp })
+              ] }),
+              plan.features && plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ck-plan-features", children: plan.features.map((feature, i) => /* @__PURE__ */ jsxs("li", { className: "ck-plan-feature", children: [
+                /* @__PURE__ */ jsx("span", { className: "ck-plan-feature-check", children: /* @__PURE__ */ jsx(Checkmark, { size: 11 }) }),
+                feature
+              ] }, `${plan.id}-feature-${i}`)) })
+            ]
+          },
+          plan.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("ck-button ck-button-primary", classNames?.acceptButton),
+          onClick: () => selectedPlanId && onAccept({ planId: selectedPlanId }),
+          disabled: isProcessing || !selectedPlanId,
+          children: ctaLabel
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function DefaultRedirectOffer({ title, description, offer, onDecline, classNames }) {
+  const url = offer.url;
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsx("div", { className: "ck-offer-details", children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ck-redirect-link", children: [
+        /* @__PURE__ */ jsx("span", { children: offer.copy.cta }),
+        /* @__PURE__ */ jsx(ExternalIcon, {})
+      ] }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function ExternalIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "ck-redirect-icon",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+}
+function DefaultTrialExtensionOffer({
+  title,
+  description,
+  offer,
+  onAccept,
+  onDecline,
+  isProcessing,
+  classNames
+}) {
+  const o = offer;
+  const headline = title ?? offer.copy.headline;
+  const body = description ?? offer.copy.body;
+  const end = /* @__PURE__ */ new Date();
+  end.setDate(end.getDate() + o.days);
+  const newEnd = formatMonthDay(end);
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-offer", classNames?.root), children: [
+    headline && /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: headline }),
+    body && /* @__PURE__ */ jsx(RichText, { html: body, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("ck-offer-card", classNames?.card), children: [
+      /* @__PURE__ */ jsxs("div", { className: "ck-offer-details ck-trial-block", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ck-trial-badge", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ck-trial-days", children: [
+            "+",
+            o.days
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ck-trial-unit", children: o.days === 1 ? "day" : "days" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "ck-trial-end-label", children: "New end date" }),
+          /* @__PURE__ */ jsx("div", { className: "ck-trial-end-date", children: newEnd })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("ck-button ck-button-primary", classNames?.acceptButton),
+          onClick: () => onAccept(),
+          disabled: isProcessing,
+          children: isProcessing ? "Processing..." : offer.copy.cta
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
+    ] })
+  ] });
+}
+function DefaultOffer(props) {
+  const { offer, components } = props;
+  const Component = pickOfferComponent(offer.type, components);
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props
+    },
+    offer.decisionId ?? offer.type
+  );
+}
+function pickOfferComponent(type, components) {
+  switch (type) {
+    case "discount":
+      return components?.DiscountOffer ?? DefaultDiscountOffer;
+    case "pause":
+      return components?.PauseOffer ?? DefaultPauseOffer;
+    case "trial_extension":
+      return components?.TrialExtensionOffer ?? DefaultTrialExtensionOffer;
+    case "plan_change":
+      return components?.PlanChangeOffer ?? DefaultPlanChangeOffer;
+    case "contact":
+      return components?.ContactOffer ?? DefaultContactOffer;
+    case "redirect":
+      return components?.RedirectOffer ?? DefaultRedirectOffer;
+    default:
+      return null;
+  }
+}
+function DefaultSuccess({ title, description, onClose, classNames }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-success", classNames?.root), children: [
+    /* @__PURE__ */ jsx("div", { className: cn("ck-success-icon", classNames?.icon), children: /* @__PURE__ */ jsx(Checkmark, { color: "currentColor", size: 26 }) }),
+    /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsx("div", { className: "ck-success-actions", children: /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-button ck-button-primary", classNames?.closeButton), onClick: onClose, children: "Done" }) })
+  ] });
+}
+function DefaultReasonButton({ reason, index, isSelected, onSelect }) {
+  const letter = String.fromCharCode(65 + index);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: isSelected ? 0 : -1,
+      onClick: () => onSelect(reason.id),
+      className: cn("ck-reason-button", isSelected && "ck-reason-button--selected"),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ck-reason-badge", children: isSelected ? /* @__PURE__ */ jsx(Checkmark, { color: "#fff", size: 12 }) : letter }),
+        /* @__PURE__ */ jsx("span", { className: "ck-reason-label", children: reason.label })
+      ]
+    }
+  );
+}
+function DefaultSurvey({
+  title,
+  description,
+  reasons,
+  selectedReason,
+  onSelectReason,
+  onNext,
+  classNames,
+  components
+}) {
+  const ReasonButton = components?.ReasonButton ?? DefaultReasonButton;
+  const listRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      e.preventDefault();
+      const currentIdx = reasons.findIndex((r) => r.id === selectedReason);
+      let nextIdx;
+      if (e.key === "ArrowDown") {
+        nextIdx = currentIdx < reasons.length - 1 ? currentIdx + 1 : 0;
+      } else {
+        nextIdx = currentIdx > 0 ? currentIdx - 1 : reasons.length - 1;
+      }
+      onSelectReason(reasons[nextIdx].id);
+      const buttons = listRef.current?.querySelectorAll('[role="radio"]');
+      buttons?.[nextIdx]?.focus();
+    },
+    [reasons, selectedReason, onSelectReason]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-survey", classNames?.root), children: [
+    /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        className: cn("ck-reason-list", classNames?.reasonList),
+        role: "radiogroup",
+        "aria-label": title,
+        onKeyDown: handleKeyDown,
+        children: reasons.map((reason, i) => /* @__PURE__ */ jsx(
+          ReasonButton,
+          {
+            reason,
+            index: i,
+            isSelected: selectedReason === reason.id,
+            onSelect: onSelectReason
+          },
+          reason.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn("ck-button ck-button-primary", classNames?.continueButton),
+        onClick: onNext,
+        disabled: !selectedReason,
+        children: "Continue"
+      }
+    )
+  ] });
+}
+function DefaultBackButton({ onBack, className }) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: cn("ck-back-button", className), onClick: onBack, children: [
+    /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12.5 4L6.5 10l6 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { children: "Back" })
+  ] });
+}
+function DefaultCloseButton({ onClose, className }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cn("ck-close-button", className), onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) });
+}
+function trapFocus(container) {
+  const focusableSelector = [
+    "a[href]",
+    "button:not(:disabled)",
+    "input:not(:disabled)",
+    "textarea:not(:disabled)",
+    "select:not(:disabled)",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(", ");
+  function handleKeyDown(e) {
+    if (e.key !== "Tab") return;
+    const focusable = Array.from(container.querySelectorAll(focusableSelector)).filter(
+      (el) => el.offsetParent !== null
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  container.addEventListener("keydown", handleKeyDown);
+  return () => container.removeEventListener("keydown", handleKeyDown);
+}
+function DefaultModal({ open, onClose, children, className }) {
+  const overlayRef = useRef(null);
+  const modalRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  useEffect(() => {
+    if (!open || !modalRef.current) return;
+    previousFocusRef.current = document.activeElement;
+    modalRef.current.focus();
+    const cleanup = trapFocus(modalRef.current);
+    return () => {
+      cleanup();
+      previousFocusRef.current?.focus();
+    };
+  }, [open]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, handleKeyDown]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "ck-overlay",
+      onClick: (e) => {
+        if (e.target === overlayRef.current) onClose();
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: modalRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "ck-dialog-title",
+          tabIndex: -1,
+          className: cn("ck-modal", className),
+          children
+        }
+      )
+    }
+  );
+}
+var query = "(prefers-color-scheme: dark)";
+function getSystemScheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia(query).matches ? "dark" : "light";
+}
+function useColorScheme(preference) {
+  const [system, setSystem] = useState(getSystemScheme);
+  useEffect(() => {
+    if (preference !== "auto" || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setSystem(mql.matches ? "dark" : "light");
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [preference]);
+  if (!preference || preference === "light") return "light";
+  if (preference === "dark") return "dark";
+  return system;
+}
+function CancelFlow(props) {
+  const { machine, state, isLoading, loadError, retry } = useCancelFlowMachine(props);
+  if (isLoading || loadError) {
+    return /* @__PURE__ */ jsx(
+      LoadStatus,
+      {
+        appearance: props.appearance,
+        classNames: props.classNames,
+        components: props.components,
+        onClose: props.onClose,
+        isLoading,
+        loadError,
+        onRetry: retry
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FlowShell,
+    {
+      machine,
+      state,
+      appearance: props.appearance,
+      classNames: props.classNames,
+      components: props.components,
+      customComponents: props.customComponents
+    }
+  );
+}
+function LoadStatus({
+  appearance,
+  classNames,
+  components,
+  onClose,
+  isLoading,
+  loadError,
+  onRetry
+}) {
+  const scheme = useColorScheme(appearance?.colorScheme);
+  const appearanceStyle = appearanceToStyle(appearance);
+  const Modal = components?.Modal ?? DefaultModal;
+  const CloseButton = components?.CloseButton ?? DefaultCloseButton;
+  const handleClose = onClose ?? (() => {
+  });
+  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: handleClose, className: classNames?.modal, children: [
+    /* @__PURE__ */ jsx(CloseButton, { onClose: handleClose, className: classNames?.closeButton }),
+    /* @__PURE__ */ jsxs("div", { className: "ck-content", children: [
+      isLoading && /* @__PURE__ */ jsxs("div", { className: "ck-loading", style: { padding: "32px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ck-loading-spinner",
+            style: {
+              width: 32,
+              height: 32,
+              border: "3px solid var(--ck-color-border, #e5e7eb)",
+              borderTopColor: "var(--ck-color-primary, #2563eb)",
+              borderRadius: "50%",
+              animation: "ck-spin 0.6s linear infinite",
+              margin: "0 auto 16px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { color: "var(--ck-color-text-secondary, #6b7280)" }, children: "Loading your options..." })
+      ] }),
+      loadError && /* @__PURE__ */ jsxs("div", { className: "ck-error", role: "alert", style: { padding: "32px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx("p", { className: "ck-error-message", style: { marginBottom: 16 }, children: "We couldn't load your cancellation options. Please try again." }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ck-retry-button",
+            onClick: onRetry,
+            style: {
+              padding: "8px 20px",
+              fontSize: 14,
+              fontWeight: 600,
+              background: "var(--ck-color-primary, #2563eb)",
+              color: "#fff",
+              border: "none",
+              borderRadius: "var(--ck-border-radius, 8px)",
+              cursor: "pointer"
+            },
+            children: "Try again"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function FlowShell({ machine, state, appearance, classNames, components, customComponents }) {
+  const scheme = useColorScheme(appearance?.colorScheme);
+  const appearanceStyle = appearanceToStyle(appearance);
+  const Modal = components?.Modal ?? DefaultModal;
+  const CloseButton = components?.CloseButton ?? DefaultCloseButton;
+  const BackButton = components?.BackButton ?? DefaultBackButton;
+  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: machine.close, className: classNames?.modal, children: [
+    /* @__PURE__ */ jsx(CloseButton, { onClose: machine.close, className: classNames?.closeButton }),
+    /* @__PURE__ */ jsxs("div", { className: "ck-content", children: [
+      machine.canGoBack && /* @__PURE__ */ jsx(BackButton, { onBack: machine.back, className: classNames?.backButton }),
+      state.error && /* @__PURE__ */ jsx("div", { className: "ck-error", role: "alert", children: /* @__PURE__ */ jsx("p", { className: "ck-error-message", children: "Something went wrong. Please try again." }) }),
+      /* @__PURE__ */ jsx(StepRenderer, { state, machine, components, customComponents })
+    ] })
+  ] }) });
+}
+function StepRenderer({
+  state,
+  machine,
+  components,
+  customComponents
+}) {
+  const stepConfig = machine.currentStep;
+  switch (state.step) {
+    case "survey": {
+      const Survey = components?.Survey ?? DefaultSurvey;
+      const config = stepConfig;
+      return /* @__PURE__ */ jsx(
+        Survey,
+        {
+          title: config?.title ?? defaultTitles.survey,
+          description: config?.description,
+          reasons: machine.reasons,
+          selectedReason: state.selectedReason,
+          onSelectReason: machine.selectReason,
+          onNext: machine.next,
+          classNames: config?.classNames,
+          components
+        }
+      );
+    }
+    case "offer": {
+      const offer = machine.currentOffer;
+      if (!offer) return null;
+      const CustomOffer = customComponents?.[offer.type];
+      if (CustomOffer) {
+        return /* @__PURE__ */ jsx(
+          CustomOffer,
+          {
+            offer,
+            customer: state.customer,
+            onAccept: machine.accept,
+            onDecline: machine.decline,
+            isProcessing: state.isProcessing
+          }
+        );
+      }
+      const Offer = components?.Offer ?? DefaultOffer;
+      const config = stepConfig;
+      return /* @__PURE__ */ jsx(
+        Offer,
+        {
+          title: config?.title,
+          description: config?.description,
+          offer,
+          onAccept: machine.accept,
+          onDecline: machine.decline,
+          isProcessing: state.isProcessing,
+          classNames: config?.classNames,
+          components
+        }
+      );
+    }
+    case "feedback": {
+      const Feedback = components?.Feedback ?? DefaultFeedback;
+      const config = stepConfig;
+      return /* @__PURE__ */ jsx(
+        Feedback,
+        {
+          title: config?.title ?? defaultTitles.feedback,
+          description: config?.description,
+          placeholder: config?.placeholder,
+          required: config?.required ?? false,
+          minLength: config?.minLength ?? 0,
+          value: state.feedback,
+          onChange: machine.setFeedback,
+          onSubmit: machine.next,
+          classNames: config?.classNames
+        }
+      );
+    }
+    case "confirm": {
+      const Confirm = components?.Confirm ?? DefaultConfirm;
+      const config = stepConfig;
+      return /* @__PURE__ */ jsx(
+        Confirm,
+        {
+          title: config?.title ?? defaultTitles.confirm,
+          description: config?.description,
+          confirmLabel: config?.confirmLabel ?? "Cancel subscription",
+          goBackLabel: config?.goBackLabel ?? "Go back",
+          onConfirm: machine.cancel,
+          onGoBack: machine.back,
+          isProcessing: state.isProcessing,
+          classNames: config?.classNames
+        }
+      );
+    }
+    case "success": {
+      const Success = components?.Success ?? DefaultSuccess;
+      const config = stepConfig;
+      const isSaved = state.outcome === "saved";
+      return /* @__PURE__ */ jsx(
+        Success,
+        {
+          outcome: state.outcome ?? "cancelled",
+          offer: machine.currentOffer ?? void 0,
+          title: isSaved ? config?.savedTitle ?? "Welcome back!" : config?.cancelledTitle ?? "Subscription cancelled",
+          description: isSaved ? config?.savedDescription ?? "Your offer has been applied." : config?.cancelledDescription ?? "We're sorry to see you go.",
+          onClose: machine.close,
+          classNames: config?.classNames
+        }
+      );
+    }
+    default: {
+      const CustomStep = customComponents?.[state.step];
+      if (!CustomStep) {
+        return /* @__PURE__ */ jsx(UnregisteredStepFallback, { step: state.step, onSkip: machine.next });
+      }
+      const config = stepConfig;
+      return /* @__PURE__ */ jsx(
+        CustomStep,
+        {
+          step: {
+            type: state.step,
+            title: config?.title,
+            description: config?.description,
+            data: config?.data
+          },
+          customer: state.customer,
+          onNext: machine.next,
+          onBack: machine.back
+        }
+      );
+    }
+  }
+}
+function UnregisteredStepFallback({ step, onSkip }) {
+  useEffect(() => {
+    console.warn(`[churnkey] No component registered for step type "${step}". Skipping.`);
+    onSkip();
+  }, [step, onSkip]);
+  return null;
+}
+
+export { CancelFlow, DefaultBackButton, DefaultCloseButton, DefaultConfirm, DefaultContactOffer, DefaultDiscountOffer, DefaultFeedback, DefaultModal, DefaultOffer, DefaultPauseOffer, DefaultPlanChangeOffer, DefaultReasonButton, DefaultRedirectOffer, DefaultSuccess, DefaultSurvey, DefaultTrialExtensionOffer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map