jfs-components 0.0.71 → 0.0.73

package/lib/commonjs/components/CardBankAccount/CardBankAccount.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _InstitutionBadge = _interopRequireDefault(require("../InstitutionBadge/InstitutionBadge"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_ITEMS = [{
+  label: 'Account type',
+  value: 'Korem ipsum'
+}, {
+  label: 'Account number',
+  value: 'Korem ipsum'
+}, {
+  label: 'Last updated',
+  value: 'Korem ipsum'
+}];
+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;
+};
+
+/**
+ * `CardBankAccount` renders a bank account summary card composed of:
+ *
+ * 1. A header with an `InstitutionBadge` (avatar + bank name) and an
+ *    optional trailing `Badge`.
+ * 2. A configurable list of label/value rows describing the account.
+ * 3. A footer `Button` for the primary action.
+ *
+ * All values resolve through the `bankAccountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CardBankAccountProps} props
+ */
+function CardBankAccount({
+  institutionName = 'State Bank of India',
+  institutionAvatar,
+  badge,
+  headerSlot,
+  items = DEFAULT_ITEMS,
+  children,
+  buttonLabel = 'Button',
+  onButtonPress,
+  footer,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/background', modes) ?? '#ffffff';
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/radius', modes), 16);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/padding/horizontal', modes), 12);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/padding/vertical', modes), 16);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/gap', modes), 16);
+  const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/header/gap', modes), 8);
+  const listGroupGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('listGroup/gap', modes), 12);
+  const rowGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('listItem/gap', modes), 8);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', modes) ?? '#0f0d0a';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', modes), 14);
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', modes), 16);
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontWeight', modes), '700');
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes), 14);
+  const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes), 20);
+  const valueLetterSpacing = toNumber((0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes), -0.5);
+  const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes), '500');
+  const labelStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    letterSpacing: valueLetterSpacing,
+    fontWeight: valueFontWeight
+  };
+  const renderBadge = () => {
+    if (badge === false || badge === null || badge === undefined) return null;
+    if (typeof badge === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderHeader = () => {
+    if (headerSlot !== undefined) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(headerSlot, modes);
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InstitutionBadge.default, {
+          label: institutionName,
+          ...(institutionAvatar !== undefined ? {
+            source: institutionAvatar
+          } : {}),
+          modes: modes
+        })
+      }), renderBadge()]
+    });
+  };
+  const renderItems = () => {
+    if (children !== undefined && children !== null) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+      if (processed.length === 0) return null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%',
+          gap: listGroupGap
+        },
+        children: processed.length === 1 ? processed[0] : processed
+      });
+    }
+    if (!items || items.length === 0) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%',
+        gap: listGroupGap
+      },
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: rowGap,
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: labelStyle,
+            children: item.label
+          })
+        }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: valueTextStyle,
+          numberOfLines: 1,
+          children: item.value
+        }) : (0, _reactUtils.cloneChildrenWithModes)(item.value, modes)]
+      }, `${item.label}-${index}`))
+    });
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        label: buttonLabel,
+        ...(onButtonPress ? {
+          onPress: onButtonPress
+        } : {}),
+        modes: modes,
+        style: {
+          width: '100%'
+        }
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(footer, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: accessibilityLabel ?? institutionName,
+    style: [{
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      alignItems: 'flex-start',
+      width: '100%'
+    }, style],
+    children: [renderHeader(), renderItems(), renderFooter()]
+  });
+}
+var _default = exports.default = CardBankAccount;

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

