jfs-components 0.0.70 → 0.0.72

package/CHANGELOG.md

@@ -4,6 +4,55 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.72] - 2026-05-04
+
+High-level summary (one line per point):
+
+- **`RadioButton` renamed to `Radio`** — naming aligned with the rest of the library; the old `RadioButton` import is preserved as a deprecated alias so consumer code keeps working without changes.
+- **`Carousel` pagination is now fully token-driven** — dot size, active width, and active/inactive colors come from design tokens (`carousel/pagination/indicator/{size,activeWidth,activeColor,inactiveColor}`) instead of hardcoded values, with token names normalized to camelCase.
+- **`Carousel` outer container height is now controlled by a token** — new `carousel/maxHeight` token enforces the Figma-aligned max height of the carousel viewport.
+- **`HoldingsCard` migrated to `Radio`** — internal-only swap, no API change for consumers.
+
+### Changed
+
+- `Carousel.Pagination` now reads `carousel/pagination/indicator/size`, `carousel/pagination/indicator/activeWidth`, `carousel/pagination/indicator/activeColor`, and `carousel/pagination/indicator/inactiveColor` from design tokens. Previous lowercase names (`activecolor`, `inactivecolor`) and hardcoded dot dimensions (6×6 / 16×6) are replaced.
+- `Carousel` outer container respects a new `carousel/maxHeight` token (defaults to `280`) applied as `maxHeight` on the outer view.
+- `HoldingsCard` now imports the new `Radio` component instead of `RadioButton` (no behavioral change).
+
+### Added
+
+- New `Radio` component (`src/components/Radio/Radio.tsx`) with its own stories and MDX docs. Exported from the package barrel as `Radio` / `RadioProps`.
+
+### Deprecated
+
+- `RadioButton` is deprecated. It is kept as a thin re-export of `Radio` for backward compatibility and will be removed in a future major release. Migrate to `import { Radio } from 'jfs-components'`.
+
+---
+
+## [0.0.71] - 2026-05-04
+
+### Added
+
+- **`CardAdvisory`** — new card component with stories and MDX docs.
+- **`CardFinancialCondition`** — new card component with stories and MDX docs.
+- **`CircularProgressBar`** — new circular progress component with stories and MDX docs.
+- **`CircularProgressBarDoted`** — new dotted variant of the circular progress component with stories and MDX docs.
+- **`CircularRating`** — new circular rating display component with stories and MDX docs.
+- **`Gauge`** — new gauge component with stories and MDX docs.
+- **`InstitutionBadge`** — new institution badge component with stories and MDX docs.
+- All new components are exported from the package barrel with their public types.
+
+### Changed
+
+- **`Nudge`** — significant rewrite (props, layout, and token usage refreshed); story file simplified.
+- **`CardCTA`** — expanded API and visual variants; story coverage extended.
+- **`MediaCard`** — minor doc/story refresh; no breaking changes.
+- **`ListGroup`** — small adjustments to internal layout; no API change.
+- Refreshed component token metadata and the icon registry; updated `Coin Variables` design-token JSON.
+- Storybook plumbing: added `.storybook/storybook-test-mock.js` and registered it in `.storybook/main.js` to stabilize Storybook test runs.
+
+---
+
 ## [0.0.70] - 2026-04-23
 
 ### Fixed

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
+var _CircularProgressBar = _interopRequireDefault(require("../CircularProgressBar/CircularProgressBar"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+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 toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveCardAdvisoryTokens(modes) {
+  const width = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/width', modes), 360);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/gap', modes), 16);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 0);
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/radius', modes), 0);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/background', modes) || '#ffffff';
+  const mainContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/mainContent/gap', modes), 16);
+  const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/content/gap', modes), 6);
+  const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/header/gap', modes), 8);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontSize', modes), 26);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/lineHeight', modes), 26);
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontWeight', modes), '900');
+  const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontSize', modes), 12);
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/lineHeight', modes), 16);
+  const descriptionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      overflow: 'hidden',
+      paddingHorizontal,
+      paddingVertical,
+      width
+    },
+    mainContentStyle: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      gap: mainContentGap,
+      width: '100%'
+    },
+    contentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: contentGap,
+      minWidth: 1
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%'
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+      marginBottom: -titleDescenderAllowance,
+      paddingBottom: titleDescenderAllowance
+    },
+    descriptionStyle: {
+      color: descriptionColor,
+      fontFamily: descriptionFontFamily,
+      fontSize: descriptionFontSize,
+      fontWeight: descriptionFontWeight,
+      lineHeight: descriptionLineHeight,
+      width: '100%'
+    },
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconSize: toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/size', modes), 18)
+  };
+}
+function CardAdvisory({
+  title = 'Spending',
+  description = 'Track your spending habits and stay within your budget.',
+  value = 70,
+  valueLabel,
+  showInfoIcon = true,
+  showNudge = true,
+  nudgeBody = 'Data confidence is low, add more accounts for better insights.',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  titleEndSlot,
+  progressSlot,
+  nudgeSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  mainContentStyle,
+  titleStyle,
+  descriptionStyle,
+  progressStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveCardAdvisoryTokens(modes), [modes]);
+  const processedTitleEndSlot = (0, _react.useMemo)(() => {
+    if (!titleEndSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(titleEndSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [titleEndSlot, modes]);
+  const processedProgressSlot = (0, _react.useMemo)(() => {
+    if (!progressSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(progressSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [progressSlot, modes]);
+  const processedNudgeSlot = (0, _react.useMemo)(() => {
+    if (!nudgeSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(nudgeSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [nudgeSlot, modes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${description}. ${Math.round(value)} out of 100. ${nudgeBody}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [tokens.mainContentStyle, mainContentStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: tokens.contentStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: tokens.headerStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: [tokens.titleStyle, titleStyle],
+            children: title
+          }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "ic_info",
+            size: tokens.iconSize,
+            color: tokens.iconColor,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no"
+          }) : null)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.descriptionStyle, descriptionStyle],
+          children: description
+        })]
+      }), processedProgressSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBar.default, {
+        state: "Active",
+        value: value,
+        modes: modes,
+        style: progressStyle,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+      type: "inline-compact",
+      body: nudgeBody,
+      buttonLabel: nudgeButtonLabel,
+      modes: modes,
+      style: [{
+        width: '100%'
+      }, nudgeStyle],
+      ...(onPressNudgeButton ? {
+        onPressButton: onPressNudgeButton
+      } : {})
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CardAdvisory);

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

@@ -11,17 +11,39 @@ var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 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 _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const optionalTokenAvailability = new Map();
+function getOptionalVariableByName(name, modes, fallback) {
+  let isAvailable = optionalTokenAvailability.get(name);
+  if (isAvailable === undefined) {
+    isAvailable = (0, _figmaVariablesResolver.findVariablesByPattern)(name).some(variable => variable.name === name);
+    optionalTokenAvailability.set(name, isAvailable);
+  }
+  if (!isAvailable) {
+    return fallback;
+  }
+  return (0, _figmaVariablesResolver.getVariableByName)(name, modes) ?? fallback;
+}
 function CardCTA({
+  type = 'cta',
   title = 'If you have 1 line',
   body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
   iconName = 'ic_upi_number',
-  buttonLabel = 'Button',
+  buttonLabel,
   onPressButton,
+  ratingLabel = '+28 Rating',
+  showRatingActions = true,
+  onPressLike,
+  onPressDislike,
   modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
+  ratingBadgeSlot,
+  ratingActionsSlot,
   style
 }) {
   const {
@@ -31,6 +53,7 @@ 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;
@@ -53,13 +76,48 @@ function CardCTA({
   const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
   const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
   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);
+  const ratingContentPaddingV = getOptionalVariableByName('cardCTA/rating/content/padding/vertical', modes, 12);
+  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);
+  const buttonModes = {
+    ...modes,
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S'
+  };
+  const iconButtonModes = {
+    'Button / Size': 'S',
+    'Emphasis': 'Low',
+    'AppearanceBrand': 'Neutral',
+    ...modes
+  };
+  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 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;
+    });
+  }, []);
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: 'row',
-    overflow: 'hidden'
+    flexDirection: isRating ? 'column' : 'row',
+    overflow: 'visible'
   };
 
   // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -76,7 +134,9 @@ function CardCTA({
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    overflow: 'visible',
+    zIndex: 1
   };
 
   // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
