jfs-components 0.1.8 → 0.1.17

package/lib/commonjs/components/MessageField/MessageField.js

@@ -50,13 +50,13 @@ function firstError(error) {
 function useMessageFieldTokens(modes) {
   return (0, _react.useMemo)(() => {
     const wrapperGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/gap', modes), 8);
-    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/foreground', modes) || '#000000';
-    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/foreground', modes);
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontFamily', modes);
     const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/label/fontWeight', modes), '500');
-    const textareaBackground = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/background', modes) || '#ffffff';
-    const textareaBorderColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/color', modes) || '#b5b6b7';
+    const textareaBackground = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/background', modes);
+    const textareaBorderColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/color', modes);
     const textareaBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/border/size', modes), 1.5);
     const textareaRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/radius', modes), 8);
     const textareaPadding = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/textarea/padding', modes), 12);
@@ -69,13 +69,13 @@ function useMessageFieldTokens(modes) {
     // the `FormField States` cascade once typed-state tokens land. We
     // never re-route this through another token (e.g. the counter
     // color) because that conflates two semantically distinct tokens.
-    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/foreground', modes) || '#707275';
-    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontFamily', modes) || 'JioType Var';
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/foreground', modes);
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontFamily', modes);
     const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontSize', modes), 16);
     const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/text/lineHeight', modes), 21);
     const inputFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/text/fontWeight', modes), '400');
-    const counterColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/foreground', modes) || '#24262b';
-    const counterFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontFamily', modes) || 'JioType Var';
+    const counterColor = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/foreground', modes);
+    const counterFontFamily = (0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontFamily', modes);
     const counterFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontSize', modes), 14);
     const counterLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/lineHeight', modes), 18);
     const counterFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('messageField/maxLength/fontWeight', modes), '400');

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -27,7 +27,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -92,7 +93,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -92,14 +92,14 @@ function MoneyValue({
   }, [value, negative, hidden]);
 
   // Resolve typography and layout tokens from Figma
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes) || '#0f0d0a';
-  const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes) || 14;
-  const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes) || 18;
-  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes) || 14;
-  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes) || 18;
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes) || 500;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes);
+  const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes);
+  const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes);
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes);
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes);
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes) || 'System';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/gap', modes) ?? 4;
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes

package/lib/commonjs/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -81,7 +81,8 @@ function CalendarGlyph({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,7 +127,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -188,7 +189,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -245,6 +247,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -23,14 +23,14 @@ const touchTargetStyle = {
   justifyContent: 'center'
 };
 function resolveNavArrowTokens(modes) {
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
-  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
-  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
-  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
-  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
-  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
-  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes);
+  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes));
+  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes));
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes));
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes);
+  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes));
+  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes));
+  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes));
   return {
     iconColor,
     iconWidth,

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -30,19 +30,19 @@ const NoteInput = /*#__PURE__*/(0, _react.forwardRef)(function NoteInput({
   const inputRef = (0, _react.useRef)(null);
 
   // Resolve tokens from Figma Design
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('noteInput/foreground', modes) || '#0d0d0f';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontSize', modes) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontFamily', modes) || 'JioType Var';
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('noteInput/lineHeight', modes) || 16;
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontWeight', modes) || 700;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('noteInput/foreground', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontSize', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontFamily', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('noteInput/lineHeight', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('noteInput/gap', modes) || 0; // 4 in some files, 0 in context
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/horizontal', modes) || 17;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/vertical', modes) || 9;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('noteInput/radius', modes) || 999;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/size', modes) || 1;
-  const background = (0, _figmaVariablesResolver.getVariableByName)('noteInput/background', modes) || '#ebebed';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/color', modes) || 'rgba(255,255,255,0)';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('noteInput/gap', modes); // 4 in some files, 0 in context
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/vertical', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('noteInput/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/size', modes);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('noteInput/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/color', modes);
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',

package/lib/commonjs/components/Nudge/Nudge.js

@@ -20,25 +20,25 @@ function toFontWeight(value, fallback) {
   return fallback;
 }
 function resolveNudgeTokens(modes) {
-  const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes) || 12;
-  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes) || 12;
-  const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes) || 12;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes) || 6;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes) || '#0d0d0f';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes) || 14;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes) || 'System';
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes) || 15;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes);
+  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes);
+  const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontWeight', modes), '700');
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes) || 12;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'System';
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes) || 16;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes);
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes);
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes);
   const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
