jfs-components 0.1.8 → 0.1.17

package/lib/module/components/BottomNavItem/BottomNavItem.js

@@ -23,13 +23,13 @@ const focusOverlayStyle = {
 };
 function resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride) {
   const gap = getVariableByName('bottomNavItem/gap', modes) ?? 6;
-  const fontFamily = getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = getVariableByName('bottomNavItem/fontFamily', modes);
   const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = getVariableByName('bottomNavItem/fontSize', modes) ?? 11;
   const lineHeight = getVariableByName('bottomNavItem/lineHeight', modes) ?? 14;
-  const labelColor = getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f';
-  const resolvedIconColor = iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545';
+  const labelColor = getVariableByName('bottomNavItem/label/color', modes);
+  const resolvedIconColor = iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes);
   const resolvedIconSize = iconSizeOverride ?? getVariableByName('bottomNavItem/icon/size', modes) ?? 24;
   return {
     baseContainerStyle: {

package/lib/module/components/BrandChip/BrandChip.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Avatar from '../Avatar/Avatar';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const toNumber = (value, fallback) => {
@@ -89,7 +89,8 @@ function BrandChip({
   modes: propModes = EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -120,8 +121,7 @@ function BrandChip({
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [avatarNode, /*#__PURE__*/_jsx(Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       children: label
     })]
   });

package/lib/module/components/Button/Button.js

@@ -31,6 +31,17 @@ const containerLayoutStyle = {
   justifyContent: 'center'
 };
 
+// Keeps the label on a single line. `flexShrink: 0` stops a tight flex parent
+// from squeezing the text; on web `whiteSpace: 'nowrap'` is what actually
+// prevents the line break (a bare `numberOfLines` line-clamp still allows the
+// text to wrap inside a width-constrained pill in react-native-web).
+const NO_WRAP_LABEL_STYLE = {
+  flexShrink: 0,
+  ...(IS_WEB ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -42,19 +53,19 @@ const containerLayoutStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveButtonTokens(modes, disabled) {
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = getVariableByName('button/background', modes);
+  const borderColor = getVariableByName('button/border/color', modes);
   const borderWidth = getVariableByName('button/border/size', modes);
-  const radius = getVariableByName('button/radius', modes) || 9999;
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20;
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12;
-  const gap = getVariableByName('button/gap', modes) || 8;
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System';
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700;
+  const radius = getVariableByName('button/radius', modes);
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('button/padding/vertical', modes);
+  const gap = getVariableByName('button/gap', modes);
+  const fontFamily = getVariableByName('button/fontFamily', modes);
+  const fontWeightValue = getVariableByName('button/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19;
-  const fontSize = getVariableByName('button/fontSize', modes) || 16;
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
+  const lineHeight = getVariableByName('button/lineHeight', modes);
+  const fontSize = getVariableByName('button/fontSize', modes);
+  const textColor = getVariableByName('button/foreground', modes);
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18;
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
@@ -63,9 +74,9 @@ function resolveButtonTokens(modes, disabled) {
     ...modes,
     'Button / State': 'Pressed'
   };
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor;
+  const pressedBg = getVariableByName('button/background', pressedModes);
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes);
+  const pressedTextColor = getVariableByName('button/foreground', pressedModes);
 
   // Hover tokens are only meaningful on web. Skipping them on native saves
   // ~3 token lookups + an object spread per render on every Button.
@@ -76,9 +87,9 @@ function resolveButtonTokens(modes, disabled) {
       ...modes,
       'Button / State': 'Hover'
     };
-    const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
-    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
-    hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
+    const hoverBg = getVariableByName('button/background', hoverModes);
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes);
+    hoverTextColor = getVariableByName('button/foreground', hoverModes);
     hoverContainer = {
       backgroundColor: hoverBg,
       borderColor: hoverBorderColor
@@ -170,6 +181,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -213,8 +225,9 @@ function ButtonImpl({
     content = children;
   } else {
     content = /*#__PURE__*/_jsx(Text, {
-      style: activeLabelStyle,
-      numberOfLines: 1,
+      style: [activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE],
+      numberOfLines: disableTruncation ? undefined : 1,
+      ellipsizeMode: disableTruncation ? undefined : 'tail',
       children: label
     });
   }

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

@@ -35,18 +35,18 @@ export function Card({
   style
 }) {
   // Resolve Card Container Tokens
-  const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
-  const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
-  const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
-  const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
-  const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
-  const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
-  const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+  const backgroundColor = getVariableByName('card/background/color', modes);
+  const borderColor = getVariableByName('card/border/color', modes);
+  const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes)); // Ensure number
+  const radius = parseFloat(getVariableByName('card/radius', modes));
+  const gap = parseFloat(getVariableByName('card/gap', modes));
+  const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes));
+  const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes));
 
   // Resolve Content Wrapper Tokens
-  const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
-  const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
-  const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+  const contentGap = parseFloat(getVariableByName('card/content/gap', modes));
+  const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes));
+  const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes));
 
   // Clone media to pass modes if it's a valid element, facilitating nested style resolution
   const mediaWithModes = /*#__PURE__*/isValidElement(media) ? /*#__PURE__*/cloneElement(media, {
@@ -131,14 +131,14 @@ function Title({
 }) {
   const context = useContext(CardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('card/title/color', modes) || '#081007';
-  const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
-  const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+  const color = getVariableByName('card/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes));
+  const fontFamily = getVariableByName('card/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes));
 
   // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
   // We check both keys to be safe.
-  const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
+  const rawFontWeight = getVariableByName('card/title/fontWeight', modes);
   const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
   const textStyle = {
     color,
@@ -164,11 +164,11 @@ function SupportText({
 }) {
   const context = useContext(CardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
-  const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
-  const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
-  const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
+  const color = getVariableByName('card/supportive-text/color', modes);
+  const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes));
+  const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes));
+  const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes);
   const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
   const textStyle = {
     color,

package/lib/module/components/CardAdvisory/CardAdvisory.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar';
 import Nudge from '../Nudge/Nudge';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,19 +34,19 @@ function resolveCardAdvisoryTokens(modes) {
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0);
   const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0);
-  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff';
+  const background = getVariableByName('cardAdvisory/background', modes);
   const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16);
   const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6);
   const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8);
-  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes);
   const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26);
