jfs-components 0.1.12 → 0.1.18

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

@@ -66,27 +66,27 @@ function CardCTA({
   const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
   const isRating = normalizedType === 'rating';
   const isSip = normalizedType === 'sip';
-  const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
-  const radius = getVariableByName('cardCTA/radius', modes) || 12;
-  const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
-  const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4';
-  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16;
-  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22;
-  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16;
-  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16;
-  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22;
-  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6;
-  const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10';
-  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var';
-  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18;
-  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700;
+  const background = getVariableByName('cardCTA/background', modes);
+  const radius = getVariableByName('cardCTA/radius', modes);
+  const borderSize = getVariableByName('cardCTA/border/size', modes);
+  const borderColor = getVariableByName('cardCTA/border/color', modes);
+  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes);
+  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes);
+  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes);
+  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes);
+  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes);
+  const titleColor = getVariableByName('cardCTA/title/color', modes);
+  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes);
+  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes);
+  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes);
+  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d';
-  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14;
-  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17;
-  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400;
+  const bodyColor = getVariableByName('cardCTA/body/color', modes);
+  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes);
+  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes);
+  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes);
+  const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes);
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
   const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16);
@@ -135,7 +135,7 @@ function CardCTA({
   const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
   const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState(null);
-  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20;
+  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes);
   const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1;
   // Small safety pad so sub-pixel rounding between the measure pass and the
   // rendered glyph run can never clip the final character.

package/lib/module/components/CardFeedback/CardFeedback.js

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

package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js

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

package/lib/module/components/CardInsight/CardInsight.js

@@ -38,7 +38,6 @@ function CardInsight({
   const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
   const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
   const contentGap = getVariableByName('cardInsight/contentGap', modes) ?? 8;
-  const width = getVariableByName('cardInsight/width', modes) ?? 356;
   const slotBackground = getVariableByName('cardInsight/slot/background', modes) ?? '#ffffff';
   const headerGap = getVariableByName('cardInsight/header/gap', modes) ?? 8;
   const textGap = getVariableByName('cardInsight/text/gap', modes) ?? 4;
@@ -68,6 +67,7 @@ function CardInsight({
   const renderSlot = () => {
     if (!children) {
       return /*#__PURE__*/_jsx(SavingsGoalSummary, {
+        label: "Credit usage",
         modes: modes
       });
     }
@@ -103,7 +103,6 @@ function CardInsight({
   const showDivider = footerNode !== null && divider !== false && divider !== null;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
-      width,
       backgroundColor: background,
       borderRadius: radius,
       borderWidth,

package/lib/module/components/Carousel/Carousel.js

@@ -35,16 +35,18 @@ export function Carousel({
   loop = true,
   gap: gapProp,
   itemWidth: itemWidthProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
   onIndexChange,
   style
 }) {
   // ---- Token resolution ----
-  const tokenGap = parseFloat(getVariableByName('carousel/gap', modes) || '12');
+  const tokenGap = parseFloat(getVariableByName('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
-  const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes) || '0');
-  const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes) || '0');
+  const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes));
+  const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
-  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes) || '280');
+  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes));
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -155,12 +157,16 @@ export 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'
@@ -266,12 +272,12 @@ export function Pagination({
 
   // Token resolution for dots — matches Figma tokens
   // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
-  const dotSize = parseFloat(getVariableByName('carousel/pagination/indicator/size', modes) || '6');
-  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16');
-  const dotGap = parseFloat(getVariableByName('carousel/pagination/gap', modes) || '4');
-  const dotColor = getVariableByName('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
-  const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes) || '9999');
+  const dotSize = parseFloat(getVariableByName('carousel/pagination/indicator/size', modes));
+  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/indicator/activeWidth', modes));
+  const dotGap = parseFloat(getVariableByName('carousel/pagination/gap', modes));
+  const dotColor = getVariableByName('carousel/pagination/indicator/inactiveColor', modes);
+  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activeColor', modes);
+  const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes));
   const containerStyle = {
     flexDirection: 'row',
     justifyContent: 'center',

package/lib/module/components/CarouselCardAccounts/CarouselCardAccounts.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import React from 'react';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Carousel from '../Carousel/Carousel';
+
+// Figma reference width for a single Account Card slot (`Carousel / Card Accounts`).
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = EMPTY_MODES,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap: gapProp,
+  showPagination = false,
+  loop = false,
+  onIndexChange,
+  style
+}) {
+  const gap = gapProp ?? toNumber(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(getVariableByName('carouselCardAccounts/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber(getVariableByName('carouselCardAccounts/padding/vertical', modes), 0);
+  return /*#__PURE__*/_jsx(Carousel, {
+    modes: modes,
+    itemWidth: itemWidth,
+    gap: gap,
+    showPagination: showPagination,
+    loop: loop,
+    autoPlay: false,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    ...(onIndexChange ? {
+      onIndexChange
+    } : {}),
+    style: style,
+    children: children
+  });
+}
+export default /*#__PURE__*/React.memo(CarouselCardAccounts);

package/lib/module/components/Checkbox/Checkbox.js

@@ -5,6 +5,7 @@ import { Pressable, Platform, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
@@ -97,7 +98,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
   } = useFocusVisible();
   const size = getVariableByName('checkbox/size', modes) ?? 18;
   const radius = getVariableByName('checkbox/radius', modes) ?? 4;
-  const strokeWidth = getVariableByName('strokeWidth', modes) ?? 1;
+  const strokeWidth = 1;
   const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666';
   const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)';
   const hoverStroke = getVariableByName('checkbox/hover/stroke/color', modes) ?? '#666666';
@@ -223,12 +224,4 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
     })
   });
 });
