jfs-components 0.0.62 → 0.0.63

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

@@ -1,21 +1,111 @@
 "use strict";
 
-import React, { useMemo } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-
-/**
- * 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.
- *
- * @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 { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Forced modes for the endSlot — `Context: 'ListItem'` can never be
+// overridden by external modes. Frozen so identity is stable across renders.
+const END_SLOT_FORCED_MODES = Object.freeze({
+  Context: 'ListItem'
+});
+
+// Pressed visual is applied on the host view through Pressable's style
+// callback, so a scroll-cancelled touch never schedules a React render.
+const pressedOverlayStyle = {
+  opacity: 0.85
+};
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes) tuple.
+// ---------------------------------------------------------------------------
+
+function resolveListItemTokens(modes) {
+  const resolvedModes = {
+    ...modes,
+    Context: 'ListItem'
+  };
+  const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8;
+  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0;
+  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0;
+  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
+  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
+  const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
+  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a';
+  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14;
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16;
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System';
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14';
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12;
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14;
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System';
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500;
+  const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
+  return {
+    baseContainerStyle: {
+      paddingTop: paddingTop,
+      paddingBottom: paddingBottom,
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight
+    },
+    horizontalLayoutStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap
+    },
+    verticalLayoutStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap
+    },
+    innerContentBaseStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      gap
+    },
+    verticalContentBaseStyle: {
+      alignItems: 'center',
+      gap
+    },
+    titleTextStyle: {
+      color: titleColor,
+      fontSize: titleFontSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight
+    },
+    supportTextStyle: {
+      color: supportColor,
+      fontSize: supportFontSize,
+      lineHeight: supportLineHeight,
+      fontFamily: supportFontFamily,
+      fontWeight: supportFontWeight
+    },
+    trailingWrapperStyle: {
+      marginLeft: gap / 2
+    },
+    textWrapGap,
+    resolvedModes
+  };
+}
+const verticalSupportTextOverride = {
+  textAlign: 'center'
+};
+
 /**
  * ListItem component that mirrors the Figma "List Item" component.
  *
@@ -47,8 +137,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes])`.
+ *  - The pressed visual is applied via Pressable's `style={({pressed}) => ...}`
+ *    callback so RN updates the host view directly — no React render is
+ *    scheduled by a touch. On iOS the touch is additionally delayed via
+ *    `unstable_pressDelay={130}` so a scroll-cancelled tap never even
+ *    transiently applies the pressed style. This is the fix for the
+ *    "People / Setup card flicker during scroll" report.
+ *  - User-supplied event handlers are read through a ref so the wrapper
+ *    handlers stay referentially stable across renders.
+ *  - The component is wrapped in `React.memo`.
  */
