jfs-components 0.0.74 → 0.0.78

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

@@ -15,12 +15,14 @@ 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 eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * 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`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -31,6 +33,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
  * />
  * ```
  */
@@ -43,6 +52,7 @@ function PageHero({
   onButtonPress,
   showButton = true,
   buttonSlot,
+  media,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   testID
@@ -57,6 +67,12 @@ function PageHero({
   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;
@@ -132,10 +148,30 @@ function PageHero({
     // 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: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: textWrapStyle,
       children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: eyebrowStyle,

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -13,6 +13,21 @@ var _reactUtils = require("../../utils/react-utils");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
+const DEFAULT_BUTTON_GROUP_MODES = {
+  AppearanceBrand: 'Secondary',
+  'Button / Size': 'S',
+  Emphasis: 'High'
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
@@ -28,17 +43,19 @@ function RechargeCard({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes) || '#f6f3ff';
+  // Container Tokens (defaults mirror Figma node 2235:937).
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes) || '#ffffff';
   const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/horizontal', modes) || 16, 10);
   const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/padding/vertical', modes) || 20, 10);
   const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/gap', modes) || 20, 10);
   const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes) || 328, 10);
+  const minWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/minWidth', modes) || 312, 10);
+  const strokeWidth = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/strokeWidth', modes) || 1, 10);
+  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/stroke/color', modes) || '#ebebed';
 
   // Header Tokens
   const headerGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes) || '#13002d';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/color', modes) || '#000000';
   const titleFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontSize', modes) || 12, 10);
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/fontFamily', modes) || 'JioType Var';
   const titleLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -49,30 +66,25 @@ function RechargeCard({
   const specItemGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/gap', modes) || 4, 10);
 
   // Spec Label Tokens
-  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes) || '#13002d';
+  const specLabelColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/color', modes) || '#000000';
   const specLabelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
   const specLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
   const specLabelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
   const specLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
   // Spec Value Tokens
-  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes) || '#310064';
+  const specValueColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/color', modes) || '#000000';
   const specValueFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
   const specValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
   const specValueLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
   const specValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
   // Disclaimer Tokens
-  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes) || '#22004a';
+  const disclaimerColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/color', modes) || '#000000';
   const disclaimerFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
   const disclaimerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
   const disclaimerLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
   const disclaimerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/disclaimer/fontWeight', modes) || '400';
-
-  // Button Group Tokens
-  // Handled by ButtonGroup component directly
-
-  // Helpers
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)
@@ -85,6 +97,8 @@ function RechargeCard({
       paddingVertical,
       gap,
       borderRadius: radius,
+      borderWidth: strokeWidth,
+      borderColor: strokeColor,
       minWidth,
       alignItems: 'flex-start'
     }, style],
@@ -105,7 +119,10 @@ function RechargeCard({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
         value: price,
         currency: "\u20B9",
-        modes: modes
+        modes: {
+          ...DEFAULT_MONEY_VALUE_MODES,
+          ...modes
+        }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
@@ -194,10 +211,8 @@ function RechargeCard({
       children: disclaimer
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
       modes: {
-        ...modes,
-        "Appearance.Brand": "Secondary",
-        "Button / Size": "S",
-        "Emphasis": "High"
+        ...DEFAULT_BUTTON_GROUP_MODES,
+        ...modes
       },
       children: actions
     })]

package/lib/commonjs/components/Stepper/Step.js

@@ -18,49 +18,45 @@ function Step({
   modes = _reactUtils.EMPTY_MODES,
   style,
   index = 0,
+  showLine = true,
   connectorStyle,
   title,
   supportingText,
+  metaText,
   subtitle = true,
+  meta = true,
   status = 'number'
 }) {
-  // Container styles
   const minHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/minHeight', modes)) || 52;
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/gap', modes)) || 8;
-
-  // Indicator dimensions and styles
-  const indicatorSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/size', modes)) || 24;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/gap', modes)) || 16;
+  const indicatorSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/size', modes)) || 36;
   const indicatorRadius = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/radius', modes)) || 9999;
-  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/background', modes) || '#5c00b5';
-  const indicatorBorderColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/color', modes) || '#5c00b5';
+  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/background', modes) || '#5d00b5';
+  const indicatorBorderColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/color', modes) || '#5d00b5';
   const indicatorBorderSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/size', modes)) || 1;
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/icon/color', modes) || '#ffffff';
-
-  // Label styles (for number)
+  const stepStatusSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepStatus/size', modes)) || 18;
   const labelFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontSize', modes)) || 12;
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontFamily', modes) || undefined;
   const labelLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/lineHeight', modes)) || 14;
   const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontWeight', modes) || '500';
-
-  // Vertical line styles
   const lineSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/lineSize', modes)) || 2;
-  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/line', modes) || '#5c00b5';
+  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/line', modes) || '#5d00b5';
   const badgeWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/badgeWrap/gap', modes)) || 2;
   const containerStyle = {
     flexDirection: 'row',
     minHeight,
+    gap,
     ...style
   };
-
-  // FIX: This wrapper should NOT expand. It should be exact width of the indicator.
   const indicatorWrapperStyle = {
     flexDirection: 'column',
     alignItems: 'center',
     width: indicatorSize,
     flexGrow: 0,
-    // Do NOT grow
     flexShrink: 0,
-    gap: badgeWrapGap
+    gap: badgeWrapGap,
+    alignSelf: 'stretch'
   };
   const indicatorStyle = {
     width: indicatorSize,
@@ -73,6 +69,12 @@ function Step({
     justifyContent: 'center',
     overflow: 'hidden'
   };
+  const stepStatusContainerStyle = {
+    width: stepStatusSize,
+    height: stepStatusSize,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
   const labelStyle = {
     color: iconColor,
     fontSize: labelFontSize,
@@ -81,24 +83,19 @@ function Step({
     lineHeight: labelLineHeight,
     textAlign: 'center'
   };
-
-  // Combine base line style with injected connectorStyle
   const lineStyle = {
     width: lineSize,
     backgroundColor: lineColor,
     flexGrow: 1,
-    // Line should take up remaining vertical space in this column
-    ...connectorStyle // Allow overriding display, color, etc.
+    minHeight: 1,
+    ...connectorStyle
   };
-
-  // Helper for icons
   const renderIcon = () => {
     switch (status) {
       case 'complete':
-        // Checkmark
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
@@ -110,10 +107,9 @@ function Step({
           })
         });
       case 'error':
-        // X mark
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
@@ -125,10 +121,9 @@ function Step({
           })
         });
       case 'warning':
-        // Exclamation / Triangle
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
@@ -147,46 +142,38 @@ function Step({
         });
     }
   };
-
-  // Clone children to pass modes if they are StepLabel
-  const childrenWithProps = _react.default.Children.map(children, child => {
-    if (/*#__PURE__*/_react.default.isValidElement(child)) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        modes
-      });
-    }
-    return child;
-  });
-
-  // Determine if we have content to pad
-  // Default padding bottom to 16 if line is shown, but also respect connectorStyle display
-  // If display is none, we probably don't want the padding bottom either.
-  const isLineHidden = connectorStyle?.display === 'none';
-  const contentPaddingBottom = isLineHidden ? 0 : 16;
+  const hasSlotChildren = _react.default.Children.count(children) > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: containerStyle,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: indicatorWrapperStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: indicatorStyle,
-        children: renderIcon()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: stepStatusContainerStyle,
+          children: renderIcon()
+        })
+      }), showLine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: lineStyle
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        width: gap
-      }
+      }) : null]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        flex: 1,
-        paddingBottom: contentPaddingBottom
+        flex: 1
       },
