jfs-components 0.1.36 → 0.1.48

package/lib/module/components/Accordion/Accordion.js

@@ -62,6 +62,8 @@ function Accordion({
   accessibilityState,
   webAccessibilityProps,
   disableTruncation,
+  showHeader = true,
+  showContent = true,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
@@ -99,8 +101,11 @@ function Accordion({
   const contentPaddingTop = getVariableByName('accordion/content/padding/top', resolvedModes) ?? 8;
   const contentPaddingBottom = getVariableByName('accordion/content/padding/bottom', resolvedModes) ?? 8;
   const borderColor = getVariableByName('accordion/border/color', resolvedModes) ?? '#e6e6e6';
+
+  // Header-only sticky pieces drop the divider while expanded so the paired
+  // content Accordion owns the section border.
   const containerStyle = {
-    borderBottomWidth: 1,
+    borderBottomWidth: !showContent && isExpanded ? 0 : 1,
     borderBottomColor: borderColor
   };
   const headerStyle = {
@@ -137,10 +142,18 @@ function Accordion({
     webAccessibilityProps
   });
   const processedChildren = children ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes) : null;
+
+  // Content-only + collapsed: nothing to render (header lives in the sticky peer).
+  if (!showHeader && !isExpanded) {
+    return null;
+  }
+  if (!showHeader && !showContent) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     ...rest,
-    children: [/*#__PURE__*/_jsxs(Pressable, {
+    children: [showHeader && /*#__PURE__*/_jsxs(Pressable, {
       accessibilityRole: "button",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion'),
@@ -170,7 +183,7 @@ function Accordion({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
       })]
-    }), isExpanded && processedChildren && /*#__PURE__*/_jsx(View, {
+    }), showContent && isExpanded && processedChildren && /*#__PURE__*/_jsx(View, {
       style: contentStyle,
       children: processedChildren
     })]

package/lib/module/components/AppBar/AppBar.js

@@ -1,20 +1,94 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Pressable } from 'react-native';
+import Svg, { Path, Defs, LinearGradient, Stop, ClipPath, Rect, G } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import NavArrow from '../NavArrow/NavArrow';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// SubPage "slot wrap" geometry, taken directly from the Figma design
-// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
-// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
-// item so it fills / shrinks responsively within that box.
+// SubPage "slot wrap" geometry from Figma (node 449:7876). The middle slot is
+// an absolutely-centered fixed-size box; its inner content (node 3991:4125)
+// fills / shrinks responsively within that box.
 const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192;
 const SUBPAGE_MIDDLE_HEIGHT = 32;
 const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21;
-export default function AppBar({
+const JIODOT_FALLBACK_SIZE = 32;
+/**
+ * Figma "jiodot" mark (node 1117:1908). Opt-in via `leadingSlot` — MainPage
+ * does NOT render this by default so existing consumers stay empty-leading.
+ */
+export function JioDot({
+  size,
+  modes = EMPTY_MODES
+}) {
+  const resolvedSize = size ?? (Number(getVariableByName('appBar/mainPage/jiodot/size', modes)) || JIODOT_FALLBACK_SIZE);
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: resolvedSize,
+    height: resolvedSize,
+    viewBox: "0 0 32 32",
+    fill: "none",
+    accessibilityRole: "image",
+    accessibilityLabel: "Jio",
+    children: [/*#__PURE__*/_jsxs(G, {
+      clipPath: "url(#jiodotClip)",
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: "M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z",
+        fill: "url(#jiodotGrad)"
+      }), /*#__PURE__*/_jsx(Path, {
+        d: "M11.3039 9.64982H10.7705C9.75837 9.64982 9.20548 10.2205 9.20548 11.3621V16.8679C9.20548 18.2854 8.72667 18.7829 7.60341 18.7829C6.71985 18.7829 6.00192 18.3959 5.43096 17.6963C5.37555 17.6229 4.21615 18.1749 4.21615 19.5378C4.21615 21.0107 5.59629 21.9132 8.15689 21.9132C11.268 21.9132 12.9077 20.3479 12.9077 16.9233V11.3621C12.9059 10.222 12.3536 9.64982 11.3039 9.64982ZM23.7039 12.3381C20.6837 12.3381 18.6769 14.2531 18.6769 17.1085C18.6769 20.0365 20.6096 21.915 23.6482 21.915C26.6674 21.915 28.6556 20.0365 28.6556 17.1274C28.6573 14.2531 26.6867 12.3381 23.7039 12.3381ZM23.6668 19.206C22.4879 19.206 21.6781 18.3408 21.6781 17.107C21.6781 15.8922 22.5077 15.0264 23.6668 15.0264C24.8259 15.0264 25.6553 15.8922 25.6553 17.1257C25.6556 18.3221 24.8084 19.206 23.6668 19.206ZM16.1252 12.43H15.7563C14.8547 12.43 14.1735 12.8531 14.1735 14.1426V20.0347C14.1735 21.3423 14.8366 21.7476 15.7936 21.7476H16.1622C17.0644 21.7476 17.7086 21.3052 17.7086 20.0347V14.1426C17.7086 12.8169 17.0831 12.43 16.1252 12.43ZM15.9228 8.15885C14.7809 8.15885 14.063 8.80359 14.063 9.81634C14.063 10.8469 14.7999 11.4913 15.9779 11.4913C17.1196 11.4913 17.8378 10.8469 17.8378 9.81634C17.8378 8.78582 17.1012 8.15885 15.9228 8.15885Z",
+        fill: "white"
+      })]
+    }), /*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsxs(LinearGradient, {
+        id: "jiodotGrad",
+        x1: "11.085",
+        y1: "9.25442",
+        x2: "22.3469",
+        y2: "15.7638",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          stopColor: "#FBDCAF"
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "1",
+          stopColor: "#AD8444"
+        })]
+      }), /*#__PURE__*/_jsx(ClipPath, {
+        id: "jiodotClip",
+        children: /*#__PURE__*/_jsx(Rect, {
+          width: "32",
+          height: "32",
+          fill: "white"
+        })
+      })]
+    })]
+  });
+}
+/**
+ * AppBar — top navigation bar for MainPage and SubPage layouts
+ * (Figma node 1070:18571).
+ *
+ * Visual values resolve from design tokens via `getVariableByName`. Slots
+ * cascade `modes` to children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AppBar
+ *   type="MainPage"
+ *   leadingSlot={<JioDot />}
+ *   actionsSlot={
+ *     <>
+ *       <IconButton iconName="ic_add" />
+ *       <IconButton iconName="ic_add" />
+ *       <Avatar />
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
@@ -30,118 +104,70 @@ export default function AppBar({
   const {
     modes: globalModes
   } = useTokens();
-  const modes = {
+  const modes = useMemo(() => ({
     Context2: 'AppBar',
     ...globalModes,
     ...propModes
-  };
+  }), [globalModes, propModes]);
   const isMain = type === 'MainPage';
   const isSub = type === 'SubPage';
-
-  // --- Tokens ---
-  // Construct token keys based on type. keys must be camelCase as per instruction.
-  // We use explicit string literals so that the extraction script can find them.
   const paddingHorizontal = isMain ? getVariableByName('appBar/mainPage/padding/horizontal', modes) : getVariableByName('appBar/subPage/padding/horizontal', modes);
   const paddingVertical = isMain ? getVariableByName('appBar/mainPage/padding/vertical', modes) : getVariableByName('appBar/subPage/padding/vertical', modes);
   const backgroundColor = isMain ? getVariableByName('appBar/mainPage/background', modes) : getVariableByName('appBar/subPage/background', modes);
   const actionsGap = isMain ? getVariableByName('appBar/mainPage/actions/gap', modes) : getVariableByName('appBar/subPage/actions/gap', modes);
-
-  // Layout styles
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    // No `justifyContent` here: with the inline middle slot using `flex: 1`
-    // the three sections lay out naturally (leading | middle | actions).
-    // When middleSlot is absent we fall back to `space-between` at the wrapper
-    // level so leading & actions still anchor to the edges.
     paddingHorizontal: paddingHorizontal ?? 16,
     paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
     backgroundColor: backgroundColor ?? '#FFFFFF'
-    // MainPage: h=68 (16 top/bot padding? 36 height content?)
-    // SubPage: h=52
   };
 
-  // --- Leading Slot Default ---
-  // SubPage default: Back Arrow
-  // MainPage default: Jio Logo (We'll use a placeholder or basic text if no asset, 
-  // but looking at "AppBarHome" before, it had "ic_hellojio". Let's stick to generic defaults or empty if not provided,
-  // but usually a component library provides sensible defaults.)
-
-  // Actually, let's implement the specific defaults mentioned in the plan/analysis
-  // SubPage: NavArrow props (icon, etc).
-
+  // MainPage: no default leading (backward compatible — consumers opt in via
+  // leadingSlot, e.g. <JioDot />). SubPage: default back NavArrow.
   let defaultLeading = null;
-  if (leadingSlot === undefined) {
-    if (isSub) {
-      defaultLeading = /*#__PURE__*/_jsx(Pressable, {
-        ...(onLeadingPress ? {
-          onPress: onLeadingPress
-        } : {}),
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: undefined,
-        style: ({
-          pressed
-        }) => ({
-          opacity: pressed ? 0.7 : 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }),
-        children: /*#__PURE__*/_jsx(NavArrow, {
-          direction: "Back",
-          modes: modes
-        })
-      });
-    } else {
-      // MainPage default leading: often the Brand Logo.
-      // We'll leave it empty or render a placeholder if desired, but standard AppBar often lets consumer pass logo.
-      // Previous code had `leadingIconName='ic_hellojio'` for Home.
-      // We will render nothing by default for MainPage leading to keep it flexible, OR a specialized Logo component if we had one.
-      // For now, let's assume consumer passes it for MainPage, or we leave empty.
-      // Wait, Figma screenshot shows "Jio" logo.
-      // The user said: "mostly token namings are 'camelCase'. Maximize existing component usage."
-      // I'll leave defaultLeading as null for MainPage unless I have a "BrandLogo" component.
-    }
+  if (leadingSlot === undefined && isSub) {
+    defaultLeading = /*#__PURE__*/_jsx(Pressable, {
+      ...(onLeadingPress ? {
+        onPress: onLeadingPress
+      } : {}),
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: undefined,
+      style: ({
+        pressed
+      }) => ({
+        opacity: pressed ? 0.7 : 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      children: /*#__PURE__*/_jsx(NavArrow, {
+        direction: "Back",
+        modes: modes
+      })
+    });
   }
-
-  // --- Process Slots ---
   const processedLeading = leadingSlot ? cloneChildrenWithModes([leadingSlot], modes)[0] : defaultLeading;
   const processedMiddle = middleSlot ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes) : null;
-
-  // Actions Gap wrapper
-  // The Figma has "Actions" slot with a gap.
   const actionsStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     gap: actionsGap ?? 0
   };
