@userflow-tech/react-native 0.1.1 → 0.3.0

package/lib/commonjs/surfaces/BannerBar.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BannerBar = BannerBar;
+var _core = require("@userflow-tech/core");
+var _protocol = require("@userflow-tech/protocol");
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _BannerStepButton = require("../content/BannerStepButton.js");
+var _RichContentRenderer = require("../content/RichContentRenderer.js");
+var _themeColor = require("../content/themeColor.js");
+var _bannerBarLayout = require("./bannerBarLayout.js");
+var _bannerBarTokens = require("./bannerBarTokens.js");
+var _resolveBannerTheme = require("./resolveBannerTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Banner chrome. An overlay parent floats this over the host. A flow parent
+ * keeps it in layout so the app is pushed instead of covered.
+ */
+function BannerBar({
+  session,
+  onActions,
+  onDismiss
+}) {
+  const banner = session.version.banner;
+  const theme = session.version.theme;
+  const backgroundColor = (0, _resolveBannerTheme.resolveBannerBackgroundColor)(theme);
+  const foregroundColor = (0, _resolveBannerTheme.resolveBannerForegroundColor)(theme);
+  const bannerTheme = React.useMemo(() => ({
+    ...theme,
+    backgroundColor,
+    fontColor: foregroundColor
+  }), [theme, backgroundColor, foregroundColor]);
+  const lookupAttribute = React.useMemo(() => (0, _core.genSessionDataLookup)(session.data), [session.data]);
+  const opacity = React.useRef(new _reactNative.Animated.Value(banner?.animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!banner?.animate) {
+      opacity.setValue(1);
+      return;
+    }
+    opacity.setValue(0);
+    const animation = _reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [banner?.animate, opacity, session.id]);
+  if (!banner) return null;
+  const overlay = banner.overlay !== false;
+  const frameStyle = (0, _bannerBarLayout.bannerFrameStyle)(banner);
+  const innerStyle = (0, _bannerBarLayout.bannerInnerStyle)(banner);
+  const closePressedBackground = (0, _themeColor.mixThemeColors)(backgroundColor, foregroundColor, 0.12);
+  const overlayEdge = banner.embedMode === _protocol.BannerEmbedMode.BODY_LAST ? 'bottom' : 'top';
+  const barRadius = (0, _bannerBarLayout.resolveBannerBarBorderRadius)(banner);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: "userflow-banner-frame",
+    style: frameStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [{
+        opacity
+      }, overlay ? (0, _bannerBarTokens.bannerOverlayShadowStyle)(overlayEdge) : null],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "userflow-banner",
+        style: [styles.root, {
+          backgroundColor
+        }, barRadius != null ? {
+          borderRadius: barRadius,
+          overflow: 'hidden'
+        } : null],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.startSpacer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: innerStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.content,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichContentRenderer.RichContentRenderer, {
+              content: banner.content,
+              buttons: [],
+              theme: bannerTheme,
+              sessionData: session.data,
+              lookupAttribute: lookupAttribute,
+              onActions: onActions
+            })
+          }), banner.buttons.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.buttons,
+            children: banner.buttons.map(button => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BannerStepButton.BannerStepButton, {
+              button: button,
+              theme: bannerTheme,
+              sessionData: session.data,
+              onActions: onActions
+            }, button.id))
+          }) : null]
+        }), session.version.closeDisabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.startSpacer
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          testID: "userflow-banner-dismiss",
+          accessibilityRole: "button",
+          accessibilityLabel: "Dismiss",
+          hitSlop: 8,
+          onPress: () => onDismiss(_protocol.EndFlowReasonInput.USER_CLOSED),
+          style: ({
+            pressed
+          }) => [styles.close, pressed ? {
+            backgroundColor: closePressedBackground
+          } : null],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.dismissIcon, {
+              color: foregroundColor
+            }],
+            children: "\xD7"
+          })
+        })]
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: _bannerBarLayout.BANNER_ROOT_PADDING
+  },
+  startSpacer: {
+    flexGrow: 1,
+    flexShrink: 1,
+    maxWidth: _bannerBarLayout.BANNER_CLOSE_SLOT_SIZE,
+    height: _bannerBarLayout.BANNER_CLOSE_SLOT_SIZE
+  },
+  content: {
+    flexShrink: 1,
+    minWidth: 0
+  },
+  buttons: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    gap: _bannerBarTokens.BANNER_BUTTON_GAP
+  },
+  close: {
+    width: _bannerBarLayout.BANNER_CLOSE_SLOT_SIZE,
+    height: _bannerBarLayout.BANNER_CLOSE_SLOT_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    borderRadius: _bannerBarTokens.BANNER_CLOSE_BORDER_RADIUS
+  },
+  dismissIcon: {
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '300'
+  }
+});
+//# sourceMappingURL=BannerBar.js.map