-function ListItem({
+function ListItemImpl({
   layout = 'Vertical',
   title = 'Title',
   supportText = 'Support Text',
@@ -57,7 +159,7 @@ function ListItem({
   supportSlot,
   endSlot,
   navArrow = true,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   style,
   contentStyle,
@@ -67,89 +169,21 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }) {
-  const resolvedModes = {
-    ...modes,
-    "Context": "ListItem"
-  };
+  const tokens = useMemo(() => resolveListItemTokens(modes), [modes]);
 
-  // Resolve container spacing tokens
-  const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8;
-  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0;
-  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0;
-  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
-  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
-  const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
-
-  // Title typography (horizontal layout)
-  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a';
-  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14;
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16;
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System';
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700;
-  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-
-  // Support text typography (used in both layouts)
-  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14';
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12;
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14;
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System';
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500;
-  const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
-  const baseContainerStyle = {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-  const sharedLayoutStyle = layout === 'Horizontal' ? {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap
-  } : {
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap
-  };
-  const innerContentBaseStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    gap
-  };
-  const verticalContentBaseStyle = {
-    alignItems: 'center',
-    gap
-  };
-  const titleTextStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    lineHeight: titleLineHeight,
-    fontFamily: titleFontFamily,
-    fontWeight: titleFontWeight
-  };
-  const supportTextStyle = {
-    color: supportColor,
-    fontSize: supportFontSize,
-    lineHeight: supportLineHeight,
-    fontFamily: supportFontFamily,
-    fontWeight: supportFontWeight
-  };
-  const trailingWrapperStyle = useMemo(() => ({
-    marginLeft: gap / 2
-  }), [gap]);
+  // Mirror user-supplied handlers in a ref so our wrappers can stay
+  // referentially stable. Without this, every parent re-render hands
+  // Pressable a fresh function identity for each event prop.
+  const userHandlersRef = useRef({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
 
   // Generate default accessibility label from title and supportText if not provided
   const defaultAccessibilityLabel = accessibilityLabel || (layout === 'Horizontal' ? `${title}${showSupportText && supportText ? `, ${supportText}` : ''}` : supportText);
 
-  // Get web platform support props (only used when onPress is defined)
-  const webPropsHorizontal = usePressableWebSupport({
-    restProps: rest,
-    onPress,
-    disabled: false,
-    accessibilityLabel: defaultAccessibilityLabel,
-    webAccessibilityProps
-  });
-  const webPropsVertical = usePressableWebSupport({
+  // Single web-platform support payload — the previous version called
+  // `usePressableWebSupport` twice with identical args, which was dead work.
+  const webProps = usePressableWebSupport({
     restProps: rest,
     onPress,
     disabled: false,
@@ -157,60 +191,79 @@ function ListItem({
     webAccessibilityProps
   });
 
-  // Process leading slot to pass modes to children
-  const processedLeading = leading ? cloneChildrenWithModes(React.Children.toArray(leading), resolvedModes) : [];
-  // Extract single element if array has one element, otherwise use array
-  const leadingElement = processedLeading.length > 0 ? processedLeading.length === 1 ? processedLeading[0] : processedLeading : /*#__PURE__*/_jsx(IconCapsule, {
-    modes: resolvedModes,
-    accessibilityLabel: undefined
-  });
-  const renderSupportContent = () => {
-    if (supportSlot) {
-      // Process supportSlot to pass modes to children
-      const processedSupportSlot = cloneChildrenWithModes(React.Children.toArray(supportSlot), resolvedModes);
-      // Extract single element if array has one element, otherwise use array
-      return processedSupportSlot.length === 1 ? processedSupportSlot[0] : processedSupportSlot;
+  // Process leading slot to pass modes to children. Memoized on
+  // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
+  const leadingElement = useMemo(() => {
+    const processed = leading ? cloneChildrenWithModes(React.Children.toArray(leading), tokens.resolvedModes) : [];
+    if (processed.length === 0) {
+      return /*#__PURE__*/_jsx(IconCapsule, {
+        modes: tokens.resolvedModes,
+        accessibilityLabel: undefined
+      });
     }
+    return processed.length === 1 ? processed[0] : processed;
+  }, [leading, tokens.resolvedModes]);
+  const processedSupportSlot = useMemo(() => {
+    if (!supportSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(supportSlot), tokens.resolvedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [supportSlot, tokens.resolvedModes]);
+  const processedEndSlot = useMemo(() => {
+    if (!endSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(endSlot), tokens.resolvedModes, END_SLOT_FORCED_MODES);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [endSlot, tokens.resolvedModes]);
+  const renderSupportContent = () => {
+    if (processedSupportSlot) return processedSupportSlot;
 
-    // Default support text (used for:
-    //  - vertical layout main text
-    //  - horizontal layout secondary line)
+    // Default support text:
+    //  - vertical layout: main text (line-broken on spaces)
+    //  - horizontal layout: secondary line (clamped to 2 lines)
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/_jsx(Text, {
-      style: [supportTextStyle, layout === 'Vertical' ? {
-        textAlign: 'center'
-      } : undefined],
+      style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
       numberOfLines: layout === 'Horizontal' ? 2 : undefined,
       children: displayText
     });
   };
+
+  // Stable handlers — user-supplied callbacks are forwarded via ref.
+  const handlePressIn = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const horizontalContainerStyleArray = useMemo(() => [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style], [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]);
+  const verticalContainerStyleArray = useMemo(() => [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style], [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]);
+  const horizontalPressableStyle = useCallback(({
+    pressed
+  }) => [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, pressed ? pressedOverlayStyle : null, style], [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]);
+  const verticalPressableStyle = useCallback(({
+    pressed
+  }) => [tokens.baseContainerStyle, tokens.verticalLayoutStyle, pressed ? pressedOverlayStyle : null, style], [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]);
+  const innerContentStyleArray = useMemo(() => [tokens.innerContentBaseStyle, contentStyle], [tokens.innerContentBaseStyle, contentStyle]);
+  const verticalContentStyleArray = useMemo(() => [tokens.verticalContentBaseStyle, contentStyle], [tokens.verticalContentBaseStyle, contentStyle]);
   if (layout === 'Horizontal') {
-    // Process endSlot to pass modes to children
-    // Force Context: 'ListItem' - this value can never be overridden by external modes
-    const processedEndSlot = endSlot ? cloneChildrenWithModes(React.Children.toArray(endSlot), resolvedModes, {
-      "Context": 'ListItem'
-    }) : [];
-    // Extract single element if array has one element, otherwise use array
-    const trailingContent = processedEndSlot.length > 0 ? processedEndSlot.length === 1 ? processedEndSlot[0] : processedEndSlot : null;
     const innerContent = /*#__PURE__*/_jsxs(View, {
-      style: [innerContentBaseStyle, contentStyle],
+      style: innerContentStyleArray,
       children: [leadingElement, /*#__PURE__*/_jsxs(View, {
         style: {
           flex: 1,
           minWidth: 1,
-          gap: textWrapGap
+          gap: tokens.textWrapGap
         },
         children: [/*#__PURE__*/_jsx(Text, {
-          style: titleTextStyle,
+          style: tokens.titleTextStyle,
           numberOfLines: 1,
           children: title
         }), showSupportText && renderSupportContent()]
-      }), trailingContent ? /*#__PURE__*/_jsx(View, {
-        style: trailingWrapperStyle,
-        children: trailingContent
+      }), processedEndSlot ? /*#__PURE__*/_jsx(View, {
+        style: tokens.trailingWrapperStyle,
+        children: processedEndSlot
       }) : null, navArrow && /*#__PURE__*/_jsx(NavArrow, {
         direction: "Forward",
-        modes: resolvedModes
+        modes: tokens.resolvedModes
       })]
     });
     if (onPress) {
@@ -218,16 +271,13 @@ function ListItem({
         accessibilityRole: "button",
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint,
-        accessibilityState: {
-          ...accessibilityState
-        },
+        accessibilityState: accessibilityState,
         onPress: onPress,
-        style: ({
-          pressed
-        }) => [baseContainerStyle, sharedLayoutStyle, pressed ? {
-          opacity: 0.85
-        } : null, style],
-        ...webPropsHorizontal,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        unstable_pressDelay: PRESS_DELAY,
+        style: horizontalPressableStyle,
+        ...webProps,
         children: innerContent
       });
     }
@@ -235,15 +285,15 @@ function ListItem({
       accessibilityRole: undefined,
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
-      style: [baseContainerStyle, sharedLayoutStyle, style],
+      style: horizontalContainerStyleArray,
       ...rest,
       children: innerContent
     });
   }
 
-  // Vertical layout - icon on top, support text/slot below
+  // Vertical layout — icon on top, support text/slot below
   const verticalContent = /*#__PURE__*/_jsxs(View, {
-    style: [verticalContentBaseStyle, contentStyle],
+    style: verticalContentStyleArray,
     children: [leadingElement, renderSupportContent()]
   });
   if (onPress) {
@@ -251,16 +301,13 @@ function ListItem({
       accessibilityRole: "button",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
-      accessibilityState: {
-        ...accessibilityState
-      },
+      accessibilityState: accessibilityState,
       onPress: onPress,
-      style: ({
-        pressed
-      }) => [baseContainerStyle, sharedLayoutStyle, pressed ? {
-        opacity: 0.85
-      } : null, style],
-      ...webPropsVertical,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      unstable_pressDelay: PRESS_DELAY,
+      style: verticalPressableStyle,
+      ...webProps,
       children: verticalContent
     });
   }
@@ -268,9 +315,10 @@ function ListItem({
     accessibilityRole: undefined,
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
-    style: [baseContainerStyle, sharedLayoutStyle, style],
+    style: verticalContainerStyleArray,
     ...rest,
     children: verticalContent
   });
 }
+const ListItem = /*#__PURE__*/React.memo(ListItemImpl);
 export default ListItem;

package/lib/module/components/MediaCard/MediaCard.js

@@ -3,10 +3,12 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
 import { View, Text, StyleSheet, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_MODES } from '../../utils/react-utils';
+
 /**
  * Context to share 'modes' with child components.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
 /**
  * MediaCard component implementation from Figma node 1241:4140.
@@ -16,7 +18,7 @@ const MediaCardContext = /*#__PURE__*/createContext({});
 export function MediaCard({
   media,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Container Tokens

package/lib/module/components/MerchantProfile/MerchantProfile.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Avatar from '../Avatar/Avatar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -44,7 +45,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function MerchantProfile({
   title = 'Uber India Systems Private Limited',
   subtitle = 'UPI ID: uberindia@ybl',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   avatarProps,
   accessibilityLabel

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -3,6 +3,7 @@
 import React, { useMemo, useEffect, useRef } from 'react';
 import { View, Text, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 // Map of common ISO 4217 currency codes to display symbols
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,7 +57,7 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   valueStyle,
   currencyStyle,

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

@@ -1,31 +1,12 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import Svg, { Polyline } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * NavArrow component that displays a chevron arrow for navigation.
- *
- * Renders a stroked SVG chevron whose dimensions and thickness are
- * fully driven by design tokens:
- * - navArrow/icon/color - chevron stroke color
- * - navArrow/icon/width - chevron arm width (horizontal spread)
- * - navArrow/icon/height - chevron arm height (vertical spread)
- * - navArrow/icon/strokeWeight - stroke thickness
- * - navArrow/width - container width
- * - navArrow/height - container height
- * - navArrow/radius - border radius
- * - navArrow/background - background color
- */
-export default function NavArrow({
-  direction = 'Back',
-  modes = {},
-  style,
-  accessibilityLabel,
-  ...rest
-}) {
+function resolveNavArrowTokens(modes) {
   const iconColor = getVariableByName('navArrow/icon/color', modes) || '#24262b';
   const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6;
   const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10;
@@ -34,54 +15,97 @@ export default 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 isDown = direction === 'Down';
-  const containerWidth = isDown ? heightToken : widthToken;
-  const containerHeight = isDown ? widthToken : heightToken;
-  const containerStyle = {
-    width: containerWidth,
-    height: containerHeight,
+  return {
+    iconColor,
+    iconWidth,
+    iconHeight,
+    strokeWeight,
+    widthToken,
+    heightToken,
     borderRadius,
-    backgroundColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...(style || {})
+    backgroundColor
   };
+}
+
+/**
+ * NavArrow component that displays a chevron arrow for navigation.
+ *
+ * Renders a stroked SVG chevron whose dimensions and thickness are
+ * fully driven by design tokens.
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])` so a parent
+ *    re-render (e.g. from a Section header press) doesn't re-do ~9 token
+ *    lookups per chevron.
+ *  - Container + SVG layout values are derived in a second `useMemo` keyed
+ *    on (tokens, direction, style).
+ *  - Wrapped in `React.memo`.
+ */
+function NavArrow({
+  direction = 'Back',
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}) {
+  const tokens = useMemo(() => resolveNavArrowTokens(modes), [modes]);
+  const computed = useMemo(() => {
+    const isDown = direction === 'Down';
+    const containerWidth = isDown ? tokens.heightToken : tokens.widthToken;
+    const containerHeight = isDown ? tokens.widthToken : tokens.heightToken;
+    const containerStyle = {
+      width: containerWidth,
+      height: containerHeight,
+      borderRadius: tokens.borderRadius,
+      backgroundColor: tokens.backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...(style || {})
+    };
+    const chevronW = isDown ? tokens.iconHeight : tokens.iconWidth;
+    const chevronH = isDown ? tokens.iconWidth : tokens.iconHeight;
+    const pad = tokens.strokeWeight / 2;
+    const svgWidth = chevronW + pad * 2;
+    const svgHeight = chevronH + pad * 2;
+    let points;
+    switch (direction) {
+      case 'Forward':
+        points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`;
+        break;
+      case 'Down':
+        points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`;
+        break;
+      case 'Back':
+      default:
+        points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`;
+        break;
+    }
+    return {
+      containerStyle,
+      svgWidth,
+      svgHeight,
+      points
+    };
+  }, [tokens, direction, style]);
   const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
-  const chevronW = isDown ? iconHeight : iconWidth;
-  const chevronH = isDown ? iconWidth : iconHeight;
-  const pad = strokeWeight / 2;
-  const svgWidth = chevronW + pad * 2;
-  const svgHeight = chevronH + pad * 2;
-  let points;
-  switch (direction) {
-    case 'Forward':
-      points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`;
-      break;
-    case 'Down':
-      points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`;
-      break;
-    case 'Back':
-    default:
-      points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`;
-      break;
-  }
   return /*#__PURE__*/_jsx(View, {
-    style: containerStyle,
+    style: computed.containerStyle,
     accessibilityRole: "image",
     accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
     children: /*#__PURE__*/_jsx(Svg, {
-      width: svgWidth,
-      height: svgHeight,
-      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      width: computed.svgWidth,
+      height: computed.svgHeight,
+      viewBox: `0 0 ${computed.svgWidth} ${computed.svgHeight}`,
       children: /*#__PURE__*/_jsx(Polyline, {
-        points: points,
-        stroke: iconColor,
-        strokeWidth: strokeWeight,
+        points: computed.points,
+        stroke: tokens.iconColor,
+        strokeWidth: tokens.strokeWeight,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         fill: "none"
       })
     })
   });
-}
+}
+export default /*#__PURE__*/React.memo(NavArrow);