-  const processedActions = actionsSlot ? /*#__PURE__*/_jsx(View, {
-    style: actionsStyle,
-    children: cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
-  }) : null;
+  const processedActions = actionsSlot ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes) : null;
 
-  // SubPage centers its middle slot via absolute positioning (see Figma
-  // "slot wrap"), so it never participates in the row flow. Only MainPage
-  // keeps the legacy in-flow middle slot.
+  // SubPage middle is absolute (Figma "slot wrap"); MainPage middle stays in-flow.
   const hasInFlowMiddle = isMain && !!processedMiddle;
 
-  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
-  // remaining space, so leading & actions sit at the edges naturally. In all
-  // other cases we pin leading & actions to the outer edges with
-  // `space-between`; the SubPage middle floats above, centered.
+  // With an in-flow middle the flex:1 middle absorbs leftover space. Otherwise
+  // pin leading & actions to the edges; SubPage middle floats centered above.
   const wrapperStyle = {
     ...containerStyle,
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
   };
 
-  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
-  // centering a fixed-height box with `top/left: 50%` + transform (which on
-  // Android resolves the percentage against an intermediate, content-driven
-  // parent height and lands a few px too high), the overlay STRETCHES to fill
-  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
-  // flexbox. This uses the exact same full-height vertical reference as the
-  // leading/actions row (`alignItems: 'center'`), so the middle content always
-  // sits on the same line as the back arrow and end slot on every platform.
+  // Overlay stretches to the full bar and centers content with flexbox so the
+  // middle aligns with leading/actions on every platform.
   const subPageMiddleOverlayStyle = {
     position: 'absolute',
     top: 0,
@@ -152,10 +178,6 @@ export default function AppBar({
     alignItems: 'center',
     justifyContent: 'center'
   };
-
-  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
-  // middle content from bleeding under the leading/actions slots while staying
-  // centered within the overlay above.
   const subPageMiddleBoxStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
@@ -179,7 +201,7 @@ export default function AppBar({
         alignItems: 'center'
       },
       children: processedLeading
-    }), hasInFlowMiddle && /*#__PURE__*/_jsx(View, {
+    }), hasInFlowMiddle ? /*#__PURE__*/_jsx(View, {
       style: {
         flex: 1,
         minWidth: 0,
@@ -189,10 +211,10 @@ export default function AppBar({
       },
       pointerEvents: "box-none",
       children: processedMiddle
-    }), /*#__PURE__*/_jsx(View, {
+    }) : null, /*#__PURE__*/_jsx(View, {
       style: actionsStyle,
       children: processedActions
-    }), isSub && processedMiddle && /*#__PURE__*/_jsx(View, {
+    }), isSub && processedMiddle ? /*#__PURE__*/_jsx(View, {
       style: subPageMiddleOverlayStyle,
       pointerEvents: "box-none",
       children: /*#__PURE__*/_jsx(View, {
@@ -211,6 +233,7 @@ export default function AppBar({
           children: processedMiddle
         })
       })
-    })]
+    }) : null]
   });