package/lib/commonjs/surfaces/BannerBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_core","require","_protocol","React","_interopRequireWildcard","_reactNative","_BannerStepButton","_RichContentRenderer","_themeColor","_bannerBarLayout","_bannerBarTokens","_resolveBannerTheme","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BannerBar","session","onActions","onDismiss","banner","version","theme","backgroundColor","resolveBannerBackgroundColor","foregroundColor","resolveBannerForegroundColor","bannerTheme","useMemo","fontColor","lookupAttribute","genSessionDataLookup","data","opacity","useRef","Animated","Value","animate","current","useEffect","setValue","animation","timing","toValue","duration","useNativeDriver","start","stop","id","overlay","frameStyle","bannerFrameStyle","innerStyle","bannerInnerStyle","closePressedBackground","mixThemeColors","overlayEdge","embedMode","BannerEmbedMode","BODY_LAST","barRadius","resolveBannerBarBorderRadius","jsx","View","testID","style","children","bannerOverlayShadowStyle","jsxs","styles","root","borderRadius","overflow","startSpacer","content","RichContentRenderer","buttons","sessionData","length","map","button","BannerStepButton","closeDisabled","Pressable","accessibilityRole","accessibilityLabel","hitSlop","onPress","EndFlowReasonInput","USER_CLOSED","pressed","close","Text","dismissIcon","color","StyleSheet","create","flexDirection","alignItems","padding","BANNER_ROOT_PADDING","flexGrow","flexShrink","maxWidth","BANNER_CLOSE_SLOT_SIZE","height","minWidth","flexWrap","gap","BANNER_BUTTON_GAP","width","justifyContent","BANNER_CLOSE_BORDER_RADIUS","fontSize","lineHeight","fontWeight"],"sourceRoot":"../../../src","sources":["surfaces/BannerBar.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAEA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAEA,IAAAQ,gBAAA,GAAAR,OAAA;AAOA,IAAAS,gBAAA,GAAAT,OAAA;AAKA,IAAAU,mBAAA,GAAAV,OAAA;AAAkG,IAAAW,WAAA,GAAAX,OAAA;AAAA,SAAAG,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQlG;AACA;AACA;AACA;AACO,SAASkB,SAASA,CAAC;EACxBC,OAAO;EACPC,SAAS;EACTC;AACc,CAAC,EAA6B;EAC5C,MAAMC,MAAM,GAAGH,OAAO,CAACI,OAAO,CAACD,MAAM;EACrC,MAAME,KAAK,GAAGL,OAAO,CAACI,OAAO,CAACC,KAAK;EACnC,MAAMC,eAAe,GAAG,IAAAC,gDAA4B,EAACF,KAAK,CAAC;EAC3D,MAAMG,eAAe,GAAG,IAAAC,gDAA4B,EAACJ,KAAK,CAAC;EAC3D,MAAMK,WAAW,GAAGxC,KAAK,CAACyC,OAAO,CAC/B,OAAO;IAAE,GAAGN,KAAK;IAAEC,eAAe;IAAEM,SAAS,EAAEJ;EAAgB,CAAC,CAAC,EACjE,CAACH,KAAK,EAAEC,eAAe,EAAEE,eAAe,CAC1C,CAAC;EACD,MAAMK,eAAe,GAAG3C,KAAK,CAACyC,OAAO,CAAC,MAAM,IAAAG,0BAAoB,EAACd,OAAO,CAACe,IAAI,CAAC,EAAE,CAACf,OAAO,CAACe,IAAI,CAAC,CAAC;EAC/F,MAAMC,OAAO,GAAG9C,KAAK,CAAC+C,MAAM,CAAC,IAAIC,qBAAQ,CAACC,KAAK,CAAChB,MAAM,EAAEiB,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACC,OAAO;EAEjFnD,KAAK,CAACoD,SAAS,CAAC,MAAM;IACpB,IAAI,CAACnB,MAAM,EAAEiB,OAAO,EAAE;MACpBJ,OAAO,CAACO,QAAQ,CAAC,CAAC,CAAC;MACnB;IACF;IACAP,OAAO,CAACO,QAAQ,CAAC,CAAC,CAAC;IACnB,MAAMC,SAAS,GAAGN,qBAAQ,CAACO,MAAM,CAACT,OAAO,EAAE;MACzCU,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC;IACFJ,SAAS,CAACK,KAAK,CAAC,CAAC;IACjB,OAAO,MAAM;MACXL,SAAS,CAACM,IAAI,CAAC,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,CAAC3B,MAAM,EAAEiB,OAAO,EAAEJ,OAAO,EAAEhB,OAAO,CAAC+B,EAAE,CAAC,CAAC;EAE1C,IAAI,CAAC5B,MAAM,EAAE,OAAO,IAAI;EAExB,MAAM6B,OAAO,GAAG7B,MAAM,CAAC6B,OAAO,KAAK,KAAK;EACxC,MAAMC,UAAU,GAAG,IAAAC,iCAAgB,EAAC/B,MAAM,CAAC;EAC3C,MAAMgC,UAAU,GAAG,IAAAC,iCAAgB,EAACjC,MAAM,CAAC;EAC3C,MAAMkC,sBAAsB,GAAG,IAAAC,0BAAc,EAAChC,eAAe,EAAEE,eAAe,EAAE,IAAI,CAAC;EACrF,MAAM+B,WAAW,GAAGpC,MAAM,CAACqC,SAAS,KAAKC,yBAAe,CAACC,SAAS,GAAG,QAAQ,GAAG,KAAK;EACrF,MAAMC,SAAS,GAAG,IAAAC,6CAA4B,EAACzC,MAAM,CAAC;EAEtD,oBACE,IAAAxB,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA0E,IAAI;IAACC,MAAM,EAAC,uBAAuB;IAACC,KAAK,EAAEf,UAAW;IAAAgB,QAAA,eACrD,IAAAtE,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA8C,QAAQ,CAAC4B,IAAI;MAACE,KAAK,EAAE,CAAC;QAAEhC;MAAQ,CAAC,EAAEgB,OAAO,GAAG,IAAAkB,yCAAwB,EAACX,WAAW,CAAC,GAAG,IAAI,CAAE;MAAAU,QAAA,eAC1F,IAAAtE,WAAA,CAAAwE,IAAA,EAAC/E,YAAA,CAAA0E,IAAI;QACHC,MAAM,EAAC,iBAAiB;QACxBC,KAAK,EAAE,CACLI,MAAM,CAACC,IAAI,EACX;UAAE/C;QAAgB,CAAC,EACnBqC,SAAS,IAAI,IAAI,GAAG;UAAEW,YAAY,EAAEX,SAAS;UAAEY,QAAQ,EAAE;QAAkB,CAAC,GAAG,IAAI,CACnF;QAAAN,QAAA,gBAEF,IAAAtE,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA0E,IAAI;UAACE,KAAK,EAAEI,MAAM,CAACI;QAAY,CAAE,CAAC,eACnC,IAAA7E,WAAA,CAAAwE,IAAA,EAAC/E,YAAA,CAAA0E,IAAI;UAACE,KAAK,EAAEb,UAAW;UAAAc,QAAA,gBACtB,IAAAtE,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA0E,IAAI;YAACE,KAAK,EAAEI,MAAM,CAACK,OAAQ;YAAAR,QAAA,eAC1B,IAAAtE,WAAA,CAAAkE,GAAA,EAACvE,oBAAA,CAAAoF,mBAAmB;cAClBD,OAAO,EAAEtD,MAAM,CAACsD,OAAQ;cACxBE,OAAO,EAAE,EAAG;cACZtD,KAAK,EAAEK,WAAY;cACnBkD,WAAW,EAAE5D,OAAO,CAACe,IAAK;cAC1BF,eAAe,EAAEA,eAAgB;cACjCZ,SAAS,EAAEA;YAAU,CACtB;UAAC,CACE,CAAC,EACNE,MAAM,CAACwD,OAAO,CAACE,MAAM,GAAG,CAAC,gBACxB,IAAAlF,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA0E,IAAI;YAACE,KAAK,EAAEI,MAAM,CAACO,OAAQ;YAAAV,QAAA,EACzB9C,MAAM,CAACwD,OAAO,CAACG,GAAG,CAAEC,MAAM,iBACzB,IAAApF,WAAA,CAAAkE,GAAA,EAACxE,iBAAA,CAAA2F,gBAAgB;cAEfD,MAAM,EAAEA,MAAO;cACf1D,KAAK,EAAEK,WAAY;cACnBkD,WAAW,EAAE5D,OAAO,CAACe,IAAK;cAC1Bd,SAAS,EAAEA;YAAU,GAJhB8D,MAAM,CAAChC,EAKb,CACF;UAAC,CACE,CAAC,GACL,IAAI;QAAA,CACJ,CAAC,EACN/B,OAAO,CAACI,OAAO,CAAC6D,aAAa,gBAC5B,IAAAtF,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA0E,IAAI;UAACE,KAAK,EAAEI,MAAM,CAACI;QAAY,CAAE,CAAC,gBAEnC,IAAA7E,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAA8F,SAAS;UACRnB,MAAM,EAAC,yBAAyB;UAChCoB,iBAAiB,EAAC,QAAQ;UAC1BC,kBAAkB,EAAC,SAAS;UAC5BC,OAAO,EAAE,CAAE;UACXC,OAAO,EAAEA,CAAA,KAAMpE,SAAS,CAACqE,4BAAkB,CAACC,WAAW,CAAE;UACzDxB,KAAK,EAAEA,CAAC;YAAEyB;UAAQ,CAAC,KAAK,CACtBrB,MAAM,CAACsB,KAAK,EACZD,OAAO,GAAG;YAAEnE,eAAe,EAAE+B;UAAuB,CAAC,GAAG,IAAI,CAC5D;UAAAY,QAAA,eAEF,IAAAtE,WAAA,CAAAkE,GAAA,EAACzE,YAAA,CAAAuG,IAAI;YAAC3B,KAAK,EAAE,CAACI,MAAM,CAACwB,WAAW,EAAE;cAAEC,KAAK,EAAErE;YAAgB,CAAC,CAAE;YAAAyC,QAAA,EAAC;UAAC,CAAM;QAAC,CAC9D,CACZ;MAAA,CACG;IAAC,CACM;EAAC,CACZ,CAAC;AAEX;AAEA,MAAMG,MAAM,GAAG0B,uBAAU,CAACC,MAAM,CAAC;EAC/B1B,IAAI,EAAE;IACJ2B,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAEC;EACX,CAAC;EACD3B,WAAW,EAAE;IACX4B,QAAQ,EAAE,CAAC;IACXC,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAEC,uCAAsB;IAChCC,MAAM,EAAED;EACV,CAAC;EACD9B,OAAO,EAAE;IACP4B,UAAU,EAAE,CAAC;IACbI,QAAQ,EAAE;EACZ,CAAC;EACD9B,OAAO,EAAE;IACPqB,aAAa,EAAE,KAAK;IACpBU,QAAQ,EAAE,QAAQ;IAClBT,UAAU,EAAE,QAAQ;IACpBU,GAAG,EAAEC;EACP,CAAC;EACDlB,KAAK,EAAE;IACLmB,KAAK,EAAEN,uCAAsB;IAC7BC,MAAM,EAAED,uCAAsB;IAC9BN,UAAU,EAAE,QAAQ;IACpBa,cAAc,EAAE,QAAQ;IACxBT,UAAU,EAAE,CAAC;IACb/B,YAAY,EAAEyC;EAChB,CAAC;EACDnB,WAAW,EAAE;IACXoB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/surfaces/BannerSurface.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BannerSurface = BannerSurface;
+exports.resetBannerSurfaceWarningsForTests = resetBannerSurfaceWarningsForTests;
+var React = _interopRequireWildcard(require("react"));
+var _evalJsController = require("../evalJs/evalJsController.js");
+var _getWebView = require("../evalJs/getWebView.js");
+var _BannerBar = require("./BannerBar.js");
+var _BannerWebViewBar = require("./bannerWebView/BannerWebViewBar.js");
+var _bannerAutoRunSession = require("./bannerWebView/bannerAutoRunSession.js");
+var _bannerNeedsWebView = require("./bannerWebView/bannerNeedsWebView.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+let warnedMissingWebView = false;
+
+/**
+ * Native banner bar, or a WebView when a button runs Evaluate JavaScript or the
+ * theme has published custom CSS (same CDN stylesheet as userflow.js iframes).
+ */
+function BannerSurface({
+  session,
+  onActions,
+  onDismiss
+}) {
+  const banner = session.version.banner;
+  const theme = session.version.theme;
+  const needsWebView = banner != null && (0, _bannerNeedsWebView.bannerNeedsWebView)(banner, theme);
+  const webView = needsWebView ? (0, _getWebView.getEvalJsWebView)() : null;
+  React.useLayoutEffect(() => {
+    if (!needsWebView || !webView) {
+      return;
+    }
+    _evalJsController.evalJsController.setBannerOwnsWebView(true);
+    return () => {
+      _evalJsController.evalJsController.setBannerOwnsWebView(false);
+    };
+  }, [needsWebView, webView, session.id]);
+  const dismissWebViewBanner = React.useCallback(endReason => {
+    (0, _bannerAutoRunSession.clearBannerAutoRunEvalSession)(session.id);
+    _evalJsController.evalJsController.reset();
+    onDismiss(endReason);
+  }, [onDismiss, session.id]);
+  if (!banner) {
+    return null;
+  }
+  if (needsWebView) {
+    if (!webView) {
+      if (!warnedMissingWebView) {
+        warnedMissingWebView = true;
+        console.warn('Userflow: WebView banner requires react-native-webview in the native binary. ' + 'Add it to your app (e.g. npx expo install react-native-webview), run pod install under ios/, ' + 'then rebuild with expo run:ios (not Expo Go). Falling back to the native banner bar.');
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BannerBar.BannerBar, {
+        session: session,
+        onActions: onActions,
+        onDismiss: onDismiss
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BannerWebViewBar.BannerWebViewBar, {
+      session: session,
+      onActions: onActions,
+      onDismiss: dismissWebViewBanner
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BannerBar.BannerBar, {
+    session: session,
+    onActions: onActions,
+    onDismiss: onDismiss
+  });
+}
+
+/** @internal */
+function resetBannerSurfaceWarningsForTests() {
+  warnedMissingWebView = false;
+}
+//# sourceMappingURL=BannerSurface.js.map

package/lib/commonjs/surfaces/BannerSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_evalJsController","_getWebView","_BannerBar","_BannerWebViewBar","_bannerAutoRunSession","_bannerNeedsWebView","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","warnedMissingWebView","BannerSurface","session","onActions","onDismiss","banner","version","theme","needsWebView","bannerNeedsWebView","webView","getEvalJsWebView","useLayoutEffect","evalJsController","setBannerOwnsWebView","id","dismissWebViewBanner","useCallback","endReason","clearBannerAutoRunEvalSession","reset","console","warn","jsx","BannerBar","BannerWebViewBar","resetBannerSurfaceWarningsForTests"],"sourceRoot":"../../../src","sources":["surfaces/BannerSurface.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/surfaces/CardFade.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardFade = CardFade;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _cardTransition = require("./cardTransition.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Card chrome root that fades itself through step transitions.
+ *
+ * This has to wrap the card view itself, not sit higher up in a surface: the
+ * fade starts from this component's mount, and a tooltip's surface renders long
+ * before its card does.
+ */
+function CardFade({
+  style,
+  ...rest
+}) {
+  const opacity = (0, _cardTransition.useCardOpacity)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    ...rest,
+    style: opacity ? [style, {
+      opacity
+    }] : style
+  });
+}
+//# sourceMappingURL=CardFade.js.map

package/lib/commonjs/surfaces/CardFade.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_cardTransition","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CardFade","style","rest","opacity","useCardOpacity","jsx","Animated","View"],"sourceRoot":"../../../src","sources":["surfaces/CardFade.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AAAkD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAIlD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASkB,QAAQA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAAoB,CAAC,EAAsB;EAC9E,MAAMC,OAAO,GAAG,IAAAC,8BAAc,EAAC,CAAC;EAChC,oBAAO,IAAAxB,WAAA,CAAAyB,GAAA,EAAC3B,YAAA,CAAA4B,QAAQ,CAACC,IAAI;IAAA,GAAKL,IAAI;IAAED,KAAK,EAAEE,OAAO,GAAG,CAACF,KAAK,EAAE;MAAEE;IAAQ,CAAC,CAAC,GAAGF;EAAM,CAAE,CAAC;AACnF","ignoreList":[]}

package/lib/commonjs/surfaces/CloseButton.js

@@ -3,15 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.CLOSE_BUTTON_SIZE = exports.CLOSE_BUTTON_INSET = void 0;
 exports.CloseButton = CloseButton;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/** Web close control: 24×24 hit target, 8px from the top-trailing corner. Pass muted color from {@link resolveCloseButtonColor}. */
+const CLOSE_BUTTON_SIZE = exports.CLOSE_BUTTON_SIZE = 24;
+const CLOSE_BUTTON_INSET = exports.CLOSE_BUTTON_INSET = 8;
+/** Web close control: 24×24 hit target. Pass muted color from {@link resolveCloseButtonColor}. */
 function CloseButton({
   onPress,
-  color
+  color,
+  top = CLOSE_BUTTON_INSET,
+  right = CLOSE_BUTTON_INSET
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     testID: "userflow-modal-close",
@@ -21,6 +26,8 @@ function CloseButton({
     style: ({
       pressed
     }) => [styles.button, {
+      top,
+      right,
       opacity: pressed ? 0.6 : 1
     }],
     hitSlop: 8,
@@ -35,11 +42,9 @@ function CloseButton({
 const styles = _reactNative.StyleSheet.create({
   button: {
     position: 'absolute',
-    top: 8,
-    right: 8,
     zIndex: 2,
-    width: 24,
-    height: 24,
+    width: CLOSE_BUTTON_SIZE,
+    height: CLOSE_BUTTON_SIZE,
     alignItems: 'center',
     justifyContent: 'center'
   },

package/lib/commonjs/surfaces/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CloseButton","onPress","color","jsx","Pressable","testID","accessibilityRole","accessibilityLabel","style","pressed","styles","button","opacity","hitSlop","children","Text","icon","StyleSheet","create","position","top","right","zIndex","width","height","alignItems","justifyContent","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../src","sources":["surfaces/CloseButton.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA2D,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAO3D;AACO,SAASkB,WAAWA,CAAC;EAAEC,OAAO;EAAEC;AAAwB,CAAC,EAAsB;EACpF,oBACE,IAAAtB,WAAA,CAAAuB,GAAA,EAACxB,YAAA,CAAAyB,SAAS;IACRC,MAAM,EAAC,sBAAsB;IAC7BC,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAC,OAAO;IAC1BN,OAAO,EAAEA,OAAQ;IACjBO,KAAK,EAAEA,CAAC;MAAEC;IAAQ,CAAC,KAAK,CAACC,MAAM,CAACC,MAAM,EAAE;MAAEC,OAAO,EAAEH,OAAO,GAAG,GAAG,GAAG;IAAE,CAAC,CAAE;IACxEI,OAAO,EAAE,CAAE;IAAAC,QAAA,eAEX,IAAAlC,WAAA,CAAAuB,GAAA,EAACxB,YAAA,CAAAoC,IAAI;MAACP,KAAK,EAAE,CAACE,MAAM,CAACM,IAAI,EAAE;QAAEd;MAAM,CAAC,CAAE;MAAAY,QAAA,EAAC;IAAC,CAAM;EAAC,CACtC,CAAC;AAEhB;AAEA,MAAMJ,MAAM,GAAGO,uBAAU,CAACC,MAAM,CAAC;EAC/BP,MAAM,EAAE;IACNQ,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDV,IAAI,EAAE;IACJW,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CLOSE_BUTTON_SIZE","exports","CLOSE_BUTTON_INSET","CloseButton","onPress","color","top","right","jsx","Pressable","testID","accessibilityRole","accessibilityLabel","style","pressed","styles","button","opacity","hitSlop","children","Text","icon","StyleSheet","create","position","zIndex","width","height","alignItems","justifyContent","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../src","sources":["surfaces/CloseButton.tsx"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA2D,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEpD,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,EAAE;AAC5B,MAAME,kBAAkB,GAAAD,OAAA,CAAAC,kBAAA,GAAG,CAAC;AAWnC;AACO,SAASC,WAAWA,CAAC;EAC1BC,OAAO;EACPC,KAAK;EACLC,GAAG,GAAGJ,kBAAkB;EACxBK,KAAK,GAAGL;AACQ,CAAC,EAAsB;EACvC,oBACE,IAAAtB,WAAA,CAAA4B,GAAA,EAAC7B,YAAA,CAAA8B,SAAS;IACRC,MAAM,EAAC,sBAAsB;IAC7BC,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAC,OAAO;IAC1BR,OAAO,EAAEA,OAAQ;IACjBS,KAAK,EAAEA,CAAC;MAAEC;IAAQ,CAAC,KAAK,CAACC,MAAM,CAACC,MAAM,EAAE;MAAEV,GAAG;MAAEC,KAAK;MAAEU,OAAO,EAAEH,OAAO,GAAG,GAAG,GAAG;IAAE,CAAC,CAAE;IACpFI,OAAO,EAAE,CAAE;IAAAC,QAAA,eAEX,IAAAvC,WAAA,CAAA4B,GAAA,EAAC7B,YAAA,CAAAyC,IAAI;MAACP,KAAK,EAAE,CAACE,MAAM,CAACM,IAAI,EAAE;QAAEhB;MAAM,CAAC,CAAE;MAAAc,QAAA,EAAC;IAAC,CAAM;EAAC,CACtC,CAAC;AAEhB;AAEA,MAAMJ,MAAM,GAAGO,uBAAU,CAACC,MAAM,CAAC;EAC/BP,MAAM,EAAE;IACNQ,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,CAAC;IACTC,KAAK,EAAE1B,iBAAiB;IACxB2B,MAAM,EAAE3B,iBAAiB;IACzB4B,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDR,IAAI,EAAE;IACJS,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/surfaces/MadeWithUserflow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MADE_WITH_USERFLOW_GAP = void 0;
+exports.MADE_WITH_USERFLOW_INSET = exports.MADE_WITH_USERFLOW_GAP = void 0;
 exports.MadeWithUserflow = MadeWithUserflow;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
@@ -16,8 +16,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Web "Made with Userflow" attribution (FlowChrome). Shown when the company
  * has `flowBranding` enabled; opens the Userflow homepage with UTM params.
  *
- * Rendered as a card footer (not absolutely pinned to the card corner) so left
- * and bottom insets match the surface content padding.
+ * Sits in the card corner (Figma: 8pt from the start and bottom edges) rather
+ * than on the content inset. Rendered in flow instead of absolutely so a
+ * scaled-up label pushes the card taller instead of overlapping the body.
  */
 function MadeWithUserflow({
   company,
@@ -30,10 +31,9 @@ function MadeWithUserflow({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.footer, embedded ? {
       marginTop: MADE_WITH_USERFLOW_GAP,
-      paddingBottom: contentPadding
+      marginStart: MADE_WITH_USERFLOW_INSET - contentPadding
     } : {
-      paddingHorizontal: contentPadding,
-      paddingBottom: contentPadding
+      paddingStart: MADE_WITH_USERFLOW_INSET
     }],
     pointerEvents: "box-none",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
@@ -67,9 +67,13 @@ function MadeWithUserflow({
 
 /** Gap between step content/buttons and the branding footer (web spacer height). */
 const MADE_WITH_USERFLOW_GAP = exports.MADE_WITH_USERFLOW_GAP = 16;
+
+/** Legend offset from the card's start and bottom edges. */
+const MADE_WITH_USERFLOW_INSET = exports.MADE_WITH_USERFLOW_INSET = 8;
 const styles = _reactNative.StyleSheet.create({
   footer: {
-    flexShrink: 0
+    flexShrink: 0,
+    paddingBottom: MADE_WITH_USERFLOW_INSET
   },
   link: {
     flexDirection: 'row',
@@ -84,7 +88,7 @@ const styles = _reactNative.StyleSheet.create({
   label: {
     fontSize: 12,
     fontWeight: '500',
-    lineHeight: 14
+    lineHeight: 16
   }
 });
 //# sourceMappingURL=MadeWithUserflow.js.map

package/lib/commonjs/surfaces/MadeWithUserflow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_openSafeUrl","_userflowLogomark","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MadeWithUserflow","company","color","contentPadding","embedded","flowBranding","href","slug","jsx","View","style","styles","footer","marginTop","MADE_WITH_USERFLOW_GAP","paddingBottom","paddingHorizontal","pointerEvents","children","jsxs","Pressable","testID","accessibilityRole","accessibilityLabel","onPress","openSafeUrl","pressed","link","opacity","hitSlop","Image","source","logomark","tintColor","accessibilityIgnoresInvertColors","Text","label","exports","StyleSheet","create","flexShrink","flexDirection","alignItems","alignSelf","width","height","marginRight","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../src","sources":["surfaces/MadeWithUserflow.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_openSafeUrl","_userflowLogomark","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MadeWithUserflow","company","color","contentPadding","embedded","flowBranding","href","slug","jsx","View","style","styles","footer","marginTop","MADE_WITH_USERFLOW_GAP","marginStart","MADE_WITH_USERFLOW_INSET","paddingStart","pointerEvents","children","jsxs","Pressable","testID","accessibilityRole","accessibilityLabel","onPress","openSafeUrl","pressed","link","opacity","hitSlop","Image","source","logomark","tintColor","accessibilityIgnoresInvertColors","Text","label","exports","StyleSheet","create","flexShrink","paddingBottom","flexDirection","alignItems","alignSelf","width","height","marginRight","fontSize","fontWeight","lineHeight"],"sourceRoot":"../../../src","sources":["surfaces/MadeWithUserflow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/surfaces/ModalSurface.js

@@ -7,21 +7,22 @@ exports.ModalSurface = ModalSurface;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _RichContentRenderer = require("../content/RichContentRenderer.js");
+var _CardFade = require("./CardFade.js");
 var _CloseButton = require("./CloseButton.js");
-var _resolveCloseButtonColor = require("./resolveCloseButtonColor.js");
 var _MadeWithUserflow = require("./MadeWithUserflow.js");
 var _ProgressBar = require("./ProgressBar.js");
 var _absoluteFill = require("./absoluteFill.js");
 var _parseBackdropOpacity = require("./parseBackdropOpacity.js");
 var _progress = require("./progress.js");
-var _safeArea = require("./safeArea.js");
+var _resolveCloseButtonColor = require("./resolveCloseButtonColor.js");
 var _resolveModalLayout = require("./resolveModalLayout.js");
+var _surfaceLayoutInsets = require("./surfaceLayoutInsets.js");
 var _themeChrome = require("./themeChrome.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * Modal chrome: full-screen backdrop + centered themed card with TreeDoc body.
- * Also used as a temporary fallback for BUBBLE/HIDDEN until dedicated surfaces.
+ * Also used as a temporary fallback for BUBBLE until a dedicated surface.
  *
  * Touch model: backdrop is a full-screen Pressable; the centering wrapper is
  * `box-none` so taps outside the card hit the backdrop, while the card itself
@@ -45,9 +46,13 @@ function ModalSurface({
   const endAsUserClosed = React.useCallback(() => {
     void engine.endFlow('USER_CLOSED');
   }, [engine]);
-  const insets = (0, _safeArea.useUserflowSafeAreaInsets)();
+  const onBackdropPress = React.useCallback(() => {
+    if (canDismissBackdrop) {
+      endAsUserClosed();
+    }
+  }, [canDismissBackdrop, endAsUserClosed]);
   const windowDims = (0, _reactNative.useWindowDimensions)();
-  const centerPadding = (0, _resolveModalLayout.resolveModalCenterPadding)(insets);
+  const centerPadding = (0, _surfaceLayoutInsets.useSurfaceLayoutInsets)();
   const cardMaxWidth = (0, _resolveModalLayout.resolveModalCardMaxWidth)(theme, currentStep.width, windowDims.width);
   const cardMaxHeight = (0, _resolveModalLayout.resolveModalCardMaxHeight)(windowDims.height, centerPadding);
   const buttonsAlign = (0, _resolveModalLayout.resolveModalButtonsAlign)(theme, windowDims.width);
@@ -55,6 +60,9 @@ function ModalSurface({
   const progressBottom = theme.progressBarEnabled && theme.progressBarPosition === 'BOTTOM';
   const showBranding = session.flow.company.flowBranding;
   const contentPadding = chrome.contentPadding;
+  const closeClearance = _CloseButton.CLOSE_BUTTON_INSET + _CloseButton.CLOSE_BUTTON_SIZE;
+  const scrollPaddingTop = showClose ? Math.max(contentPadding, closeClearance) : contentPadding;
+  const scrollPaddingRight = showClose ? Math.max(contentPadding, closeClearance) : contentPadding;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.root,
     testID: "userflow-modal-surface",
@@ -65,8 +73,7 @@ function ModalSurface({
       accessibilityLabel: canDismissBackdrop ? 'Dismiss' : undefined,
       accessibilityElementsHidden: !canDismissBackdrop,
       importantForAccessibility: canDismissBackdrop ? 'yes' : 'no-hide-descendants',
-      disabled: !canDismissBackdrop,
-      onPress: canDismissBackdrop ? endAsUserClosed : undefined,
+      onPress: onBackdropPress,
       style: [_absoluteFill.ABSOLUTE_FILL, {
         backgroundColor: theme.backdropColor,
         opacity: backdropOpacity
@@ -74,60 +81,66 @@ function ModalSurface({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.center, centerPadding],
       pointerEvents: "box-none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFade.CardFade, {
         testID: "userflow-modal-card",
         accessibilityViewIsModal: true,
         pointerEvents: "auto",
         style: [chrome.cardStyle, styles.cardShadow, {
           maxWidth: cardMaxWidth,
-          maxHeight: cardMaxHeight,
           width: '100%',
           borderRadius: chrome.borderRadius
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           testID: "userflow-modal-card-fill",
           style: [chrome.fillStyle, styles.cardFill, {
-            borderRadius: chrome.borderRadius
+            borderRadius: chrome.borderRadius,
+            maxHeight: cardMaxHeight
           }],
-          children: [showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
-            onPress: endAsUserClosed,
-            color: (0, _resolveCloseButtonColor.resolveCloseButtonColor)(theme)
-          }) : null, progressTop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+          children: [progressTop ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
             enabled: true,
             fraction: progress.fraction,
             position: "TOP",
             theme: theme,
             totalSteps: progress.total,
             contentPadding: contentPadding
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
             testID: "userflow-flow-scroll",
             style: styles.scroll,
             contentContainerStyle: [styles.scrollContent, {
-              paddingHorizontal: contentPadding,
-              paddingTop: contentPadding,
+              paddingLeft: contentPadding,
+              paddingRight: scrollPaddingRight,
+              paddingTop: scrollPaddingTop,
               paddingBottom: showBranding ? 0 : contentPadding
             }],
             keyboardShouldPersistTaps: "handled",
             nestedScrollEnabled: true,
             bounces: false,
             showsVerticalScrollIndicator: true,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RichContentRenderer.RichContentRenderer, {
-              content: currentStep.content,
-              buttons: currentStep.buttons,
-              theme: theme,
-              sessionData: session.data,
-              lookupAttribute: lookupAttribute,
-              defaultButtonsAlign: buttonsAlign,
-              onActions: actions => {
-                void engine.handleActions(actions);
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MadeWithUserflow.MadeWithUserflow, {
-              company: session.flow.company,
-              color: theme.fontColor,
-              contentPadding: contentPadding,
-              embedded: true
-            })]
-          }), progressBottom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              testID: "userflow-modal-content",
+              style: styles.content,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RichContentRenderer.RichContentRenderer, {
+                content: currentStep.content,
+                buttons: currentStep.buttons,
+                theme: theme,
+                sessionData: session.data,
+                lookupAttribute: lookupAttribute,
+                defaultButtonsAlign: buttonsAlign,
+                heading1FontWeight: "normal",
+                onActions: actions => {
+                  void engine.handleActions(actions);
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MadeWithUserflow.MadeWithUserflow, {
+                company: session.flow.company,
+                color: theme.fontColor,
+                contentPadding: contentPadding,
+                embedded: true
+              })]
+            })
+          }), showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+            onPress: endAsUserClosed,
+            color: (0, _resolveCloseButtonColor.resolveCloseButtonColor)(theme)
+          }) : null, progressBottom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
             enabled: true,
             fraction: progress.fraction,
             position: "BOTTOM",
@@ -159,12 +172,15 @@ const styles = _reactNative.StyleSheet.create({
     flexShrink: 1
   },
   scroll: {
-    flexGrow: 0,
+    flexGrow: 1,
     flexShrink: 1,
     minHeight: 0
   },
   scrollContent: {
     flexGrow: 1
+  },
+  content: {
+    position: 'relative'
   }
 });
 //# sourceMappingURL=ModalSurface.js.map