jfs-components 0.1.8 → 0.1.17

package/lib/module/components/InputSearch/InputSearch.js

@@ -18,13 +18,13 @@ function SupportText({
   style
 }) {
   // Resolve variables
-  const gap = getVariableByName('supportText/gap', modes) || 4;
-  const foreground = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-  const iconSize = getVariableByName('supportText/icon/size', modes) || 16;
-  const fontSize = getVariableByName('supportText/fontSize', modes) || 12;
-  const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('supportText/fontWeight', modes) || 500;
-  const lineHeight = getVariableByName('supportText/lineHeight', modes) || 16;
+  const gap = getVariableByName('supportText/gap', modes);
+  const foreground = getVariableByName('supportText/foreground', modes);
+  const iconSize = getVariableByName('supportText/icon/size', modes);
+  const fontSize = getVariableByName('supportText/fontSize', modes);
+  const fontFamily = getVariableByName('supportText/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('supportText/fontWeight', modes);
+  const lineHeight = getVariableByName('supportText/lineHeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
@@ -71,7 +71,7 @@ const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
     ...modes,
     'InputState': isFocused ? 'Active' : 'Idle'
   };
-  const formFieldGap = getVariableByName('formField/gap', componentModes) || 8;
+  const formFieldGap = getVariableByName('formField/gap', componentModes);
 
   // If state is active (has text) and focused? Or just if it has text?
   // Design typically: Active state (focused) shows clear button if there is text.
@@ -97,7 +97,7 @@ const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
       children: /*#__PURE__*/_jsx(Icon, {
         name: "ic_close",
         size: 18,
-        color: getVariableByName('textInput/icon/color', componentModes) || '#24262b'
+        color: getVariableByName('textInput/icon/color', componentModes)
       })
     })]
   }) : null;

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default avatar asset (shared with the Avatar component) so that
@@ -32,9 +32,9 @@ const toFontWeight = (value, fallback) => {
 };
 function resolveInstitutionBadgeTokens(modes) {
   const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8);
-  const foreground = getVariableByName('institutionBadge/foreground', modes) || '#080d1a';
+  const foreground = getVariableByName('institutionBadge/foreground', modes);
   const fontSize = toNumber(getVariableByName('institutionBadge/fontSize', modes), 14);
-  const fontFamily = getVariableByName('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const fontFamily = getVariableByName('institutionBadge/fontFamily', modes);
   const lineHeight = toNumber(getVariableByName('institutionBadge/lineHeight', modes), 18);
   const fontWeight = toFontWeight(getVariableByName('institutionBadge/fontWeight', modes), '500');
 
@@ -44,7 +44,7 @@ function resolveInstitutionBadgeTokens(modes) {
   const avatarRadiusRaw = toNumber(getVariableByName('avatar/radius', modes), 9999);
   // 9999 is the design-token sentinel for "perfect circle".
   const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
-  const avatarBorderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderColor = getVariableByName('avatar/border/color', modes);
   const avatarBorderSize = toNumber(getVariableByName('avatar/border/size', modes), 1);
   return {
     containerStyle: {
@@ -82,6 +82,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -118,7 +119,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     })]
   });

package/lib/module/components/ListGroup/ListGroup.js

@@ -8,7 +8,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
@@ -43,22 +43,23 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
-  const backgroundColor = getVariableByName('listGroup/background', modes) || 'rgba(255,255,255,0)';
+  const backgroundColor = getVariableByName('listGroup/background', modes);
   // The current exported token aliases a missing Figma variable. Keep the
   // transparent fallback without logging the missing alias on every render.
   const borderColor = 'rgba(255,255,255,0)';
-  const borderWidth = getVariableByName('listGroup/borderWidth', modes) || 0;
-  const gap = getVariableByName('listGroup/gap', modes) || 12;
+  const borderWidth = getVariableByName('listGroup/borderWidth', modes);
+  const gap = getVariableByName('listGroup/gap', modes);
 
   // Resolve label typography tokens