-}
+}
+export default AppBar;

package/lib/module/components/CompareTable/CompareTable.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { View, Text, Pressable, Platform, ScrollView } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
@@ -108,7 +108,9 @@ function CompareTable({
   style,
   disableTruncation,
   columnWidth,
-  stickyHeaders = true,
+  stickyCards = true,
+  stickyAccordionTitles = true,
+  stickyHeaders = false,
   stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
@@ -123,11 +125,10 @@ function CompareTable({
   const cardLabelFontFamily = getVariableByName('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = getVariableByName('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = getVariableByName('image/radius', modes) ?? 8;
-  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
-  // The published token store is still out of sync (the variable resolves to
-  // `0` in the design), so the read falls back to `0` and will pick up a
-  // rounded value automatically once the store syncs.
-  const cardRadius = getVariableByName('selectionCard/radius', modes) ?? 0;
+  // Selection cards are square — no corner radius (Figma compare-table
+  // treatment). Ignore `selectionCard/radius` so a non-zero token value
+  // cannot round the card edges.
+  const cardRadius = 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -186,6 +187,16 @@ function CompareTable({
    *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
   const draggingSource = useRef(null);
   const lastSyncX = useRef(0);
+
+  // Controlled expand state for sticky accordion titles (header + body are
+  // split across two Accordion instances that must stay in sync).
+  const [expandedByIndex, setExpandedByIndex] = useState(() => {
+    const initial = {};
+    sections.forEach((section, index) => {
+      initial[index] = section.defaultExpanded ?? index === 0;
+    });
+    return initial;
+  });
   const syncOthers = useCallback((source, x) => {
     if (source !== 'cards' && cardsScrollRef.current) {
       cardsScrollRef.current.scrollTo({
@@ -294,6 +305,10 @@ function CompareTable({
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
+    borderTopLeftRadius: cardRadius,
+    borderTopRightRadius: cardRadius,
+    borderBottomLeftRadius: cardRadius,
+    borderBottomRightRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -507,6 +522,7 @@ function CompareTable({
     backgroundColor: cardBg,
     borderWidth: 1,
     borderColor: '#e8e8e8',
+    borderRadius: 0,
     overflow: 'hidden'
   };
 
@@ -535,14 +551,18 @@ function CompareTable({
   }
 
   // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-  // Build children and stickyHeaderIndices for the vertical ScrollView.
-  // When stickyHeaders is on, section headers are injected as direct children
-  // so React Native's stickyHeaderIndices can pin them with stacking.
-  const scrollChildren = [];
-  const stickyIndices = [];
-  if (showCardsRow) {
-    stickyIndices.push(scrollChildren.length);
-    scrollChildren.push(/*#__PURE__*/_jsx(ScrollView, {
+  // Sticky cards are pinned *outside* the vertical ScrollView (sibling above
+  // it) so they cannot scroll away — `stickyHeaderIndices` is unreliable for
+  // a nested horizontal ScrollView on Fabric. Sticky accordion titles /
+  // table headers still use stickyHeaderIndices inside the scroll surface
+  // and therefore stick directly under the pinned cards.
+  const renderCardsRow = () => /*#__PURE__*/_jsx(View, {
+    style: {
+      width: '100%',
+      backgroundColor: cardBg,
+      zIndex: 2
+    },
+    children: /*#__PURE__*/_jsx(ScrollView, {
       ref: cardsScrollRef,
       horizontal: true,
       showsHorizontalScrollIndicator: false,
@@ -558,11 +578,51 @@ function CompareTable({
         },
         children: [columns.map(renderCard), showAddCard && renderAddCard()]
       })
-    }, "cards-row"));
+    })
+  }, "cards-row");
+  const scrollChildren = [];
+  const stickyIndices = [];
+
+  // Non-sticky cards scroll away with the sections (inside the ScrollView).
+  if (showCardsRow && !stickyCards) {
+    scrollChildren.push(renderCardsRow());
   }
   sections.forEach((section, index) => {
     const sectionKey = section.key ?? section.title ?? index;
     const headerContent = renderHeaderContent(section);
+    const expanded = expandedByIndex[index] ?? section.defaultExpanded ?? index === 0;
+    const onExpandedChange = next => {
+      setExpandedByIndex(prev => ({
+        ...prev,
+        [index]: next
+      }));
+    };
+    const inlineHeader = !stickyHeaders && headerContent != null ? stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: contentWidth
+        },
+        children: headerContent
+      })
+    }) : null;
+    if (stickyAccordionTitles) {
+      stickyIndices.push(scrollChildren.length);
+      scrollChildren.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%',
+          backgroundColor: cardBg
+        },
+        children: /*#__PURE__*/_jsx(Accordion, {
+          title: section.title,
+          expanded: expanded,
+          onExpandedChange: onExpandedChange,
+          modes: modes,
+          showContent: false
+        })
+      }, `sticky-accordion-title-${sectionKey}`));
+    }
     if (stickyHeaders && headerContent != null) {
       stickyIndices.push(scrollChildren.length);
       scrollChildren.push(/*#__PURE__*/_jsx(View, {
@@ -581,37 +641,42 @@ function CompareTable({
         })
       }, `sticky-header-${sectionKey}`));
     }
-    scrollChildren.push(/*#__PURE__*/_jsxs(Accordion, {
-      title: section.title,
-      defaultExpanded: section.defaultExpanded ?? index === 0,
-      modes: modes,
-      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        children: /*#__PURE__*/_jsx(View, {
-          style: {
-            width: contentWidth
-          },
-          children: headerContent
-        })
-      })), renderBodyContent(section, index)]
-    }, sectionKey));
+    if (stickyAccordionTitles) {
+      scrollChildren.push(/*#__PURE__*/_jsxs(Accordion, {
+        title: section.title,
+        expanded: expanded,
+        onExpandedChange: onExpandedChange,
+        modes: modes,
+        showHeader: false,
+        children: [inlineHeader, renderBodyContent(section, index)]
+      }, sectionKey));
+    } else {
+      scrollChildren.push(/*#__PURE__*/_jsxs(Accordion, {
+        title: section.title,
+        defaultExpanded: section.defaultExpanded ?? index === 0,
+        modes: modes,
+        children: [inlineHeader, renderBodyContent(section, index)]
+      }, sectionKey));
+    }
   });
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: [outerStyle, style, {
       flexDirection: 'column',
       flex: 1
     }],
-    children: /*#__PURE__*/_jsx(ScrollView, {
+    children: [showCardsRow && stickyCards ? renderCardsRow() : null, /*#__PURE__*/_jsx(ScrollView, {
       style: {
         width: '100%',
         flex: 1
       },
+      contentContainerStyle: {
+        flexGrow: 1
+      },
       stickyHeaderIndices: stickyIndices,
       showsVerticalScrollIndicator: false,
       directionalLockEnabled: true,
       children: scrollChildren
-    })
+    })]
   });
 }
 export default CompareTable;

