jfs-components 0.1.8 → 0.1.17

package/src/components/Slider/Slider.tsx

@@ -19,7 +19,7 @@ import {
 } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -100,6 +100,12 @@ export interface SliderProps {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for screen readers. */
     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
 }
 
 const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
@@ -151,6 +157,7 @@ const Slider = forwardRef<SliderHandle, SliderProps>(function Slider(
         modes = EMPTY_MODES,
         style,
         accessibilityLabel,
+        disableTruncation,
     },
     ref
 ) {
@@ -365,7 +372,7 @@ const Slider = forwardRef<SliderHandle, SliderProps>(function Slider(
             {renderTooltip ? (
                 renderTooltip(currentValue)
             ) : (
-                <Text style={tokens.tooltipLabel} numberOfLines={1}>
+                <Text style={tokens.tooltipLabel} {...resolveTruncation(disableTruncation, 1)}>
                     {valueText}
                 </Text>
             )}

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES, injectChildStyle } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type StackLayoutDirection = 'vertical' | 'horizontal'
+
+export type StackProps = ViewProps & {
+  /**
+   * Content laid out inside the stack. `modes` are cascaded to every child via
+   * {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * Main-axis direction for stack children. Matches the Figma Slot variant:
+   * - `vertical` (default): stacks children in a column
+   * - `horizontal`: arranges children in a row
+   */
+  layoutDirection?: StackLayoutDirection
+  /**
+   * Alignment along the cross axis.
+   * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+   */
+  alignCrossAxis?: ViewStyle['alignItems']
+  /**
+   * Distribution along the main axis (maps to `justifyContent`).
+   */
+  justifyMainAxis?: ViewStyle['justifyContent']
+  /**
+   * Only meaningful when `layoutDirection` is `horizontal`.
+   *
+   * When true, forces every child to share the height of the tallest child. The
+   * height is enforced by the stack itself (`alignItems: 'stretch'` plus an
+   * injected `alignSelf: 'stretch'` on each child), so children can no longer
+   * opt out via their own `alignSelf`. Children with an explicit `height` keep
+   * that height, since a fixed cross-axis dimension defeats stretch in Yoga.
+   *
+   * Overrides `alignCrossAxis` when it applies.
+   */
+  equalHeight?: boolean
+  /**
+   * Only meaningful when `layoutDirection` is `vertical`.
+   *
+   * When true, forces every child to fill the full width of the stack. The width
+   * is enforced by the stack itself (`alignItems: 'stretch'` plus an injected
+   * `alignSelf: 'stretch'` on each child), so children can no longer opt out via
+   * their own `alignSelf`. Children with an explicit `width` keep that width,
+   * since a fixed cross-axis dimension defeats stretch in Yoga.
+   *
+   * Overrides `alignCrossAxis` when it applies.
+   */
+  fillWidth?: boolean
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Modes
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Stack — a token-driven layout container for grouped content.
+ *
+ * Use `Stack` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Stack layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Stack>
+ * </ActionFooter>
+ * ```
+ *
+ * @remarks
+ * Previously named `Slot`. The `Slot` export is preserved as a deprecated alias
+ * for backward compatibility.
+ */
+function Stack({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  equalHeight = false,
+  fillWidth = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: StackProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const gap = (getVariableByName('slot/gap', modes) ?? 8) as number
+    const isHorizontal = layoutDirection === 'horizontal'
+
+    // Cross-axis stretch maps to "equal height" for a row and "fill width" for a
+    // column. Honour whichever flag matches the active direction.
+    const stretchCrossAxis = isHorizontal ? equalHeight : fillWidth
+
+    const container: ViewStyle = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: stretchCrossAxis
+        ? 'stretch'
+        : alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap,
+    }
+
+    const moded = children ? cloneChildrenWithModes(children, modes) : null
+    const processed = stretchCrossAxis && moded
+      ? injectChildStyle(moded, { alignSelf: 'stretch' })
+      : moded
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis, equalHeight, fillWidth])
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Stack)

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
@@ -560,7 +550,16 @@ function SuggestiveSearch({
         color: tokens.inputTextColor,
         fontFamily: tokens.inputFontFamily,
         fontSize: tokens.inputFontSize,
-        lineHeight: tokens.inputLineHeight,
+        // iOS-only quirk: a single-line RNTextInput with `lineHeight` (45) far
+        // larger than `fontSize` (16) sinks the text to the bottom of the box
+        // instead of centering — iOS puts all the extra space ABOVE the glyphs.
+        // The row already owns the 45px height via `minHeight` + centering, so
+        // omit lineHeight on iOS (UITextField centers natively) and keep the
+        // token value on Android/Web where it renders correctly. Same fix as
+        // FormField — see facebook/react-native#39145 / #28012.
+        ...(Platform.OS === 'ios'
+            ? null
+            : { lineHeight: tokens.inputLineHeight }),
         fontWeight: tokens.inputFontWeight as TextStyle['fontWeight'],
         padding: 0,
         margin: 0,

package/src/components/SummaryTile/SummaryTile.tsx

@@ -9,7 +9,7 @@ import {
     type PressableStateCallbackType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Button from '../Button/Button'
 import NavArrow from '../NavArrow/NavArrow'
 import StrengthIndicator, {
@@ -60,6 +60,12 @@ export type SummaryTileProps = {
     descriptionStyle?: StyleProp<TextStyle>
     /** Accessibility label override (defaults to `title`). */
     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
 }
 
 /**
@@ -84,6 +90,7 @@ function SummaryTile({
     titleStyle,
     descriptionStyle,
     accessibilityLabel,
+    disableTruncation,
 }: SummaryTileProps) {
     const containerGap =
         (getVariableByName('summaryTile/gap', modes) as number | null) ?? 8
@@ -179,7 +186,7 @@ function SummaryTile({
                     {title ? (
                         <Text
                             style={[titleTextStyle, titleStyle]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {title}
                         </Text>

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}>