jfs-components 0.0.78 → 0.0.84

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.79] - 2026-05-30
+
+- Added `Attached` — positions a badge over main content at nine anchor points (corners, edges, center).
+- Added `PlanComparisonCard` — plan comparison table with column headers, feature rows, brand highlight, and cell values (text / cross / custom node).
+- Added `Slot` — token-driven vertical/horizontal layout container with `modes` cascade to children.
+- `Card` — new `header` slot above media (e.g. brand logo).
+- `ListItem` — new `trailing` slot; `endSlot` deprecated (still honored).
+- `FullscreenModal` — footer action stack now uses `Slot` instead of a raw `View`.
+
+---
+
 ## [0.0.78] - 2026-05-29
 
 - Added `ExpandableCheckbox` — checkbox row with collapsible long label and Read more / Read less toggle.

package/lib/commonjs/components/AppBar/AppBar.js

@@ -12,10 +12,18 @@ var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// 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.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192;
+const SUBPAGE_MIDDLE_HEIGHT = 32;
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21;
 function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = _reactUtils.EMPTY_MODES,
   onLeadingPress,
@@ -117,13 +125,40 @@ function AppBar({
     children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : null;
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // 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.
+  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.
   const wrapperStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between'
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
+  };
+
+  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
+  // `left/top: 50%` + a negative translate keeps it centered regardless of the
+  // bar width, while the fixed width clips overly-wide content (overflow:
+  // hidden) instead of letting it bleed under the leading/actions slots.
+  const subPageMiddleStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: middleSlotWidth,
+    height: SUBPAGE_MIDDLE_HEIGHT,
+    transform: [{
+      translateX: -middleSlotWidth / 2
+    }, {
+      translateY: -SUBPAGE_MIDDLE_HEIGHT / 2
+    }],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [wrapperStyle, style],
@@ -139,7 +174,7 @@ function AppBar({
         alignItems: 'center'
       },
       children: processedLeading
-    }), processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), hasInFlowMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flex: 1,
         minWidth: 0,
@@ -152,6 +187,21 @@ function AppBar({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: actionsStyle,
       children: processedActions
+    }), isSub && processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: subPageMiddleStyle,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 1,
+          height: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        pointerEvents: "box-none",
+        children: processedMiddle
+      })
     })]
   });
 }

