jfs-components 0.0.6 → 0.0.7

package/src/components/IconButton/IconButton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as IconButtonStories from './IconButton.stories';
 import IconButton from './IconButton';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -28,6 +28,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/IconCapsule/IconCapsule.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as IconCapsuleStories from './IconCapsule.stories';
 import IconCapsule from './IconCapsule';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** M | L | S
 - **Default:** M
 
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
@@ -24,6 +28,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>
@@ -62,11 +70,11 @@ This component uses the following design token collections. Each collection supp
 This component uses the following design tokens, resolved through `getVariableByName`:
 
 - **`iconCapsule/background`**
+- **`iconCapsule/border/color`**
+- **`iconCapsule/border/size`**
+- **`iconCapsule/icon/color`**
 - **`iconCapsule/icon/size`**
 - **`iconCapsule/radius`**
 - **`iconCapsule/size`**
-- **`iconCapsuleborder/color`**
-- **`iconCapsuleborder/size`**
-- **`iconCapsuleicon/color`**
 
 All tokens support mode-based theming through the `modes` prop.

package/src/components/IconCapsule/IconCapsule.tsx

@@ -52,9 +52,9 @@ function IconCapsule({
   const size = getVariableByName('iconCapsule/size', modes) || 42
   const radius = getVariableByName('iconCapsule/radius', modes) || 9999
   const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159'
-  const borderColor = getVariableByName('iconCapsuleborder/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = getVariableByName('iconCapsuleborder/size', modes) || 1
-  const iconColor = getVariableByName('iconCapsuleicon/color', modes) || '#0f0d0a'
+  const borderColor = getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)'
+  const borderSize = getVariableByName('iconCapsule/border/size', modes) || 1
+  const iconColor = getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a'
   const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18
 
   // Convert radius to React Native format (if 9999, use size/2 for perfect circle)

package/src/components/Introduction.mdx

@@ -1,102 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction" />
 
-# Welcome to React Native Storybook
-
-Welcome to the component library documentation for this React Native project. This Storybook instance provides comprehensive documentation and interactive examples of all components in the application.
-
-## What is Storybook?
-
-Storybook is a tool for building UI components in isolation. It makes development, testing, and documentation easier by providing a sandbox environment where you can:
-
-- **Develop components in isolation** - Build components without worrying about app-specific dependencies
-- **Test edge cases** - Easily test components with different props and states
-- **Document components** - Create living documentation that stays in sync with your code
-- **Share with your team** - Provide a visual reference for designers and developers
-
-## Documentation Contract
-
-Every component page now follows a consistent template:
-
-- **Accessibility** — how to label, hint, and expose roles/states so assistive tech users get the right cues.
-- **Anatomy** — key slots/parts you can compose or override (leading/trailing, slots, tokens).
-- **Usage Constraints** — safe overrides, layout expectations, and behaviors to avoid.
-
-Use these sections as a checklist when creating or reviewing stories so guidance stays close to the API.
-
-## Performance Panel
-
-A lightweight performance panel is enabled for all stories. Open the **Performance** addon in the Storybook toolbar to inspect mount/remount timings and interaction costs. Use it to:
-
-- Compare render timing between variants without creating extra stories.
-- Spot regressions when props or modes change.
-- Validate that heavy children (lists, drawers, sheets) still mount within budget.
-
-## Getting Started
-
-### Running Storybook
-
-#### For Web (Development)
-```bash
-yarn storybook-web
-```
-This will start Storybook on `http://localhost:6006`
-
-#### For React Native (iOS/Android)
-```bash
-# iOS
-yarn ios
-
-# Android
-yarn android
-```
-
-### Building Storybook for Production
-```bash
-yarn build:storybook-web
-```
-
-## Component Organization
-
-Components are organized in the `src/components` directory. Each component typically includes:
-
-- **Component file** - The main component implementation
-- **Story file** - Interactive examples and test cases
-- **Documentation** - Comprehensive documentation with usage examples
-
-## Available Components
-
-### Avatar
-- **Avatar** - A flexible avatar component that displays user profile pictures or monogram initials. Supports multiple size modes and is fully integrated with Figma design tokens.
-
-### IconCapsule
-- **IconCapsule** - A flexible icon capsule component that displays an icon within a styled circular or rounded container. Supports different icons and appearance modes, fully integrated with Figma design tokens.
-
-## Documentation Features
-
-This Storybook instance includes:
-
-- ✅ **Automatic documentation** - Generated from JSDoc comments and component metadata
-- ✅ **Interactive examples** - Live, editable component examples
-- ✅ **Props documentation** - Automatic props table generation
-- ✅ **MDX support** - Rich documentation with Markdown and JSX
-
-## Best Practices
-
-When creating new components:
-
-1. **Add JSDoc comments** - Document your components with JSDoc for automatic documentation
-2. **Create stories** - Add multiple stories showing different states and use cases
-3. **Use TypeScript/PropTypes** - Define prop types for better documentation
-4. **Write MDX docs** - Create comprehensive documentation pages when needed
-
-## Resources
-
-- [Storybook Documentation](https://storybook.js.org/)
-- [React Native Storybook](https://github.com/storybookjs/react-native)
-
----
-
-Happy coding! 🚀
+# Introduction
 
+Welcome to the JFS Components Library.

package/src/components/LazyList/LazyList.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as LazyListStories from './LazyList.stories';
 import LazyList from './LazyList';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/ListGroup/ListGroup.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as ListGroupStories from './ListGroup.stories';
 import ListGroup from './ListGroup';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,6 +13,10 @@ Helper function to recursively clone children and pass modes prop to components
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Title Level
 - **Modes:** Default | Bold
 - **Default:** Default

package/src/components/ListGroup/ListGroup.tsx

@@ -6,45 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>
-): React.ReactNode[] {
-  const result = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
-
-    // Recursively process children if they exist
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })
-  return result || []
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type ListGroupProps = {
   label?: string;
@@ -126,7 +88,7 @@ function ListGroup({
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group"
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole="list"
       accessibilityLabel={defaultAccessibilityLabel}
@@ -134,8 +96,8 @@ function ListGroup({
       {...rest}
     >
       {label ? (
-        <Text 
-          style={[labelStyle, processedSlot && { marginBottom: gap }]} 
+        <Text
+          style={[labelStyle, processedSlot && { marginBottom: gap }]}
           numberOfLines={1}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
@@ -153,7 +115,7 @@ function ListGroup({
             const items = React.Children.toArray(processedSlot)
             const isLast = index === items.length - 1
             const wrapperStyle = !isLast ? { marginBottom: gap } : {}
-            
+
             return (
               <View key={child.key || `wrapper-${index}`} style={wrapperStyle}>
                 {child}

package/src/components/ListItem/ListItem.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as ListItemStories from './ListItem.stories';
 import ListItem from './ListItem';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -26,6 +26,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ### Horizontal Layout with NavArrow

package/src/components/ListItem/ListItem.tsx

@@ -12,52 +12,7 @@ import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/
  * @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
  *                      Useful for slots that need to enforce specific context values.
  */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>,
-  forcedModes?: Record<string, any>
-): React.ReactNode[] {
-  const result = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them,
-    // then forcedModes (if provided) are applied last and can never be overridden
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = forcedModes
-      ? { ...modes, ...(existingModes || {}), ...forcedModes }
-      : existingModes
-        ? { ...modes, ...existingModes }
-        : modes
-
-    // Recursively process children if they exist
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes,
-          forcedModes
-        )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })
-  return result || []
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type ListItemProps = {
   layout?: 'Vertical' | 'Horizontal';
@@ -179,15 +134,15 @@ function ListItem({
   const sharedLayoutStyle: ViewStyle =
     layout === 'Horizontal'
       ? {
-          flexDirection: 'row' as const,
-          alignItems: 'center' as const,
-          gap,
-        }
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap,
+      }
       : {
-          flexDirection: 'column' as const,
-          alignItems: 'center' as const,
-          gap,
-        }
+        flexDirection: 'column' as const,
+        alignItems: 'center' as const,
+        gap,
+      }
 
   const innerContentBaseStyle: ViewStyle = {
     flexDirection: 'row',
@@ -224,8 +179,8 @@ function ListItem({
 
 
   // Generate default accessibility label from title and supportText if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || 
-    (layout === 'Horizontal' 
+  const defaultAccessibilityLabel = accessibilityLabel ||
+    (layout === 'Horizontal'
       ? `${title}${showSupportText && supportText ? `, ${supportText}` : ''}`
       : supportText)
 
@@ -330,8 +285,8 @@ function ListItem({
           accessibilityRole="button"
           accessibilityLabel={defaultAccessibilityLabel}
           accessibilityHint={accessibilityHint}
-          accessibilityState={{ 
-            ...accessibilityState 
+          accessibilityState={{
+            ...accessibilityState
           }}
           onPress={onPress}
           style={({ pressed }) => [
@@ -374,8 +329,8 @@ function ListItem({
         accessibilityRole="button"
         accessibilityLabel={defaultAccessibilityLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityState={{ 
-          ...accessibilityState 
+        accessibilityState={{
+          ...accessibilityState
         }}
         onPress={onPress}
         style={({ pressed }) => [

package/src/components/MediaCard/MediaCard.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as MediaCardStories from './MediaCard.stories';
 import MediaCard from './MediaCard';
 import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,6 +13,10 @@ This component uses the following design token collections. Each collection supp
 ### Contrast Context
 - **Modes:** on dark | on light
 - **Default:** on dark
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/MerchantProfile/MerchantProfile.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as MerchantProfileStories from './MerchantProfile.stories';
 import MerchantProfile from './MerchantProfile';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/MoneyValue/MoneyValue.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as MoneyValueStories from './MoneyValue.stories';
 import MoneyValue from './MoneyValue';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,8 +17,12 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Context3
-- **Modes:** Default | Transaction Bubble
+- **Modes:** Default | Transaction Bubble | Balance
 - **Default:** Default
 ## Usage
 

package/src/components/NavArrow/NavArrow.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as NavArrowStories from './NavArrow.stories';
 import NavArrow from './NavArrow';
 
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Context2
 - **Modes:** Default | AppBar
 - **Default:** Default

package/src/components/NavArrow/NavArrow.tsx

@@ -3,10 +3,10 @@ import { View, type ViewStyle } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
-type NavArrowDirection = 'Back' | 'Forward'
+type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
 type NavArrowProps = {
-  /** Direction of the arrow: 'Back' (left chevron) or 'Forward' (right chevron) */
+  /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
   direction?: NavArrowDirection
   /** Modes used to resolve design tokens */
   modes?: Record<string, any>
@@ -31,7 +31,7 @@ type NavArrowProps = {
  *
  * @component
  * @param {Object} props
- * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {'Back'|'Forward'|'Down'} [props.direction='Back'] - Arrow direction
  * @param {Object} [props.modes={}] - Modes for design token resolution
  * @param {Object} [props.style] - Additional container styles
  */
@@ -51,18 +51,25 @@ function NavArrow({
     Number(getVariableByName('navArrow/icon/height', modes)) || 8
   const strokeWeight =
     Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
-  const containerWidth =
+
+  // Base dimensions from tokens (these are for Vertical orientation like Back/Forward)
+  const baseContainerWidth =
     Number(getVariableByName('navArrow/width', modes)) || 6
-  const containerHeight =
+  const baseContainerHeight =
     Number(getVariableByName('navArrow/height', modes)) || 10
+
   const borderRadius =
     Number(getVariableByName('navArrow/radius', modes)) || 0
   const backgroundColor =
     (getVariableByName('navArrow/background', modes) as string) || 'transparent'
 
+  // For Down direction, we swap width and height considerations
+  const isDown = direction === 'Down'
+
   const containerStyle: ViewStyle = {
-    width: containerWidth,
-    height: containerHeight,
+    // If Down, we use the height token for width and width token for height
+    width: isDown ? baseContainerHeight : baseContainerWidth,
+    height: isDown ? baseContainerWidth : baseContainerHeight,
     borderRadius,
     backgroundColor,
     alignItems: 'center',
@@ -71,12 +78,37 @@ function NavArrow({
   }
 
   const defaultAccessibilityLabel =
-    accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward')
+    accessibilityLabel ||
+    (direction === 'Back'
+      ? 'Go back'
+      : direction === 'Forward'
+        ? 'Go forward'
+        : 'Go down')
+
+  // Determine SVG dimensions based on orientation
+  // For Down, we swap width/height so the layout box is correct (8x4 instead of 4x8)
+  const svgWidth = isDown ? iconHeight : iconWidth
+  const svgHeight = isDown ? iconWidth : iconHeight
 
-  // SVG path for chevron - draws a simple ">" shape
-  // For Back direction, we flip horizontally with scaleX(-1)
-  // The path creates a chevron pointing right by default
-  const chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`
+  // SVG path generation
+  let chevronPath
+  let transform
+
+  if (isDown) {
+    // Arrow pointing down: M1 1 L[mid] [bottom] L[right] 1
+    // Width is iconHeight (8), Height is iconWidth (4)
+    // Tip at (4, 3), Left (1, 1), Right (7, 1)
+    chevronPath = `M1 1L${svgWidth / 2} ${svgHeight - 1}L${svgWidth - 1} 1`
+  } else {
+    // Arrow pointing right (Forward)
+    // Width is iconWidth (4), Height is iconHeight (8)
+    chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`
+
+    // For Back, we just flip the Forward arrow
+    if (direction === 'Back') {
+      transform = [{ scaleX: -1 }]
+    }
+  }
 
   return (
     <View
@@ -86,10 +118,10 @@ function NavArrow({
       {...rest}
     >
       <Svg
-        width={iconWidth}
-        height={iconHeight}
-        viewBox={`0 0 ${iconWidth} ${iconHeight}`}
-        style={direction === 'Back' ? { transform: [{ scaleX: -1 }] } : undefined}
+        width={svgWidth}
+        height={svgHeight}
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        style={transform ? { transform } : undefined}
       >
         <Path
           d={chevronPath}

package/src/components/PageTitle/PageTitle.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as PageTitleStories from './PageTitle.stories';
 import PageTitle from './PageTitle';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/Screen/Screen.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ScreenStories from './Screen.stories';
+import Screen from './Screen';
+
+<Meta of={ScreenStories} />
+
+# Screen
+
+The `Screen` component acts as the outer most container for a page, providing the correct background color based on the current mode.
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import Screen from 'jfs-components/src/components/Screen/Screen';
+
+function MyPage(props) {
+  return (
+    <Screen modes={props.modes}>
+      {/* Content goes here */}
+    </Screen>
+  );
+}
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={ScreenStories.Default} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`screen/body/background`**
+
+All tokens support mode-based theming through the `modes` prop.