@@ -105,6 +165,29 @@ function CardCTA({
     alignSelf: 'stretch',
     minWidth: 0
   };
+
+  // Keep text shrink/wrap behavior on the left column, but let the CTA keep
+  // its own intrinsic width. On native, Yoga otherwise measures the Button
+  // with the left column's available width and the single-line label
+  // truncates even when the Button itself has no width/maxWidth constraint.
+  const buttonWrapStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    zIndex: 1
+  };
+  const buttonStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    ...(measuredButtonWidth !== undefined ? {
+      width: measuredButtonWidth
+    } : {})
+  };
   const titleStyle = {
     color: titleColor,
     fontFamily: titleFontFamily,
@@ -119,6 +202,104 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const ratingContentStyle = {
+    paddingHorizontal: ratingContentPaddingH,
+    paddingVertical: ratingContentPaddingV,
+    gap: ratingContentGap,
+    alignItems: 'flex-start'
+  };
+  const ratingFooterStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingHorizontal: ratingFooterPaddingH,
+    paddingTop: ratingFooterPaddingTop,
+    paddingBottom: ratingFooterPaddingBottom,
+    overflow: 'visible'
+  };
+  const buttonLabelStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexWrap: 'nowrap'
+  };
+
+  // Keep the rating CTA on an overflow-visible, non-shrinking path. The
+  // footer's row width stays fixed by the card, but Yoga must not use that
+  // width to shrink or clip the button label.
+  const ratingButtonWrapStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    alignItems: 'flex-start',
+    overflow: 'visible'
+  };
+  const ratingButtonStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    ...(measuredButtonWidth !== undefined ? {
+      width: measuredButtonWidth
+    } : {})
+  };
+  const ratingButtonLabelStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexWrap: 'nowrap'
+  };
+  if (isRating) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: ratingContentStyle,
+        children: [ratingBadgeSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingBadgeSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          label: ratingLabel,
+          modes: modes
+        }), /*#__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: ratingFooterStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: ratingButtonWrapStyle,
+          children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: ratingButtonStyle,
+            renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              onTextLayout: handleButtonLabelTextLayout,
+              style: [labelStyles, ratingButtonLabelStyle],
+              children: nonWrappingButtonLabel
+            })
+          })
+        }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+          modes: iconButtonModes,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            iconName: "ic_like",
+            accessibilityLabel: "Like",
+            ...(onPressLike ? {
+              onPress: onPressLike
+            } : {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            iconName: "ic_dislike",
+            accessibilityLabel: "Dislike",
+            ...(onPressDislike ? {
+              onPress: onPressDislike
+            } : {})
+          })]
+        }) : null]
+      })]
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -132,18 +313,19 @@ function CardCTA({
           style: bodyStyle,
           children: body
         })]
-      }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, {
-        ...modes,
-        AppearanceBrand: 'Secondary',
-        'Button / Size': 'S'
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        label: buttonLabel,
-        onPress: onPressButton || (() => {}),
-        modes: {
-          ...modes,
-          AppearanceBrand: 'Secondary',
-          'Button / Size': 'S'
-        }
+      }), /*#__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: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            onTextLayout: handleButtonLabelTextLayout,
+            style: [labelStyles, buttonLabelStyle],
+            children: nonWrappingButtonLabel
+          })
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: rightWrapStyle,