package/lib/module/components/FormField/FormField.js

@@ -327,6 +327,9 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
+    // Match the caret to the tokenized input text color on web (native uses
+    // cursorColor / selectionColor on the TextInput below).
+    caretColor: tokens.inputTextColor,
     // Remove the default web focus ring; the input row's border acts as the
     // focus indicator via the FormField States cascade.
     outlineStyle: 'none',
@@ -389,7 +392,12 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
         onBlur: handleBlur,
         onSubmitEditing: onSubmitEditing,
         placeholder: placeholder ?? '',
-        placeholderTextColor: placeholderColor,
+        placeholderTextColor: placeholderColor
+        // Kill platform accent cursors (Android Material green, iOS system
+        // blue) — match NoteInput/MoneyValue and use the tokenized text color.
+        ,
+        cursorColor: tokens.inputTextColor,
+        selectionColor: tokens.inputTextColor,
         editable: interactive,
         maxLength: maxLength,
         autoFocus: autoFocus,

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

@@ -213,23 +213,14 @@ function FullscreenModal({
   }), [globalModes, propModes]);
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes));
 
-  // Safe-area insets so the floating chrome clears the system bars: the close
-  // button drops below the status bar / notch, and the sticky footer keeps its
-  // designed bottom padding ON TOP of the bottom inset (home indicator /
-  // Android gesture or nav bar). On web — and anywhere without a
-  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  // Safe-area inset so the floating close button clears the status bar / notch.
+  // Footer padding stays at the design-token value from ActionFooter — no
+  // extra inset is layered on top (the token already accounts for bottom chrome).
+  // On web — and anywhere without a SafeAreaProvider — insets.top is 0.
   const insets = useSafeAreaInsets();
   const closeButtonInsetStyle = useMemo(() => ({
     top: 12 + insets.top + closeOffsetY
   }), [insets.top, closeOffsetY]);