@@ -0,0 +1,213 @@
+"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 _reactUtils = require("../../utils/react-utils");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _CircularProgressBar = _interopRequireDefault(require("../CircularProgressBar/CircularProgressBar"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+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 resolveCardFinancialConditionTokens(modes) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes) || '#ffffff';
+  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 titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontSize', modes), 16);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  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 bodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontSize', modes), 14);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  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 nudgeBodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes), 12);
+  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes), 16);
+  const nudgeBodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%'
+    },
+    textContentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: textContentGap,
+      minWidth: 1
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight
+    },
+    bodyStyle: {
+      color: bodyColor,
+      fontFamily: bodyFontFamily,
+      fontSize: bodyFontSize,
+      fontWeight: bodyFontWeight,
+      lineHeight: bodyLineHeight
+    },
+    nudgeBodyStyle: {
+      color: nudgeBodyColor,
+      fontFamily: nudgeBodyFontFamily,
+      fontSize: nudgeBodyFontSize,
+      fontWeight: nudgeBodyFontWeight,
+      lineHeight: nudgeBodyLineHeight
+    },
+    buttonWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'flex-start'
+    }
+  };
+}
+function CardFinancialCondition({
+  title = 'Protection',
+  body = 'Check your coverage and gaps',
+  value = 0,
+  progressState = 'Inactive',
+  valueLabel,
+  showNudge = true,
+  nudgeBody = 'There may be gaps in your health or life cover\nAdd coverage to stay financially secure',
+  showDivider = true,
+  showButton = true,
+  buttonLabel = 'View Details',
+  onPressButton,
+  progressSlot,
+  nudgeSlot,
+  buttonSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  headerStyle,
+  titleStyle,
+  bodyStyle,
+  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)(() => resolveCardFinancialConditionTokens(modes), [modes]);
+
+  // Match Figma: the action button is the primary call-to-action and uses the
+  // Secondary brand (purple) regardless of the card's overall AppearanceBrand,
+  // while Nudge / CircularProgressBar still follow the user-supplied modes.
+  const buttonModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    AppearanceBrand: 'Secondary'
+  }), [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 processedButtonSlot = (0, _react.useMemo)(() => {
+    if (!buttonSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(buttonSlot), buttonModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [buttonSlot, buttonModes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${body}.`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [tokens.headerStyle, headerStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: tokens.textContentStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.titleStyle, titleStyle],
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.bodyStyle, bodyStyle],
+          children: body
+        })]
+      }), processedProgressSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBar.default, {
+        state: progressState,
+        value: value,
+        modes: modes,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+      type: "inline-compact",
+      modes: modes,
+      style: {
+        width: '100%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.nudgeBodyStyle,
+        children: nudgeBody
+      })
+    }) : null, showDivider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      modes: modes
+    }) : null, showButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.buttonWrapStyle,
+      children: processedButtonSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        label: buttonLabel,
+        modes: buttonModes,
+        ...(onPressButton ? {
+          onPress: onPressButton
+        } : {})
+      })
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CardFinancialCondition);

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

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _SavingsGoalSummary = _interopRequireDefault(require("../SavingsGoalSummary/SavingsGoalSummary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * `CardInsight` renders a single insight card composed of:
+ *
+ * 1. A header with a title, subtitle and a trailing `Badge`.
+ * 2. A flexible content slot — defaults to `SavingsGoalSummary`.
+ * 3. A `Divider` separating the slot from the footer.
+ * 4. A footer slot — defaults to an inline-compact `Nudge`.
+ *
+ * @component
+ * @param {CardInsightProps} props
+ */
+function CardInsight({
+  title = 'Emergency savings',
+  subtitle = 'One line explanation here.',
+  badge = 'Label',
+  children,
+  footer,
+  divider,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 16;
+  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;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontSize', modes) ?? 16;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/lineHeight', modes) ?? 17.6;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/color', modes) ?? '#0d0d0f';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/fontSize', modes) ?? 12;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/lineHeight', modes) ?? 15.6;
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/fontWeight', modes) ?? 400;
+  const bodyFontWeight = String(bodyFontWeightRaw);
+  const renderBadge = () => {
+    if (badge === false || badge === null || badge === undefined) return null;
+    if (typeof badge === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderSlot = () => {
+    if (!children) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SavingsGoalSummary.default, {
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+        type: "inline-compact",
+        modes: {
+          AppearanceBrand: 'Neutral',
+          Context: 'Nudge&Alert',
+          ...modes
+        }
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(footer, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderDivider = () => {
+    if (divider === false || divider === null) return null;
+    if (divider === undefined || divider === true) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(divider, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const footerNode = renderFooter();
+  const showDivider = footerNode !== null && divider !== false && divider !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      width,
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      overflow: 'hidden',
+      alignItems: 'stretch'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: textGap,
+          alignItems: 'flex-start'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: titleColor,
+            fontFamily: titleFontFamily,
+            fontSize: titleFontSize,
+            lineHeight: titleLineHeight,
+            fontWeight: titleFontWeight,
+            width: '100%'
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: bodyColor,
+            fontFamily: bodyFontFamily,
+            fontSize: bodyFontSize,
+            lineHeight: bodyLineHeight,
+            fontWeight: bodyFontWeight,
+            width: '100%'
+          },
+          children: subtitle
+        })]
+      }), renderBadge()]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%',
+        backgroundColor: slotBackground,
+        gap: contentGap,
+        overflow: 'hidden',
+        alignItems: 'stretch'
+      },
+      children: renderSlot()
+    }), showDivider ? renderDivider() : null, footerNode]
+  });
+}
+var _default = exports.default = CardInsight;

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

@@ -51,6 +51,8 @@ function Carousel({
   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');
+  // Outer container max height per Figma (`carousel/maxHeight`).
+  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes) || '280');
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -162,7 +164,8 @@ function Carousel({
 
   // ---- Render ----
   const outerStyle = {
-    paddingVertical: containerPaddingV
+    paddingVertical: containerPaddingV,
+    maxHeight
   };
   const contentContainerStyle = {
     paddingHorizontal: containerPaddingH * 2,
@@ -270,13 +273,12 @@ function Pagination({
   const modes = propModes || ctxModes || {};
 
   // Token resolution for dots — matches Figma tokens
-  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
-  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
-  const dotSize = 6;
-  const dotActiveWidth = 16;
+  // (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 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 containerStyle = {
     flexDirection: 'row',