jfs-components 0.0.54 → 0.0.56

package/lib/commonjs/utils/react-utils.js

@@ -12,17 +12,25 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 function cloneChildrenWithModes(children, modes, forcedModes) {
-  return _react.default.Children.map(children, child => {
+  const result = [];
+  _react.default.Children.forEach(children, child => {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
+      if (child !== null && child !== undefined) {
+        result.push(child);
+      }
+      return;
     }
 
-    // Get existing children
+    // Unwrap Fragments: Fragments can't accept arbitrary props like `modes`,
+    // so recurse into their children and process each one individually.
+    if (child.type === _react.default.Fragment) {
+      const fragment = child;
+      result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+      return;
+    }
     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;
@@ -34,16 +42,13 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes, forcedModes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
+    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    result.push(/*#__PURE__*/_react.default.cloneElement(child, {
       ...child.props,
       modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
+    }, processedChildren));
+  });
+  return result;
 }
 
 /**

package/lib/module/components/Accordion/Accordion.js

@@ -5,45 +5,13 @@ import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'rea
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 
 // Enable LayoutAnimation on Android
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   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.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;
-
-    // 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.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *

package/lib/module/components/AppBar/AppBar.js

@@ -5,41 +5,8 @@ import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import NavArrow from '../NavArrow/NavArrow';
-// 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.
- */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  return 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
-    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);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
-}
 export default function AppBar({
   type = 'MainPage',
   leadingSlot,

package/lib/module/components/Drawer/Drawer.js

@@ -181,17 +181,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;
       runOnJS(updateMode)('expanded');
-    } else if (event.velocityY > 500) {
+    } else if (drawerMovedEnough && event.velocityY > 500) {
       scrollTo(maxTranslateY);
       isFullyExpanded.value = false;
       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/module/components/FilterBar/FilterBar.js

@@ -4,42 +4,8 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import TextInput from '../TextInput/TextInput';
-
-/**
- * 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 } 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 || [];
-}
 /**
  * FilterBar component that mirrors the Figma "filterBar" component.
  *

package/lib/module/components/LazyList/LazyList.js

@@ -3,42 +3,8 @@
 import React from 'react';
 import { View } from 'react-native';
 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 } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  return React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.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.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...childProps,
-      modes: mergedModes
-    }, processedChildren);
-  });
-}
 /**
  * LazyList component that mirrors the Figma "LazyList" component.
  *

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

@@ -15,17 +15,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * 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
@@ -34,6 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -70,10 +75,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 ? cloneChildrenWithModes(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 ? flattenChildren(listGroupSlot) : []), ...(children ? flattenChildren(children) : [])];
+  const processedSlot = rawItems.length > 0 ? cloneChildrenWithModes(rawItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";

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

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

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

@@ -2,27 +2,22 @@
 
 import React from 'react';
 import { View } from 'react-native';
+import Svg, { Polyline } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 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
  */
 export default function NavArrow({
   direction = 'Back',
@@ -31,22 +26,20 @@ export default function NavArrow({
   accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens
   const iconColor = getVariableByName('navArrow/icon/color', modes) || '#24262b';
-
-  // Dimensions from tokens
   const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6;
   const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10;
   const borderRadius = Number(getVariableByName('navArrow/radius', modes)) || 0;
   const backgroundColor = getVariableByName('navArrow/background', modes) || 'transparent';
-
-  // Swap dimensions if direction is Down
+  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 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',
@@ -54,34 +47,41 @@ export default 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__*/_jsx(View, {
     style: containerStyle,
     accessibilityRole: "image",
-    accessibilityLabel: undefined,
+    accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/_jsx(Icon, {
-      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__*/_jsx(Svg, {
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      children: /*#__PURE__*/_jsx(Polyline, {
+        points: points,
+        stroke: iconColor,
+        strokeWidth: strokeWeight,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })
     })
   });
 }

package/lib/module/components/Numpad/Numpad.js

@@ -3,7 +3,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace';
+import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function shuffleArray(arr) {
   const shuffled = [...arr];
@@ -87,10 +87,10 @@ function Numpad({
           onPress: () => handlePress(key),
           accessibilityRole: "button",
           accessibilityLabel: isBackspace ? 'Backspace' : key,
-          children: isBackspace ? /*#__PURE__*/_jsx(IconDeletebackspace, {
-            width: fontSize,
-            height: fontSize,
-            fill: foreground
+          children: isBackspace ? /*#__PURE__*/_jsx(Icon, {
+            name: "ic_delete_backspace",
+            size: fontSize,
+            color: foreground
           }) : /*#__PURE__*/_jsx(Text, {
             style: [textStyle, keyTextStyle],
             children: key

package/lib/module/components/Section/Section.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Section component that mirrors the Figma "Section" component.
@@ -60,7 +60,8 @@ function Section({
   } : {};
   // Resolve section container tokens
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff';
-  const gap = getVariableByName('slot/gap', modes) || 12;
+  const sectionGap = getVariableByName('section/gap', modes) || 12;
+  const slotGap = getVariableByName('slot/gap', modes) || 12;
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12;
   const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16;
   const radius = getVariableByName('section/radius', modes) || 12;
@@ -90,7 +91,7 @@ function Section({
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
-    gap
+    gap: sectionGap
   };
   const headerStyle = {
     paddingHorizontal: headerPaddingHorizontal,
@@ -198,9 +199,9 @@ function Section({
     }), slot && /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: slotDirection,
-        gap
+        gap: slotGap
       },
-      children: cloneChildrenWithModes(React.Children.toArray(slot), modes)
+      children: cloneChildrenWithModes(flattenChildren(slot), modes)
     })]
   });
 }
@@ -248,10 +249,8 @@ function SectionBento({
     borderRadius: radius,
     gap
   };
-
-  // Process slots to pass modes to children
-  const processedNavSlot = navSlot ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes) : null;
+  const processedNavSlot = navSlot ? cloneChildrenWithModes(flattenChildren(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(flattenChildren(upiSlot), modes) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     ...(Platform.OS === 'web' ? {

package/lib/module/components/TextInput/TextInput.js

@@ -4,42 +4,7 @@ import React, { useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-
-/**
- * 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 { 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 || [];
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -73,6 +38,7 @@ function cloneChildrenWithModes(children, modes) {
  * 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.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';