jfs-components 0.1.51 → 0.1.54

package/lib/module/components/CategoryCard/CategoryCard.js

@@ -9,16 +9,23 @@ import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import Badge from '../Badge/Badge';
 import Image from '../Image/Image';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CATEGORY_CARD_STATE = 'Category Card State';
+/** Canonical Figma collection that drives idle vs active chrome. */
+const CARD_TAB_STATE = 'Card Tab State';
+/**
+ * Legacy collection name used by earlier CategoryCard builds. Still accepted on
+ * `modes` so existing callers keep resolving the correct Active/Default tokens.
+ */
+const LEGACY_CARD_TAB_STATE = 'Category Card State';
 const BADGE_OVERLAP = 11;
 const DEFAULT_CARD_WIDTH = 60;
+const DEFAULT_IMAGE_ASSET = require('./assets/sample.png');
 
 // Default modes from the Figma CategoryCard component. Overridable via `modes`.
 const CATEGORY_CARD_DEFAULT_MODES = Object.freeze({
   AppearanceBrand: 'Tertiary',
   'Badge Size': 'Small',
   Context4: 'Badge',
-  "Radius": "None"
+  Radius: 'None'
 });
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {
@@ -35,32 +42,54 @@ const toFontWeight = (value, fallback) => {
   if (typeof value === 'string') return value;
   return fallback;
 };
-function resolveCategoryCardTokens(modes, active) {
-  const idleModes = {
-    ...modes,
-    [CATEGORY_CARD_STATE]: 'Idle'
-  };
-  const activeModes = {
-    ...modes,
-    [CATEGORY_CARD_STATE]: 'Active'
-  };
-  const resolvedModes = active ? activeModes : idleModes;
-  const gap = toNumber(getVariableByName('cardTab/gap', resolvedModes), 6);
-  const paddingHorizontal = toNumber(getVariableByName('cardTab/padding/horizontal', resolvedModes), 8);
-  const paddingVertical = toNumber(getVariableByName('cardTab/padding/vertical', resolvedModes), 8);
-  const radius = toNumber(getVariableByName('cardTab/radius', resolvedModes), 8);
-  const strokeWidth = toNumber(getVariableByName('cardTab/strokeWidth', resolvedModes), 1);
-  const strokeColor = getVariableByName('cardTab/stroke/color', resolvedModes) ?? '#f5f5f5';
-  const idleBackground = getVariableByName('cardTab/background/color', idleModes) ?? '#ffffff';
-  const activeBackground = getVariableByName('cardTab/background/color', activeModes) ?? '#f5f5f5';
-  const backgroundColor = active ? activeBackground : idleBackground;
-  const imageSize = toNumber(getVariableByName('cardTab/image/width', resolvedModes), 36);
-  const imageRadius = toNumber(getVariableByName('image/radius', resolvedModes), 0);
-  const fontFamily = getVariableByName('label/fontFamily', resolvedModes) ?? 'JioType Var';
-  const fontSize = toNumber(getVariableByName('label/fontSize', resolvedModes), 12);
-  const lineHeight = toNumber(getVariableByName('label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
-  const fontWeight = toFontWeight(getVariableByName('label/fontWeight', resolvedModes), '500');
-  const labelColor = getVariableByName('cardTab/label/color', resolvedModes) ?? '#000000';
+
+/**
+ * Maps any accepted state token (`Default` / `Active`, plus legacy `Idle`) onto
+ * the canonical `Card Tab State` mode names used by the variable resolver.
+ */
+const normalizeCardTabState = value => {
+  if (value === 'Active') return 'Active';
+  if (value === 'Default' || value === 'Idle') return 'Default';
+  return undefined;
+};
+
+/**
+ * Resolves whether the card should render in the Active (gold stroke) state.
+ *
+ * Precedence (backward compatible):
+ * 1. Explicit `active` boolean prop (existing public API)
+ * 2. `modes['Card Tab State']` / legacy `modes['Category Card State']`
+ * 3. Default → idle (`Default`)
+ */
+const resolveIsActive = (active, propModes) => {
+  if (typeof active === 'boolean') return active;
+  const fromModes = normalizeCardTabState(propModes[CARD_TAB_STATE] ?? propModes[LEGACY_CARD_TAB_STATE]);
+  return fromModes === 'Active';
+};
+function resolveCategoryCardTokens(modes) {
+  const gap = toNumber(getVariableByName('cardTab/gap', modes), 6);
+  const paddingHorizontal = toNumber(getVariableByName('cardTab/padding/horizontal', modes), 8);
+  const paddingVertical = toNumber(getVariableByName('cardTab/padding/vertical', modes), 8);
+  const radius = toNumber(getVariableByName('cardTab/radius', modes), 8);
+  const strokeWidth = toNumber(getVariableByName('cardTab/strokeWidth', modes), 1);
+  // Active → gold (`#cea15a`); Default → grey (`#f5f5f5`). Both resolve through
+  // `Card Tab State` on `cardTab/stroke/color`.
+  const strokeColor = getVariableByName('cardTab/stroke/color', modes) ?? '#f5f5f5';
+
+  // Both Idle and Active use a white surface — selection is stroke-only.
+  const backgroundColor = getVariableByName('cardTab/background/color', modes) ?? '#ffffff';
+  const imageWidth = toNumber(getVariableByName('cardTab/image/width', modes), 36);
+  const imageHeight = toNumber(getVariableByName('cardTab/image/height', modes), imageWidth);
+  const imageRadius = toNumber(getVariableByName('image/radius', modes), 0);
+
+  // Prefer component-scoped `cardTab/label/*` (Figma bindings). Do not fall
+  // back to bare `label/fontWeight` / `label/lineHeight` — those currently
+  // resolve from an unrelated Donut Chart collection (400 / 15.6).
+  const fontFamily = getVariableByName('cardTab/label/fontFamily', modes) ?? getVariableByName('label/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('cardTab/label/fontSize', modes) ?? getVariableByName('label/fontSize', modes), 12);
+  const lineHeight = toNumber(getVariableByName('cardTab/label/lineHeight', modes), 16);
+  const fontWeight = toFontWeight(getVariableByName('cardTab/label/fontWeight', modes), '500');
+  const labelColor = getVariableByName('cardTab/label/color', modes) ?? '#000000';
   return {
     containerStyle: {
       position: 'relative',
@@ -84,7 +113,8 @@ function resolveCategoryCardTokens(modes, active) {
       lineHeight,
       textAlign: 'center'
     },
-    imageSize,
+    imageWidth,
+    imageHeight,
     imageRadius
   };
 }
@@ -101,8 +131,13 @@ const disabledOverlayStyle = {
  * optionally show an overlapping badge at the top edge. Cards are typically
  * laid out in a horizontal `ScrollView` or `HStack`.
  *
- * All visual values resolve through the `cardTab/*` design tokens with
- * sensible Figma defaults so the card renders correctly out of the box.
+ * Selection is communicated with a gold stroke (`Card Tab State = Active`);
+ * the surface stays white in both Idle and Active. All visual values resolve
+ * through the `cardTab/*` design tokens with sensible Figma defaults so the
+ * card renders correctly out of the box.
+ *
+ * The image area is a real slot (`imageSlot` or `children`) matching the Figma
+ * Image instance — omit both to keep the default `Image`.
  *
  * @component
  * @param {CategoryCardProps} props
@@ -111,11 +146,12 @@ function CategoryCard({
   label = 'Popular',
   imageSource,
   imageSlot,
+  children,
   badge,
-  active = false,
+  active: activeProp,
   width = DEFAULT_CARD_WIDTH,
-  disableTruncation,
-  singleLine,
+  disableTruncation = true,
+  singleLine = true,
   onPress,
   disabled = false,
   modes: propModes = EMPTY_MODES,
@@ -131,16 +167,21 @@ function CategoryCard({
   const {
     modes: globalModes
   } = useTokens();
+  const active = resolveIsActive(activeProp, propModes);
+  const cardTabState = active ? 'Active' : 'Default';
   const modes = useMemo(() => ({
     ...globalModes,
     ...CATEGORY_CARD_DEFAULT_MODES,
-    ...propModes
-  }), [globalModes, propModes]);
-  const resolvedModes = useMemo(() => ({
-    ...modes,
-    [CATEGORY_CARD_STATE]: active ? 'Active' : 'Idle'
-  }), [modes, active]);
-  const tokens = useMemo(() => resolveCategoryCardTokens(resolvedModes, active), [resolvedModes, active]);
+    ...propModes,
+    // Canonical collection always wins so stroke/background tokens resolve.
+    [CARD_TAB_STATE]: cardTabState,
+    // Keep the legacy key in sync for any nested consumers still reading it.
+    [LEGACY_CARD_TAB_STATE]: active ? 'Active' : 'Idle'
+  }), [globalModes, propModes, cardTabState, active]);
+  const tokens = useMemo(() => resolveCategoryCardTokens(modes), [modes]);
+
+  // Same layout merge order as `Text`: consumer `style` first, then layout so
+  // single-line / no-truncation overflow always wins.
   const {
     style: labelLayoutStyle,
     ...labelTruncation
@@ -150,30 +191,22 @@ function CategoryCard({
     numberOfLines: 1,
     ellipsizeMode: 'tail'
   }), [disableTruncation, singleLine]);
+  const slotContent = imageSlot ?? children;
   const processedImageSlot = useMemo(() => {
-    if (!imageSlot) return null;
-    const processed = cloneChildrenWithModes(imageSlot, resolvedModes);
+    if (slotContent == null) return null;
+    const processed = cloneChildrenWithModes(slotContent, modes);
     return processed.length === 1 ? processed[0] : processed;
-  }, [imageSlot, resolvedModes]);
-  const imageNode = processedImageSlot ?? (imageSource !== undefined ? /*#__PURE__*/_jsx(Image, {
-    imageSource: imageSource,
-    width: tokens.imageSize,
-    height: tokens.imageSize,
-    ratio: 1,
-    resizeMode: "cover",
-    borderRadius: tokens.imageRadius,
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no"
-  }) : /*#__PURE__*/_jsx(Image, {
-    imageSource: "https://www.figma.com/api/mcp/asset/0ee34871-646f-4736-be06-22fb6c0a4eed",
-    width: tokens.imageSize,
-    height: tokens.imageSize,
+  }, [slotContent, modes]);
+  const imageNode = processedImageSlot ?? /*#__PURE__*/_jsx(Image, {
+    imageSource: imageSource ?? DEFAULT_IMAGE_ASSET,
+    width: tokens.imageWidth,
+    height: tokens.imageHeight,
     ratio: 1,
     resizeMode: "cover",
     borderRadius: tokens.imageRadius,
     accessibilityElementsHidden: true,
     importantForAccessibility: "no"
-  }));
+  });
   const a11yLabel = accessibilityLabel ?? (badge ? `${label}, ${badge}` : label);
   const webProps = usePressableWebSupport({
     restProps: rest,
@@ -187,8 +220,8 @@ function CategoryCard({
     pointerEvents: "none",
     children: /*#__PURE__*/_jsx(Badge, {
       label: badge,
-      modes: resolvedModes,
-      style: BADGE_CENTER_STYLE
+      modes: modes,
+      style: BADGE_STYLE
     })
   }) : null;
 
@@ -219,7 +252,7 @@ function CategoryCard({
     testID: testID,
     ...webProps,
     children: [badgeNode, imageNode, /*#__PURE__*/_jsx(Text, {
-      style: [tokens.labelStyle, labelWidthStyle, labelLayoutStyle, labelStyle],
+      style: [tokens.labelStyle, labelWidthStyle, labelStyle, labelLayoutStyle],
       ...labelTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -236,8 +269,9 @@ const BADGE_ANCHOR = {
   justifyContent: 'center',
   zIndex: 1
 };
-const BADGE_CENTER_STYLE = {
-  alignSelf: 'center'
+const BADGE_STYLE = {
+  alignSelf: 'center',
+  maxWidth: 38
 };
 
 /** Lets the label fill the card width so the one-line ellipsis has a bound. */

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -7,15 +7,30 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Checkbox from '../Checkbox/Checkbox';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * Figma's Checkbox Item label slot lays out `Text` + `Link` (etc.) in a
+ * horizontal auto-layout frame with `Slot gap = XS` (2px). Consumers may still
+ * override via `modes['Slot gap']`. Applied only when resolving the slot gap —
+ * not merged into child `modes` — so nested components are unaffected.
+ */
+const LABEL_SLOT_GAP_DEFAULTS = {
+  'Slot gap': 'XS'
+};
+/**
+ * CheckboxItem composes a `Checkbox`, a label slot and an optional `endSlot` into a
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
- * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ * `endSlot` and nested interactive children such as `Link`) toggles the checkbox,
+ * mirroring the typical native form pattern.
  *
  * Use the `control` prop to swap the checkbox between the leading (left, default)
  * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
  *
+ * The Figma default composition places `Text` + `Link` in the label slot
+ * ("I agree" + "Terms & Conditions"). Pass those as `children` — the slot lays
+ * multiple children out in a horizontal row with `slot/gap`.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
- * design tokens for typography and spacing.
+ * design tokens for row spacing; string labels still resolve `checkboxItem/label/*`
+ * for backward-compatible typography.
  *
  * @component
  * @param {CheckboxItemProps} props
@@ -24,13 +39,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
- * // Recommended: pass the label via the children slot.
+ * // Figma default composition — Text + Link in the label slot.
  * <CheckboxItem
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * >
+ *   <Text text="I agree" autolayout="Hug" />
+ *   <Link text="Terms & Conditions" autolayout="Hug" onPress={openTerms} />
+ * </CheckboxItem>
+ *
+ * // Plain string (still supported).
+ * <CheckboxItem checked={checked} onValueChange={setChecked}>
  *   Fixed deposit • 0245
  * </CheckboxItem>
  *
@@ -59,8 +80,8 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   //   2. otherwise the legacy `label` prop, whenever it was passed at all —
   //      including an explicit `null`/`false`, which (as before) hides the
   //      label entirely.
-  //   3. otherwise the Figma placeholder, so the default story still renders
-  //      something meaningful.
+  //   3. otherwise the Figma plain-string placeholder, so the default story
+  //      still renders something meaningful when no slot content is supplied.
   const hasChildren = children != null && children !== false;
   const slotContent = hasChildren ? children : label !== undefined ? label : 'Fixed deposit • 0245';
   const isTrailing = control === 'trailing';
@@ -78,6 +99,11 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   const gap = getVariableByName('checkboxItem/gap', modes) ?? 8;
   const paddingHorizontal = getVariableByName('checkboxItem/padding/horizontal', modes) ?? 0;
   const paddingVertical = getVariableByName('checkboxItem/padding/vertical', modes) ?? 0;
+  // Label-slot internal gap — Figma uses Slot gap = XS (2). Consumer modes win.
+  const labelSlotGap = getVariableByName('slot/gap', {
+    ...LABEL_SLOT_GAP_DEFAULTS,
+    ...modes
+  }) ?? 2;
   const labelColor = getVariableByName('checkboxItem/foreground', modes) ?? '#1a1c1f';
   const labelFontFamily = getVariableByName('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
   const labelFontSize = getVariableByName('checkboxItem/label/fontSize', modes) ?? 14;
@@ -88,10 +114,17 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
     flexDirection: 'row',
     alignItems: 'center',
     gap,
+    // Trailing matches Figma: space-between pins the checkbox to the far edge
+    // while the label (and optional endSlot) stay on the leading side.
+    justifyContent: isTrailing ? 'space-between' : 'flex-start',
     paddingHorizontal,
     paddingVertical,
     width: '100%'
   };
+
+  // String labels keep the historical checkboxItem/label/* typography so
+  // existing plain-string call-sites do not change visually. `flex: 1` is
+  // retained in both control modes so long labels still wrap inside the row.
   const resolvedLabelStyle = {
     flex: 1,
     minWidth: 0,
@@ -118,23 +151,39 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   // correctly). An explicit null/false hides the label entirely (legacy
   // behaviour of the `label` prop).
   const isTextSlot = typeof slotContent === 'string' || typeof slotContent === 'number';
+  const labelSlotStyle = {
+    // Grow to fill remaining row width so long content wraps. Trailing rows
+    // also set `justifyContent: 'space-between'` so the checkbox stays pinned
+    // to the far edge (Figma Control=Trailing).
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: labelSlotGap
+  };
   const labelNode = slotContent == null || slotContent === false ? null : isTextSlot ? /*#__PURE__*/_jsx(Text, {
     style: [resolvedLabelStyle, labelStyle],
     selectable: false,
     children: slotContent
   }) : /*#__PURE__*/_jsx(View, {
-    style: {
-      flex: 1,
-      minWidth: 0
-    },
+    style: labelSlotStyle,
     children: cloneChildrenWithModes(slotContent, modes)
   });
+
+  // Capture the end-slot responder so presses on nested actions (e.g. Button)
+  // never bubble to the row Pressable and toggle the checkbox.
+  const suppressRowToggle = useCallback(event => {
+    event.stopPropagation?.();
+  }, []);
   const endSlotNode = endSlot ? /*#__PURE__*/_jsx(View, {
     style: {
       width: endSlotWidth,
       flexShrink: 0,
       alignItems: 'stretch'
     },
+    onStartShouldSetResponder: () => true,
+    onTouchEnd: suppressRowToggle,
     children: cloneChildrenWithModes(endSlot, modes)
   }) : null;
   return /*#__PURE__*/_jsx(Pressable, {

package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -1,12 +1,15 @@
 "use strict";
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
-import Checkbox from '../Checkbox/Checkbox';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import CheckboxItem from '../CheckboxItem/CheckboxItem';
 import Button from '../Button/Button';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from '../Text/Text';
+import Link from '../Link/Link';
+import ScrollArea from '../ScrollArea/ScrollArea';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Default modes applied to the inner toggle `Button`. These resolve the
  * tertiary-style pill in the Figma reference (small, transparent background,
@@ -19,15 +22,21 @@ const BUTTON_DEFAULT_MODES = {
   Emphasis: 'Low'
 };
 
+/** Figma Idle label-slot itemSpacing. */
+const IDLE_SLOT_GAP = 4;
+/** Figma Open scroll-slot itemSpacing. */
+const OPEN_SLOT_GAP = 2;
+
 /**
- * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
- * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
- * component with two states:
+ * ExpandableCheckbox composes a `CheckboxItem` (checkbox + label slot), optional
+ * `Text`/`Link` label content, and a "Read more" / "Read less" toggle. Mirrors
+ * the Figma "Expandable Checkbox" component with two states:
  *
- *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
- *    in a horizontal row (cross-axis centered).
- *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
- *    button right-aligned beneath the row.
+ *  - **Idle (collapsed)** — horizontal row: CheckboxItem (fill) + toggle button
+ *    (hug), cross-axis centered.
+ *  - **Open (expanded)** — vertical stack aligned to the end: CheckboxItem with
+ *    the label slot wrapped in a `ScrollArea` (capped by `checkbox/maxHeight`),
+ *    then the toggle button right-aligned beneath.
  *
  * The checkbox and the toggle button have independent press handlers — pressing
  * the toggle does not affect the checked state, and toggling the checkbox does
@@ -39,7 +48,9 @@ const BUTTON_DEFAULT_MODES = {
  * @example
  * ```tsx
  * <ExpandableCheckbox
- *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   label="I agree"
+ *   linkLabel="Terms & Conditions"
+ *   onLinkPress={openTerms}
  *   defaultChecked
  *   onValueChange={setAccepted}
  *   modes={{ 'Color Mode': 'Light' }}
@@ -48,6 +59,9 @@ const BUTTON_DEFAULT_MODES = {
  */
 function ExpandableCheckbox({
   label = '',
+  linkLabel,
+  onLinkPress,
+  children,
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -81,14 +95,21 @@ function ExpandableCheckbox({
     if (!isExpandedControlled) setInternalExpanded(next);
     onExpandedChange?.(next);
   }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
+
+  // Isolate link presses from the CheckboxItem row Pressable so activating the
+  // Terms link never toggles the checkbox.
+  const handleLinkPress = useCallback(event => {
+    if (disabled) return;
+    // RN web: stop the parent Pressable from also receiving the click.
+    event.stopPropagation?.();
+    onLinkPress?.(event);
+  }, [disabled, onLinkPress]);
   const gap = getVariableByName('expandableCheckbox/gap', modes) ?? 8;
-  const rowGap = getVariableByName('checkboxItem/gap', modes) ?? 8;
-  const labelColor = getVariableByName('checkboxItem/foreground', modes) ?? '#1a1c1f';
-  const labelFontFamily = getVariableByName('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = getVariableByName('checkboxItem/label/fontSize', modes) ?? 14;
-  const labelLineHeight = getVariableByName('checkboxItem/label/lineHeight', modes) ?? 19;
-  const labelFontWeightRaw = getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400;
-  const labelFontWeight = String(labelFontWeightRaw);
+  const maxHeight = getVariableByName('checkbox/maxHeight', modes) ?? 450;
+  const scrollPaddingLeft = getVariableByName('scrollArea/padding/left', modes) ?? 0;
+  const scrollPaddingTop = getVariableByName('scrollArea/padding/top', modes) ?? 0;
+  const scrollPaddingRight = getVariableByName('scrollArea/padding/right', modes) ?? 0;
+  const scrollPaddingBottom = getVariableByName('scrollArea/padding/bottom', modes) ?? 0;
   const containerStyle = useMemo(() => ({
     flexDirection: isExpanded ? 'column' : 'row',
     alignItems: isExpanded ? 'flex-end' : 'center',
@@ -98,30 +119,26 @@ function ExpandableCheckbox({
       opacity: 0.6
     } : null)
   }), [isExpanded, gap, disabled]);
-  const rowStyle = useMemo(() => ({
+  const itemWrapperStyle = useMemo(() => ({
     flex: isExpanded ? undefined : 1,
     alignSelf: isExpanded ? 'stretch' : 'auto',
     minWidth: 0,
+    width: isExpanded ? '100%' : undefined
+  }), [isExpanded]);
+  const checkboxItemStyle = useMemo(() => ({
+    // CheckboxItem hard-codes width: '100%'; clear it in the Idle row so the
+    // Read more button can sit beside a flex-growing item.
+    width: isExpanded ? '100%' : undefined,
+    alignItems: isExpanded ? 'flex-start' : 'center'
+  }), [isExpanded]);
+  const slotRowStyle = useMemo(() => ({
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: isExpanded ? 'flex-start' : 'center',
-    gap: rowGap
-  }), [isExpanded, rowGap]);
-  const resolvedLabelStyle = useMemo(() => ({
+    gap: isExpanded ? OPEN_SLOT_GAP : IDLE_SLOT_GAP,
     flex: 1,
-    minWidth: 0,
-    color: labelColor,
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    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]);
+    minWidth: 0
+  }), [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.
@@ -129,30 +146,96 @@ function ExpandableCheckbox({
     ...modes,
     ...BUTTON_DEFAULT_MODES
   }), [modes]);
-  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' && label.length > 0 ? linkLabel ? `${label} ${linkLabel}` : label : linkLabel);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
-    numberOfLines: collapsedLines,
-    ellipsizeMode: 'tail'
-  } : null;
+  const shouldTruncate = !disableTruncation && !isExpanded && collapsedLines > 0;
+  const hasChildren = children != null && children !== false;
+  const composedLabel = hasChildren ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(View, {
+    style: slotRowStyle,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      text: label,
+      modes: modes,
+      textAlign: "Left",
+      style: labelStyle,
+      ...(shouldTruncate ? {
+        numberOfLines: collapsedLines
+      } : {
+        disableTruncation: true
+      })
+    }) : null, linkLabel ?
+    /*#__PURE__*/
+    // Capture the touch so the parent CheckboxItem Pressable does not also
+    // toggle the checkbox when the Terms link is activated.
+    _jsx(View, {
+      onStartShouldSetResponder: () => true,
+      children: /*#__PURE__*/_jsx(Link, {
+        text: linkLabel,
+        onPress: handleLinkPress,
+        disabled: disabled,
+        modes: modes,
+        textAlign: "Left"
+        // Idle: Fill (Figma). Open: Hug (Figma).
+        ,
+        autolayout: isExpanded || !label ? 'Hug' : 'Fill'
+      })
+    }) : null]
+  });
+  const labelSlot = isExpanded ? /*#__PURE__*/_jsx(ScrollArea, {
+    direction: "vertical",
+    modes: modes,
+    showScrollIndicator: false,
+    paddingLeft: scrollPaddingLeft,
+    paddingTop: scrollPaddingTop,
+    paddingRight: scrollPaddingRight,
+    paddingBottom: scrollPaddingBottom,
+    style: {
+      maxHeight,
+      width: '100%',
+      flexGrow: 1,
+      flexShrink: 1
+    },
+    contentContainerStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      gap: OPEN_SLOT_GAP
+    },
+    children: hasChildren ? composedLabel : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [label ? /*#__PURE__*/_jsx(Text, {
+        text: label,
+        modes: modes,
+        textAlign: "Left",
+        style: labelStyle,
+        disableTruncation: true
+      }) : null, linkLabel ? /*#__PURE__*/_jsx(View, {
+        onStartShouldSetResponder: () => true,
+        children: /*#__PURE__*/_jsx(Link, {
+          text: linkLabel,
+          onPress: handleLinkPress,
+          disabled: disabled,
+          modes: modes,
+          textAlign: "Left",
+          autolayout: "Hug"
+        })
+      }) : null]
+    })
+  }) : composedLabel;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: rowStyle,
-      children: [/*#__PURE__*/_jsx(Checkbox, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: itemWrapperStyle,
+      children: /*#__PURE__*/_jsx(CheckboxItem, {
         checked: isChecked,
         disabled: disabled,
         onValueChange: handleToggleChecked,
         modes: modes,
+        control: "leading",
+        style: checkboxItemStyle,
         ...(a11yLabel !== undefined ? {
           accessibilityLabel: a11yLabel
-        } : {})
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [resolvedLabelStyle, labelStyle],
-        selectable: false,
-        ...(labelNumberOfLinesProps ?? {}),
-        children: label
-      })]
+        } : {}),
+        children: labelSlot
+      })
     }), /*#__PURE__*/_jsx(Button, {
       label: buttonLabel,
       onPress: handleToggleExpanded,