jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -14,9 +14,18 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Badge = _interopRequireDefault(require("../Badge/Badge"));
 var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
 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) {
@@ -39,11 +48,16 @@ function CardCTA({
   showRatingActions = true,
   onPressLike,
   onPressDislike,
+  headline = 'Headline',
+  description = 'Description',
+  subtitle = 'Subtitle',
+  avatarSource,
   modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
   ratingBadgeSlot,
   ratingActionsSlot,
+  avatarSlot,
   style
 }) {
   const {
@@ -53,28 +67,31 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
-  const isRating = type === 'rating';
-  const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes) || '#e3e4e4';
-  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes) || 16;
-  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes) || 22;
-  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes) || 16;
-  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes) || 16;
-  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes) || 22;
-  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes) || 6;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 17.6;
-  const titleFontWeightRaw = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes);
+  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes);
+  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes);
+  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes);
+  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes);
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 10;
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
-  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes);
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes);
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes);
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.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);
@@ -82,6 +99,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',
@@ -96,27 +140,74 @@ function CardCTA({
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = _react.default.useState(null);
-  const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes) || 20;
+  const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes);
   const buttonBorderSize = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', buttonModes) ?? 1;
-  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
-  const handleButtonLabelTextLayout = _react.default.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.default.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "clip",
+      style: [labelStyles, labelExtraStyle],
+      children: nonWrappingButtonLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: measurerWrapStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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'
   };
 
@@ -202,6 +293,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,
@@ -248,6 +380,52 @@ function CardCTA({
     flexShrink: 0,
     flexWrap: 'nowrap'
   };
+  if (isSip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: sipWrapStyle,
+        children: [avatarSlot ? (0, _reactUtils.cloneChildrenWithModes)(avatarSlot, avatarModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          style: "Image",
+          imageSource: avatarSource,
+          modes: avatarModes
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: sipFooterTextWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: sipHeadlineStyle,
+            children: headline
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: sipDescriptionWrapStyle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipDescriptionStyle,
+              children: description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipSubtitleStyle,
+              children: subtitle
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: buttonWrapStyle,
+          children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: buttonStyle,
+            renderContent: renderButtonContent(buttonLabelStyle)
+          })
+        })]
+      })
+    });
+  }
   if (isRating) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
@@ -275,11 +453,7 @@ function CardCTA({
             onPress: onPressButton || (() => {}),
             modes: buttonModes,
             style: ratingButtonStyle,
-            renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              onTextLayout: handleButtonLabelTextLayout,
-              style: [labelStyles, ratingButtonLabelStyle],
-              children: nonWrappingButtonLabel
-            })
+            renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
         }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
           modes: iconButtonModes,
@@ -320,11 +494,7 @@ function CardCTA({
           onPress: onPressButton || (() => {}),
           modes: buttonModes,
           style: buttonStyle,
-          renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            onTextLayout: handleButtonLabelTextLayout,
-            style: [labelStyles, buttonLabelStyle],
-            children: nonWrappingButtonLabel
-          })
+          renderContent: renderButtonContent(buttonLabelStyle)
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -38,11 +38,11 @@ function CardFeedback({
     ...propModes
   };
   // Container Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes) || '#dbf0d9';
-  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes) || '12');
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/gap', modes) || '8');
-  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/horizontal', modes) || '12');
-  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/vertical', modes) || '12');
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes);
+  const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes));
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/gap', modes));
+  const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/horizontal', modes));
+  const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/padding/vertical', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,
@@ -81,7 +81,7 @@ function Icon({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes) || '20');
+  const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes));
   // Color for the icon itself
   const color = (0, _figmaVariablesResolver.getVariableByName)('appearanceFeedback/cardFeedback/icon/color', modes);
   console.log(color);
@@ -127,7 +127,7 @@ function Content({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes) || '8');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes));
 
   // Pass modes to children (Title, Body, etc.)
   const childrenWithModes = _react.default.Children.map(children, child => {
@@ -161,11 +161,11 @@ function Title({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/color', modes) || '#0f0d0a';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontSize', modes) || '14');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/lineHeight', modes) || '17');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontWeight', modes) || '500';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -190,11 +190,11 @@ function Body({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/color', modes) || '#1f1a14';
-  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontSize', modes) || '12');
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/lineHeight', modes) || '16');
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontWeight', modes) || '400';
+  const color = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/color', modes);
+  const fontSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontFamily', modes);
+  const lineHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/lineHeight', modes));
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/body/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -219,7 +219,7 @@ function Action({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes) || '0');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes));
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = _react.default.Children.map(children, child => {

package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js

@@ -36,26 +36,26 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 function resolveCardFinancialConditionTokens(modes) {
-  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes) || '#ffffff';
+  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes);
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/radius', modes), 16);
   const paddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/horizontal', modes), 16);
   const paddingV = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/vertical', modes), 16);
   const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/gap', modes), 8);
   const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/header/gap', modes), 16);
   const textContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/textContent/gap', modes), 8);
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/color', modes);
   const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontSize', modes), 16);
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes);
   const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/lineHeight', modes), 18);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontWeight', modes), '700');
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/color', modes);
   const bodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontSize', modes), 14);
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes);
   const bodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/lineHeight', modes), 17);
   const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontWeight', modes), '400');
