jfs-components 0.1.8 → 0.1.17

package/lib/module/components/Dropdown/Dropdown.js

@@ -4,7 +4,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Platform, Pressable, ScrollView, 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 { boxShadow } from '../../utils/shadow';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
@@ -21,17 +22,17 @@ function useDropdownItemTokens(modes) {
     const idleBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Idle'
-    }) || '#ffffff';
+    });
     const selectedBackground = getVariableByName('dropdownItem/background', {
       ...modes,
       'Dropdown Item State': 'Selected'
-    }) || '#f5f5f5';
-    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
-    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16;
-    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes) || '400';
-    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19;
-    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8;
+    });
+    const foreground = getVariableByName('dropdownItem/foreground', modes);
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes);
+    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10);
+    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes);
+    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10);
+    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10);
     const paddingHorizontal = parseInt(getVariableByName('dropdownItem/padding/horizontal', modes), 10) || 12;
     const paddingVertical = parseInt(getVariableByName('dropdownItem/padding/vertical', modes), 10) || 12;
     return {
@@ -61,7 +62,8 @@ export function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -130,7 +132,7 @@ export function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/_jsx(Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/_jsx(Icon, {
       name: "ic_confirm",
@@ -164,12 +166,12 @@ export function Dropdown({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10) || 8;
-  const background = getVariableByName('dropdown/background', modes) || '#ffffff';
-  const shadowColor = getVariableByName('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
-  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
-  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
-  const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
+  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10);
+  const background = getVariableByName('dropdown/background', modes);
+  const shadowColor = getVariableByName('dropdown/shadow/color', modes);
+  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10);
+  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10);
+  const shadowBlur = parseInt(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
@@ -178,18 +180,16 @@ export 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}`
+    ...boxShadow(`${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`)
   };
 
   // Inner view carries the rounded corners + clipping so list/scroll content

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -5,7 +5,7 @@ import { Dimensions, Modal, Platform, Pressable, StyleSheet, Text, View } from '
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import SupportText from '../SupportText/SupportText';
 import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
@@ -28,8 +28,8 @@ const IS_WEB = Platform.OS === 'web';
 
 function useChevronTokens(modes) {
   return useMemo(() => {
-    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10) || 32;
-    const iconColor = getVariableByName('iconButton/icon/color', modes) || '#0f0d0a';
+    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10);
+    const iconColor = getVariableByName('iconButton/icon/color', modes);
     return {
       iconSize,
       iconColor
@@ -46,22 +46,22 @@ function toNumber(value, fallback) {
 }
 function useFormFieldTokens(modes) {
   return useMemo(() => {
-    const labelColor = getVariableByName('formField/label/color', modes) || '#000000';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
-    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes);
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
     const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
     const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
     const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBackground = getVariableByName('formField/input/background', modes);
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
-    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes);
+    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes);
+    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || 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.
@@ -155,7 +155,8 @@ const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
+  onBlur,
+  disableTruncation
 }, ref) {
   // ---------------- Modes ----------------
   const {
@@ -542,7 +543,7 @@ const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,

package/lib/module/components/EmptyState/EmptyState.js

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

package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -58,6 +58,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = EMPTY_MODES,
   style,
   labelStyle,
@@ -130,7 +131,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/module/components/FilterBar/FilterBar.js

@@ -43,8 +43,8 @@ function FilterBar({
     borderColor: isFocused ? '#222' : 'transparent'
   };
   // Resolve container tokens
-  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes) || 16;
-  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes) || 10;
+  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes);
+  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes);
   const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter';
   const containerStyle = {
     flexDirection: 'column',

package/lib/module/components/Form/Form.js

@@ -56,9 +56,9 @@ function Form({
     validationErrors,
     onFieldChange
   }), [validationErrors, onFieldChange]);
-  const gap = parseInt(getVariableByName('form/gap', modes), 10) || 12;
-  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10) || 0;
-  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10) || 0;
+  const gap = parseInt(getVariableByName('form/gap', modes), 10);
+  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10);
+  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10);
   const containerStyle = useMemo(() => ({
     gap,
     paddingHorizontal,

package/lib/module/components/FormField/FormField.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { View, Text, TextInput as RNTextInput } from 'react-native';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, View, Text, TextInput as RNTextInput } 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, mergeRefs } from '../../utils/react-utils';
+import { useWebOutsidePress } from '../../utils/web-platform-utils';
 import SupportText from '../SupportText/SupportText';
 import Icon from '../../icons/Icon';
 import { useFormContext } from '../Form/Form';
@@ -32,8 +33,8 @@ function useFormFieldTokens(modes) {
     const gap = toNumber(getVariableByName('formField/gap', modes), 8);
 
     // Label (Figma: 14/17 medium, color #0c0d10)
-    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
-    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('formField/label/color', modes);
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight(getVariableByName('formField/label/fontWeight', modes), '500');
@@ -47,10 +48,10 @@ function useFormFieldTokens(modes) {
     // Input text (Figma: 16/45 regular)
     const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
-    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes);
     const inputFontWeight = toFontWeight(getVariableByName('formField/input/label/fontWeight', modes), '400');
-    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBackground = getVariableByName('formField/input/background', modes);
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes);
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
         'FormField States': modes['FormField States'],
@@ -58,7 +59,7 @@ function useFormFieldTokens(modes) {
         'formField/input/border/color': getVariableByName('formField/input/border/color', modes)
       });
     }
-    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputTextColor = getVariableByName('formField/input/label/color', modes);
     return {
       gap,
       labelColor,
@@ -202,6 +203,21 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
   const [isFocused, setIsFocused] = useState(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  useWebOutsidePress(rootRef, useCallback(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -284,7 +300,30 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -321,6 +360,7 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/_jsxs(View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -341,7 +381,7 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/_jsx(RNTextInput, {
-        ref: ref,
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -56,39 +56,39 @@ function HeroText({
   modes
 }) {
   const styles = useMemo(() => {
-    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
-    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+    const gap = Number(getVariableByName('PageHero/gap', modes));
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes));
     const eyebrowStyle = {
-      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
-      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: getVariableByName('PageHero/eyebrow/color', modes),
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center'
     };
     const headlineStyle = {
-      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
-      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      color: getVariableByName('PageHero/headline/color', modes),
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%'
     };
     const supportingTextStyle = {
-      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/supportingText/color', modes),
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center'
     };
     const priceTextStyle = {
-      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
-      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
-      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
-      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      color: getVariableByName('PageHero/body/color', modes),
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes),
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
       textAlign: 'center'
     };
     return {
@@ -211,7 +211,7 @@ function FullscreenModal({
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
-  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
+  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes));
 
   // Safe-area insets so the floating chrome clears the system bars: the close
   // button drops below the status bar / notch, and the sticky footer keeps its
@@ -225,7 +225,7 @@ function FullscreenModal({
   // Extend (not replace) the footer's token bottom padding by the bottom inset
   // so the action button never sits under the system navigation area.
   const footerInsetStyle = useMemo(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41;
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes));
     return {
       paddingBottom: base + insets.bottom
     };

package/lib/module/components/Gauge/Gauge.js

@@ -35,7 +35,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,
@@ -91,26 +91,26 @@ function Gauge({
   const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
   const arcLength = Math.PI * radius;
   const progress = clamp(value, min, max);
-  const titleColor = getVariableByName('gauge/title/color', modes) || '#0c0d10';
+  const titleColor = getVariableByName('gauge/title/color', modes);
   const titleFontSize = toNumber(getVariableByName('gauge/title/fontSize', modes), 23);
   const titleLineHeight = toNumber(getVariableByName('gauge/title/lineHeight', modes), 23);
-  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes);
   const titleFontWeight = toFontWeight(getVariableByName('gauge/title/fontWeight', modes), '900');
   const titleHeight = toNumber(getVariableByName('gauge/title/height', modes), 46);
   const readoutGap = toNumber(getVariableByName('gauge/readout/gap', modes), 8);
   const readoutPadding = toNumber(getVariableByName('gauge/readout/padding', modes), 8);
-  const valueColor = getVariableByName('gauge/readout/value/color', modes) || '#0c0d10';
+  const valueColor = getVariableByName('gauge/readout/value/color', modes);
   const valueFontSize = toNumber(getVariableByName('gauge/readout/value/fontSize', modes), 36);
   const valueLineHeight = toNumber(getVariableByName('gauge/readout/value/lineHeight', modes), 36);
-  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes) || 'JioType Var';
+  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes);
   const valueFontWeight = toFontWeight(getVariableByName('gauge/readout/value/fontWeight', modes), '800');
-  const captionColor = getVariableByName('gauge/caption/color', modes) || '#0c0d10';
+  const captionColor = getVariableByName('gauge/caption/color', modes);
   const captionFontSize = toNumber(getVariableByName('gauge/caption/fontSize', modes), 14);
   const captionLineHeight = toNumber(getVariableByName('gauge/caption/lineHeight', modes), 18);
-  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes) || 'JioType Var';
+  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes);
   const captionFontWeight = toFontWeight(getVariableByName('gauge/caption/fontWeight', modes), '500');
-  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes) || '#f5f5f6');
-  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes) || '#25ab21');
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes));
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes));
   const containerStyle = {
     alignItems: 'center',
     gap,

package/lib/module/components/HoldingsCard/HoldingsCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text, Pressable, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Radio from '../Radio/Radio';
-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";
 const GRID_COLUMNS = 3;
 const GRID_COLUMN_GAP = 12;
@@ -34,11 +34,12 @@ export default function HoldingsCard({
   onPress,
   modes = EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
-  const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5';
-  const containerStroke = getVariableByName('holdingsCard/container/stroke', modes) || '#fde8c9';
+  const containerFill = getVariableByName('holdingsCard/container/fill', modes);
+  const containerStroke = getVariableByName('holdingsCard/container/stroke', modes);
   const containerStrokeWeight = parseFloat((getVariableByName('holdingsCard/container/strokeWeight', modes) ?? 1).toString());
   const containerCornerRadius = parseFloat((getVariableByName('holdingsCard/container/cornerRadius', modes) ?? 16).toString());
   const containerGap = parseFloat((getVariableByName('holdingsCard/container/gap', modes) ?? 10).toString());
@@ -51,26 +52,26 @@ export default function HoldingsCard({
 
   // ---- Hero tokens ----
   const heroGap = parseFloat((getVariableByName('holdingsCard/hero/gap', modes) ?? 4).toString());
-  const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes) || '#0f0d0a';
+  const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes);
   const heroLabelFontSize = parseFloat((getVariableByName('holdingsCard/hero/label/fontSize', modes) ?? 12).toString());
-  const heroLabelFontFamily = getVariableByName('holdingsCard/hero/label/fontFamily', modes) || 'JioType Var';
+  const heroLabelFontFamily = getVariableByName('holdingsCard/hero/label/fontFamily', modes);
   const heroLabelLineHeight = parseFloat((getVariableByName('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString());
   const heroLabelFontWeight = (getVariableByName('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString();
-  const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes) || '#0f0d0a';
+  const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes);
   const heroValueFontSize = parseFloat((getVariableByName('holdingsCard/hero/value/fontSize', modes) ?? 20).toString());
-  const heroValueFontFamily = getVariableByName('holdingsCard/hero/value/fontFamily', modes) || 'JioType Var';
+  const heroValueFontFamily = getVariableByName('holdingsCard/hero/value/fontFamily', modes);
   const heroValueLineHeight = parseFloat((getVariableByName('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString());
   const heroValueFontWeight = (getVariableByName('holdingsCard/hero/value/fontWeight', modes) ?? '700').toString();
 
   // ---- Details grid tokens ----
-  const detailLabelColor = getVariableByName('holdingsCard/detailsGrid/label/color', modes) || '#2c251b';
+  const detailLabelColor = getVariableByName('holdingsCard/detailsGrid/label/color', modes);
   const detailLabelFontSize = parseFloat((getVariableByName('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString());
-  const detailLabelFontFamily = getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes) || 'JioType Var';
+  const detailLabelFontFamily = getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes);
   const detailLabelLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString());
   const detailLabelFontWeight = (getVariableByName('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString();
-  const detailValueColor = getVariableByName('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a';
+  const detailValueColor = getVariableByName('holdingsCard/detailsGrid/value/color', modes);
   const detailValueFontSize = parseFloat((getVariableByName('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString());
-  const detailValueFontFamily = getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes) || 'JioType Var';
+  const detailValueFontFamily = getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes);
   const detailValueLineHeight = parseFloat((getVariableByName('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString());
   const detailValueFontWeight = (getVariableByName('holdingsCard/detailsGrid/value/fontWeight', modes) ?? '500').toString();
   const dataItemGap = parseFloat((getVariableByName('holdingsCard/dataItem/gap', modes) ?? 4).toString());
@@ -186,7 +187,7 @@ export default function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/module/components/Icon/Icon.js

@@ -8,12 +8,12 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import BaseIcon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveIconTokens(modes) {
-  const iconColor = getVariableByName('icon/color', modes) || '#ad8444';
-  const iconSize = getVariableByName('icon/size', modes) || 18;
-  const paddingLeft = getVariableByName('icon/padding/left', modes) || 0;
-  const paddingTop = getVariableByName('icon/padding/top', modes) || 0;
-  const paddingRight = getVariableByName('icon/padding/right', modes) || 0;
-  const paddingBottom = getVariableByName('icon/padding/bottom', modes) || 0;
+  const iconColor = getVariableByName('icon/color', modes);
+  const iconSize = getVariableByName('icon/size', modes);
+  const paddingLeft = getVariableByName('icon/padding/left', modes);
+  const paddingTop = getVariableByName('icon/padding/top', modes);
+  const paddingRight = getVariableByName('icon/padding/right', modes);
+  const paddingBottom = getVariableByName('icon/padding/bottom', modes);
   return {
     containerStyle: {
       flexDirection: 'column',

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -8,13 +8,13 @@ import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveIconCapsuleTokens(modes) {
-  const size = getVariableByName('iconCapsule/size', modes) || 42;
-  const radiusRaw = getVariableByName('iconCapsule/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('iconCapsule/border/size', modes) || 1;
-  const iconColor = getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a';
-  const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18;
+  const size = getVariableByName('iconCapsule/size', modes);
+  const radiusRaw = getVariableByName('iconCapsule/radius', modes);
+  const backgroundColor = getVariableByName('iconCapsule/background', modes);
+  const borderColor = getVariableByName('iconCapsule/border/color', modes);
+  const borderSize = getVariableByName('iconCapsule/border/size', modes);
+  const iconColor = getVariableByName('iconCapsule/icon/color', modes);
+  const iconSize = getVariableByName('iconCapsule/icon/size', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;