jfs-components 0.1.51 → 0.1.55

package/lib/commonjs/components/CategoryCard/CategoryCard.js

@@ -15,16 +15,23 @@ var _Image = _interopRequireDefault(require("../Image/Image"));
 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); }
-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') {
@@ -41,32 +48,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((0, _figmaVariablesResolver.getVariableByName)('cardTab/gap', resolvedModes), 6);
-  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/horizontal', resolvedModes), 8);
-  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/vertical', resolvedModes), 8);
-  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/radius', resolvedModes), 8);
-  const strokeWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/strokeWidth', resolvedModes), 1);
-  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/stroke/color', resolvedModes) ?? '#f5f5f5';
-  const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('cardTab/background/color', idleModes) ?? '#ffffff';
-  const activeBackground = (0, _figmaVariablesResolver.getVariableByName)('cardTab/background/color', activeModes) ?? '#f5f5f5';
-  const backgroundColor = active ? activeBackground : idleBackground;
-  const imageSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/image/width', resolvedModes), 36);
-  const imageRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('image/radius', resolvedModes), 0);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', resolvedModes) ?? 'JioType Var';
-  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/fontSize', resolvedModes), 12);
-  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
-  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('label/fontWeight', resolvedModes), '500');
-  const labelColor = (0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('cardTab/gap', modes), 6);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/horizontal', modes), 8);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/vertical', modes), 8);
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/radius', modes), 8);
+  const strokeWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/strokeWidth', modes), 1);
+  // Active → gold (`#cea15a`); Default → grey (`#f5f5f5`). Both resolve through
+  // `Card Tab State` on `cardTab/stroke/color`.
+  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/stroke/color', modes) ?? '#f5f5f5';
+
+  // Both Idle and Active use a white surface — selection is stroke-only.
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/background/color', modes) ?? '#ffffff';
+  const imageWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/image/width', modes), 36);
+  const imageHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/image/height', modes), imageWidth);
+  const imageRadius = toNumber((0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontFamily', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontSize', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontSize', modes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/lineHeight', modes), 16);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontWeight', modes), '500');
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/color', modes) ?? '#000000';
   return {
     containerStyle: {
       position: 'relative',
@@ -90,7 +119,8 @@ function resolveCategoryCardTokens(modes, active) {
       lineHeight,
       textAlign: 'center'
     },
-    imageSize,
+    imageWidth,
+    imageHeight,
     imageRadius
   };
 }
