jfs-components 0.1.12 → 0.1.18

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,200 @@
+import React, { forwardRef } from 'react'
+import {
+  ScrollView,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * Axis (or axes) along which the content can be scrolled.
+ *
+ * - `vertical` (default) — content taller than the viewport scrolls up/down.
+ * - `horizontal` — content wider than the viewport scrolls left/right.
+ * - `both` — content larger on either axis scrolls in both directions
+ *   (implemented as a horizontal `ScrollView` nested in a vertical one).
+ */
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both'
+
+export interface ScrollAreaProps
+  extends Omit<
+    ScrollViewProps,
+    'horizontal' | 'contentContainerStyle' | 'children'
+  > {
+  /** Content that may be larger than the viewport. */
+  children?: React.ReactNode
+  /**
+   * Scroll axis. Defaults to `vertical`.
+   * @default 'vertical'
+   */
+  direction?: ScrollDirection
+  /**
+   * Whether to show the native scroll indicator (scrollbar). Mirrors the Figma
+   * design, which has no visible scrollbar, so this defaults to `false`.
+   * @default false
+   */
+  showScrollIndicator?: boolean
+  /**
+   * Padding applied to all sides of the scrollable content. Individual sides
+   * (`paddingHorizontal`, `paddingTop`, …) take precedence when provided.
+   * @default 0
+   */
+  padding?: number
+  /** Left + right padding of the scrollable content. */
+  paddingHorizontal?: number
+  /** Top + bottom padding of the scrollable content. */
+  paddingVertical?: number
+  /** Top padding of the scrollable content. */
+  paddingTop?: number
+  /** Right padding of the scrollable content. */
+  paddingRight?: number
+  /** Bottom padding of the scrollable content. */
+  paddingBottom?: number
+  /** Left padding of the scrollable content. */
+  paddingLeft?: number
+  /**
+   * Style for the viewport (the visible, clipping window). Constrain the
+   * scroll area's size here, e.g. `{ height: 240 }` or `{ flex: 1 }`. The
+   * component intentionally has no background of its own.
+   */
+  style?: StyleProp<ViewStyle>
+  /** Style for the scrollable content wrapper (sits inside the viewport). */
+  contentContainerStyle?: StyleProp<ViewStyle>
+  /** Modes object for design-token resolution, cascaded to all children. */
+  modes?: Modes
+}
+
+/**
+ * Build a padding style fragment, letting the more specific props win over the
+ * broader ones (`paddingTop` > `paddingVertical` > `padding`). Only defined
+ * values are emitted so consumer `contentContainerStyle` overrides survive.
+ */
+function resolvePadding({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+}: Pick<
+  ScrollAreaProps,
+  | 'padding'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+>): ViewStyle {
+  const top = paddingTop ?? paddingVertical ?? padding
+  const right = paddingRight ?? paddingHorizontal ?? padding
+  const bottom = paddingBottom ?? paddingVertical ?? padding
+  const left = paddingLeft ?? paddingHorizontal ?? padding
+
+  const style: ViewStyle = {}
+  if (top != null) style.paddingTop = top
+  if (right != null) style.paddingRight = right
+  if (bottom != null) style.paddingBottom = bottom
+  if (left != null) style.paddingLeft = left
+  return style
+}
+
+/**
+ * ScrollArea — a transparent, size-constrained viewport that makes content
+ * larger than itself smoothly scrollable (Figma node 6319:46886).
+ *
+ * It has no background of its own; constrain its size through `style`
+ * (`height`, `maxHeight`, or `flex`) and drop any over-sized content inside.
+ *
+ * @example
+ * // Vertical (default): a tall column inside a fixed-height window.
+ * <ScrollArea style={{ height: 240 }}>
+ *   <LongContent />
+ * </ScrollArea>
+ *
+ * @example
+ * // Horizontal: a wide row of cards inside a full-width window.
+ * <ScrollArea direction="horizontal">
+ *   <Card /> <Card /> <Card />
+ * </ScrollArea>
+ */
+export const ScrollArea = forwardRef<ScrollView, ScrollAreaProps>(
+  function ScrollArea(
+    {
+      children,
+      direction = 'vertical',
+      showScrollIndicator = false,
+      padding,
+      paddingHorizontal,
+      paddingVertical,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      style,
+      contentContainerStyle,
+      modes = EMPTY_MODES,
+      scrollEventThrottle = 16,
+      ...rest
+    },
+    ref,
+  ) {
+    const paddingStyle = resolvePadding({
+      padding,
+      paddingHorizontal,
+      paddingVertical,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+    })
+
+    // Cascade modes into every child so slotted tokens resolve correctly.
+    const content = cloneChildrenWithModes(children, modes)
+
+    if (direction === 'both') {
+      // Outer vertical scroll, inner horizontal scroll. Padding lives on the
+      // inner content container so it scrolls with the content on both axes.
+      return (
+        <ScrollView
+          ref={ref}
+          style={style}
+          showsVerticalScrollIndicator={showScrollIndicator}
+          scrollEventThrottle={scrollEventThrottle}
+          {...rest}
+        >
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={showScrollIndicator}
+            scrollEventThrottle={scrollEventThrottle}
+            contentContainerStyle={[paddingStyle, contentContainerStyle]}
+          >
+            {content}
+          </ScrollView>
+        </ScrollView>
+      )
+    }
+
+    const isHorizontal = direction === 'horizontal'
+
+    return (
+      <ScrollView
+        ref={ref}
+        horizontal={isHorizontal}
+        style={style}
+        showsVerticalScrollIndicator={isHorizontal ? undefined : showScrollIndicator}
+        showsHorizontalScrollIndicator={isHorizontal ? showScrollIndicator : undefined}
+        scrollEventThrottle={scrollEventThrottle}
+        contentContainerStyle={[paddingStyle, contentContainerStyle]}
+        {...rest}
+      >
+        {content}
+      </ScrollView>
+    )
+  },
+)
+
+export default ScrollArea

package/src/components/Section/Section.tsx

@@ -408,32 +408,32 @@ interface SectionTokens {
 }
 
 function resolveSectionTokens(modes: Modes): SectionTokens {
-  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const sectionGap = (getVariableByName('section/gap', modes) || 12) as number
-  const slotGap = (getVariableByName('slot/gap', modes) || 12) as number
-  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
-  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
-  const radius = getVariableByName('section/radius', modes) || 12
-
-  const headerGap = getVariableByName('section/header/gap', modes) || 8
-  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes) || 0
-  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes) || 0
-
-  const titleColor = getVariableByName('section/title/color', modes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('section/title/fontSize', modes) || 18
-  const titleLineHeight = getVariableByName('section/title/lineHeight', modes) || 20
-  const titleFontFamily = getVariableByName('section/title/fontFamily', modes) || 'System'
-  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes) || 800
+  const backgroundColor = getVariableByName('section/background/color', modes)
+  const sectionGap = (getVariableByName('section/gap', modes)) as number
+  const slotGap = (getVariableByName('slot/gap', modes)) as number
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('section/padding/vertical', modes)
+  const radius = getVariableByName('section/radius', modes)
+
+  const headerGap = getVariableByName('section/header/gap', modes)
+  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes)
+  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes)
+
+  const titleColor = getVariableByName('section/title/color', modes)
+  const titleFontSize = getVariableByName('section/title/fontSize', modes)
+  const titleLineHeight = getVariableByName('section/title/lineHeight', modes)
+  const titleFontFamily = getVariableByName('section/title/fontFamily', modes)
+  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes)
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number'
       ? titleFontWeightRaw.toString()
       : titleFontWeightRaw
 