-  // Extend (not replace) the footer's token bottom padding by the bottom inset
-  // so the action button never sits under the system navigation area.
-  const footerInsetStyle = useMemo(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes));
-    return {
-      paddingBottom: base + insets.bottom
-    };
-  }, [modes, insets.bottom]);
 
   // Drives the background's parallax-free sync with the scroll. The hero media
   // lives at the ROOT (so it is never clipped to the content height and sits
@@ -390,7 +381,6 @@ function FullscreenModal({
       })
     }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
       modes: modes,
-      style: footerInsetStyle,
       children: footerContent
     }) : null, showClose ? /*#__PURE__*/_jsx(IconButton, {
       iconName: "ic_close",

package/lib/module/components/HelloJioInput/HelloJioInput.js

@@ -51,7 +51,15 @@ const STATE_FALLBACKS = {
     iconColor: '#24262b'
   },
   IdleJioPlus: {
-    background: '#f5f5f5',
+    // Glass fill. In Figma the IdleJioPlus surface resolves
+    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
+    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
+    // MainPage mode gives). Painted over the backdrop blur, an opaque value
+    // would read as a solid bar and hide the blur entirely — so, matching the
+    // translucent glass fallbacks the sibling GlassFill consumers use
+    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
+    // this fallback carries alpha so the frost tints the blurred content.
+    background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
     iconColor: '#545961'
@@ -88,7 +96,11 @@ function resolveHelloJioInputTokens(modes, visualState) {
       // Glass keeps the container transparent so GlassFill shows through.
       backgroundColor: useGlass ? 'transparent' : background,
       borderColor,
-      borderWidth: strokeWidth,
+      // The Figma IdleJioPlus variant is a borderless frosted pill — it has no
+      // `border/color`/`strokeWidth` tokens. Drawing the Idle border color here
+      // would leave a faint light ring the design doesn't have, so drop the
+      // border entirely in the glass state.
+      borderWidth: useGlass ? 0 : strokeWidth,
       borderStyle: 'solid',
       borderRadius,
       paddingLeft,
@@ -195,11 +207,15 @@ const HelloJioInput = /*#__PURE__*/forwardRef(function HelloJioInput({
     setIsFocused(false);
     onBlur?.(e);
   }, [onBlur]);
-  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/_jsx(Icon, {
+
+  // Symmetric with `trailing`: an explicit `null` hides the leading icon
+  // (the design's `startSlot={false}`); `undefined` falls back to the
+  // default brand icon.
+  const leadingElement = leading === undefined ? leadingIconName ? /*#__PURE__*/_jsx(Icon, {
     name: leadingIconName,
     size: tokens.iconSize,
     color: tokens.iconColor
-  }) : null);
+  }) : null : leading;
   const processedLeading = leadingElement ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes) : null;
   const defaultTrailing = /*#__PURE__*/_jsx(IconButton, {
     iconName: sendIconName,