jfs-components 0.0.78 → 0.0.79

package/lib/module/components/Attached/Attached.js

@@ -0,0 +1,139 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
+
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ZERO_SIZE = {
+  width: 0,
+  height: 0
+};
+
+/**
+ * Fraction (0 | 0.5 | 1) of the main content's width/height at which the badge
+ * center should sit, derived from the `position` anchor.
+ */
+function resolveAnchorFractions(position) {
+  const fx = position.includes('left') ? 0 : position.includes('right') ? 1 : 0.5;
+  const fy = position.startsWith('top') ? 0 : position.startsWith('bottom') ? 1 : 0.5;
+  return {
+    fx,
+    fy
+  };
+}
+
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+function Attached({
+  children,
+  badge,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const [mainSize, setMainSize] = useState(ZERO_SIZE);
+  const [badgeSize, setBadgeSize] = useState(ZERO_SIZE);
+  const onMainLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setMainSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const onBadgeLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setBadgeSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const mainChildren = useMemo(() => children != null ? cloneChildrenWithModes(children, modes) : null, [children, modes]);
+  const badgeChildren = useMemo(() => badge != null ? cloneChildrenWithModes(badge, modes) : null, [badge, modes]);
+  const badgePlacement = useMemo(() => {
+    const {
+      fx,
+      fy
+    } = resolveAnchorFractions(position);
+    const measured = mainSize.width > 0 && badgeSize.width > 0;
+    let anchorX;
+    let anchorY;
+    if (circular) {
+      // Project the anchor onto the circle inscribed in the bounding box, so
+      // corner badges land on the circumference (45°) instead of the box corner.
+      const cx = mainSize.width / 2;
+      const cy = mainSize.height / 2;
+      const radius = Math.min(mainSize.width, mainSize.height) / 2;
+      const dx = (fx - 0.5) * 2; // -1 | 0 | 1
+      const dy = (fy - 0.5) * 2; // -1 | 0 | 1
+      const len = Math.hypot(dx, dy) || 1; // 'center' → 0, guard against /0
+      anchorX = cx + dx / len * radius;
+      anchorY = cy + dy / len * radius;
+    } else {
+      anchorX = mainSize.width * fx;
+      anchorY = mainSize.height * fy;
+    }
+    return {
+      position: 'absolute',
+      left: anchorX - badgeSize.width / 2,
+      top: anchorY - badgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0
+    };
+  }, [position, circular, mainSize, badgeSize]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onMainLayout,
+      children: mainChildren
+    }), badgeChildren != null && /*#__PURE__*/_jsx(View, {
+      style: badgePlacement,
+      onLayout: onBadgeLayout,
+      pointerEvents: "box-none",
+      children: badgeChildren
+    })]
+  });
+}
+const styles = {
+  // alignSelf flex-start so the wrapper hugs the main content; anchors are then
+  // computed relative to the content size rather than a stretched parent.
+  container: {
+    position: 'relative',
+    alignSelf: 'flex-start'
+  }
+};
+export default /*#__PURE__*/React.memo(Attached);

package/lib/module/components/Card/Card.js

