@scalebun-release/react-native 2.5.0

package/lib/module/features/engage/EngageVariantContent.js

@@ -0,0 +1,1771 @@
+/**
+ * Native, composable content blocks for container-only in-app variants.
+ *
+ * Layout branches still own mounting. Interactive mechanics still live in the
+ * mechanic resolver. This module only turns heterogeneous registry `ext` data
+ * into a small set of reusable visual families.
+ */
+
+import React, { useState } from "react";
+import { Image, Pressable, Text, TextInput, View } from "react-native";
+import { resolveInAppMediaHeight } from "./engageMediaSizing";
+import { inAppOutcomeTerminalForCta } from "./engageOutcome";
+import { requestNativeStoreReview } from "./engageStoreReviewBridge";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const asRecord = value => value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
+const asText = value => {
+  if (typeof value === "string") return value.trim();
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : "";
+};
+const firstText = (source, keys) => {
+  for (const key of keys) {
+    const value = asText(source[key]);
+    if (value) return value;
+  }
+  return "";
+};
+const firstValue = (source, keys) => {
+  for (const key of keys) {
+    if (source[key] !== undefined && source[key] !== null) return source[key];
+  }
+  return undefined;
+};
+const asList = value => {
+  if (Array.isArray(value)) return value;
+  if (typeof value !== "string") return [];
+  return value.split(/\r?\n|,/).map(item => item.trim()).filter(Boolean);
+};
+const firstList = (source, keys) => asList(firstValue(source, keys));
+const primaryText = item => {
+  const value = asRecord(item);
+  return asText(item) || firstText(value, ["label", "title", "heading", "name", "prompt", "subject", "eventTitle", "code", "key"]);
+};
+const secondaryText = item => firstText(asRecord(item), ["price", "value", "description", "body", "message", "dateTime", "eventTime", "dueDate", "status"]);
+const extOf = props => asRecord(props.spec.ext);
+const assetsOf = props => asRecord(props.spec.assets);
+const variantOf = props => props.variantKey ?? "";
+const presentPrimaryOutcome = props => {
+  if (!props.onOutcome) return false;
+  props.onOutcome({
+    fallback: inAppOutcomeTerminalForCta(props.spec.cta)
+  });
+  return true;
+};
+function textDirection(theme) {
+  return theme.rtl ? {
+    writingDirection: "rtl",
+    textAlign: "right"
+  } : {};
+}
+function Actions({
+  beforePrimary,
+  primaryDisabled = false,
+  onPrimary,
+  ...props
+}) {
+  const {
+    cta,
+    secondaryCta
+  } = props.spec;
+  if (!cta && !secondaryCta) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.actions, props.theme.rtl && styles.reverse],
+    children: [secondaryCta ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: secondaryCta.label,
+      onPress: props.onDismiss,
+      style: styles.secondaryButton,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.secondaryLabel, {
+          color: props.theme.secondaryColor
+        }],
+        children: secondaryCta.label
+      })
+    }) : null, cta ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: cta.label,
+      accessibilityState: {
+        disabled: primaryDisabled
+      },
+      disabled: primaryDisabled,
+      onPress: () => {
+        beforePrimary?.();
+        if (onPrimary) onPrimary();else if (presentPrimaryOutcome(props)) return;else if (cta.action === "dismiss") props.onDismiss();else props.onCta(cta);
+      },
+      style: [styles.primaryButton, {
+        backgroundColor: props.theme.accent,
+        opacity: primaryDisabled ? 0.5 : 1
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.primaryLabel, {
+          color: props.theme.ctaText
+        }],
+        children: cta.label
+      })
+    }) : null]
+  });
+}
+function Frame({
+  props,
+  badge,
+  titleKeys = [],
+  bodyKeys = [],
+  children,
+  showActions = true,
+  beforePrimary,
+  primaryDisabled,
+  onPrimary
+}) {
+  const ext = extOf(props);
+  const title = props.spec.title || firstText(ext, titleKeys);
+  const body = firstText(ext, bodyKeys) || props.spec.body;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.content,
+    children: [badge ? /*#__PURE__*/_jsx(View, {
+      style: [styles.badge, {
+        backgroundColor: props.theme.accent
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeLabel, {
+          color: props.theme.ctaText
+        }],
+        children: badge
+      })
+    }) : null, title ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.title, {
+        color: props.theme.titleColor
+      }, textDirection(props.theme)],
+      children: title
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.body, {
+        color: props.theme.bodyColor
+      }, textDirection(props.theme)],
+      children: body
+    }), children, showActions ? /*#__PURE__*/_jsx(Actions, {
+      ...props,
+      beforePrimary: beforePrimary,
+      primaryDisabled: primaryDisabled,
+      onPrimary: onPrimary
+    }) : null]
+  });
+}
+function FeatureChecklist({
+  items,
+  props
+}) {
+  const labels = items.map(primaryText).filter(Boolean).slice(0, 6);
+  if (labels.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.featureList,
+    children: labels.map((label, index) => /*#__PURE__*/_jsxs(View, {
+      style: [styles.featureRow, {
+        borderColor: props.theme.couponBorder
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.featureCheck, {
+          backgroundColor: props.theme.couponBg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.featureTick, {
+            color: props.theme.accent
+          }],
+          children: "\u2713"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.featureLabel, {
+          color: props.theme.titleColor
+        }, textDirection(props.theme)],
+        children: label
+      })]
+    }, `${label}-${index}`))
+  });
+}
+function Rows({
+  items,
+  props,
+  numbered = false
+}) {
+  const visible = items.filter(item => primaryText(item)).slice(0, 6);
+  if (visible.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.rows,
+    children: visible.map((item, index) => {
+      const label = primaryText(item);
+      const detail = secondaryText(item);
+      return /*#__PURE__*/_jsxs(View, {
+        style: [styles.row, {
+          borderColor: props.theme.couponBorder
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.rowMark, {
+            color: props.theme.accent
+          }],
+          children: numbered ? index + 1 : "•"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.grow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.rowTitle, {
+              color: props.theme.titleColor
+            }],
+            children: label
+          }), detail ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.rowDetail, {
+              color: props.theme.bodyColor
+            }],
+            children: detail
+          }) : null]
+        })]
+      }, `${label}-${index}`);
+    })
+  });
+}
+function Chips({
+  items,
+  props
+}) {
+  const visible = items.map(primaryText).filter(Boolean).slice(0, 8);
+  if (visible.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.chips,
+    children: visible.map((label, index) => /*#__PURE__*/_jsx(View, {
+      style: [styles.chip, {
+        backgroundColor: props.theme.couponBg,
+        borderColor: props.theme.couponBorder
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.chipLabel, {
+          color: props.theme.couponFg
+        }],
+        children: label
+      })
+    }, `${label}-${index}`))
+  });
+}
+function imageUri(props, item) {
+  const itemRecord = asRecord(item);
+  const assets = assetsOf(props);
+  return firstText(itemRecord, ["image", "imageUrl", "thumbnail", "posterImage"]) || props.spec.imageUrl || firstText(assets, ["image", "backgroundImage", "avatar", "icon"]);
+}
+function HeroImage({
+  props,
+  item
+}) {
+  const uri = imageUri(props, item);
+  if (!uri) return null;
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
+  return /*#__PURE__*/_jsx(Image, {
+    accessibilityRole: "image",
+    source: {
+      uri
+    },
+    resizeMode: "cover",
+    style: [styles.heroImage, mediaHeight === undefined ? null : {
+      height: mediaHeight
+    }]
+  });
+}
+function PlansContent(props) {
+  const ext = extOf(props);
+  const plans = firstList(ext, ["plans", "featureMatrix"]);
+  const benefits = firstList(ext, ["benefits", "perks", "perksList"]);
+  const fallbackPlan = {
+    name: firstText(ext, ["planName", "newTierName", "tierName", "vipTitle"]),
+    price: firstText(ext, ["price", "discount", "expiry", "trialEndDate"])
+  };
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["upgradeTitle", "vipTitle", "newTierName"],
+    bodyKeys: ["benefitMessage", "message", "renewalDateSource"],
+    children: [/*#__PURE__*/_jsx(Rows, {
+      items: plans.length ? plans : [fallbackPlan],
+      props: props
+    }), /*#__PURE__*/_jsx(Chips, {
+      items: benefits,
+      props: props
+    })]
+  });
+}
+function ProductsContent(props) {
+  const ext = extOf(props);
+  const bundle = variantOf(props) === "bundle_builder";
+  const browse = variantOf(props) === "browse_recovery";
+  const authoredItems = firstList(ext, ["products", "itemList", "productCards", "bundleItems", "cartSummary", "recommendations"]);
+  const assetItems = asList(assetsOf(props).products);
+  const items = authoredItems.length ? authoredItems : assetItems;
+  const fallback = {
+    name: firstText(ext, ["itemName", "productTitle", "checkoutMessage", "cartSource", "browseSource"]),
+    price: firstText(ext, ["newPrice", "price", "oldPrice", "discount", "pricingLogic"])
+  };
+  const visibleItems = items.length ? items : [fallback];
+  const [selected, setSelected] = useState([]);
+  const toggleBundleItem = index => {
+    const next = selected.includes(index) ? selected.filter(value => value !== index) : [...selected, index];
+    setSelected(next);
+    props.onInteraction?.({
+      mechanic: "bundle_builder",
+      phase: "decision",
+      value: next.length,
+      meta: {
+        selected: next,
+        items: next.map(value => primaryText(visibleItems[value])).filter(Boolean)
+      }
+    });
+  };
+  if (browse) {
+    const reason = firstText(ext, ["recommendation", "category", "reasonText"]);
+    return /*#__PURE__*/_jsxs(Frame, {
+      props: props,
+      titleKeys: ["recommendationTitle"],
+      bodyKeys: ["message"],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.browseHeader, {
+          backgroundColor: props.theme.couponBg
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.browseClock, {
+            color: props.theme.accent
+          }],
+          children: "\u25F7"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.grow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.rowTitle, {
+              color: props.theme.titleColor
+            }],
+            children: "Recently viewed"
+          }), reason ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.rowDetail, {
+              color: props.theme.bodyColor
+            }],
+            children: reason
+          }) : null]
+        })]
+      }), /*#__PURE__*/_jsx(HeroImage, {
+        props: props,
+        item: items[0]
+      }), /*#__PURE__*/_jsx(Rows, {
+        items: visibleItems,
+        props: props
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["recommendationTitle", "itemName", "productTitle"],
+    bodyKeys: ["checkoutMessage", "availabilityMessage", "message"],
+    children: [/*#__PURE__*/_jsx(HeroImage, {
+      props: props,
+      item: items[0]
+    }), bundle ? /*#__PURE__*/_jsxs(View, {
+      style: styles.rows,
+      children: [visibleItems.filter(item => primaryText(item)).slice(0, 8).map((item, index) => {
+        const active = selected.includes(index);
+        return /*#__PURE__*/_jsxs(Pressable, {
+          accessibilityRole: "checkbox",
+          accessibilityState: {
+            checked: active
+          },
+          onPress: () => toggleBundleItem(index),
+          style: [styles.row, {
+            borderColor: props.theme.couponBorder
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.confirmCheck, {
+              borderColor: active ? props.theme.accent : props.theme.couponBorder,
+              backgroundColor: active ? props.theme.accent : props.theme.cardBg
+            }],
+            children: active ? /*#__PURE__*/_jsx(Text, {
+              style: styles.confirmTick,
+              children: "\u2713"
+            }) : null
+          }), /*#__PURE__*/_jsxs(View, {
+            style: [styles.grow, {
+              marginLeft: 10
+            }],
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.rowTitle, {
+                color: props.theme.titleColor
+              }],
+              children: primaryText(item)
+            }), secondaryText(item) ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.rowDetail, {
+                color: props.theme.bodyColor
+              }],
+              children: secondaryText(item)
+            }) : null]
+          })]
+        }, `${primaryText(item)}-${index}`);
+      }), firstText(ext, ["pricingLogic"]) ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.selectionNote, {
+          color: props.theme.secondaryColor
+        }],
+        children: firstText(ext, ["pricingLogic"])
+      }) : null]
+    }) : /*#__PURE__*/_jsx(Rows, {
+      items: visibleItems,
+      props: props
+    })]
+  });
+}
+function ChatContent(props) {
+  const ext = extOf(props);
+  const avatar = imageUri(props);
+  const message = firstText(ext, ["assistantMessage", "supportMessage", "message", "subject"]);
+  const suggestions = firstList(ext, ["suggestedActions", "contactMethods", "actions"]);
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["assistantTitle", "subject", "agentName"],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.chatRow,
+      children: [avatar ? /*#__PURE__*/_jsx(Image, {
+        accessibilityLabel: "Assistant avatar",
+        resizeMode: "cover",
+        source: {
+          uri: avatar
+        },
+        style: styles.chatAvatar
+      }) : null, message ? /*#__PURE__*/_jsx(View, {
+        style: [styles.bubble, {
+          backgroundColor: props.theme.couponBg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowTitle, {
+            color: props.theme.titleColor
+          }],
+          children: message
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsx(Chips, {
+      items: suggestions,
+      props: props
+    })]
+  });
+}
+function CalendarContent(props) {
+  const ext = extOf(props);
+  const webinar = variantOf(props) === "webinar_registration";
+  const event = firstText(ext, ["eventTitle", "bookingTitle", "offerMessage"]);
+  const when = firstText(ext, ["dateTime", "eventTime", "renewalDateSource", "timeWindow"]);
+  const slots = firstList(ext, ["slots", "dateTimeOptions", "calendarDays"]);
+  const labels = slots.map(primaryText).filter(Boolean).slice(0, 12);
+  const [selected, setSelected] = useState(null);
+  const [registrationValues, setRegistrationValues] = useState({});
+  const authoredRegistrationFields = firstList(ext, ["registrationFields"]).map(primaryText).filter(Boolean);
+  const registrationFields = authoredRegistrationFields.length ? authoredRegistrationFields : webinar ? [ext.nameField ? typeof ext.nameField === "string" ? ext.nameField : "Name" : "", ext.emailField ? typeof ext.emailField === "string" ? ext.emailField : "Email" : ""].filter(Boolean) : [];
+  const choose = label => {
+    setSelected(label);
+    props.onInteraction?.({
+      mechanic: variantOf(props) || "calendar",
+      phase: "decision",
+      value: label,
+      result: label
+    });
+  };
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["eventTitle", "bookingTitle"],
+    bodyKeys: ["offerMessage", "eventTitle"],
+    beforePrimary: () => props.onInteraction?.({
+      mechanic: variantOf(props) || "calendar",
+      phase: "resolved",
+      value: selected || undefined,
+      meta: {
+        ...(selected ? {
+          selection: selected
+        } : {}),
+        ...(registrationFields.length ? {
+          fields: registrationValues
+        } : {})
+      }
+    }),
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.calendarCard, {
+        borderColor: props.theme.accent
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.calendarGlyph, {
+          color: props.theme.accent
+        }],
+        children: "\u25A3"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.grow,
+        children: [event ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowTitle, {
+            color: props.theme.titleColor
+          }],
+          children: event
+        }) : null, when ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowDetail, {
+            color: props.theme.bodyColor
+          }],
+          children: when
+        }) : null]
+      })]
+    }), registrationFields.map(label => /*#__PURE__*/_jsxs(View, {
+      style: styles.field,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.fieldLabel, {
+          color: props.theme.titleColor
+        }],
+        children: label
+      }), /*#__PURE__*/_jsx(TextInput, {
+        value: registrationValues[label] ?? "",
+        onChangeText: value => setRegistrationValues(current => ({
+          ...current,
+          [label]: value
+        })),
+        placeholder: label,
+        placeholderTextColor: props.theme.secondaryColor,
+        accessibilityLabel: label,
+        keyboardType: /email/i.test(label) ? "email-address" : "default",
+        autoCapitalize: /email/i.test(label) ? "none" : "words",
+        style: [styles.input, {
+          borderColor: props.theme.couponBorder,
+          color: props.theme.titleColor
+        }]
+      })]
+    }, label)), labels.length ? /*#__PURE__*/_jsx(View, {
+      style: styles.chips,
+      children: labels.map(label => /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "radio",
+        accessibilityState: {
+          selected: selected === label
+        },
+        onPress: () => choose(label),
+        style: [styles.chip, {
+          backgroundColor: selected === label ? props.theme.couponBg : props.theme.cardBg,
+          borderColor: selected === label ? props.theme.accent : props.theme.couponBorder
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.chipLabel, {
+            color: selected === label ? props.theme.accent : props.theme.couponFg
+          }],
+          children: label
+        })
+      }, label))
+    }) : null, selected ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.selectionNote, {
+        color: props.theme.secondaryColor
+      }],
+      children: ["Selected: ", selected]
+    }) : null]
+  });
+}
+function FormContent(props) {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const fields = firstList(ext, ["formFields", "fields", "registrationFields", "consentCategories", "documentRequirements"]);
+  const fallback = firstText(ext, ["documentType", "verificationType", "permissionType"]);
+  const visible = (fields.length ? fields : fallback ? [{
+    label: fallback
+  }] : []).filter(field => primaryText(field)).slice(0, 4);
+  const [values, setValues] = useState({});
+  const [consents, setConsents] = useState(() => Object.fromEntries(visible.map((field, index) => {
+    const value = asRecord(field);
+    return [primaryText(field) || String(index), value.on === true || value.required === true];
+  })));
+  const emit = () => {
+    props.onInteraction?.({
+      mechanic: variant || "form",
+      phase: "resolved",
+      meta: variant === "consent_center" ? {
+        consents
+      } : {
+        fields: values
+      }
+    });
+  };
+  if (variant === "document_upload_prompt") {
+    const fileTypes = firstList(ext, ["allowedFileTypes", "examples"]).map(primaryText).filter(Boolean);
+    return /*#__PURE__*/_jsx(Frame, {
+      props: props,
+      titleKeys: ["documentType"],
+      bodyKeys: ["instructions"],
+      showActions: false,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.uploadCard, {
+          borderColor: props.theme.couponBorder,
+          backgroundColor: props.theme.couponBg
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.uploadGlyph, {
+            color: props.theme.accent
+          }],
+          children: "\u21E7"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.rowTitle, {
+            color: props.theme.titleColor
+          }],
+          children: ["Choose ", firstText(ext, ["documentType"]) || "a document"]
+        }), fileTypes.length ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowDetail, {
+            color: props.theme.bodyColor
+          }],
+          children: fileTypes.join(" · ")
+        }) : null, firstText(ext, ["maxFileSize"]) ? /*#__PURE__*/_jsxs(Text, {
+          style: [styles.rowDetail, {
+            color: props.theme.bodyColor
+          }],
+          children: ["Maximum ", firstText(ext, ["maxFileSize"])]
+        }) : null, /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          onPress: () => {
+            props.onInteraction?.({
+              mechanic: variant,
+              phase: "started",
+              value: "document_picker",
+              meta: {
+                allowedFileTypes: fileTypes
+              }
+            });
+            if (presentPrimaryOutcome(props)) return;
+            if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();else props.onCta(props.spec.cta);
+          },
+          style: [styles.hostAction, {
+            backgroundColor: props.theme.accent
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.primaryLabel, {
+              color: props.theme.ctaText
+            }],
+            children: props.spec.cta?.label || "Select file"
+          })
+        })]
+      })
+    });
+  }
+  if (variant === "id_verification_sheet") {
+    return /*#__PURE__*/_jsxs(Frame, {
+      props: props,
+      titleKeys: ["verificationType"],
+      bodyKeys: ["instructions", "privacyText"],
+      children: [/*#__PURE__*/_jsx(Rows, {
+        items: fields.length ? fields : ["Prepare your ID", "Capture both sides", "Confirm your details"],
+        props: props,
+        numbered: true
+      }), firstText(ext, ["privacyText"]) ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.legal, {
+          color: props.theme.secondaryColor
+        }],
+        children: firstText(ext, ["privacyText"])
+      }) : null]
+    });
+  }
+  if (variant === "consent_center") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: props.theme.titleColor
+        }],
+        children: props.spec.title || "Your privacy choices"
+      }), props.spec.body ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, {
+          color: props.theme.bodyColor
+        }],
+        children: props.spec.body
+      }) : null, visible.map((field, index) => {
+        const label = primaryText(field) || `Consent ${index + 1}`;
+        const on = consents[label] === true;
+        return /*#__PURE__*/_jsxs(Pressable, {
+          accessibilityRole: "switch",
+          accessibilityState: {
+            checked: on
+          },
+          onPress: () => setConsents(current => ({
+            ...current,
+            [label]: !on
+          })),
+          style: [styles.consentRow, {
+            borderColor: props.theme.couponBorder
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.growText, {
+              color: props.theme.titleColor
+            }],
+            children: label
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.switchTrack, {
+              backgroundColor: on ? props.theme.accent : props.theme.couponBg
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.switchThumb, on && styles.switchThumbOn]
+            })
+          })]
+        }, label);
+      }), /*#__PURE__*/_jsx(Actions, {
+        ...props,
+        beforePrimary: emit
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["subject", "documentType", "verificationType"],
+    bodyKeys: ["instructions", "promptText", "privacyText"],
+    showActions: false,
+    children: [visible.map((field, index) => {
+      const label = primaryText(field);
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.field,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.fieldLabel, {
+            color: props.theme.titleColor
+          }],
+          children: label
+        }), /*#__PURE__*/_jsx(TextInput, {
+          value: values[label] ?? "",
+          onChangeText: value => setValues(current => ({
+            ...current,
+            [label]: value
+          })),
+          accessibilityLabel: label,
+          placeholder: label,
+          placeholderTextColor: props.theme.secondaryColor,
+          style: [styles.input, {
+            borderColor: props.theme.couponBorder,
+            color: props.theme.titleColor
+          }]
+        })]
+      }, `${label}-${index}`);
+    }), /*#__PURE__*/_jsx(Actions, {
+      ...props,
+      beforePrimary: emit
+    })]
+  });
+}
+function TrustContent(props) {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const [confirmed, setConfirmed] = useState(false);
+  const [reviewRating, setReviewRating] = useState(0);
+  const glyphByVariant = {
+    confirmation_modal: "!",
+    referral_invite: "↗",
+    coupon_wallet: "%",
+    social_proof_popup: "★",
+    exit_intent_rescue: "↩",
+    time_of_day_offer: "◷",
+    weather_based_card: "☂",
+    security_alert: "⚠",
+    permissions_primer: "✓",
+    app_review_ask: "★",
+    smart_segment_preview: "◎"
+  };
+  const highlight = firstText(ext, ["proofMessage", "rewardMessage", "benefitMessage", "valueMessage", "reviewMessage", "segmentExplanation", "alertTitle", "discount", "weatherConditionRule", "timeWindow", "permissionType", "exitCondition"]);
+  const details = firstList(ext, ["coupons", "perks", "perksList", "reasonList", "tags"]);
+  const firstCoupon = asRecord(firstList(ext, ["coupons"])[0]);
+  const code = firstText(ext, ["couponCode", "referralCode", "code"]) || firstText(firstCoupon, ["code", "couponCode"]);
+  const expiry = firstText(ext, ["expiryDate", "expiry"]) || firstText(firstCoupon, ["expiryDate", "expiry"]);
+  const terms = firstText(ext, ["terms"]) || firstList(ext, ["terms"]).map(primaryText).filter(Boolean).join(" · ");
+  const avatar = firstText(assetsOf(props), ["avatar"]);
+  const rating = typeof ext.rating === "number" ? Math.max(0, Math.min(5, Math.round(ext.rating))) : 0;
+  const reviewThreshold = typeof ext.ratingGate === "number" ? Math.max(1, Math.min(5, Math.round(ext.ratingGate))) : 4;
+  const submitReview = async () => {
+    props.onInteraction?.({
+      mechanic: "app_review_ask",
+      phase: "resolved",
+      value: reviewRating,
+      meta: {
+        threshold: reviewThreshold
+      }
+    });
+    if (reviewRating >= reviewThreshold) {
+      const ran = await requestNativeStoreReview();
+      props.onInteraction?.({
+        mechanic: "app_review_ask",
+        phase: "completed",
+        value: reviewRating,
+        meta: {
+          route: ran ? "store_review" : "fallback",
+          threshold: reviewThreshold
+        }
+      });
+      if (ran) {
+        if (presentPrimaryOutcome(props)) return;
+        props.onDismiss();
+        return;
+      }
+    }
+    if (presentPrimaryOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();else props.onCta(props.spec.cta);
+  };
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["alertTitle", "vipTitle", "newTierName"],
+    bodyKeys: ["message", "proofMessage", "valueMessage", "reviewMessage"],
+    beforePrimary: variant === "app_review_ask" ? undefined : () => props.onInteraction?.({
+      mechanic: variant || "trust",
+      phase: "resolved",
+      value: firstText(ext, ["nativeTrigger", "ratingGate", "exitCondition", "secondaryAction"]),
+      meta: {
+        variant,
+        confirmed,
+        context: ext
+      }
+    }),
+    primaryDisabled: variant === "confirmation_modal" && Boolean(ext.checkboxConfirmation) && !confirmed || variant === "app_review_ask" && reviewRating === 0,
+    onPrimary: variant === "app_review_ask" ? () => {
+      void submitReview();
+    } : undefined,
+    children: [highlight || glyphByVariant[variant] ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.highlight, {
+        backgroundColor: props.theme.couponBg
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.trustGlyph, {
+          color: props.theme.accent
+        }],
+        children: glyphByVariant[variant] || "✓"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.grow,
+        children: [highlight ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.growText, {
+            color: props.theme.titleColor
+          }],
+          children: highlight
+        }) : null, variant === "security_alert" && firstText(ext, ["severity", "deviceLocation"]) ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowDetail, {
+            color: props.theme.bodyColor
+          }],
+          children: [firstText(ext, ["severity"]), firstText(ext, ["deviceLocation"])].filter(Boolean).join(" · ")
+        }) : null]
+      })]
+    }) : null, avatar ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: avatar
+      },
+      style: styles.avatar,
+      accessibilityLabel: "Customer avatar"
+    }) : null, rating > 0 ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.stars, {
+        color: props.theme.accent
+      }],
+      children: ["★".repeat(rating), "☆".repeat(5 - rating)]
+    }) : null, variant === "app_review_ask" ? /*#__PURE__*/_jsx(View, {
+      style: styles.reviewStars,
+      children: Array.from({
+        length: 5
+      }, (_, index) => /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "radio",
+        accessibilityLabel: `${index + 1} star`,
+        accessibilityState: {
+          selected: reviewRating === index + 1
+        },
+        onPress: () => setReviewRating(index + 1),
+        style: styles.reviewStarButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.reviewStar, {
+            color: index < reviewRating ? "#F59E0B" : props.theme.couponBorder
+          }],
+          children: "\u2605"
+        })
+      }, index))
+    }) : null, code ? /*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: `Coupon code ${code}`,
+      onPress: () => props.onInteraction?.({
+        mechanic: variant || "coupon",
+        phase: "decision",
+        value: code
+      }),
+      style: [styles.codeCard, {
+        borderColor: props.theme.accent
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        selectable: true,
+        style: [styles.codeText, {
+          color: props.theme.couponFg
+        }],
+        children: code
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.codeHint, {
+          color: props.theme.secondaryColor
+        }],
+        children: "Tap to select this offer"
+      })]
+    }) : null, expiry ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.legal, {
+        color: props.theme.secondaryColor
+      }],
+      children: ["Expires ", expiry]
+    }) : null, terms ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.legal, {
+        color: props.theme.secondaryColor
+      }],
+      children: terms
+    }) : null, variant === "confirmation_modal" && ext.checkboxConfirmation ? /*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: confirmed
+      },
+      onPress: () => {
+        setConfirmed(value => !value);
+        props.onInteraction?.({
+          mechanic: "confirmation_modal",
+          phase: "decision",
+          value: !confirmed
+        });
+      },
+      style: [styles.confirmRow, {
+        borderColor: props.theme.couponBorder
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.confirmCheck, {
+          borderColor: confirmed ? props.theme.accent : props.theme.couponBorder,
+          backgroundColor: confirmed ? props.theme.accent : props.theme.cardBg
+        }],
+        children: confirmed ? /*#__PURE__*/_jsx(Text, {
+          style: styles.confirmTick,
+          children: "\u2713"
+        }) : null
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.growText, {
+          color: props.theme.titleColor
+        }],
+        children: typeof ext.checkboxConfirmation === "string" ? ext.checkboxConfirmation : "I understand and want to continue"
+      })]
+    }) : null, /*#__PURE__*/_jsx(Rows, {
+      items: details,
+      props: props
+    })]
+  });
+}
+function LocationContent(props) {
+  const ext = extOf(props);
+  const source = {
+    ...asRecord(assetsOf(props).location),
+    ...ext
+  };
+  const place = firstText(source, ["branchName", "geoFenceLocation", "locationRule"]);
+  const detail = firstText(source, ["arrivalMessage", "distance", "openingHours", "address"]);
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["branchName"],
+    bodyKeys: ["arrivalMessage", "message"],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.map, {
+        backgroundColor: props.theme.couponBg
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.mapLine, styles.mapLineOne]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.mapLine, styles.mapLineTwo]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.pin, {
+          color: props.theme.accent
+        }],
+        children: "\u25CF"
+      })]
+    }), place || detail ? /*#__PURE__*/_jsxs(View, {
+      style: styles.locationCopy,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.rowTitle, {
+          color: props.theme.titleColor
+        }],
+        children: place || "Nearby location"
+      }), detail ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.rowDetail, {
+          color: props.theme.bodyColor
+        }],
+        children: detail
+      }) : null]
+    }) : null]
+  });
+}
+function normalizedProgress(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
+}
+function InsightContent(props) {
+  const ext = extOf(props);
+  const items = firstList(ext, ["digestItems", "contentBlocks", "metrics"]);
+  const metric = firstText(ext, ["metric", "progressValue", "timer"]);
+  const progress = normalizedProgress(firstValue(ext, ["progress", "progressBar", "progressValue"]));
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["insightTitle", "digestTitle"],
+    bodyKeys: ["message", "motivationalText"],
+    children: [metric ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.metric, {
+        color: props.theme.accent
+      }],
+      children: metric
+    }) : null, progress !== null ? /*#__PURE__*/_jsx(View, {
+      style: [styles.track, {
+        backgroundColor: props.theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.progress, {
+          backgroundColor: props.theme.accent,
+          width: `${progress}%`
+        }]
+      })
+    }) : null, /*#__PURE__*/_jsx(Rows, {
+      items: items,
+      props: props
+    })]
+  });
+}
+function MediaContent(props) {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const video = firstText(assetsOf(props), ["video"]);
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
+  if (variant === "rich_modal") {
+    const bulletList = asList(ext.bulletList).filter(primaryText);
+    const features = bulletList.length ? bulletList : asList(ext.benefits).filter(primaryText);
+    return /*#__PURE__*/_jsx(Frame, {
+      props: props,
+      badge: firstText(ext, ["badge", "urgencyBadge", "eyebrow"]),
+      titleKeys: ["featureName"],
+      bodyKeys: ["valueProposition", "message"],
+      children: /*#__PURE__*/_jsx(FeatureChecklist, {
+        items: features,
+        props: props
+      })
+    });
+  }
+  const sections = firstList(ext, ["contentSections", "bulletList", "benefits"]);
+  if (variant === "split_modal") {
+    const title = props.spec.title || firstText(ext, ["featureName"]);
+    const body = props.spec.body || firstText(ext, ["valueProposition", "message"]);
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.split,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.splitMedia,
+          children: [/*#__PURE__*/_jsx(HeroImage, {
+            props: props
+          }), !imageUri(props) ? /*#__PURE__*/_jsx(View, {
+            style: [styles.splitFallback, {
+              backgroundColor: props.theme.couponBg
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.splitGlyph, {
+                color: props.theme.accent
+              }],
+              children: "\u25C6"
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.splitCopy,
+          children: [title ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.title, {
+              color: props.theme.titleColor
+            }],
+            children: title
+          }) : null, body ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.body, {
+              color: props.theme.bodyColor
+            }],
+            children: body
+          }) : null, /*#__PURE__*/_jsx(Rows, {
+            items: sections,
+            props: props
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Actions, {
+        ...props
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Frame, {
+    props: props,
+    titleKeys: ["featureName", "authorLabel"],
+    bodyKeys: ["valueProposition", "message"],
+    children: [/*#__PURE__*/_jsx(HeroImage, {
+      props: props
+    }), video && !imageUri(props) ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.video, {
+        backgroundColor: props.theme.couponBg
+      }, mediaHeight === undefined ? null : {
+        minHeight: mediaHeight
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.play, {
+          color: props.theme.accent
+        }],
+        children: "\u25B6"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.rowDetail, {
+          color: props.theme.bodyColor
+        }],
+        children: "Video opens through the campaign action"
+      })]
+    }) : null, /*#__PURE__*/_jsx(Rows, {
+      items: sections,
+      props: props
+    })]
+  });
+}
+function ListContent(props) {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const items = firstList(ext, ["bulletList", "contentBlocks", "steps", "actions", "newFeatures", "expandedContent"]);
+  if (variant === "welcome_back_card") {
+    const name = firstText(ext, ["userNameToken", "userName"]);
+    return /*#__PURE__*/_jsxs(Frame, {
+      props: props,
+      titleKeys: ["welcomeTitle"],
+      bodyKeys: ["updateSummary", "message"],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.welcomeHero, {
+          backgroundColor: props.theme.couponBg
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.welcomeEmoji,
+          children: "\uD83D\uDC4B"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.welcomeCopy, {
+            color: props.theme.titleColor
+          }],
+          children: name ? `Good to see you, ${name}` : "Good to see you again"
+        })]
+      }), /*#__PURE__*/_jsx(Rows, {
+        items: items,
+        props: props
+      })]
+    });
+  }
+  if (variant === "empty_state_prompt") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.content, styles.emptyState],
+      children: [imageUri(props) ? /*#__PURE__*/_jsx(HeroImage, {
+        props: props
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [styles.emptyIllustration, {
+          backgroundColor: props.theme.couponBg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.emptyGlyph, {
+            color: props.theme.accent
+          }],
+          children: "\uFF0B"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, styles.centerText, {
+          color: props.theme.titleColor
+        }],
+        children: props.spec.title || "Nothing here yet"
+      }), props.spec.body ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, styles.centerText, {
+          color: props.theme.bodyColor
+        }],
+        children: props.spec.body
+      }) : null, /*#__PURE__*/_jsx(Actions, {
+        ...props
+      })]
+    });
+  }
+  if (variant === "multi_cta_decision_hub") {
+    const actions = items.slice(0, 6);
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [props.spec.title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: props.theme.titleColor
+        }],
+        children: props.spec.title
+      }) : null, props.spec.body ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, {
+          color: props.theme.bodyColor
+        }],
+        children: props.spec.body
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: styles.decisionList,
+        children: actions.map((item, index) => {
+          const action = asRecord(item);
+          const label = primaryText(item) || `Option ${index + 1}`;
+          const recommended = action.recommended === true || action.key === ext.recommendedAction;
+          return /*#__PURE__*/_jsxs(Pressable, {
+            accessibilityRole: "button",
+            onPress: () => {
+              props.onInteraction?.({
+                mechanic: "multi_cta_decision_hub",
+                phase: "decision",
+                value: label,
+                meta: {
+                  index,
+                  action
+                }
+              });
+              const value = firstText(action, ["value", "deepLink", "url"]);
+              if (value) props.onCta({
+                label,
+                action: "link",
+                deepLink: value
+              });else if (action.action === "dismiss" && props.onOutcome) {
+                props.onOutcome({
+                  fallback: {
+                    kind: "dismiss"
+                  }
+                });
+              } else if (action.action === "dismiss") props.onDismiss();else if (props.spec.cta) props.onCta(props.spec.cta);else if (!presentPrimaryOutcome(props)) props.onDismiss();
+            },
+            style: [styles.decisionButton, {
+              borderColor: recommended ? props.theme.accent : props.theme.couponBorder,
+              backgroundColor: recommended ? props.theme.couponBg : props.theme.cardBg
+            }],
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.growText, {
+                color: props.theme.titleColor
+              }],
+              children: label
+            }), recommended ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.recommended, {
+                color: props.theme.accent
+              }],
+              children: "Recommended"
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: [styles.decisionArrow, {
+                color: props.theme.accent
+              }],
+              children: "\u203A"
+            })]
+          }, `${label}-${index}`);
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Frame, {
+    props: props,
+    titleKeys: ["expandedTitle", "peekLabel", "welcomeTitle"],
+    bodyKeys: ["expandedBody", "updateSummary", "message"],
+    children: /*#__PURE__*/_jsx(Rows, {
+      items: items,
+      props: props,
+      numbered: true
+    })
+  });
+}
+const CONTENT_RENDERERS = {
+  plans: PlansContent,
+  products: ProductsContent,
+  chat: ChatContent,
+  calendar: CalendarContent,
+  form: FormContent,
+  trust: TrustContent,
+  location: LocationContent,
+  insight: InsightContent,
+  media: MediaContent,
+  list: ListContent
+};
+
+/**
+ * Only variants with structured container content appear here. Basic layout
+ * surfaces intentionally resolve to null and use EngageInAppView's generic body.
+ * Canonical mechanic variants are intentionally absent as well.
+ */
+const VARIANTS_BY_FAMILY = {
+  plans: ["upgrade_nudger", "renewal_reminder", "trial_conversion", "vip_unlock", "loyalty_tier_upgrade", "compare_plans_sheet", "dynamic_paywall"],
+  products: ["cart_recovery", "browse_recovery", "price_drop_alert", "back_in_stock", "reorder_reminder", "cross_sell_recommendation", "checkout_accelerator", "bundle_builder"],
+  chat: ["floating_bubble", "ai_assistant_nudge", "smart_inbox_message", "support_escalation", "chat_handoff_prompt"],
+  calendar: ["calendar_picker_offer", "live_event_banner", "webinar_registration", "appointment_booker"],
+  form: ["waitlist_joiner", "rich_form_modal", "document_upload_prompt", "id_verification_sheet", "consent_center"],
+  trust: ["confirmation_modal", "referral_invite", "coupon_wallet", "social_proof_popup", "exit_intent_rescue", "time_of_day_offer", "weather_based_card", "security_alert", "permissions_primer", "app_review_ask", "smart_segment_preview"],
+  location: ["location_based_prompt", "geo_fenced_arrival_card"],
+  insight: ["sticky_footer_bar", "embedded_panel", "personal_finance_insight", "personalized_digest"],
+  media: ["rich_modal", "media_modal", "split_modal", "full_screen_takeover", "editorial_full_screen", "feature_discovery"],
+  list: ["multi_step_bottom_sheet", "center_drawer", "peek_card", "welcome_back_card", "empty_state_prompt", "multi_cta_decision_hub"]
+};
+const FAMILY_BY_VARIANT = (() => {
+  const result = {};
+  for (const family of Object.keys(VARIANTS_BY_FAMILY)) {
+    for (const variantKey of VARIANTS_BY_FAMILY[family]) {
+      result[variantKey] = family;
+    }
+  }
+  return result;
+})();
+
+/** Resolve reusable content for a container variant, or null for generic/mechanic keys. */
+export function resolveVariantContent(variantKey) {
+  if (!variantKey || !Object.prototype.hasOwnProperty.call(FAMILY_BY_VARIANT, variantKey)) {
+    return null;
+  }
+  return CONTENT_RENDERERS[FAMILY_BY_VARIANT[variantKey]] ?? null;
+}
+const styles = {
+  content: {
+    width: "100%"
+  },
+  badge: {
+    alignSelf: "flex-start",
+    borderRadius: 999,
+    marginBottom: 6,
+    paddingHorizontal: 9,
+    paddingVertical: 3
+  },
+  badgeLabel: {
+    fontSize: 10,
+    fontWeight: "800"
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: "800",
+    lineHeight: 25,
+    marginBottom: 6
+  },
+  body: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 10
+  },
+  actions: {
+    alignItems: "center",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 14
+  },
+  reverse: {
+    flexDirection: "row-reverse"
+  },
+  primaryButton: {
+    borderRadius: 12,
+    flexBasis: 140,
+    flexGrow: 1,
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingHorizontal: 18,
+    paddingVertical: 11
+  },
+  primaryLabel: {
+    flexShrink: 1,
+    fontSize: 15,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  secondaryButton: {
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingHorizontal: 14,
+    paddingVertical: 11
+  },
+  secondaryLabel: {
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  rows: {
+    marginTop: 6
+  },
+  featureList: {
+    marginTop: 4
+  },
+  featureRow: {
+    alignItems: "center",
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    paddingVertical: 8
+  },
+  featureCheck: {
+    alignItems: "center",
+    borderRadius: 11,
+    height: 22,
+    justifyContent: "center",
+    marginRight: 10,
+    width: 22
+  },
+  featureTick: {
+    fontSize: 12,
+    fontWeight: "900"
+  },
+  featureLabel: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 19
+  },
+  row: {
+    alignItems: "center",
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    paddingVertical: 9
+  },
+  rowMark: {
+    fontSize: 15,
+    fontWeight: "800",
+    marginRight: 10,
+    minWidth: 14
+  },
+  rowTitle: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 19
+  },
+  rowDetail: {
+    fontSize: 12,
+    lineHeight: 17,
+    marginTop: 2
+  },
+  grow: {
+    flex: 1
+  },
+  growText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 19
+  },
+  chips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginTop: 8
+  },
+  chip: {
+    borderRadius: 999,
+    borderWidth: 1,
+    marginBottom: 6,
+    marginRight: 6,
+    maxWidth: "100%",
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  chipLabel: {
+    flexShrink: 1,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  heroImage: {
+    borderRadius: 12,
+    height: 132,
+    marginVertical: 8,
+    width: "100%"
+  },
+  chatRow: {
+    alignItems: "flex-end",
+    flexDirection: "row",
+    marginTop: 4
+  },
+  chatAvatar: {
+    borderRadius: 24,
+    flexShrink: 0,
+    height: 48,
+    marginVertical: 8,
+    width: 48
+  },
+  bubble: {
+    borderRadius: 14,
+    flex: 1,
+    marginLeft: 8,
+    padding: 12
+  },
+  calendarCard: {
+    alignItems: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: "row",
+    marginTop: 6,
+    padding: 12
+  },
+  calendarGlyph: {
+    fontSize: 30,
+    fontWeight: "800",
+    marginRight: 12
+  },
+  field: {
+    marginTop: 8
+  },
+  fieldLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    marginBottom: 5
+  },
+  input: {
+    borderRadius: 10,
+    borderWidth: 1,
+    fontSize: 14,
+    padding: 10
+  },
+  split: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "stretch",
+    gap: 14
+  },
+  splitMedia: {
+    flexBasis: 220,
+    flexGrow: 0.9,
+    flexShrink: 1,
+    minHeight: 170,
+    minWidth: 0
+  },
+  splitCopy: {
+    flexBasis: 220,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+    minWidth: 0
+  },
+  splitFallback: {
+    flex: 1,
+    minHeight: 170,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  splitGlyph: {
+    fontSize: 42,
+    fontWeight: "900"
+  },
+  selectionNote: {
+    fontSize: 11,
+    marginTop: 4
+  },
+  uploadCard: {
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    borderRadius: 14,
+    padding: 16,
+    alignItems: "center",
+    marginTop: 8
+  },
+  uploadGlyph: {
+    fontSize: 34,
+    fontWeight: "900",
+    marginBottom: 6
+  },
+  hostAction: {
+    borderRadius: 10,
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    marginTop: 12
+  },
+  legal: {
+    fontSize: 11,
+    lineHeight: 16,
+    marginTop: 8
+  },
+  consentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    paddingVertical: 12
+  },
+  switchTrack: {
+    width: 44,
+    height: 26,
+    borderRadius: 13,
+    padding: 3
+  },
+  switchThumb: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#FFFFFF"
+  },
+  switchThumbOn: {
+    alignSelf: "flex-end"
+  },
+  decisionList: {
+    marginTop: 8,
+    gap: 8
+  },
+  decisionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1.5,
+    borderRadius: 12,
+    padding: 13
+  },
+  recommended: {
+    fontSize: 10,
+    fontWeight: "800",
+    marginRight: 8
+  },
+  decisionArrow: {
+    fontSize: 24,
+    lineHeight: 24
+  },
+  welcomeHero: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 14,
+    padding: 14,
+    marginTop: 4
+  },
+  welcomeEmoji: {
+    fontSize: 34,
+    marginRight: 12
+  },
+  welcomeCopy: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "800",
+    lineHeight: 19
+  },
+  emptyState: {
+    alignItems: "stretch"
+  },
+  emptyIllustration: {
+    height: 132,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 14
+  },
+  emptyGlyph: {
+    fontSize: 46,
+    fontWeight: "300"
+  },
+  centerText: {
+    textAlign: "center"
+  },
+  browseHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 4
+  },
+  browseClock: {
+    fontSize: 28,
+    fontWeight: "800",
+    marginRight: 10
+  },
+  highlight: {
+    alignItems: "center",
+    borderRadius: 12,
+    flexDirection: "row",
+    marginTop: 5,
+    padding: 12
+  },
+  trustGlyph: {
+    fontSize: 21,
+    fontWeight: "900",
+    marginRight: 10
+  },
+  avatar: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignSelf: "center",
+    marginTop: 8
+  },
+  stars: {
+    fontSize: 18,
+    letterSpacing: 2,
+    textAlign: "center",
+    marginTop: 6
+  },
+  codeCard: {
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 8,
+    alignItems: "center"
+  },
+  codeText: {
+    fontSize: 20,
+    fontWeight: "900",
+    letterSpacing: 2
+  },
+  codeHint: {
+    fontSize: 10,
+    marginTop: 4
+  },
+  confirmRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 11,
+    marginTop: 8
+  },
+  confirmCheck: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  confirmTick: {
+    color: "#FFFFFF",
+    fontSize: 12,
+    fontWeight: "900"
+  },
+  reviewStars: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 7,
+    marginTop: 10
+  },
+  reviewStarButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44,
+    minWidth: 44
+  },
+  reviewStar: {
+    fontSize: 34
+  },
+  map: {
+    borderRadius: 12,
+    height: 108,
+    marginTop: 5,
+    overflow: "hidden"
+  },
+  mapLine: {
+    backgroundColor: "rgba(255,255,255,0.72)",
+    height: 8,
+    position: "absolute",
+    width: "120%"
+  },
+  mapLineOne: {
+    left: -20,
+    top: 30,
+    transform: [{
+      rotate: "8deg"
+    }]
+  },
+  mapLineTwo: {
+    left: -25,
+    top: 72,
+    transform: [{
+      rotate: "-12deg"
+    }]
+  },
+  pin: {
+    fontSize: 30,
+    left: "46%",
+    position: "absolute",
+    top: 34
+  },
+  locationCopy: {
+    paddingTop: 9
+  },
+  metric: {
+    fontSize: 28,
+    fontWeight: "900",
+    marginTop: 4
+  },
+  track: {
+    borderRadius: 999,
+    height: 9,
+    marginTop: 8,
+    overflow: "hidden"
+  },
+  progress: {
+    borderRadius: 999,
+    height: "100%"
+  },
+  video: {
+    alignItems: "center",
+    borderRadius: 12,
+    marginTop: 6,
+    padding: 18
+  },
+  play: {
+    fontSize: 28,
+    marginBottom: 4
+  }
+};
+//# sourceMappingURL=EngageVariantContent.js.map