jfs-components 0.0.77 → 0.0.79

package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js

@@ -0,0 +1,328 @@
+"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 _reactUtils = require("../../utils/react-utils");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+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); }
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+
+const DEFAULT_COLUMNS = [{
+  label: 'Your plan'
+}, {
+  label: 'JioFinance+',
+  brand: true
+}];
+const DEFAULT_ROWS = [{
+  label: 'JioPoints multiplier',
+  values: ['1x', '1.25x']
+}, {
+  label: 'Cashback',
+  showInfo: true,
+  values: [false, 'Upto ₹5000']
+}, {
+  label: 'Bonus JioGold',
+  showInfo: true,
+  values: [false, '1%']
+}];
+
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * The leading column holds feature labels (with an optional info icon); every
+ * other column maps to a plan in `columns`. Each cell value can be plain text,
+ * a "not available" cross (`false`), or any custom React node.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PlanComparisonCard
+ *   columns={[{ label: 'Your plan' }, { label: 'JioFinance+', brand: true }]}
+ *   rows={[
+ *     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+ *     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+ *   ]}
+ * />
+ * ```
+ */
+/** Keeps every text layer on a single line; columns grow to fit content. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(_reactNative.Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+function PlanComparisonCard({
+  columns = DEFAULT_COLUMNS,
+  rows = DEFAULT_ROWS,
+  labelColumnFlex = 0,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  /** Natural widths from header labels (plan columns only). */
+  const [headerWidths, setHeaderWidths] = (0, _react.useState)([]);
+  /** Natural widths from table body columns. */
+  const [bodyWidths, setBodyWidths] = (0, _react.useState)([]);
+  const setMeasuredWidth = (0, _react.useCallback)((setter, index, width) => {
+    setter(prev => {
+      if (prev[index] === width) return prev;
+      const next = [...prev];
+      next[index] = width;
+      return next;
+    });
+  }, []);
+  const onHeaderColumnLayout = (0, _react.useCallback)((index, event) => {
+    setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
+  }, [setMeasuredWidth]);
+  const onBodyColumnLayout = (0, _react.useCallback)((index, event) => {
+    setMeasuredWidth(setBodyWidths, index, event.nativeEvent.layout.width);
+  }, [setMeasuredWidth]);
+
+  /**
+   * Shared width for header + body cells in a column (max of natural header
+   * label vs body content). No columnGap between columns — gaps would shift
+   * headers relative to the flush table grid below.
+   */
+  const columnWidthStyle = index => {
+    const width = Math.max(headerWidths[index] ?? 0, bodyWidths[index] ?? 0);
+    if (width > 0) {
+      return {
+        width,
+        minWidth: width,
+        flexShrink: 0,
+        flexGrow: 0
+      };
+    }
+    return {
+      flexShrink: 0,
+      flexGrow: 0
+    };
+  };
+
+  // Container
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/gap', modes) ?? 16;
+
+  // Header
+  const headerFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fg', modes) ?? '#ffffff';
+  const headerBrandFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/brand/fg', modes) ?? '#cea15a';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontSize', modes) ?? 14;
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontFamily', modes) ?? 'JioType Var';
+  const headerLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/lineHeight', modes) ?? 18;
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontWeight', modes) ?? '500';
+
+  // Table
+  const tableBackground = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/background', modes) ?? '#141414';
+  const tableRadius = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/radius', modes) ?? 16;
+  const tableBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/size', modes) ?? 1;
+  const tableBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/color', modes) ?? '#1e1a14';
+
+  // Cell
+  const cellPadding = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/padding', modes) ?? 12;
+  const cellGap = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/gap', modes) ?? 2;
+  const cellMinHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/height', modes) ?? 46;
+  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/size', modes) ?? 1;
+  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/color', modes) ?? '#1e1a14';
+
+  // Cell label
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/color', modes) ?? '#ffffff';
+  const labelDisabledColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/disabled/color', modes) ?? '#91949c';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontSize', modes) ?? 12;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontFamily', modes) ?? 'JioType Var';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/lineHeight', modes) ?? 16;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontWeight', modes) ?? '400';
+
+  // Cell value
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/color', modes) ?? '#ffffff';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontSize', modes) ?? 12;
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontFamily', modes) ?? 'JioType Var';
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/lineHeight', modes) ?? 16;
+  const valueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontWeight', modes) ?? '500';
+
+  // Icon
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/color', modes) ?? '#ffffff';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/size', modes) ?? 16;
+  const toWeight = w => typeof w === 'number' ? `${w}` : w;
+  const headerTextStyle = {
+    ...NO_WRAP_TEXT,
+    fontFamily: headerFontFamily,
+    fontSize: headerFontSize,
+    lineHeight: headerLineHeight,
+    fontWeight: toWeight(headerFontWeight),
+    textAlign: 'center'
+  };
+  const labelTextStyle = {
+    ...NO_WRAP_TEXT,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: toWeight(labelFontWeight)
+  };
+  const valueTextStyle = {
+    ...NO_WRAP_TEXT,
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    fontWeight: toWeight(valueFontWeight),
+    textAlign: 'center'
+  };
+  const planHeaderColumnStyle = {
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  const renderValue = (value, cellKey) => {
+    // "Not available" → muted cross icon.
+    if (value === false) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "ic_close",
+        size: iconSize,
+        color: labelDisabledColor
+      }, cellKey);
+    }
+    // Empty cell.
+    if (value === null || value === undefined || value === true) {
+      return null;
+    }
+    // Text content.
+    if (typeof value === 'string' || typeof value === 'number') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: valueTextStyle,
+        children: value
+      }, cellKey);
+    }
+    // Custom node — forward modes so themed children stay in sync.
+    return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
+  };
+  const labelCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: cellGap,
+    padding: cellPadding,
+    minHeight: cellMinHeight,
+    flexShrink: 0
+  };
+  const valueCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: cellPadding,
+    minHeight: cellMinHeight,
+    flexShrink: 0
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap,
+      alignSelf: 'flex-start'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
+          flexGrow: labelColumnFlex
+        } : undefined]
+      }), columns.map((column, index) => {
+        const colIndex = index + 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          onLayout: e => onHeaderColumnLayout(colIndex, e),
+          style: [columnWidthStyle(colIndex), planHeaderColumnStyle],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [headerTextStyle, {
+              color: column.brand ? headerBrandFg : headerFg,
+              alignSelf: 'center'
+            }],
+            children: column.label
+          })
+        }, column.label ?? index);
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignSelf: 'flex-start',
+        backgroundColor: tableBackground,
+        borderWidth: tableBorderSize,
+        borderColor: tableBorderColor,
+        borderRadius: tableRadius,
+        overflow: 'hidden'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: e => onBodyColumnLayout(0, e),
+        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
+          flexGrow: labelColumnFlex
+        } : undefined],
+        children: rows.map((row, rowIndex) => {
+          const isLast = rowIndex === rows.length - 1;
+          const showInfo = row.showInfo || row.onInfoPress != null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [labelCellStyle, {
+              borderBottomWidth: isLast ? 0 : cellBorderSize,
+              borderBottomColor: cellBorderColor
+            }],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: labelTextStyle,
+              children: row.label
+            }), showInfo && (row.onInfoPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              onPress: row.onInfoPress,
+              accessibilityRole: "button",
+              accessibilityLabel: `More information about ${row.label}`,
+              hitSlop: 8,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                name: "ic_info",
+                size: iconSize,
+                color: iconColor
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: "ic_info",
+              size: iconSize,
+              color: iconColor
+            }))]
+          }, row.key ?? `${row.label}-${rowIndex}`);
+        })
+      }), columns.map((column, colIndex) => {
+        const colIndexWidth = colIndex + 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          onLayout: e => onBodyColumnLayout(colIndexWidth, e),
+          style: [columnWidthStyle(colIndexWidth), planHeaderColumnStyle],
+          children: rows.map((row, rowIndex) => {
+            const isLast = rowIndex === rows.length - 1;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [valueCellStyle, {
+                borderBottomWidth: isLast ? 0 : cellBorderSize,
+                borderBottomColor: cellBorderColor
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: {
+                  flexShrink: 0
+                },
+                children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+              })
+            }, row.key ?? `${row.label}-${rowIndex}`);
+          })
+        }, column.label ?? colIndex);
+      })]
+    })]
+  });
+}
+var _default = exports.default = PlanComparisonCard;

package/lib/commonjs/components/Slot/Slot.js

@@ -0,0 +1,73 @@
+"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 _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); }
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = (0, _react.useMemo)(() => {
+    const gap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) ?? 8;
+    const isHorizontal = layoutDirection === 'horizontal';
+    const container = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap
+    };
+    const processed = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: processedChildren
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Slot);

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
+      })
     })]
   });
 }