-  const supportTextColor = getVariableByName('section/supportText/color', modes) || '#1f1a14'
-  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes) || 14
-  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes) || 18
-  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes) || 'System'
-  const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes) || 500
+  const supportTextColor = getVariableByName('section/supportText/color', modes)
+  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes)
+  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes)
+  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes)
+  const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes)
   const supportTextFontWeight =
     typeof supportTextFontWeightRaw === 'number'
       ? supportTextFontWeightRaw.toString()
@@ -765,11 +765,11 @@ function SectionBento({
   renderToggle,
   ...rest
 }: SectionBentoProps) {
-  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const gap = getVariableByName('section/gap', modes) || 12
-  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
-  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
-  const radius = getVariableByName('section/radius', modes) || 12
+  const backgroundColor = getVariableByName('section/background/color', modes)
+  const gap = getVariableByName('section/gap', modes)
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('section/padding/vertical', modes)
+  const radius = getVariableByName('section/radius', modes)
 
   const containerStyle = useMemo<ViewStyle>(
     () => ({

package/src/components/StatusHero/StatusHero.tsx

@@ -66,28 +66,28 @@ export default function StatusHero({
   const modes = { ...globalModes, ...propModes }
 
   // Container
-  const gap = Number(getVariableByName('statusHero/gap', modes)) || 12
-  const padding = Number(getVariableByName('statusHero/padding', modes)) || 8
+  const gap = Number(getVariableByName('statusHero/gap', modes))
+  const padding = Number(getVariableByName('statusHero/padding', modes))
 
   // Media slot wrap (gap between icon and money value in default slot)
-  const slotWrapGap = Number(getVariableByName('statusHero/slotWrap/gap', modes)) || 46
+  const slotWrapGap = Number(getVariableByName('statusHero/slotWrap/gap', modes))
 
   // Content wrap
-  const contentWrapGap = Number(getVariableByName('statusHero/contentWrap/gap', modes)) || 12
+  const contentWrapGap = Number(getVariableByName('statusHero/contentWrap/gap', modes))
 
   // Title
-  const titleColor = getVariableByName('statusHero/title/foreground', modes) || '#0c0d10'
-  const titleFontSize = Number(getVariableByName('statusHero/title/fontSize', modes)) || 20
-  const titleFontFamily = getVariableByName('statusHero/title/fontFamily', modes) || 'System'
-  const titleLineHeight = Number(getVariableByName('statusHero/title/lineHeight', modes)) || 22
-  const titleFontWeight = getVariableByName('statusHero/title/fontWeight', modes) || '700'
+  const titleColor = getVariableByName('statusHero/title/foreground', modes)
+  const titleFontSize = Number(getVariableByName('statusHero/title/fontSize', modes))
+  const titleFontFamily = getVariableByName('statusHero/title/fontFamily', modes)
+  const titleLineHeight = Number(getVariableByName('statusHero/title/lineHeight', modes))
+  const titleFontWeight = getVariableByName('statusHero/title/fontWeight', modes)
 
   // Body
-  const bodyColor = getVariableByName('statusHero/body/foreground', modes) || '#24262b'
-  const bodyFontSize = Number(getVariableByName('statusHero/body/fontSize', modes)) || 14
-  const bodyFontFamily = getVariableByName('statusHero/body/fontFamily', modes) || 'System'
-  const bodyLineHeight = Number(getVariableByName('statusHero/body/lineHeight', modes)) || 17
-  const bodyFontWeight = getVariableByName('statusHero/body/fontWeight', modes) || '500'
+  const bodyColor = getVariableByName('statusHero/body/foreground', modes)
+  const bodyFontSize = Number(getVariableByName('statusHero/body/fontSize', modes))
+  const bodyFontFamily = getVariableByName('statusHero/body/fontFamily', modes)
+  const bodyLineHeight = Number(getVariableByName('statusHero/body/lineHeight', modes))
+  const bodyFontWeight = getVariableByName('statusHero/body/fontWeight', modes)
 
   const containerStyle: ViewStyle = {
     flexDirection: 'column',

package/src/components/Stepper/Step.tsx

@@ -47,42 +47,40 @@ export function Step({
     status = 'number',
 }: StepProps) {
     const minHeight =
-        Number(getVariableByName('steperItem/minHeight', modes) as unknown) || 52
+        Number(getVariableByName('steperItem/minHeight', modes) as unknown)
     const gap =
-        Number(getVariableByName('steperItem/gap', modes) as unknown) || 16
+        Number(getVariableByName('steperItem/gap', modes) as unknown)
 
     const indicatorSize =
-        Number(getVariableByName('stepIndicator/size', modes) as unknown) || 36
+        Number(getVariableByName('stepIndicator/size', modes) as unknown)
     const indicatorRadius =
-        Number(getVariableByName('stepIndicator/radius', modes) as unknown) || 9999
+        Number(getVariableByName('stepIndicator/radius', modes) as unknown)
     const indicatorBg =
-        (getVariableByName('stepIndicator/background', modes) as string) ||
-        '#5d00b5'
+        (getVariableByName('stepIndicator/background', modes) as string)
     const indicatorBorderColor =
-        (getVariableByName('stepIndicator/border/color', modes) as string) ||
-        '#5d00b5'
+        (getVariableByName('stepIndicator/border/color', modes) as string)
     const indicatorBorderSize =
-        Number(getVariableByName('stepIndicator/border/size', modes) as unknown) || 1
+        Number(getVariableByName('stepIndicator/border/size', modes) as unknown)
     const iconColor =
-        (getVariableByName('stepIndicator/icon/color', modes) as string) || '#ffffff'
+        (getVariableByName('stepIndicator/icon/color', modes) as string)
     const stepStatusSize =
-        Number(getVariableByName('stepStatus/size', modes) as unknown) || 18
+        Number(getVariableByName('stepStatus/size', modes) as unknown)
 
     const labelFontSize =
-        Number(getVariableByName('stepIndicator/label/fontSize', modes) as unknown) || 12
+        Number(getVariableByName('stepIndicator/label/fontSize', modes) as unknown)
     const labelFontFamily =
-        (getVariableByName('stepIndicator/label/fontFamily', modes) as string) || undefined
+        (getVariableByName('stepIndicator/label/fontFamily', modes) as string)
     const labelLineHeight =
-        Number(getVariableByName('stepIndicator/label/lineHeight', modes) as unknown) || 14
+        Number(getVariableByName('stepIndicator/label/lineHeight', modes) as unknown)
     const labelFontWeight =
-        (getVariableByName('stepIndicator/label/fontWeight', modes) as string) || '500'
+        (getVariableByName('stepIndicator/label/fontWeight', modes) as string)
 
     const lineSize =
-        Number(getVariableByName('steperItem/lineSize', modes) as unknown) || 2
+        Number(getVariableByName('steperItem/lineSize', modes) as unknown)
     const lineColor =
-        (getVariableByName('steperItem/line', modes) as string) || '#5d00b5'
+        (getVariableByName('steperItem/line', modes) as string)
     const badgeWrapGap =
-        Number(getVariableByName('steperItem/badgeWrap/gap', modes) as unknown) || 2
+        Number(getVariableByName('steperItem/badgeWrap/gap', modes) as unknown)
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',

package/src/components/Stepper/StepLabel.tsx

@@ -24,17 +24,15 @@ export function StepLabel({
     style,
 }: StepLabelProps) {
     const titleColor =
-        (getVariableByName('steperItem/title/color', modes) as string) || '#0d0d0f'
+        (getVariableByName('steperItem/title/color', modes) as string)
     const titleFontSize =
-        Number(getVariableByName('steperItem/title/fontSize', modes) as unknown) || 14
+        Number(getVariableByName('steperItem/title/fontSize', modes) as unknown)
     const titleFontFamily =
-        (getVariableByName('steperItem/title/fontFamily', modes) as string) ||
-        undefined
+        (getVariableByName('steperItem/title/fontFamily', modes) as string)
     const titleLineHeight =
-        Number(getVariableByName('steperItem/title/lineHeight', modes) as unknown) ||
-        18
+        Number(getVariableByName('steperItem/title/lineHeight', modes) as unknown)
     const titleFontWeight =
-        (getVariableByName('steperItem/title/fontWeight', modes) as string) || '700'
+        (getVariableByName('steperItem/title/fontWeight', modes) as string)
 
     // The Subtitle (supportingText) and Meta both default to the "Neutral"
     // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
@@ -44,40 +42,31 @@ export function StepLabel({
     const metaModes = { AppearanceBrand: 'Neutral', ...modes }
 
     const subtitleColor =
-        (getVariableByName('steperItem/subtitle/color', subtitleModes) as string) ||
-        '#3d4047'
+        (getVariableByName('steperItem/subtitle/color', subtitleModes) as string)
     const subtitleFontSize =
-        Number(
-            getVariableByName('steperItem/subtitle/fontSize', subtitleModes) as unknown
-        ) || 12
+        Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes) as unknown)
     const subtitleFontFamily =
-        (getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) as string) ||
-        undefined
+        (getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) as string)
     const subtitleLineHeight =
-        Number(
-            getVariableByName('steperItem/subtitle/lineHeight', subtitleModes) as unknown
-        ) || 16
+        Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes) as unknown)
     const subtitleFontWeight =
-        (getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) as string) ||
-        '400'
+        (getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) as string)
 
     const metaColor =
-        (getVariableByName('steperItem/meta/color', metaModes) as string) || '#f7ab21'
+        (getVariableByName('steperItem/meta/color', metaModes) as string)
     const metaFontSize =
-        Number(getVariableByName('steperItem/meta/fontSize', metaModes) as unknown) || 10
+        Number(getVariableByName('steperItem/meta/fontSize', metaModes) as unknown)
     // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
     // Match the literal Figma name to avoid a missing-variable warning.
     const metaFontFamily =
-        (getVariableByName('steperItem/meta/fontFamily Copy', metaModes) as string) ||
-        undefined
+        (getVariableByName('steperItem/meta/fontFamily Copy', metaModes) as string)
     const metaLineHeight =
-        Number(getVariableByName('steperItem/meta/lineHeight', metaModes) as unknown) ||
-        12
+        Number(getVariableByName('steperItem/meta/lineHeight', metaModes) as unknown)
     const metaFontWeight =
-        (getVariableByName('steperItem/meta/fontWeight', metaModes) as string) || '700'
+        (getVariableByName('steperItem/meta/fontWeight', metaModes) as string)
 
     const textGap =
-        Number(getVariableByName('steperItem/textWrap/gap', modes) as unknown) || 2
+        Number(getVariableByName('steperItem/textWrap/gap', modes) as unknown)
 
     const titleStyle: TextStyle = {
         color: titleColor,

package/src/components/Stepper/Stepper.tsx

@@ -22,11 +22,10 @@ export default function Stepper({
     style,
 }: StepperProps) {
     const paddingHorizontal =
-        Number(getVariableByName('stepper/padding/horizontal', modes) as unknown) ||
-        8
+        Number(getVariableByName('stepper/padding/horizontal', modes) as unknown)
     const paddingVertical =
-        Number(getVariableByName('stepper/padding/vertical', modes) as unknown) || 0
-    const gap = Number(getVariableByName('stepper/gap', modes) as unknown) || 2
+        Number(getVariableByName('stepper/padding/vertical', modes) as unknown)
+    const gap = Number(getVariableByName('stepper/gap', modes) as unknown)
 
     const containerStyle: ViewStyle = {
         paddingHorizontal,

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -184,11 +184,9 @@ const defaultFilter = (query: string, option: SuggestiveSearchOption) =>
 function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
-            (getVariableByName('formField/label/color', modes) as string) ||
-            '#000000'
+            (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
@@ -198,8 +196,7 @@ function useFormFieldTokens(modes: Modes) {
             17
         )
         const labelFontWeight =
-            (getVariableByName('formField/label/fontWeight', modes) as string) ||
-            '500'
+            (getVariableByName('formField/label/fontWeight', modes) as string)
 
         const gap = toNumber(getVariableByName('formField/gap', modes), 8)
 
@@ -217,11 +214,9 @@ function useFormFieldTokens(modes: Modes) {
             1.5
         )
         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)
         const inputFontSize = toNumber(
             getVariableByName('formField/input/label/fontSize', modes),
             16
@@ -231,14 +226,11 @@ 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 =
-            (getVariableByName('formField/input/label/fontWeight', modes) as string) ||
-            '400'
+            (getVariableByName('formField/input/label/fontWeight', modes) as string)
         const inputTextColor =
-            (getVariableByName('formField/input/label/color', modes) as string) ||
-            '#24262b'
+            (getVariableByName('formField/input/label/color', modes) as string)
 
         return {
             labelColor,
@@ -265,11 +257,9 @@ function useFormFieldTokens(modes: Modes) {
 function useDropdownItemTextTokens(modes: Modes) {
     return useMemo(() => {
         const foreground =
-            (getVariableByName('dropdownItem/foreground', modes) as string) ||
-            '#000000'
+            (getVariableByName('dropdownItem/foreground', modes) as string)
         const fontFamily =
-            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('dropdownItem/fontFamily', modes) as string)
         const fontSize = toNumber(
             getVariableByName('dropdownItem/fontSize', modes),
             16

package/src/components/SupportText/SupportText.tsx

@@ -53,13 +53,13 @@ function SupportText({
     const modes = { ...globalModes, ...propModes };
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4;
+    const gap = parseInt(getVariableByName('supportText/gap', modes), 10);
 
-    const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12;
-    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16;
-    const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500';
+    const textColor = getVariableByName('supportText/foreground', modes);
+    const fontFamily = getVariableByName('supportText/fontFamily', modes);
+    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10);
+    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10);
+    const fontWeight = getVariableByName('supportText/fontWeight', modes);
 
     // --- Styles ---
     const containerStyle: ViewStyle = {

package/src/components/SupportText/SupportTextIcon.tsx

@@ -29,14 +29,14 @@ function SupportTextIcon({
     const iconName = STATUS_ICON_MAP[status] || 'ic_info';
 
     // Resolve icon size
-    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10);
 
     // Resolve icon color
     // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
     // Using supportText/foreground as default based on common patterns if no specific icon token.
     // If specific tokens exist like 'supportText/icon/color', they should be used.
     // Detailed variables only showed supportText/foreground.
-    const color = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+    const color = getVariableByName('supportText/foreground', modes);
 
     return (
         <View style={style}>

package/src/components/Text/Text.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
@@ -28,10 +28,19 @@ export type TextProps = {
   numberOfLines?: number
   /**
    * When `true`, disables text truncation entirely: 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.
+   * is never shown and any `numberOfLines` clamp is 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 clipping into an
+   * ellipsis. It still wraps onto multiple lines.
    */
   disableTruncation?: boolean
+  /**
+   * When `true`, forces the text 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
   /**
    * Explicit per-instance loading override. When `true`, this `Text` renders
    * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -66,6 +75,7 @@ function Text({
   style,
   numberOfLines,
   disableTruncation,
+  singleLine,
   loading,
   skeletonWidth,
   skeletonLines,
@@ -128,10 +138,18 @@ function Text({
         ? text
         : 'Korem ipsum '
 
+  // 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={[textStyle, style]}
-      {...resolveTruncation(disableTruncation, numberOfLines)}
+      style={[textStyle, style, layoutStyle]}
+      {...truncation}
     >
       {content}
     </RNText>