-  const labelColor = getVariableByName('listGroup/label/color', modes) || '#24262b';
-  const labelFontSize = getVariableByName('listGroup/fontSize', modes) || 14;
-  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes) || 18;
-  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes) || 500;
+  const labelColor = getVariableByName('listGroup/label/color', modes);
+  const labelFontSize = getVariableByName('listGroup/fontSize', modes);
+  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes);
+  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes);
+  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
   const containerStyle = {
     backgroundColor,
@@ -95,7 +96,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/module/components/ListItem/ListItem.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
@@ -57,17 +57,17 @@ function resolveListItemTokens(modes) {
   const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
-  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a';
-  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14;
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16;
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System';
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700;
+  const titleColor = getVariableByName('listItem/title/color', textModes);
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes);
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes);
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes);
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes);
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14';
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12;
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14;
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System';
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500;
+  const supportColor = getVariableByName('listItem/supportText/color', textModes);
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes);
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes);
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes);
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes);
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   return {
     baseContainerStyle: {
@@ -185,6 +185,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes]);
@@ -239,7 +240,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/_jsx(Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -272,7 +273,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/_jsx(Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/_jsx(View, {

package/lib/module/components/LottieIntroBlock/LottieIntroBlock.js

@@ -51,26 +51,26 @@ function LottieIntroBlock({
   }), [globalModes, propModes]);
 
   // Container
-  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36;
-  const paddingHorizontal = Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16;
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('lottieIntroBlock/padding/vertical', modes));
 
   // Text wrap
-  const textWrapGap = Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16;
+  const textWrapGap = Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes));
 
   // Title
-  const titleColor = getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
-  const titleFontSize = Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23;
-  const titleFontFamily = getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System';
-  const titleLineHeight = Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23;
-  const titleFontWeight = getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900;
+  const titleColor = getVariableByName('lottieIntroBlock/title/foreground', modes);
+  const titleFontSize = Number(getVariableByName('lottieIntroBlock/title/fontSize', modes));
+  const titleFontFamily = getVariableByName('lottieIntroBlock/title/fontFamily', modes);
+  const titleLineHeight = Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes));
+  const titleFontWeight = getVariableByName('lottieIntroBlock/title/fontWeight', modes);
 
   // Support text
-  const supportColor = getVariableByName('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
-  const supportFontSize = Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) || 14;
-  const supportFontFamily = getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportColor = getVariableByName('lottieIntroBlock/supportText/foreground', modes);
+  const supportFontSize = Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes));
+  const supportFontFamily = getVariableByName('lottieIntroBlock/supportText/fontFamily', modes);
   const supportLineHeight = Number(getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
-  const supportFontWeight = getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const supportFontWeight = getVariableByName('lottieIntroBlock/supportText/fontWeight', modes);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/LottiePlayer/LottiePlayer.js

@@ -22,8 +22,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number(getVariableByName('media/width', modes));
+  const height = Number(getVariableByName('media/height', modes));
   return {
     width,
     height

package/lib/module/components/LottiePlayer/LottiePlayer.web.js

@@ -13,8 +13,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number(getVariableByName('media/width', modes));
+  const height = Number(getVariableByName('media/height', modes));
   return {
     width,
     height

package/lib/module/components/MediaCard/MediaCard.js

@@ -4,7 +4,7 @@ import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
-import GlassFill from './GlassFill';
+import GlassFill from '../../utils/GlassFill/GlassFill';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
@@ -34,7 +34,7 @@ export function MediaCard({
   modes = EMPTY_MODES,
   style
 }) {
-  const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
+  const radius = parseFloat(getVariableByName('cardMedia/radius', modes));
   const containerStyle = {
     borderRadius: radius,
     overflow: 'hidden',
@@ -102,11 +102,11 @@ export function Title({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52');
-  const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68');
-  const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900';
+  const color = getVariableByName('cardMedia/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -150,9 +150,9 @@ export function Footer({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24');
-  const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16');
-  const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
+  const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes));
+  const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes));
+  const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes));
 
   // Figma tokens:
   //   blur/minimal/background -> tint laid over the live blur, also used
@@ -163,8 +163,8 @@ export function Footer({
   //                              with the previous expo-blur scale) and
   //                              maps it internally — here we convert the
   //                              token's radius to that intensity scale.
-  const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
-  const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
+  const glassBgColor = getVariableByName('blur/minimal/background', modes);
+  const blurRadius = parseFloat(getVariableByName('blur/minimal', modes));
   const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
 
   // Pick the iOS/Android material tint from "Contrast Context" mode so the
@@ -186,7 +186,9 @@ export function Footer({
     children: [/*#__PURE__*/_jsx(GlassFill, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: 'row',
@@ -211,11 +213,11 @@ export function FooterTitle({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14');
-  const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16');
-  const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800';
+  const color = getVariableByName('cardMedia/footer/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes);
   return /*#__PURE__*/_jsx(Text, {
     style: [{
       color,
@@ -239,11 +241,11 @@ export function FooterSubtitle({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1';
-  const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12');
-  const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14');
-  const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400';
+  const color = getVariableByName('cardMedia/footer/subtitle/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes);
   return /*#__PURE__*/_jsx(Text, {
     style: [{
       color,

package/lib/module/components/MessageField/MessageField.js

@@ -45,13 +45,13 @@ function firstError(error) {
 function useMessageFieldTokens(modes) {
   return useMemo(() => {
     const wrapperGap = toNumber(getVariableByName('messageField/gap', modes), 8);
-    const labelColor = getVariableByName('messageField/label/foreground', modes) || '#000000';
-    const labelFontFamily = getVariableByName('messageField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('messageField/label/foreground', modes);
+    const labelFontFamily = getVariableByName('messageField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('messageField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('messageField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight(getVariableByName('messageField/label/fontWeight', modes), '500');
-    const textareaBackground = getVariableByName('messageField/textarea/background', modes) || '#ffffff';
-    const textareaBorderColor = getVariableByName('messageField/textarea/border/color', modes) || '#b5b6b7';
+    const textareaBackground = getVariableByName('messageField/textarea/background', modes);
+    const textareaBorderColor = getVariableByName('messageField/textarea/border/color', modes);
     const textareaBorderSize = toNumber(getVariableByName('messageField/textarea/border/size', modes), 1.5);
     const textareaRadius = toNumber(getVariableByName('messageField/textarea/radius', modes), 8);
     const textareaPadding = toNumber(getVariableByName('messageField/textarea/padding', modes), 12);
@@ -64,13 +64,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 = getVariableByName('messageField/text/foreground', modes) || '#707275';
-    const inputFontFamily = getVariableByName('messageField/text/fontFamily', modes) || 'JioType Var';
+    const inputTextColor = getVariableByName('messageField/text/foreground', modes);
+    const inputFontFamily = getVariableByName('messageField/text/fontFamily', modes);
     const inputFontSize = toNumber(getVariableByName('messageField/text/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('messageField/text/lineHeight', modes), 21);
     const inputFontWeight = toFontWeight(getVariableByName('messageField/text/fontWeight', modes), '400');
-    const counterColor = getVariableByName('messageField/maxLength/foreground', modes) || '#24262b';
-    const counterFontFamily = getVariableByName('messageField/maxLength/fontFamily', modes) || 'JioType Var';
+    const counterColor = getVariableByName('messageField/maxLength/foreground', modes);
+    const counterFontFamily = getVariableByName('messageField/maxLength/fontFamily', modes);
     const counterFontSize = toNumber(getVariableByName('messageField/maxLength/fontSize', modes), 14);
     const counterLineHeight = toNumber(getVariableByName('messageField/maxLength/lineHeight', modes), 18);
     const counterFontWeight = toFontWeight(getVariableByName('messageField/maxLength/fontWeight', modes), '400');

package/lib/module/components/MetricLegendItem/MetricLegendItem.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MetricLegendItem renders a horizontal row consisting of a small colored
@@ -22,7 +22,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = getVariableByName('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = getVariableByName('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -87,7 +88,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/module/components/MoneyValue/MoneyValue.js

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

package/lib/module/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -75,7 +75,8 @@ function CalendarGlyph({
   modes: propModes = EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -120,7 +121,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -182,7 +183,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -239,6 +241,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),

package/lib/module/components/NavArrow/NavArrow.js

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

package/lib/module/components/NoteInput/NoteInput.js

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

package/lib/module/components/Nudge/Nudge.js

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