-      children: title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.StepLabel, {
-        title: title,
-        supportingText: subtitle ? supportingText || undefined : undefined,
+      children: hasSlotChildren ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.StepLabel, {
+        ...(title !== undefined ? {
+          title
+        } : {}),
+        ...(supportingText !== undefined ? {
+          supportingText
+        } : {}),
+        ...(metaText !== undefined ? {
+          metaText
+        } : {}),
+        subtitle: subtitle,
+        meta: meta,
         modes: modes
-      }) : childrenWithProps
+      })
     })]
   });
 }

package/lib/commonjs/components/Stepper/StepLabel.js

@@ -13,24 +13,42 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function StepLabel({
   title = 'Stepper Item',
   supportingText,
+  metaText,
+  subtitle = true,
+  meta = true,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Title styles
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/color', modes) || '#0d0d0f';
   const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontSize', modes)) || 14;
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontFamily', modes) || undefined;
   const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/title/lineHeight', modes)) || 18;
   const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/title/fontWeight', modes) || '700';
 
-  // Subtitle styles
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/color', modes) || '#3d4047';
-  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontSize', modes)) || 12;
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontFamily', modes) || undefined;
-  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/lineHeight', modes)) || 16;
-  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontWeight', modes) || '400';
-
-  // Layout gap
+  // The Subtitle (supportingText) and Meta both default to the "Neutral"
+  // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
+  // spread after the default), so each remains overridable. The Title keeps
+  // its own appearance resolution.
+  const subtitleModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes
+  };
+  const metaModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes
+  };
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/color', subtitleModes) || '#3d4047';
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontSize', subtitleModes)) || 12;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontFamily', subtitleModes) || undefined;
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/lineHeight', subtitleModes)) || 16;
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/subtitle/fontWeight', subtitleModes) || '400';
+  const metaColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/color', metaModes) || '#f7ab21';
+  const metaFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontSize', metaModes)) || 10;
+  // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
+  // Match the literal Figma name to avoid a missing-variable warning.
+  const metaFontFamily = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontFamily Copy', metaModes) || undefined;
+  const metaLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/lineHeight', metaModes)) || 12;
+  const metaFontWeight = (0, _figmaVariablesResolver.getVariableByName)('steperItem/meta/fontWeight', metaModes) || '700';
   const textGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/textWrap/gap', modes)) || 2;
   const titleStyle = {
     color: titleColor,
@@ -46,6 +64,15 @@ function StepLabel({
     fontWeight: subtitleFontWeight,
     lineHeight: subtitleLineHeight
   };
+  const metaStyle = {
+    color: metaColor,
+    fontSize: metaFontSize,
+    fontFamily: metaFontFamily,
+    fontWeight: metaFontWeight,
+    lineHeight: metaLineHeight
+  };
+  const showSubtitle = subtitle && !!supportingText;
+  const showMeta = meta && !!metaText;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
       gap: textGap,
@@ -54,9 +81,12 @@ function StepLabel({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: titleStyle,
       children: title
-    }), supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    }), showSubtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: subtitleStyle,
       children: supportingText