-  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes);
   const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26);
   const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900');
   const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
-  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes);
   const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12);
-  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes);
   const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16);
   const descriptionFontWeight = toFontWeight(getVariableByName('cardAdvisory/description/fontWeight', modes), '500');
   return {
@@ -95,7 +95,7 @@ function resolveCardAdvisoryTokens(modes) {
       lineHeight: descriptionLineHeight,
       width: '100%'
     },
-    iconColor: getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconColor: getVariableByName('cardAdvisory/icon/color', modes),
     iconSize: toNumber(getVariableByName('cardAdvisory/icon/size', modes), 18)
   };
 }
@@ -120,6 +120,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -157,7 +158,7 @@ function CardAdvisory({
         children: [/*#__PURE__*/_jsxs(View, {
           style: tokens.headerStyle,
           children: [/*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [tokens.titleStyle, titleStyle],
             children: title
           }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/CardBankAccount/CardBankAccount.js

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Badge from '../Badge/Badge';
 import Button from '../Button/Button';
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge';
@@ -66,7 +66,8 @@ function CardBankAccount({
   footer,
   modes: propModes = EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   // Merge caller modes on top of `DEFAULT_MODES` so every default key
   // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -183,7 +184,7 @@ function CardBankAccount({
           })
         }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/_jsx(Text, {
           style: valueTextStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: item.value
         }) : cloneChildrenWithModes(item.value, modes)]
       }, `${item.label}-${index}`))

package/lib/module/components/CardCTA/CardCTA.js

@@ -10,8 +10,17 @@ import Button from '../Button/Button';
 import Badge from '../Badge/Badge';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import IconButton from '../IconButton/IconButton';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from '../Avatar/Avatar';
+
+/**
+ * Accepted `type` values. The canonical (and historical) values are lowercase
+ * (`'cta' | 'rating' | 'sip'`). The Figma variant names are PascalCase
+ * (`'CTA' | 'Rating' | 'Sip'`) — we accept those too and normalize internally
+ * so callers can pass either casing without a breaking change.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const optionalTokenAvailability = new Map();
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
 function getOptionalVariableByName(name, modes, fallback) {
   let isAvailable = optionalTokenAvailability.get(name);
   if (isAvailable === undefined) {
@@ -34,11 +43,16 @@ function CardCTA({
   showRatingActions = true,
   onPressLike,
   onPressDislike,
+  headline = 'Headline',
+  description = 'Description',
+  subtitle = 'Subtitle',
+  avatarSource,
   modes: propModes = EMPTY_MODES,
   iconSlot,
   buttonSlot,
   ratingBadgeSlot,
   ratingActionsSlot,
+  avatarSlot,
   style
 }) {
   const {
@@ -48,28 +62,31 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
-  const isRating = type === 'rating';
-  const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
-  const radius = getVariableByName('cardCTA/radius', modes) || 12;
-  const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
-  const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4';
-  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16;
-  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22;
-  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16;
-  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16;
-  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22;
-  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6;
-  const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10';
-  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var';
-  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 17.6;
-  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700;
+  // Accept both lowercase (canonical) and Figma PascalCase variant names.
+  const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
+  const isRating = normalizedType === 'rating';
+  const isSip = normalizedType === 'sip';
+  const background = getVariableByName('cardCTA/background', modes);
+  const radius = getVariableByName('cardCTA/radius', modes);
+  const borderSize = getVariableByName('cardCTA/border/size', modes);
+  const borderColor = getVariableByName('cardCTA/border/color', modes);
+  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes);
+  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes);
+  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes);
+  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes);
+  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes);
+  const titleColor = getVariableByName('cardCTA/title/color', modes);
+  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes);
+  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes);
+  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes);
+  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d';
-  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 10;
-  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 12;
-  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400;
+  const bodyColor = getVariableByName('cardCTA/body/color', modes);
+  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes);
+  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes);
+  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes);
+  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes);
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
   const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16);
@@ -77,6 +94,33 @@ function CardCTA({
   const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16);
   const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0);
   const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12);
+
+  // Sip variant footer text block (Headline / Description / Subtitle). These
+  // `ccCard/*` tokens were introduced for the Sip layout — resolve them
+  // optionally so older token snapshots that lack them fall back gracefully.
+  const sipFooterGap = getOptionalVariableByName('ccCard/footer/textWrap/gap', modes, 4);
+  const sipHeadlineColor = getOptionalVariableByName('ccCard/headline/color', modes, '#707275');
+  const sipHeadlineFontFamily = getOptionalVariableByName('ccCard/headline/fontFamily', modes, 'JioType Var');
+  const sipHeadlineFontSize = getOptionalVariableByName('ccCard/headline/fontSize', modes, 10);
+  const sipHeadlineLineHeight = getOptionalVariableByName('ccCard/headline/lineHeight', modes, 13);
+  const sipHeadlineFontWeightRaw = getOptionalVariableByName('ccCard/headline/fontWeight', modes, 500);
+  const sipHeadlineFontWeight = typeof sipHeadlineFontWeightRaw === 'number' ? sipHeadlineFontWeightRaw.toString() : sipHeadlineFontWeightRaw;
+  const sipDescriptionColor = getOptionalVariableByName('ccCard/title/color', modes, '#081007');
+  const sipDescriptionFontFamily = getOptionalVariableByName('ccCard/title/fontFamily', modes, 'JioType Var');
+  const sipDescriptionFontSize = getOptionalVariableByName('ccCard/title/fontSize', modes, 14);
+  const sipDescriptionLineHeight = getOptionalVariableByName('ccCard/title/lineHeight', modes, 15);
+  const sipDescriptionFontWeightRaw = getOptionalVariableByName('ccCard/title/fontWeight', modes, 700);
+  const sipDescriptionFontWeight = typeof sipDescriptionFontWeightRaw === 'number' ? sipDescriptionFontWeightRaw.toString() : sipDescriptionFontWeightRaw;
+  const sipSubtitleColor = getOptionalVariableByName('ccCard/subtitle/color', modes, '#707275');
+  const sipSubtitleFontFamily = getOptionalVariableByName('ccCard/subtitle/fontFamily', modes, 'JioType Var');
+  const sipSubtitleFontSize = getOptionalVariableByName('ccCard/subtitle/fontSize', modes, 10);
+  const sipSubtitleLineHeight = getOptionalVariableByName('ccCard/subtitle/lineHeight', modes, 13);
+  const sipSubtitleFontWeightRaw = getOptionalVariableByName('ccCard/subtitle/fontWeight', modes, 500);
+  const sipSubtitleFontWeight = typeof sipSubtitleFontWeightRaw === 'number' ? sipSubtitleFontWeightRaw.toString() : sipSubtitleFontWeightRaw;
+  const avatarModes = {
+    ...modes,
+    'Avatar Size': 'L'
+  };
   const buttonModes = {
     ...modes,
     AppearanceBrand: 'Secondary',
@@ -91,27 +135,74 @@ function CardCTA({
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState(null);
-  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20;
+  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes);
   const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1;
-  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
-  const handleButtonLabelTextLayout = React.useCallback(event => {
-    const lines = event?.nativeEvent?.lines;
-    if (!Array.isArray(lines) || lines.length === 0) return;
-    const nextWidth = Math.ceil(lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0));
-    if (nextWidth <= 0) return;
-    setMeasuredButtonLabelWidth(currentWidth => {
-      if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
-        return currentWidth;
-      }
-      return nextWidth;
-    });
+  // Small safety pad so sub-pixel rounding between the measure pass and the
+  // rendered glyph run can never clip the final character.
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2 + 2);
+
+  // ROOT-CAUSE FIX for the Android "jumping button" feedback loop + clipping.
+  //
+  // Previously the *visible* label measured itself via `onTextLayout` and we
+  // fed that width straight back onto the same Button. Because the button is
+  // width-constrained by its parent, Android clamps the overflowing text and
+  // even character-breaks a single word ("Save" -> "Sav"/"e"); the re-applied
+  // width re-triggers layout, producing an endless ~60fps width oscillation.
+  //
+  // We now measure an *off-screen* copy of the label, laid out at an
+  // effectively unbounded width, so its reported single-line width is
+  // intrinsic and constant regardless of the button's applied width — the
+  // measurement can no longer depend on the value it produces, so the loop is
+  // impossible. Crucially the measurer reuses the Button's own resolved label
+  // styles (passed into `renderContent`), so the measured font matches the
+  // rendered font exactly and the width is never an under-estimate. The label
+  // is always a single line that overflows rather than wraps or truncates.
+  const handleMeasureTextLayout = React.useCallback(event => {
+    const line = event?.nativeEvent?.lines?.[0];
+    const width = line && typeof line.width === 'number' ? line.width : 0;
+    if (width <= 0) return;
+    setMeasuredButtonLabelWidth(currentWidth => currentWidth !== null && Math.abs(currentWidth - width) < 0.5 ? currentWidth : Math.ceil(width));
   }, []);
+
+  // Off-screen measurer wrapper: absolute + opacity 0 + pointerEvents none =>
+  // out of flow, invisible, never intercepts touches, zero layout impact.
+  const measurerWrapStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    opacity: 0
+  };
+
+  // Renders the visible single-line label (never wraps, never ellipsizes) plus
+  // the co-located off-screen measurer that shares the Button's exact label
+  // styles. `width: 9999` forces the measurer onto one line so `onTextLayout`
+  // reports the true intrinsic width.
+  const renderButtonContent = labelExtraStyle => labelStyles => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "clip",
+      style: [labelStyles, labelExtraStyle],
+      children: nonWrappingButtonLabel
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: measurerWrapStyle,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [labelStyles, {
+          width: 9999
+        }],
+        onTextLayout: handleMeasureTextLayout,
+        children: nonWrappingButtonLabel
+      })
+    })]
+  });
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: isRating ? 'column' : 'row',
+    flexDirection: isRating || isSip ? 'column' : 'row',
     overflow: 'visible'
   };
 
@@ -197,6 +288,47 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const sipWrapStyle = {
+    width: '100%',
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    overflow: 'visible'
+  };
+  const sipFooterTextWrapStyle = {
+    gap: sipFooterGap,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    minWidth: 0
+  };
+  const sipDescriptionWrapStyle = {
+    flexDirection: 'row',
+    gap: sipFooterGap,
+    alignItems: 'flex-end'
+  };
+  const sipHeadlineStyle = {
+    color: sipHeadlineColor,
+    fontFamily: sipHeadlineFontFamily,
+    fontSize: sipHeadlineFontSize,
+    lineHeight: sipHeadlineLineHeight,
+    fontWeight: toWeight(sipHeadlineFontWeightRaw)
+  };
+  const sipDescriptionStyle = {
+    color: sipDescriptionColor,
+    fontFamily: sipDescriptionFontFamily,
+    fontSize: sipDescriptionFontSize,
+    lineHeight: sipDescriptionLineHeight,
+    fontWeight: toWeight(sipDescriptionFontWeightRaw)
+  };
+  const sipSubtitleStyle = {
+    color: sipSubtitleColor,
+    fontFamily: sipSubtitleFontFamily,
+    fontSize: sipSubtitleFontSize,
+    lineHeight: sipSubtitleLineHeight,
+    fontWeight: toWeight(sipSubtitleFontWeightRaw)
+  };
   const ratingContentStyle = {
     paddingHorizontal: ratingContentPaddingH,
     paddingVertical: ratingContentPaddingV,
@@ -243,6 +375,52 @@ function CardCTA({
     flexShrink: 0,
     flexWrap: 'nowrap'
   };
+  if (isSip) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [containerStyle, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: sipWrapStyle,
+        children: [avatarSlot ? cloneChildrenWithModes(avatarSlot, avatarModes) : /*#__PURE__*/_jsx(Avatar, {
+          style: "Image",
+          imageSource: avatarSource,
+          modes: avatarModes
+        }), /*#__PURE__*/_jsxs(View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: sipFooterTextWrapStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: sipHeadlineStyle,
+            children: headline
+          }), /*#__PURE__*/_jsxs(View, {
+            style: sipDescriptionWrapStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: sipDescriptionStyle,
+              children: description
+            }), /*#__PURE__*/_jsx(Text, {
+              style: sipSubtitleStyle,
+              children: subtitle
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: buttonWrapStyle,
+          children: buttonSlot ? cloneChildrenWithModes(buttonSlot, buttonModes) : /*#__PURE__*/_jsx(Button, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: buttonStyle,
+            renderContent: renderButtonContent(buttonLabelStyle)
+          })
+        })]
+      })
+    });
+  }
   if (isRating) {
     return /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
@@ -270,11 +448,7 @@ function CardCTA({
             onPress: onPressButton || (() => {}),
             modes: buttonModes,
             style: ratingButtonStyle,
-            renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
-              onTextLayout: handleButtonLabelTextLayout,
-              style: [labelStyles, ratingButtonLabelStyle],
-              children: nonWrappingButtonLabel
-            })
+            renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
         }), showRatingActions ? ratingActionsSlot ? cloneChildrenWithModes(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/_jsxs(ButtonGroup, {
           modes: iconButtonModes,
@@ -315,11 +489,7 @@ function CardCTA({
           onPress: onPressButton || (() => {}),
           modes: buttonModes,
           style: buttonStyle,
-          renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
-            onTextLayout: handleButtonLabelTextLayout,
-            style: [labelStyles, buttonLabelStyle],
-            children: nonWrappingButtonLabel
-          })
+          renderContent: renderButtonContent(buttonLabelStyle)
         })
       })]
     }), /*#__PURE__*/_jsx(View, {