-  const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes) || 4;
-  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes) || 8;
-  const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes) || 20;
-  const startSlotGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/startSlot/gap', modes) || 4;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes);
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes);
+  const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes);
+  const startSlotGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/startSlot/gap', modes);
   return {
     containerBaseStyle: {
       backgroundColor: background,
@@ -96,7 +96,7 @@ function resolveNudgeTokens(modes) {
       width: '100%'
     },
     detailSlotStyle: {
-      gap: (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 8,
+      gap: (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes),
       width: '100%'
     },
     titleTextStyle: {
@@ -113,8 +113,8 @@ function resolveNudgeTokens(modes) {
       lineHeight: bodyLineHeight,
       fontWeight: bodyFontWeight
     },
-    iconColor: (0, _figmaVariablesResolver.getVariableByName)('appearance/nudge/icon/color', modes) || '#5d00b5',
-    iconSize: (0, _figmaVariablesResolver.getVariableByName)('nudge/icon/size', modes) || 20,
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('appearance/nudge/icon/color', modes),
+    iconSize: (0, _figmaVariablesResolver.getVariableByName)('nudge/icon/size', modes),
     startSlotGap: startSlotGap
   };
 }

package/lib/commonjs/components/OTP/OTP.js

@@ -327,18 +327,18 @@ function OTP({
   }, [isDisabled]);
 
   // --- Token resolution (state-independent tokens resolved once) ---
-  const otpGap = Number((0, _figmaVariablesResolver.getVariableByName)('otp/gap', modes)) || 36;
-  const otpPaddingH = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/horizontal', modes)) || 8;
-  const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes)) || 8;
-  const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes)) || 48;
-  const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes)) || 8;
-  const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes) || '#000000';
-  const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes)) || 24;
-  const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes) || 'JioType Var';
-  const digitLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/lineHeight', modes)) || 29;
-  const digitFontWeight = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontWeight', modes) || '500';
-  const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes)) || 2;
-  const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes)) || 1;
+  const otpGap = Number((0, _figmaVariablesResolver.getVariableByName)('otp/gap', modes));
+  const otpPaddingH = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/horizontal', modes));
+  const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes));
+  const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes));
+  const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes));
+  const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes);
+  const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes));
+  const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes);
+  const digitLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/lineHeight', modes));
+  const digitFontWeight = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontWeight', modes);
+  const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes));
+  const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes));
 
   // --- Resolve the three underline colors ONCE per render. We then
   // animate between idle ↔ active per-slot using interpolation; the
@@ -346,15 +346,15 @@ function OTP({
   const idleUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Idle'
-  }) || '#303338', [modes]);
+  }), [modes]);
   const activeUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Active'
-  }) || '#5d00b5', [modes]);
+  }), [modes]);
   const errorUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Error'
-  }) || '#d92d20', [modes]);
+  }), [modes]);
 
   // --- Per-slot underline highlight animations ---
   //

package/lib/commonjs/components/PageHero/PageHero.js

@@ -64,31 +64,31 @@ function PageHero({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes)) || 0;
-  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
 
   // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
   // Tokens fall back to 117 when not defined in the variables collection,
   // so the layout stays stable on consumers that haven't tokenized this yet.
-  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || 117;
-  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || 117;
-  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff';
-  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System';
-  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18;
-  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes) || 700;
-  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)) || 20;
-  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes) || '#ffffff';
-  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes) || 'System';
-  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)) || 29;
-  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes) || 900;
-  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)) || 29;
+  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
+  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes);
+  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes);
+  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes));
+  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes);
+  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes));
+  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes);
+  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes);
+  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes));
+  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes);
+  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes));
 
   // Only `lineHeight` is tokenized for the supporting text in the Figma source.
   // Color, font size and weight are inline literals in the design (12px medium
   // white) — we mirror that here so the visual stays faithful when no token
   // exists.
-  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)) || 16;
+  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

@@ -30,29 +30,29 @@ function PaymentFeedback({
     ...globalModes,
     ...propModes
   };
-  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/container/gap', modes)) || 46;
-  const messageGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/message/gap', modes)) || 12;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontSize', modes)) || 36;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontFamily', modes) || 'JioType Var';
-  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/lineHeight', modes)) || 36;
-  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontWeight', modes) || '900';
-  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/color', modes) || '#24262b';
-  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontSize', modes)) || 16;
-  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontFamily', modes) || 'JioType Var';
-  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/lineHeight', modes)) || 19;
-  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontWeight', modes) || '500';
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/color', modes) || '#24262b';
-  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontSize', modes)) || 14;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontFamily', modes) || 'JioType Var';
-  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/lineHeight', modes)) || 17;
-  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontWeight', modes) || '500';
-  const detailsColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/color', modes) || '#24262b';
-  const detailsFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontSize', modes)) || 14;
-  const detailsFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontFamily', modes) || 'JioType Var';
-  const detailsLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/lineHeight', modes)) || 17;
-  const detailsFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontWeight', modes) || '500';
-  const detailsParagraphSpacing = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/paragraphSpacing', modes)) || 4;
+  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/container/gap', modes));
+  const messageGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/message/gap', modes));
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/color', modes);
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontSize', modes));
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontFamily', modes);
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/lineHeight', modes));
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontWeight', modes);
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/color', modes);
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontSize', modes));
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontFamily', modes);
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/lineHeight', modes));
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontWeight', modes);
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/color', modes);
+  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontSize', modes));
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontFamily', modes);
+  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/lineHeight', modes));
+  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontWeight', modes);
+  const detailsColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/color', modes);
+  const detailsFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontSize', modes));
+  const detailsFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontFamily', modes);
+  const detailsLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/lineHeight', modes));
+  const detailsFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontWeight', modes);
+  const detailsParagraphSpacing = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/paragraphSpacing', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/commonjs/components/Popup/Popup.js

@@ -89,7 +89,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(function Popup({
     });
     return () => anim.stop();
   }, [isOpen, modalVisible, slideY, backdropAnim, maxBackdropOpacity, animationDuration]);
-  const background = (0, _figmaVariablesResolver.getVariableByName)('popup/background', modes) || '#ffffff';
+  const background = (0, _figmaVariablesResolver.getVariableByName)('popup/background', modes);
   const paddingH = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/horizontal', modes) ?? 0;
   const paddingTopVal = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/top', modes) ?? 0;
   const paddingBottomVal = (0, _figmaVariablesResolver.getVariableByName)('popup/padding/bottom', modes) ?? 24;

package/lib/commonjs/components/PoweredByLabel/PoweredByLabel.js

@@ -62,7 +62,8 @@ function PoweredByLabel({
   style,
   textStyle,
   imageStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -127,7 +128,7 @@ function PoweredByLabel({
       style: [labelTextStyle, textStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     }), renderImage()]
   });