+    }) : null, showMeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: metaStyle,
+      children: metaText
     }) : null]
   });
 }

package/lib/commonjs/components/Stepper/Stepper.js

@@ -29,7 +29,6 @@ function Stepper({
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Stepper container styles
   const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/horizontal', modes)) || 8;
   const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/padding/vertical', modes)) || 0;
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('stepper/gap', modes)) || 2;
@@ -39,25 +38,24 @@ function Stepper({
     gap,
     ...style
   };
-
-  // Inject index and connectorStyle logic into Step children
   const steps = _react.default.Children.toArray(children);
-  const childrenWithProps = steps.map((child, index) => {
-    if (/*#__PURE__*/_react.default.isValidElement(child)) {
-      const isLast = index === steps.length - 1;
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        index,
-        modes,
-        // Pass modes down
-        connectorStyle: isLast ? {
-          display: 'none'
-        } : undefined
-      });
-    }
-    return child;
+  const stepsWithProps = steps.map((child, stepIndex) => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+    const isLast = stepIndex === steps.length - 1;
+    const childProps = child.props || {};
+    const childModes = childProps.modes ? {
+      ...modes,
+      ...childProps.modes
+    } : modes;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      ...childProps,
+      index: childProps.index ?? stepIndex,
+      modes: childModes,
+      showLine: childProps.showLine !== undefined ? childProps.showLine : !isLast
+    });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: containerStyle,
-    children: childrenWithProps
+    children: stepsWithProps
   });
 }