jfs-components 0.1.8 → 0.1.17

package/src/components/FormField/FormField.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useCallback, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
 import {
+  Platform,
   View,
   Text,
   TextInput as RNTextInput,
@@ -10,7 +11,8 @@ import {
 } 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 type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Icon from '../../icons/Icon'
@@ -124,10 +126,9 @@ function useFormFieldTokens(modes: Modes) {
 
     // Label (Figma: 14/17 medium, color #0c0d10)
     const labelColor =
-      (getVariableByName('formField/label/color', modes) as string) || '#0c0d10'
+      (getVariableByName('formField/label/color', modes) as string)
     const labelFontFamily =
-      (getVariableByName('formField/label/fontFamily', modes) as string) ||
-      'JioType Var'
+      (getVariableByName('formField/label/fontFamily', modes) as string)
     const labelFontSize = toNumber(
       getVariableByName('formField/label/fontSize', modes),
       14,
@@ -166,19 +167,16 @@ function useFormFieldTokens(modes: Modes) {
       45,
     )
     const inputFontFamily =
-      (getVariableByName('formField/input/label/fontFamily', modes) as string) ||
-      'JioType Var'
+      (getVariableByName('formField/input/label/fontFamily', modes) as string)
     const inputFontWeight = toFontWeight(
       getVariableByName('formField/input/label/fontWeight', modes),
       '400',
     )
 
     const inputBackground =
-      (getVariableByName('formField/input/background', modes) as string) ||
-      '#ffffff'
+      (getVariableByName('formField/input/background', modes) as string)
     const inputBorderColor =
-      (getVariableByName('formField/input/border/color', modes) as string) ||
-      '#b5b6b7'
+      (getVariableByName('formField/input/border/color', modes) as string)
 
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
@@ -192,8 +190,7 @@ function useFormFieldTokens(modes: Modes) {
     }
 
     const inputTextColor =
-      (getVariableByName('formField/input/label/color', modes) as string) ||
-      '#24262b'
+      (getVariableByName('formField/input/label/color', modes) as string)
 
     return {
       gap,
@@ -347,6 +344,25 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(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<RNTextInput>(null)
+  const rootRef = useRef<View>(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
@@ -478,7 +494,30 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(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,
@@ -530,6 +569,7 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
 
   return (
     <View
+      ref={rootRef}
       style={[wrapperStyle, style]}
       pointerEvents={isDisabled ? 'none' : 'auto'}
       testID={testID}
@@ -552,7 +592,7 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
           </View>
         )}
         <RNTextInput
-          ref={ref}
+          ref={mergedInputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -125,40 +125,40 @@ type HeroTextProps = {
 
 function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroTextProps) {
   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: TextStyle = {
-      color: (getVariableByName('PageHero/eyebrow/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: (getVariableByName('PageHero/eyebrow/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center',
     }
     const headlineStyle: TextStyle = {
-      color: (getVariableByName('PageHero/headline/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      color: (getVariableByName('PageHero/headline/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%',
     }
     const supportingTextStyle: TextStyle = {
-      color: (getVariableByName('PageHero/supportingText/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: (getVariableByName('PageHero/supportingText/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center',
     }
     const priceTextStyle: TextStyle = {
-      color: (getVariableByName('PageHero/body/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      color: (getVariableByName('PageHero/body/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
       textAlign: 'center',
     }
 
@@ -268,7 +268,7 @@ function FullscreenModal({
     [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
@@ -283,7 +283,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<ViewStyle>(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes))
     return { paddingBottom: base + insets.bottom }
   }, [modes, insets.bottom])
 

package/src/components/Gauge/Gauge.tsx

@@ -91,7 +91,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 
 const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
   const flattened = StyleSheet.flatten(style)
-  return typeof flattened.backgroundColor === 'string'
+  return flattened && typeof flattened.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }
@@ -145,34 +145,34 @@ function Gauge({
   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'
+    getVariableByName('gauge/track/color', modes)
   )
   const progressColor = getStrokeColor(
     progressStyle,
-    getVariableByName('gauge/progress/color', modes) || '#25ab21'
+    getVariableByName('gauge/progress/color', modes)
   )
 
   const containerStyle: ViewStyle = {

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -10,7 +10,7 @@ import {
 } 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 type { Modes } from '../../design-tokens'
 
 export interface HoldingsCardDetailItem {
@@ -39,6 +39,12 @@ export interface HoldingsCardProps {
     style?: StyleProp<ViewStyle>
     /** Test ID for testing. */
     testID?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const GRID_COLUMNS = 3
@@ -62,10 +68,11 @@ export default function HoldingsCard({
     modes = EMPTY_MODES,
     style,
     testID,
+    disableTruncation,
 }: HoldingsCardProps) {
     // ---- 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()
     )
@@ -94,24 +101,24 @@ export default function HoldingsCard({
     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'
+        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'
+        getVariableByName('holdingsCard/hero/value/fontFamily', modes)
     const heroValueLineHeight = parseFloat(
         (getVariableByName('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString()
     )
@@ -120,12 +127,12 @@ export default function HoldingsCard({
 
     // ---- Details grid tokens ----
     const detailLabelColor =
-        getVariableByName('holdingsCard/detailsGrid/label/color', modes) || '#2c251b'
+        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'
+        getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes)
     const detailLabelLineHeight = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString()
     )
@@ -133,12 +140,12 @@ export default function HoldingsCard({
         (getVariableByName('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString()
 
     const detailValueColor =
-        getVariableByName('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a'
+        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'
+        getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes)
     const detailValueLineHeight = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString()
     )
@@ -268,7 +275,7 @@ export default function HoldingsCard({
                                             lineHeight: detailValueLineHeight,
                                             fontWeight: detailValueFontWeight as any,
                                         }}
-                                        numberOfLines={1}
+                                        {...resolveTruncation(disableTruncation, 1)}
                                     >
                                         {item.value}
                                     </Text>

package/src/components/Icon/Icon.tsx

@@ -55,12 +55,12 @@ interface IconTokens {
 }
 
 function resolveIconTokens(modes: Modes): IconTokens {
-  const iconColor = (getVariableByName('icon/color', modes) || '#ad8444') as string
-  const iconSize = (getVariableByName('icon/size', modes) || 18) as number
-  const paddingLeft = (getVariableByName('icon/padding/left', modes) || 0) as number
-  const paddingTop = (getVariableByName('icon/padding/top', modes) || 0) as number
-  const paddingRight = (getVariableByName('icon/padding/right', modes) || 0) as number
-  const paddingBottom = (getVariableByName('icon/padding/bottom', modes) || 0) as number
+  const iconColor = (getVariableByName('icon/color', modes)) as string
+  const iconSize = (getVariableByName('icon/size', modes)) as number
+  const paddingLeft = (getVariableByName('icon/padding/left', modes)) as number
+  const paddingTop = (getVariableByName('icon/padding/top', modes)) as number
+  const paddingRight = (getVariableByName('icon/padding/right', modes)) as number
+  const paddingBottom = (getVariableByName('icon/padding/bottom', modes)) as number
 
   return {
     containerStyle: {

package/src/components/IconCapsule/IconCapsule.tsx

@@ -30,13 +30,13 @@ interface IconCapsuleTokens {
 }
 
 function resolveIconCapsuleTokens(modes: Modes): IconCapsuleTokens {
-  const size = (getVariableByName('iconCapsule/size', modes) || 42) as number
-  const radiusRaw = (getVariableByName('iconCapsule/radius', modes) || 9999) as number
-  const backgroundColor = (getVariableByName('iconCapsule/background', modes) || '#cfa159') as string
-  const borderColor = (getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)') as string
-  const borderSize = (getVariableByName('iconCapsule/border/size', modes) || 1) as number
-  const iconColor = (getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a') as string
-  const iconSize = (getVariableByName('iconCapsule/icon/size', modes) || 18) as number
+  const size = (getVariableByName('iconCapsule/size', modes)) as number
+  const radiusRaw = (getVariableByName('iconCapsule/radius', modes)) as number
+  const backgroundColor = (getVariableByName('iconCapsule/background', modes)) as string
+  const borderColor = (getVariableByName('iconCapsule/border/color', modes)) as string
+  const borderSize = (getVariableByName('iconCapsule/border/size', modes)) as number
+  const iconColor = (getVariableByName('iconCapsule/icon/color', modes)) as string
+  const iconSize = (getVariableByName('iconCapsule/icon/size', modes)) as number
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw

package/src/components/InputSearch/InputSearch.tsx

@@ -27,13 +27,13 @@ function SupportText({
     style
 }: SupportTextProps) {
     // 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) as TextStyle['fontWeight']
 
@@ -105,7 +105,7 @@ const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSear
         '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.
@@ -131,7 +131,7 @@ const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSear
                 <Icon
                     name="ic_close"
                     size={18}
-                    color={getVariableByName('textInput/icon/color', componentModes) || '#24262b'}
+                    color={getVariableByName('textInput/icon/color', componentModes)}
                 />
             </Pressable>
         </React.Fragment>

package/src/components/InstitutionBadge/InstitutionBadge.tsx

@@ -8,7 +8,7 @@ import {
 } 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, { type UnifiedSource } from '../../utils/MediaSource'
 import type { Modes } from '../../design-tokens'
 
@@ -43,6 +43,12 @@ export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `label`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 interface InstitutionBadgeTokens {
@@ -83,15 +89,13 @@ function resolveInstitutionBadgeTokens(
   const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8)
 
   const foreground =
-    (getVariableByName('institutionBadge/foreground', modes) as string) ||
-    '#080d1a'
+    (getVariableByName('institutionBadge/foreground', modes) as string)
   const fontSize = toNumber(
     getVariableByName('institutionBadge/fontSize', modes),
     14
   )
   const fontFamily =
-    (getVariableByName('institutionBadge/fontFamily', modes) as string) ||
-    'JioType Var'
+    (getVariableByName('institutionBadge/fontFamily', modes) as string)
   const lineHeight = toNumber(
     getVariableByName('institutionBadge/lineHeight', modes),
     18
@@ -111,8 +115,7 @@ function resolveInstitutionBadgeTokens(
   // 9999 is the design-token sentinel for "perfect circle".
   const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw
   const avatarBorderColor =
-    (getVariableByName('avatar/border/color', modes) as string) ||
-    'rgba(255,255,255,0)'
+    (getVariableByName('avatar/border/color', modes) as string)
   const avatarBorderSize = toNumber(
     getVariableByName('avatar/border/size', modes),
     1
@@ -155,6 +158,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: InstitutionBadgeProps) {
   const { modes: globalModes } = useTokens()
@@ -207,7 +211,7 @@ function InstitutionBadge({
           />
         </View>
       )}
-      <Text style={[tokens.labelStyle, labelStyle]} numberOfLines={1}>
+      <Text style={[tokens.labelStyle, labelStyle]} {...resolveTruncation(disableTruncation, 1)}>
         {label}
       </Text>
     </View>

package/src/components/ListGroup/ListGroup.tsx

@@ -6,7 +6,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 type { Modes } from '../../design-tokens'
 
 type ListGroupProps = {
@@ -17,6 +17,12 @@ type ListGroupProps = {
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'children'>;
 
 /**
@@ -52,22 +58,23 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }: ListGroupProps) {
   // 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: ViewStyle = {
@@ -113,7 +120,7 @@ function ListGroup({
       {label ? (
         <Text
           style={[labelStyle, processedSlot && { marginBottom: gap }]}
-          numberOfLines={1}
+          {...resolveTruncation(disableTruncation, 1)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >