jfs-components 0.0.73 → 0.0.77

package/lib/commonjs/components/LottieIntroBlock/LottieIntroBlock.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const DEFAULT_MEDIA_SIZE = 117;
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // Container
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes)) || 36;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes)) || 16;
+
+  // Text wrap
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes)) || 16;
+
+  // Title
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes)) || 23;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes)) || 23;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes) || 900;
+
+  // Support text
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
+  const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes)) || 14;
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
+  const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const supportTextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight),
+    textAlign: 'center'
+  };
+  const mediaContent = (0, _react.useMemo)(() => {
+    if (media === undefined || media === null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: DEFAULT_MEDIA_SIZE,
+          height: DEFAULT_MEDIA_SIZE
+        },
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants"
+      });
+    }
+    return (0, _reactUtils.cloneChildrenWithModes)(media, modes);
+  }, [media, modes]);
+  const buttonContent = (0, _react.useMemo)(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes
+    });
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textWrapStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }), showSupportText && supportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: supportTextStyle,
+        children: supportText
+      }) : null, buttonContent]
+    })]
+  });
+}
+var _default = exports.default = LottieIntroBlock;

package/lib/commonjs/components/LottiePlayer/LottiePlayer.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _loadNativeLottieView = require("./loadNativeLottieView");
+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); }
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = (0, _react.useMemo)(() => resolveSize(size, modes), [size, modes]);
+  const NativeLottieView = (0, _react.useMemo)(() => (0, _loadNativeLottieView.getNativeLottieView)(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width,
+      height
+    }, style],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityLabel ? undefined : true,
+    importantForAccessibility: accessibilityLabel ? 'auto' : 'no',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NativeLottieView, {
+      source: source,
+      autoPlay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(LottiePlayer);

package/lib/commonjs/components/LottiePlayer/LottiePlayer.web.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _loadWebLottieView = require("./loadWebLottieView");
+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); }
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = (0, _react.useMemo)(() => resolveSize(size, modes), [size, modes]);
+  const WebLottieView = (0, _react.useMemo)(() => (0, _loadWebLottieView.getWebLottieView)(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width,
+      height,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style
+    },
+    "data-testid": testID,
+    "aria-label": accessibilityLabel,
+    "aria-hidden": accessibilityLabel ? undefined : true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WebLottieView, {
+      animationData: source,
+      autoplay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(LottiePlayer);

package/lib/commonjs/components/LottiePlayer/loadNativeLottieView.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNativeLottieView = getNativeLottieView;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Props we forward to the underlying native Lottie view. */
+
+const INSTALL_HINT = 'LottiePlayer requires lottie-react-native in your app.\n' + '  npm install lottie-react-native\n' + '  cd ios && pod install';
+
+/**
+ * Metro resolves `require('lottie-react-native')` at bundle time even inside
+ * try/catch, which breaks apps that import `jfs-components` without having
+ * the optional peer installed. Splitting the module id into a runtime string
+ * keeps Metro from statically linking it — the native module is loaded only
+ * when present in the consumer's node_modules.
+ */
+function resolveNativeLottieModuleName() {
+  return ['lottie', '-react', '-native'].join('');
+}
+function LottieUnavailableView({
+  style
+}) {
+  if (__DEV__) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [style, {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 196, 0, 0.12)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 196, 0, 0.45)',
+        borderRadius: 8,
+        padding: 8
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: '#8a6d00',
+          fontSize: 11,
+          textAlign: 'center',
+          lineHeight: 15
+        },
+        children: INSTALL_HINT
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style
+  });
+}
+function LottieUnavailable(props) {
+  _react.default.useEffect(() => {
+    if (__DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LottieUnavailableView, {
+    style: props.style
+  });
+}
+let cachedView;
+function getNativeLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveNativeLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/commonjs/components/LottiePlayer/loadWebLottieView.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWebLottieView = getWebLottieView;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Props we forward to the underlying web Lottie view. */
+
+const INSTALL_HINT = 'LottiePlayer requires lottie-react in your app.\n' + '  npm install lottie-react';
+function resolveWebLottieModuleName() {
+  return ['lottie', '-react'].join('');
+}
+function LottieUnavailable(props) {
+  _react.default.useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      ...props.style,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(255, 196, 0, 0.12)',
+      border: '1px solid rgba(255, 196, 0, 0.45)',
+      borderRadius: 8,
+      padding: 8,
+      color: '#8a6d00',
+      fontSize: 11,
+      textAlign: 'center',
+      lineHeight: '15px'
+    },
+    children: typeof __DEV__ !== 'undefined' && __DEV__ ? INSTALL_HINT : null
+  });
+}
+let cachedView;
+function getWebLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveWebLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/commonjs/components/PageHero/PageHero.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  media,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes)) || 0;
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+
+  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
+  // Tokens fall back to 117 when not defined in the variables collection,
+  // so the layout stays stable on consumers that haven't tokenized this yet.
+  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || 117;
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || 117;
+  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff';
+  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System';
+  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18;
+  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes) || 700;
+  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)) || 20;
+  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes) || '#ffffff';
+  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes) || 'System';
+  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)) || 29;
+  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes) || 900;
+  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)) || 29;
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)) || 16;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%'
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const eyebrowStyle = {
+    color: eyebrowColor,
+    fontFamily: eyebrowFontFamily,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight),
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center'
+  };
+  const headlineStyle = {
+    color: headlineColor,
+    fontFamily: headlineFontFamily,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight),
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const supportingTextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center'
+  };
+  const buttonWrapStyle = {
+    width: '100%'
+  };
+  const buttonContent = (0, _react.useMemo)(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes,
+      style: buttonWrapStyle
+    });
+    // buttonWrapStyle is a literal object created above; it is intentionally
+    // omitted from deps because its identity changes on every render but its
+    // shape never does.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+
+  // Sized container for the media slot. Always rendered when `media` is
+  // provided, so the slot has a predictable box (matches Figma frame
+  // 4540:7845 — 117×117 by default) even if the inner element omits its
+  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break
+  // the centered layout.
+  const mediaContent = (0, _react.useMemo)(() => {
+    if (media === undefined || media === null) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: mediaWidth,
+        height: mediaHeight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      children: (0, _reactUtils.cloneChildrenWithModes)(media, modes)
+    });
+  }, [media, mediaWidth, mediaHeight, modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textWrapStyle,
+      children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: headlineStyle,
+        children: headline
+      }) : null]
+    }), showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: supportingTextStyle,
+      children: supportingText
+    }) : null, buttonContent]
+  });
+}
+var _default = exports.default = PageHero;