jfs-components 0.1.12 → 0.1.18

package/src/components/TextInput/TextInput.tsx

@@ -137,18 +137,18 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const inputRef = useRef<RNTextInput>(null)
 
   // Resolve container tokens
-  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5'
-  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5'
-  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14
-  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14
-  const radius = getVariableByName('textInput/radius', modes) || 99999
+  const backgroundColor = getVariableByName('textInput/background', modes)
+  const borderColor = getVariableByName('textInput/border/color', modes)
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes)
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes)
+  const radius = getVariableByName('textInput/radius', modes)
 
   // Resolve text input typography tokens
-  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b'
-  const fontSize = getVariableByName('textInput/fontSize', modes) || 14
-  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18
-  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System'
-  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400
+  const textColor = getVariableByName('textInput/label/color', modes)
+  const fontSize = getVariableByName('textInput/fontSize', modes)
+  const lineHeight = getVariableByName('textInput/lineHeight', modes)
+  const fontFamily = getVariableByName('textInput/fontFamily', modes)
+  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
@@ -156,8 +156,8 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const placeholderColor = makePlaceholderColor(textColor, 0.6)
 
   // Resolve icon tokens (for default icon rendering if needed)
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius
@@ -346,8 +346,8 @@ const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function T
   ...rest
 }: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
-  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
-  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+  const iconColor = getVariableByName('textInput/icon/color', modes)
+  const iconSize = getVariableByName('textInput/icon/size', modes)
 
   // Use provided leading or default to search icon
   const defaultLeading = (

package/src/components/TextSegment/TextSegment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -60,10 +60,19 @@ export type TextSegmentProps = {
   numberOfLines?: number
   /**
    * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
-   * never shown and the `numberOfLines` clamp is ignored, so the paragraph
-   * wraps to as many lines as it needs even when horizontal space is tight.
+   * never shown and the `numberOfLines` clamp is ignored. The paragraph is also
+   * never shrunk by a tight parent — it keeps its full intrinsic size and
+   * overflows (even breaking the parent layout) rather than clipping into an
+   * ellipsis. It still wraps onto multiple lines.
    */
   disableTruncation?: boolean
+  /**
+   * When `true`, forces the whole paragraph onto a single line with no wrapping
+   * (implies {@link disableTruncation}). On web the line overflows horizontally
+   * — brutally breaking the parent layout if it has to — instead of wrapping or
+   * truncating.
+   */
+  singleLine?: boolean
   /** Mode configuration used for the base style and cascaded to every run/child. */
   modes?: Modes
   /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
@@ -132,6 +141,7 @@ function TextSegment({
   textAlign = 'Left',
   numberOfLines,
   disableTruncation,
+  singleLine,
   modes = EMPTY_MODES,
   style,
 }: TextSegmentProps) {
@@ -163,8 +173,16 @@ function TextSegment({
   // while still honouring any per-child `modes` override.
   const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
 
+  // Layout `style` is merged after the consumer `style` so the brutal overflow
+  // / no-wrap behaviour always wins.
+  const { style: layoutStyle, ...truncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+  })
+
   return (
-    <RNText style={[baseStyle, style]} {...resolveTruncation(disableTruncation, numberOfLines)}>
+    <RNText style={[baseStyle, style, layoutStyle]} {...truncation}>
       {content}
     </RNText>
   )

package/src/components/ThreadHero/ThreadHero.tsx

@@ -38,29 +38,29 @@ export default function ThreadHero({
     disableTruncation,
 }: ThreadHeroProps) {
     // Container Gaps
-    const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
-    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes)) || 2
+    const containerGap = Number(getVariableByName('threadHero/gap', modes))
+    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes))
 
     // Title Styles
-    const titleColor = getVariableByName('threadHero/title/color', modes) || '#191b1e'
-    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes)) || 16
-    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes) || 'System'
-    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes)) || 20
-    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes) || '600'
+    const titleColor = getVariableByName('threadHero/title/color', modes)
+    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes))
+    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes)
+    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes))
+    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes)
 
     // Subtitle Styles
-    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes) || '#5d5d61'
-    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes)) || 12
-    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes) || 'System'
-    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes)) || 18
-    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes) || '500'
+    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes)
+    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes))
+    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes)
+    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes))
+    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes)
 
     // Caption Styles
