@churnkey/react 0.2.0 → 0.4.0

package/dist/{step-graph-Cbi0DRHX.d.cts → step-graph-DKvaV3Dg.d.cts}

@@ -129,12 +129,10 @@ interface PauseOffer {
     type: 'pause';
     months: number;
     interval?: 'month' | 'week';
-    datePicker?: boolean;
 }
 interface PlanChangeOffer {
     type: 'plan_change';
     plans: PlanOption[];
-    currentPlanId?: string;
 }
 /**
  * Plan option in a `plan_change` offer — `DirectPrice` plus optional
@@ -164,11 +162,23 @@ interface RedirectOffer {
     url: string;
     label: string;
 }
+interface RebateOffer {
+    type: 'rebate';
+    /** Cash refunded to the card, smallest currency unit. */
+    amountMinor: number;
+    currency: string;
+    /** Gross paid on the target invoice. Server-resolved in token mode. */
+    amountPaidMinor?: number;
+    /** amountPaidMinor − amountMinor. Server-resolved in token mode. */
+    netAfterRebateMinor?: number;
+    paymentMethodBrand?: string;
+    paymentMethodLast4?: string;
+}
 interface CustomOfferConfig {
     type: string;
     data?: Record<string, unknown>;
 }
-type BuiltInOfferConfig = DiscountOffer | PauseOffer | PlanChangeOffer | TrialExtensionOffer | ContactOffer | RedirectOffer;
+type BuiltInOfferConfig = DiscountOffer | PauseOffer | PlanChangeOffer | TrialExtensionOffer | ContactOffer | RedirectOffer | RebateOffer;
 type OfferConfig = BuiltInOfferConfig | CustomOfferConfig;
 type OfferDecision = OfferConfig & {
     copy: OfferCopy;
@@ -181,13 +191,22 @@ interface OfferCopy {
     declineCta: string;
 }
 type AcceptedOffer = OfferConfig & {
-    reasonId: string;
-    decisionId?: string;
+    /** Survey reason that routed to this offer. Absent when the offer was
+     *  declared as a standalone `OfferStep`. */
+    reasonId?: string;
+    /** Payload from custom offers — whatever your component passed to
+     *  `onAccept(result)`. Built-in offer types do not populate this. */
     result?: Record<string, unknown>;
 };
 interface ReasonConfig {
     id: string;
     label: string;
+    /**
+     * When true, picking this reason reveals a text input below the reason list.
+     * The typed text lands on the session as `followupResponse`. `surveyChoiceId`
+     * still carries the reason's `id` and `surveyChoiceValue` still carries the
+     * static `label`, so analytics groupings stay stable.
+     */
     freeform?: boolean;
     offer?: OfferConfig;
 }
@@ -205,11 +224,12 @@ interface OfferStep {
     title?: string;
     description?: string;
     /**
-     * Offer attached to this step. Set this for proactive save offers shown
-     * outside a survey; the SDK also populates it automatically on synthetic
-     * offer steps spawned from survey choices.
+     * Offer attached to this step. Set this to declare a standalone offer
+     * step (one that isn't routed from a survey reason). `copy` is optional —
+     * the SDK synthesizes default copy from the offer config when none is
+     * provided, the same way it does for survey-attached offers.
      */
-    offer?: OfferDecision;
+    offer?: OfferConfig | OfferDecision;
     classNames?: OfferClassNames;
 }
 interface FeedbackStep {
@@ -262,7 +282,7 @@ interface SurveyClassNames {
     reasonButton?: string;
     reasonButtonSelected?: string;
     reasonLabel?: string;
-    freeformInput?: string;
+    followupInput?: string;
     continueButton?: string;
 }
 interface OfferClassNames {
@@ -358,9 +378,9 @@ interface AppearanceVariables {
     shadowModal: string;
     shadowCard: string;
     /**
-     * Color of the dim behind the modal. Accepts any CSS color (rgba,
-     * color-mix, etc.). Defaults to a tinted version of the primary color
-     * so any primary swap automatically re-tints the overlay.
+     * Color of the dim behind the modal. Defaults to a neutral translucent
+     * ink. Set to `color-mix(in srgb, var(--ck-color-primary) 40%, transparent)`
+     * to derive the overlay from your primary color, or any CSS color value.
      */
     overlayColor: string;
 }
@@ -375,12 +395,14 @@ interface Appearance {
 interface CustomStepProps {
     step: CustomStepConfig;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onNext: (result?: Record<string, unknown>) => void;
     onBack: () => void;
 }
 interface CustomOfferProps {
     offer: OfferDecision;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onAccept: (result?: Record<string, unknown>) => Promise<void>;
     onDecline: () => void;
     isProcessing: boolean;
@@ -401,6 +423,7 @@ interface ComponentOverrides {
     TrialExtensionOffer?: (props: OfferStepProps) => ReactElement;
     ContactOffer?: (props: OfferStepProps) => ReactElement;
     RedirectOffer?: (props: OfferStepProps) => ReactElement;
+    RebateOffer?: (props: OfferStepProps) => ReactElement;
 }
 type CustomComponents = Record<string, ComponentType<CustomStepProps> | ComponentType<CustomOfferProps>>;
 interface ModalProps {
@@ -408,6 +431,7 @@ interface ModalProps {
     onClose: () => void;
     children: ReactNode;
     className?: string;
+    overlayClassName?: string;
 }
 interface CloseButtonProps {
     onClose: () => void;
@@ -420,9 +444,15 @@ interface BackButtonProps {
 interface SurveyStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     reasons: ReasonConfig[];
     selectedReason: string | null;
     onSelectReason: (id: string) => void;
+    /** Free-text value when the selected reason has `freeform: true`. Lands on the session as `followupResponse`. */
+    followupResponse: string;
+    /** Set the follow-up response. The SDK forwards the value to the session. */
+    onFollowupResponseChange: (text: string) => void;
     onNext: () => void;
     classNames?: SurveyClassNames;
     components?: Partial<ComponentOverrides>;
@@ -430,6 +460,8 @@ interface SurveyStepProps {
 interface OfferStepProps {
     title?: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     offer: OfferDecision;
     /**
      * Accept the offer. The optional `result` is included on the resulting
@@ -450,6 +482,8 @@ interface OfferStepProps {
 interface FeedbackStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     placeholder?: string;
     required: boolean;
     minLength: number;
@@ -461,11 +495,12 @@ interface FeedbackStepProps {
 interface ConfirmStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     losses?: string[];
     lossesLabel?: string;
     confirmLabel: string;
     goBackLabel: string;
-    periodEnd?: string;
     onConfirm: () => Promise<void>;
     onGoBack: () => void;
     isProcessing: boolean;
@@ -476,6 +511,8 @@ interface SuccessStepProps {
     offer?: OfferDecision;
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onClose: () => void;
     classNames?: SuccessClassNames;
 }
@@ -489,11 +526,13 @@ interface FlowState {
     step: string;
     currentStepId: string;
     selectedReason: string | null;
+    followupResponse: string;
     feedback: string;
     outcome: 'saved' | 'cancelled' | null;
     isProcessing: boolean;
     error: Error | null;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
 }
 interface FlowConfig extends FlowCallbacks {
     appId?: string;
@@ -529,12 +568,14 @@ interface FlowCallbacks {
     handlePause?: OfferCallback;
     handlePlanChange?: OfferCallback;
     handleTrialExtension?: OfferCallback;
+    handleRebate?: OfferCallback;
     handleCancel?: CancelCallback;
     onAccept?: OfferCallback;
     onDiscount?: OfferCallback;
     onPause?: OfferCallback;
     onPlanChange?: OfferCallback;
     onTrialExtension?: OfferCallback;
+    onRebate?: OfferCallback;
     onCancel?: CancelCallback;
     onClose?: () => void;
     onStepChange?: (step: string, prevStep: string) => void;
@@ -552,12 +593,6 @@ interface CancelFlowProps extends FlowCallbacks {
     classNames?: StructuralClassNames;
     components?: Partial<ComponentOverrides>;
     customComponents?: CustomComponents;
-    layout?: {
-        desktop?: 'modal' | 'inline' | 'drawer';
-        mobile?: 'sheet' | 'fullscreen' | 'inline';
-        breakpoint?: number;
-    };
-    animation?: 'css' | 'framer' | 'none';
 }
 
 interface ResolvedStep {
@@ -586,4 +621,4 @@ interface ResolvedStep {
     classNames?: unknown;
 }
 
-export type { SurveyStep as $, AcceptedOffer as A, BackButtonProps as B, CancelFlowProps as C, DirectAddress as D, FlowState as E, FeedbackStepProps as F, OfferClassNames as G, OfferConfig as H, OfferCopy as I, OfferDecision as J, OfferStep as K, PlanChangeOffer as L, ModalProps as M, PlanOption as N, OfferStepProps as O, PauseOffer as P, ReasonConfig as Q, ReasonButtonProps as R, SuccessStepProps as S, RedirectOffer as T, ResolvedStep as U, Step as V, StructuralClassNames as W, SubscriptionStatus as X, SuccessClassNames as Y, SuccessStep as Z, SurveyClassNames as _, ConfirmStepProps as a, TrialExtensionOffer as a0, SurveyStepProps as b, CloseButtonProps as c, Appearance as d, AppearanceVariables as e, BuiltInOfferConfig as f, BuiltInStep as g, BuiltInStepType as h, ComponentOverrides as i, ConfirmClassNames as j, ConfirmStep as k, ContactOffer as l, CustomComponents as m, CustomOfferConfig as n, CustomOfferProps as o, CustomStepConfig as p, CustomStepProps as q, DirectCoupon as r, DirectCustomer as s, DirectPrice as t, DirectSubscription as u, DirectSubscriptionItem as v, DiscountOffer as w, FeedbackClassNames as x, FeedbackStep as y, FlowConfig as z };
+export type { SurveyClassNames as $, AcceptedOffer as A, BackButtonProps as B, CancelFlowProps as C, DirectAddress as D, FlowState as E, FeedbackStepProps as F, OfferClassNames as G, OfferConfig as H, OfferCopy as I, OfferDecision as J, OfferStep as K, PlanChangeOffer as L, ModalProps as M, PlanOption as N, OfferStepProps as O, PauseOffer as P, ReasonConfig as Q, ReasonButtonProps as R, SuccessStepProps as S, RebateOffer as T, RedirectOffer as U, ResolvedStep as V, Step as W, StructuralClassNames as X, SubscriptionStatus as Y, SuccessClassNames as Z, SuccessStep as _, ConfirmStepProps as a, SurveyStep as a0, TrialExtensionOffer as a1, SurveyStepProps as b, CloseButtonProps as c, Appearance as d, AppearanceVariables as e, BuiltInOfferConfig as f, BuiltInStep as g, BuiltInStepType as h, ComponentOverrides as i, ConfirmClassNames as j, ConfirmStep as k, ContactOffer as l, CustomComponents as m, CustomOfferConfig as n, CustomOfferProps as o, CustomStepConfig as p, CustomStepProps as q, DirectCoupon as r, DirectCustomer as s, DirectPrice as t, DirectSubscription as u, DirectSubscriptionItem as v, DiscountOffer as w, FeedbackClassNames as x, FeedbackStep as y, FlowConfig as z };

package/dist/{step-graph-Cbi0DRHX.d.ts → step-graph-DKvaV3Dg.d.ts}

@@ -129,12 +129,10 @@ interface PauseOffer {
     type: 'pause';
     months: number;
     interval?: 'month' | 'week';
-    datePicker?: boolean;
 }
 interface PlanChangeOffer {
     type: 'plan_change';
     plans: PlanOption[];
-    currentPlanId?: string;
 }
 /**
  * Plan option in a `plan_change` offer — `DirectPrice` plus optional
@@ -164,11 +162,23 @@ interface RedirectOffer {
     url: string;
     label: string;
 }
+interface RebateOffer {
+    type: 'rebate';
+    /** Cash refunded to the card, smallest currency unit. */
+    amountMinor: number;
+    currency: string;
+    /** Gross paid on the target invoice. Server-resolved in token mode. */
+    amountPaidMinor?: number;
+    /** amountPaidMinor − amountMinor. Server-resolved in token mode. */
+    netAfterRebateMinor?: number;
+    paymentMethodBrand?: string;
+    paymentMethodLast4?: string;
+}
 interface CustomOfferConfig {
     type: string;
     data?: Record<string, unknown>;
 }
-type BuiltInOfferConfig = DiscountOffer | PauseOffer | PlanChangeOffer | TrialExtensionOffer | ContactOffer | RedirectOffer;
+type BuiltInOfferConfig = DiscountOffer | PauseOffer | PlanChangeOffer | TrialExtensionOffer | ContactOffer | RedirectOffer | RebateOffer;
 type OfferConfig = BuiltInOfferConfig | CustomOfferConfig;
 type OfferDecision = OfferConfig & {
     copy: OfferCopy;
@@ -181,13 +191,22 @@ interface OfferCopy {
     declineCta: string;
 }
 type AcceptedOffer = OfferConfig & {
-    reasonId: string;
-    decisionId?: string;
+    /** Survey reason that routed to this offer. Absent when the offer was
+     *  declared as a standalone `OfferStep`. */
+    reasonId?: string;
+    /** Payload from custom offers — whatever your component passed to
+     *  `onAccept(result)`. Built-in offer types do not populate this. */
     result?: Record<string, unknown>;
 };
 interface ReasonConfig {
     id: string;
     label: string;
+    /**
+     * When true, picking this reason reveals a text input below the reason list.
+     * The typed text lands on the session as `followupResponse`. `surveyChoiceId`
+     * still carries the reason's `id` and `surveyChoiceValue` still carries the
+     * static `label`, so analytics groupings stay stable.
+     */
     freeform?: boolean;
     offer?: OfferConfig;
 }
@@ -205,11 +224,12 @@ interface OfferStep {
     title?: string;
     description?: string;
     /**
-     * Offer attached to this step. Set this for proactive save offers shown
-     * outside a survey; the SDK also populates it automatically on synthetic
-     * offer steps spawned from survey choices.
+     * Offer attached to this step. Set this to declare a standalone offer
+     * step (one that isn't routed from a survey reason). `copy` is optional —
+     * the SDK synthesizes default copy from the offer config when none is
+     * provided, the same way it does for survey-attached offers.
      */
-    offer?: OfferDecision;
+    offer?: OfferConfig | OfferDecision;
     classNames?: OfferClassNames;
 }
 interface FeedbackStep {
@@ -262,7 +282,7 @@ interface SurveyClassNames {
     reasonButton?: string;
     reasonButtonSelected?: string;
     reasonLabel?: string;
-    freeformInput?: string;
+    followupInput?: string;
     continueButton?: string;
 }
 interface OfferClassNames {
@@ -358,9 +378,9 @@ interface AppearanceVariables {
     shadowModal: string;
     shadowCard: string;
     /**
-     * Color of the dim behind the modal. Accepts any CSS color (rgba,
-     * color-mix, etc.). Defaults to a tinted version of the primary color
-     * so any primary swap automatically re-tints the overlay.
+     * Color of the dim behind the modal. Defaults to a neutral translucent
+     * ink. Set to `color-mix(in srgb, var(--ck-color-primary) 40%, transparent)`
+     * to derive the overlay from your primary color, or any CSS color value.
      */
     overlayColor: string;
 }
@@ -375,12 +395,14 @@ interface Appearance {
 interface CustomStepProps {
     step: CustomStepConfig;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onNext: (result?: Record<string, unknown>) => void;
     onBack: () => void;
 }
 interface CustomOfferProps {
     offer: OfferDecision;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onAccept: (result?: Record<string, unknown>) => Promise<void>;
     onDecline: () => void;
     isProcessing: boolean;
@@ -401,6 +423,7 @@ interface ComponentOverrides {
     TrialExtensionOffer?: (props: OfferStepProps) => ReactElement;
     ContactOffer?: (props: OfferStepProps) => ReactElement;
     RedirectOffer?: (props: OfferStepProps) => ReactElement;
+    RebateOffer?: (props: OfferStepProps) => ReactElement;
 }
 type CustomComponents = Record<string, ComponentType<CustomStepProps> | ComponentType<CustomOfferProps>>;
 interface ModalProps {
@@ -408,6 +431,7 @@ interface ModalProps {
     onClose: () => void;
     children: ReactNode;
     className?: string;
+    overlayClassName?: string;
 }
 interface CloseButtonProps {
     onClose: () => void;
@@ -420,9 +444,15 @@ interface BackButtonProps {
 interface SurveyStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     reasons: ReasonConfig[];
     selectedReason: string | null;
     onSelectReason: (id: string) => void;
+    /** Free-text value when the selected reason has `freeform: true`. Lands on the session as `followupResponse`. */
+    followupResponse: string;
+    /** Set the follow-up response. The SDK forwards the value to the session. */
+    onFollowupResponseChange: (text: string) => void;
     onNext: () => void;
     classNames?: SurveyClassNames;
     components?: Partial<ComponentOverrides>;
@@ -430,6 +460,8 @@ interface SurveyStepProps {
 interface OfferStepProps {
     title?: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     offer: OfferDecision;
     /**
      * Accept the offer. The optional `result` is included on the resulting
@@ -450,6 +482,8 @@ interface OfferStepProps {
 interface FeedbackStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     placeholder?: string;
     required: boolean;
     minLength: number;
@@ -461,11 +495,12 @@ interface FeedbackStepProps {
 interface ConfirmStepProps {
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     losses?: string[];
     lossesLabel?: string;
     confirmLabel: string;
     goBackLabel: string;
-    periodEnd?: string;
     onConfirm: () => Promise<void>;
     onGoBack: () => void;
     isProcessing: boolean;
@@ -476,6 +511,8 @@ interface SuccessStepProps {
     offer?: OfferDecision;
     title: string;
     description?: string;
+    customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
     onClose: () => void;
     classNames?: SuccessClassNames;
 }
@@ -489,11 +526,13 @@ interface FlowState {
     step: string;
     currentStepId: string;
     selectedReason: string | null;
+    followupResponse: string;
     feedback: string;
     outcome: 'saved' | 'cancelled' | null;
     isProcessing: boolean;
     error: Error | null;
     customer: DirectCustomer | null;
+    subscriptions: DirectSubscription[];
 }
 interface FlowConfig extends FlowCallbacks {
     appId?: string;
@@ -529,12 +568,14 @@ interface FlowCallbacks {
     handlePause?: OfferCallback;
     handlePlanChange?: OfferCallback;
     handleTrialExtension?: OfferCallback;
+    handleRebate?: OfferCallback;
     handleCancel?: CancelCallback;
     onAccept?: OfferCallback;
     onDiscount?: OfferCallback;
     onPause?: OfferCallback;
     onPlanChange?: OfferCallback;
     onTrialExtension?: OfferCallback;
+    onRebate?: OfferCallback;
     onCancel?: CancelCallback;
     onClose?: () => void;
     onStepChange?: (step: string, prevStep: string) => void;
@@ -552,12 +593,6 @@ interface CancelFlowProps extends FlowCallbacks {
     classNames?: StructuralClassNames;
     components?: Partial<ComponentOverrides>;
     customComponents?: CustomComponents;
-    layout?: {
-        desktop?: 'modal' | 'inline' | 'drawer';
-        mobile?: 'sheet' | 'fullscreen' | 'inline';
-        breakpoint?: number;
-    };
-    animation?: 'css' | 'framer' | 'none';
 }
 
 interface ResolvedStep {
@@ -586,4 +621,4 @@ interface ResolvedStep {
     classNames?: unknown;
 }
 
-export type { SurveyStep as $, AcceptedOffer as A, BackButtonProps as B, CancelFlowProps as C, DirectAddress as D, FlowState as E, FeedbackStepProps as F, OfferClassNames as G, OfferConfig as H, OfferCopy as I, OfferDecision as J, OfferStep as K, PlanChangeOffer as L, ModalProps as M, PlanOption as N, OfferStepProps as O, PauseOffer as P, ReasonConfig as Q, ReasonButtonProps as R, SuccessStepProps as S, RedirectOffer as T, ResolvedStep as U, Step as V, StructuralClassNames as W, SubscriptionStatus as X, SuccessClassNames as Y, SuccessStep as Z, SurveyClassNames as _, ConfirmStepProps as a, TrialExtensionOffer as a0, SurveyStepProps as b, CloseButtonProps as c, Appearance as d, AppearanceVariables as e, BuiltInOfferConfig as f, BuiltInStep as g, BuiltInStepType as h, ComponentOverrides as i, ConfirmClassNames as j, ConfirmStep as k, ContactOffer as l, CustomComponents as m, CustomOfferConfig as n, CustomOfferProps as o, CustomStepConfig as p, CustomStepProps as q, DirectCoupon as r, DirectCustomer as s, DirectPrice as t, DirectSubscription as u, DirectSubscriptionItem as v, DiscountOffer as w, FeedbackClassNames as x, FeedbackStep as y, FlowConfig as z };
+export type { SurveyClassNames as $, AcceptedOffer as A, BackButtonProps as B, CancelFlowProps as C, DirectAddress as D, FlowState as E, FeedbackStepProps as F, OfferClassNames as G, OfferConfig as H, OfferCopy as I, OfferDecision as J, OfferStep as K, PlanChangeOffer as L, ModalProps as M, PlanOption as N, OfferStepProps as O, PauseOffer as P, ReasonConfig as Q, ReasonButtonProps as R, SuccessStepProps as S, RebateOffer as T, RedirectOffer as U, ResolvedStep as V, Step as W, StructuralClassNames as X, SubscriptionStatus as Y, SuccessClassNames as Z, SuccessStep as _, ConfirmStepProps as a, SurveyStep as a0, TrialExtensionOffer as a1, SurveyStepProps as b, CloseButtonProps as c, Appearance as d, AppearanceVariables as e, BuiltInOfferConfig as f, BuiltInStep as g, BuiltInStepType as h, ComponentOverrides as i, ConfirmClassNames as j, ConfirmStep as k, ContactOffer as l, CustomComponents as m, CustomOfferConfig as n, CustomOfferProps as o, CustomStepConfig as p, CustomStepProps as q, DirectCoupon as r, DirectCustomer as s, DirectPrice as t, DirectSubscription as u, DirectSubscriptionItem as v, DiscountOffer as w, FeedbackClassNames as x, FeedbackStep as y, FlowConfig as z };

package/dist/styles.css

@@ -71,12 +71,11 @@
   --ck-shadow-modal: 0 20px 25px -5px rgba(12, 10, 9, 0.1), 0 8px 10px -6px rgba(12, 10, 9, 0.06);
   --ck-shadow-card: 0 1px 2px rgba(12, 10, 9, 0.04), 0 1px 3px rgba(12, 10, 9, 0.06);
 
-  /* Overlay tint behind the modal. Defaults to a tinted version of the
-     primary color so any primary swap naturally re-tints the overlay.
-     Falls back gracefully on browsers without color-mix() support — the
-     declaration is invalid in those, so the rule below it (or the inline
-     style) wins. */
-  --ck-overlay-color: color-mix(in srgb, var(--ck-color-primary) 40%, transparent);
+  /* Dim behind the modal. Neutral translucent ink by default. Brands that
+     want a primary-tinted overlay can override this with their own value —
+     e.g. `color-mix(in srgb, var(--ck-color-primary) 40%, transparent)` for
+     auto re-tinting on primary swaps. */
+  --ck-overlay-color: rgba(12, 10, 9, 0.5);
 
   /* Motion */
   --ck-motion-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -144,11 +143,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  /* Fallback for browsers without color-mix() support — used if the token
-     evaluates to an invalid value. Modern engines (Chrome 111+, Safari
-     16.2+, Firefox 113+) resolve --ck-overlay-color from the :root rule. */
-  background: rgba(12, 10, 9, 0.5);
-  /* biome-ignore lint/suspicious/noDuplicateProperties: progressive enhancement fallback */
   background: var(--ck-overlay-color);
   z-index: 9999;
 }
@@ -353,6 +347,25 @@
   margin-bottom: 20px;
 }
 
+.ck-cancel-flow .ck-reason-followup {
+  width: 100%;
+  font-family: var(--ck-font);
+  font-size: 14px;
+  color: var(--ck-color-text);
+  background: var(--ck-color-surface);
+  border: 1px solid var(--ck-color-border);
+  border-radius: var(--ck-radius-md);
+  padding: 10px 12px;
+  margin-bottom: 20px;
+  resize: vertical;
+  min-height: 72px;
+}
+
+.ck-cancel-flow .ck-reason-followup:focus {
+  outline: none;
+  border-color: var(--ck-color-primary);
+}
+
 .ck-cancel-flow .ck-reason-button {
   display: flex;
   align-items: center;
@@ -418,10 +431,17 @@
   margin-bottom: 20px;
 }
 
-/* Discount: centered phrase in a soft tinted panel. */
-.ck-cancel-flow .ck-offer-discount {
-  background: var(--ck-color-primary-soft);
+/* Offer panels are soft callouts (colorSurfaceMuted), not selected-state
+   highlights (colorPrimarySoft). Shared so the offer types stay consistent. */
+.ck-cancel-flow .ck-offer-discount,
+.ck-cancel-flow .ck-pause-card,
+.ck-cancel-flow .ck-trial-block {
+  background: var(--ck-color-surface-muted);
   border-radius: var(--ck-radius-lg);
+}
+
+/* Discount: centered phrase. */
+.ck-cancel-flow .ck-offer-discount {
   padding: 24px 20px;
   text-align: center;
 }
@@ -444,11 +464,43 @@
   color: var(--ck-color-text);
 }
 
+/* Rebate: an itemized invoice for the period — the charge, the rebate we
+   credit (accented), and what's still due. Lines sit on the surface rather
+   than in a filled panel. */
+.ck-cancel-flow .ck-offer-rebate {
+  margin: 4px 0 26px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ck-cancel-flow .ck-offer-rebate-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  padding: 7px 0;
+  font-size: 13px;
+  color: var(--ck-color-text-muted);
+}
+
+/* The rebate line — the figure we want the eye to land on. */
+.ck-cancel-flow .ck-offer-rebate-credit {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-color-primary);
+}
+
+.ck-cancel-flow .ck-offer-rebate-total {
+  margin-top: 6px;
+  padding-top: 14px;
+  border-top: 1px solid var(--ck-color-border);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ck-color-text);
+}
+
 /* Pause: resume date is the typographic anchor, month chips below. */
 .ck-cancel-flow .ck-pause-card {
   padding: 32px 24px 22px;
-  background: var(--ck-color-surface-muted);
-  border-radius: var(--ck-radius-lg);
   text-align: center;
   margin: 8px 0 20px;
 }
@@ -502,14 +554,12 @@
   border-color: var(--ck-color-primary);
 }
 
-/* Trial extension: day count badge + new end date in accent-soft container. */
+/* Trial extension: day count badge + new end date. */
 .ck-cancel-flow .ck-trial-block {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px;
-  background: var(--ck-color-primary-soft);
-  border-radius: var(--ck-radius-lg);
 }
 
 .ck-cancel-flow .ck-trial-badge {
@@ -613,6 +663,17 @@
   box-shadow: var(--ck-shadow-card);
 }
 
+.ck-cancel-flow .ck-plan-card--current {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--ck-color-surface-muted);
+}
+
+.ck-cancel-flow .ck-plan-card--current:hover {
+  border-color: var(--ck-color-border);
+  background: var(--ck-color-surface-muted);
+}
+
 .ck-cancel-flow .ck-plan-name {
   font-family: var(--ck-font-display);
   font-size: 16px;
@@ -620,6 +681,21 @@
   letter-spacing: -0.01em;
   color: var(--ck-color-text);
   margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ck-cancel-flow .ck-plan-current-badge {
+  font-family: var(--ck-font);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: var(--ck-color-text-secondary);
+  background: var(--ck-color-surface);
+  border: 1px solid var(--ck-color-border);
+  padding: 2px 6px;
+  border-radius: var(--ck-radius-sm);
 }
 
 .ck-cancel-flow .ck-plan-tagline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@churnkey/react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Production-ready cancel flow for React. Drop-in component, headless hook, or full customization. Works standalone or with Churnkey for AI-powered retention.",
   "license": "MIT",
   "repository": {
@@ -65,6 +65,14 @@
     "dist",
     "package.json"
   ],
+  "scripts": {
+    "build": "tsup && node -e \"require('fs').writeFileSync('dist/styles.css.d.ts','export {}\\n')\"",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -82,13 +90,5 @@
     "tsup": "^8.0.0",
     "typescript": "^5.5.0",
     "vitest": "^2.0.0"
-  },
-  "scripts": {
-    "build": "tsup && node -e \"require('fs').writeFileSync('dist/styles.css.d.ts','export {}\\n')\"",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check ."
   }
-}
+}