jfs-components 0.0.54 → 0.0.56

package/lib/commonjs/components/Accordion/Accordion.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -16,39 +17,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
   _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
 }
-
-/**
- * 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, modes) {
-  const result = _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childChildren = child.props?.children;
-    const hasChildren = childChildren !== undefined && childChildren !== null;
-
-    // Merge modes: 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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
@@ -173,7 +141,7 @@ function Accordion({
   });
 
   // Process children to pass modes
-  const processedChildren = children ? cloneChildrenWithModes(_react.default.Children.toArray(children), modes) : null;
+  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...rest,

package/lib/commonjs/components/AppBar/AppBar.js

@@ -9,41 +9,9 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// We might need to import Image or Svg if we had the assets locally, but for now we'll use placeholders or standard icons for defaults.
-// The user prompt mentioned "Use getVariableByName... strict camelCase".
-
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- */function cloneChildrenWithModes(children, modes) {
-  return _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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
-    const existingModes = child.props?.modes;
-    const mergedModes = existingModes ? {
-      ...modes,
-      ...existingModes
-    } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
-}
 function AppBar({
   type = 'MainPage',
   leadingSlot,
@@ -133,8 +101,8 @@ function AppBar({
   }
 
   // --- Process Slots ---
-  const processedLeading = leadingSlot ? cloneChildrenWithModes([leadingSlot], modes)[0] : defaultLeading;
-  const processedMiddle = middleSlot ? cloneChildrenWithModes(_react.default.Children.toArray(middleSlot), modes) : null;
+  const processedLeading = leadingSlot ? (0, _reactUtils.cloneChildrenWithModes)([leadingSlot], modes)[0] : defaultLeading;
+  const processedMiddle = middleSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(middleSlot), modes) : null;
 
   // Actions Gap wrapper
   // The Figma has "Actions" slot with a gap.
@@ -145,7 +113,7 @@ function AppBar({
   };
   const processedActions = actionsSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: actionsStyle,
-    children: cloneChildrenWithModes(_react.default.Children.toArray(actionsSlot), modes)
+    children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],

package/lib/commonjs/components/Drawer/Drawer.js

@@ -186,17 +186,24 @@ function Drawer({
     const totalRange = maxTranslateY - minTranslateY;
     const currentRatio = totalRange > 0 ? (translateY.value - minTranslateY) / totalRange : 0;
 
-    // Fast fling → always follow the fling direction
-    if (event.velocityY < -500) {
+    // How far the drawer sheet itself moved from its position at gesture
+    // start.  When the scroll view consumed the gesture (content was not
+    // at the top), the drawer stays put and displacement ≈ 0 — even
+    // though the finger moved fast.  We must NOT use velocity to snap in
+    // that case; otherwise a fast content-scroll collapses the drawer.
+    const drawerDisplacement = Math.abs(translateY.value - context.value.y);
+    const drawerMovedEnough = drawerDisplacement > 10;
+    if (drawerMovedEnough && event.velocityY < -500) {
       scrollTo(minTranslateY);
       isFullyExpanded.value = true;
       (0, _reactNativeReanimated.runOnJS)(updateMode)('expanded');
-    } else if (event.velocityY > 500) {
+    } else if (drawerMovedEnough && event.velocityY > 500) {
       scrollTo(maxTranslateY);
       isFullyExpanded.value = false;
       (0, _reactNativeReanimated.runOnJS)(updateMode)('collapsed');
     } else {
-      // Slow / medium gesture → use asymmetric snap thresholds.
+      // Slow / medium gesture, or the drawer barely moved → position
+      // based snap with asymmetric thresholds.
       // Down stroke: must cross 75% to collapse (hard to dismiss).
       // Up stroke: must reach top 35% to expand (35% from top).
       const isDraggingDown = event.velocityY >= 0;

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -8,42 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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, modes) {
-  const result = _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * FilterBar component that mirrors the Figma "filterBar" component.
  *
@@ -125,7 +93,7 @@ function FilterBar({
     });
   } else if (children) {
     // Clone custom children and inject onFocus/onBlur where possible.
-    const cloned = cloneChildrenWithModes(_react.default.Children.toArray(children), modes);
+    const cloned = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes);
     processedChildren = _react.default.Children.map(cloned, child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
       const existingOnFocus = child.props?.onFocus;

package/lib/commonjs/components/LazyList/LazyList.js

@@ -7,41 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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, modes) {
-  return _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childProps = child.props;
-    const childChildren = childProps?.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 = childProps?.modes;
-    const mergedModes = existingModes ? {
-      ...modes,
-      ...existingModes
-    } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...childProps,
-      modes: mergedModes
-    }, processedChildren);
-  });
-}
 /**
  * LazyList component that mirrors the Figma "LazyList" component.
  *
@@ -85,7 +53,7 @@ function LazyList({
   };
 
   // Clone listGroupsSlot children and pass modes to all children that accept it
-  const processedSlot = listGroupsSlot ? cloneChildrenWithModes(_react.default.Children.toArray(listGroupsSlot), modes) : null;
+  const processedSlot = listGroupsSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(listGroupsSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityRole: "list",

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -20,17 +20,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
@@ -39,6 +43,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -75,10 +80,11 @@ function ListGroup({
     fontWeight: labelFontWeight
   };
 
-  // Clone listGroupSlot children and pass modes to all children that accept it
-  // We flatten children first so that if a Fragment is passed, the items inside
-  // become direct children of the container, allowing `gap` to apply correctly between them.
-  const processedSlot = listGroupSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(listGroupSlot), modes) : null;
+  // Merge listGroupSlot and children into a single list, then flatten and
+  // propagate modes.  Both props are interchangeable; when both are provided
+  // the slot items render first, followed by children.
+  const rawItems = [...(listGroupSlot ? (0, _reactUtils.flattenChildren)(listGroupSlot) : []), ...(children ? (0, _reactUtils.flattenChildren)(children) : [])];
+  const processedSlot = rawItems.length > 0 ? (0, _reactUtils.cloneChildrenWithModes)(rawItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -99,7 +99,7 @@ function MoneyValue({
   const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes) || 500;
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes) || 'System';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/gap', modes) || 4;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/gap', modes) ?? 4;
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes
   const resolvedCurrency = (0, _react.useMemo)(() => {

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -6,28 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = NavArrow;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * NavArrow component that displays a small chevron arrow for navigation.
+ * NavArrow component that displays a chevron arrow for navigation.
  *
- * This component uses design tokens for all visual properties:
+ * Renders a stroked SVG chevron whose dimensions and thickness are
+ * fully driven by design tokens:
  * - navArrow/icon/color - chevron stroke color
- * - navArrow/icon/width - icon width
- * - navArrow/icon/height - icon height
- * - navArrow/icon/strokeWeight - stroke width
+ * - 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
- *
- * @component
- * @param {Object} props
- * @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
  */
 function NavArrow({
   direction = 'Back',
@@ -36,22 +32,20 @@ function NavArrow({
   accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
-
-  // Dimensions from tokens
   const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
   const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
   const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
-
-  // Swap dimensions if direction is Down
+  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
+  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
+  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
   const isDown = direction === 'Down';
-  const width = isDown ? heightToken : widthToken;
-  const height = isDown ? widthToken : heightToken;
+  const containerWidth = isDown ? heightToken : widthToken;
+  const containerHeight = isDown ? widthToken : heightToken;
   const containerStyle = {
-    width,
-    height,
+    width: containerWidth,
+    height: containerHeight,
     borderRadius,
     backgroundColor,
     alignItems: 'center',
@@ -59,34 +53,41 @@ function NavArrow({
     ...(style || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
-
-  // Map direction to icon name
-  let iconName = 'ic_chevron_left'; // Default for Back
-  if (direction === 'Forward') {
-    iconName = 'ic_chevron_right';
-  } else if (direction === 'Down') {
-    iconName = 'ic_chevron_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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: containerStyle,
     accessibilityRole: "image",
-    accessibilityLabel: undefined,
+    accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: iconName,
-      size: 24 // Internal icon size is fixed/clipped by container in design but Icon requires a size
-      ,
-      color: iconColor,
-      style: {
-        // Center the larger icon within the small container if needed,
-        // though flex center on container handles this.
-        // If the container is 6x10 and icon is 24, we might want to ensure it doesn't affect layout
-        // but Flexbox 'center' centers the content.
-        // However, if the icon component has its own frame, it might overflow.
-        // React Native View has overflow: 'hidden' by default if borderRadius is set? No.
-        // We might want overflow: 'hidden' if strictly following design clip.
-        // Figma design had "overflow-clip" class.
-      }
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polyline, {
+        points: points,
+        stroke: iconColor,
+        strokeWidth: strokeWeight,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })
     })
   });
 }

package/lib/commonjs/components/Numpad/Numpad.js

@@ -7,8 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _IconDeletebackspace = require("../../icons/components/IconDeletebackspace");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function shuffleArray(arr) {
   const shuffled = [...arr];
@@ -92,10 +93,10 @@ function Numpad({
           onPress: () => handlePress(key),
           accessibilityRole: "button",
           accessibilityLabel: isBackspace ? 'Backspace' : key,
-          children: isBackspace ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconDeletebackspace.IconDeletebackspace, {
-            width: fontSize,
-            height: fontSize,
-            fill: foreground
+          children: isBackspace ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "ic_delete_backspace",
+            size: fontSize,
+            color: foreground
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [textStyle, keyTextStyle],
             children: key

package/lib/commonjs/components/Section/Section.js

@@ -66,7 +66,8 @@ function Section({
   } : {};
   // Resolve section container tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 12;
+  const sectionGap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
+  const slotGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 12;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
   const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
@@ -96,7 +97,7 @@ function Section({
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
-    gap
+    gap: sectionGap
   };
   const headerStyle = {
     paddingHorizontal: headerPaddingHorizontal,
@@ -204,9 +205,9 @@ function Section({
     }), slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: slotDirection,
-        gap
+        gap: slotGap
       },
-      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(slot), modes)
+      children: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes)
     })]
   });
 }
@@ -254,10 +255,8 @@ function SectionBento({
     borderRadius: radius,
     gap
   };
-
-  // Process slots to pass modes to children
-  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(upiSlot), modes) : null;
+  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(upiSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...(_reactNative.Platform.OS === 'web' ? {

package/lib/commonjs/components/TextInput/TextInput.js

@@ -8,43 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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, modes) {
-  const result = _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
-
 /**
  * TextInput component that mirrors the Figma "textInput" component.
  *
@@ -76,8 +43,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * Helper function to convert a color to a more transparent version for placeholder text.
  * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
- */
-function makePlaceholderColor(color, opacity = 0.5) {
+ */function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';
   }
@@ -220,8 +186,8 @@ function TextInput({
   });
 
   // Clone leading and trailing slots and pass modes to all children that accept it
-  const processedLeading = leadingElement ? cloneChildrenWithModes(_react.default.Children.toArray(leadingElement), modes) : null;
-  const processedTrailing = trailing ? cloneChildrenWithModes(_react.default.Children.toArray(trailing), modes) : null;
+  const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leadingElement), modes) : null;
+  const processedTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailing), modes) : null;
 
   // Handle focus events
   const handleFocus = e => {