jfs-components 0.1.12 → 0.1.17

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,

package/lib/module/components/DonutChart/DonutChart.js

@@ -164,17 +164,17 @@ function DonutChart({
   const hasChildrenSlot = customCenterChildren.length > 0;
   const showValueLabel = !hasChildrenSlot && shouldRenderText(value);
   const showLabel = !hasChildrenSlot && shouldRenderText(label);
-  const valueColor = getVariableByName('donutChart/value/color', modes) ?? getVariableByName('value/fg', modes) ?? '#000000';
-  const valueFontFamily = getVariableByName('donutChart/value/fontFamily', modes) ?? getVariableByName('value/fontFamily', modes) ?? 'JioType Var';
-  const valueFontSize = toNumber(getVariableByName('donutChart/value/fontSize', modes) ?? getVariableByName('value/fontSize', modes), 29);
-  const valueLineHeight = toNumber(getVariableByName('donutChart/value/lineHeight', modes) ?? getVariableByName('value/lineHeight', modes), 29);
-  const valueFontWeight = toFontWeight(getVariableByName('donutChart/value/fontWeight', modes) ?? getVariableByName('value/fontWeight', modes), '900');
-  const labelColor = getVariableByName('donutChart/label/color', modes) ?? getVariableByName('label/fg', modes) ?? '#000000';
-  const labelFontFamily = getVariableByName('donutChart/label/fontFamily', modes) ?? getVariableByName('label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = toNumber(getVariableByName('donutChart/label/fontSize', modes) ?? getVariableByName('label/fontSize', modes), 12);
-  const labelLineHeight = toNumber(getVariableByName('donutChart/label/lineHeight', modes) ?? getVariableByName('label/lineHeight', modes), 15.6);
-  const labelFontWeight = toFontWeight(getVariableByName('donutChart/label/fontWeight', modes) ?? getVariableByName('label/fontWeight', modes), '400');
-  const textWrapGap = toNumber(getVariableByName('donutChart/textWrap/gap', modes) ?? getVariableByName('textWrap/gap', modes), 7);
+  const valueColor = getVariableByName('value/fg', modes);
+  const valueFontFamily = getVariableByName('value/fontFamily', modes);
+  const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29);
+  const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29);
+  const valueFontWeight = toFontWeight(getVariableByName('value/fontWeight', modes), '900');
+  const labelColor = getVariableByName('label/fg', modes);
+  const labelFontFamily = getVariableByName('label/fontFamily', modes);
+  const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12);
+  const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight(getVariableByName('label/fontWeight', modes), '400');
+  const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7);
   const containerStyle = {
     alignItems: 'center',
     height: size,

package/lib/module/components/Drawer/Drawer.js

@@ -6,6 +6,7 @@ import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handl
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import Overlay from '../Overlay/Overlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
@@ -303,28 +304,29 @@ function DrawerInner({
   });
 
   // Design Tokens
-  const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('drawer/radius/top', modes) || 12;
+  const backgroundColor = getVariableByName('drawer/background', modes);
+  const radius = getVariableByName('drawer/radius/top', modes);
 
   // Handle
-  const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3';
-  const handleWidth = getVariableByName('drawer/handlebar/width', modes) || 42;
-  const handleHeight = getVariableByName('drawer/handlebar/height', modes) || 6;
-  const handleRadius = getVariableByName('drawer/handlebar/radius', modes) || 999;
+  const handleColor = getVariableByName('drawer/handlebar/background', modes);
+  const handleWidth = getVariableByName('drawer/handlebar/width', modes);
+  const handleHeight = getVariableByName('drawer/handlebar/height', modes);
+  const handleRadius = getVariableByName('drawer/handlebar/radius', modes);
 
   // Padding
-  const paddingLeft = getVariableByName('drawer/padding/left', modes) || 8;
-  const paddingRight = getVariableByName('drawer/padding/right', modes) || 8;
-  const paddingBottom = getVariableByName('drawer/padding/bottom', modes) || 10;
-  const drawerGap = getVariableByName('drawer/gap', modes) || 8;
-  // Note: drawer/padding/top is 0 in tokens, but we keep the 8px visual spacing for the handle as requested.
+  const paddingLeft = getVariableByName('drawer/padding/left', modes);
+  const paddingRight = getVariableByName('drawer/padding/right', modes);
+  const paddingBottom = getVariableByName('drawer/padding/bottom', modes);
+  const drawerGap = getVariableByName('drawer/gap', modes);
 
   // Title
-  const titleColor = getVariableByName('drawer/title/color', modes) || '#0d0d0f';
-  const titleSize = getVariableByName('drawer/title/fontSize', modes) || 14;
-  const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700';
-  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17;
-  const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8;
+  const titleColor = getVariableByName('drawer/title/color', modes);
+  const titleSize = getVariableByName('drawer/title/fontSize', modes);
+  const titleWeight = getVariableByName('drawer/title/fontWeight', modes);
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes);
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes);
 
   // Drop shadow — Figma layers two shadows (primary + secondary) sharing
   // the same offsetY/blur but with their own offsetX and color.
@@ -335,26 +337,12 @@ function DrawerInner({
   const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
   const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
 
-  // Cross-platform shadow style. Web supports stacking two shadows via
-  // boxShadow. iOS only supports a single native shadow per view, so we
-  // apply the more prominent (primary) one. Android uses elevation.
-  const shadowStyle = Platform.select({
-    web: {
-      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
-    },
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: {
-        width: shadowPrimaryOffsetX,
-        height: shadowPrimaryOffsetY
-      },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2
-    },
-    android: {
-      elevation: 16
-    },
-    default: {}
+  // Cross-platform shadow via the unified helper. Figma layers two shadows
+  // (secondary + primary) which stack natively as a single multi-layer
+  // boxShadow on web + RN 0.76+. On older RN the helper falls back to the most
+  // prominent layer (iOS shadow*) / a fixed elevation (Android).
+  const shadowStyle = boxShadow(`${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`, {
+    elevation: 16
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return (
@@ -399,30 +387,42 @@ function DrawerInner({
               borderTopRightRadius: radius,
               paddingLeft,
               paddingRight,
-              paddingBottom,
-              rowGap: drawerGap
+              paddingBottom
             }],
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.handleArea, !title && !header && {
-                paddingBottom: 0
-              }],
-              children: /*#__PURE__*/_jsx(View, {
-                style: [{
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                }]
-              })
-            }), header, title && /*#__PURE__*/_jsx(Text, {
-              style: [{
-                color: titleColor,
-                fontSize: titleSize,
-                fontWeight: titleWeight,
-                lineHeight: titleLineHeight,
-                marginBottom: titlePaddingBottom
-              }],
-              children: title
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                marginBottom: drawerGap
+              },
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.handleArea, !title && !header && {
+                  marginBottom: drawerGap
+                }],
+                children: /*#__PURE__*/_jsx(View, {
+                  style: [{
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  }]
+                })
+              }), header, title && /*#__PURE__*/_jsx(View, {
+                style: {
+                  paddingTop: titleWrapPaddingTop,
+                  paddingBottom: titleWrapPaddingBottom,
+                  paddingHorizontal: titleWrapPaddingHorizontal,
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [{
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight,
+                    lineHeight: titleLineHeight,
+                    textAlign: 'center'
+                  }],
+                  children: title
+                })
+              })]
             }), /*#__PURE__*/_jsx(AnimatedScrollView, {
               ref: scrollRef,
               style: [styles.content, contentStyle],
@@ -474,7 +474,7 @@ const styles = StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
+    marginTop: 8,
     width: '100%'
   },
   content: {