package/lib/commonjs/components/Attached/Attached.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+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); }
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+
+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>
+ * ```
+ */
+/**
+ * Stretches the immediate badge child/children to fill the enforced badge box.
+ * Merges `{ width: '100%', height: '100%' }` into each top-level element's
+ * `style` so an arbitrary node (e.g. an `Image` with its own width/aspectRatio)
+ * fills the fixed `badgeSize` box instead of laying out at its intrinsic size.
+ * The wrapping box's `overflow: 'hidden'` clips anything that still overflows.
+ */
+function forceBadgeFill(children) {
+  return _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+    const childStyle = child.props?.style;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      style: [FILL_STYLE, childStyle]
+    });
+  });
+}
+function Attached({
+  children,
+  badge,
+  badgeSize,
+  badgeRadius,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const [mainSize, setMainSize] = (0, _react.useState)(ZERO_SIZE);
+  const [measuredBadgeSize, setMeasuredBadgeSize] = (0, _react.useState)(ZERO_SIZE);
+  const onMainLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setMainSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const onBadgeLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setMeasuredBadgeSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const mainChildren = (0, _react.useMemo)(() => children != null ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null, [children, modes]);
+  const badgeChildren = (0, _react.useMemo)(() => badge != null ? (0, _reactUtils.cloneChildrenWithModes)(badge, modes) : null, [badge, modes]);
+
+  // When a fixed size is requested, the badge is wrapped in a clipped box and
+  // its content is force-stretched to fill it (see `forceBadgeFill`).
+  const badgeBoxStyle = (0, _react.useMemo)(() => {
+    if (badgeSize == null) return null;
+    return {
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: badgeRadius ?? badgeSize / 2,
+      overflow: 'hidden'
+    };
+  }, [badgeSize, badgeRadius]);
+  const badgePlacement = (0, _react.useMemo)(() => {
+    const {
+      fx,
+      fy
+    } = resolveAnchorFractions(position);
+    const measured = mainSize.width > 0 && measuredBadgeSize.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 - measuredBadgeSize.width / 2,
+      top: anchorY - measuredBadgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0
+    };
+  }, [position, circular, mainSize, measuredBadgeSize]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: onMainLayout,
+      children: mainChildren
+    }), badgeChildren != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: badgePlacement,
+      onLayout: onBadgeLayout,
+      pointerEvents: "box-none",
+      children: badgeBoxStyle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: badgeBoxStyle,
+        children: forceBadgeFill(badgeChildren)
+      }) : 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'
+  }
+};
+
+/** Fill style merged into badge content when `badgeSize` enforces a fixed box. */
+const FILL_STYLE = {
+  width: '100%',
+  height: '100%'
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Attached);

package/lib/commonjs/components/Card/Card.js

@@ -20,9 +20,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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>
@@ -30,6 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ```
  */
 function Card({
+  header,
   media,
   children,
   modes = _reactUtils.EMPTY_MODES,
@@ -57,6 +60,14 @@ function Card({
       ...modes
     }
   }) : media;
+
+  // Clone header to pass modes if it's a valid element
+  const headerWithModes = /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/(0, _react.cloneElement)(header, {
+    modes: {
+      ...header.props.modes,
+      ...modes
+    }
+  }) : header;
   const containerStyle = {
     backgroundColor,
     borderColor,
@@ -67,6 +78,15 @@ 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,
@@ -87,7 +107,10 @@ function Card({
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: headerWrapperStyle,
+        children: headerWithModes
+      }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: mediaWrapperStyle,
         children: mediaWithModes
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -53,11 +53,25 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /** Minimum touch target per iOS HIG / Material accessibility guidance. */
 const MIN_TOUCH_TARGET = 44;
 const touchTargetStyle = {
-  minWidth: MIN_TOUCH_TARGET,
-  minHeight: MIN_TOUCH_TARGET,
   alignItems: 'center',
   justifyContent: 'center'
 };
+
+/**
+ * Expands the tappable region to the 44pt minimum without changing layout.
+ * `hitSlop` extends the press-responder bounds beyond the visual box on both
+ * native and web (react-native-web ≥ 0.19), so the Pressable keeps its natural
+ * checkbox-sized footprint and sibling alignment stays intact.
+ */
+function invisibleTouchHitSlop(checkboxSize) {
+  const slop = Math.max(0, Math.ceil((MIN_TOUCH_TARGET - checkboxSize) / 2));
+  return {
+    top: slop,
+    bottom: slop,
+    left: slop,
+    right: slop
+  };
+}
 /**
  * Checkbox component that maps directly to the Figma design using design tokens.
  *
@@ -182,8 +196,10 @@ function Checkbox({
     };
   };
   const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
+  const hitSlop = invisibleTouchHitSlop(size);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     style: [touchTargetStyle, style],
+    hitSlop: hitSlop,
     onPress: handlePress,
     disabled: disabled,
     onHoverIn: () => setIsHovered(true),

package/lib/commonjs/components/Drawer/Drawer.js

@@ -368,7 +368,12 @@ function Drawer({
               flexDirection: 'column',
               alignItems: 'stretch'
             }, contentContainerStyle],
-            showsVerticalScrollIndicator: showsVerticalScrollIndicator,
+            showsVerticalScrollIndicator: showsVerticalScrollIndicator
+            // Let a tap on an input inside the sheet focus it on the FIRST tap
+            // even while the keyboard is already open (default 'never' would
+            // eat that tap just to dismiss the keyboard).
+            ,
+            keyboardShouldPersistTaps: "handled",
             animatedProps: animatedScrollProps,
             alwaysBounceVertical: false,
             overScrollMode: "always",

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -145,7 +145,7 @@ function DropdownInput({
   supportText,
   errorMessage,
   menuMaxHeight = 240,
-  menuOffset = 6,
+  menuOffset,
   matchTriggerWidth = true,
   closeOnBackdropPress = true,
   modes: propModes = _reactUtils.EMPTY_MODES,
@@ -208,10 +208,29 @@ function DropdownInput({
   const tokens = useFormFieldTokens(modes);
   const chevron = useChevronTokens(modes);
 
+  // Gap between the input and the popup. Falls back to the `formField/gap`
+  // token so the menu's offset matches the field's own internal spacing.
+  const effectiveMenuOffset = menuOffset ?? tokens.gap;
+
   // ---------------- Layout / measurement ----------------
   const triggerRef = (0, _react.useRef)(null);
   const [triggerRect, setTriggerRect] = (0, _react.useState)(null);
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+
+  // Android coordinate-space bridge.
+  //
+  // The popup lives inside a `statusBarTranslucent` Modal, whose window is
+  // laid out from the PHYSICAL top of the screen (behind the status bar).
+  // The trigger, however, is rendered inside the app's content area (Expo
+  // Router / react-native-screens under edge-to-edge), so its
+  // `measureInWindow` Y is relative to the content area — it does NOT include
+  // the status bar height. Feeding that Y straight into the Modal would place
+  // the popup one status-bar-height too high, landing it on top of the input.
+  //
+  // Adding `insets.top` converts the trigger's content-relative Y into the
+  // Modal's full-screen coordinate space. iOS/web share a single coordinate
+  // space for the Modal and the trigger, so no shift is needed there.
+  const windowTopOffset = _reactNative.Platform.OS === 'android' ? insets.top : 0;
   const measure = (0, _react.useCallback)(() => {
     if (!triggerRef.current) return;
     triggerRef.current.measureInWindow((x, y, width, height) => {
@@ -277,7 +296,7 @@ function DropdownInput({
     const spaceBelow = windowHeight - (triggerRect.y + triggerRect.height) - insets.bottom;
     const spaceAbove = triggerRect.y - insets.top;
     const desiredHeight = Math.min(menuSize?.height ?? menuMaxHeight, menuMaxHeight);
-    const needed = desiredHeight + menuOffset + 8;
+    const needed = desiredHeight + effectiveMenuOffset + 8;
     if (placement === 'top') {
       return spaceAbove >= needed || spaceAbove >= spaceBelow ? 'top' : 'bottom';
     }
@@ -285,7 +304,7 @@ function DropdownInput({
       return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
     }
     return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
-  }, [triggerRect, placement, windowHeight, menuSize?.height, menuMaxHeight, menuOffset, insets.top, insets.bottom]);
+  }, [triggerRect, placement, windowHeight, menuSize?.height, menuMaxHeight, effectiveMenuOffset, insets.top, insets.bottom]);
   const popupStyle = (0, _react.useMemo)(() => {
     if (!triggerRect) {
       return {
@@ -304,15 +323,18 @@ function DropdownInput({
     const minLeft = insets.left + screenPadding;
     if (leftPos > maxLeft) leftPos = maxLeft;
     if (leftPos < minLeft) leftPos = minLeft;
+
+    // Trigger top expressed in the Modal's (full-screen) coordinate space.
+    const triggerTop = triggerRect.y + windowTopOffset;
     let topPos;
     if (computedPlacement === 'top') {
       const desiredHeight = menuSize?.height ?? menuMaxHeight;
-      topPos = triggerRect.y - desiredHeight - menuOffset;
+      topPos = triggerTop - desiredHeight - effectiveMenuOffset;
       if (topPos < insets.top + screenPadding) {
         topPos = insets.top + screenPadding;
       }
     } else {
-      topPos = triggerRect.y + triggerRect.height + menuOffset;
+      topPos = triggerTop + triggerRect.height + effectiveMenuOffset;
     }
     const style = {
       position: 'absolute',
@@ -324,7 +346,7 @@ function DropdownInput({
     // the wrong place. menuSize becomes truthy after the first layout.
     if (menuSize == null) style.opacity = 0;
     return style;
-  }, [triggerRect, computedPlacement, menuSize, menuOffset, menuMaxHeight, matchTriggerWidth, windowWidth, insets.top, insets.left, insets.right]);
+  }, [triggerRect, computedPlacement, menuSize, effectiveMenuOffset, windowTopOffset, menuMaxHeight, matchTriggerWidth, windowWidth, insets.top, insets.left, insets.right]);
 
   // Reset menu size when closing so the next open re-measures (handles items
   // changing while the menu was closed).
@@ -513,6 +535,8 @@ function DropdownInput({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
       visible: isOpen,
       transparent: true,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
       animationType: "fade",
       onRequestClose: closeMenu,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -88,8 +88,6 @@ function ExpandableCheckbox({
   }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('expandableCheckbox/gap', modes) ?? 8;
   const rowGap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
-  const rowPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
-  const rowPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/foreground', modes) ?? '#1a1c1f';
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
   const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontSize', modes) ?? 14;
@@ -110,11 +108,9 @@ function ExpandableCheckbox({
     alignSelf: isExpanded ? 'stretch' : 'auto',
     minWidth: 0,
     flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: rowGap,
-    paddingHorizontal: rowPaddingHorizontal,
-    paddingVertical: rowPaddingVertical
-  }), [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]);
+    alignItems: isExpanded ? 'flex-start' : 'center',
+    gap: rowGap
+  }), [isExpanded, rowGap]);
   const resolvedLabelStyle = (0, _react.useMemo)(() => ({
     flex: 1,
     minWidth: 0,
@@ -122,11 +118,21 @@ function ExpandableCheckbox({
     fontFamily: labelFontFamily,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+    fontWeight: labelFontWeight,
+    // Android adds asymmetric font padding and top-aligns the glyph inside
+    // an inflated line box when `lineHeight` is set. That makes the centered
+    // checkbox look like it drops below the text. Disabling the extra
+    // padding + centering the glyph keeps the single-line label optically
+    // aligned with the checkbox. No-op on iOS / web.
+    includeFontPadding: false,
+    textAlignVertical: isExpanded ? 'top' : 'center'
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight, isExpanded]);
+
+  // Layer component modes first (e.g. Color Mode), then button defaults so
+  // Secondary / XS / Low always win unless a dedicated override prop is added.
   const buttonModes = (0, _react.useMemo)(() => ({
-    ...BUTTON_DEFAULT_MODES,
-    ...modes
+    ...modes,
+    ...BUTTON_DEFAULT_MODES
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;

package/lib/commonjs/components/FormField/FormField.js

@@ -208,16 +208,6 @@ function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
-  // Ref to the native input so tapping anywhere in the input row (padding,
-  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
-  // "two taps to open the keyboard" issue caused by the row intercepting the
-  // initial touch.
-  const inputRef = (0, _react.useRef)(null);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!interactive) return;
-    inputRef.current?.focus();
-  }, [interactive]);
-
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -350,16 +340,13 @@ function FormField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [inputRowStyle, inputStyle],
-      onPress: focusInput,
-      accessible: false,
       children: [processedLeading != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -14,6 +14,7 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Disclaimer = _interopRequireDefault(require("../Disclaimer/Disclaimer"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _ActionFooter = _interopRequireDefault(require("../ActionFooter/ActionFooter"));
+var _Slot = _interopRequireDefault(require("../Slot/Slot"));
 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); }
@@ -274,8 +275,9 @@ function FullscreenModal({
   if (footer) {
     footerContent = footer;
   } else if (primaryActionLabel) {
-    footerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: footerColumnStyle,
+    footerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Slot.default, {
+      layoutDirection: "vertical",
+      modes: modes,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         label: primaryActionLabel,
         modes: modes,
@@ -299,7 +301,11 @@ function FullscreenModal({
       contentContainerStyle: scrollContentStyle,
       showsVerticalScrollIndicator: false,
       onScroll: onScroll,
-      scrollEventThrottle: 16,
+      scrollEventThrottle: 16
+      // Tap an input in the body and it focuses on the FIRST tap, even when
+      // the keyboard is already open (default 'never' eats that tap).
+      ,
+      keyboardShouldPersistTaps: "handled",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: heroTextRegionStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeroText, {
@@ -340,10 +346,6 @@ const scrollViewStyle = {
 const scrollContentStyle = {
   flexGrow: 1
 };
-const footerColumnStyle = {
-  width: '100%',
-  gap: 8
-};
 const fullWidthStyle = {
   width: '100%'
 };