jfs-components 0.1.12 → 0.1.18

package/lib/commonjs/components/ChipSelect/ChipSelect.js

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

package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js

@@ -82,13 +82,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, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes) || '#ebebed');
-  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes) || '#25ab21');
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes) || '#666666';
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes));
+  const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes));
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes);
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/size', modes), 24);
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes) || '#0d0d0f';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes);
   const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontSize', modes), 18);
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes) || 'JioType Var';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes);
   const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/lineHeight', modes), 21);
   const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontWeight', modes), '700');
   const supportFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontSize', modes), 11);

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

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

package/lib/commonjs/components/CircularRating/CircularRating.js

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

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -146,24 +146,24 @@ function CompareTable({
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
   // --- table header tokens --------------------------------------------------
-  const headerBg = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/background/color', modes) ?? '#f5f5f5';
-  const headerLabelColor = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/color', modes) ?? '#000000';
-  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontsize', modes) ?? 14;
-  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
-  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontweight', modes) ?? 600;
-  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/horizontal', modes) ?? 12;
-  const headerPaddingV = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/vertical', modes) ?? 12;
+  const headerBg = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = (0, _figmaVariablesResolver.getVariableByName)('tableHeader/padding/vertical', modes) ?? 12;
 
   // --- table cell tokens ----------------------------------------------------
-  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/color', modes) ?? '#eeeeee';
-  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/size', modes) ?? 1;
-  const cellBg = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/background/color', modes) ?? '#ffffff';
-  const cellLabelColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/color', modes) ?? '#000000';
-  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontsize', modes) ?? 14;
-  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
-  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontweight', modes) ?? 400;
-  const cellPaddingH = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/horizontal', modes) ?? 12;
-  const cellPaddingV = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/vertical', modes) ?? 12;
+  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('tableCell/border/size', modes) ?? 1;
+  const cellBg = (0, _figmaVariablesResolver.getVariableByName)('tableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('tableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = (0, _figmaVariablesResolver.getVariableByName)('tableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = (0, _figmaVariablesResolver.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/commonjs/components/DebitCard/DebitCard.js

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

package/lib/commonjs/components/Disclaimer/Disclaimer.js

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

package/lib/commonjs/components/DonutChart/DonutChart.js

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

package/lib/commonjs/components/Drawer/Drawer.js

@@ -10,6 +10,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _Overlay = _interopRequireDefault(require("../Overlay/Overlay"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -309,28 +310,29 @@ function DrawerInner({
   });
 
   // Design Tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius/top', modes) || 12;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('drawer/radius/top', modes);
 
   // Handle
-  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/background', modes) || '#e0e0e3';
-  const handleWidth = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/width', modes) || 42;
-  const handleHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/height', modes) || 6;
-  const handleRadius = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/radius', modes) || 999;
+  const handleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/background', modes);
+  const handleWidth = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/width', modes);
+  const handleHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/height', modes);
+  const handleRadius = (0, _figmaVariablesResolver.getVariableByName)('drawer/handlebar/radius', modes);
 
   // Padding
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/left', modes) || 8;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/right', modes) || 8;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/bottom', modes) || 10;
-  const drawerGap = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/right', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/padding/bottom', modes);
+  const drawerGap = (0, _figmaVariablesResolver.getVariableByName)('drawer/gap', modes);
 
   // Title
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes) || '#0d0d0f';
-  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes) || 14;
-  const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) || '700';
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) || 17;
-  const titlePaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes) || 8;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes);
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes);
+  const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes);
+  const titleWrapPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = (0, _figmaVariablesResolver.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.
@@ -341,26 +343,12 @@ function DrawerInner({
   const shadowSecondaryOffsetX = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/offsetX', modes) ?? 0;
   const shadowSecondaryColor = (0, _figmaVariablesResolver.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 = _reactNative.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 = (0, _shadow.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 (
@@ -405,30 +393,42 @@ function DrawerInner({
               borderTopRightRadius: radius,
               paddingLeft,
               paddingRight,
-              paddingBottom,
-              rowGap: drawerGap
+              paddingBottom
             }],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.handleArea, !title && !header && {
-                paddingBottom: 0
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [{
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                }]
-              })
-            }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [{
-                color: titleColor,
-                fontSize: titleSize,
-                fontWeight: titleWeight,
-                lineHeight: titleLineHeight,
-                marginBottom: titlePaddingBottom
-              }],
-              children: title
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                marginBottom: drawerGap
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.handleArea, !title && !header && {
+                  marginBottom: drawerGap
+                }],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: [{
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  }]
+                })
+              }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: {
+                  paddingTop: titleWrapPaddingTop,
+                  paddingBottom: titleWrapPaddingBottom,
+                  paddingHorizontal: titleWrapPaddingHorizontal,
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [{
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight,
+                    lineHeight: titleLineHeight,
+                    textAlign: 'center'
+                  }],
+                  children: title
+                })
+              })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedScrollView, {
               ref: scrollRef,
               style: [styles.content, contentStyle],
@@ -480,7 +480,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
+    marginTop: 8,
     width: '100%'
   },
   content: {

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -11,6 +11,7 @@ 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 _shadow = require("../../utils/shadow");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,17 +30,17 @@ function useDropdownItemTokens(modes) {
     const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Idle'
-    }) || '#ffffff';
+    });
     const selectedBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Selected'