-    const captionColor = getVariableByName('threadHero/caption/color', modes) || '#5d5d61'
-    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes)) || 12
-    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes) || 'System'
-    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes)) || 18
-    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes) || '500'
+    const captionColor = getVariableByName('threadHero/caption/color', modes)
+    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes))
+    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes)
+    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes))
+    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes)
 
     // Styles
     const containerStyle: ViewStyle = {

package/src/components/Title/Title.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
@@ -20,9 +20,19 @@ export type TitleProps = {
   /**
    * When `true`, disables truncation for both the title and subtitle: the
    * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
-   * ignored, so the text wraps fully even when horizontal space is tight.
+   * ignored. The text is also never shrunk by a tight parent — it keeps its
+   * full intrinsic size and overflows (even breaking the parent layout) rather
+   * than ever clipping into an ellipsis. The text still wraps onto multiple
+   * lines.
    */
   disableTruncation?: boolean;
+  /**
+   * When `true`, forces both the title and subtitle onto a single line with no
+   * wrapping (implies {@link disableTruncation}). On web the line overflows
+   * horizontally — brutally breaking the parent layout if it has to — instead
+   * of wrapping or truncating.
+   */
+  singleLine?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -42,6 +52,7 @@ function Title({
   subtitleStyle,
   numberOfLines,
   disableTruncation,
+  singleLine,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -50,16 +61,16 @@ function Title({
   const modes = { ...globalModes, ...propModes }
 
   const paddingHorizontal =
-    getVariableByName('title/padding/horizontal', modes) || 16
+    getVariableByName('title/padding/horizontal', modes)
   const paddingVertical =
-    getVariableByName('title/padding/vertical', modes) || 8
-  const gap = getVariableByName('title/gap', modes) || 8
+    getVariableByName('title/padding/vertical', modes)
+  const gap = getVariableByName('title/gap', modes)
 
   const labelColor =
-    getVariableByName('title/label/color', modes) || '#0d0d0f'
-  const fontSize = getVariableByName('title/fontSize', modes) || 26
+    getVariableByName('title/label/color', modes)
+  const fontSize = getVariableByName('title/fontSize', modes)
   const rawLineHeight =
-    getVariableByName('title/lineHeight', modes) || 26
+    getVariableByName('title/lineHeight', modes)
   // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
   // native (especially Android) that produces a Text box exactly `lineHeight`
   // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
@@ -68,28 +79,28 @@ function Title({
   // the original value is preserved.
   const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2))
   const fontFamily =
-    getVariableByName('title/fontFamily', modes) || 'System'
+    getVariableByName('title/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('title/fontWeight', modes) || 900
+    getVariableByName('title/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()
       : fontWeightRaw
 
   const subtitleColor =
-    getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f'
+    getVariableByName('pageSubtitle/label/color', modes)
   const subtitleFontSize =
-    getVariableByName('pageSubtitle/fontSize', modes) || 14
+    getVariableByName('pageSubtitle/fontSize', modes)
   const subtitleRawLineHeight =
-    getVariableByName('pageSubtitle/lineHeight', modes) || 18
+    getVariableByName('pageSubtitle/lineHeight', modes)
   const subtitleLineHeight = Math.max(
     subtitleRawLineHeight,
     Math.ceil(subtitleFontSize * 1.2)
   )
   const subtitleFontFamily =
-    getVariableByName('pageSubtitle/fontFamily', modes) || 'System'
+    getVariableByName('pageSubtitle/fontFamily', modes)
   const subtitleFontWeightRaw =
-    getVariableByName('pageSubtitle/fontWeight', modes) || 500
+    getVariableByName('pageSubtitle/fontWeight', modes)
   const subtitleFontWeight =
     typeof subtitleFontWeightRaw === 'number'
       ? subtitleFontWeightRaw.toString()
@@ -125,6 +136,20 @@ function Title({
     textAlign: TEXT_ALIGN_MAP[textAlign],
   }
 
+  // `style` from the layout helper must be merged AFTER the consumer override
+  // so the brutal overflow / no-wrap behaviour always wins.
+  const { style: titleLayoutStyle, ...titleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+  })
+  // The subtitle has never been line-clamped, so it only picks up the escape
+  // hatches (overflow / single-line) — `numberOfLines` is intentionally omitted.
+  const { style: subtitleLayoutStyle, ...subtitleTruncation } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+  })
+
   return (
     <View
       style={[containerStyle, style]}
@@ -134,8 +159,8 @@ function Title({
       {...rest}
     >
       <Text
-        style={[titleTextStyle, textStyle]}
-        {...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1)}
+        style={[titleTextStyle, textStyle, titleLayoutStyle]}
+        {...titleTruncation}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
@@ -143,7 +168,8 @@ function Title({
       </Text>
       {subtitle != null && (
         <Text
-          style={[subtitleTextStyle, subtitleStyle]}
+          style={[subtitleTextStyle, subtitleStyle, subtitleLayoutStyle]}
+          {...subtitleTruncation}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >

package/src/components/Toast/Toast.tsx

@@ -44,21 +44,21 @@ function Toast({
     }
   }, [id, timeout])
 
-  const backgroundColor = getVariableByName('toast/background', modes) || '#303338'
-  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff'
-  const fontSize = getVariableByName('toast/fontSize', modes) || 14
-  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined
-  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500'
-  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18
-  const radius = getVariableByName('toast/radius', modes) || 14
-  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16
-  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14
-  const gap = getVariableByName('toast/gap', modes) || 8
-  const borderWidth = getVariableByName('toast/border/size', modes) || 1
-  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)'
-  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48
-  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16
-  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)'
+  const backgroundColor = getVariableByName('toast/background', modes)
+  const foreground = getVariableByName('toast/foreground', modes)
+  const fontSize = getVariableByName('toast/fontSize', modes)
+  const fontFamily = getVariableByName('toast/fontFamily', modes)
+  const fontWeight = getVariableByName('toast/fontWeight', modes)
+  const lineHeight = getVariableByName('toast/lineHeight', modes)
+  const radius = getVariableByName('toast/radius', modes)
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes)
+  const gap = getVariableByName('toast/gap', modes)
+  const borderWidth = getVariableByName('toast/border/size', modes)
+  const borderColor = getVariableByName('toast/border/color', modes)
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes)
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes)
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes)
 
   const enterAnimation = placement === 'top'
     ? SlideInUp.duration(ANIMATION_DURATION)

package/src/components/Toggle/Toggle.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, useState } from 'react'
 import {
   Pressable,
   View,
-  Platform,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 
 export interface ToggleProps {
@@ -89,15 +89,10 @@ function Toggle({
     opacity: disabled ? 0.5 : 1,
   }
 
-  const thumbShadow: ViewStyle = Platform.OS === 'web'
-    ? { boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}` } as ViewStyle
-    : {
-      shadowColor: thumbShadowColor as string,
-      shadowOffset: { width: thumbShadowOffsetX as number, height: thumbShadowOffsetY as number },
-      shadowRadius: thumbShadowRadius as number,
-      shadowOpacity: 1,
-      elevation: 4,
-    }
+  const thumbShadow: ViewStyle = boxShadow(
+    `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`,
+    { elevation: 4 },
+  )
 
   const thumbStyle: ViewStyle = {
     width: thumbSize as number,

package/src/components/Tooltip/Tooltip.tsx

@@ -263,18 +263,18 @@ export function TooltipContent({
   const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
 
   // Tokens
-  const bgColor = (getVariableByName('tooltip/background', modes) as string) || '#0f0d0a'
-  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes) || 12)
-  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes) || 8)
-  const radius = Number(getVariableByName('radius', modes) || 8)
-  const maxWidthToken = Number(getVariableByName('maxWidth', modes) || 280)
-  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes) || 16)
-  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes) || 8)
-  const labelColor = (getVariableByName('tooltip/label/color', modes) as string) || '#ffffff'
-  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes) || 14)
-  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string) || '500'
-  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes) || 18)
-  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string) || undefined
+  const bgColor = (getVariableByName('tooltip/background', modes) as string)
+  const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes))
+  const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes))
+  const radius = Number(getVariableByName('radius', modes))
+  const maxWidthToken = Number(getVariableByName('maxWidth', modes))
+  const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes))
+  const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes))
+  const labelColor = (getVariableByName('tooltip/label/color', modes) as string)
+  const fontSize = Number(getVariableByName('tooltip/label/fontSize', modes))
+  const fontWeight = (getVariableByName('tooltip/label/fontWeight', modes) as string)
+  const lineHeight = Number(getVariableByName('tooltip/label/lineHeight', modes))
+  const fontFamily = (getVariableByName('tooltip/lable/fontFamily', modes) as string)
 
   if (!isVisible) return null
 

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -70,21 +70,21 @@ function TransactionBubble({
     'Context3': 'Transaction Bubble',
   }
 
-  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes)) || 16
-  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes)) || 23
-  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes)) || 1
-  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff'
-  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5'
-  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8
-  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
-
-  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b'
-  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14
-  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes)) || 17
-  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var'
-
-  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4
-  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18
+  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes))
+  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes))
+  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes))
+  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes)
+  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes)
+  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes))
+  const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes))
+
+  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes)
+  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes))
+  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes))
+  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes)
+
+  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes))
+  const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes))
 
   const containerStyle: ViewStyle = {
     padding,

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -52,21 +52,21 @@ function Item({
   const gap = getVariableByName('detailItem/gap', modes) ?? 4
 
   // Label typography tokens
-  const labelColor = getVariableByName('detailItem/label/color', modes) || '#0c0d10'
-  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes) || 14
-  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes) || 'System'
-  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes) || 17
-  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes) || 500
+  const labelColor = getVariableByName('detailItem/label/color', modes)
+  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes)
+  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes)
+  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes)
+  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes)
   const labelFontWeight = typeof labelFontWeightRaw === 'number'
     ? labelFontWeightRaw.toString()
     : labelFontWeightRaw
 
   // Value typography tokens
-  const valueColor = getVariableByName('detailItem/value/color', modes) || '#24262b'
-  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes) || 14
-  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes) || 'System'
-  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes) || 17
-  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes) || 'Medium'
+  const valueColor = getVariableByName('detailItem/value/color', modes)
+  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes)
+  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes)
+  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes)
+  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes)
   const valueFontWeight = typeof valueFontWeightRaw === 'number'
     ? valueFontWeightRaw.toString()
     : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -19,7 +19,7 @@ const StatusIcon = ({
     height = 15,
     color,
 }: StatusIconProps) => {
-    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes) || '#F06D0F'
+    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes)
 
     return (
         <Svg
@@ -66,16 +66,16 @@ export default function TransactionStatus({
     style,
     disableTruncation,
 }: TransactionStatusProps) {
-    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
+    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes))
     // Using 'transactionStatus' tokens for text
-    const textColor = getVariableByName('transactionStatus/color', modes) || '#191b1e'
-    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes)) || 12
-    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes)) || 16
-    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes) || 'System'
-    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes) || '500'
+    const textColor = getVariableByName('transactionStatus/color', modes)
+    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes))
+    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes))
+    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes)
+    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes)
 
-    const iconColor = getVariableByName('transactionStatus/icon/color', modes) || '#f06d0f'
-    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes)) || 18
+    const iconColor = getVariableByName('transactionStatus/icon/color', modes)
+    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',

package/src/components/UpiHandle/UpiHandle.tsx

@@ -70,26 +70,26 @@ interface UpiHandleTokens {
 }
 
 function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
-  const backgroundColor = (getVariableByName('upiHandle/background', modes) || '#f5f5f5') as string
-  const radius = (getVariableByName('upiHandle/radius', modes) || 99999) as number
-  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes) || 4) as number
-  const paddingRight = (getVariableByName('upiHandle/padding/right', modes) || 14) as number
-  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes) || 3) as number
-  const gap = (getVariableByName('upiHandle/gap', modes) || 6) as number
+  const backgroundColor = (getVariableByName('upiHandle/background', modes)) as string
+  const radius = (getVariableByName('upiHandle/radius', modes)) as number
+  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes)) as number
+  const paddingRight = (getVariableByName('upiHandle/padding/right', modes)) as number
+  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes)) as number
+  const gap = (getVariableByName('upiHandle/gap', modes)) as number
 
-  const avatarSize = (getVariableByName('upiHandle/image/size', modes) || 23) as number
-  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes) || 99999) as number
+  const avatarSize = (getVariableByName('upiHandle/image/size', modes)) as number
+  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes)) as number
 
-  const labelColor = (getVariableByName('upiHandle/label/color', modes) || '#0d0d0f') as string
-  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes) || 23) as number
-  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes) || 'System') as string
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500
+  const labelColor = (getVariableByName('upiHandle/label/color', modes)) as string
+  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes)) as number
+  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes)) as string
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
 
-  const iconColor = (getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f') as string
-  const iconSize = (getVariableByName('upiHandle/icon/size', modes) || 12) as number
+  const iconColor = (getVariableByName('upiHandle/icon/color', modes)) as string
+  const iconSize = (getVariableByName('upiHandle/icon/size', modes)) as number
 
   return {
     containerStyle: {

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/
 export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
+export { default as CarouselCardAccounts, type CarouselCardAccountsProps } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
@@ -69,6 +70,7 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
+export { default as ScrollArea, type ScrollAreaProps, type ScrollDirection } from './ScrollArea/ScrollArea';
 export { default as Section } from './Section/Section';
 export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';