@@ -107,8 +137,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
@@ -117,11 +152,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 = _reactUtils.EMPTY_MODES,
@@ -137,16 +173,21 @@ function CategoryCard({
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
+  const active = resolveIsActive(activeProp, propModes);
+  const cardTabState = active ? 'Active' : 'Default';
   const modes = (0, _react.useMemo)(() => ({
     ...globalModes,
     ...CATEGORY_CARD_DEFAULT_MODES,
-    ...propModes
-  }), [globalModes, propModes]);
-  const resolvedModes = (0, _react.useMemo)(() => ({
-    ...modes,
-    [CATEGORY_CARD_STATE]: active ? 'Active' : 'Idle'
-  }), [modes, active]);
-  const tokens = (0, _react.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 = (0, _react.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
@@ -156,30 +197,22 @@ function CategoryCard({
     numberOfLines: 1,
     ellipsizeMode: 'tail'
   }), [disableTruncation, singleLine]);
+  const slotContent = imageSlot ?? children;
   const processedImageSlot = (0, _react.useMemo)(() => {
-    if (!imageSlot) return null;
-    const processed = (0, _reactUtils.cloneChildrenWithModes)(imageSlot, resolvedModes);
+    if (slotContent == null) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(slotContent, modes);
     return processed.length === 1 ? processed[0] : processed;
-  }, [imageSlot, resolvedModes]);
-  const imageNode = processedImageSlot ?? (imageSource !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-    imageSource: imageSource,
-    width: tokens.imageSize,
-    height: tokens.imageSize,
-    ratio: 1,
-    resizeMode: "cover",
-    borderRadius: tokens.imageRadius,
-    accessibilityElementsHidden: true,
-    importantForAccessibility: "no"
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-    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__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    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 = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: rest,
@@ -193,8 +226,8 @@ function CategoryCard({
     pointerEvents: "none",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
       label: badge,
-      modes: resolvedModes,
-      style: BADGE_CENTER_STYLE
+      modes: modes,
+      style: BADGE_STYLE
     })
   }) : null;
 
@@ -225,7 +258,7 @@ function CategoryCard({
     testID: testID,
     ...webProps,
     children: [badgeNode, imageNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [tokens.labelStyle, labelWidthStyle, labelLayoutStyle, labelStyle],
+      style: [tokens.labelStyle, labelWidthStyle, labelStyle, labelLayoutStyle],
       ...labelTruncation,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -242,8 +275,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/commonjs/components/CheckboxItem/CheckboxItem.js

@@ -13,15 +13,30 @@ 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); }
 /**
- * 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
@@ -30,13 +45,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ```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>
  *
@@ -65,8 +86,8 @@ const CheckboxItem = /*#__PURE__*/(0, _react.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';
@@ -84,6 +105,11 @@ const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
   const gap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
+  // Label-slot internal gap — Figma uses Slot gap = XS (2). Consumer modes win.
+  const labelSlotGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', {
+    ...LABEL_SLOT_GAP_DEFAULTS,
+    ...modes
+  }) ?? 2;
   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;
@@ -94,10 +120,17 @@ const CheckboxItem = /*#__PURE__*/(0, _react.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,
@@ -124,23 +157,39 @@ const CheckboxItem = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [resolvedLabelStyle, labelStyle],
     selectable: false,
     children: slotContent
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      flex: 1,
-      minWidth: 0
-    },
+    style: labelSlotStyle,
     children: (0, _reactUtils.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 = (0, _react.useCallback)(event => {
+    event.stopPropagation?.();
+  }, []);
   const endSlotNode = endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: {
       width: endSlotWidth,
       flexShrink: 0,
       alignItems: 'stretch'
     },
+    onStartShouldSetResponder: () => true,
+    onTouchEnd: suppressRowToggle,
     children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -76,7 +76,7 @@ function CircularProgressBarDoted({
   const activeDots = normalizedValue <= 0 ? 0 : Math.ceil(normalizedValue / 100 * resolvedDotCount);
   const dotShadowSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/shadow/size', modes), 6);
   const baseDotSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/size', modes), 6);
-  const dotSize = baseDotSize + dotShadowSize;
+  const dotSize = baseDotSize + dotShadowSize * 2;
   const outerDotSize = dotSize;
   const ringSize = layoutSize;
   const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);

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

@@ -8,8 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
-var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _CheckboxItem = _interopRequireDefault(require("../CheckboxItem/CheckboxItem"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _Link = _interopRequireDefault(require("../Link/Link"));
+var _ScrollArea = _interopRequireDefault(require("../ScrollArea/ScrollArea"));
 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); }
@@ -25,15 +28,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
@@ -45,7 +54,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' }}
@@ -54,6 +65,9 @@ const BUTTON_DEFAULT_MODES = {
  */
 function ExpandableCheckbox({
   label = '',
+  linkLabel,
+  onLinkPress,
+  children,
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -87,14 +101,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 = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    // RN web: stop the parent Pressable from also receiving the click.
+    event.stopPropagation?.();
+    onLinkPress?.(event);
+  }, [disabled, onLinkPress]);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('expandableCheckbox/gap', modes) ?? 8;
-  const rowGap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
-  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;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/lineHeight', modes) ?? 19;
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontWeight', modes) ?? 400;
-  const labelFontWeight = String(labelFontWeightRaw);
+  const maxHeight = (0, _figmaVariablesResolver.getVariableByName)('checkbox/maxHeight', modes) ?? 450;
+  const scrollPaddingLeft = (0, _figmaVariablesResolver.getVariableByName)('scrollArea/padding/left', modes) ?? 0;
+  const scrollPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('scrollArea/padding/top', modes) ?? 0;
+  const scrollPaddingRight = (0, _figmaVariablesResolver.getVariableByName)('scrollArea/padding/right', modes) ?? 0;
+  const scrollPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('scrollArea/padding/bottom', modes) ?? 0;
   const containerStyle = (0, _react.useMemo)(() => ({
     flexDirection: isExpanded ? 'column' : 'row',
     alignItems: isExpanded ? 'flex-end' : 'center',
@@ -104,30 +125,26 @@ function ExpandableCheckbox({
       opacity: 0.6
     } : null)
   }), [isExpanded, gap, disabled]);
-  const rowStyle = (0, _react.useMemo)(() => ({
+  const itemWrapperStyle = (0, _react.useMemo)(() => ({
     flex: isExpanded ? undefined : 1,
     alignSelf: isExpanded ? 'stretch' : 'auto',
     minWidth: 0,
+    width: isExpanded ? '100%' : undefined
+  }), [isExpanded]);
+  const checkboxItemStyle = (0, _react.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 = (0, _react.useMemo)(() => ({
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: isExpanded ? 'flex-start' : 'center',
-    gap: rowGap
-  }), [isExpanded, rowGap]);
-  const resolvedLabelStyle = (0, _react.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.
@@ -135,30 +152,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 ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: slotRowStyle,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      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.
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      onStartShouldSetResponder: () => true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        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__*/(0, _jsxRuntime.jsx)(_ScrollArea.default, {
+    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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        text: label,
+        modes: modes,
+        textAlign: "Left",
+        style: labelStyle,
+        disableTruncation: true
+      }) : null, linkLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onStartShouldSetResponder: () => true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+          text: linkLabel,
+          onPress: handleLinkPress,
+          disabled: disabled,
+          modes: modes,
+          textAlign: "Left",
+          autolayout: "Hug"
+        })
+      }) : null]
+    })
+  }) : composedLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: rowStyle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: itemWrapperStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxItem.default, {
         checked: isChecked,
         disabled: disabled,
         onValueChange: handleToggleChecked,
         modes: modes,
+        control: "leading",
+        style: checkboxItemStyle,
         ...(a11yLabel !== undefined ? {
           accessibilityLabel: a11yLabel
-        } : {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [resolvedLabelStyle, labelStyle],
-        selectable: false,
-        ...(labelNumberOfLinesProps ?? {}),
-        children: label
-      })]
+        } : {}),
+        children: labelSlot
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       label: buttonLabel,
       onPress: handleToggleExpanded,