@@ -16,9 +16,11 @@ const CardContext = /*#__PURE__*/createContext({});
  * Card component implementation from Figma node 765:6186.
  * 
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
@@ -26,6 +28,7 @@ const CardContext = /*#__PURE__*/createContext({});
  * ```
  */
 export function Card({
+  header,
   media,
   children,
   modes = EMPTY_MODES,
@@ -53,6 +56,14 @@ export function Card({
       ...modes
     }
   }) : media;
+
+  // Clone header to pass modes if it's a valid element
+  const headerWithModes = /*#__PURE__*/isValidElement(header) ? /*#__PURE__*/cloneElement(header, {
+    modes: {
+      ...header.props.modes,
+      ...modes
+    }
+  }) : header;
   const containerStyle = {
     backgroundColor,
     borderColor,
@@ -63,6 +74,15 @@ export function Card({
     paddingVertical,
     overflow: 'hidden' // Ensure border radius clips content
   };
+
+  // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
+  const headerWrapperStyle = {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingHorizontal: 12,
+    paddingVertical: 16
+  };
   const mediaWrapperStyle = {
     width: '100%',
     aspectRatio: mediaAspectRatio,
@@ -83,7 +103,10 @@ export function Card({
     },
     children: /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
-      children: [media && /*#__PURE__*/_jsx(View, {
+      children: [header && /*#__PURE__*/_jsx(View, {
+        style: headerWrapperStyle,
+        children: headerWithModes
+      }), media && /*#__PURE__*/_jsx(View, {
         style: mediaWrapperStyle,
         children: mediaWithModes
       }), /*#__PURE__*/_jsx(View, {

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -10,6 +10,7 @@ import Button from '../Button/Button';
 import Disclaimer from '../Disclaimer/Disclaimer';
 import IconButton from '../IconButton/IconButton';
 import ActionFooter from '../ActionFooter/ActionFooter';
+import Slot from '../Slot/Slot';
 
 // ---------------------------------------------------------------------------
 // Forced modes
@@ -269,8 +270,9 @@ function FullscreenModal({
   if (footer) {
     footerContent = footer;
   } else if (primaryActionLabel) {
-    footerContent = /*#__PURE__*/_jsxs(View, {
-      style: footerColumnStyle,
+    footerContent = /*#__PURE__*/_jsxs(Slot, {
+      layoutDirection: "vertical",
+      modes: modes,
       children: [/*#__PURE__*/_jsx(Button, {
         label: primaryActionLabel,
         modes: modes,
@@ -335,10 +337,6 @@ const scrollViewStyle = {
 const scrollContentStyle = {
   flexGrow: 1
 };
-const footerColumnStyle = {
-  width: '100%',
-  gap: 8
-};
 const fullWidthStyle = {
   width: '100%'
 };

package/lib/module/components/ListItem/ListItem.js

@@ -15,9 +15,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_IOS = Platform.OS === 'ios';
 const PRESS_DELAY = IS_IOS ? 130 : 0;
 
-// Forced modes for the endSlot — `Context: 'ListItem'` can never be
-// overridden by external modes. Frozen so identity is stable across renders.
-const END_SLOT_FORCED_MODES = Object.freeze({
+// Forced modes for the leading/trailing slots — `Context: 'ListItem'` can
+// never be overridden by external modes. Frozen so identity is stable across
+// renders. Applied to both slots so they cascade modes identically.
+const SLOT_FORCED_MODES = Object.freeze({
   Context: 'ListItem'
 });
 
@@ -32,7 +33,7 @@ const pressedOverlayStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveListItemTokens(modes) {
-  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // Modes used to cascade into slot children (leading / supportSlot / trailing).
   // We do NOT inject an `AppearanceBrand` default here: slot content such as
   // Buttons or Badges carry their own intended appearance, so forcing one onto
   // them would be surprising.
@@ -131,9 +132,11 @@ const verticalSupportTextOverride = {
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -141,9 +144,9 @@ const verticalSupportTextOverride = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -172,6 +175,7 @@ function ListItemImpl({
   showSupportText = true,
   leading,
   supportSlot,
+  trailing,
   endSlot,
   navArrow = true,
   modes = EMPTY_MODES,
@@ -209,7 +213,7 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = useMemo(() => {
-    const processed = leading ? cloneChildrenWithModes(React.Children.toArray(leading), tokens.resolvedModes) : [];
+    const processed = leading ? cloneChildrenWithModes(React.Children.toArray(leading), tokens.resolvedModes, SLOT_FORCED_MODES) : [];
     if (processed.length === 0) {
       return /*#__PURE__*/_jsx(IconCapsule, {
         modes: tokens.resolvedModes,
@@ -223,11 +227,14 @@ function ListItemImpl({
     const processed = cloneChildrenWithModes(React.Children.toArray(supportSlot), tokens.resolvedModes);
     return processed.length === 1 ? processed[0] : processed;
   }, [supportSlot, tokens.resolvedModes]);
-  const processedEndSlot = useMemo(() => {
-    if (!endSlot) return null;
-    const processed = cloneChildrenWithModes(React.Children.toArray(endSlot), tokens.resolvedModes, END_SLOT_FORCED_MODES);
+
+  // `trailing` wins; `endSlot` is the deprecated alias kept for back-compat.
+  const trailingContent = trailing ?? endSlot;
+  const processedTrailing = useMemo(() => {
+    if (!trailingContent) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(trailingContent), tokens.resolvedModes, SLOT_FORCED_MODES);
     return processed.length === 1 ? processed[0] : processed;
-  }, [endSlot, tokens.resolvedModes]);
+  }, [trailingContent, tokens.resolvedModes]);
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot;
 
@@ -273,9 +280,9 @@ function ListItemImpl({
           numberOfLines: 1,
           children: title
         }), showSupportText && renderSupportContent()]
-      }), processedEndSlot ? /*#__PURE__*/_jsx(View, {
+      }), processedTrailing ? /*#__PURE__*/_jsx(View, {
         style: tokens.trailingWrapperStyle,
-        children: processedEndSlot
+        children: processedTrailing
       }) : null, navArrow && /*#__PURE__*/_jsx(NavArrow, {
         direction: "Forward",
         modes: tokens.resolvedModes

package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js

@@ -0,0 +1,322 @@
+"use strict";
+
+import React, { useState, useCallback } from 'react';
+import { View, Text, Pressable, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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,
+  ...(Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+function PlanComparisonCard({
+  columns = DEFAULT_COLUMNS,
+  rows = DEFAULT_ROWS,
+  labelColumnFlex = 0,
+  modes = EMPTY_MODES,
+  style
+}) {
+  /** Natural widths from header labels (plan columns only). */
+  const [headerWidths, setHeaderWidths] = useState([]);
+  /** Natural widths from table body columns. */
+  const [bodyWidths, setBodyWidths] = useState([]);
+  const setMeasuredWidth = useCallback((setter, index, width) => {
+    setter(prev => {
+      if (prev[index] === width) return prev;
+      const next = [...prev];
+      next[index] = width;
+      return next;
+    });
+  }, []);
+  const onHeaderColumnLayout = useCallback((index, event) => {
+    setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
+  }, [setMeasuredWidth]);
+  const onBodyColumnLayout = 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 = getVariableByName('planComparisonCard/gap', modes) ?? 16;
+
+  // Header
+  const headerFg = getVariableByName('planComparisonCard/header/fg', modes) ?? '#ffffff';
+  const headerBrandFg = getVariableByName('planComparisonCard/header/brand/fg', modes) ?? '#cea15a';
+  const headerFontSize = getVariableByName('planComparisonCard/header/fontSize', modes) ?? 14;
+  const headerFontFamily = getVariableByName('planComparisonCard/header/fontFamily', modes) ?? 'JioType Var';
+  const headerLineHeight = getVariableByName('planComparisonCard/header/lineHeight', modes) ?? 18;
+  const headerFontWeight = getVariableByName('planComparisonCard/header/fontWeight', modes) ?? '500';
+
+  // Table
+  const tableBackground = getVariableByName('planComparisonCard/tableRow/background', modes) ?? '#141414';
+  const tableRadius = getVariableByName('planComparisonCard/tableRow/radius', modes) ?? 16;
+  const tableBorderSize = getVariableByName('planComparisonCard/tableRow/border/size', modes) ?? 1;
+  const tableBorderColor = getVariableByName('planComparisonCard/tableRow/border/color', modes) ?? '#1e1a14';
+
+  // Cell
+  const cellPadding = getVariableByName('planComparisonCard/tableCell/padding', modes) ?? 12;
+  const cellGap = getVariableByName('planComparisonCard/tableCell/gap', modes) ?? 2;
+  const cellMinHeight = getVariableByName('planComparisonCard/tableCell/height', modes) ?? 46;
+  const cellBorderSize = getVariableByName('planComparisonCard/tableCell/border/size', modes) ?? 1;
+  const cellBorderColor = getVariableByName('planComparisonCard/tableCell/border/color', modes) ?? '#1e1a14';
+
+  // Cell label
+  const labelColor = getVariableByName('planComparisonCard/tableCell/label/color', modes) ?? '#ffffff';
+  const labelDisabledColor = getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) ?? '#91949c';
+  const labelFontSize = getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) ?? 12;
+  const labelFontFamily = getVariableByName('planComparisonCard/tableCell/label/fontFamily', modes) ?? 'JioType Var';
+  const labelLineHeight = getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) ?? 16;
+  const labelFontWeight = getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) ?? '400';
+
+  // Cell value
+  const valueColor = getVariableByName('planComparisonCard/tableCell/value/color', modes) ?? '#ffffff';
+  const valueFontSize = getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) ?? 12;
+  const valueFontFamily = getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) ?? 'JioType Var';
+  const valueLineHeight = getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) ?? 16;
+  const valueFontWeight = getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) ?? '500';
+
+  // Icon
+  const iconColor = getVariableByName('planComparisonCard/icon/color', modes) ?? '#ffffff';
+  const iconSize = 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__*/_jsx(Icon, {
+        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__*/_jsx(Text, {
+        style: valueTextStyle,
+        children: value
+      }, cellKey);
+    }
+    // Custom node — forward modes so themed children stay in sync.
+    return 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__*/_jsxs(View, {
+    style: [{
+      gap,
+      alignSelf: 'flex-start'
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
+          flexGrow: labelColumnFlex
+        } : undefined]
+      }), columns.map((column, index) => {
+        const colIndex = index + 1;
+        return /*#__PURE__*/_jsx(View, {
+          onLayout: e => onHeaderColumnLayout(colIndex, e),
+          style: [columnWidthStyle(colIndex), planHeaderColumnStyle],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [headerTextStyle, {
+              color: column.brand ? headerBrandFg : headerFg,
+              alignSelf: 'center'
+            }],
+            children: column.label
+          })
+        }, column.label ?? index);
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignSelf: 'flex-start',
+        backgroundColor: tableBackground,
+        borderWidth: tableBorderSize,
+        borderColor: tableBorderColor,
+        borderRadius: tableRadius,
+        overflow: 'hidden'
+      },
+      children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
+            style: [labelCellStyle, {
+              borderBottomWidth: isLast ? 0 : cellBorderSize,
+              borderBottomColor: cellBorderColor
+            }],
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: labelTextStyle,
+              children: row.label
+            }), showInfo && (row.onInfoPress ? /*#__PURE__*/_jsx(Pressable, {
+              onPress: row.onInfoPress,
+              accessibilityRole: "button",
+              accessibilityLabel: `More information about ${row.label}`,
+              hitSlop: 8,
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "ic_info",
+                size: iconSize,
+                color: iconColor
+              })
+            }) : /*#__PURE__*/_jsx(Icon, {
+              name: "ic_info",
+              size: iconSize,
+              color: iconColor
+            }))]
+          }, row.key ?? `${row.label}-${rowIndex}`);
+        })
+      }), columns.map((column, colIndex) => {
+        const colIndexWidth = colIndex + 1;
+        return /*#__PURE__*/_jsx(View, {
+          onLayout: e => onBodyColumnLayout(colIndexWidth, e),
+          style: [columnWidthStyle(colIndexWidth), planHeaderColumnStyle],
+          children: rows.map((row, rowIndex) => {
+            const isLast = rowIndex === rows.length - 1;
+            return /*#__PURE__*/_jsx(View, {
+              style: [valueCellStyle, {
+                borderBottomWidth: isLast ? 0 : cellBorderSize,
+                borderBottomColor: cellBorderColor
+              }],
+              children: /*#__PURE__*/_jsx(View, {
+                style: {
+                  flexShrink: 0
+                },
+                children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+              })
+            }, row.key ?? `${row.label}-${rowIndex}`);
+          })
+        }, column.label ?? colIndex);
+      })]
+    })]
+  });
+}
+export default PlanComparisonCard;