@namiml/expo-sdk 3.4.0-dev.202605060437

package/dist/index.mjs

@@ -0,0 +1,3966 @@
+import { NAMI_SDK_PACKAGE_VERSION, registerPlatformAdapters, registerPurchaseAdapter, logger, Nami as Nami$1, PaywallState, initialState, getUrlParams, SMART_TEXT_PATTERN, VAR_REGEX, LIQUID_VARIABLE_REGEX, isAnonymousMode, NamiAPI, storageService, getDeviceScaleFactor, NamiEventEmitter, PAYWALL_ACTION_EVENT, NamiPaywallAction, NamiReservedActions, isNamiFlowCampaign, NamiFlowManager, hasAllPaywalls, getPaywallDataFromLabel, getPaywall } from '@namiml/sdk-core';
+export { NamiCampaignManager, NamiCustomerManager, NamiEntitlementManager, NamiFlowManager, NamiPaywallManager, NamiProfileManager } from '@namiml/sdk-core';
+import { Platform, Dimensions, StyleSheet, View, ScrollView, ImageBackground, BackHandler, ActivityIndicator, SafeAreaView, StatusBar, Animated } from 'react-native';
+import require$$0, { createContext, useRef, useState, useEffect, useMemo, useContext, useCallback, useLayoutEffect } from 'react';
+
+class ExpoStorageAdapter {
+    constructor() {
+        this.db = null;
+        this.memoryFallback = null;
+        try {
+            const { openDatabaseSync } = require('expo-sqlite');
+            const database = openDatabaseSync('nami-sdk-storage');
+            database.runSync('CREATE TABLE IF NOT EXISTS kv (key TEXT PRIMARY KEY, value TEXT)');
+            this.db = database;
+        }
+        catch {
+            this.memoryFallback = new Map();
+        }
+    }
+    getItem(key) {
+        if (this.memoryFallback)
+            return this.memoryFallback.get(key) ?? null;
+        const database = this.db;
+        if (!database)
+            return null;
+        try {
+            const row = database.getFirstSync('SELECT value FROM kv WHERE key = ?', [key]);
+            return row?.value ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    setItem(key, value) {
+        if (this.memoryFallback) {
+            this.memoryFallback.set(key, value);
+            return;
+        }
+        const database = this.db;
+        if (!database)
+            return;
+        try {
+            database.runSync('INSERT OR REPLACE INTO kv (key, value) VALUES (?, ?)', [key, value]);
+        }
+        catch {
+            /* silent */
+        }
+    }
+    removeItem(key) {
+        if (this.memoryFallback) {
+            this.memoryFallback.delete(key);
+            return;
+        }
+        const database = this.db;
+        if (!database)
+            return;
+        try {
+            database.runSync('DELETE FROM kv WHERE key = ?', [key]);
+        }
+        catch {
+            /* silent */
+        }
+    }
+    clear() {
+        if (this.memoryFallback) {
+            this.memoryFallback.clear();
+            return;
+        }
+        const database = this.db;
+        if (!database)
+            return;
+        try {
+            database.runSync('DELETE FROM kv');
+        }
+        catch {
+            /* silent */
+        }
+    }
+    getAllKeys() {
+        if (this.memoryFallback)
+            return [...this.memoryFallback.keys()];
+        const database = this.db;
+        if (!database)
+            return [];
+        try {
+            const rows = database.getAllSync('SELECT key FROM kv');
+            return rows.map((row) => row.key).filter((key) => typeof key === 'string');
+        }
+        catch {
+            return [];
+        }
+    }
+}
+
+function getExpoDevice() { return require('expo-device'); }
+function getExpoConstants() { return require('expo-constants').default; }
+function getExpoLocalization() { return require('expo-localization'); }
+const SDK_CLIENT = 'expo';
+const TV_SCALE_FACTORS = {
+    720: 0.67,
+    1080: 1,
+    1440: 1.5,
+    2160: 2,
+};
+class ExpoDeviceAdapter {
+    getDeviceData() {
+        let osName = Platform.OS;
+        let osVersion = String(Platform.Version);
+        let deviceModel;
+        try {
+            const device = getExpoDevice();
+            if (device) {
+                osName = device.osName ?? osName;
+                osVersion = device.osVersion ?? osVersion;
+                deviceModel = device.modelName ?? device.modelId;
+            }
+        }
+        catch { /* expo-device unavailable */ }
+        return {
+            os_name: osName,
+            os_version: osVersion,
+            browser_name: '',
+            browser_version: '',
+            sdk_client: SDK_CLIENT,
+            sdk_version: NAMI_SDK_PACKAGE_VERSION,
+            language: this.getLanguage(),
+            ...(deviceModel ? { device_model: deviceModel } : {}),
+            extended_platform: 'expo',
+            extended_platform_version: this.getExpoVersion(),
+        };
+    }
+    getExpoVersion() {
+        try {
+            const constants = getExpoConstants();
+            return constants?.expoConfig?.sdkVersion ?? '';
+        }
+        catch {
+            return '';
+        }
+    }
+    getDeviceFormFactor() {
+        try {
+            const device = getExpoDevice();
+            const deviceType = device?.deviceType;
+            const DeviceType = device?.DeviceType;
+            if (DeviceType && deviceType === DeviceType.TV)
+                return 'television';
+            if (DeviceType && deviceType === DeviceType.TABLET)
+                return 'tablet';
+        }
+        catch {
+            // expo-device may not be available (e.g., Expo Go without native modules)
+        }
+        return 'phone';
+    }
+    getDeviceScaleFactor(formFactor) {
+        const ff = formFactor ?? this.getDeviceFormFactor();
+        if (ff !== 'television')
+            return 1;
+        const { height } = Dimensions.get('window');
+        const closest = Object.keys(TV_SCALE_FACTORS)
+            .map(Number)
+            .reduce((prev, curr) => Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev);
+        return TV_SCALE_FACTORS[closest] ?? 1;
+    }
+    generateUUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+    getScreenInfo() {
+        const { width, height, scale } = Dimensions.get('window');
+        return { width, height, scale };
+    }
+    getLanguage() {
+        try {
+            const { getLocales } = getExpoLocalization();
+            const locales = getLocales();
+            return locales?.[0]?.languageCode ?? 'en';
+        }
+        catch {
+            return 'en';
+        }
+    }
+}
+
+/**
+ * Expo UI adapter.
+ * Uses a listener pattern so the Expo PaywallView component can register
+ * itself to receive create/reRender/flowNav events from the core SDK.
+ */
+class ExpoUIAdapter {
+    constructor() {
+        this.paywallListener = null;
+        this.reRenderListener = null;
+        this.flowNavListener = null;
+    }
+    onPaywallRequested(listener) {
+        this.paywallListener = listener;
+        return () => { this.paywallListener = null; };
+    }
+    onReRenderRequested(listener) {
+        this.reRenderListener = listener;
+        return () => { this.reRenderListener = null; };
+    }
+    onFlowNavigationRequested(listener) {
+        this.flowNavListener = listener;
+        return () => { this.flowNavListener = null; };
+    }
+    createPaywall(type, value, context) {
+        // In Expo, we don't create a DOM element. Instead, we notify the
+        // registered PaywallView component to present the paywall.
+        // The PaywallView resolves the paywall data using the same core logic.
+        if (this.paywallListener) {
+            // Build minimal paywall info for navigation
+            const paywallInfo = { type, value, context };
+            this.paywallListener(paywallInfo, context);
+        }
+        return { type, value, context };
+    }
+    reRenderPaywall() {
+        this.reRenderListener?.();
+    }
+    flowNavigateToScreen(paywall, options) {
+        this.flowNavListener?.(paywall, options);
+    }
+}
+
+function getExpoNamiIap() {
+    return require('@namiml/expo-nami-iap');
+}
+function getPurchaseErrorMessage(error) {
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === 'object' && error && 'message' in error) {
+        const message = error.message;
+        if (typeof message === 'string' && message.length > 0) {
+            return message;
+        }
+    }
+    return 'Purchase failed';
+}
+class ExpoPurchaseAdapter {
+    async getProducts(skuIds) {
+        const { initConnection, getProducts } = getExpoNamiIap();
+        await initConnection();
+        return getProducts(skuIds);
+    }
+    async purchase(skuId, context) {
+        const { initConnection, purchase } = getExpoNamiIap();
+        await initConnection();
+        try {
+            const tx = await purchase({
+                skuId,
+                offerId: context?.offerId,
+                appAccountToken: context?.appAccountToken,
+            });
+            return {
+                success: true,
+                transactionId: tx.transactionId,
+                receipt: tx.receipt,
+                skuId: tx.skuId,
+            };
+        }
+        catch (error) {
+            return { success: false, skuId, message: getPurchaseErrorMessage(error) };
+        }
+    }
+    async restorePurchases() {
+        const { initConnection, restorePurchases } = getExpoNamiIap();
+        await initConnection();
+        const txs = await restorePurchases();
+        return txs.map((t) => ({ success: true, transactionId: t.transactionId, receipt: t.receipt, skuId: t.skuId }));
+    }
+}
+
+const expoUIAdapter = new ExpoUIAdapter();
+let adaptersRegistered = false;
+function registerExpoAdapters() {
+    if (adaptersRegistered) {
+        return;
+    }
+    try {
+        registerPlatformAdapters({
+            storage: new ExpoStorageAdapter(),
+            device: new ExpoDeviceAdapter(),
+            ui: expoUIAdapter,
+        });
+        registerPurchaseAdapter(new ExpoPurchaseAdapter());
+        adaptersRegistered = true;
+    }
+    catch (error) {
+        logger.warn('[NamiExpo] Failed to register Expo adapters.', error);
+    }
+}
+registerExpoAdapters();
+
+class Nami {
+    static get sdkVersion() {
+        return Nami$1.sdkVersion();
+    }
+    static sdkPackageVersion() {
+        return Nami$1.sdkPackageVersion();
+    }
+    static async configure(config) {
+        return Nami$1.configure(config);
+    }
+    static async reset() {
+        await Nami$1.reset?.();
+    }
+}
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production_min = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production_min;
+
+function requireReactJsxRuntime_production_min () {
+	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+	hasRequiredReactJsxRuntime_production_min = 1;
+var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:true,ref:true,__self:true,__source:true};
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a) void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	return reactJsxRuntime_production_min;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	var React = require$$0;
+
+	// ATTENTION
+	// When adding new symbols to this file,
+	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+	// The Symbol used to tag the ReactElement-like types.
+	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+	var REACT_MEMO_TYPE = Symbol.for('react.memo');
+	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+	var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+	var FAUX_ITERATOR_SYMBOL = '@@iterator';
+	function getIteratorFn(maybeIterable) {
+	  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+	    return null;
+	  }
+
+	  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+	  if (typeof maybeIterator === 'function') {
+	    return maybeIterator;
+	  }
+
+	  return null;
+	}
+
+	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+	function error(format) {
+	  {
+	    {
+	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	        args[_key2 - 1] = arguments[_key2];
+	      }
+
+	      printWarning('error', format, args);
+	    }
+	  }
+	}
+
+	function printWarning(level, format, args) {
+	  // When changing this logic, you might want to also
+	  // update consoleWithStackDev.www.js as well.
+	  {
+	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+	    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+	    if (stack !== '') {
+	      format += '%s';
+	      args = args.concat([stack]);
+	    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+	    var argsWithFormat = args.map(function (item) {
+	      return String(item);
+	    }); // Careful: RN currently depends on this prefix
+
+	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+	    // breaks IE9: https://github.com/facebook/react/issues/13610
+	    // eslint-disable-next-line react-internal/no-production-logging
+
+	    Function.prototype.apply.call(console[level], console, argsWithFormat);
+	  }
+	}
+
+	// -----------------------------------------------------------------------------
+
+	var enableScopeAPI = false; // Experimental Create Event Handle API.
+	var enableCacheElement = false;
+	var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+	// stuff. Intended to enable React core members to more easily debug scheduling
+	// issues in DEV builds.
+
+	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+	var REACT_MODULE_REFERENCE;
+
+	{
+	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+	}
+
+	function isValidElementType(type) {
+	  if (typeof type === 'string' || typeof type === 'function') {
+	    return true;
+	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+	    return true;
+	  }
+
+	  if (typeof type === 'object' && type !== null) {
+	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+	    // types supported by any Flight configuration anywhere since
+	    // we don't know which Flight build this will end up being used
+	    // with.
+	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+	      return true;
+	    }
+	  }
+
+	  return false;
+	}
+
+	function getWrappedName(outerType, innerType, wrapperName) {
+	  var displayName = outerType.displayName;
+
+	  if (displayName) {
+	    return displayName;
+	  }
+
+	  var functionName = innerType.displayName || innerType.name || '';
+	  return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+	} // Keep in sync with react-reconciler/getComponentNameFromFiber
+
+
+	function getContextName(type) {
+	  return type.displayName || 'Context';
+	} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+
+
+	function getComponentNameFromType(type) {
+	  if (type == null) {
+	    // Host root, text node or just invalid type.
+	    return null;
+	  }
+
+	  {
+	    if (typeof type.tag === 'number') {
+	      error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
+	    }
+	  }
+
+	  if (typeof type === 'function') {
+	    return type.displayName || type.name || null;
+	  }
+
+	  if (typeof type === 'string') {
+	    return type;
+	  }
+
+	  switch (type) {
+	    case REACT_FRAGMENT_TYPE:
+	      return 'Fragment';
+
+	    case REACT_PORTAL_TYPE:
+	      return 'Portal';
+
+	    case REACT_PROFILER_TYPE:
+	      return 'Profiler';
+
+	    case REACT_STRICT_MODE_TYPE:
+	      return 'StrictMode';
+
+	    case REACT_SUSPENSE_TYPE:
+	      return 'Suspense';
+
+	    case REACT_SUSPENSE_LIST_TYPE:
+	      return 'SuspenseList';
+
+	  }
+
+	  if (typeof type === 'object') {
+	    switch (type.$$typeof) {
+	      case REACT_CONTEXT_TYPE:
+	        var context = type;
+	        return getContextName(context) + '.Consumer';
+
+	      case REACT_PROVIDER_TYPE:
+	        var provider = type;
+	        return getContextName(provider._context) + '.Provider';
+
+	      case REACT_FORWARD_REF_TYPE:
+	        return getWrappedName(type, type.render, 'ForwardRef');
+
+	      case REACT_MEMO_TYPE:
+	        var outerName = type.displayName || null;
+
+	        if (outerName !== null) {
+	          return outerName;
+	        }
+
+	        return getComponentNameFromType(type.type) || 'Memo';
+
+	      case REACT_LAZY_TYPE:
+	        {
+	          var lazyComponent = type;
+	          var payload = lazyComponent._payload;
+	          var init = lazyComponent._init;
+
+	          try {
+	            return getComponentNameFromType(init(payload));
+	          } catch (x) {
+	            return null;
+	          }
+	        }
+
+	      // eslint-disable-next-line no-fallthrough
+	    }
+	  }
+
+	  return null;
+	}
+
+	var assign = Object.assign;
+
+	// Helpers to patch console.logs to avoid logging during side-effect free
+	// replaying on render function. This currently only patches the object
+	// lazily which won't cover if the log function was extracted eagerly.
+	// We could also eagerly patch the method.
+	var disabledDepth = 0;
+	var prevLog;
+	var prevInfo;
+	var prevWarn;
+	var prevError;
+	var prevGroup;
+	var prevGroupCollapsed;
+	var prevGroupEnd;
+
+	function disabledLog() {}
+
+	disabledLog.__reactDisabledLog = true;
+	function disableLogs() {
+	  {
+	    if (disabledDepth === 0) {
+	      /* eslint-disable react-internal/no-production-logging */
+	      prevLog = console.log;
+	      prevInfo = console.info;
+	      prevWarn = console.warn;
+	      prevError = console.error;
+	      prevGroup = console.group;
+	      prevGroupCollapsed = console.groupCollapsed;
+	      prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+	      var props = {
+	        configurable: true,
+	        enumerable: true,
+	        value: disabledLog,
+	        writable: true
+	      }; // $FlowFixMe Flow thinks console is immutable.
+
+	      Object.defineProperties(console, {
+	        info: props,
+	        log: props,
+	        warn: props,
+	        error: props,
+	        group: props,
+	        groupCollapsed: props,
+	        groupEnd: props
+	      });
+	      /* eslint-enable react-internal/no-production-logging */
+	    }
+
+	    disabledDepth++;
+	  }
+	}
+	function reenableLogs() {
+	  {
+	    disabledDepth--;
+
+	    if (disabledDepth === 0) {
+	      /* eslint-disable react-internal/no-production-logging */
+	      var props = {
+	        configurable: true,
+	        enumerable: true,
+	        writable: true
+	      }; // $FlowFixMe Flow thinks console is immutable.
+
+	      Object.defineProperties(console, {
+	        log: assign({}, props, {
+	          value: prevLog
+	        }),
+	        info: assign({}, props, {
+	          value: prevInfo
+	        }),
+	        warn: assign({}, props, {
+	          value: prevWarn
+	        }),
+	        error: assign({}, props, {
+	          value: prevError
+	        }),
+	        group: assign({}, props, {
+	          value: prevGroup
+	        }),
+	        groupCollapsed: assign({}, props, {
+	          value: prevGroupCollapsed
+	        }),
+	        groupEnd: assign({}, props, {
+	          value: prevGroupEnd
+	        })
+	      });
+	      /* eslint-enable react-internal/no-production-logging */
+	    }
+
+	    if (disabledDepth < 0) {
+	      error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+	    }
+	  }
+	}
+
+	var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+	var prefix;
+	function describeBuiltInComponentFrame(name, source, ownerFn) {
+	  {
+	    if (prefix === undefined) {
+	      // Extract the VM specific prefix used by each line.
+	      try {
+	        throw Error();
+	      } catch (x) {
+	        var match = x.stack.trim().match(/\n( *(at )?)/);
+	        prefix = match && match[1] || '';
+	      }
+	    } // We use the prefix to ensure our stacks line up with native stack frames.
+
+
+	    return '\n' + prefix + name;
+	  }
+	}
+	var reentry = false;
+	var componentFrameCache;
+
+	{
+	  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+	  componentFrameCache = new PossiblyWeakMap();
+	}
+
+	function describeNativeComponentFrame(fn, construct) {
+	  // If something asked for a stack inside a fake render, it should get ignored.
+	  if ( !fn || reentry) {
+	    return '';
+	  }
+
+	  {
+	    var frame = componentFrameCache.get(fn);
+
+	    if (frame !== undefined) {
+	      return frame;
+	    }
+	  }
+
+	  var control;
+	  reentry = true;
+	  var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+
+	  Error.prepareStackTrace = undefined;
+	  var previousDispatcher;
+
+	  {
+	    previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+	    // for warnings.
+
+	    ReactCurrentDispatcher.current = null;
+	    disableLogs();
+	  }
+
+	  try {
+	    // This should throw.
+	    if (construct) {
+	      // Something should be setting the props in the constructor.
+	      var Fake = function () {
+	        throw Error();
+	      }; // $FlowFixMe
+
+
+	      Object.defineProperty(Fake.prototype, 'props', {
+	        set: function () {
+	          // We use a throwing setter instead of frozen or non-writable props
+	          // because that won't throw in a non-strict mode function.
+	          throw Error();
+	        }
+	      });
+
+	      if (typeof Reflect === 'object' && Reflect.construct) {
+	        // We construct a different control for this case to include any extra
+	        // frames added by the construct call.
+	        try {
+	          Reflect.construct(Fake, []);
+	        } catch (x) {
+	          control = x;
+	        }
+
+	        Reflect.construct(fn, [], Fake);
+	      } else {
+	        try {
+	          Fake.call();
+	        } catch (x) {
+	          control = x;
+	        }
+
+	        fn.call(Fake.prototype);
+	      }
+	    } else {
+	      try {
+	        throw Error();
+	      } catch (x) {
+	        control = x;
+	      }
+
+	      fn();
+	    }
+	  } catch (sample) {
+	    // This is inlined manually because closure doesn't do it for us.
+	    if (sample && control && typeof sample.stack === 'string') {
+	      // This extracts the first frame from the sample that isn't also in the control.
+	      // Skipping one frame that we assume is the frame that calls the two.
+	      var sampleLines = sample.stack.split('\n');
+	      var controlLines = control.stack.split('\n');
+	      var s = sampleLines.length - 1;
+	      var c = controlLines.length - 1;
+
+	      while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+	        // We expect at least one stack frame to be shared.
+	        // Typically this will be the root most one. However, stack frames may be
+	        // cut off due to maximum stack limits. In this case, one maybe cut off
+	        // earlier than the other. We assume that the sample is longer or the same
+	        // and there for cut off earlier. So we should find the root most frame in
+	        // the sample somewhere in the control.
+	        c--;
+	      }
+
+	      for (; s >= 1 && c >= 0; s--, c--) {
+	        // Next we find the first one that isn't the same which should be the
+	        // frame that called our sample function and the control.
+	        if (sampleLines[s] !== controlLines[c]) {
+	          // In V8, the first line is describing the message but other VMs don't.
+	          // If we're about to return the first line, and the control is also on the same
+	          // line, that's a pretty good indicator that our sample threw at same line as
+	          // the control. I.e. before we entered the sample frame. So we ignore this result.
+	          // This can happen if you passed a class to function component, or non-function.
+	          if (s !== 1 || c !== 1) {
+	            do {
+	              s--;
+	              c--; // We may still have similar intermediate frames from the construct call.
+	              // The next one that isn't the same should be our match though.
+
+	              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+	                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+	                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+	                // but we have a user-provided "displayName"
+	                // splice it in to make the stack more readable.
+
+
+	                if (fn.displayName && _frame.includes('<anonymous>')) {
+	                  _frame = _frame.replace('<anonymous>', fn.displayName);
+	                }
+
+	                {
+	                  if (typeof fn === 'function') {
+	                    componentFrameCache.set(fn, _frame);
+	                  }
+	                } // Return the line we found.
+
+
+	                return _frame;
+	              }
+	            } while (s >= 1 && c >= 0);
+	          }
+
+	          break;
+	        }
+	      }
+	    }
+	  } finally {
+	    reentry = false;
+
+	    {
+	      ReactCurrentDispatcher.current = previousDispatcher;
+	      reenableLogs();
+	    }
+
+	    Error.prepareStackTrace = previousPrepareStackTrace;
+	  } // Fallback to just using the name if we couldn't make it throw.
+
+
+	  var name = fn ? fn.displayName || fn.name : '';
+	  var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+
+	  {
+	    if (typeof fn === 'function') {
+	      componentFrameCache.set(fn, syntheticFrame);
+	    }
+	  }
+
+	  return syntheticFrame;
+	}
+	function describeFunctionComponentFrame(fn, source, ownerFn) {
+	  {
+	    return describeNativeComponentFrame(fn, false);
+	  }
+	}
+
+	function shouldConstruct(Component) {
+	  var prototype = Component.prototype;
+	  return !!(prototype && prototype.isReactComponent);
+	}
+
+	function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+
+	  if (type == null) {
+	    return '';
+	  }
+
+	  if (typeof type === 'function') {
+	    {
+	      return describeNativeComponentFrame(type, shouldConstruct(type));
+	    }
+	  }
+
+	  if (typeof type === 'string') {
+	    return describeBuiltInComponentFrame(type);
+	  }
+
+	  switch (type) {
+	    case REACT_SUSPENSE_TYPE:
+	      return describeBuiltInComponentFrame('Suspense');
+
+	    case REACT_SUSPENSE_LIST_TYPE:
+	      return describeBuiltInComponentFrame('SuspenseList');
+	  }
+
+	  if (typeof type === 'object') {
+	    switch (type.$$typeof) {
+	      case REACT_FORWARD_REF_TYPE:
+	        return describeFunctionComponentFrame(type.render);
+
+	      case REACT_MEMO_TYPE:
+	        // Memo may contain any component type so we recursively resolve it.
+	        return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+
+	      case REACT_LAZY_TYPE:
+	        {
+	          var lazyComponent = type;
+	          var payload = lazyComponent._payload;
+	          var init = lazyComponent._init;
+
+	          try {
+	            // Lazy may contain any component type so we recursively resolve it.
+	            return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+	          } catch (x) {}
+	        }
+	    }
+	  }
+
+	  return '';
+	}
+
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+	var loggedTypeFailures = {};
+	var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+
+	function setCurrentlyValidatingElement(element) {
+	  {
+	    if (element) {
+	      var owner = element._owner;
+	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+	      ReactDebugCurrentFrame.setExtraStackFrame(stack);
+	    } else {
+	      ReactDebugCurrentFrame.setExtraStackFrame(null);
+	    }
+	  }
+	}
+
+	function checkPropTypes(typeSpecs, values, location, componentName, element) {
+	  {
+	    // $FlowFixMe This is okay but Flow doesn't know it.
+	    var has = Function.call.bind(hasOwnProperty);
+
+	    for (var typeSpecName in typeSpecs) {
+	      if (has(typeSpecs, typeSpecName)) {
+	        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+	        // fail the render phase where it didn't fail before. So we log it.
+	        // After these have been cleaned up, we'll let them throw.
+
+	        try {
+	          // This is intentionally an invariant that gets caught. It's the same
+	          // behavior as without this statement except with a better message.
+	          if (typeof typeSpecs[typeSpecName] !== 'function') {
+	            // eslint-disable-next-line react-internal/prod-error-codes
+	            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+	            err.name = 'Invariant Violation';
+	            throw err;
+	          }
+
+	          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+	        } catch (ex) {
+	          error$1 = ex;
+	        }
+
+	        if (error$1 && !(error$1 instanceof Error)) {
+	          setCurrentlyValidatingElement(element);
+
+	          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+	          setCurrentlyValidatingElement(null);
+	        }
+
+	        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+	          // Only monitor this failure once because there tends to be a lot of the
+	          // same error.
+	          loggedTypeFailures[error$1.message] = true;
+	          setCurrentlyValidatingElement(element);
+
+	          error('Failed %s type: %s', location, error$1.message);
+
+	          setCurrentlyValidatingElement(null);
+	        }
+	      }
+	    }
+	  }
+	}
+
+	var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+	function isArray(a) {
+	  return isArrayImpl(a);
+	}
+
+	/*
+	 * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+	 * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+	 *
+	 * The functions in this module will throw an easier-to-understand,
+	 * easier-to-debug exception with a clear errors message message explaining the
+	 * problem. (Instead of a confusing exception thrown inside the implementation
+	 * of the `value` object).
+	 */
+	// $FlowFixMe only called in DEV, so void return is not possible.
+	function typeName(value) {
+	  {
+	    // toStringTag is needed for namespaced types like Temporal.Instant
+	    var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+	    var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+	    return type;
+	  }
+	} // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+	function willCoercionThrow(value) {
+	  {
+	    try {
+	      testStringCoercion(value);
+	      return false;
+	    } catch (e) {
+	      return true;
+	    }
+	  }
+	}
+
+	function testStringCoercion(value) {
+	  // If you ended up here by following an exception call stack, here's what's
+	  // happened: you supplied an object or symbol value to React (as a prop, key,
+	  // DOM attribute, CSS property, string ref, etc.) and when React tried to
+	  // coerce it to a string using `'' + value`, an exception was thrown.
+	  //
+	  // The most common types that will cause this exception are `Symbol` instances
+	  // and Temporal objects like `Temporal.Instant`. But any object that has a
+	  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+	  // exception. (Library authors do this to prevent users from using built-in
+	  // numeric operators like `+` or comparison operators like `>=` because custom
+	  // methods are needed to perform accurate arithmetic or comparison.)
+	  //
+	  // To fix the problem, coerce this object or symbol value to a string before
+	  // passing it to React. The most reliable way is usually `String(value)`.
+	  //
+	  // To find which value is throwing, check the browser or debugger console.
+	  // Before this exception was thrown, there should be `console.error` output
+	  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+	  // problem and how that type was used: key, atrribute, input value prop, etc.
+	  // In most cases, this console output also shows the component and its
+	  // ancestor components where the exception happened.
+	  //
+	  // eslint-disable-next-line react-internal/safe-string-coercion
+	  return '' + value;
+	}
+	function checkKeyStringCoercion(value) {
+	  {
+	    if (willCoercionThrow(value)) {
+	      error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+	      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+	    }
+	  }
+	}
+
+	var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+	var RESERVED_PROPS = {
+	  key: true,
+	  ref: true,
+	  __self: true,
+	  __source: true
+	};
+	var specialPropKeyWarningShown;
+	var specialPropRefWarningShown;
+
+	function hasValidRef(config) {
+	  {
+	    if (hasOwnProperty.call(config, 'ref')) {
+	      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+	      if (getter && getter.isReactWarning) {
+	        return false;
+	      }
+	    }
+	  }
+
+	  return config.ref !== undefined;
+	}
+
+	function hasValidKey(config) {
+	  {
+	    if (hasOwnProperty.call(config, 'key')) {
+	      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+	      if (getter && getter.isReactWarning) {
+	        return false;
+	      }
+	    }
+	  }
+
+	  return config.key !== undefined;
+	}
+
+	function warnIfStringRefCannotBeAutoConverted(config, self) {
+	  {
+	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self) ;
+	  }
+	}
+
+	function defineKeyPropWarningGetter(props, displayName) {
+	  {
+	    var warnAboutAccessingKey = function () {
+	      if (!specialPropKeyWarningShown) {
+	        specialPropKeyWarningShown = true;
+
+	        error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+	      }
+	    };
+
+	    warnAboutAccessingKey.isReactWarning = true;
+	    Object.defineProperty(props, 'key', {
+	      get: warnAboutAccessingKey,
+	      configurable: true
+	    });
+	  }
+	}
+
+	function defineRefPropWarningGetter(props, displayName) {
+	  {
+	    var warnAboutAccessingRef = function () {
+	      if (!specialPropRefWarningShown) {
+	        specialPropRefWarningShown = true;
+
+	        error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+	      }
+	    };
+
+	    warnAboutAccessingRef.isReactWarning = true;
+	    Object.defineProperty(props, 'ref', {
+	      get: warnAboutAccessingRef,
+	      configurable: true
+	    });
+	  }
+	}
+	/**
+	 * Factory method to create a new React element. This no longer adheres to
+	 * the class pattern, so do not use new to call it. Also, instanceof check
+	 * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+	 * if something is a React Element.
+	 *
+	 * @param {*} type
+	 * @param {*} props
+	 * @param {*} key
+	 * @param {string|object} ref
+	 * @param {*} owner
+	 * @param {*} self A *temporary* helper to detect places where `this` is
+	 * different from the `owner` when React.createElement is called, so that we
+	 * can warn. We want to get rid of owner and replace string `ref`s with arrow
+	 * functions, and as long as `this` and owner are the same, there will be no
+	 * change in behavior.
+	 * @param {*} source An annotation object (added by a transpiler or otherwise)
+	 * indicating filename, line number, and/or other information.
+	 * @internal
+	 */
+
+
+	var ReactElement = function (type, key, ref, self, source, owner, props) {
+	  var element = {
+	    // This tag allows us to uniquely identify this as a React Element
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    // Built-in properties that belong on the element
+	    type: type,
+	    key: key,
+	    ref: ref,
+	    props: props,
+	    // Record the component responsible for creating this element.
+	    _owner: owner
+	  };
+
+	  {
+	    // The validation flag is currently mutative. We put it on
+	    // an external backing store so that we can freeze the whole object.
+	    // This can be replaced with a WeakMap once they are implemented in
+	    // commonly used development environments.
+	    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+	    // the validation flag non-enumerable (where possible, which should
+	    // include every environment we run tests in), so the test framework
+	    // ignores it.
+
+	    Object.defineProperty(element._store, 'validated', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: true,
+	      value: false
+	    }); // self and source are DEV only properties.
+
+	    Object.defineProperty(element, '_self', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: false,
+	      value: self
+	    }); // Two elements created in two different places should be considered
+	    // equal for testing purposes and therefore we hide it from enumeration.
+
+	    Object.defineProperty(element, '_source', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: false,
+	      value: source
+	    });
+
+	    if (Object.freeze) {
+	      Object.freeze(element.props);
+	      Object.freeze(element);
+	    }
+	  }
+
+	  return element;
+	};
+	/**
+	 * https://github.com/reactjs/rfcs/pull/107
+	 * @param {*} type
+	 * @param {object} props
+	 * @param {string} key
+	 */
+
+	function jsxDEV(type, config, maybeKey, source, self) {
+	  {
+	    var propName; // Reserved names are extracted
+
+	    var props = {};
+	    var key = null;
+	    var ref = null; // Currently, key can be spread in as a prop. This causes a potential
+	    // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+	    // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+	    // but as an intermediary step, we will use jsxDEV for everything except
+	    // <div {...props} key="Hi" />, because we aren't currently able to tell if
+	    // key is explicitly declared to be undefined or not.
+
+	    if (maybeKey !== undefined) {
+	      {
+	        checkKeyStringCoercion(maybeKey);
+	      }
+
+	      key = '' + maybeKey;
+	    }
+
+	    if (hasValidKey(config)) {
+	      {
+	        checkKeyStringCoercion(config.key);
+	      }
+
+	      key = '' + config.key;
+	    }
+
+	    if (hasValidRef(config)) {
+	      ref = config.ref;
+	      warnIfStringRefCannotBeAutoConverted(config, self);
+	    } // Remaining properties are added to a new props object
+
+
+	    for (propName in config) {
+	      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+	        props[propName] = config[propName];
+	      }
+	    } // Resolve default props
+
+
+	    if (type && type.defaultProps) {
+	      var defaultProps = type.defaultProps;
+
+	      for (propName in defaultProps) {
+	        if (props[propName] === undefined) {
+	          props[propName] = defaultProps[propName];
+	        }
+	      }
+	    }
+
+	    if (key || ref) {
+	      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+	      if (key) {
+	        defineKeyPropWarningGetter(props, displayName);
+	      }
+
+	      if (ref) {
+	        defineRefPropWarningGetter(props, displayName);
+	      }
+	    }
+
+	    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+	  }
+	}
+
+	var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+	var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+	function setCurrentlyValidatingElement$1(element) {
+	  {
+	    if (element) {
+	      var owner = element._owner;
+	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+	      ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+	    } else {
+	      ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+	    }
+	  }
+	}
+
+	var propTypesMisspellWarningShown;
+
+	{
+	  propTypesMisspellWarningShown = false;
+	}
+	/**
+	 * Verifies the object is a ReactElement.
+	 * See https://reactjs.org/docs/react-api.html#isvalidelement
+	 * @param {?object} object
+	 * @return {boolean} True if `object` is a ReactElement.
+	 * @final
+	 */
+
+
+	function isValidElement(object) {
+	  {
+	    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	  }
+	}
+
+	function getDeclarationErrorAddendum() {
+	  {
+	    if (ReactCurrentOwner$1.current) {
+	      var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
+
+	      if (name) {
+	        return '\n\nCheck the render method of `' + name + '`.';
+	      }
+	    }
+
+	    return '';
+	  }
+	}
+
+	function getSourceInfoErrorAddendum(source) {
+	  {
+
+	    return '';
+	  }
+	}
+	/**
+	 * Warn if there's no key explicitly set on dynamic arrays of children or
+	 * object keys are not valid. This allows us to keep track of children between
+	 * updates.
+	 */
+
+
+	var ownerHasKeyUseWarning = {};
+
+	function getCurrentComponentErrorInfo(parentType) {
+	  {
+	    var info = getDeclarationErrorAddendum();
+
+	    if (!info) {
+	      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+	      if (parentName) {
+	        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+	      }
+	    }
+
+	    return info;
+	  }
+	}
+	/**
+	 * Warn if the element doesn't have an explicit key assigned to it.
+	 * This element is in an array. The array could grow and shrink or be
+	 * reordered. All children that haven't already been validated are required to
+	 * have a "key" property assigned to it. Error statuses are cached so a warning
+	 * will only be shown once.
+	 *
+	 * @internal
+	 * @param {ReactElement} element Element that requires a key.
+	 * @param {*} parentType element's parent's type.
+	 */
+
+
+	function validateExplicitKey(element, parentType) {
+	  {
+	    if (!element._store || element._store.validated || element.key != null) {
+	      return;
+	    }
+
+	    element._store.validated = true;
+	    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+	    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+	      return;
+	    }
+
+	    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+	    // property, it may be the creator of the child that's responsible for
+	    // assigning it a key.
+
+	    var childOwner = '';
+
+	    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+	      // Give the component that originally created this child.
+	      childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
+	    }
+
+	    setCurrentlyValidatingElement$1(element);
+
+	    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+	    setCurrentlyValidatingElement$1(null);
+	  }
+	}
+	/**
+	 * Ensure that every element either is passed in a static location, in an
+	 * array with an explicit keys property defined, or in an object literal
+	 * with valid key property.
+	 *
+	 * @internal
+	 * @param {ReactNode} node Statically passed child of any type.
+	 * @param {*} parentType node's parent's type.
+	 */
+
+
+	function validateChildKeys(node, parentType) {
+	  {
+	    if (typeof node !== 'object') {
+	      return;
+	    }
+
+	    if (isArray(node)) {
+	      for (var i = 0; i < node.length; i++) {
+	        var child = node[i];
+
+	        if (isValidElement(child)) {
+	          validateExplicitKey(child, parentType);
+	        }
+	      }
+	    } else if (isValidElement(node)) {
+	      // This element was passed in a valid location.
+	      if (node._store) {
+	        node._store.validated = true;
+	      }
+	    } else if (node) {
+	      var iteratorFn = getIteratorFn(node);
+
+	      if (typeof iteratorFn === 'function') {
+	        // Entry iterators used to provide implicit keys,
+	        // but now we print a separate warning for them later.
+	        if (iteratorFn !== node.entries) {
+	          var iterator = iteratorFn.call(node);
+	          var step;
+
+	          while (!(step = iterator.next()).done) {
+	            if (isValidElement(step.value)) {
+	              validateExplicitKey(step.value, parentType);
+	            }
+	          }
+	        }
+	      }
+	    }
+	  }
+	}
+	/**
+	 * Given an element, validate that its props follow the propTypes definition,
+	 * provided by the type.
+	 *
+	 * @param {ReactElement} element
+	 */
+
+
+	function validatePropTypes(element) {
+	  {
+	    var type = element.type;
+
+	    if (type === null || type === undefined || typeof type === 'string') {
+	      return;
+	    }
+
+	    var propTypes;
+
+	    if (typeof type === 'function') {
+	      propTypes = type.propTypes;
+	    } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
+	    // Inner props are checked in the reconciler.
+	    type.$$typeof === REACT_MEMO_TYPE)) {
+	      propTypes = type.propTypes;
+	    } else {
+	      return;
+	    }
+
+	    if (propTypes) {
+	      // Intentionally inside to avoid triggering lazy initializers:
+	      var name = getComponentNameFromType(type);
+	      checkPropTypes(propTypes, element.props, 'prop', name, element);
+	    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+	      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+	      var _name = getComponentNameFromType(type);
+
+	      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+	    }
+
+	    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+	      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+	    }
+	  }
+	}
+	/**
+	 * Given a fragment, validate that it can only be provided with fragment props
+	 * @param {ReactElement} fragment
+	 */
+
+
+	function validateFragmentProps(fragment) {
+	  {
+	    var keys = Object.keys(fragment.props);
+
+	    for (var i = 0; i < keys.length; i++) {
+	      var key = keys[i];
+
+	      if (key !== 'children' && key !== 'key') {
+	        setCurrentlyValidatingElement$1(fragment);
+
+	        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+	        setCurrentlyValidatingElement$1(null);
+	        break;
+	      }
+	    }
+
+	    if (fragment.ref !== null) {
+	      setCurrentlyValidatingElement$1(fragment);
+
+	      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+	      setCurrentlyValidatingElement$1(null);
+	    }
+	  }
+	}
+
+	var didWarnAboutKeySpread = {};
+	function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+	  {
+	    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+	    // succeed and there will likely be errors in render.
+
+	    if (!validType) {
+	      var info = '';
+
+	      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+	        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+	      }
+
+	      var sourceInfo = getSourceInfoErrorAddendum();
+
+	      if (sourceInfo) {
+	        info += sourceInfo;
+	      } else {
+	        info += getDeclarationErrorAddendum();
+	      }
+
+	      var typeString;
+
+	      if (type === null) {
+	        typeString = 'null';
+	      } else if (isArray(type)) {
+	        typeString = 'array';
+	      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+	        typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
+	        info = ' Did you accidentally export a JSX literal instead of a component?';
+	      } else {
+	        typeString = typeof type;
+	      }
+
+	      error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
+	    }
+
+	    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+	    // TODO: Drop this when these are no longer allowed as the type argument.
+
+	    if (element == null) {
+	      return element;
+	    } // Skip key warning if the type isn't valid since our key validation logic
+	    // doesn't expect a non-string/function type and can throw confusing errors.
+	    // We don't want exception behavior to differ between dev and prod.
+	    // (Rendering will throw with a helpful message and as soon as the type is
+	    // fixed, the key warnings will appear.)
+
+
+	    if (validType) {
+	      var children = props.children;
+
+	      if (children !== undefined) {
+	        if (isStaticChildren) {
+	          if (isArray(children)) {
+	            for (var i = 0; i < children.length; i++) {
+	              validateChildKeys(children[i], type);
+	            }
+
+	            if (Object.freeze) {
+	              Object.freeze(children);
+	            }
+	          } else {
+	            error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
+	          }
+	        } else {
+	          validateChildKeys(children, type);
+	        }
+	      }
+	    }
+
+	    {
+	      if (hasOwnProperty.call(props, 'key')) {
+	        var componentName = getComponentNameFromType(type);
+	        var keys = Object.keys(props).filter(function (k) {
+	          return k !== 'key';
+	        });
+	        var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
+
+	        if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+	          var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+
+	          error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
+
+	          didWarnAboutKeySpread[componentName + beforeExample] = true;
+	        }
+	      }
+	    }
+
+	    if (type === REACT_FRAGMENT_TYPE) {
+	      validateFragmentProps(element);
+	    } else {
+	      validatePropTypes(element);
+	    }
+
+	    return element;
+	  }
+	} // These two functions exist to still get child warnings in dev
+	// even with the prod transform. This means that jsxDEV is purely
+	// opt-in behavior for better messages but that we won't stop
+	// giving you warnings if you use production apis.
+
+	function jsxWithValidationStatic(type, props, key) {
+	  {
+	    return jsxWithValidation(type, props, key, true);
+	  }
+	}
+	function jsxWithValidationDynamic(type, props, key) {
+	  {
+	    return jsxWithValidation(type, props, key, false);
+	  }
+	}
+
+	var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+	// for now we can ship identical prod functions
+
+	var jsxs =  jsxWithValidationStatic ;
+
+	reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_development.jsx = jsx;
+	reactJsxRuntime_development.jsxs = jsxs;
+	  })();
+	}
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production_min();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+function asMethod(candidate) {
+    return typeof candidate === 'function'
+        ? candidate
+        : undefined;
+}
+const PaywallCtx = createContext(null);
+const FirstFocusReadyCtx = createContext(null);
+function usePaywallContext() {
+    const ctx = useContext(PaywallCtx);
+    if (!ctx)
+        throw new Error('usePaywallContext must be used within a PaywallProvider');
+    return ctx;
+}
+function useFirstFocusReadyContext() {
+    const ctx = useContext(FirstFocusReadyCtx);
+    if (!ctx)
+        throw new Error('useFirstFocusReadyContext must be used within a PaywallProvider');
+    return ctx;
+}
+const PaywallProvider = ({ paywall, context, campaign, flow, onFirstFocusReady, children, }) => {
+    const providerRef = useRef(null);
+    const pageHistoryRef = useRef([]);
+    const [firstFocusReadyKey, setFirstFocusReadyKey] = useState(null);
+    const [state, setState] = useState(() => {
+        const provider = PaywallState.create(paywall, context, campaign);
+        if (flow)
+            provider.setFlow(flow);
+        providerRef.current = provider;
+        pageHistoryRef.current = [provider.state.currentPage ?? paywall.template?.initialState?.currentPage ?? 'page1'];
+        return cloneStateWithDynamicProps(provider.state, provider);
+    });
+    useEffect(() => {
+        const provider = providerRef.current;
+        if (!provider)
+            return;
+        const unsubscribe = provider.subscribe(() => {
+            setState(cloneStateWithDynamicProps(provider.state, provider));
+        });
+        return () => {
+            unsubscribe();
+            PaywallState.remove(provider);
+        };
+    }, []);
+    useEffect(() => {
+        const provider = providerRef.current;
+        if (!provider)
+            return;
+        setFirstFocusReadyKey(null);
+        provider.setPaywall(paywall, context, campaign);
+        if (flow)
+            provider.setFlow(flow);
+        pageHistoryRef.current = [provider.state.currentPage ?? paywall.template?.initialState?.currentPage ?? 'page1'];
+        setState(cloneStateWithDynamicProps(provider.state, provider));
+    }, [paywall, context, campaign, flow]);
+    const methods = useMemo(() => ({
+        setPaywall: (nextPaywall, nextContext, nextCampaign) => {
+            providerRef.current?.setPaywall(nextPaywall, nextContext, nextCampaign);
+            const provider = providerRef.current;
+            pageHistoryRef.current = [provider?.state.currentPage ?? nextPaywall.template?.initialState?.currentPage ?? 'page1'];
+        },
+        setCurrentPage: (page) => {
+            const provider = providerRef.current;
+            const currentPage = provider?.state.currentPage ?? pageHistoryRef.current[pageHistoryRef.current.length - 1] ?? 'page1';
+            if (!page || page === currentPage) {
+                return;
+            }
+            const currentHistory = pageHistoryRef.current.length ? pageHistoryRef.current : [currentPage];
+            pageHistoryRef.current = [...currentHistory, page];
+            provider?.setCurrentPage(page);
+        },
+        canGoBackPage: () => {
+            if (pageHistoryRef.current.length > 1) {
+                return true;
+            }
+            return asMethod(providerRef.current?.canGoBackPage)?.call(providerRef.current) ?? false;
+        },
+        goBackPage: () => {
+            const provider = providerRef.current;
+            if (pageHistoryRef.current.length > 1) {
+                const nextHistory = [...pageHistoryRef.current];
+                nextHistory.pop();
+                const previousPage = nextHistory[nextHistory.length - 1];
+                if (!previousPage) {
+                    return false;
+                }
+                pageHistoryRef.current = nextHistory;
+                const providerHandled = asMethod(provider?.goBackPage)?.call(provider) ?? false;
+                if (!providerHandled) {
+                    provider?.setCurrentPage(previousPage);
+                }
+                return true;
+            }
+            return asMethod(provider?.goBackPage)?.call(provider) ?? false;
+        },
+        setCurrentGroupData: (groupId, groupName) => {
+            providerRef.current?.setCurrentGroupData(groupId, groupName);
+        },
+        setSelectedProducts: (products) => {
+            providerRef.current?.setSelectedProducts(products);
+        },
+        setCurrentFormId: (formId, value) => {
+            providerRef.current?.setCurrentFormId(formId, value);
+        },
+        setFormState: (formId, value) => {
+            providerRef.current?.setFormState(formId, value);
+        },
+        setTimerState: (timerId, remainingSeconds, savedAt, hasEmittedCompletion) => {
+            providerRef.current?.setTimerState(timerId, remainingSeconds, savedAt, hasEmittedCompletion);
+        },
+        getTimerState: (timerId) => {
+            return providerRef.current?.getTimerState(timerId);
+        },
+        setProductDetails: (details) => {
+            providerRef.current?.setProductDetails(details);
+        },
+        setPurchaseInProgress: (inProgress) => {
+            providerRef.current?.setPurchaseInProgress(inProgress);
+        },
+        setPurchase: (inProgress, product) => {
+            providerRef.current?.setPurchase(inProgress, product);
+        },
+        setCustomerAttribute: (attributes) => {
+            providerRef.current?.setCustomerAttribute(attributes);
+        },
+        removeCustomerAttribute: (key) => {
+            providerRef.current?.removeCustomerAttribute(key);
+        },
+        setIsLoggedIn: (isLoggedIn) => {
+            providerRef.current?.setIsLoggedIn(isLoggedIn);
+        },
+        setAppSuppliedVideoDetails: (details) => {
+            providerRef.current?.setAppSuppliedVideoDetails(details);
+        },
+        resetAppSuppliedVideoDetails: () => {
+            providerRef.current?.resetAppSuppliedVideoDetails();
+        },
+        setMediaList: (media) => {
+            providerRef.current?.setMediaList(media);
+        },
+        setSafeAreaTop: (top) => {
+            providerRef.current?.setSafeAreaTop(top);
+        },
+        setFullScreenPresentation: (full) => {
+            providerRef.current?.setFullScreenPresentation(full);
+        },
+        setFormFactor: (factor) => {
+            providerRef.current?.setFormFactor(factor);
+        },
+        setUserInteractionEnabled: (enabled) => {
+            providerRef.current?.setUserInteractionEnabled(enabled);
+        },
+        setUserTags: (tags) => {
+            providerRef.current?.setUserTags(tags);
+        },
+        setLaunchDetails: (value, type) => {
+            providerRef.current?.setLaunchDetails(value, type);
+        },
+        setOpenHeaderIds: (id, sku) => {
+            providerRef.current?.setOpenHeaderIds(id, sku);
+        },
+        setFlow: (nextFlow) => {
+            providerRef.current?.setFlow(nextFlow);
+        },
+        notifyFirstFocusReady: (paywallId, page, formFactor) => {
+            setFirstFocusReadyKey(`${paywallId}:${page}:${formFactor ?? ''}`);
+            onFirstFocusReady?.(paywallId, page, formFactor);
+        },
+        setCurrentSlideIndex: (index) => {
+            providerRef.current?.setCurrentSlideIndex(index);
+        },
+        getPaywallActionEventData: () => {
+            return providerRef.current?.getPaywallActionEventData() ?? {};
+        },
+        getSelectedPaywall: () => {
+            return providerRef.current?.getSelectedPaywall();
+        },
+        getSelectedCampaign: () => {
+            return providerRef.current?.getSelectedCampaign();
+        },
+    }), [onFirstFocusReady]);
+    const focusReadyValue = useMemo(() => ({
+        firstFocusReadyKey,
+        notifyFirstFocusReady: methods.notifyFirstFocusReady,
+    }), [firstFocusReadyKey, methods]);
+    const value = useMemo(() => {
+        const provider = providerRef.current;
+        return {
+            state,
+            productDetails: provider?.getProductDetails() ?? provider?.productDetails ?? [],
+            flow: provider?.flow,
+            filteredSkuMenus: provider?.filteredSkuMenus ?? [],
+            ...methods,
+        };
+    }, [methods, state]);
+    return (jsxRuntimeExports.jsx(PaywallCtx.Provider, { value: value, children: jsxRuntimeExports.jsx(FirstFocusReadyCtx.Provider, { value: focusReadyValue, children: children }) }));
+};
+function cloneStateWithDynamicProps(state, provider) {
+    const nextState = { ...(state ?? initialState) };
+    defineDynamicStateProps(nextState, provider);
+    return nextState;
+}
+function defineDynamicStateProps(state, provider) {
+    Object.defineProperty(state, 'tvQuality', {
+        get: () => getTVQuality(provider),
+        enumerable: false,
+        configurable: true,
+    });
+    Object.defineProperty(state, 'viewportWidth', {
+        get: getViewportWidth,
+        enumerable: false,
+        configurable: true,
+    });
+    Object.defineProperty(state, 'viewportHeight', {
+        get: getViewportHeight,
+        enumerable: false,
+        configurable: true,
+    });
+}
+function getTVQuality(provider) {
+    if (provider.getFormFactor() !== 'television') {
+        return '';
+    }
+    const { width, height, scale } = Dimensions.get('window');
+    const maxDimension = Math.max(width, height) * (scale || 1);
+    const minDimension = Math.min(width, height) * (scale || 1);
+    if (!maxDimension || !minDimension) {
+        return '720p';
+    }
+    if (maxDimension >= 3840 || minDimension >= 2160) {
+        return '4K';
+    }
+    if (maxDimension >= 1920 || minDimension >= 1080) {
+        return '1080p';
+    }
+    return '720p';
+}
+function getViewportWidth() {
+    return Dimensions.get('window').width;
+}
+function getViewportHeight() {
+    return Dimensions.get('window').height;
+}
+
+let fontModule = null;
+try {
+    fontModule = require('expo-font');
+}
+catch {
+    try {
+        fontModule = require('@amazon-devices/expo-font');
+    }
+    catch {
+        fontModule = null;
+    }
+}
+const knownFontFaces = new Set();
+const loadedFonts = new Set();
+const loadingFonts = new Map();
+let warnedMissingFontModule = false;
+const warnedFailedFontLoads = new Set();
+const fontFamilyVariants = new Map();
+const aliasToFamilyKey = new Map();
+const KEPLER_VARIANT_COLLISION_FAMILY_KEYS = new Set(['All-ProDisplayC']);
+async function prepareAndLoadFonts(fontsObject) {
+    if (!fontsObject)
+        return false;
+    if (!fontModule) {
+        if (!warnedMissingFontModule && Object.keys(fontsObject).length > 0) {
+            warnedMissingFontModule = true;
+            logger.warn('[NamiExpo][fonts] Paywall requested hosted fonts, but expo-font is unavailable in the current app runtime.');
+        }
+        return false;
+    }
+    const fonts = collectHostedFonts(fontsObject);
+    for (const font of fonts) {
+        registerFontMetadata(font);
+    }
+    const results = await Promise.all(fonts.map((font) => loadFont(font)));
+    return results.some(Boolean);
+}
+function prewarmPaywallFonts(paywalls) {
+    const uniqueCollections = new Set();
+    for (const paywall of paywalls) {
+        if (!paywall?.fonts) {
+            continue;
+        }
+        uniqueCollections.add(paywall.fonts);
+    }
+    for (const fonts of uniqueCollections) {
+        void prepareAndLoadFonts(fonts);
+    }
+}
+async function prepareAndLoadFontsWithTimeout(fontsObject, timeoutMs = 1200) {
+    if (!fontsObject || Object.keys(fontsObject).length === 0) {
+        return 'none';
+    }
+    let timer;
+    const result = await Promise.race([
+        ensureFontsReady(fontsObject).then((value) => (value === 'none' ? 'failed' : value)),
+        new Promise((resolve) => {
+            timer = setTimeout(() => resolve('timeout'), timeoutMs);
+        }),
+    ]);
+    if (timer) {
+        clearTimeout(timer);
+    }
+    return result;
+}
+async function ensureFontsReady(fontsObject) {
+    if (!fontsObject || Object.keys(fontsObject).length === 0) {
+        return 'none';
+    }
+    await prepareAndLoadFonts(fontsObject);
+    const fonts = collectHostedFonts(fontsObject);
+    const allReady = fonts.every((font) => loadedFonts.has(font.alias || buildFontFaceFamily(font)));
+    return allReady ? 'ready' : 'failed';
+}
+function collectHostedFonts(fontsObject) {
+    if (!fontsObject) {
+        return [];
+    }
+    return Object.entries(fontsObject)
+        .flatMap(([fontName, value]) => {
+        if (!value?.file) {
+            return [];
+        }
+        return [{
+                ...value,
+                alias: sanitizeFontName(fontName),
+            }];
+    });
+}
+async function loadFont(font) {
+    if (!fontModule)
+        return false;
+    if (shouldSkipHostedFontLoad(font)) {
+        return false;
+    }
+    const family = font.alias || buildFontFaceFamily(font);
+    knownFontFaces.add(family);
+    if (loadedFonts.has(family))
+        return false;
+    const existing = loadingFonts.get(family);
+    if (existing) {
+        await existing;
+        return false;
+    }
+    let loaded = false;
+    const promise = fontModule
+        .loadAsync({ [family]: { uri: font.file } })
+        .then(() => {
+        loadedFonts.add(family);
+        loaded = true;
+    })
+        .catch((error) => {
+        if (!warnedFailedFontLoads.has(family)) {
+            warnedFailedFontLoads.add(family);
+            logger.warn(`[NamiExpo][fonts] Failed to load hosted font "${family}" from "${font.file}".`, error);
+        }
+        // Keep the renderer resilient if a hosted font is unavailable.
+    })
+        .finally(() => {
+        loadingFonts.delete(family);
+    });
+    loadingFonts.set(family, promise);
+    await promise;
+    return loaded;
+}
+function buildFontFaceFamily(font) {
+    return sanitizeFontName(`${font.family}-${font.style}`);
+}
+function sanitizeFontName(value) {
+    return value.replace(/ /g, '');
+}
+function registerFontMetadata(font) {
+    const familyKey = sanitizeFontName(font.family);
+    aliasToFamilyKey.set(font.alias, familyKey);
+    const variant = normalizeFontVariant(font.style);
+    const variants = fontFamilyVariants.get(familyKey) ?? new Map();
+    variants.set(variant, font.alias);
+    fontFamilyVariants.set(familyKey, variants);
+}
+function normalizeFontVariant(style) {
+    const normalized = sanitizeFontName(style ?? '').toLowerCase();
+    const hasBold = normalized.includes('bold');
+    const hasItalic = normalized.includes('italic');
+    if (hasBold && hasItalic)
+        return 'boldItalic';
+    if (hasBold)
+        return 'bold';
+    if (hasItalic)
+        return 'italic';
+    return 'regular';
+}
+function shouldSkipHostedFontLoad(font) {
+    const isTelevisionRuntime = Platform.isTV === true;
+    if (!isTelevisionRuntime) {
+        return false;
+    }
+    const familyKey = sanitizeFontName(font.family);
+    if (!KEPLER_VARIANT_COLLISION_FAMILY_KEYS.has(familyKey)) {
+        return false;
+    }
+    const variant = normalizeFontVariant(font.style);
+    return variant === 'italic' || variant === 'boldItalic';
+}
+
+const HEX_ALPHA_REGEX = /^#([0-9a-f]{8})$/i;
+const HEX_SHORT_ALPHA_REGEX = /^#([0-9a-f]{4})$/i;
+const HSLA_REGEX = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function parseColor(color) {
+    if (!color)
+        return undefined;
+    if (typeof color === 'string') {
+        const trimmed = color.trim();
+        if (!trimmed)
+            return undefined;
+        if (trimmed.toLowerCase().includes('gradient('))
+            return undefined;
+        return normalizeColorString(trimmed);
+    }
+    if (color.rgba) {
+        const { r, g, b, a } = color.rgba;
+        return `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a ?? 1})`;
+    }
+    if (color.hex)
+        return normalizeColorString(color.hex);
+    return undefined;
+}
+function normalizeColorString(input) {
+    const value = input.trim();
+    if (!value)
+        return value;
+    const match = value.match(/^rgba?\((.+)\)$/i);
+    if (match) {
+        const inside = match[1];
+        const [base, alphaRaw] = inside.split('/').map((v) => v.trim());
+        const parts = base.split(/[\s,]+/).filter(Boolean);
+        const nums = parts.map((p) => p.trim());
+        const r = nums[0];
+        const g = nums[1];
+        const b = nums[2];
+        const a = alphaRaw ?? nums[3];
+        if (r != null && g != null && b != null) {
+            if (a != null) {
+                return `rgba(${r},${g},${b},${a})`;
+            }
+            return `rgb(${r},${g},${b})`;
+        }
+    }
+    const hexAlphaMatch = value.match(HEX_ALPHA_REGEX);
+    if (hexAlphaMatch) {
+        const hex = hexAlphaMatch[1];
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        const a = parseInt(hex.slice(6, 8), 16) / 255;
+        return `rgba(${r},${g},${b},${Number(a.toFixed(3))})`;
+    }
+    const hexShortAlphaMatch = value.match(HEX_SHORT_ALPHA_REGEX);
+    if (hexShortAlphaMatch) {
+        const hex = hexShortAlphaMatch[1];
+        const r = parseInt(hex[0] + hex[0], 16);
+        const g = parseInt(hex[1] + hex[1], 16);
+        const b = parseInt(hex[2] + hex[2], 16);
+        const a = parseInt(hex[3] + hex[3], 16) / 255;
+        return `rgba(${r},${g},${b},${Number(a.toFixed(3))})`;
+    }
+    const hslaMatch = value.match(HSLA_REGEX);
+    if (hslaMatch) {
+        const h = parseFloat(hslaMatch[1]);
+        const s = parseFloat(hslaMatch[2]);
+        const l = parseFloat(hslaMatch[3]);
+        const a = hslaMatch[4] != null ? parseFloat(hslaMatch[4]) : undefined;
+        const [r, g, b] = hslToRgb(h, s, l);
+        if (a != null && !Number.isNaN(a)) {
+            return `rgba(${r},${g},${b},${Number(a.toFixed(3))})`;
+        }
+        return `rgb(${r},${g},${b})`;
+    }
+    return value;
+}
+function hslToRgb(h, s, l) {
+    const hh = ((h % 360) + 360) % 360;
+    const ss = Math.max(0, Math.min(100, s)) / 100;
+    const ll = Math.max(0, Math.min(100, l)) / 100;
+    const c = (1 - Math.abs(2 * ll - 1)) * ss;
+    const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+    const m = ll - c / 2;
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hh < 60) {
+        r1 = c;
+        g1 = x;
+        b1 = 0;
+    }
+    else if (hh < 120) {
+        r1 = x;
+        g1 = c;
+        b1 = 0;
+    }
+    else if (hh < 180) {
+        r1 = 0;
+        g1 = c;
+        b1 = x;
+    }
+    else if (hh < 240) {
+        r1 = 0;
+        g1 = x;
+        b1 = c;
+    }
+    else if (hh < 300) {
+        r1 = x;
+        g1 = 0;
+        b1 = c;
+    }
+    else {
+        r1 = c;
+        g1 = 0;
+        b1 = x;
+    }
+    const r = Math.round((r1 + m) * 255);
+    const g = Math.round((g1 + m) * 255);
+    const b = Math.round((b1 + m) * 255);
+    return [r, g, b];
+}
+function isLinearGradient(value) {
+    if (!value || typeof value !== 'string')
+        return false;
+    return value.trim().toLowerCase().startsWith('linear-gradient(');
+}
+function parseSize(value, scaleFactor = 1) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return value * scaleFactor;
+    if (typeof value === 'string') {
+        const num = parseFloat(value);
+        if (!isNaN(num))
+            return num * scaleFactor;
+    }
+    return undefined;
+}
+function parseSizeOrPercent(value, scaleFactor = 1) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'string' && value.endsWith('%'))
+        return value;
+    return parseSize(value, scaleFactor);
+}
+function flexDirectionFromConfig(dir) {
+    switch (dir) {
+        case 'horizontal': return 'row';
+        case 'vertical': return 'column';
+        case 'horizontal-reverse': return 'row-reverse';
+        case 'vertical-reverse': return 'column-reverse';
+        default: return 'column';
+    }
+}
+const ALIGNMENT_VALUE_MAP = {
+    top: 'flex-start',
+    left: 'flex-start',
+    right: 'flex-end',
+    bottom: 'flex-end',
+    start: 'flex-start',
+    end: 'flex-end',
+    leading: 'flex-start',
+    trailing: 'flex-end',
+    center: 'center',
+    stretch: 'stretch',
+};
+const JUSTIFY_VALUE_MAP = {
+    spaceBetween: 'space-between',
+    'space-between': 'space-between',
+    spaceAround: 'space-around',
+    'space-around': 'space-around',
+    spaceEvenly: 'space-evenly',
+    'space-evenly': 'space-evenly',
+    top: 'flex-start',
+    bottom: 'flex-end',
+    left: 'flex-start',
+    right: 'flex-end',
+    start: 'flex-start',
+    end: 'flex-end',
+    leading: 'flex-start',
+    trailing: 'flex-end',
+    center: 'center',
+};
+function mapAlignmentValue(align) {
+    if (!align)
+        return undefined;
+    return ALIGNMENT_VALUE_MAP[align] ?? undefined;
+}
+function mapJustifyValue(align) {
+    if (!align)
+        return undefined;
+    return JUSTIFY_VALUE_MAP[align] ?? ALIGNMENT_VALUE_MAP[align];
+}
+function mapPositionAlignment(align) {
+    return mapAlignmentValue(align);
+}
+function paddingAndMarginStyles(component, scaleFactor) {
+    const s = {};
+    if (component.leftPadding != null)
+        s.paddingLeft = parseSize(component.leftPadding, scaleFactor);
+    if (component.rightPadding != null)
+        s.paddingRight = parseSize(component.rightPadding, scaleFactor);
+    if (component.topPadding != null)
+        s.paddingTop = parseSize(component.topPadding, scaleFactor);
+    if (component.bottomPadding != null)
+        s.paddingBottom = parseSize(component.bottomPadding, scaleFactor);
+    if (component.leftMargin != null)
+        s.marginLeft = parseSize(component.leftMargin, scaleFactor);
+    if (component.rightMargin != null)
+        s.marginRight = parseSize(component.rightMargin, scaleFactor);
+    if (component.topMargin != null)
+        s.marginTop = parseSize(component.topMargin, scaleFactor);
+    if (component.bottomMargin != null)
+        s.marginBottom = parseSize(component.bottomMargin, scaleFactor);
+    return s;
+}
+function borderStyles(component, scaleFactor, inFocusedState = false) {
+    const s = {};
+    const bw = parseSize(inFocusedState ? (component.focusedBorderWidth ?? component.borderWidth) : component.borderWidth, scaleFactor);
+    const bc = parseColor(inFocusedState ? (component.focusedBorderColor ?? component.borderColor) : component.borderColor);
+    const br = parseSize(inFocusedState ? (component.focusedBorderRadius ?? component.borderRadius) : component.borderRadius, scaleFactor);
+    const roundBorders = inFocusedState
+        ? (component.focusedRoundBorders ?? component.roundBorders)
+        : component.roundBorders;
+    if (roundBorders?.length) {
+        const mapping = {
+            upperLeft: 'borderTopLeftRadius',
+            upperRight: 'borderTopRightRadius',
+            lowerLeft: 'borderBottomLeftRadius',
+            lowerRight: 'borderBottomRightRadius',
+        };
+        for (const corner of roundBorders) {
+            const key = mapping[corner];
+            if (key && br != null)
+                s[key] = br;
+        }
+    }
+    else if (br != null) {
+        s.borderRadius = br;
+    }
+    const sides = inFocusedState
+        ? (component.focusedBorders ?? component.borders ?? [])
+        : (component.borders ?? []);
+    if (sides.length > 0 && bw != null) {
+        const sideMap = {
+            top: ['borderTopWidth', 'borderTopColor'],
+            bottom: ['borderBottomWidth', 'borderBottomColor'],
+            left: ['borderLeftWidth', 'borderLeftColor'],
+            right: ['borderRightWidth', 'borderRightColor'],
+        };
+        for (const side of sides) {
+            const [wKey, cKey] = sideMap[side];
+            s[wKey] = bw;
+            if (bc)
+                s[cKey] = bc;
+        }
+    }
+    else if (bw != null) {
+        s.borderWidth = bw;
+        if (bc)
+            s.borderColor = bc;
+    }
+    else if (bc) {
+        s.borderColor = bc;
+    }
+    return s;
+}
+function parseDropShadow(value) {
+    if (!value || typeof value !== 'string')
+        return null;
+    const match = value.trim().match(/(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)\s+(.+)/);
+    if (!match)
+        return null;
+    const x = parseFloat(match[1]);
+    const y = parseFloat(match[2]);
+    const blur = parseFloat(match[3]);
+    const color = parseColor(match[4].trim());
+    return { x, y, blur, color: color ?? undefined };
+}
+function shadowStyles(component) {
+    const parsed = parseDropShadow(component.dropShadow);
+    if (!parsed)
+        return {};
+    const { x, y, blur, color } = parsed;
+    return {
+        ...Platform.select({
+            ios: {
+                shadowColor: color ?? 'rgba(0,0,0,0.5)',
+                shadowOffset: { width: x, height: y },
+                shadowOpacity: 1,
+                shadowRadius: blur,
+            },
+            android: {
+                elevation: blur ? Math.ceil(blur / 2) : 4,
+            },
+        }),
+    };
+}
+function sizeStyles(component, scaleFactor, parentDirection) {
+    const s = {};
+    const rawW = component.width ?? component.fixedWidth;
+    const rawH = component.height ?? component.fixedHeight;
+    const w = parseSizeOrPercent(rawW, scaleFactor);
+    const h = parseSizeOrPercent(rawH, scaleFactor);
+    if (w != null)
+        s.width = w;
+    if (h != null)
+        s.height = h;
+    s.maxWidth = '100%';
+    if (rawW === 'fitContent') {
+        s.flexShrink = 0;
+        s.flexGrow = 0;
+    }
+    if (rawH === 'fitContent') {
+        s.flexGrow = 0;
+    }
+    if (typeof rawW === 'string' && rawW.trim().endsWith('%')) {
+        s.flexShrink = 1;
+        s.minWidth = 0;
+    }
+    if (typeof rawH === 'string' && rawH.trim().endsWith('%')) {
+        s.flexShrink = 1;
+    }
+    String(component.id ?? '');
+    String(component.namiComponentType ?? '');
+    if (rawW == null && rawH == null) {
+        s.alignSelf = 'stretch';
+    }
+    return s;
+}
+function layoutStyles(component, scaleFactor) {
+    const s = {};
+    s.flexDirection = flexDirectionFromConfig(component.direction);
+    const alignment = component.alignment;
+    const horizontal = component.horizontalAlignment;
+    const vertical = component.verticalAlignment;
+    const verticalAlign = vertical ? mapAlignmentValue(vertical) : undefined;
+    const horizontalAlign = horizontal ? mapAlignmentValue(horizontal) : undefined;
+    const fallbackAlign = alignment ? (mapAlignmentValue(alignment) ?? 'center') : 'center';
+    const fallbackJustify = alignment ? (mapJustifyValue(alignment) ?? 'center') : 'center';
+    const isRow = s.flexDirection === 'row' || s.flexDirection === 'row-reverse';
+    if (verticalAlign && horizontalAlign) {
+        if (isRow) {
+            s.alignItems = verticalAlign;
+            s.justifyContent = mapJustifyValue(horizontal) ?? fallbackJustify;
+        }
+        else {
+            s.alignItems = horizontalAlign;
+            s.justifyContent = mapJustifyValue(vertical) ?? 'center';
+        }
+    }
+    else if (!isRow) {
+        s.alignItems = horizontalAlign ?? fallbackAlign;
+        s.justifyContent = mapJustifyValue(vertical) ?? 'center';
+    }
+    else {
+        s.alignItems = verticalAlign ?? 'center';
+        s.justifyContent = mapJustifyValue(horizontal) ?? fallbackJustify;
+    }
+    if (component.grow)
+        s.flexGrow = 1;
+    return s;
+}
+function positionStyles(component) {
+    const pos = component.position;
+    if (!pos)
+        return { position: 'relative' };
+    const [alignment, spot] = pos.split('-');
+    const s = { position: 'absolute' };
+    const alignSelf = mapPositionAlignment(alignment);
+    if (alignSelf)
+        s.alignSelf = alignSelf;
+    if (spot === 'top' || spot === 'bottom' || spot === 'left' || spot === 'right') {
+        s[spot] = 0;
+    }
+    return s;
+}
+function backgroundColorStyle(component, inFocusedState = false) {
+    const fill = typeof component.fillColor === 'string' ? component.fillColor : undefined;
+    const focusedFill = typeof component.focusedFillColor === 'string' ? component.focusedFillColor : undefined;
+    const useFocused = inFocusedState && focusedFill;
+    const primary = useFocused ? focusedFill : fill;
+    const fallback = useFocused ? component.focusedFillColorFallback : component.fillColorFallback;
+    const gradientSource = primary ?? fill;
+    if (isLinearGradient(gradientSource)) {
+        const fallbackColor = parseColor(fallback);
+        return fallbackColor ? { backgroundColor: fallbackColor } : { backgroundColor: 'transparent' };
+    }
+    const bg = parseColor(primary) ?? parseColor(fallback);
+    if (bg)
+        return { backgroundColor: bg };
+    return {};
+}
+function transformStyles(component, scaleFactor) {
+    const transforms = [];
+    const mx = parseSize(component.moveX, scaleFactor);
+    const my = parseSize(component.moveY, scaleFactor);
+    if (mx)
+        transforms.push({ translateX: mx });
+    if (my)
+        transforms.push({ translateY: my });
+    if (transforms.length)
+        return { transform: transforms };
+    return {};
+}
+function applyStyles(component, scaleFactor = 1, inFocusedState = false, parentDirection) {
+    return {
+        ...positionStyles(component),
+        ...paddingAndMarginStyles(component, scaleFactor),
+        ...borderStyles(component, scaleFactor, inFocusedState),
+        ...shadowStyles(component),
+        ...sizeStyles(component, scaleFactor),
+        ...layoutStyles(component),
+        ...backgroundColorStyle(component, inFocusedState),
+        ...transformStyles(component, scaleFactor),
+        ...(component.zIndex != null ? { zIndex: component.zIndex } : {}),
+    };
+}
+function resolveFillImageUrl(fillImage) {
+    if (!fillImage)
+        return undefined;
+    if (typeof fillImage === 'string')
+        return fillImage;
+    if (typeof fillImage === 'object' && typeof fillImage.url === 'string')
+        return fillImage.url;
+    return undefined;
+}
+function childSpacingStyle(index, component, scaleFactor) {
+    if (!component?.spacing || index === 0)
+        return {};
+    const spacing = parseSize(component.spacing, scaleFactor);
+    if (spacing == null)
+        return {};
+    const isVertical = component.direction === 'vertical';
+    return isVertical ? { marginTop: spacing } : { marginLeft: spacing };
+}
+
+function getAttr(object, ...attrs) {
+    let current = object;
+    for (const attr of attrs) {
+        if (current === undefined || current === null)
+            return undefined;
+        current = Array.isArray(current) ? current[+attr] : current[attr];
+    }
+    return current;
+}
+function interpolateString(value, replacements) {
+    let output = value;
+    if (typeof value !== 'string') {
+        return output;
+    }
+    if (!value.includes('$')) {
+        return value;
+    }
+    const regex = new RegExp(VAR_REGEX.source, VAR_REGEX.flags);
+    const matches = [];
+    let matchResult;
+    while ((matchResult = regex.exec(value)) !== null) {
+        matches.push(matchResult);
+        if (!regex.global)
+            break;
+        if (matchResult.index === regex.lastIndex)
+            regex.lastIndex++;
+    }
+    for (const [match, rawPath] of matches) {
+        const path = interpolateString(rawPath, replacements);
+        if (match === value)
+            return replacer(match, path);
+        if (path !== rawPath) {
+            output = output.replace(rawPath, path);
+        }
+        output = output.replace(VAR_REGEX, replacer);
+    }
+    return output;
+    function replacer(matchValue, pathValue) {
+        const pathParts = String(pathValue).split('.');
+        const firstKey = pathParts[0];
+        if (!firstKey)
+            return matchValue;
+        const firstSegment = getAttr(replacements, firstKey);
+        if (firstSegment === undefined)
+            return matchValue;
+        const isEmptyObject = typeof firstSegment === 'object'
+            && firstSegment !== null
+            && Object.keys(firstSegment).length === 0;
+        if (isEmptyObject)
+            return '';
+        const newValue = getAttr(replacements, ...pathParts);
+        if (newValue === undefined)
+            return '';
+        if (typeof newValue !== 'string')
+            return newValue;
+        return interpolateString(newValue, replacements);
+    }
+}
+function interpolate(value, replacements) {
+    if (Array.isArray(value)) {
+        const output = [];
+        for (const item of value) {
+            const newValue = interpolate(item, replacements);
+            if (Array.isArray(newValue)) {
+                output.push(...newValue);
+            }
+            else {
+                output.push(newValue);
+            }
+        }
+        return output;
+    }
+    if (value === null || value === undefined)
+        return value;
+    if (typeof value === 'object') {
+        const output = {};
+        for (const [key, current] of Object.entries(value)) {
+            output[key] = key === 'newRow' ? current : interpolate(current, replacements);
+        }
+        return output;
+    }
+    if (typeof value === 'string')
+        return interpolateString(value, replacements);
+    return value;
+}
+function buildSmartTextReplacements(state, flow, sku, block) {
+    return {
+        state,
+        urlParams: getUrlParams(),
+        flow: {
+            isLaunched: !!flow?.manager?.flowOpen,
+            previousStepAvailable: !!flow?.previousStepAvailable,
+            nextStepAvailable: !!flow?.nextStepAvailable,
+        },
+        launch: state.launch,
+        sku: sku ?? state.sku,
+        customer: state.customer,
+        block,
+    };
+}
+function interpolateSmartText(value, replacements) {
+    if (value == null)
+        return value;
+    if (typeof value !== 'string')
+        return value;
+    if (!value.includes(SMART_TEXT_PATTERN))
+        return value;
+    return interpolateString(value, replacements);
+}
+
+const DEEP_SMART_TEXT_PRESERVE_KEYS = new Set([
+    'components',
+    'productBaseComponents',
+    'productFeaturedComponents',
+    'collapseHeader',
+]);
+function componentSmartTextSku(component) {
+    return component?.smartTextSku ?? component?.sku;
+}
+function conditionComponentMatches(ctx, condition, sku = componentSmartTextSku(condition)) {
+    if (condition.assertions) {
+        return condition.assertions.every((test) => testObjectMatches(ctx, test, undefined, sku));
+    }
+    if (condition.orAssertions) {
+        return !condition.orAssertions.length || condition.orAssertions.some((test) => testObjectMatches(ctx, test, undefined, sku));
+    }
+    return false;
+}
+function withOverrides(ctx, { conditionAttributes, ...component }, sku = componentSmartTextSku(component)) {
+    if (!conditionAttributes)
+        return component;
+    return conditionAttributes.reduce((nextComponent, condition) => {
+        if (!conditionComponentMatches(ctx, condition, sku))
+            return nextComponent;
+        const resolvedAttributes = Object.fromEntries(Object.entries(condition.attributes ?? {}).map(([key, value]) => [
+            key,
+            valueFromSmartText(ctx, value, sku),
+        ]));
+        return { ...nextComponent, ...resolvedAttributes };
+    }, component);
+}
+function valueFromSmartText(ctx, value, sku, block = null) {
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, sku ?? ctx.state?.sku, block);
+    if (typeof value === 'string' && value.includes(SMART_TEXT_PATTERN)) {
+        return interpolateSmartText(value, replacements);
+    }
+    return value;
+}
+function resolveComponentSmartText(component, ctx) {
+    const smartTextSku = componentSmartTextSku(component);
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku);
+    const preservedEntries = [];
+    const shallowComponent = Object.entries(component ?? {}).reduce((output, [key, value]) => {
+        if (DEEP_SMART_TEXT_PRESERVE_KEYS.has(key)) {
+            // Child component trees need to keep their original template strings so they can
+            // be resolved later with their own component/SKU context.
+            preservedEntries.push([key, value]);
+            return output;
+        }
+        output[key] = valueFromSmartText(ctx, value, smartTextSku);
+        return output;
+    }, {});
+    const resolvedComponent = interpolate(shallowComponent, replacements);
+    preservedEntries.forEach(([key, value]) => {
+        resolvedComponent[key] = value;
+    });
+    return resolvedComponent;
+}
+function testObjectMatches(ctx, { value: rawValue, expected, operator }, block, sku) {
+    let value = valueFromSmartText(ctx, rawValue, sku, block);
+    expected = valueFromSmartText(ctx, expected, sku, block);
+    if (operator === 'equals')
+        return value === expected;
+    if (operator === 'notEquals')
+        return value !== expected;
+    if (operator === 'contains') {
+        if (typeof rawValue === 'string' && rawValue.includes('launch.productGroups')) {
+            const launchGroups = ctx?.state?.launch?.productGroups;
+            const fallbackGroups = Array.isArray(ctx?.state?.groups)
+                ? ctx.state.groups.map((group) => group?.ref).filter(Boolean)
+                : [];
+            const unresolvedValue = value == null
+                || value === ''
+                || value === rawValue
+                || (Array.isArray(value) && value.length === 0);
+            if (unresolvedValue) {
+                value = Array.isArray(launchGroups) && launchGroups.length ? launchGroups : fallbackGroups;
+            }
+        }
+        if (!Array.isArray(value) && typeof value !== 'string' && !(value instanceof String)) {
+            value = value?.toString?.();
+        }
+        if (expected === 'collapse') {
+            expected += `_${ctx.getCurrentCollapsibleSku?.()?.skuId ?? ''}`;
+        }
+        return value?.includes?.(expected);
+    }
+    if (operator === 'notContains') {
+        if (!Array.isArray(value) && typeof value !== 'string' && !(value instanceof String)) {
+            value = value?.toString?.();
+        }
+        return !value?.includes?.(expected);
+    }
+    if (operator === 'set') {
+        if (typeof expected === 'boolean') {
+            return !!value && (!(value.toString().match(LIQUID_VARIABLE_REGEX)) === expected);
+        }
+        return !!value && !value.toString().match(LIQUID_VARIABLE_REGEX);
+    }
+    if (operator === 'notSet') {
+        return !value || !!value.toString().match(LIQUID_VARIABLE_REGEX);
+    }
+    if (operator === 'gt')
+        return value > expected;
+    if (operator === 'gte')
+        return value >= expected;
+    if (operator === 'lt')
+        return value < expected;
+    if (operator === 'lte')
+        return value <= expected;
+    return false;
+}
+
+const componentRendererCache = new Map();
+function resolveRenderer(rendererKey) {
+    if (componentRendererCache.has(rendererKey)) {
+        return componentRendererCache.get(rendererKey) ?? null;
+    }
+    let renderer = null;
+    switch (rendererKey) {
+        case 'NamiButton':
+            renderer = require('./elements/NamiButton').NamiButton;
+            break;
+        case 'NamiText':
+            renderer = require('./elements/NamiText').NamiText;
+            break;
+        case 'NamiSymbol':
+            renderer = require('./elements/NamiSymbol').NamiSymbol;
+            break;
+        case 'NamiImage':
+            renderer = require('./elements/NamiImage').NamiImage;
+            break;
+        case 'NamiSpacer':
+            renderer = require('./elements/NamiSpacer').NamiSpacer;
+            break;
+        case 'NamiVideo':
+            renderer = require('./elements/NamiVideo').NamiVideo;
+            break;
+        case 'NamiContainer':
+            renderer = require('./containers/NamiContainer').NamiContainer;
+            break;
+        case 'NamiProductContainer':
+            renderer = require('./containers/NamiProductContainer').NamiProductContainer;
+            break;
+        case 'NamiStack':
+            renderer = require('./containers/NamiStack').NamiStack;
+            break;
+        case 'NamiCarousel':
+            renderer = require('./containers/NamiCarousel').NamiCarousel;
+            break;
+        case 'NamiCollapseContainer':
+            renderer = require('./containers/NamiCollapseContainer').NamiCollapseContainer;
+            break;
+        case 'NamiResponsiveGrid':
+            renderer = require('./containers/NamiResponsiveGrid').NamiResponsiveGrid;
+            break;
+        case 'NamiRepeatingGrid':
+            renderer = require('./containers/NamiRepeatingGrid').NamiRepeatingGrid;
+            break;
+        case 'NamiSegmentPicker':
+            renderer = require('./elements/NamiSegmentPicker').NamiSegmentPicker;
+            break;
+        case 'NamiSegmentPickerItem':
+            renderer = require('./elements/NamiSegmentPickerItem').NamiSegmentPickerItem;
+            break;
+        case 'NamiToggleSwitch':
+            renderer = require('./elements/NamiToggleSwitch').NamiToggleSwitch;
+            break;
+        case 'NamiRadioButton':
+            renderer = require('./elements/NamiRadioButton').NamiRadioButton;
+            break;
+        case 'NamiProgressIndicator':
+            renderer = require('./elements/NamiProgressIndicator').NamiProgressIndicator;
+            break;
+        case 'NamiProgressBar':
+            renderer = require('./elements/NamiProgressBar').NamiProgressBar;
+            break;
+        case 'NamiCountdownTimer':
+            renderer = require('./elements/NamiCountdownTimer').NamiCountdownTimer;
+            break;
+        case 'NamiToggleButton':
+            renderer = require('./elements/NamiToggleButton').NamiToggleButton;
+            break;
+        case 'NamiPlayPauseButton':
+            renderer = require('./elements/NamiPlayPauseButton').NamiPlayPauseButton;
+            break;
+        case 'NamiVolumeButton':
+            renderer = require('./elements/NamiVolumeButton').NamiVolumeButton;
+            break;
+        case 'NamiQRCode':
+            renderer = require('./elements/NamiQRCode').NamiQRCode;
+            break;
+        default:
+            renderer = null;
+    }
+    componentRendererCache.set(rendererKey, renderer);
+    return renderer;
+}
+function renderWithKey(rendererKey, props) {
+    const Renderer = resolveRenderer(rendererKey);
+    return Renderer ? jsxRuntimeExports.jsx(Renderer, { ...props }) : null;
+}
+const TemplateRenderer = ({ component, scaleFactor = 1, onClose, parentDirection, parentCrossAxisFitContent }) => {
+    const ctx = usePaywallContext();
+    const smartTextSku = component?.smartTextSku ?? component?.sku;
+    // Skip hidden components
+    if (component.hidden)
+        return null;
+    // Handle condition components - evaluate condition, render children if matched
+    if (component.component === 'condition') {
+        const cond = component;
+        if (!conditionComponentMatches(ctx, cond, smartTextSku))
+            return null;
+        // Render children of condition
+        return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: cond.components?.map((child, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: child, scaleFactor: scaleFactor, onClose: onClose, parentDirection: parentDirection, parentCrossAxisFitContent: parentCrossAxisFitContent }, child.id ?? i))) }));
+    }
+    // Apply conditionAttributes overrides if any match
+    let resolvedComponent = component;
+    if (component.conditionAttributes?.length) {
+        resolvedComponent = withOverrides(ctx, resolvedComponent, smartTextSku);
+    }
+    // Resolve smart-text values on component fields (shallow)
+    if (!resolvedComponent.__namiSmartTextResolved) {
+        resolvedComponent = resolveComponentSmartText(resolvedComponent, ctx);
+    }
+    const componentType = resolvedComponent.component;
+    return renderResolvedComponent(componentType, resolvedComponent, scaleFactor, onClose, parentDirection, parentCrossAxisFitContent);
+};
+function renderResolvedComponent(componentType, resolvedComponent, scaleFactor, onClose, parentDirection, parentCrossAxisFitContent) {
+    const sharedProps = {
+        component: resolvedComponent,
+        scaleFactor,
+        onClose,
+        parentDirection,
+        parentCrossAxisFitContent,
+    };
+    switch (componentType) {
+        case 'button':
+            return renderWithKey('NamiButton', sharedProps);
+        case 'text':
+        case 'title':
+        case 'body':
+        case 'legal':
+        case 'text-list':
+            return renderWithKey('NamiText', sharedProps);
+        case 'symbol':
+            return renderWithKey('NamiSymbol', sharedProps);
+        case 'image':
+            return renderWithKey('NamiImage', sharedProps);
+        case 'spacer':
+            return renderWithKey('NamiSpacer', sharedProps);
+        case 'videoUrl':
+            return renderWithKey('NamiVideo', sharedProps);
+        case 'container':
+        case 'formContainer':
+            return renderWithKey('NamiContainer', sharedProps);
+        case 'productContainer':
+            return renderWithKey('NamiProductContainer', sharedProps);
+        case 'stack':
+            return renderWithKey('NamiStack', sharedProps);
+        case 'carouselContainer':
+            return renderWithKey('NamiCarousel', sharedProps);
+        case 'collapseContainer':
+            return renderWithKey('NamiCollapseContainer', sharedProps);
+        case 'responsiveGrid':
+            return renderWithKey('NamiResponsiveGrid', sharedProps);
+        case 'repeatingGrid':
+            return renderWithKey('NamiRepeatingGrid', sharedProps);
+        case 'segmentPicker':
+        case 'formSegmentPicker':
+            return renderWithKey('NamiSegmentPicker', sharedProps);
+        case 'segmentPickerItem':
+            return renderWithKey('NamiSegmentPickerItem', sharedProps);
+        case 'toggleSwitch':
+            return renderWithKey('NamiToggleSwitch', sharedProps);
+        case 'radio':
+            return renderWithKey('NamiRadioButton', sharedProps);
+        case 'progressIndicator':
+            return renderWithKey('NamiProgressIndicator', sharedProps);
+        case 'progressBar':
+            return renderWithKey('NamiProgressBar', sharedProps);
+        case 'countdownTimerText':
+            return renderWithKey('NamiCountdownTimer', sharedProps);
+        case 'toggleButton':
+            return renderWithKey('NamiToggleButton', sharedProps);
+        case 'playPauseButton':
+            return renderWithKey('NamiPlayPauseButton', sharedProps);
+        case 'volumeButton':
+            return renderWithKey('NamiVolumeButton', sharedProps);
+        case 'qrCode':
+            return renderWithKey('NamiQRCode', sharedProps);
+        default:
+            return null;
+    }
+}
+
+function splitContainerStyles(style) {
+    const { paddingLeft, paddingRight, paddingTop, paddingBottom, flexDirection, alignItems, justifyContent, ...rest } = style;
+    const outer = { ...rest };
+    const inner = {
+        ...(paddingLeft != null ? { paddingLeft } : {}),
+        ...(paddingRight != null ? { paddingRight } : {}),
+        ...(paddingTop != null ? { paddingTop } : {}),
+        ...(paddingBottom != null ? { paddingBottom } : {}),
+        ...(flexDirection ? { flexDirection } : {}),
+        ...(alignItems ? { alignItems } : {}),
+        ...(justifyContent ? { justifyContent } : {}),
+    };
+    return { outer, inner };
+}
+const NamiContentContainer = ({ component, scaleFactor, onClose, }) => {
+    const ctx = usePaywallContext();
+    if (!component || component.hidden)
+        return null;
+    const baseStyle = useMemo(() => applyStyles(component, scaleFactor), [component, scaleFactor]);
+    const { outer, inner } = splitContainerStyles(baseStyle);
+    const formFactor = ctx.state.formFactor;
+    const scrollEnabled = formFactor !== 'television';
+    const direction = component.direction ?? 'vertical';
+    const flexDir = flexDirectionFromConfig(direction);
+    const contentAlignment = useMemo(() => {
+        const vertical = component.verticalAlignment;
+        const horizontal = component.horizontalAlignment;
+        const isRow = flexDir === 'row' || flexDir === 'row-reverse';
+        return {
+            alignItems: isRow
+                ? (vertical === 'top' ? 'flex-start' : vertical === 'bottom' ? 'flex-end' : vertical === 'center' ? 'center' : 'center')
+                : (horizontal === 'left' ? 'flex-start' : horizontal === 'right' ? 'flex-end' : horizontal === 'center' ? 'center' : 'center'),
+            justifyContent: isRow
+                ? (horizontal === 'left' ? 'flex-start' : horizontal === 'right' ? 'flex-end' : horizontal === 'center' ? 'center' : 'flex-start')
+                : (vertical === 'top' ? 'flex-start' : vertical === 'bottom' ? 'flex-end' : vertical === 'center' ? 'center' : 'flex-start'),
+        };
+    }, [component.verticalAlignment, component.horizontalAlignment, flexDir]);
+    const renderedChildren = useMemo(() => {
+        return component.components?.map((comp, i) => (jsxRuntimeExports.jsx(View, { style: [
+                styles$5.fullWidth,
+                i === 0
+                    ? null
+                    : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor),
+            ], children: jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose, parentDirection: direction }) }, comp.id ?? i)));
+    }, [component.components, component.spacing, direction, scaleFactor, onClose]);
+    const innerContentStyle = useMemo(() => [
+        styles$5.inner,
+        {
+            flexDirection: flexDir,
+        },
+        inner,
+        contentAlignment,
+    ], [flexDir, inner, contentAlignment]);
+    if (!scrollEnabled) {
+        return (jsxRuntimeExports.jsx(View, { style: [styles$5.outer, outer], children: jsxRuntimeExports.jsx(View, { style: [styles$5.scroll, innerContentStyle], children: renderedChildren }) }));
+    }
+    return (jsxRuntimeExports.jsx(View, { style: [styles$5.outer, outer], children: jsxRuntimeExports.jsx(ScrollView, { style: styles$5.scroll, contentContainerStyle: innerContentStyle, showsVerticalScrollIndicator: false, scrollEnabled: true, children: renderedChildren }) }));
+};
+const styles$5 = StyleSheet.create({
+    outer: {
+        flex: 1,
+        minHeight: 0,
+        zIndex: 2,
+    },
+    scroll: {
+        flex: 1,
+    },
+    inner: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    fullWidth: {
+        width: '100%',
+    },
+});
+
+const NamiBackgroundContainer = ({ component, scaleFactor, onClose }) => {
+    if (!component || component.hidden)
+        return null;
+    const containerStyle = useMemo(() => applyStyles(component, scaleFactor), [component, scaleFactor]);
+    const fillImageUrl = resolveFillImageUrl(component.fillImage);
+    const bgColor = parseColor(component.fillColor) ?? parseColor(component.fillColorFallback);
+    const direction = component.direction ?? 'vertical';
+    const content = (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: component.components?.map((comp, i) => {
+            const marginKey = direction === 'vertical' ? 'topMargin' : 'leftMargin';
+            const spacedComponent = i === 0 || !component.spacing
+                ? comp
+                : {
+                    ...comp,
+                    [marginKey]: mergeRawMarginValue(comp[marginKey], component.spacing),
+                };
+            return (jsxRuntimeExports.jsx(TemplateRenderer, { component: spacedComponent, scaleFactor: scaleFactor, onClose: onClose, parentDirection: direction }, comp.id ?? i));
+        }) }));
+    if (fillImageUrl) {
+        return (jsxRuntimeExports.jsx(ImageBackground, { source: { uri: fillImageUrl }, resizeMode: 'cover', style: [containerStyle, styles$4.background], children: content }));
+    }
+    return (jsxRuntimeExports.jsx(View, { style: [containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles$4.background], children: content }));
+};
+function mergeRawMarginValue(existing, spacing) {
+    if (existing == null)
+        return spacing;
+    const existingNumeric = toNumericMargin(existing);
+    const spacingNumeric = toNumericMargin(spacing);
+    if (existingNumeric == null || spacingNumeric == null) {
+        return existing;
+    }
+    return existingNumeric + spacingNumeric;
+}
+function toNumericMargin(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || !/^-?\d+(\.\d+)?$/.test(trimmed)) {
+        return null;
+    }
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+const styles$4 = StyleSheet.create({
+    background: {
+        ...StyleSheet.absoluteFillObject,
+    },
+});
+
+const NamiHeader = ({ components, scaleFactor, onClose }) => {
+    const ctx = usePaywallContext();
+    const formFactor = ctx.state.formFactor;
+    const inFullScreen = ctx.state.fullScreenPresentation ?? false;
+    const marginTop = formFactor === 'phone' && !inFullScreen ? 40 : 0;
+    const list = Array.isArray(components)
+        ? components
+        : components?.components ?? [components];
+    const renderedList = require$$0.useMemo(() => list.map((comp, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose }, comp.id ?? i))), [list, scaleFactor, onClose]);
+    return (jsxRuntimeExports.jsx(View, { style: [styles$3.header, { marginTop }], children: renderedList }));
+};
+const styles$3 = StyleSheet.create({
+    header: {
+        display: 'flex',
+        position: 'relative',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 2,
+    },
+});
+
+const NamiFooter = ({ components, scaleFactor, onClose }) => {
+    const list = Array.isArray(components)
+        ? components
+        : components?.components ?? [components];
+    return (jsxRuntimeExports.jsx(View, { style: styles$2.footer, children: list.map((comp, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose }, comp.id ?? i))) }));
+};
+const styles$2 = StyleSheet.create({
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 3,
+    },
+});
+
+function buildImpressionPayload(impression) {
+    const payload = { ...impression };
+    const sessionId = storageService.getSessionId();
+    if (sessionId) {
+        payload.session = sessionId;
+    }
+    const launchId = storageService.getLaunchId();
+    if (launchId) {
+        payload.launch_id = launchId;
+    }
+    payload.app_env = "production";
+    payload.url_params = getUrlParams();
+    return payload;
+}
+const postImpression = async (impression) => {
+    if (isAnonymousMode()) {
+        return;
+    }
+    const payload = buildImpressionPayload(impression);
+    try {
+        await NamiAPI.instance.postImpression(payload);
+    }
+    catch (error) {
+        logger.error('Error posting impression', error);
+    }
+};
+
+let KeplerTVFocusGuideView = null;
+try {
+    KeplerTVFocusGuideView = require('@amazon-devices/react-native-kepler').TVFocusGuideView;
+}
+catch {
+    KeplerTVFocusGuideView = null;
+}
+const fontGateCache = new Map();
+const PaywallScreen = ({ paywall, onClose, onCommitted, holdInteractionUntilFocus = false, isActive = true, }) => {
+    const ctx = usePaywallContext();
+    const focusReadyCtx = useFirstFocusReadyContext();
+    const scaleFactor = getDeviceScaleFactor(ctx.state.formFactor);
+    const userInteractionEnabled = ctx.state.userInteractionEnabled !== false;
+    const currentPageName = ctx.state.selectedPaywall === paywall
+        ? ctx.state.currentPage
+        : paywall.template?.initialState?.currentPage ?? 'page1';
+    const page = useMemo(() => {
+        let currentPage;
+        if (ctx.state.selectedPaywall === paywall) {
+            currentPage = ctx.state.currentPage;
+        }
+        else {
+            currentPage = paywall.template?.initialState?.currentPage ?? 'page1';
+        }
+        return paywall.template?.pages?.find((p) => p.name === currentPage) ?? null;
+    }, [paywall, ctx.state.selectedPaywall, ctx.state.currentPage]);
+    const firstFocusReadyKey = `${paywall.id ?? 'unknown'}:${page?.name ?? currentPageName}:${ctx.state.formFactor ?? ''}`;
+    const shouldHoldForFocus = holdInteractionUntilFocus && ctx.state.formFactor === 'television';
+    const focusReady = !shouldHoldForFocus || focusReadyCtx.firstFocusReadyKey === firstFocusReadyKey;
+    const interactionEnabled = userInteractionEnabled && focusReady;
+    const fontNames = useMemo(() => Object.keys(paywall.fonts ?? {}).sort(), [paywall.fonts]);
+    const fontGateCacheKey = `${paywall.id ?? 'unknown'}:${page?.name ?? currentPageName}:${fontNames.join(',')}`;
+    const hasFonts = fontNames.length > 0;
+    const [fontGateState, setFontGateState] = useState(() => {
+        if (!hasFonts) {
+            return 'ready';
+        }
+        return fontGateCache.get(fontGateCacheKey) ?? 'pending';
+    });
+    useEffect(() => {
+        void postImpression({
+            segment: ctx.state.selectedCampaign?.segment,
+            call_to_action: paywall.id,
+        });
+        NamiEventEmitter.getInstance().emit(PAYWALL_ACTION_EVENT, {
+            ...ctx.getPaywallActionEventData(),
+            action: NamiPaywallAction.SHOW_PAYWALL,
+        });
+    }, [paywall.id, ctx.state.selectedCampaign?.segment]);
+    useEffect(() => {
+        let cancelled = false;
+        if (!hasFonts) {
+            setFontGateState('ready');
+            return;
+        }
+        const cachedGateState = fontGateCache.get(fontGateCacheKey);
+        if (cachedGateState) {
+            setFontGateState(cachedGateState);
+            return;
+        }
+        setFontGateState('pending');
+        void prepareAndLoadFontsWithTimeout(paywall.fonts, 1500).then((result) => {
+            if (!cancelled) {
+                const resolvedState = result === 'ready' ? 'ready' : 'fallback';
+                fontGateCache.set(fontGateCacheKey, resolvedState);
+                setFontGateState(resolvedState);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [currentPageName, fontGateCacheKey, fontNames.length, hasFonts, page?.name, paywall.fonts, paywall.id]);
+    useEffect(() => {
+        if (fontGateState === 'pending') {
+            return;
+        }
+        paywall.id ?? 'unknown';
+        const pageName = page?.name ?? currentPageName;
+        onCommitted?.(paywall, pageName, ctx.state.formFactor);
+    }, [fontGateState, paywall, paywall.id, page?.name, currentPageName, interactionEnabled, onCommitted, ctx.state.formFactor]);
+    useEffect(() => {
+        if (!isActive) {
+            return;
+        }
+        const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+            const hasRemoteBackActions = !!ctx.flow?.currentFlowStep?.actions?.[NamiReservedActions.REMOTE_BACK]?.length;
+            if (hasRemoteBackActions) {
+                return false;
+            }
+            const canGoBackPage = ctx.canGoBackPage();
+            if (!canGoBackPage) {
+                return false;
+            }
+            return ctx.goBackPage();
+        });
+        return () => subscription.remove();
+    }, [ctx, isActive]);
+    const { backgroundContainer, header = [], contentContainer, footer = [], } = (page ?? {});
+    const hasHeader = Array.isArray(header)
+        ? header.length > 0
+        : Array.isArray(header?.components)
+            ? header.components.length > 0
+            : Boolean(header);
+    const hasFooter = Array.isArray(footer)
+        ? footer.length > 0
+        : Array.isArray(footer?.components)
+            ? footer.components.length > 0
+            : Boolean(footer);
+    const bgColor = parseColor(backgroundContainer?.fillColor)
+        ?? parseColor(backgroundContainer?.fillColorFallback)
+        ?? 'transparent';
+    const waitingOverlayColor = bgColor === 'transparent' ? '#111118' : bgColor;
+    const PageFocusWrapper = ctx.state.formFactor === 'television' && KeplerTVFocusGuideView
+        ? KeplerTVFocusGuideView
+        : View;
+    const pageFocusWrapperProps = ctx.state.formFactor === 'television' && KeplerTVFocusGuideView
+        ? {
+            autoFocus: true,
+            style: styles$1.pageRoot,
+        }
+        : { style: styles$1.pageRoot };
+    if (!page) {
+        throw new Error(`Page with name ${ctx.state.currentPage} not found in paywall template.`);
+    }
+    if (fontGateState === 'pending') {
+        return (jsxRuntimeExports.jsx(View, { style: [styles$1.screen, styles$1.pendingScreen, { backgroundColor: waitingOverlayColor }], children: jsxRuntimeExports.jsx(ActivityIndicator, { size: "large", color: "#FFFFFF" }) }));
+    }
+    return (jsxRuntimeExports.jsx(View, { style: [styles$1.screen, { backgroundColor: bgColor }], pointerEvents: interactionEnabled ? 'auto' : 'none', children: jsxRuntimeExports.jsxs(PageFocusWrapper, { ...pageFocusWrapperProps, children: [backgroundContainer && (jsxRuntimeExports.jsx(NamiBackgroundContainer, { component: backgroundContainer, scaleFactor: scaleFactor, onClose: onClose })), hasHeader && (jsxRuntimeExports.jsx(NamiHeader, { components: header, scaleFactor: scaleFactor, onClose: onClose })), contentContainer && (jsxRuntimeExports.jsx(NamiContentContainer, { component: contentContainer, scaleFactor: scaleFactor, onClose: onClose })), hasFooter && (jsxRuntimeExports.jsx(NamiFooter, { components: footer, scaleFactor: scaleFactor, onClose: onClose })), shouldHoldForFocus && !focusReady && (jsxRuntimeExports.jsx(View, { pointerEvents: "none", style: [styles$1.waitingOverlay, { backgroundColor: waitingOverlayColor }] }))] }, `${paywall.id}:${page.name ?? currentPageName}`) }));
+};
+const styles$1 = StyleSheet.create({
+    screen: { flex: 1 },
+    pendingScreen: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    pageRoot: { flex: 1 },
+    waitingOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 20,
+    },
+});
+
+createContext(null);
+createContext(false);
+const FocusContext = createContext(true);
+createContext(null);
+const FocusProvider = ({ children, enabled }) => (jsxRuntimeExports.jsx(FocusContext.Provider, { value: enabled, children: children }));
+
+const DEFAULT_CONTEXT = {
+    productGroups: [],
+    customAttributes: {},
+    customObject: {},
+    currentGroup: '',
+};
+const REMOTE_BACK_FALLBACK_DELAY_MS = 600;
+const NamiView = ({ placement, url, onClose, onSignIn, onDeepLink, onPurchase, onRestore, onPaywallEvent, onHandoff, onFlowEvent, }) => {
+    const [launchRequest, setLaunchRequest] = useState(null);
+    const [reloadKey, setReloadKey] = useState(0);
+    const [isClosing, setIsClosing] = useState(false);
+    const [paywallData, setPaywallData] = useState(null);
+    const [campaignData, setCampaignData] = useState(null);
+    const [launchPreviewPaywall, setLaunchPreviewPaywall] = useState(null);
+    const [pendingTransitionPaywall, setPendingTransitionPaywall] = useState(null);
+    const [initialScreenCommitted, setInitialScreenCommitted] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [flowState, setFlowState] = useState({ paywalls: [], index: 0, animation: null });
+    const flowRef = useRef();
+    const lastLaunchKeyRef = useRef('');
+    const lastAppearStepIdRef = useRef('');
+    const launchCacheRef = useRef(new Map());
+    const remoteBackFallbackTimeoutRef = useRef(null);
+    const remoteBackFallbackAttemptRef = useRef(null);
+    const pendingNavigationFrameRef = useRef(null);
+    // Stable refs for callbacks so event listeners always see latest values
+    const onCloseRef = useRef(onClose);
+    const onSignInRef = useRef(onSignIn);
+    const onDeepLinkRef = useRef(onDeepLink);
+    const onPurchaseRef = useRef(onPurchase);
+    const onRestoreRef = useRef(onRestore);
+    const onPaywallEventRef = useRef(onPaywallEvent);
+    const onHandoffRef = useRef(onHandoff);
+    const onFlowEventRef = useRef(onFlowEvent);
+    useEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+    useEffect(() => { onSignInRef.current = onSignIn; }, [onSignIn]);
+    useEffect(() => { onDeepLinkRef.current = onDeepLink; }, [onDeepLink]);
+    useEffect(() => { onPurchaseRef.current = onPurchase; }, [onPurchase]);
+    useEffect(() => { onRestoreRef.current = onRestore; }, [onRestore]);
+    useEffect(() => { onPaywallEventRef.current = onPaywallEvent; }, [onPaywallEvent]);
+    useEffect(() => { onHandoffRef.current = onHandoff; }, [onHandoff]);
+    useEffect(() => { onFlowEventRef.current = onFlowEvent; }, [onFlowEvent]);
+    const resolvedLaunch = useMemo(() => {
+        if (launchRequest?.value)
+            return launchRequest;
+        if (url)
+            return { type: 'url', value: url };
+        if (placement)
+            return { type: 'label', value: placement };
+        return { type: undefined, value: '' };
+    }, [launchRequest, url, placement]);
+    const ctx = useMemo(() => ({
+        ...DEFAULT_CONTEXT,
+        ...(resolvedLaunch.context ?? launchRequest?.context ?? {}),
+        customAttributes: {
+            ...DEFAULT_CONTEXT.customAttributes,
+            ...(resolvedLaunch.context?.customAttributes ??
+                launchRequest?.context?.customAttributes ??
+                {}),
+        },
+        customObject: {
+            ...DEFAULT_CONTEXT.customObject,
+            ...(resolvedLaunch.context?.customObject ??
+                launchRequest?.context?.customObject ??
+                {}),
+        },
+        productGroups: resolvedLaunch.context?.productGroups ??
+            launchRequest?.context?.productGroups ??
+            DEFAULT_CONTEXT.productGroups,
+    }), [launchRequest?.context, resolvedLaunch.context]);
+    const isFlowCampaign = isNamiFlowCampaign(campaignData);
+    const clearRemoteBackFallback = useCallback(() => {
+        if (remoteBackFallbackTimeoutRef.current) {
+            clearTimeout(remoteBackFallbackTimeoutRef.current);
+            remoteBackFallbackTimeoutRef.current = null;
+        }
+        remoteBackFallbackAttemptRef.current = null;
+    }, []);
+    const finishActiveFlow = useCallback(() => {
+        clearRemoteBackFallback();
+        const activeFlow = flowRef.current;
+        if (!activeFlow)
+            return;
+        if (NamiFlowManager.instance.currentFlow === activeFlow || NamiFlowManager.instance.flowOpen) {
+            NamiFlowManager.finish();
+        }
+        flowRef.current = undefined;
+        lastAppearStepIdRef.current = '';
+    }, [clearRemoteBackFallback]);
+    const requestClose = useCallback(() => {
+        clearRemoteBackFallback();
+        if (onCloseRef.current) {
+            setIsClosing(true);
+            onCloseRef.current();
+            return;
+        }
+    }, [clearRemoteBackFallback]);
+    const scheduleRemoteBackFallbackClose = useCallback((flow, stepId, paywallId) => {
+        clearRemoteBackFallback();
+        remoteBackFallbackAttemptRef.current = {
+            flow,
+            stepId,
+            paywallId,
+        };
+        remoteBackFallbackTimeoutRef.current = setTimeout(() => {
+            remoteBackFallbackTimeoutRef.current = null;
+            const attempt = remoteBackFallbackAttemptRef.current;
+            const activeFlow = flowRef.current;
+            activeFlow?.currentFlowStep?.id;
+            activeFlow?.currentFlowStep?.type;
+            const activePaywallId = paywallData?.id;
+            const transitionedToTerminalExit = !!attempt
+                && attempt.flow === activeFlow
+                && activePaywallId === attempt.paywallId
+                && (activeFlow?.currentFlowStep?.type === 'exit'
+                    || NamiFlowManager.instance.flowOpen === false);
+            const shouldFallbackClose = !isClosing
+                && !!attempt
+                && ((attempt.flow === activeFlow
+                    && activeFlow?.currentFlowStep?.id === attempt.stepId
+                    && activePaywallId === attempt.paywallId
+                    && activeFlow?.previousStepAvailable === false)
+                    || transitionedToTerminalExit);
+            if (!shouldFallbackClose) {
+                remoteBackFallbackAttemptRef.current = null;
+                return;
+            }
+            remoteBackFallbackAttemptRef.current = null;
+            finishActiveFlow();
+            requestClose();
+        }, REMOTE_BACK_FALLBACK_DELAY_MS);
+    }, [clearRemoteBackFallback, finishActiveFlow, isClosing, paywallData?.id, requestClose]);
+    const handleFlowNavigation = useCallback((paywall, options) => {
+        const flow = flowRef.current;
+        const currentPaywall = flowState.paywalls[flowState.index] ??
+            flowState.paywalls[flowState.paywalls.length - 1] ??
+            paywallData;
+        const shouldUseAnimatedTransition = options.transition !== 'none'
+            && !!currentPaywall
+            && currentPaywall.id !== paywall.id;
+        const applyNavigation = () => {
+            if (flow?.previousFlowStep) {
+                flow.executeLifecycle(flow.previousFlowStep, NamiReservedActions.DISAPPEAR);
+            }
+            setFlowState(() => {
+                if (!shouldUseAnimatedTransition || !currentPaywall) {
+                    return { paywalls: [paywall], index: 0, animation: options };
+                }
+                return {
+                    paywalls: [currentPaywall, paywall],
+                    index: 1,
+                    animation: options,
+                };
+            });
+            setPaywallData(paywall);
+            if (flow?.currentFlowStep) {
+                flow.executeLifecycle(flow.currentFlowStep, NamiReservedActions.APPEAR);
+                lastAppearStepIdRef.current = flow.currentFlowStep.id;
+            }
+        };
+        if (!shouldUseAnimatedTransition) {
+            setPendingTransitionPaywall(null);
+            applyNavigation();
+            return;
+        }
+        setPendingTransitionPaywall(paywall);
+        if (pendingNavigationFrameRef.current != null) {
+            cancelAnimationFrame(pendingNavigationFrameRef.current);
+        }
+        pendingNavigationFrameRef.current = requestAnimationFrame(() => {
+            pendingNavigationFrameRef.current = null;
+            applyNavigation();
+        });
+    }, [flowState.index, flowState.paywalls, paywallData]);
+    const handleFlowAnimationSettled = useCallback((paywall) => {
+        setPendingTransitionPaywall(null);
+        setFlowState((prev) => {
+            const current = prev.paywalls[prev.index] ?? prev.paywalls[prev.paywalls.length - 1];
+            if (!prev.animation && current?.id === paywall.id) {
+                return prev;
+            }
+            if (prev.paywalls.length > 1 && prev.index > 0) {
+                return {
+                    paywalls: prev.paywalls,
+                    index: prev.index,
+                    animation: null,
+                };
+            }
+            return { paywalls: [paywall], index: 0, animation: null };
+        });
+    }, []);
+    useEffect(() => {
+        const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+            const flow = flowRef.current;
+            if (flow?.currentFlowStep) {
+                const stepcrumbs = Array.isArray(flow.stepcrumbs) ? flow.stepcrumbs : [];
+                const previousScreenStep = [...stepcrumbs]
+                    .slice(0, -1)
+                    .reverse()
+                    .find((step) => step?.type === 'screen');
+                const hasRemoteBackActions = !!flow.currentFlowStep?.actions?.[NamiReservedActions.REMOTE_BACK]?.length;
+                const canNavigateBackInFlow = flow.previousStepAvailable
+                    || (Boolean(previousScreenStep)
+                        && previousScreenStep?.allow_back_to !== false);
+                if (hasRemoteBackActions) {
+                    if (!canNavigateBackInFlow) {
+                        scheduleRemoteBackFallbackClose(flow, flow.currentFlowStep.id, paywallData?.id);
+                    }
+                    else {
+                        clearRemoteBackFallback();
+                    }
+                    flow.triggerActions(NamiReservedActions.REMOTE_BACK);
+                    return true;
+                }
+                clearRemoteBackFallback();
+                if (!canNavigateBackInFlow) {
+                    finishActiveFlow();
+                    requestClose();
+                    return true;
+                }
+                flow.back();
+                return true;
+            }
+            if (paywallData) {
+                requestClose();
+                return true;
+            }
+            return false;
+        });
+        return () => subscription.remove();
+    }, [clearRemoteBackFallback, finishActiveFlow, paywallData, requestClose, scheduleRemoteBackFallbackClose]);
+    // ─── Paywall action event listener ───────────────────────────────────
+    useEffect(() => {
+        const emitter = NamiEventEmitter.getInstance();
+        const handler = (event) => {
+            // Forward to catch-all
+            onPaywallEventRef.current?.(event);
+            // Route to specific callbacks
+            switch (event.action) {
+                case NamiPaywallAction.CLOSE_PAYWALL:
+                    onCloseRef.current?.();
+                    break;
+                case NamiPaywallAction.SIGN_IN:
+                    onSignInRef.current?.();
+                    break;
+                case NamiPaywallAction.DEEPLINK:
+                    if (event.deeplinkUrl) {
+                        onDeepLinkRef.current?.(event.deeplinkUrl);
+                    }
+                    break;
+                case NamiPaywallAction.BUY_SKU:
+                    onPurchaseRef.current?.(event.sku);
+                    break;
+                case NamiPaywallAction.RESTORE_PURCHASES:
+                    onRestoreRef.current?.();
+                    break;
+            }
+        };
+        emitter.addListener(PAYWALL_ACTION_EVENT, handler);
+        return () => {
+            emitter.removeListener(PAYWALL_ACTION_EVENT, handler);
+        };
+    }, [finishActiveFlow]);
+    // ─── Flow handlers ───────────────────────────────────────────────────
+    useEffect(() => {
+        NamiFlowManager.registerStepHandoff((handoffTag, handoffData) => {
+            onHandoffRef.current?.(handoffTag, handoffData);
+        });
+        NamiFlowManager.registerEventHandler((eventData) => {
+            onFlowEventRef.current?.(eventData);
+        });
+        return () => {
+            NamiFlowManager.registerStepHandoff(undefined);
+            NamiFlowManager.registerEventHandler(() => { });
+        };
+    }, []);
+    // ─── ExpoUIAdapter listener subscriptions ────────────────────────────
+    useEffect(() => {
+        const unsubPaywall = expoUIAdapter.onPaywallRequested((info, context) => {
+            setLaunchRequest({ type: info?.type, value: info?.value ?? '', context });
+        });
+        const unsubReRender = expoUIAdapter.onReRenderRequested(() => {
+            setReloadKey(k => k + 1);
+        });
+        const unsubFlow = expoUIAdapter.onFlowNavigationRequested((paywall, options) => {
+            handleFlowNavigation(paywall, options);
+        });
+        return () => {
+            unsubPaywall();
+            unsubReRender();
+            unsubFlow();
+        };
+    }, [handleFlowNavigation]);
+    useEffect(() => {
+        return () => {
+            if (pendingNavigationFrameRef.current != null) {
+                cancelAnimationFrame(pendingNavigationFrameRef.current);
+                pendingNavigationFrameRef.current = null;
+            }
+            clearRemoteBackFallback();
+            finishActiveFlow();
+        };
+    }, [clearRemoteBackFallback, finishActiveFlow]);
+    // ─── Reset state when launch key changes ─────────────────────────────
+    useEffect(() => {
+        const launchKey = `${resolvedLaunch.type ?? ''}:${resolvedLaunch.value ?? ''}`;
+        if (launchKey !== lastLaunchKeyRef.current) {
+            lastLaunchKeyRef.current = launchKey;
+            setIsClosing(false);
+            setFlowState({ paywalls: [], index: 0, animation: null });
+            finishActiveFlow();
+            setPaywallData(null);
+            setCampaignData(null);
+            setLaunchPreviewPaywall(null);
+            setPendingTransitionPaywall(null);
+            setInitialScreenCommitted(false);
+            lastAppearStepIdRef.current = '';
+        }
+    }, [finishActiveFlow, resolvedLaunch.type, resolvedLaunch.value]);
+    // ─── Campaign / paywall resolution ───────────────────────────────────
+    useEffect(() => {
+        let cancelled = false;
+        const resolveLaunch = async () => {
+            const value = resolvedLaunch.value;
+            const type = resolvedLaunch.type ?? (url ? 'url' : 'label');
+            const cacheKey = `${type}:${value}`;
+            if (!value) {
+                setLoading(false);
+                setPaywallData(null);
+                setCampaignData(null);
+                setLaunchPreviewPaywall(null);
+                return;
+            }
+            const cachedLaunch = launchCacheRef.current.get(cacheKey);
+            if (cachedLaunch) {
+                setLaunchPreviewPaywall(cachedLaunch.launchPreviewPaywall);
+                setPaywallData(cachedLaunch.paywallData);
+                setCampaignData(cachedLaunch.campaignData);
+                setLoading(false);
+            }
+            else {
+                setLoading(true);
+            }
+            try {
+                const data = getPaywallDataFromLabel(value, type);
+                const paywall = data?.paywall;
+                const flowPaywalls = isNamiFlowCampaign(data?.campaign)
+                    ? (data?.campaign?.flow?.object?.screens ?? [])
+                        .map((screenId) => getPaywall(screenId))
+                        .filter((item) => item != null)
+                    : [];
+                const initialPaywall = paywall ?? flowPaywalls[0];
+                const nextCampaign = data?.campaign ? data.campaign : { value, type };
+                const nextLaunch = {
+                    launchPreviewPaywall: initialPaywall ?? null,
+                    paywallData: data?.paywall ?? null,
+                    campaignData: nextCampaign,
+                };
+                if (!cancelled) {
+                    setLaunchPreviewPaywall(nextLaunch.launchPreviewPaywall);
+                    setInitialScreenCommitted(false);
+                    setPaywallData(nextLaunch.paywallData);
+                    setCampaignData(nextLaunch.campaignData);
+                    setLoading(false);
+                    launchCacheRef.current.set(cacheKey, nextLaunch);
+                }
+                prewarmPaywallFonts([paywall, ...flowPaywalls]);
+                if (initialPaywall?.fonts) {
+                    void prepareAndLoadFontsWithTimeout(initialPaywall.fonts);
+                }
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+                logger.warn('[NamiExpo] Failed to resolve paywall launch.', e);
+            }
+        };
+        void resolveLaunch();
+        return () => {
+            cancelled = true;
+        };
+    }, [resolvedLaunch.value, resolvedLaunch.type, url, reloadKey]);
+    // ─── Flow presentation ───────────────────────────────────────────────
+    useEffect(() => {
+        if (!campaignData)
+            return;
+        if (!isNamiFlowCampaign(campaignData))
+            return;
+        const screens = campaignData.flow?.object?.screens ?? [];
+        if (screens.length && !hasAllPaywalls(screens))
+            return;
+        if (flowRef.current)
+            return;
+        const flow = NamiFlowManager.instance.presentFlow(campaignData, {
+            type: resolvedLaunch.type,
+            value: resolvedLaunch.value,
+            context: ctx,
+        }, ctx);
+        flowRef.current = flow;
+    }, [campaignData, resolvedLaunch.type, resolvedLaunch.value, ctx, reloadKey]);
+    useEffect(() => {
+        const flow = flowRef.current;
+        const activePaywall = flowState.paywalls[flowState.index] ??
+            flowState.paywalls[flowState.paywalls.length - 1];
+        if (!flow || !activePaywall || !flow.currentFlowStep) {
+            return;
+        }
+        const currentStep = flow.currentFlowStep;
+        if (lastAppearStepIdRef.current === currentStep.id) {
+            return;
+        }
+        flow.executeLifecycle(currentStep, NamiReservedActions.APPEAR);
+        lastAppearStepIdRef.current = currentStep.id;
+    }, [flowState.paywalls, flowState.index]);
+    useEffect(() => {
+        const attempt = remoteBackFallbackAttemptRef.current;
+        if (!attempt) {
+            return;
+        }
+        if (isClosing) {
+            clearRemoteBackFallback();
+            return;
+        }
+        const activeFlow = flowRef.current;
+        const activeStepId = activeFlow?.currentFlowStep?.id;
+        const activePaywallId = paywallData?.id;
+        const didNavigateAway = attempt.flow !== activeFlow
+            || attempt.stepId !== activeStepId
+            || attempt.paywallId !== activePaywallId;
+        if (didNavigateAway) {
+            clearRemoteBackFallback();
+        }
+    }, [clearRemoteBackFallback, flowState.index, flowState.paywalls, isClosing, paywallData?.id]);
+    const hasFlowScreen = flowState.paywalls.length > 0;
+    const launchPlaceholderPaywall = launchPreviewPaywall
+        ?? paywallData
+        ?? flowState.paywalls[flowState.index]
+        ?? flowState.paywalls[0]
+        ?? null;
+    const showLaunchPlaceholder = Boolean(launchPlaceholderPaywall)
+        && (loading || !initialScreenCommitted);
+    const showTransitionPlaceholder = Boolean(pendingTransitionPaywall)
+        && !loading
+        && !isClosing;
+    const handleInitialCommitted = useCallback((_paywall, _pageName, _formFactor) => {
+        setInitialScreenCommitted(true);
+    }, []);
+    if (isClosing) {
+        return jsxRuntimeExports.jsx(SafeAreaView, { style: styles.root });
+    }
+    if (loading || !campaignData || (!isFlowCampaign && !paywallData) || (isFlowCampaign && !hasFlowScreen)) {
+        return jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: launchPlaceholderPaywall });
+    }
+    return (jsxRuntimeExports.jsxs(SafeAreaView, { style: styles.root, children: [jsxRuntimeExports.jsx(StatusBar, { barStyle: "light-content" }), isFlowCampaign ? (jsxRuntimeExports.jsx(FlowRenderer, { paywalls: flowState.paywalls, currentIndex: flowState.index, animation: flowState.animation ?? undefined, onSettled: handleFlowAnimationSettled, onTransitionVisible: () => setPendingTransitionPaywall(null), onInitialCommitted: handleInitialCommitted, onClose: onClose, campaign: campaignData, context: ctx, flow: flowRef.current })) : (jsxRuntimeExports.jsx(PaywallProvider, { paywall: paywallData, context: ctx, campaign: campaignData, children: jsxRuntimeExports.jsx(PaywallScreen, { paywall: paywallData, onClose: requestClose, onCommitted: handleInitialCommitted, isActive: true }) })), !isClosing && showLaunchPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: launchPlaceholderPaywall, overlay: true }), showTransitionPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: pendingTransitionPaywall, overlay: true })] }));
+};
+const LaunchPlaceholder = ({ paywall, overlay = false }) => {
+    const initialPageName = paywall?.template?.initialState?.currentPage ?? 'page1';
+    const page = paywall?.template?.pages?.find((item) => item?.name === initialPageName) ?? null;
+    const backgroundContainer = page?.backgroundContainer;
+    const backgroundColor = parseColor(backgroundContainer?.fillColor)
+        ?? parseColor(backgroundContainer?.fillColorFallback)
+        ?? '#111118';
+    return (jsxRuntimeExports.jsx(View, { pointerEvents: "none", style: [
+            styles.loading,
+            overlay ? styles.loadingOverlay : null,
+            { backgroundColor },
+        ], children: jsxRuntimeExports.jsx(ActivityIndicator, { size: "large", color: "#FFFFFF" }) }));
+};
+const getPaywallBackgroundColor = (paywall) => {
+    const initialPageName = paywall?.template?.initialState?.currentPage ?? 'page1';
+    const page = paywall?.template?.pages?.find((item) => item?.name === initialPageName) ?? null;
+    const backgroundContainer = page?.backgroundContainer;
+    return (parseColor(backgroundContainer?.fillColor)
+        ?? parseColor(backgroundContainer?.fillColorFallback)
+        ?? '#111118');
+};
+/** Renders multi-step flow paywalls with transition animations */
+const FlowRenderer = ({ paywalls, currentIndex, animation, onSettled, onTransitionVisible, onInitialCommitted, onClose, campaign, context, flow }) => {
+    const { width, height } = Dimensions.get('window');
+    const progress = useRef(new Animated.Value(0)).current;
+    const transitionSequenceRef = useRef(0);
+    const lastTransitionSignatureRef = useRef('');
+    const startedTransitionKeyRef = useRef(null);
+    const [completedTransitionKey, setCompletedTransitionKey] = useState(null);
+    const transition = animation?.transition ?? 'slide';
+    const direction = animation?.direction === 'backward' ? -1 : 1;
+    const isVertical = transition === 'verticalSlide';
+    const shouldAnimatePair = paywalls.length === 2
+        && currentIndex === 1
+        && animation != null;
+    const shouldRenderPair = shouldAnimatePair;
+    const sourcePaywall = shouldRenderPair ? paywalls[0] : undefined;
+    const targetPaywall = shouldRenderPair
+        ? paywalls[1]
+        : (paywalls[currentIndex] ?? paywalls[0]);
+    const targetBackgroundColor = useMemo(() => getPaywallBackgroundColor(targetPaywall), [targetPaywall]);
+    const transitionSignature = shouldAnimatePair
+        ? `${sourcePaywall?.id ?? 'source'}->${targetPaywall?.id ?? 'target'}:${transition}:${direction}`
+        : '';
+    if (shouldAnimatePair && lastTransitionSignatureRef.current !== transitionSignature) {
+        lastTransitionSignatureRef.current = transitionSignature;
+        transitionSequenceRef.current += 1;
+    }
+    else if (!shouldAnimatePair) {
+        lastTransitionSignatureRef.current = '';
+    }
+    const activeTransitionKey = shouldAnimatePair
+        ? `${transitionSignature}:${transitionSequenceRef.current}`
+        : '';
+    const [committedTarget, setCommittedTarget] = useState({
+        transitionKey: null,
+        paywallId: null,
+    });
+    const interactionReady = !shouldAnimatePair
+        || (committedTarget.transitionKey === activeTransitionKey
+            && committedTarget.paywallId === (targetPaywall?.id ?? null));
+    const transitionReady = shouldAnimatePair && interactionReady;
+    const handleTargetCommitted = useCallback((paywall, _pageName, formFactor) => {
+        if (paywall.id !== targetPaywall?.id) {
+            return;
+        }
+        setCommittedTarget({
+            transitionKey: activeTransitionKey || null,
+            paywallId: paywall.id ?? null,
+        });
+    }, [activeTransitionKey, targetPaywall?.id]);
+    const handleVisibleCommitted = useCallback((paywall, pageName, formFactor) => {
+        if (currentIndex === 0) {
+            onInitialCommitted?.(paywall, pageName, formFactor);
+        }
+        handleTargetCommitted(paywall, pageName, formFactor);
+    }, [currentIndex, handleTargetCommitted, onInitialCommitted]);
+    useLayoutEffect(() => {
+        const activePaywall = paywalls[currentIndex] ?? paywalls[paywalls.length - 1];
+        if (!shouldAnimatePair) {
+            startedTransitionKeyRef.current = null;
+            setCompletedTransitionKey(null);
+            progress.stopAnimation();
+            progress.setValue(0);
+            return;
+        }
+        if (transition === 'fade' || transition === 'none') {
+            if (startedTransitionKeyRef.current === activeTransitionKey) {
+                return;
+            }
+            startedTransitionKeyRef.current = activeTransitionKey;
+            setCompletedTransitionKey(null);
+            progress.stopAnimation();
+            progress.setValue(0);
+            if (activePaywall) {
+                requestAnimationFrame(() => {
+                    onSettled?.(activePaywall);
+                });
+            }
+            return;
+        }
+        if (!transitionReady) {
+            if (startedTransitionKeyRef.current !== activeTransitionKey) {
+                progress.stopAnimation();
+                progress.setValue(0);
+            }
+            return;
+        }
+        if (startedTransitionKeyRef.current === activeTransitionKey) {
+            return;
+        }
+        startedTransitionKeyRef.current = activeTransitionKey;
+        setCompletedTransitionKey(null);
+        progress.stopAnimation();
+        progress.setValue(0);
+        Animated.timing(progress, {
+            toValue: 1,
+            duration: 250,
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished) {
+                setCompletedTransitionKey(activeTransitionKey);
+            }
+        });
+    }, [
+        activeTransitionKey,
+        animation?.direction,
+        currentIndex,
+        onSettled,
+        paywalls,
+        progress,
+        sourcePaywall?.id,
+        transitionReady,
+        transition,
+    ]);
+    useEffect(() => {
+        if (!shouldAnimatePair
+            || !targetPaywall
+            || !interactionReady
+            || completedTransitionKey !== activeTransitionKey) {
+            return;
+        }
+        onSettled?.(targetPaywall);
+    }, [
+        activeTransitionKey,
+        completedTransitionKey,
+        interactionReady,
+        onSettled,
+        shouldAnimatePair,
+        targetPaywall,
+    ]);
+    useEffect(() => {
+        if (!shouldAnimatePair || !interactionReady) {
+            return;
+        }
+        onTransitionVisible?.();
+    }, [interactionReady, onTransitionVisible, shouldAnimatePair]);
+    if (transition === 'fade') {
+        const current = paywalls[currentIndex] ?? paywalls[0];
+        if (!current)
+            return null;
+        return (jsxRuntimeExports.jsx(View, { style: styles.flowContainer, children: jsxRuntimeExports.jsx(View, { style: { width, height }, children: jsxRuntimeExports.jsx(FocusProvider, { enabled: true, children: jsxRuntimeExports.jsx(PaywallProvider, { paywall: current, context: context, campaign: campaign, flow: flow, children: jsxRuntimeExports.jsx(PaywallScreen, { paywall: current, onClose: onClose, onCommitted: handleVisibleCommitted, isActive: true }) }) }) }) }));
+    }
+    const renderedPaywalls = shouldRenderPair
+        ? [
+            { paywall: sourcePaywall, role: 'source', key: 0 },
+            { paywall: targetPaywall, role: 'target', key: 1 },
+        ]
+        : [{ paywall: paywalls[currentIndex] ?? paywalls[0], role: 'target', key: currentIndex }];
+    return (jsxRuntimeExports.jsxs(View, { style: styles.flowContainer, children: [renderedPaywalls.map(({ paywall: pw, role, key }) => {
+                if (!pw) {
+                    return null;
+                }
+                const animatedStyle = role === 'target' && shouldAnimatePair
+                    ? { opacity: 0 }
+                    : null;
+                return (jsxRuntimeExports.jsx(Animated.View, { pointerEvents: role === 'target' && !shouldAnimatePair && interactionReady ? 'auto' : 'none', style: [
+                        styles.flowScreen,
+                        {
+                            width,
+                            height,
+                            zIndex: role === 'target' ? 2 : 1,
+                            elevation: role === 'target' ? 2 : 1,
+                        },
+                        animatedStyle ?? null,
+                    ], children: jsxRuntimeExports.jsx(FocusProvider, { enabled: role === 'target' && !shouldAnimatePair && interactionReady, children: jsxRuntimeExports.jsx(PaywallProvider, { paywall: pw, context: context, campaign: campaign, flow: flow, children: jsxRuntimeExports.jsx(PaywallScreen, { paywall: pw, onClose: onClose, onCommitted: role === 'target' ? handleVisibleCommitted : undefined, isActive: role === 'target' && !shouldAnimatePair && interactionReady }) }) }) }, pw.id ?? key));
+            }), shouldAnimatePair && !interactionReady && (jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: targetPaywall ?? null, overlay: true })), transitionReady && targetPaywall && (jsxRuntimeExports.jsx(Animated.View, { pointerEvents: "none", style: [
+                    styles.flowScreen,
+                    {
+                        width,
+                        height,
+                        zIndex: 3,
+                        elevation: 3,
+                        backgroundColor: targetBackgroundColor,
+                    },
+                    isVertical
+                        ? {
+                            transform: [{
+                                    translateY: progress.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [height * direction, 0],
+                                    }),
+                                }],
+                        }
+                        : {
+                            transform: [{
+                                    translateX: progress.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [width * direction, 0],
+                                    }),
+                                }],
+                        },
+                ] }))] }));
+};
+const styles = StyleSheet.create({
+    root: { flex: 1, backgroundColor: '#000' },
+    loading: {
+        flex: 1,
+        backgroundColor: '#111118',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 50,
+    },
+    flowContainer: { flex: 1, overflow: 'hidden' },
+    flowScreen: { position: 'absolute', top: 0, left: 0 },
+});
+
+const runtimeGlobals = globalThis;
+const sdkEnvKey = 'NAMI_SDK' + '_ENV';
+if (typeof runtimeGlobals[sdkEnvKey] !== 'string' || runtimeGlobals[sdkEnvKey] === '') {
+    const devFlag = typeof __DEV__ === 'boolean' ? __DEV__ : false;
+    runtimeGlobals[sdkEnvKey] = devFlag ? 'development' : 'production';
+}
+
+export { ExpoDeviceAdapter, ExpoPurchaseAdapter, ExpoStorageAdapter, ExpoUIAdapter, Nami, NamiView, PaywallProvider, PaywallScreen, TemplateRenderer, usePaywallContext };
+//# sourceMappingURL=index.mjs.map