-function boxShadow(value) {
-  if (Platform.OS === 'web') {
-    return {
-      boxShadow: value
-    };
-  }
-  return {};
-}
 export default Checkbox;

package/lib/module/components/ChipGroup/ChipGroup.js

@@ -16,7 +16,7 @@ function ChipGroup({
   testID
 }) {
   // --- Token Resolution ---
-  const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+  const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10);
 
   // --- Styles ---
   const containerStyle = {

package/lib/module/components/ChipSelect/ChipSelect.js

@@ -27,23 +27,23 @@ function ChipSelect({
   };
 
   // --- Token Resolution ---
-  const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
-  const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-  const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-  const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+  const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10);
+  const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10);
+  const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10);
+  const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10);
 
   // Background
-  const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+  const backgroundColor = getVariableByName('chipSelect/background', resolvedModes);
 
   // Text Styles
-  const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-  const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
-  const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-  const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
-  const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+  const textColor = getVariableByName('chipSelect/foreground', resolvedModes);
+  const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10);
+  const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes);
+  const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10);
+  const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes);
 
   // Icon Styles
-  const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+  const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10);
 
   // --- Styles ---
   const containerStyle = {

package/lib/module/components/CircularProgressBar/CircularProgressBar.js

@@ -76,13 +76,13 @@ function CircularProgressBar({
   const radius = Math.max(0, (size - strokeWidth) / 2);
   const center = size / 2;
   const circumference = 2 * Math.PI * radius;
-  const trackColor = getStrokeColor(trackStyle, getVariableByName('circularProgressBar/track/color', trackModes) || '#ebebed');
-  const progressColor = getStrokeColor(progressStyle, getVariableByName('circularProgressBar/progress/color', modes) || '#25ab21');
-  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) || '#666666';
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('circularProgressBar/track/color', trackModes));
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('circularProgressBar/progress/color', modes));
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes);
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24);
-  const foreground = getVariableByName('circularProgressBar/foreground', modes) || '#0d0d0f';
+  const foreground = getVariableByName('circularProgressBar/foreground', modes);
   const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18);
-  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) || 'JioType Var';
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes);
   const lineHeight = toNumber(getVariableByName('circularProgressBar/value/lineHeight', modes), 21);
   const fontWeight = toFontWeight(getVariableByName('circularProgressBar/value/fontWeight', modes), '700');
   const supportFontSize = toNumber(getVariableByName('circularProgressBar/supportText/fontSize', modes), 11);

package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -75,26 +75,26 @@ function CircularProgressBarDoted({
   const outerDotSize = dotSize;
   const ringSize = layoutSize;
   const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);
-  const trackDotColor = getBackgroundColor(trackDotStyle, getVariableByName('circularProgressBarDoted/trackDot/bg', modes) || '#ebebed');
-  const progressDotColor = getBackgroundColor(progressDotStyle, getVariableByName('circularProgressBarDoted/progressDot/bg', modes) || '#25ab21');
+  const trackDotColor = getBackgroundColor(trackDotStyle, getVariableByName('circularProgressBarDoted/trackDot/bg', modes));
+  const progressDotColor = getBackgroundColor(progressDotStyle, getVariableByName('circularProgressBarDoted/progressDot/bg', modes));
   const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12);
   const scoreTierGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/gap', modes), 6);
   const scoreTierWidth = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/width', modes), 116);
   const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2);
   const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24);
-  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) || 'JioType Var';
-  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) || '#080d1a';
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes);
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes);
   const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12);
   const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400');
-  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) || '#080d1a';
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes);
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
-  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) || 'JioType Var';
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes);
   const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
   const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900');
-  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) || '#080d1a';
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes);
   const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16);
   const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700');
-  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) || '#303338';
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes);
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24);
   const dots = useMemo(() => Array.from({
     length: resolvedDotCount

package/lib/module/components/CircularRating/CircularRating.js

@@ -33,9 +33,9 @@ function resolveCircularRatingTokens(modes) {
   const padding = toNumber(getVariableByName('circularRating/padding', modes), 10);
   const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4);
   const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16);
-  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f';
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes);
   const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12);
-  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var';
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes);
   const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16);
   const footerTextFontWeight = toFontWeight(getVariableByName('circularRating/footer/text/fontWeight', modes), '400');
   return {
@@ -65,7 +65,7 @@ function resolveCircularRatingTokens(modes) {
       lineHeight: footerTextLineHeight,
       textAlign: 'center'
     },
-    footerIconColor: getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f',
+    footerIconColor: getVariableByName('circularRating/footer/icon/color', modes),
     footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16)
   };
 }

