jfs-components 0.1.12 → 0.1.17

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import {
     View,
+    Text,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -8,7 +9,6 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import { formatIndianNumber } from '../../utils/number-utils'
-import Title from '../Title/Title'
 import LinearProgress from '../LinearProgress/LinearProgress'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
@@ -40,6 +40,14 @@ export type SavingsGoalSummaryItem = {
 }
 
 export type SavingsGoalSummaryProps = {
+    /**
+     * Optional caption rendered directly above the percentage value
+     * (e.g. `"Credit usage"`), matching the Figma `savingsGoalSummary/label`
+     * slot. Pass a string for token-styled text, or any `ReactNode` for full
+     * control. Omit (the default) to hide it — preserving the original
+     * value-only layout for existing callers.
+     */
+    label?: React.ReactNode
     /**
      * Currency symbol (e.g. `'₹'`, `'$'`) prefixed to every legend value.
      * Defaults to `'₹'`. The symbol is rendered as part of the formatted
@@ -82,6 +90,8 @@ export type SavingsGoalSummaryProps = {
      * computed from `current` / `target` and cannot be replaced.
      */
     titleStyle?: StyleProp<TextStyle>
+    /** Override styles for the `label` caption text (string labels only). */
+    labelStyle?: StyleProp<TextStyle>
     /** Override the inner legend container styles. */
     legendStyle?: StyleProp<ViewStyle>
 }
@@ -122,6 +132,7 @@ const DEFAULT_TARGET: SavingsGoalSummaryItem = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+    label,
     currency = '₹',
     current = DEFAULT_CURRENT,
     target = DEFAULT_TARGET,
@@ -129,6 +140,7 @@ function SavingsGoalSummary({
     modes = EMPTY_MODES,
     style,
     titleStyle,
+    labelStyle,
     legendStyle,
 }: SavingsGoalSummaryProps) {
     // Merge caller modes on top of the defaults so callers can override
@@ -182,6 +194,66 @@ function SavingsGoalSummary({
     const legendGap =
         (getVariableByName('savingsGoalSummary/legend/gap', mergedModes) as number | null) ?? 16
 
+    // Percentage value typography — driven by the dedicated
+    // `savingsGoalSummary/value/*` tokens (Figma 29 / 900) rather than the
+    // generic `Title` tokens, so the value matches the design exactly.
+    const valueFontSize =
+        (getVariableByName('savingsGoalSummary/value/fontSize', mergedModes) as number | null) ?? 29
+    const valueFontFamily =
+        (getVariableByName('savingsGoalSummary/value/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const valueRawLineHeight =
+        (getVariableByName('savingsGoalSummary/value/lineHeight', mergedModes) as number | null) ?? 29
+    // The value tokens ship with `lineHeight === fontSize` (29/29); clamp to
+    // ~1.2x so descenders never clip on native (same guard `Title` uses).
+    const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2))
+    const valueFontWeight = String(
+        getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900,
+    ) as TextStyle['fontWeight']
+    const valueColor =
+        (getVariableByName('savingsGoalSummary/value/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+    // (Figma 12 / 400). Only rendered when a `label` is supplied.
+    const labelFontSize =
+        (getVariableByName('savingsGoalSummary/label/fontSize', mergedModes) as number | null) ?? 12
+    const labelFontFamily =
+        (getVariableByName('savingsGoalSummary/label/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const labelLineHeight =
+        (getVariableByName('savingsGoalSummary/label/lineHeight', mergedModes) as number | null) ?? 16
+    const labelFontWeight = String(
+        getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400,
+    ) as TextStyle['fontWeight']
+    const labelColor =
+        (getVariableByName('savingsGoalSummary/label/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    const labelNode =
+        label == null || label === false ? null : typeof label === 'string' ? (
+            <Text
+                style={[
+                    {
+                        color: labelColor,
+                        fontFamily: labelFontFamily,
+                        fontSize: labelFontSize,
+                        lineHeight: labelLineHeight,
+                        fontWeight: labelFontWeight,
+                        width: '100%',
+                    },
+                    labelStyle,
+                ]}
+            >
+                {label}
+            </Text>
+        ) : (
+            (() => {
+                const processed = cloneChildrenWithModes(label, mergedModes)
+                return processed.length === 1 ? processed[0] : processed
+            })()
+        )
+
     const customLegend = children
         ? cloneChildrenWithModes(children, mergedModes)
         : null
@@ -220,14 +292,32 @@ function SavingsGoalSummary({
                 },
                 style,
             ]}
-            accessibilityLabel={`Savings goal progress, ${percentageLabel}`}
+            accessibilityLabel={
+                typeof label === 'string'
+                    ? `${label}, ${percentageLabel}`
+                    : `Savings goal progress, ${percentageLabel}`
+            }
         >
-            <Title
-                title={percentageLabel}
-                modes={mergedModes}
-                style={TITLE_CONTAINER_STYLE}
-                textStyle={titleStyle}
-            />
+            <View style={HEADER_GROUP_STYLE}>
+                {labelNode}
+                <Text
+                    style={[
+                        {
+                            color: valueColor,
+                            fontFamily: valueFontFamily,
+                            fontSize: valueFontSize,
+                            lineHeight: valueLineHeight,
+                            fontWeight: valueFontWeight,
+                            width: '100%',
+                        },
+                        titleStyle,
+                    ]}
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                >
+                    {percentageLabel}
+                </Text>
+            </View>
 
             <LinearProgress value={resolvedProgress} modes={mergedModes} />
 
@@ -260,11 +350,13 @@ function formatLegendValue(value: number | undefined, currency: string): string
     return formatIndianNumber(value, { prefix: currency })
 }
 
-// Neutralise the `Title` component's default page-level padding so it sits
-// flush inside the summary card (the parent container owns spacing via `gap`).
-const TITLE_CONTAINER_STYLE: ViewStyle = {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
+// Groups the optional caption ("Credit usage") tightly above the percentage
+// value. The parent container owns the larger spacing to the bar via `gap`,
+// so this only needs the small label→value gap.
+const HEADER_GROUP_STYLE: ViewStyle = {
+    width: '100%',
+    gap: 2,
+    alignItems: 'flex-start',
 }
 
 export default SavingsGoalSummary

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,