-  const nudgeBodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes);
   const nudgeBodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes), 12);
-  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes);
   const nudgeBodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes), 16);
   const nudgeBodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
   return {

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -36,12 +36,13 @@ function CardInsight({
   style
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 16;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 12;
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/borderWidth', modes) ?? 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/border/color', modes) ?? '#ffffff';
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/horizontal', modes) ?? 12;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/vertical', modes) ?? 16;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/gap', modes) ?? 12;
   const contentGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/contentGap', modes) ?? 8;
-  const width = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/width', modes) ?? 356;
   const slotBackground = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/slot/background', modes) ?? '#ffffff';
   const headerGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/header/gap', modes) ?? 8;
   const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/text/gap', modes) ?? 4;
@@ -71,6 +72,7 @@ function CardInsight({
   const renderSlot = () => {
     if (!children) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SavingsGoalSummary.default, {
+        label: "Credit usage",
         modes: modes
       });
     }
@@ -106,9 +108,10 @@ function CardInsight({
   const showDivider = footerNode !== null && divider !== false && divider !== null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
-      width,
       backgroundColor: background,
       borderRadius: radius,
+      borderWidth,
+      borderColor,
       paddingHorizontal,
       paddingVertical,
       gap,

package/lib/commonjs/components/Carousel/Carousel.js

@@ -43,16 +43,18 @@ function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
   onIndexChange,
   style
 }) {
   // ---- Token resolution ----
-  const tokenGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/gap', modes) || '12');
+  const tokenGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
-  const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes) || '0');
-  const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes) || '0');
+  const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes));
+  const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes) || '280');
+  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes));
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -163,12 +165,16 @@ function Carousel({
   }), [modes, activeIndex, totalItems, goTo, goNext, goPrev]);
 
   // ---- Render ----
+  // Explicit padding props win verbatim; otherwise fall back to the
+  // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
+  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH;
+  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV;
   const outerStyle = {
-    paddingVertical: containerPaddingV,
+    paddingVertical: effectivePaddingV,
     maxHeight
   };
   const contentContainerStyle = {
-    paddingHorizontal: containerPaddingH * 2,
+    paddingHorizontal: effectivePaddingH,
     gap,
     // Align items to the start so snap works correctly
     alignItems: 'flex-start'
@@ -274,12 +280,12 @@ function Pagination({
 
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
-  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/size', modes) || '6');
-  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeWidth', modes) || '16');
-  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes) || '4');
-  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
-  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes) || '9999');
+  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/size', modes));
+  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeWidth', modes));
+  const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes));
+  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactiveColor', modes);
+  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeColor', modes);
+  const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes));
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/commonjs/components/CarouselCardAccounts/CarouselCardAccounts.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Carousel = _interopRequireDefault(require("../Carousel/Carousel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+const DEFAULT_ITEM_WIDTH = 125;
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+/**
+ * `CarouselCardAccounts` — a horizontally scrollable strip of compact
+ * `AccountCard`s (the Figma "Carousel / Card Accounts" component).
+ *
+ * It is a thin, opinionated preset over the shared {@link Carousel} scroll
+ * engine — so the snap/scroll/modes-cascade behaviour is **not** duplicated.
+ * Its niche is the account-selection strip: fixed-width card slots, flush
+ * (no peek) padding, per-card snapping, and no pagination by default.
+ *
+ * The cards are a real slot: pass any number of `AccountCard` children
+ * (typically a list of `connected` cards followed by a single `add` card).
+ *
+ * @example
+ * <CarouselCardAccounts modes={modes}>
+ *   <AccountCard title="Personal account" subtitle="**** 5651" imageSource={art} />
+ *   <AccountCard title="Salary account" subtitle="**** 1180" imageSource={art} />
+ *   <AccountCard state="add" title="Add a card" onPress={openLinkFlow} />
+ * </CarouselCardAccounts>
+ */
+function CarouselCardAccounts({
+  children,
+  modes = _reactUtils.EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style
+}) {
+  const gap = gapProp ?? toNumber((0, _figmaVariablesResolver.getVariableByName)('carouselCardAccounts/gap', modes), 8);
+
+  // Outer-container padding is driven by the design's own tokens
+  // (`carouselCardAccounts/padding/*`) rather than the generic `carousel/*`
+  // padding, matching the Figma "Carousel / Card Accounts" frame.
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('carouselCardAccounts/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('carouselCardAccounts/padding/vertical', modes), 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
+    modes: modes,
+    itemWidth: itemWidth,
+    gap: gap,
+    showPagination: showPagination,
+    loop: loop,
+    autoPlay: false,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    ...(onIndexChange ? {
+      onIndexChange
+    } : {}),
+    style: style,
+    children: children
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CarouselCardAccounts);