package/lib/module/components/CompareTable/CompareTable.js

@@ -141,24 +141,24 @@ function CompareTable({
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
   // --- table header tokens --------------------------------------------------
-  const headerBg = getVariableByName('comparetableHeader/background/color', modes) ?? '#f5f5f5';
-  const headerLabelColor = getVariableByName('comparetableHeader/label/color', modes) ?? '#000000';
-  const headerFontSize = getVariableByName('comparetableHeader/label/fontsize', modes) ?? 14;
-  const headerFontFamily = getVariableByName('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
-  const headerFontWeight = getVariableByName('comparetableHeader/label/fontweight', modes) ?? 600;
-  const headerPaddingH = getVariableByName('comparetableHeader/padding/horizontal', modes) ?? 12;
-  const headerPaddingV = getVariableByName('comparetableHeader/padding/vertical', modes) ?? 12;
+  const headerBg = getVariableByName('tableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = getVariableByName('tableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = getVariableByName('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = getVariableByName('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = getVariableByName('tableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = getVariableByName('tableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = getVariableByName('tableHeader/padding/vertical', modes) ?? 12;
 
   // --- table cell tokens ----------------------------------------------------
-  const cellBorderColor = getVariableByName('compareTableCell/border/color', modes) ?? '#eeeeee';
-  const cellBorderSize = getVariableByName('compareTableCell/border/size', modes) ?? 1;
-  const cellBg = getVariableByName('compareTableCell/background/color', modes) ?? '#ffffff';
-  const cellLabelColor = getVariableByName('compareTableCell/label/color', modes) ?? '#000000';
-  const cellFontSize = getVariableByName('compareTableCell/label/fontsize', modes) ?? 14;
-  const cellFontFamily = getVariableByName('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
-  const cellFontWeight = getVariableByName('compareTableCell/label/fontweight', modes) ?? 400;
-  const cellPaddingH = getVariableByName('compareTableCell/padding/horizontal', modes) ?? 12;
-  const cellPaddingV = getVariableByName('compareTableCell/padding/vertical', modes) ?? 12;
+  const cellBorderColor = getVariableByName('tableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = getVariableByName('tableCell/border/size', modes) ?? 1;
+  const cellBg = getVariableByName('tableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = getVariableByName('tableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = getVariableByName('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = getVariableByName('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = getVariableByName('tableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = getVariableByName('tableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = getVariableByName('tableCell/padding/vertical', modes) ?? 12;
   const columnCount = columns.length;
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
   /** Grid columns shared by the selection-card row and every table row. */

package/lib/module/components/DebitCard/DebitCard.js

@@ -26,24 +26,24 @@ function DebitCard({
     ...globalModes,
     ...propModes
   };
-  const background = getVariableByName('debitCard/background', modes) || '#cea15a';
-  const radius = getVariableByName('debitCard/radius', modes) || 16;
-  const width = getVariableByName('debitCard/width', modes) || 328;
-  const height = getVariableByName('debitCard/height', modes) || 224;
-  const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24;
-  const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20;
-  const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16;
-  const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28;
-  const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50;
-  const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4;
-  const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16;
-  const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20;
-  const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16;
-  const foreground = getVariableByName('debitCard/foreground', modes) || '#141414';
-  const fontSize = getVariableByName('debitCard/fontSize', modes) || 14;
-  const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var';
-  const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17;
-  const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes) || 500;
+  const background = getVariableByName('debitCard/background', modes);
+  const radius = getVariableByName('debitCard/radius', modes);
+  const width = getVariableByName('debitCard/width', modes);
+  const height = getVariableByName('debitCard/height', modes);
+  const paddingBottom = getVariableByName('debitCard/padding/bottom', modes);
+  const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes);
+  const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes);
+  const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes);
+  const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes);
+  const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes);
+  const footerGap = getVariableByName('debitCard/footer/gap', modes);
+  const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes);
+  const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes);
+  const foreground = getVariableByName('debitCard/foreground', modes);
+  const fontSize = getVariableByName('debitCard/fontSize', modes);
+  const fontFamily = getVariableByName('debitCard/fontFamily', modes);
+  const lineHeight = getVariableByName('debitCard/lineHeight', modes);
+  const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const containerStyle = {
     backgroundColor: background,

package/lib/module/components/Disclaimer/Disclaimer.js

@@ -44,11 +44,11 @@ function Disclaimer({
     ...propModes
   };
   // Resolve typography and color from Figma variables
-  const color = getVariableByName('disclaimer/color', modes) || '#24262b';
-  const fontSize = getVariableByName('disclaimer/label/fontSize', modes) || 10;
-  const lineHeight = getVariableByName('disclaimer/label/lineHeight', modes) || 12;
-  const fontFamily = getVariableByName('disclaimer/label/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('disclaimer/label/fontWeight', modes) || 500;
+  const color = getVariableByName('disclaimer/color', modes);
+  const fontSize = getVariableByName('disclaimer/label/fontSize', modes);
+  const lineHeight = getVariableByName('disclaimer/label/lineHeight', modes);
+  const fontFamily = getVariableByName('disclaimer/label/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('disclaimer/label/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const baseTextStyle = {
     color,