-    }) || '#f5f5f5';
-    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10) || 16;
-    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes) || '400';
-    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10) || 19;
-    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10) || 8;
+    });
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes);
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes);
+    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10);
+    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes);
+    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10);
+    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10);
     const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/horizontal', modes), 10) || 12;
     const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/vertical', modes), 10) || 12;
     return {
@@ -173,12 +174,12 @@ function Dropdown({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10) || 8;
-  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes) || '#ffffff';
-  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
-  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
-  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
-  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes);
+  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes);
+  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10);
+  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10);
+  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10);
 
   // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
   // On native, clipping a view also clips its shadow (iOS clips the layer
@@ -187,18 +188,16 @@ function Dropdown({
   // get cut off. The rounded-corner clipping is moved to a separate inner
   // view below.
   //
-  // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
-  // single source of truth so the designed color/offset/blur are honored on
-  // iOS, Android AND web. We intentionally do NOT also set the legacy
-  // `shadow*` / `elevation` props: on the new architecture (and web) those
-  // are translated into a box-shadow internally, so combining them with an
-  // explicit `boxShadow` would stack two shadows. Android's legacy
-  // `elevation` is also undesirable here because it ignores the shadow color
-  // and only paints a generic gray shadow.
+  // The unified `boxShadow` helper is the single source of truth so the
+  // designed color/offset/blur are honored on iOS, Android AND web. On RN
+  // 0.76+ / web it emits the spec `boxShadow` prop; on older RN it translates
+  // to the legacy `shadow*` (iOS) / `elevation` (Android) API. We intentionally
+  // do NOT also set the legacy props manually on the supported path: those
+  // would stack a second shadow.
   const shadowStyle = {
     backgroundColor: background,
     borderRadius: radius,
-    boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`
+    ...(0, _shadow.boxShadow)(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`)
   };
 
   // Inner view carries the rounded corners + clipping so list/scroll content

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -34,8 +34,8 @@ const IS_WEB = _reactNative.Platform.OS === 'web';
 
 function useChevronTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('input/iconSize', modes), 10) || 32;
-    const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes) || '#0f0d0a';
+    const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('input/iconSize', modes), 10);
+    const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes);
     return {
       iconSize,
       iconColor
@@ -52,22 +52,22 @@ function toNumber(value, fallback) {
 }
 function useFormFieldTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#000000';
-    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes);
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes);
     const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes);
     const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
     const inputPaddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
     const inputRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 8);
-    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
+    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes);
     const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
-    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes);
+    const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes);
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes);
+    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes);
     // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
     // fractional value — parseInt was truncating it to 1, leaving the
     // resolved row height ~1px shorter than the Figma reference.

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -38,26 +38,26 @@ function EmptyState({
   };
 
   // Container Tokens
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/gap', modes) || 24;
-  const padding = (0, _figmaVariablesResolver.getVariableByName)('emptyState/padding', modes) || 4;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('emptyState/radius', modes) || 16;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/gap', modes);
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('emptyState/padding', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('emptyState/radius', modes);
 
   // Content Wrap Tokens
-  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/content/gap', modes) || 16;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('emptyState/content/gap', modes);
 
   // Title Tokens
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/color', modes) || '#0d0d0f';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontSize', modes) || 16;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontFamily', modes) || 'System';
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/lineHeight', modes) || 18;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontWeight', modes) || 700;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/color', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontSize', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontFamily', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/lineHeight', modes);
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/title/fontWeight', modes);
 
   // Body Tokens
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/color', modes) || '#1a1c1f';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontSize', modes) || 12;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontFamily', modes) || 'System';
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/lineHeight', modes) || 16;
-  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontWeight', modes) || 400;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/color', modes);
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontSize', modes);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontFamily', modes);
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/lineHeight', modes);
+  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('emptyState/body/fontWeight', modes);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',