jfs-components 0.0.5 → 0.0.7

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -35,18 +36,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function IconCapsule({
   iconName = "ic_card",
-  modes = {},
+  modes: propModes = {},
   accessibilityLabel,
   accessibilityRole = "image",
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve design tokens using the provided modes
   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/lib/module/components/IconCapsule/IconCapsule.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","getVariableByName","Icon","jsx","_jsx","IconCapsule","iconName","modes","accessibilityLabel","accessibilityRole","rest","size","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","style","children","name","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,OAAOC,IAAI,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,GAAG,CAAC,CAAC;EACVC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB;EACA,MAAMC,IAAI,GAAGV,iBAAiB,CAAC,kBAAkB,EAAEM,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMK,MAAM,GAAGX,iBAAiB,CAAC,oBAAoB,EAAEM,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMM,eAAe,GAAGZ,iBAAiB,CAAC,wBAAwB,EAAEM,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMO,WAAW,GAAGb,iBAAiB,CAAC,yBAAyB,EAAEM,KAAK,CAAC,IAAI,qBAAqB;EAChG,MAAMQ,UAAU,GAAGd,iBAAiB,CAAC,wBAAwB,EAAEM,KAAK,CAAC,IAAI,CAAC;EAC1E,MAAMS,SAAS,GAAGf,iBAAiB,CAAC,uBAAuB,EAAEM,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMU,QAAQ,GAAGhB,iBAAiB,CAAC,uBAAuB,EAAEM,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMW,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGD,IAAI,GAAG,CAAC,GAAGC,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZO,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGlB,kBAAkB,IAAIF,QAAQ,CAACqB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACEzB,IAAA,CAACJ,IAAI;IACH8B,KAAK,EAAEX,cAAe;IACtBV,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEkB,yBAA0B;IAAA,GAC1ChB,IAAI;IAAAqB,QAAA,eAER3B,IAAA,CAACF,IAAI;MACH8B,IAAI,EAAE1B,QAAS;MACfK,IAAI,EAAEM,QAAS;MACfgB,KAAK,EAAEjB,SAAU;MACjBkB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAEA,eAAe9B,WAAW","ignoreList":[]}
+{"version":3,"names":["React","View","getVariableByName","useTokens","Icon","jsx","_jsx","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","size","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","style","children","name","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAChE,OAAOC,IAAI,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB,MAAM;IAAEJ,KAAK,EAAEK;EAAY,CAAC,GAAGX,SAAS,CAAC,CAAC;EAC1C,MAAMM,KAAK,GAAG;IAAE,GAAGK,WAAW;IAAE,GAAGJ;EAAU,CAAC;EAC9C;EACA,MAAMK,IAAI,GAAGb,iBAAiB,CAAC,kBAAkB,EAAEO,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMO,MAAM,GAAGd,iBAAiB,CAAC,oBAAoB,EAAEO,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMQ,eAAe,GAAGf,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMS,WAAW,GAAGhB,iBAAiB,CAAC,0BAA0B,EAAEO,KAAK,CAAC,IAAI,qBAAqB;EACjG,MAAMU,UAAU,GAAGjB,iBAAiB,CAAC,yBAAyB,EAAEO,KAAK,CAAC,IAAI,CAAC;EAC3E,MAAMW,SAAS,GAAGlB,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACjF,MAAMY,QAAQ,GAAGnB,iBAAiB,CAAC,uBAAuB,EAAEO,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMa,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGD,IAAI,GAAG,CAAC,GAAGC,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZO,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIH,QAAQ,CAACuB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACE3B,IAAA,CAACL,IAAI;IACHiC,KAAK,EAAEX,cAAe;IACtBX,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEmB,yBAA0B;IAAA,GAC1CjB,IAAI;IAAAsB,QAAA,eAER7B,IAAA,CAACF,IAAI;MACHgC,IAAI,EAAE5B,QAAS;MACfO,IAAI,EAAEM,QAAS;MACfgB,KAAK,EAAEjB,SAAU;MACjBkB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAEA,eAAehC,WAAW","ignoreList":[]}

package/lib/module/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/lib/module/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/lib/module/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/lib/module/components/ListGroup/ListGroup.js

@@ -8,37 +8,8 @@ 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.
  */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  const result = React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childChildren = child.props?.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?.modes;
-    const mergedModes = existingModes ? {
-      ...modes,
-      ...existingModes
-    } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *

package/lib/module/components/ListGroup/ListGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","ListGroup","label","listGroupSlot","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","borderColor","borderWidth","gap","labelColor","labelFontSize","labelLineHeight","labelFontFamily","labelFontWeightRaw","labelFontWeight","toString","containerStyle","borderStyle","flexDirection","alignItems","width","labelStyle","color","fontSize","lineHeight","fontFamily","fontWeight","processedSlot","defaultAccessibilityLabel","accessibilityRole","marginBottom","numberOfLines","accessibilityElementsHidden","importantForAccessibility","index","items","isLast","length","wrapperStyle","key"],"sourceRoot":"../../../../src","sources":["components/ListGroup/ListGroup.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","ListGroup","label","listGroupSlot","modes","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","borderColor","borderWidth","gap","labelColor","labelFontSize","labelLineHeight","labelFontFamily","labelFontWeightRaw","labelFontWeight","toString","containerStyle","borderStyle","flexDirection","alignItems","width","labelStyle","color","fontSize","lineHeight","fontFamily","fontWeight","processedSlot","Children","toArray","defaultAccessibilityLabel","accessibilityRole","children","marginBottom","numberOfLines","accessibilityElementsHidden","importantForAccessibility","map","child","index","isValidElement","items","isLast","length","wrapperStyle","key"],"sourceRoot":"../../../../src","sources":["components/ListGroup/ListGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/components/ListItem/ListItem.js

@@ -14,42 +14,8 @@ import { usePressableWebSupport } from '../../utils/web-platform-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.
  */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes, forcedModes) {
-  const result = React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childChildren = child.props?.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?.modes;
-    const mergedModes = forcedModes ? {
-      ...modes,
-      ...(existingModes || {}),
-      ...forcedModes
-    } : existingModes ? {
-      ...modes,
-      ...existingModes
-    } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes, forcedModes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * ListItem component that mirrors the Figma "List Item" component.
  *

package/lib/module/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","NavArrow","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","cloneChildrenWithModes","children","modes","forcedModes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","paddingTop","paddingBottom","paddingLeft","paddingRight","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportColor","supportFontSize","supportLineHeight","supportFontFamily","supportFontWeightRaw","supportFontWeight","baseContainerStyle","sharedLayoutStyle","flexDirection","alignItems","innerContentBaseStyle","flex","verticalContentBaseStyle","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","trailingWrapperStyle","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","restProps","disabled","webPropsVertical","processedLeading","leadingElement","length","renderSupportContent","processedSupportSlot","numberOfLines","processedEndSlot","trailingContent","innerContent","minWidth","direction","accessibilityRole","pressed","opacity","verticalContent"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","NavArrow","usePressableWebSupport","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","modes","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","paddingTop","paddingBottom","paddingLeft","paddingRight","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportColor","supportFontSize","supportLineHeight","supportFontFamily","supportFontWeightRaw","supportFontWeight","baseContainerStyle","sharedLayoutStyle","flexDirection","alignItems","innerContentBaseStyle","flex","verticalContentBaseStyle","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","trailingWrapperStyle","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","restProps","disabled","webPropsVertical","processedLeading","Children","toArray","leadingElement","length","renderSupportContent","processedSupportSlot","numberOfLines","children","processedEndSlot","trailingContent","innerContent","minWidth","direction","accessibilityRole","pressed","opacity","undefined","verticalContent"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/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/lib/module/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/lib/module/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/lib/module/components/NavArrow/NavArrow.js

@@ -20,7 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @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
  */
@@ -36,38 +36,63 @@ function NavArrow({
   const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4;
   const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8;
   const strokeWeight = Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2;
-  const containerWidth = Number(getVariableByName('navArrow/width', modes)) || 6;
-  const containerHeight = Number(getVariableByName('navArrow/height', modes)) || 10;
+
+  // Base dimensions from tokens (these are for Vertical orientation like Back/Forward)
+  const baseContainerWidth = Number(getVariableByName('navArrow/width', modes)) || 6;
+  const baseContainerHeight = Number(getVariableByName('navArrow/height', modes)) || 10;
   const borderRadius = Number(getVariableByName('navArrow/radius', modes)) || 0;
   const backgroundColor = getVariableByName('navArrow/background', modes) || 'transparent';
+
+  // For Down direction, we swap width and height considerations
+  const isDown = direction === 'Down';
   const containerStyle = {
-    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',
     justifyContent: 'center',
     ...(style || {})
   };
-  const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward');
+  const defaultAccessibilityLabel = 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 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}`;
 
-  // 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}`;
+    // For Back, we just flip the Forward arrow
+    if (direction === 'Back') {
+      transform = [{
+        scaleX: -1
+      }];
+    }
+  }
   return /*#__PURE__*/_jsx(View, {
     style: containerStyle,
     accessibilityRole: "image",
     accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
     children: /*#__PURE__*/_jsx(Svg, {
-      width: iconWidth,
-      height: iconHeight,
-      viewBox: `0 0 ${iconWidth} ${iconHeight}`,
-      style: direction === 'Back' ? {
-        transform: [{
-          scaleX: -1
-        }]
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      style: transform ? {
+        transform
       } : undefined,
       children: /*#__PURE__*/_jsx(Path, {
         d: chevronPath,

package/lib/module/components/NavArrow/NavArrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Svg","Path","getVariableByName","jsx","_jsx","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","iconWidth","Number","iconHeight","strokeWeight","containerWidth","containerHeight","borderRadius","backgroundColor","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","chevronPath","accessibilityRole","children","viewBox","transform","scaleX","undefined","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwB,cAAc;AACnD,OAAOC,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAC5C,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAehF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAC;EAChBC,SAAS,GAAG,MAAM;EAClBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACU,CAAC,EAAE;EAChB;EACA,MAAMC,SAAS,GACZT,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,IAAe,SAAS;EAC1E,MAAMK,SAAS,GACbC,MAAM,CAACX,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC9D,MAAMO,UAAU,GACdD,MAAM,CAACX,iBAAiB,CAAC,sBAAsB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC/D,MAAMQ,YAAY,GAChBF,MAAM,CAACX,iBAAiB,CAAC,4BAA4B,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EACrE,MAAMS,cAAc,GAClBH,MAAM,CAACX,iBAAiB,CAAC,gBAAgB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EACzD,MAAMU,eAAe,GACnBJ,MAAM,CAACX,iBAAiB,CAAC,iBAAiB,EAAEK,KAAK,CAAC,CAAC,IAAI,EAAE;EAC3D,MAAMW,YAAY,GAChBL,MAAM,CAACX,iBAAiB,CAAC,iBAAiB,EAAEK,KAAK,CAAC,CAAC,IAAI,CAAC;EAC1D,MAAMY,eAAe,GAClBjB,iBAAiB,CAAC,qBAAqB,EAAEK,KAAK,CAAC,IAAe,aAAa;EAE9E,MAAMa,cAAyB,GAAG;IAChCC,KAAK,EAAEL,cAAc;IACrBM,MAAM,EAAEL,eAAe;IACvBC,YAAY;IACZC,eAAe;IACfI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,IAAIhB,KAAK,IAAI,CAAC,CAAC;EACjB,CAAC;EAED,MAAMiB,yBAAyB,GAC7BhB,kBAAkB,KAAKH,SAAS,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;;EAEzE;EACA;EACA;EACA,MAAMoB,WAAW,GAAG,QAAQd,SAAS,GAAG,CAAC,IAAIE,UAAU,GAAG,CAAC,MAAMA,UAAU,GAAG,CAAC,EAAE;EAEjF,oBACEV,IAAA,CAACL,IAAI;IACHS,KAAK,EAAEY,cAAe;IACtBO,iBAAiB,EAAC,OAAO;IACzBlB,kBAAkB,EAAEgB,yBAA0B;IAAA,GAC1Cf,IAAI;IAAAkB,QAAA,eAERxB,IAAA,CAACJ,GAAG;MACFqB,KAAK,EAAET,SAAU;MACjBU,MAAM,EAAER,UAAW;MACnBe,OAAO,EAAE,OAAOjB,SAAS,IAAIE,UAAU,EAAG;MAC1CN,KAAK,EAAEF,SAAS,KAAK,MAAM,GAAG;QAAEwB,SAAS,EAAE,CAAC;UAAEC,MAAM,EAAE,CAAC;QAAE,CAAC;MAAE,CAAC,GAAGC,SAAU;MAAAJ,QAAA,eAE1ExB,IAAA,CAACH,IAAI;QACHgC,CAAC,EAAEP,WAAY;QACfQ,MAAM,EAAEvB,SAAU;QAClBwB,WAAW,EAAEpB,YAAa;QAC1BqB,aAAa,EAAC,OAAO;QACrBC,cAAc,EAAC,OAAO;QACtBC,IAAI,EAAC;MAAM,CACZ;IAAC,CACC;EAAC,CACF,CAAC;AAEX;AAEA,eAAejC,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","View","Svg","Path","getVariableByName","jsx","_jsx","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","iconWidth","Number","iconHeight","strokeWeight","baseContainerWidth","baseContainerHeight","borderRadius","backgroundColor","isDown","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","svgWidth","svgHeight","chevronPath","transform","scaleX","accessibilityRole","children","viewBox","undefined","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/components/PageTitle/PageTitle.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * PageTitle component that mirrors the Figma "Page Title" component.
@@ -21,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function PageTitle({
   title = 'Page Title',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   numberOfLines,
@@ -29,6 +30,14 @@ function PageTitle({
   accessibilityHint,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
   // Resolve container padding tokens
   const paddingHorizontal = getVariableByName('pageTitle/padding/horizontal', modes) || 16;
   const paddingVertical = getVariableByName('pageTitle/padding/vertical', modes) || 8;